:root{--ink: #f3f1ff;--ink-soft: #c7c3e6;--ink-mute: #9894bd;--night: #0b1030;--night-2: #151b45;--panel: rgba(12, 15, 42, .86);--panel-solid: #121641;--line: rgba(199, 195, 230, .22);--accent: #6fe3d6;--accent-ink: #062a27;--warm: #ffc97a;--pink: #e05bb4;--danger: #ff8a8a;--paper: #fbf7ef;--paper-ink: #2a2433;--paper-soft: #6b6275;--radius: 14px;--gutter: 16px;--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;--label: ui-monospace, "SFMono-Regular", Consolas, monospace;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font-family:var(--font);-webkit-text-size-adjust:100%}body{overflow-x:hidden}#app{min-height:100%;outline:none}a{color:var(--accent)}button,input,select,textarea{font:inherit}:focus-visible{outline:3px solid var(--warm);outline-offset:2px}.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;z-index:100;background:var(--panel-solid);padding:8px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.btn{white-space:nowrap;appearance:none;border:1px solid var(--line);background:#ffffff0f;color:var(--ink);border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-content:center;text-decoration:none}.btn:hover{background:#ffffff1f}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}.btn.warm{background:var(--warm);color:#2b1a00;border-color:transparent;font-weight:700}.btn.ghost{background:transparent}.btn.small{min-height:36px;padding:6px 12px;font-size:14px}.btn[aria-pressed=true],.chip[aria-pressed=true]{background:var(--ink);color:var(--night);border-color:var(--ink)}.btn:disabled{opacity:.45;cursor:not-allowed}.label{font-family:var(--label);letter-spacing:.12em;font-size:11px;text-transform:uppercase;color:var(--ink-mute)}.top{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto}.top canvas.bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.top .hero{position:relative;z-index:1;align-self:center;padding:28px var(--gutter);max-width:640px;margin:0 auto;width:100%}.top{overflow-x:clip}.top .hero:before{content:"";position:absolute;inset:-40px 0;z-index:-1;background:radial-gradient(ellipse at 40% 50%,rgba(7,9,26,.84) 0%,rgba(7,9,26,.58) 52%,transparent 82%);pointer-events:none}.top h1{font-size:clamp(15px,3.6vw,18px);font-family:var(--label);letter-spacing:.3em;margin:0 0 18px;color:var(--ink-soft)}.top .copy{font-size:clamp(26px,7vw,44px);line-height:1.35;font-weight:800;margin:0 0 14px;text-shadow:0 2px 20px rgba(0,0,0,.6)}.top .sub{color:var(--ink-soft);margin:0 0 26px;line-height:1.7;text-shadow:0 1px 8px rgba(0,0,0,.7)}.top .ctas{display:flex;flex-wrap:wrap;gap:12px}.top .ctas .btn{min-height:52px;padding:12px 22px;font-size:17px}.top footer{position:relative;z-index:1;padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:14px;font-size:13px;background:linear-gradient(transparent,#080b1de6)}.top footer a{color:var(--ink-soft)}.jam{position:fixed;inset:0;background:#080b1d;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.jam canvas.stage{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;cursor:pointer}.jam canvas.stage:focus-visible{outline:3px solid var(--warm);outline-offset:-3px}.jam .topbar{position:absolute;left:0;right:0;top:0;padding:calc(8px + env(safe-area-inset-top)) var(--gutter) 8px;display:flex;align-items:center;gap:10px;background:linear-gradient(rgba(5,7,20,.75),transparent);pointer-events:none}.jam .topbar>*{pointer-events:auto}.jam .topbar .title{flex:1;min-width:0;font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jam .bottombar{position:absolute;left:0;right:0;bottom:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#050714d9);display:grid;gap:8px;pointer-events:none}.jam .bottombar>*{pointer-events:auto}.jam .families{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.jam .families::-webkit-scrollbar{display:none}.chip{appearance:none;border:1px solid var(--line);background:#0a0c22b3;color:var(--ink);border-radius:999px;padding:6px 12px;min-height:36px;font-size:13px;cursor:pointer;white-space:nowrap;font-family:var(--label);letter-spacing:.06em}.jam .actions{display:flex;gap:8px;justify-content:space-between}.jam .actions .btn{background:#0a0c22b8}.jam .actions .btn.warm{background:var(--warm)}.jam .hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:var(--ink-soft);font-size:14px;text-shadow:0 1px 6px #000;transition:opacity 1.2s}.jam .status{font-size:12px;color:var(--ink-mute)}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0507148c;z-index:5;padding:var(--gutter)}.overlay .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;max-width:420px;width:100%;text-align:center;backdrop-filter:blur(6px)}.overlay .card h2{margin:0 0 8px;font-size:20px}.overlay .card p{color:var(--ink-soft);line-height:1.7;margin:0 0 16px}.overlay .card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.sheet{position:absolute;left:0;right:0;bottom:0;max-height:78svh;overflow:auto;background:var(--panel-solid);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));z-index:6;touch-action:pan-y;user-select:text}.sheet h3{margin:4px 0 12px;font-size:16px}.sheet .group{margin-bottom:14px}.sheet .group .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.sheet .rowline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.sheet input[type=range]{width:100%;accent-color:var(--accent)}.sheet .close{position:sticky;top:0;float:right}.kbd-panel{display:flex;gap:6px;flex-wrap:wrap}.page{min-height:100svh;background:var(--paper);color:var(--paper-ink);color-scheme:light}.page header.bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:calc(12px + env(safe-area-inset-top)) var(--gutter) 12px;border-bottom:1px solid #e6dfd2;background:var(--paper);position:sticky;top:0;z-index:3}.page header.bar .btn.small{padding:7px 12px}.page header.bar a.brand{font-family:var(--label);letter-spacing:.2em;font-size:12px;color:var(--paper-soft);text-decoration:none}.page main{max-width:720px;margin:0 auto;padding:24px var(--gutter) 64px}.page h1{font-size:clamp(22px,5.6vw,30px);margin:8px 0 10px;line-height:1.4}.page p.lead{color:var(--paper-soft);line-height:1.8;margin:0 0 22px}.page .btn{border-color:#d8cfbf;background:#fff;color:var(--paper-ink)}.page .btn.primary{background:#1f6f68;color:#fff;border-color:transparent}.page .btn.warm{background:#f0b04a;color:#2b1a00}.page .btn[aria-pressed=true]{background:var(--paper-ink);color:#fff}.page .chip{background:#fff;color:var(--paper-ink);border-color:#d8cfbf;font-family:var(--font);letter-spacing:0}.page .chip[aria-pressed=true]{background:var(--paper-ink);color:#fff}.page label.field{display:grid;gap:6px;margin-bottom:18px;font-weight:600}.page label.field small{font-weight:400;color:var(--paper-soft)}.page textarea,.page input[type=text],.page input[type=email],.page select{width:100%;border:1px solid #d8cfbf;border-radius:10px;background:#fff;color:var(--paper-ink);padding:12px;font-size:16px;line-height:1.7}.page textarea{min-height:200px;resize:vertical}.page .card{background:#fff;border:1px solid #e6dfd2;border-radius:var(--radius);padding:16px;margin-bottom:14px}.page .muted{color:var(--paper-soft)}.page .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.page .notice{background:#fff6e0;border:1px solid #f0d9a0;border-radius:10px;padding:12px;line-height:1.7;font-size:14px;margin:12px 0}.page .error{background:#ffecec;border:1px solid #f3b4b4;border-radius:10px;padding:12px;margin:12px 0}.page .ok{background:#e9f7f2;border:1px solid #a9dccb;border-radius:10px;padding:12px;margin:12px 0}.page table{width:100%;border-collapse:collapse;font-size:14px}.page th,.page td{text-align:left;padding:8px;border-bottom:1px solid #eee5d6;vertical-align:top}.page .lyric-line{font-size:18px;line-height:2.1;margin:0}.page .lyric-line .tok{border-radius:4px;padding:0 1px}.page .lyric-line .tok.critical{background:#ffe1a8;box-shadow:inset 0 -2px #e08a00}.page .lyric-line .tok.suggested{background:#eef3ff}.page .lyric-line .tok.confirmed{background:#dcf3ea;box-shadow:inset 0 -2px #1f6f68}.page ruby rt{font-size:11px;color:#1f6f68}.page .reading-item{border:1px solid #f0d9a0;background:#fffaf0;border-radius:12px;padding:12px;margin-bottom:10px}.page .reading-item .ctx{font-size:17px;margin-bottom:8px}.page .reading-item .ctx mark{background:#ffe1a8;padding:0 2px}.page .tag{display:inline-block;font-size:12px;border-radius:999px;padding:2px 8px;background:#eee5d6;color:var(--paper-ink)}.page .tag.warn{background:#ffe1a8}.page .tag.good{background:#dcf3ea}.page .steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;padding:0;list-style:none;font-size:12px}.page .steps li{padding:4px 10px;border-radius:999px;background:#eee5d6;color:var(--paper-soft)}.page .steps li.now{background:var(--paper-ink);color:#fff}.page pre.diff{white-space:pre-wrap;background:#f6f1e7;border-radius:8px;padding:10px;font-size:13px}.gift{min-height:100svh;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#2b2a5c,#0b1030 70%);padding:var(--gutter)}.gift .letter{max-width:460px;width:100%;background:var(--paper);color:var(--paper-ink);border-radius:18px;padding:26px 22px;box-shadow:0 20px 60px #00000073;color-scheme:light}.gift .letter h1{font-size:22px;margin:0 0 6px}.gift .letter .to{color:var(--paper-soft);margin:0 0 16px}.gift .letter .body{white-space:pre-wrap;line-height:1.9;margin:0 0 20px}.gift .jacket{width:100%;aspect-ratio:1;border-radius:12px;image-rendering:pixelated;display:block;margin-bottom:16px;background:#0b1030}.gift .play{width:100%;min-height:56px;font-size:18px}#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--panel-solid);color:var(--ink);border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:50;max-width:calc(100vw - 32px);text-align:center}#toast.show{opacity:1}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}.beta-tag{display:inline-block;margin:0 0 10px;padding:3px 10px;border:1px solid rgba(190,185,255,.5);border-radius:999px;font:600 11px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:#cfcaf5;background:#1816388c}