:root{color-scheme:light;--paper:#f7f0e9;--surface:#fffaf4;--ink:#302a28;--muted:#66594f;--accent:#7f373e;--line:#cab8a6;--scene:#e2d6c7;font-family:system-ui,-apple-system,'Yu Gothic','Noto Sans JP',sans-serif}
:root:lang(zh){font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC',system-ui,'Noto Sans JP',sans-serif}
:root:lang(zh) h1{font-family:inherit}
:root[data-theme=paper]{--paper:#eee9dd;--surface:#fffdf3;--accent:#634c30}
:root[data-theme=mint]{--paper:#e7efe7;--surface:#f7fcf5;--accent:#275d4d;--line:#9eafa0}
:root[data-theme=pop]{--paper:#fce7dc;--surface:#fff7ee;--accent:#873525}
:root[data-theme=night]{color-scheme:dark;--paper:#202934;--surface:#2b3542;--ink:#fff4e5;--muted:#d1c8bd;--accent:#f6c398;--line:#75808c;--scene:#24313b}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}a{color:inherit;text-underline-offset:4px}button,select{font:inherit;min-height:46px;border:1px solid var(--line);border-radius:8px;padding:10px 15px;background:var(--surface);color:var(--ink);cursor:pointer}button:disabled{opacity:.55;cursor:default}button:hover:enabled,a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}[hidden]{display:none!important}header,main,footer{width:min(1280px,calc(100% - 64px));margin:auto}header{padding:28px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid var(--line)}.brand{font-size:18px;letter-spacing:.02em;font-weight:750;text-decoration:none}.settings{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.languages{display:flex;flex-wrap:wrap;gap:12px}.languages a{display:inline-flex;align-items:center;min-height:44px}.languages [aria-current=page]{font-weight:750;text-decoration-thickness:3px}.theme-label{display:flex;gap:8px;align-items:center}.intro{padding:48px 0 30px;max-width:850px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--muted)}h1{font-family:Georgia,'Yu Mincho',serif;font-size:clamp(34px,4.4vw,62px);font-weight:500;line-height:1.2;letter-spacing:-.03em;margin:18px 0}p{line-height:1.75}.intro>p:last-child{font-size:18px;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);gap:28px;align-items:start}.room{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.scene{position:relative;height:480px;background:var(--scene)}#stage{position:absolute;inset:0}#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.room-tools{display:flex;gap:10px;padding:18px;flex-wrap:wrap}.notice{font-size:13px;color:var(--muted);padding:0 20px 18px;margin:0}.lesson{padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.lesson h2{font-size:17px;font-weight:550;margin-top:0}.phrase{font-size:clamp(28px,3vw,39px);font-weight:650;line-height:1.5;margin:26px 0 8px}.romaji{font-size:15px;letter-spacing:.04em;color:var(--muted)}.gloss{font-size:21px;margin:18px 0}.hint{color:var(--muted)}.audio-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.disclosure{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin:20px 0 0}.transport{margin-top:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:22px}.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:0 0 20px;gap:12px}.steps li{border-top:3px solid var(--line);padding-top:12px;font-size:14px}.steps [aria-current=step]{border-color:var(--accent);font-weight:750}.steps small{display:block;color:var(--muted);margin-bottom:6px}#caption{font-size:19px;min-height:34px;margin-bottom:12px}#status{color:var(--muted);font-size:14px;min-height:26px}.controls{display:flex;gap:10px;flex-wrap:wrap}.privacy{font-size:13px;color:var(--muted);margin:24px 0}footer{padding:24px 0 48px;display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:34px}footer a{min-height:44px;display:inline-flex;align-items:center}.motion{font-size:14px;color:var(--muted)}
.scene{overflow:hidden}.scene #stage{inset:-22%}.room .transport{border:0;border-top:1px solid var(--line);border-radius:0;margin:0}#stage canvas{outline-offset:-6px}.brand,#audio-link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:850px){header,main,footer{width:calc(100% - 36px)}header{align-items:flex-start;flex-direction:column}.intro{padding-top:28px}.layout{grid-template-columns:1fr}.scene{height:360px}.scene #stage{inset:-9%}.lesson{padding:23px}.transport{padding:18px}.steps{gap:8px}.steps li{font-size:12px}h1{max-width:600px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}