@charset "UTF-8";
:root { --ink:#1c354c; --ice:#cddfea; --pink:#e9c6d5; --ease:cubic-bezier(.22,1,.36,1); --intro-time:4.8s; font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif; color:var(--ice); background:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none !important; }
button:focus-visible,a:focus-visible { outline:2px solid currentColor; outline-offset:7px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.entry-page,.entry-shell { min-height:100svh; }
.entry-page { overflow-x:hidden; }
.entry-header { position:absolute; z-index:20; left:4.4vw; right:4.4vw; top:32px; display:flex; justify-content:space-between; align-items:center; color:var(--ice); transition:color .7s ease .2s; }
.entry-logo { font-size:18px; font-weight:600; display:flex; align-items:center; gap:10px; }
.entry-logo>span:first-child { font-size:23px; font-weight:400; color:var(--pink); transition:color .7s; }
.logo-en { font:10px Arial,sans-serif; letter-spacing:2px; margin-left:8px; }
.review-nav { display:flex; align-items:center; gap:17px; font-size:11px; }
.review-nav a[data-palette] { display:grid; place-content:center; border:1px solid transparent; width:29px; height:29px; border-radius:50%; transition:border-color .2s; font-size:9px; }
.review-nav a[aria-current="page"] { border-color:currentColor; }
#compare-link { margin-left:8px; letter-spacing:1px; }
#compare-link span { margin-left:7px; }
.opening-layer { position:fixed; inset:0; z-index:10; width:100%; height:100svh; min-height:320px; background:var(--ink); transform:translateY(0); transition:transform 1.15s var(--ease),visibility 1.15s; overflow:hidden; }
.oui-stage { height:100%; position:relative; }
.stage-eyebrow { position:absolute; top:18.8%; left:8.2vw; font-size:10px; letter-spacing:2px; opacity:.65; }
.oui-statement { position:absolute; left:8vw; top:26%; font-weight:400; font-size:clamp(64px,8.4vw,150px); line-height:1.18; letter-spacing:-.065em; }
.line-window { display:block; overflow:hidden; padding-right:.07em; }
.a-line { display:block; transform:translateY(110%); animation:line-arrive 1.3s var(--ease) .25s forwards; }
.line-window:nth-child(2) .a-line { animation-delay:.68s; }
.line-window:nth-child(3) .a-line { animation-delay:1.12s; }
.a-line-pink { color:var(--pink); }
.full-stop { margin-left:-.14em; }
.oui-side { position:absolute; right:7.5vw; top:40%; display:flex; gap:32px; writing-mode:vertical-rl; font-size:10px; letter-spacing:2px; opacity:.6; }
.oui-bottom { position:absolute; left:8.2vw; bottom:8.4%; display:flex; gap:40px; font-size:10px; letter-spacing:1.5px; opacity:.65; }
.entry-open { position:absolute; inset:88px 0 0; width:100%; border:0; background:transparent; color:inherit; }
.entry-open:focus-visible { outline:1px solid var(--pink); outline-offset:-14px; }
.opening-next { position:absolute; bottom:7.5%; right:7.5vw; display:flex; align-items:center; gap:26px; pointer-events:none; }
.opening-next>div { display:flex; flex-direction:column; gap:9px; font-size:13px; letter-spacing:1px; }
.opening-next small { font-size:10px; letter-spacing:.5px; opacity:.58; }
.next-orbit { position:relative; display:grid; place-items:center; width:64px; height:64px; font:27px Arial,sans-serif; transition:transform .5s var(--ease); }
.next-orbit svg { position:absolute; width:100%; height:100%; transform:rotate(-90deg); fill:none; stroke:currentColor; stroke-width:.7; }
.orbit-base { opacity:.2; }
.orbit-progress { stroke:var(--pink); stroke-dasharray:188.5; stroke-dashoffset:188.5; animation:orbit-count var(--intro-time) linear forwards; }
.opening-layer:has(.entry-open:hover) .next-orbit { transform:rotate(45deg); }
.rejouice-stage { display:none; }
html[data-opening="rejouice"] { --intro-time:5.4s; }
html[data-opening="rejouice"] .entry-header { color:var(--ink); }
html[data-opening="rejouice"] .entry-logo>span:first-child { color:var(--ink); }
html[data-opening="rejouice"] .opening-layer { background:var(--ice); }
html[data-opening="rejouice"] .oui-stage { display:none; }
html[data-opening="rejouice"] .rejouice-stage { display:block; position:relative; height:100%; color:var(--ink); }
.b-prelude { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:20px; font-size:20px; letter-spacing:3px; animation:prelude-away .6s var(--ease) 1s forwards; }
.b-prelude small { font-size:9px; letter-spacing:1.4px; opacity:.65; }
.pink-dot { color:#8c4f6a; margin-left:4px; font-size:32px; }
.b-curtain { position:absolute; inset:0; background:var(--pink); transform:translateY(100%); animation:curtain-arrive 1.05s var(--ease) 1.3s forwards; }
.b-reveal { position:relative; height:100%; opacity:0; animation:reveal-arrive 1s var(--ease) 1.65s forwards; }
.b-wordmark { position:absolute; left:3.6vw; top:20%; white-space:nowrap; font-size:25.3vw; font-weight:500; letter-spacing:-.08em; line-height:.83; transform:translateY(45px); animation:wordmark-arrive 1.4s var(--ease) 1.55s forwards; }
.b-wordmark>span { color:var(--ink); opacity:.32; }
.b-story { position:absolute; left:7.5vw; right:7.5vw; bottom:26%; display:flex; justify-content:space-between; align-items:flex-end; }
.b-story p { margin:0; font-size:clamp(24px,2.6vw,48px); line-height:1.48; letter-spacing:-.03em; font-weight:400; }
.b-story>span { font-size:11px; letter-spacing:1.5px; line-height:1.8; text-align:right; }
.b-edition { position:absolute; left:7.5vw; bottom:9.5%; font-size:10px; letter-spacing:1.6px; }
html[data-opening="rejouice"] .opening-next { color:var(--ink); }
html[data-opening="rejouice"] .orbit-progress { stroke:var(--ink); }
/* Both visual variants share the existing server-backed invitation and admin access. */
.login-area { position:relative; min-height:100svh; color:var(--ink); background:var(--ice); padding:clamp(135px,21svh,230px) 8vw 125px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr); column-gap:8vw; align-items:start; }
.login-story { padding-top:6px; }
.login-kicker { font-size:10px; letter-spacing:1.8px; margin:0 0 30px; opacity:.7; }
.login-story h1 { font-size:clamp(42px,5.2vw,92px); font-weight:400; line-height:1.35; letter-spacing:-.06em; margin:0 0 27px; outline:none; }
.login-description { font-size:14px; line-height:1.9; margin:0; opacity:.75; }
.login-signature { display:flex; gap:23px; align-items:baseline; margin-top:7svh; }
.login-signature>span { font-size:clamp(27px,3vw,52px); letter-spacing:-.065em; }
.signature-dot { color:#9b5c79; }
.login-signature small { font-size:10px; letter-spacing:3px; opacity:.65; }
.login-form-wrap { max-width:450px; width:100%; justify-self:end; padding-top:7px; }
.form-heading>span { font-size:10px; letter-spacing:2px; opacity:.6; }
.form-heading h2 { font-size:27px; font-weight:400; margin:22px 0 38px; letter-spacing:-.03em; }
label { display:block; font-size:11px; letter-spacing:1px; margin:0 0 12px; }
input { display:block; width:100%; min-height:54px; padding:9px 0 14px; color:var(--ink); background:transparent; border:0; border-radius:0; border-bottom:1px solid #1c354c55; font-size:17px; outline:none; transition:border-color .2s; }
input:focus { border-bottom:2px solid var(--ink); padding-bottom:13px; }
input::placeholder { color:#1c354c80; opacity:1; }
.invite-input { letter-spacing:1px; font-size:clamp(13px,1.4vw,18px); }
.field-help { font-size:10px; opacity:.58; margin:15px 0 0; line-height:1.7; }
#admin-fields>label:not(:first-child) { margin-top:27px; }
.password-field { position:relative; }
.password-field input { padding-right:60px; }
.password-field button { position:absolute; top:11px; right:0; color:inherit; background:transparent; border:0; font-size:10px; padding:8px 4px; }
.login-status { min-height:27px; font-size:11px; line-height:1.7; margin:18px 0 13px; color:#853c5d; }
.login-submit { width:100%; min-height:59px; padding:15px 20px; display:flex; align-items:center; justify-content:space-between; color:var(--ice); background:var(--ink); border:1px solid var(--ink); border-radius:0; font-size:13px; letter-spacing:1px; transition:background .2s,color .2s; }
.login-submit>span:last-child { font-size:24px; }
.login-submit:hover { background:#29475f; }
.login-submit:disabled { opacity:.6; cursor:wait; }
.mode-switch { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; font-size:10px; }
.mode-switch>span { opacity:.6; }
.mode-switch button { border:0; background:transparent; color:inherit; padding:5px 0; border-bottom:1px solid #1c354c60; font-size:11px; }
.entry-back { position:absolute; left:4.4vw; bottom:35px; display:flex; gap:8px; align-items:center; border:0; background:transparent; padding:6px 0; color:inherit; font-size:11px; }
.entry-back>span { font-size:18px; }
.login-footer { position:absolute; left:43%; right:4.4vw; bottom:42px; display:flex; justify-content:space-between; gap:20px; font-size:10px; opacity:.6; }
.is-open { color:var(--ink); background:var(--ice); }
.is-open .entry-header { color:var(--ink); }
.is-open .entry-logo>span:first-child { color:#96617c; }
.is-open .opening-layer { transform:translateY(-100%); visibility:hidden; pointer-events:none; }
.is-open .login-story,.is-open .login-form-wrap { animation:login-arrive 1.3s var(--ease) .15s both; }
.is-open .login-form-wrap { animation-delay:.3s; }
.is-leaving .login-area { opacity:0; transition:opacity .3s; }
html[data-opening="rejouice"] .login-area { background:var(--ink); color:var(--ice); }
html[data-opening="rejouice"] .is-open { background:var(--ink); color:var(--ice); }
html[data-opening="rejouice"] .is-open .entry-header { color:var(--ice); }
html[data-opening="rejouice"] .is-open .entry-logo>span:first-child { color:var(--pink); }
html[data-opening="rejouice"] .login-story h1 { color:var(--pink); }
html[data-opening="rejouice"] input { color:var(--ice); border-bottom-color:#cddfea66; }
html[data-opening="rejouice"] input::placeholder { color:#cddfea80; }
html[data-opening="rejouice"] input:focus { border-bottom-color:var(--pink); }
html[data-opening="rejouice"] .login-submit { background:var(--pink); border-color:var(--pink); color:var(--ink); }
html[data-opening="rejouice"] .login-submit:hover { background:var(--ice); border-color:var(--ice); }
html[data-opening="rejouice"] .mode-switch button { border-color:#cddfea66; }
html[data-opening="rejouice"] .login-status,html[data-opening="rejouice"] .signature-dot { color:var(--pink); }
.no-script { position:fixed; inset:35% 10% auto; z-index:30; padding:30px; color:var(--ink); background:var(--ice); text-align:center; line-height:2; }
@keyframes line-arrive { to { transform:translateY(0); } }
@keyframes orbit-count { to { stroke-dashoffset:0; } }
@keyframes prelude-away { to { opacity:0; transform:translateY(-20px); } }
@keyframes curtain-arrive { to { transform:translateY(0); } }
@keyframes reveal-arrive { to { opacity:1; } }
@keyframes wordmark-arrive { to { transform:translateY(0); } }
@keyframes login-arrive { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1900px) { .oui-statement { top:24%; } .b-wordmark { top:18%; } }
@media(max-width:900px) {
 .entry-header { left:6vw; right:6vw; top:26px; }
 .logo-en { display:none; }
 .oui-statement { left:8vw; top:29%; font-size:11vw; }
 .oui-side { right:8vw; top:33%; }
 .stage-eyebrow { top:22%; }
 .oui-bottom { bottom:20%; flex-direction:column; gap:12px; }
 .opening-next { right:8vw; bottom:6%; }
 .b-wordmark { top:29%; }
 .b-story { bottom:28%; }
 .login-area { padding:135px 7vw 110px; grid-template-columns:1fr 1fr; gap:6vw; }
 .login-story h1 { font-size:5.2vw; }
 .login-footer { left:40%; right:6vw; }
}
@media(max-width:620px) {
 .entry-header { top:24px; }
 .entry-logo { font-size:16px; gap:7px; }
 .review-nav { gap:10px; font-size:10px; }
 #compare-link { margin-left:0; letter-spacing:0; }
 #compare-link span { display:none; }
 .entry-open { top:75px; }
 .stage-eyebrow { top:23%; font-size:8px; letter-spacing:1.5px; }
 .oui-statement { top:31%; font-size:15.5vw; line-height:1.35; }
 .oui-side { display:none; }
 .oui-bottom { bottom:22%; font-size:8px; gap:10px; }
 .opening-next { bottom:6%; gap:18px; }
 .opening-next>div { font-size:11px; }
 .opening-next small { font-size:9px; }
 .next-orbit { width:52px; height:52px; font-size:23px; }
 .b-prelude { font-size:16px; letter-spacing:1px; gap:16px; }
 .b-wordmark { top:31%; font-size:25.3vw; }
 .b-story { bottom:29%; left:8vw; right:8vw; }
 .b-story p { font-size:28px; }
 .b-story>span { font-size:8px; letter-spacing:.8px; }
 .b-edition { bottom:20%; left:8vw; font-size:8px; }
 .login-area { padding:118px 8vw 125px; grid-template-columns:1fr; gap:44px; }
 .login-story { padding:0; }
 .login-kicker { font-size:8px; margin-bottom:20px; }
 .login-story h1 { font-size:10.7vw; line-height:1.35; margin-bottom:18px; }
 .login-description { font-size:12px; }
 .login-signature { display:none; }
 .login-form-wrap { padding:0; max-width:none; }
 .form-heading>span { font-size:8px; }
 .form-heading h2 { font-size:23px; margin:14px 0 26px; }
 .login-submit { min-height:56px; }
 .login-footer { left:auto; right:8vw; bottom:41px; }
 .login-footer>span:first-child { display:none; }
 .entry-back { left:8vw; }
 .invite-input { font-size:16px; }
}
@media(max-height:650px) and (min-width:621px) {
 .oui-statement { top:23%; font-size:clamp(50px,7vw,98px); }
 .stage-eyebrow { top:17%; }
 .oui-bottom { bottom:7%; }
 .b-wordmark { top:18%; font-size:min(25.3vw,49svh); }
 .b-story { bottom:20%; }
 .b-story p { font-size:18px; line-height:1.35; }
 .b-story>span { display:none; }
 .login-area { padding-top:115px; padding-bottom:110px; }
 .login-story h1 { font-size:4.6vw; }
 .login-kicker { margin-bottom:22px; }
 .login-signature { margin-top:4svh; }
 .form-heading h2 { margin:15px 0 25px; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
 .a-line { transform:none; }
 .b-prelude { display:none; }
 .b-curtain { transform:none; }
 .b-reveal { opacity:1; }
 .b-wordmark { transform:none; }
 .orbit-progress { stroke-dashoffset:0; }
}
/* B opening colour studies. Colours come from the existing homepage and services. */
html[data-opening="rejouice"] {
 --ink:#141a2d; --ice:#e4edf5; --pink:#b5d8e7;
 --opening-bg:#b5d8e7; --opening-ink:#141a2d;
 --prelude-bg:#e4edf5; --prelude-ink:#141a2d;
 --login-bg:#f8f8fa; --login-ink:#141a2d; --login-title:#172239;
 --accent:#627dbc; --button-bg:#172239; --button-ink:#f8f8fa; --button-hover:#263a4b;
 --error-ink:#943e31; background:var(--prelude-bg);
}
html[data-opening="rejouice"][data-palette="pearl"] {
 --opening-bg:#f8f8fa; --opening-ink:#172239;
 --prelude-bg:#e4edf5; --prelude-ink:#172239;
 --login-bg:#e4edf5; --login-ink:#172239; --login-title:#141a2d;
 --accent:#627dbc; --button-bg:#172239; --button-ink:#f8f8fa; --button-hover:#263a4b;
}
html[data-opening="rejouice"][data-palette="night"] {
 --opening-bg:#172239; --opening-ink:#e4edf5;
 --prelude-bg:#10243b; --prelude-ink:#e4edf5;
 --login-bg:#172239; --login-ink:#e4edf5; --login-title:#c7d9ed;
 --accent:#b5d8e7; --button-bg:#c7d9ed; --button-ink:#172239; --button-hover:#f8f8fa;
 --error-ink:#efb29c;
}
html[data-opening="rejouice"][data-palette="aurora"] {
 --opening-bg:linear-gradient(112deg,#d2ccdf 0%,#c7d9ed 48%,#acdaf0 100%); --opening-ink:#141a2d;
 --prelude-bg:#f8f8fa; --prelude-ink:#141a2d;
 --login-bg:#e9edf3; --login-ink:#172239; --login-title:#141a2d;
 --accent:#565e78; --button-bg:#172239; --button-ink:#f8f8fa; --button-hover:#263a4b;
}
html[data-opening="rejouice"] .entry-header,
html[data-opening="rejouice"] .entry-logo>span:first-child,
html[data-opening="rejouice"] .opening-next,
html[data-opening="rejouice"] .rejouice-stage { color:var(--opening-ink); }
html[data-opening="rejouice"] .opening-layer { background:var(--prelude-bg); }
html[data-opening="rejouice"] .b-prelude { color:var(--prelude-ink); }
html[data-opening="rejouice"] .pink-dot { color:var(--accent); }
html[data-opening="rejouice"] .b-curtain { background:var(--opening-bg); }
html[data-opening="rejouice"] .b-wordmark>span { color:var(--opening-ink); opacity:.4; }
html[data-opening="rejouice"] .orbit-progress { stroke:var(--opening-ink); }
html[data-opening="rejouice"] .entry-open:focus-visible { outline-color:var(--opening-ink); }
.b-edition #palette-label { margin-left:25px; opacity:.65; }
html[data-opening="rejouice"] .login-area,
html[data-opening="rejouice"] .is-open { background:var(--login-bg); color:var(--login-ink); }
html[data-opening="rejouice"] .is-open .entry-header { color:var(--login-ink); }
html[data-opening="rejouice"] .is-open .entry-logo>span:first-child,
html[data-opening="rejouice"] .signature-dot { color:var(--accent); }
html[data-opening="rejouice"] .login-story h1 { color:var(--login-title); }
html[data-opening="rejouice"] input { color:var(--login-ink); border-bottom-color:color-mix(in srgb,var(--login-ink) 38%,transparent); }
html[data-opening="rejouice"] input::placeholder { color:color-mix(in srgb,var(--login-ink) 52%,transparent); }
html[data-opening="rejouice"] input:focus { border-bottom-color:var(--accent); }
html[data-opening="rejouice"] .login-submit { background:var(--button-bg); color:var(--button-ink); border-color:var(--button-bg); }
html[data-opening="rejouice"] .login-submit:hover { background:var(--button-hover); border-color:var(--button-hover); }
html[data-opening="rejouice"] .mode-switch button { border-color:color-mix(in srgb,var(--login-ink) 38%,transparent); }
html[data-opening="rejouice"] .login-status { color:var(--error-ink); }
@media(max-width:620px) {
 .review-nav { gap:5px; }
 .review-nav a[data-palette] { width:25px; height:25px; font-size:8px; }
 #compare-link { margin-left:7px; font-size:9px; }
 .b-edition #palette-label { display:block; margin:12px 0 0; }
}