/* wall.css - the ENTRY AESTHETIC (TM-CPO82). The shared "quiet room" design language for the three pre-app standalone pages: /go (capture), / (login wall), /reveal (post-login first-run). Kong CPO82: "match the new wall aesthetic" - all entry pages wear the CD_LOGIN_WALL look (void gradient + glass card + 印章 seal + single gold accent + a pre-sign-in element glow), in the v2 design language (Spectral, the v2 chop seal, v2 bg/gold/cream). SELF-CONTAINED on purpose: the entry pages are the pre-app threshold, so they do NOT link app_shell.css / appearance_immersive.css (no el-soft flood to fight the void gradient). The token VALUES mirror the canonical app layer so the user crosses into the app with no visual snap. L17: ASCII hyphens only. No em/en dashes anywhere. */ /* ===== TOKENS (dark = default; mirrors app_shell.css :root + the CD wall's gold/void/card extras) ===== */ :root{ --void:#08070a; --bg:#0c0b09; --bg2:#13110d; --bg3:#1f1a12; --surface:#1a1712; --surface2:#211d16; --ink:#0e0d0b; --ivory:#f2ead9; --soft:#cdc4b4; --muted:#9d9280; --faint:#665c4d; --neutral:#cdbb91; --line:rgba(242,234,217,.12); --line-soft:rgba(242,234,217,.07); --gold:#e9c45e; --gold-deep:#caa54e; --gold-ink:#f4dd92; --red:#d9544a; --fire:#e0533f; --serif:'Spectral',Georgia,'Songti SC','Noto Serif SC',serif; --cjk:'Noto Serif SC','Songti SC',serif; --mono:'Spline Sans Mono',ui-monospace,Menlo,monospace; --system:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --card-bg:rgba(21,18,13,.66); --card-blur:14px; --el:#6a9fd0; --el-deep:#466f9b; --el-glow:rgba(106,159,208,.5); --el-soft:rgba(106,159,208,.12); } body.el-wood { --el:#6fb58a; --el-deep:#4a8d68; --el-glow:rgba(111,181,138,.5); --el-soft:rgba(111,181,138,.12); } body.el-fire { --el:#e0533f; --el-deep:#b83b2c; --el-glow:rgba(224,83,63,.5); --el-soft:rgba(224,83,63,.12); } body.el-earth{ --el:#e0ad4c; --el-deep:#b8862e; --el-glow:rgba(224,173,76,.5); --el-soft:rgba(224,173,76,.12); } body.el-metal{ --el:#e3d7b0; --el-deep:#b3a373; --el-glow:rgba(227,215,176,.45);--el-soft:rgba(227,215,176,.12); } body.el-water{ --el:#6a9fd0; --el-deep:#466f9b; --el-glow:rgba(106,159,208,.5);--el-soft:rgba(106,159,208,.12); } /* day-master accent (the reveal DM card uses --dm; defaults to the skin, overridden by dm-* on compute) */ body{ --dm:var(--el); --dm-deep:var(--el-deep); --dm-soft:var(--el-soft); } body.dm-wood { --dm:#6fb58a; --dm-deep:#4a8d68; --dm-soft:rgba(111,181,138,.16); } body.dm-fire { --dm:#e0533f; --dm-deep:#b83b2c; --dm-soft:rgba(224,83,63,.16); } body.dm-earth{ --dm:#e0ad4c; --dm-deep:#b8862e; --dm-soft:rgba(224,173,76,.16); } body.dm-metal{ --dm:#e3d7b0; --dm-deep:#b3a373; --dm-soft:rgba(227,215,176,.16); } body.dm-water{ --dm:#6a9fd0; --dm-deep:#466f9b; --dm-soft:rgba(106,159,208,.16); } /* LIGHT MODE - warm gallery; dark is the :root default. Keyed on :root (the element) so the FOUC script's html[data-theme="light"] stamp paints light on the first frame with no dark-token mismatch. */ :root[data-theme="light"]{ --void:#efe7d6; --bg:#f4eee1; --bg2:#e7ddc8; --bg3:#ece2cf; --surface:#f7f1e4; --surface2:#ece2cf; --ink:#1c1710; --ivory:#2a2317; --soft:#4a4231; --muted:#6d6353; --faint:#a99c81; --neutral:#7d6334; --line:rgba(28,23,16,.16); --line-soft:rgba(28,23,16,.08); --gold:#9a6b16; --gold-deep:#7d5512; --gold-ink:#8a5a12; --card-bg:rgba(255,255,255,.6); } :root[data-theme="light"] .el-wood { --el:#2f7a4e; --el-deep:#1b4f30; --el-glow:rgba(47,122,78,.26); --el-soft:rgba(47,122,78,.13); } :root[data-theme="light"] .el-fire { --el:#bb3322; --el-deep:#7c1f12; --el-glow:rgba(187,51,34,.24); --el-soft:rgba(187,51,34,.12); } :root[data-theme="light"] .el-earth{ --el:#9c6f15; --el-deep:#69470a; --el-glow:rgba(156,111,21,.24); --el-soft:rgba(156,111,21,.14); } :root[data-theme="light"] .el-metal{ --el:#6a6b64; --el-deep:#3c3d38; --el-glow:rgba(106,107,100,.22); --el-soft:rgba(106,107,100,.14); } :root[data-theme="light"] .el-water{ --el:#2f6aa0; --el-deep:#1b3f63; --el-glow:rgba(47,106,160,.24); --el-soft:rgba(47,106,160,.13); } :root[data-theme="light"] .dm-wood { --dm:#2f7a4e; --dm-deep:#1b4f30; --dm-soft:rgba(47,122,78,.14); } :root[data-theme="light"] .dm-fire { --dm:#bb3322; --dm-deep:#7c1f12; --dm-soft:rgba(187,51,34,.14); } :root[data-theme="light"] .dm-earth{ --dm:#9c6f15; --dm-deep:#69470a; --dm-soft:rgba(156,111,21,.14); } :root[data-theme="light"] .dm-metal{ --dm:#6a6b64; --dm-deep:#3c3d38; --dm-soft:rgba(106,107,100,.14); } :root[data-theme="light"] .dm-water{ --dm:#2f6aa0; --dm-deep:#1b3f63; --dm-soft:rgba(47,106,160,.14); } /* ===== BASE ===== */ *{margin:0;padding:0;box-sizing:border-box;} html,body{min-height:100%;} body{ font-family:var(--serif);color:var(--ivory);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; min-height:100vh; /* THE void gradient - the quiet room. warmth pools bottom-right, pulling the eye down */ background:linear-gradient(158deg, var(--void) 0%, var(--bg) 52%, color-mix(in srgb,var(--bg) 88%, #160f06) 100%); background-attachment:fixed;transition:background-color .8s ease;overflow-x:hidden; } /* ===== ATMOSPHERE (shared) ===== */ .elglow{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(60% 48% at 50% 46%, color-mix(in srgb,var(--el) 16%, transparent), transparent 72%); opacity:.85;transition:opacity .9s ease, background .9s ease;} :root[data-theme="light"] .elglow{opacity:.55;} .meridian{position:fixed;right:-70px;bottom:-70px;width:min(54vw,420px);height:min(54vw,420px);z-index:0;opacity:.16;pointer-events:none;color:var(--neutral);} .meridian svg{width:100%;height:100%;display:block;} /* ===== BRAND (shared) ===== */ .sealwrap{position:relative;z-index:2;margin-bottom:24px;display:flex;flex-direction:column;align-items:center;gap:12px;} .seal{width:60px;height:60px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5));} .seal svg{width:100%;height:100%;display:block;} .wordmark{font-family:var(--cjk);font-weight:600;font-size:15px;letter-spacing:.32em;color:var(--soft);padding-left:.32em;} .tagline{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);} .covenant{position:relative;z-index:2;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(15px,3.6vw,18px);color:var(--neutral);text-align:center;max-width:30ch;line-height:1.5;margin:0 auto 24px;} /* ===== PAGE COLUMN (shared by all three) ===== */ .wall{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 22px 56px;} .col{position:relative;z-index:2;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;} /* ===== THE GLASS CARD (login wall + capture) ===== */ .card{position:relative;z-index:2;width:100%;max-width:420px;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur)); border:1px solid var(--line);border-radius:20px;padding:26px 24px;box-shadow:0 30px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(242,234,217,.04);transition:opacity .4s ease;} .card .ct{font-family:var(--serif);font-weight:500;font-size:18px;color:var(--ivory);text-align:center;} .card .cs{font-family:var(--serif);font-size:13px;color:var(--muted);text-align:center;margin-top:6px;line-height:1.55;} /* prefill framing (login wall) */ .prefill{position:relative;z-index:2;display:none;text-align:center;max-width:34ch;margin-bottom:18px;} body[data-state="prefill"] .prefill{display:block;} .prefill .pf-h{font-family:var(--serif);font-weight:500;font-size:clamp(18px,4.4vw,22px);color:var(--ivory);line-height:1.3;} .prefill .pf-s{font-family:var(--serif);font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.55;} .prefill .pf-s b{color:var(--soft);font-weight:500;} /* Google OAuth - parchment button, brand SVG preserved */ .oauth{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:20px;min-height:48px;padding:13px 16px;border-radius:12px;border:1px solid var(--line); background:#e8e4dc;color:#1f1a12;font-family:var(--system);font-size:14px;font-weight:500;cursor:pointer;transition:filter .18s, transform .15s;} .oauth:hover{filter:brightness(1.04);transform:translateY(-1px);} .oauth:disabled{opacity:.5;cursor:default;transform:none;} .oauth svg{width:18px;height:18px;flex:none;} .divider{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--faint);} .divider .ln{flex:1;height:1px;background:var(--line);} .divider .dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;} /* form fields (login wall magic-link + capture) */ .field{margin-top:14px;} .field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;} .field label .cjk{font-family:var(--cjk);text-transform:none;letter-spacing:0;} .field input,.field select{width:100%;min-height:46px;font-family:var(--system);font-size:14.5px;color:var(--ivory);background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;transition:border-color .2s, box-shadow .2s;-webkit-appearance:none;appearance:none;} .field input::placeholder{color:var(--faint);} .field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent);} .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239d9280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:30px;} .field .cols{display:flex;gap:8px;} .field .cols>*{flex:1;} .field .hint{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.04em;color:var(--faint);margin-top:5px;} /* the gold-outline secondary affordance (magic-link send) */ .send{width:100%;margin-top:11px;min-height:46px;font-family:var(--system);font-size:14px;font-weight:500;color:var(--gold-ink);background:transparent;border:1px solid var(--gold-deep);border-radius:11px;cursor:pointer;transition:background .2s, transform .15s;} .send:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);transform:translateY(-1px);} .send:disabled{opacity:.45;cursor:default;transform:none;} /* the primary CTA (capture "see my chart" / reveal "enter") - parchment, the wall's confident action */ .cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:18px;min-height:52px;padding:15px 18px;border:0;border-radius:13px; background:var(--ivory);color:var(--bg);font-family:var(--serif);font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 16px 40px -22px rgba(242,234,217,.5);transition:transform .15s, filter .2s;} .cta:hover{transform:translateY(-1px);filter:brightness(1.03);} .cta:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none;} .cta .ar{font-family:var(--mono);} .cta .cjk{font-family:var(--cjk);} .err{display:none;margin-top:12px;font-family:var(--system);font-size:12.5px;color:var(--red);text-align:center;} body[data-state="error"] .err{display:block;} .err.show{display:block;} /* redirecting overlay (login wall: card dims, meridian spinner) */ .redir{position:absolute;inset:0;z-index:3;display:none;align-items:center;justify-content:center;flex-direction:column;gap:13px;border-radius:20px;background:color-mix(in srgb,var(--bg) 60%, transparent);backdrop-filter:blur(2px);} body[data-state="redirecting"] .redir{display:flex;} body[data-state="redirecting"] .card>.inner{opacity:.4;} .spinner{width:30px;height:30px;color:var(--gold);animation:spin 3s linear infinite;} .redir .rt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);} @keyframes spin{to{transform:rotate(360deg);}} /* magic-link-sent confirmation (swaps the card body) */ .sent{display:none;text-align:center;padding:8px 0 4px;} body[data-state="sent"] .card>.inner{display:none;} body[data-state="sent"] .sent{display:block;} .sent .sk{width:46px;height:46px;margin:0 auto 14px;color:var(--gold);} .sent .sk svg{width:100%;height:100%;} .sent .sh{font-family:var(--serif);font-weight:500;font-size:18px;color:var(--ivory);} .sent .ss{font-family:var(--serif);font-size:13px;color:var(--muted);margin-top:7px;line-height:1.55;} .sent .resend{margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;} /* no-prefill fallback line (login wall) */ .fallback{position:relative;z-index:2;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--faint);text-align:center;} .fallback a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;} body[data-state="prefill"] .fallback{opacity:.4;} /* ===== CAPTURE (/go) ===== */ .kick{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);text-align:center;} .lede{font-family:var(--serif);font-weight:300;font-size:clamp(22px,5.6vw,28px);line-height:1.18;color:var(--ivory);text-align:center;margin-top:10px;} .lede b{font-weight:600;color:var(--gold-ink);} .cardsub{font-family:var(--serif);font-size:13.5px;color:var(--muted);text-align:center;margin:8px auto 2px;max-width:30ch;line-height:1.5;} .gate{border:1px solid color-mix(in srgb,var(--gold) 32%,transparent);border-radius:11px;padding:11px 12px 12px;background:color-mix(in srgb,var(--gold) 7%,transparent);margin-top:14px;} .gate .gk{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:8px;display:flex;align-items:center;gap:6px;} .nohour{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--serif);font-size:12.5px;color:var(--muted);cursor:pointer;} .nohour input{accent-color:var(--gold);width:15px;height:15px;} .drawertog{background:none;border:none;cursor:pointer;text-align:left;padding:0;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:12px;} .drawertog .cjk{font-family:var(--cjk);text-transform:none;letter-spacing:0;} .solnote{display:none;align-items:flex-start;gap:8px;margin-top:13px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:11px;padding:11px 13px;background:color-mix(in srgb,var(--gold) 9%,transparent);font-family:var(--serif);font-size:12.5px;line-height:1.5;color:var(--neutral);} .solnote.show{display:flex;} .solnote .si{color:var(--gold-ink);flex:0 0 auto;} .solnote .cjk{font-family:var(--cjk);font-weight:600;color:var(--gold-ink);} /* voice picker (compact, inside the capture card) */ .voicewrap{margin-top:6px;} .vcard{border:1px solid var(--line);border-radius:13px;background:var(--bg2);margin-top:9px;overflow:hidden;cursor:pointer;transition:border-color .2s,box-shadow .2s;} .vcard:hover{border-color:var(--gold-deep);} .vcard.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);} .vch{display:flex;align-items:center;gap:11px;padding:12px 13px;} .vradio{width:18px;height:18px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .2s;} .vcard.sel .vradio{border-color:var(--gold);} .vradio::after{content:"";width:8px;height:8px;border-radius:50%;background:transparent;transition:background .2s;} .vcard.sel .vradio::after{background:var(--gold);} .vmeta{flex:1;min-width:0;} .vmeta .vn{display:block;font-family:var(--serif);font-weight:500;font-size:15px;color:var(--ivory);} .vmeta .vd{display:block;font-family:var(--serif);font-style:italic;font-size:12px;color:var(--muted);margin-top:4px;} .vexp{font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:12px;padding:4px 9px;flex:0 0 auto;} .vsample{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s,opacity .35s,padding .35s;padding:0 13px;} .vcard.open .vsample{max-height:240px;opacity:1;padding:0 13px 13px;} .vsample .sk{font-family:var(--mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:7px;border-top:1px solid var(--line-soft);padding-top:11px;} .vsample p{font-family:var(--serif);font-size:14px;line-height:1.6;color:var(--ivory);} /* ===== REVEAL (/reveal) ===== */ .revblock{position:relative;z-index:2;width:100%;max-width:460px;} .cusp-fork .ekick,.kick.cusp{margin-bottom:8px;} .forkgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px;} .fcand{border:1px solid var(--line);border-radius:16px;background:var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));padding:16px 14px;cursor:pointer;text-align:center;transition:border-color .2s,box-shadow .2s;} .fcand:hover{border-color:var(--gold-deep);} .fcand.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 16px 36px -24px var(--gold);} .fcand .ck{font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);} .fcand.sel .ck{color:var(--gold-ink);} .fcand .cpil{font-family:var(--cjk);font-weight:700;font-size:21px;color:var(--gold-ink);margin:9px 0 3px;} .fcand .cmin{font-family:var(--cjk);font-size:12px;color:var(--neutral);} .fcand .cdesc{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--muted);margin-top:9px;line-height:1.4;} .dmcard{border:1px solid color-mix(in srgb,var(--dm) 32%,var(--line));border-radius:18px;background:radial-gradient(130% 130% at 50% 6%,var(--dm-soft),transparent 78%),var(--card-bg);backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));padding:24px;text-align:center;} .dmcard .stem{font-family:var(--cjk);font-weight:900;font-size:62px;line-height:1;color:var(--dm);text-shadow:0 0 34px color-mix(in srgb,var(--dm) 48%,transparent);} .dmcard .arch{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--ivory);margin-top:10px;} .dmcard .meta{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:7px;} .hookline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,5vw,26px);line-height:1.4;color:var(--ivory);text-align:center;margin:22px auto;max-width:24ch;min-height:1.4em;} .hookline .cursor{display:inline-block;width:8px;height:1.05em;vertical-align:-2px;background:var(--gold);margin-left:2px;animation:blink 1s steps(1) infinite;} @keyframes blink{50%{opacity:0;}} .deck-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);text-align:center;margin:16px 0 12px;} .deck{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;} .tcard{border:1px solid var(--line);border-radius:13px;background:var(--bg2);padding:11px 13px;text-align:center;min-width:96px;} .tcard .th{font-family:var(--cjk);font-weight:700;font-size:18px;color:var(--gold-ink);} .tcard .te{font-family:var(--serif);font-size:11.5px;color:var(--neutral);margin-top:3px;} .selfsec{margin-top:22px;border-top:1px solid var(--line-soft);padding-top:18px;} .selfsec .sk{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);} .selfsec h3{font-family:var(--serif);font-weight:300;font-size:22px;color:var(--ivory);margin:6px 0 11px;} .selfsec .sp{font-family:var(--serif);font-size:16px;line-height:1.8;color:var(--ivory);white-space:pre-wrap;} .grantbar{display:flex;align-items:center;gap:11px;margin-top:20px;border:1px solid color-mix(in srgb,var(--gold) 36%,transparent);border-radius:14px;padding:13px 15px;background:color-mix(in srgb,var(--gold) 8%,transparent);} .grantbar .gi{flex:0 0 auto;color:var(--gold-ink);display:inline-flex;} .grantbar .gt{font-family:var(--serif);font-size:13.5px;color:var(--ivory);line-height:1.4;} .grantbar .gt b{color:var(--gold-ink);font-weight:600;} .sharecard{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;border:1px dashed var(--line);border-radius:13px;padding:12px;font-family:var(--serif);font-size:13.5px;color:var(--neutral);cursor:pointer;transition:border-color .2s,color .2s;} .sharecard:hover{border-color:var(--gold);color:var(--ivory);} .sharecard .si{color:var(--gold-ink);} /* ===== ENTRY CEREMONY (/go multi-screen stepper - ZJ-013 / CD_S02_ENTRY) ===== The front ceremony before the auth wall: Welcome -> VoicePicker -> birth form, each a slide-in screen with progress dots + back nav. Reuses the wall tokens (gold accent, void glow) + the shared .vcard* (voice) and .field/.gate/.nohour/.solnote (form) styles above, so /go -> / -> /reveal cross with no visual snap. This block adds only the stepper chrome. */ .entry{position:relative;z-index:2;width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;} .etop{display:flex;align-items:center;gap:12px;padding:2px 0 16px;} .etop .ebrand{font-family:var(--cjk);font-weight:700;font-size:16px;letter-spacing:.14em;color:var(--soft);} .etop .esp{flex:1;} .eprog{display:flex;gap:6px;align-items:center;} .eprog .pd{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,width .3s;} .eprog .pd.done{background:var(--gold-deep);} .eprog .pd.on{background:var(--gold);width:18px;border-radius:4px;box-shadow:0 0 10px color-mix(in srgb,var(--gold) 55%,transparent);} .eback{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:18px;padding:6px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s;} .eback:hover{border-color:var(--gold-deep);color:var(--ivory);} .eback.hide{visibility:hidden;} .screens{display:flex;flex-direction:column;} .screen{display:none;animation:slideIn .42s cubic-bezier(.2,.8,.2,1);} .screen.on{display:block;} @keyframes slideIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} .ekick{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);text-align:center;} .eh{font-family:var(--serif);font-weight:300;font-size:clamp(24px,6vw,31px);line-height:1.14;color:var(--ivory);text-align:center;margin-top:12px;} .eh b{font-weight:600;color:var(--gold-ink);} .eh .cjk{font-family:var(--cjk);font-weight:600;color:var(--gold-ink);} .esub{font-family:var(--serif);font-size:14px;color:var(--muted);text-align:center;margin:12px auto 0;max-width:32ch;line-height:1.6;} .ecta{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:24px;} .ecta .cta{margin-top:0;} .efine{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);} /* welcome (screen 0) */ .wmark{text-align:center;margin-bottom:6px;} .wmark .big{font-family:var(--cjk);font-weight:900;font-size:clamp(60px,17vw,74px);line-height:1;color:var(--gold-ink);text-shadow:0 0 38px color-mix(in srgb,var(--gold) 30%,transparent);} .wmark .en{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:10px;} .wpromise{font-family:var(--serif);font-size:17px;line-height:1.8;color:var(--ivory);text-align:center;margin-top:26px;} .wpromise span{display:block;color:var(--neutral);} /* ===== RESPONSIVE + REDUCED MOTION ===== */ @media (max-width:520px){ .wall{padding:56px 16px 44px;} .card{padding:22px 18px;} .meridian{opacity:.1;} .etop{padding-bottom:12px;} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.01ms!important;} }