:root{--color-correct: #6aaa64;--color-present: #c9b458;--color-absent: #787c7e;--color-tile-border: #d3d6da;--color-tile-filled-border: #878a8c;--color-key-bg: #d3d6da;--color-key-text: #1a1a1b;--color-bg: #ffffff;--color-text: #1a1a1b;--color-header-border: #d3d6da;--color-subtitle: #787c7e;--tile-size: 62px;--tile-gap: 5px;--board-width: calc(var(--tile-size) * 5 + var(--tile-gap) * 4);--key-height: 58px;--toggle-width: 59px;--toggle-height: 29px}[data-theme=dark]{--color-tile-border: #3a3a3c;--color-tile-filled-border: #565758;--color-key-bg: #818384;--color-key-text: #ffffff;--color-bg: #121213;--color-text: #ffffff;--color-header-border: #3a3a3c;--color-subtitle: #818384}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;display:flex;flex-direction:column;align-items:center;min-height:100dvh;width:100%;transition:background .2s ease,color .2s ease}header{width:100%;max-width:500px;text-align:center;padding:16px 0 8px;border-bottom:1px solid var(--color-header-border)}header h1{font-size:2rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.subtitle{font-size:.85rem;color:var(--color-subtitle);margin-top:4px}#toast{position:fixed;top:80px;left:50%;transform:translate(-50%);background:var(--color-text);color:var(--color-bg);padding:10px 20px;border-radius:6px;font-size:.95rem;font-weight:600;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:100;white-space:nowrap}#toast.visible{opacity:1}.tutorial-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:140;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}.tutorial-modal.is-open{display:flex}.tutorial-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#080a0e29;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}main{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px 16px 48px;width:100%;max-width:500px}.tutorial-glass{width:min(680px,95vw);max-width:min(680px,95vw);padding:24px 28px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.28);background:#1c222ea3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 36px #0000006b,0 0 0 1px #ffffff12 inset;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.tutorial-icon{font-size:1.1rem;line-height:1}.tutorial-title{font-size:clamp(1.5rem,2.3vw,1.9rem);font-weight:700;line-height:1.12}.tutorial-line{font-size:clamp(.96rem,1.25vw,1.05rem);line-height:1.42;width:100%}.tutorial-badge{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 12px;border-radius:999px;background:#ffffff1f;border:1px solid rgba(255,255,255,.2);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.tutorial-close{margin-top:6px;width:100%;border:none;border-radius:10px;height:40px;font-size:.9rem;font-weight:700;cursor:pointer;background:#fff;color:#121213}[data-theme=light] .tutorial-glass{border-color:#00000029;background:#fffc;box-shadow:0 14px 34px #0000002e,0 0 0 1px #ffffff73 inset}[data-theme=light] .tutorial-close{background:#121213;color:#fff}[data-theme=light] .tutorial-badge{background:#1212130f;border-color:#1212131f}#audio-start-btn{width:var(--board-width);height:var(--tile-size);border:none;border-radius:14px;cursor:pointer;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .12s ease,box-shadow .2s ease}#audio-start-btn.is-armed{background:linear-gradient(100deg,#ff2f5e,#ff9f1c,#ffe44d,#46d16f,#37c2ff,#6b7bff,#d24cff,#ff2f5e);background-size:260% 260%;box-shadow:0 0 0 1px #fff3 inset,0 0 18px #ff6ba099,0 0 30px #47c8ff59;animation:rainbow-shift 3.6s linear infinite,rainbow-pulse 1.6s ease-in-out infinite}#audio-start-btn.is-active{background:linear-gradient(130deg,#6f7583,#8f97a8);box-shadow:0 0 0 1px #ffffff24 inset}#audio-start-btn:active{transform:translateY(1px) scale(.995)}#audio-start-btn:disabled{cursor:not-allowed;opacity:.6}#audio-start-btn:disabled:active{transform:none}#audio-start-btn .play-icon{width:0;height:0;border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:22px solid #ffffff;margin-left:4px;filter:drop-shadow(0 0 8px rgba(255,255,255,.45));flex-shrink:0}#audio-start-btn .space-key{font-size:.72rem;font-weight:600;letter-spacing:.08em;color:#fff;border:2px solid rgba(255,255,255,.75);border-radius:6px;padding:2px 9px 3px;line-height:1;opacity:.88;text-transform:lowercase;filter:drop-shadow(0 0 6px rgba(255,255,255,.3));flex-shrink:0}@keyframes rainbow-shift{0%{background-position:0% 50%}to{background-position:100% 50%}}@keyframes rainbow-pulse{0%,to{box-shadow:0 0 0 1px #fff3 inset,0 0 18px #ff6ba099,0 0 30px #47c8ff59}50%{box-shadow:0 0 0 1px #ffffff3d inset,0 0 24px #ffe656b3,0 0 34px #59ffa873}}#board{position:relative;display:flex;flex-direction:column;gap:var(--tile-gap);overflow:hidden}.answer-row-panel{width:var(--board-width);display:none;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--color-tile-border);border-radius:16px;background:color-mix(in srgb,var(--color-bg) 82%,var(--color-key-bg) 18%)}.answer-row-panel.visible{display:flex}.answer-row-label{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-subtitle);text-align:center}.answer-row{justify-content:center}.answer-tile{background:color-mix(in srgb,var(--color-correct) 18%,var(--color-bg) 82%);border-color:color-mix(in srgb,var(--color-correct) 52%,var(--color-tile-border) 48%);color:var(--color-text)}.answer-tile.filled{border-color:color-mix(in srgb,var(--color-correct) 52%,var(--color-tile-border) 48%)}#board:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;pointer-events:none;opacity:0;z-index:7}#board.board-win-sheen:after{background:linear-gradient(106deg,#fff0 10%,#ffffff38 40%,#b6ddff33 52%,#fff0 78%);background-size:210% 100%;animation:board-sheen-win .85s cubic-bezier(.22,.61,.36,1) forwards}#board.board-loss-sheen:after{background:linear-gradient(106deg,#fff0 8%,#ffe0e659 44%,#ffc6d24d 56%,#fff0 82%);background-size:220% 100%;animation:board-sheen-loss .78s cubic-bezier(.22,.61,.36,1) forwards}#board.board-loss-red .tile{animation:tile-loss-red .9s ease forwards}.win-celebration{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:120;overflow:hidden}.win-celebration-text{position:fixed;left:50%;top:18%;transform:translate(-50%);font-size:clamp(1.1rem,3vw,1.9rem);font-weight:700;letter-spacing:.015em;color:#f8fafff7;text-shadow:0 1px 0 rgba(255,255,255,.24),0 12px 28px rgba(0,0,0,.35);animation:win-text-fade-lifecycle 3s ease-out forwards}.note-confetti{position:absolute;left:var(--x-start);top:-12vh;font-size:var(--size);line-height:1;opacity:0;text-shadow:0 4px 10px rgba(0,0,0,.35);animation:note-fall var(--dur) linear var(--delay) forwards}@keyframes win-text-fade-lifecycle{0%{opacity:0;transform:translate(-50%) translateY(6px)}18%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-4px)}}@keyframes note-fall{0%{opacity:0;transform:translateZ(0) rotate(0) scale(.85)}8%{opacity:1}to{opacity:0;transform:translate3d(var(--x-drift),118vh,0) rotate(var(--rot)) scale(1.04)}}.board-row{display:flex;gap:var(--tile-gap)}.tile{width:var(--tile-size);height:var(--tile-size);border:2px solid var(--color-tile-border);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;text-transform:uppercase;-webkit-user-select:none;user-select:none;transition:border-color .05s ease}.tile.filled{border-color:var(--color-tile-filled-border)}.tile.correct{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.tile.present{background:var(--color-present);border-color:var(--color-present);color:#fff}.tile.absent{background:var(--color-absent);border-color:var(--color-absent);color:#fff}@keyframes tile-flip{0%{transform:scaleY(1)}50%{transform:scaleY(0)}to{transform:scaleY(1)}}.tile.flipping{animation:tile-flip .44s ease;animation-fill-mode:both}@keyframes tile-note-pulse{0%{transform:translate(0) scale(1);box-shadow:0 0 #fff0}20%{transform:translate(-.6px) scale(1.015)}40%{transform:translate(.6px) scale(1.015)}60%{transform:translate(-.5px) scale(1.01)}to{transform:translate(0) scale(1);box-shadow:0 0 #fff0}}.tile.note-playing{animation:tile-note-pulse .26s ease;filter:saturate(1.12) brightness(1.14);box-shadow:0 0 0 2px #ffffff57 inset,0 0 26px #ffffff8f,0 0 8px #ffffff5c}.tile.note-playing.correct{background:color-mix(in srgb,var(--color-correct) 72%,#ffffff 28%);border-color:color-mix(in srgb,var(--color-correct) 72%,#ffffff 28%)}.tile.note-playing.present{background:color-mix(in srgb,var(--color-present) 72%,#ffffff 28%);border-color:color-mix(in srgb,var(--color-present) 72%,#ffffff 28%)}.tile.note-playing.absent{background:color-mix(in srgb,var(--color-absent) 72%,#ffffff 28%);border-color:color-mix(in srgb,var(--color-absent) 72%,#ffffff 28%)}#keyboard{display:flex;flex-direction:column;gap:8px;width:100%}#next-pitchle-timer{margin-top:4px;padding:10px 16px;display:none;border-radius:999px;border:1px solid var(--color-tile-border);background:color-mix(in srgb,var(--color-bg) 78%,var(--color-key-bg) 22%);color:var(--color-text);font-size:.9rem;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}#next-pitchle-timer.visible{display:block}.keyboard-row{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}@keyframes board-sheen-win{0%{opacity:0;background-position:-120% 0}25%{opacity:.28}to{opacity:0;background-position:120% 0}}@keyframes board-sheen-loss{0%{opacity:0;background-position:-120% 0}20%{opacity:.34}to{opacity:0;background-position:120% 0}}@keyframes tile-loss-red{0%{filter:saturate(1) brightness(1)}to{background:#efbcc8;border-color:#e2aeb9;color:#6f3644;filter:saturate(.86) brightness(1.02)}}.note-row{flex-wrap:nowrap}.key{height:var(--key-height);min-width:42px;padding:0 6px;border:none;border-radius:4px;background:var(--color-key-bg);color:var(--color-key-text);font-size:.85rem;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0}.key.key-wide{min-width:64px;font-size:.8rem}.key.key-help{min-width:48px;background:var(--color-key-text);color:var(--color-bg);border:1px solid color-mix(in srgb,var(--color-key-text) 80%,var(--color-bg) 20%)}#status-area{min-height:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;opacity:0;transition:opacity .4s ease}#status-area.visible{min-height:56px;display:flex;opacity:1}.status-message{font-size:1.2rem;font-weight:700;text-align:center}.status-win{color:var(--color-correct)}.status-loss{color:var(--color-absent)}.status-sub{font-size:.88rem;color:var(--color-text);opacity:.75;text-align:center}.status-info{color:var(--color-text);opacity:.8}.status-warning{color:var(--color-present);opacity:.95}.countdown{font-variant-numeric:tabular-nums;font-weight:700;color:var(--color-present)}.page-footer{width:100%;max-width:500px;display:flex;align-items:flex-end;justify-content:space-between;padding:20px 16px calc(28px + env(safe-area-inset-bottom,0px));gap:12px;margin-top:auto}.bottom-right-controls{display:flex;align-items:flex-end;gap:12px}.settings-stack{display:flex;flex-direction:column;gap:10px}#share-mock-btn{border:1px solid var(--color-tile-border);background:color-mix(in srgb,var(--color-bg) 72%,var(--color-key-bg) 28%);color:var(--color-text);border-radius:999px;padding:10px 14px;display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:700;cursor:pointer}#share-mock-btn:active{transform:translateY(1px)}.project-credit{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--color-tile-border);background:color-mix(in srgb,var(--color-bg) 72%,var(--color-key-bg) 28%);color:var(--color-text);border-radius:999px;padding:9px 12px;font-size:.82rem;font-weight:700;text-decoration:none}.project-credit img{width:18px;height:18px;display:block;filter:brightness(.82)}@media(max-width:640px){.page-footer{flex-direction:column-reverse;align-items:stretch;gap:14px;padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}.bottom-right-controls{justify-content:space-between}.project-credit{align-self:flex-start}}.theme-toggle,.notation-toggle{cursor:pointer;-webkit-user-select:none;user-select:none}.theme-toggle input[type=checkbox],.notation-toggle input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.toggle-track{display:flex;align-items:center;justify-content:space-between;width:var(--toggle-width);height:var(--toggle-height);background:#5a5aad;border-radius:15px;padding:0 5px;position:relative;transition:background .2s ease}.notation-track{background:#2f7dff}#theme-checkbox:checked+.toggle-track{background:#a0a0b0}#notation-checkbox:checked+.notation-track{background:#8a4dff}.toggle-icon{font-size:14px;line-height:1;z-index:1;pointer-events:none}.toggle-thumb{position:absolute;left:3px;top:3px;width:23px;height:23px;background:#fff;border-radius:50%;transition:transform .2s ease;z-index:2}#theme-checkbox:checked+.toggle-track .toggle-thumb{transform:translate(30px)}#notation-checkbox:checked+.notation-track .toggle-thumb{transform:translate(30px)}.key:active{filter:brightness(.9)}.key.correct{background:var(--color-correct);color:#fff}.key.present{background:var(--color-present);color:#fff}.key.absent{background:var(--color-absent);color:#fff}[data-theme=dark] .key.absent{color:transparent}