:root{--bg:#faf7f0;--ink:#2c3e50;--ink-soft:#7a8490;--coral:#e9806e;--coral-dark:#d56d5b;--panel:#fffaf3;--outline:#2c3e50;--outline-soft:#cfc6b8;--shadow:#2c3e501f;--btn-bg:#fffcf7;--btn-shadow-a:#2c3e5014;--btn-shadow-b:#2c3e501a;--sheet-bg:#fff;--overlay-bg:#faf7f0d1;--overlay-clear-bg:#faf7f038;--glass-bg:#fffcf77a;--glass-border:#2c3e5029;--card-bg:#fffaf3eb;--card-border:#e9806e59;--btn-primary-shadow:#b4504159;--btn-primary-glow:#e9806e59;color:var(--ink);background:var(--bg);font-family:Nunito,Segoe UI,system-ui,sans-serif}:root[data-theme=sage]{--bg:#1a6b45;--ink:#f2f7f1;--ink-soft:#b7d0bf;--coral:#d4a84b;--coral-dark:#b8903a;--panel:#175c3c;--outline:#f2f7f1;--outline-soft:#2f8058;--shadow:#061c1073;--btn-bg:#1f754d;--btn-shadow-a:#061c1066;--btn-shadow-b:#061c1059;--sheet-bg:#175c3c;--overlay-bg:#0c301ed1;--overlay-clear-bg:#0c301e47;--glass-bg:#1a6b4580;--glass-border:#f2f7f124;--card-bg:#175c3cf0;--card-border:#d4a84b66;--btn-primary-shadow:#5a3c0a73;--btn-primary-glow:#d4a84b52}:root[data-theme=stationery]{--bg:#24303f;--ink:#e9eff6;--ink-soft:#9db0c4;--coral:#7da3c8;--coral-dark:#6b8fb5;--panel:#2c3a4b;--outline:#e9eff6;--outline-soft:#46586c;--shadow:#080e1666;--btn-bg:#33445a;--btn-shadow-a:#080e1659;--btn-shadow-b:#080e164d;--sheet-bg:#2c3a4b;--overlay-bg:#1e2835d6;--overlay-clear-bg:#1e28354d;--glass-bg:#2c3a4b8c;--glass-border:#e9eff624;--card-bg:#2c3a4bf0;--card-border:#7da3c866;--btn-primary-shadow:#0a121c80;--btn-primary-glow:#7da3c84d}:root[data-theme=blush]{--bg:#f9eef0;--ink:#55404a;--ink-soft:#97828b;--coral:#e58fa2;--coral-dark:#d1758c;--panel:#fdf5f7;--outline:#55404a;--outline-soft:#dcc8cf;--shadow:#55404a1f;--overlay-bg:#f9eef0d6;--overlay-clear-bg:#f9eef03d;--glass-bg:#fffcfa80;--glass-border:#55404a24;--card-bg:#fffcf7f0;--card-border:#e58fa266;--btn-primary-shadow:#a0506947;--btn-primary-glow:#e58fa259}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.hidden{display:none!important}html,body{background:var(--bg);height:100%;min-height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0;transition:background .25s,color .25s;overflow:hidden}input,textarea,select,button,label{-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}input[type=range]{appearance:none;cursor:pointer;touch-action:none;background:0 0;min-height:28px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:color-mix(in srgb, var(--ink-soft) 45%, transparent);border-radius:999px;height:6px}input[type=range]::-moz-range-track{background:color-mix(in srgb, var(--ink-soft) 45%, transparent);border-radius:999px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--coral);border:2px solid #fff;border-radius:50%;width:26px;height:26px;margin-top:-10px;box-shadow:0 1px 4px #00000040}input[type=range]::-moz-range-thumb{background:var(--coral);border:2px solid #fff;border-radius:50%;width:26px;height:26px;box-shadow:0 1px 4px #00000040}body{justify-content:center;align-items:stretch;display:flex}#app{background:var(--bg);flex-direction:column;width:min(440px,100vw);height:100%;max-height:100dvh;margin:0 auto;padding:14px 18px 16px;display:flex;position:relative;overflow:hidden}@media (width<=820px),(pointer:coarse){html,body{overscroll-behavior:none;width:100%;height:100dvh}body{display:block}#app{width:100%;max-width:none;height:100dvh;max-height:none;padding:max(8px, env(safe-area-inset-top,0px)) max(10px, env(safe-area-inset-right,0px)) max(8px, env(safe-area-inset-bottom,0px)) max(10px, env(safe-area-inset-left,0px));margin:0}.play .brand{display:none}.play .play-top{gap:6px;padding-top:0;font-size:.78rem}.play .play-audio{z-index:3;gap:8px;min-width:0}.play .play-audio label{gap:5px;font-size:.55rem}.play .play-audio input[type=range]{width:min(88px,22vw);height:28px;min-height:28px}.play .score-line{margin-bottom:0;font-size:.68rem}.play .hint{min-height:1em;margin:2px 0 6px;font-size:.74rem}.play .actions{gap:6px}.play .actions button{padding:11px 6px;font-size:.85rem}#board{max-height:none}}.screen{flex-direction:column;flex:auto;min-height:0;display:flex}.screen.hidden{display:none!important}.home{z-index:1;justify-content:center;align-items:stretch;gap:10px;padding:8px 4px 12px}.home-headphones{color:var(--ink-soft);flex-direction:column;align-items:center;gap:4px;margin:0 auto 6px;animation:3.6s ease-in-out infinite home-headphones-float;display:flex}.home-headphones-icon{opacity:.72;display:block}.home-headphones span{letter-spacing:.12em;text-transform:lowercase;opacity:.78;font-size:.68rem;font-weight:600}@keyframes home-headphones-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.home-brand{text-align:center;margin-bottom:18px}.home-logo{background:0 0;width:min(220px,58vw);height:auto;margin:0 auto 4px;display:block}.home-brand p{color:var(--ink-soft);letter-spacing:.06em;margin:10px 0 0;font-size:.95rem;font-weight:600}.home-art{opacity:.9;justify-content:center;gap:14px;margin:8px 0 28px;display:flex}.home-art span{width:28px;height:28px;display:block}.home-art .s-circle{background:#e9806e;border-radius:50%}.home-art .s-square{background:#5d7a94;border-radius:5px}.home-art .s-triangle{background:0 0;border-bottom:26px solid #98a684;border-left:14px solid #0000;border-right:14px solid #0000;width:0;height:0}.home-art .s-diamond{background:#e8a84e;width:22px;height:22px;margin-top:3px;transform:rotate(45deg)}.home-actions{flex-direction:column;gap:12px;width:min(280px,100%);margin:0 auto;display:flex}.home-actions button{width:100%}.home-foot{text-align:center;color:var(--ink-soft);letter-spacing:.04em;margin-top:auto;padding-top:24px;font-size:.72rem}.play-top{letter-spacing:.1em;flex:none;justify-content:space-between;align-items:center;gap:8px;padding:4px 2px 0;font-size:.92rem;font-weight:800;display:flex}.play-top>span{white-space:nowrap;flex:none}.play-audio{flex:auto;justify-content:center;align-items:center;gap:10px;min-width:0;margin:0;padding:0;display:flex}.brand{text-align:center;flex:none;padding:2px 0 4px}.play-logo{background:0 0;width:min(112px,30vw);height:auto;margin:0 auto;display:block}.brand p{letter-spacing:.06em;color:var(--ink-soft);margin:2px 0 0;font-size:.85rem}.score-line{text-align:center;letter-spacing:.08em;color:var(--ink-soft);flex:none;margin:0 0 2px;font-size:.72rem;font-weight:700}.tutorial-card{border:2px solid var(--card-border);background:var(--card-bg);box-shadow:0 5px 18px var(--shadow);z-index:2;border-radius:16px;flex:none;margin:2px 0 8px;padding:12px 14px}.tutorial-topline{justify-content:space-between;align-items:center;display:flex}.tutorial-step{color:var(--coral-dark);letter-spacing:.12em;font-size:.72rem;font-weight:800}.tutorial-card h2{margin:2px 0 3px;font-size:1rem}.tutorial-card p{color:var(--ink-soft);margin:0;font-size:.78rem;line-height:1.35}.tutorial-next{width:100%;margin-top:9px;padding:8px 10px}.board-wrap{touch-action:none;flex:auto;justify-content:center;align-items:center;min-height:0;display:flex}#board{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:4px;outline:none;width:100%;height:100%;max-height:min(92vw,460px);display:block}#board:focus,#board:focus-visible{outline:none}.hint{text-align:center;color:var(--ink-soft);flex:none;min-height:1.2em;margin:4px 0 8px;font-size:.8rem}.play-audio label{letter-spacing:.03em;color:var(--ink-soft);align-items:center;gap:4px;font-size:.58rem;font-weight:700;display:flex}.play-audio label span{flex:none}.play-audio input[type=range]{width:56px;height:28px;accent-color:var(--coral);margin:0}.actions{padding-bottom:env(safe-area-inset-bottom,0);flex:none;grid-template-columns:1fr 1.2fr 1fr;gap:8px;display:grid}.actions button{padding:12px 8px;font-size:.9rem}button{font:inherit;background:var(--btn-bg);color:var(--ink);letter-spacing:.04em;cursor:pointer;box-shadow:0 3px 0 var(--btn-shadow-a), 0 6px 14px var(--btn-shadow-b);-webkit-tap-highlight-color:transparent;border:1px solid #2c3e5014;border-radius:14px;outline:none;padding:14px 12px;font-weight:700;transition:transform 80ms,box-shadow 80ms,background .15s,border-color .15s,color .15s}button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}button:active{box-shadow:0 1px 0 var(--btn-shadow-a), 0 2px 6px var(--btn-shadow-a);transform:translateY(2px)}button:disabled{opacity:.45;cursor:default;box-shadow:none}button.primary{background:var(--coral);color:#fffaf8;box-shadow:0 3px 0 var(--btn-primary-shadow), 0 8px 18px var(--btn-primary-glow);border:1px solid #0000}button.primary:active{box-shadow:0 1px 0 var(--btn-primary-shadow), 0 3px 8px var(--btn-primary-glow)}button.primary:hover:not(:disabled){filter:brightness(1.03)}.text-button{color:var(--ink-soft);box-shadow:none;background:0 0;border:0;padding:4px;font-size:.74rem}.text-button:active{box-shadow:none;transform:none}.settings-block{text-align:left;flex-direction:column;gap:10px;margin:8px 0 4px;display:flex}.settings-block label{color:var(--ink-soft);justify-content:space-between;align-items:center;gap:10px;font-size:.8rem;display:flex}.settings-block input[type=range]{width:min(160px,42vw);height:32px;accent-color:var(--coral)}.settings-block .slider-wrap{align-items:center;gap:8px;display:flex}.settings-block .slider-val{text-align:right;font-variant-numeric:tabular-nums;min-width:36px;color:var(--ink);font-size:.78rem;font-weight:700}.settings-block input[type=checkbox]{width:18px;height:18px;accent-color:var(--coral)}.theme-block{text-align:left;margin-top:4px}.theme-block>span{color:var(--ink-soft);margin-bottom:8px;font-size:.8rem;display:block}.theme-picker{grid-template-columns:1fr 1fr;gap:8px;display:grid}.theme-swatch{letter-spacing:.02em;text-align:left;box-shadow:0 2px 0 var(--btn-shadow-a), 0 4px 10px var(--btn-shadow-b);align-items:center;gap:8px;padding:10px;font-size:.72rem;display:flex}.theme-swatch .dot{border-radius:50%;flex:none;width:14px;height:14px;box-shadow:inset 0 0 0 1px #2c3e501f}.theme-swatch.is-active{border-color:var(--coral);background:var(--panel);box-shadow:0 0 0 2px var(--card-border), 0 4px 12px var(--shadow);border-width:1px}.now-playing{text-align:center;color:var(--ink-soft);margin:6px 0 0;font-size:.7rem}.overlay{background:var(--overlay-bg);z-index:20;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.overlay-clear{background:var(--overlay-clear-bg)}.sheet{background:var(--sheet-bg);border:2px solid var(--outline-soft);text-align:center;width:min(320px,100%);box-shadow:0 10px 28px var(--shadow);border-radius:20px;max-height:min(86dvh,560px);padding:26px 22px;overflow:auto}.sheet-glass{background:var(--glass-bg);border-color:var(--glass-border);box-shadow:0 8px 24px var(--shadow);-webkit-backdrop-filter:blur(10px)}@media (pointer:coarse),(prefers-reduced-motion:reduce){.sheet-glass{-webkit-backdrop-filter:none}.home-headphones{animation:none}}.sheet h2{letter-spacing:.1em;margin:0 0 8px}.sheet .stars{letter-spacing:.2em;color:#d4a017;margin:8px 0 12px;font-size:1.8rem}.sheet p{color:var(--ink-soft);margin:0 0 14px}.sheet .row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.menu-list{flex-direction:column;gap:8px;margin-top:4px;display:flex}.menu-list button{width:100%}.desk-grid button{width:100%;padding:12px 8px;font-size:.85rem}.desk-grid button.desk-ot:not(.primary){opacity:.95;border-style:dashed}.desk-grid{grid-template-columns:1fr 1fr;gap:8px;max-height:min(52dvh,360px);margin:8px 0 12px;display:grid;overflow:auto}.how-guide{text-align:left;max-height:min(52dvh,380px);margin:0 0 16px;padding-right:4px;overflow:auto}.how-guide h3{letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:14px 0 4px;font-size:.82rem}.how-guide h3:first-child{margin-top:0}.how-guide p,.how-guide li{color:var(--ink-soft);margin:0 0 8px;font-size:.84rem;line-height:1.45}.how-guide ol{margin:0;padding-left:18px}.how-guide li{margin-bottom:8px}.how-guide strong{color:var(--ink);font-weight:700}.sheet-wide{width:min(340px,100%)}@media (width>=900px){#app{box-shadow:0 0 0 1px #0000000a, 0 20px 60px var(--shadow)}}