:root{--font-ui:"Segoe UI Symbol", "Apple Symbols", "Noto Music", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--color-bg:#1a1a1a;--color-surface:#2a2a2a;--color-surface-alt:#333;--color-surface-alt-hover:#2b2b2b;--color-surface-soft:#262626;--color-border:#444;--color-text:#fff;--color-text-muted:#ffffffb3;--color-primary:#4caf50;--color-primary-hover:#45a049;--color-primary-soft:#66bb6a;--color-primary-soft-hover:#81c784;--color-stop:#d32f2f;--color-stop-hover:#b71c1c;--color-pause:#ffc107;--color-pause-hover:#ffb300;--color-neutral:#666;--color-neutral-hover:#555;--color-recording:#e53935;--color-disabled:#999;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 2px 8px #00000040;--shadow-md:0 8px 32px #00000080;--focus-ring:0 0 0 2px #6fd67647;--fs-ui-xs:clamp(.8rem, .75rem + .15vw, .95rem);--fs-ui-sm:clamp(1rem, .94rem + .2vw, 1.15rem);--fs-ui-md:clamp(1.1rem, 1rem + .35vw, 1.35rem);--fs-ui-lg:clamp(1.35rem, 1.2rem + .5vw, 1.8rem);--fs-ui-xl:clamp(1.6rem, 1.35rem + .7vw, 2.2rem);--fs-grid-label:clamp(1.8rem, 1.5rem + .9vw, 2.2rem);--fs-grid-label-sm:clamp(1.25rem, 1.1rem + .5vw, 1.55rem);--fs-grid-note:clamp(2.1rem, 1.7rem + 1.15vw, 3rem);--grid-rows:6;--grid-cols:9;--grid-note-cols:8}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-ui);background:var(--color-bg);color:var(--color-text);overflow-x:hidden}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.app{grid-template-rows:auto 1fr;width:100vw;min-height:100vh;display:grid}.rotate-prompt{z-index:9999;font-size:var(--fs-ui-lg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1rem;display:none;position:fixed;inset:0}@media (orientation:portrait) and (width<=768px){.rotate-prompt{display:flex}.app{display:none}}@media (orientation:landscape) and (height<=500px){body{overflow:hidden}.app{height:100dvh;min-height:100dvh}}@media (height<=600px){.app{min-height:auto}}.top-panel{background:var(--color-surface);grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding:1rem;display:grid;overflow:visible}.volume-panel{grid-template-columns:auto 1fr auto auto;justify-self:start;align-items:center;gap:1.5rem .75rem;display:grid}.volume-control{display:contents}.playback-controls{justify-content:center;align-items:center;gap:1rem;min-width:80px;display:flex}.settings-panel{font-size:var(--fs-ui-md);flex-direction:column;justify-self:end;gap:1rem;display:flex}.auth-controls{justify-content:flex-end;gap:.75rem;display:flex}button{cursor:pointer;color:var(--color-text);font-family:inherit;font-size:var(--fs-ui-sm);border:none;transition:background .12s,box-shadow .12s,transform 80ms,opacity .12s}button:active:not(:disabled){transform:scale(.96)}button:disabled{cursor:not-allowed}.btn-text{background:var(--color-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:.4rem 1rem;position:relative;overflow:hidden}.btn-text:hover:not(:disabled){background:var(--color-primary-hover)}.btn-text:disabled:after{content:"";border-radius:inherit;pointer-events:none;background:#00000059;position:absolute;inset:0}.btn-circle{box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.btn-circle:disabled{opacity:.5}.volume-btn{width:32px;height:32px;font-size:var(--fs-ui-xs);background:0 0;border:1px solid #ffffff4d}.volume-btn:hover{background:#ffffff1a}.volume-btn.muted{background-color:var(--color-stop);border-color:var(--color-stop)}.playback-btn-wrapper{flex-direction:column;align-items:center;gap:.8rem;display:flex}.playback-btn{width:72px;height:72px;font-size:var(--fs-ui-lg)}.playback-btn-label{font-size:var(--fs-ui-md)}.playback-btn-label.recording{color:var(--color-recording)}.play-btn{background:var(--color-primary)}.play-btn:hover:not(:disabled){background:var(--color-primary-hover)}.pause-btn{background:var(--color-pause)}.pause-btn:hover:not(:disabled){background:var(--color-pause-hover)}.stop-btn{background:var(--color-stop)}.stop-btn:hover:not(:disabled){background:var(--color-stop-hover)}.record-btn{background:var(--color-surface-alt);color:var(--color-recording);border:2px solid var(--color-neutral)}.record-btn:hover:not(:disabled){background:var(--color-surface-alt-hover)}.animate-pulse{animation:3s ease-out infinite pulse}@keyframes pulse{0%,to{opacity:1}20%,60%{opacity:.6}40%{opacity:.4}}.volume-label{text-align:right;font-size:var(--fs-ui-md)}.volume-control input[type=range]{appearance:none;cursor:pointer;background:#3a3a3a;border:1px solid #ffffff1f;border-radius:999px;outline:none;width:100%;min-width:48px;max-width:200px;height:5px;transition:border-color .12s,box-shadow .12s}.volume-control input[type=range]:hover{border-color:#6fd6768c}.volume-control input[type=range]:focus-visible{box-shadow:var(--focus-ring)}.volume-control input[type=range]::-webkit-slider-runnable-track{background:#3a3a3a;border-radius:999px;height:5px}.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#7edb85;border:2px solid #1f5e23;border-radius:50%;width:14px;height:14px;margin-top:-5px;transition:background-color .12s,border-color .12s,transform 80ms,box-shadow .12s;box-shadow:0 1px 3px #00000059}.volume-control input[type=range]:hover::-webkit-slider-thumb{background:#95e99b;border-color:#2a7a2f}.volume-control input[type=range]:active::-webkit-slider-thumb{background:#b4f5b8;transform:scale(1.06)}.volume-control input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #6fd67659,0 1px 3px #00000059}.volume-control input[type=range]::-moz-range-track{background:#3a3a3a;border:1px solid #ffffff1f;border-radius:999px;height:5px}.volume-control input[type=range]::-moz-range-thumb{background:#7edb85;border:2px solid #1f5e23;border-radius:50%;width:14px;height:14px;transition:background-color .12s,border-color .12s,transform 80ms,box-shadow .12s;box-shadow:0 1px 3px #00000059}.volume-control input[type=range]:hover::-moz-range-thumb{background:#95e99b;border-color:#2a7a2f}.volume-control input[type=range]:active::-moz-range-thumb{background:#b4f5b8;transform:scale(1.06)}.volume-control input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #6fd67659,0 1px 3px #00000059}.instructions-button{border-radius:var(--radius-sm);font-size:var(--fs-ui-md);background:0 0;gap:.5rem;padding:.3rem .5rem;display:inline-flex}.instructions-button:hover{background:#ffffff1a}.difficulty-select-wrapper{flex-direction:column;gap:.25rem;padding:0 .5rem;display:flex}.difficulty-select{color:#f3f3f3;font-family:inherit;font-size:var(--fs-ui-sm);appearance:none;background-color:#0000;background-image:linear-gradient(45deg,#0000 50%,#8ed991 50%),linear-gradient(135deg,#8ed991 50%,#0000 50%);background-position:calc(100% - 14px) calc(50% - 3px),calc(100% - 9px) calc(50% - 3px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;border:1px solid #5a5a5a;border-radius:8px;padding:.4rem 2.1rem .4rem .7rem;font-weight:500;line-height:1.2;transition:border-color .12s,box-shadow .12s,background-color .12s}.difficulty-select:hover{border-color:#78c67c}.difficulty-select:focus-visible{box-shadow:var(--focus-ring);border-color:#6fd676;outline:none}.difficulty-select option{color:#f3f3f3;background:#2f2f2f}.hamburger-menu{background-color:var(--color-surface);justify-self:end;display:none;position:relative}.hamburger-backdrop{z-index:70;background:#00000059;border:0;position:fixed;inset:0}.hamburger-btn{background:var(--color-surface-alt);color:var(--color-text);border:1px solid var(--color-border);width:44px;height:44px;box-shadow:var(--shadow-sm);z-index:40;justify-content:center;align-items:center;display:inline-flex}.hamburger-btn:hover:not(:disabled){background:var(--color-surface-alt-hover)}.hamburger-drawer{background:var(--color-surface);border-left:1px solid var(--color-border);border-radius:var(--radius-md);width:min(30rem,90vw);height:100dvh;box-shadow:var(--shadow-md);box-sizing:border-box;padding:calc(.5rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) 1.25rem;z-index:80;flex-direction:column;gap:1rem;transition:transform .2s;display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.hamburger-drawer.open{transform:translate(0)}.hamburger-drawer-header{justify-content:flex-end;align-items:center;gap:1rem;display:flex}@media (orientation:landscape) and (height<=500px) and (hover:none){.top-panel{grid-template-columns:1fr auto;align-items:flex-start;padding:.5rem}.playback-btn{width:60px;height:60px}.playback-btn-label,.top-panel>.volume-panel,.top-panel>.settings-panel{display:none}.hamburger-menu{display:inline-flex;overflow:visible}.volume-btn{width:44px;height:44px;font-size:var(--fs-ui-sm)}}.music-grid{grid-template-rows:repeat(var(--grid-rows), 1fr);grid-template-columns:minmax(100px, 200px) repeat(var(--grid-note-cols), 1fr);-webkit-user-select:none;user-select:none;padding:clamp(.35rem,.8vw,.8rem);display:grid}.music-grid.playback-playing{opacity:1;filter:saturate()}.music-grid.playback-paused{opacity:.7;filter:saturate(.7)}.music-grid.playback-stopped{opacity:.55}.music-grid>div{justify-content:center;align-items:center;display:flex}.chord-label-cell,.scale-label-cell,.scale-degree-label-cell{-webkit-user-select:text;user-select:text}.note-cell{background:var(--cell-color);cursor:pointer;font-size:var(--fs-grid-note);color:#000;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:8px;margin:4px;transition:transform 80ms ease-out,filter 80ms ease-out}.note-cell.pressed{filter:brightness(.8);transform:scale(.98)}.note-name{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.chord-label-cell{border:4px solid #0000;flex-direction:column;position:relative}.chord-label-cell.highlighted{background-color:#fff3;border:4px solid #fff}.countdown{color:#fff;width:22px;height:22px;line-height:1;font-size:var(--fs-ui-xs);box-sizing:border-box;background:#000000e6;border:2.2px solid #ffffffe6;border-radius:50%;place-items:center;padding-top:2px;font-weight:600;display:grid;position:absolute;top:8px;right:8px}.chord-label{font-size:var(--fs-grid-label);position:relative}.chord-label:after{content:attr(data-keyboard-hint);font-size:var(--fs-ui-sm);color:#777;white-space:nowrap;font-style:italic;position:absolute;top:120%;left:50%;transform:translate(-50%)}.scale-label-cell{font-size:var(--fs-grid-label);text-align:center;flex-direction:column}.scale-degree-label-cell{font-size:var(--fs-grid-note);position:relative}.scale-degree-label-cell .degree-number{position:relative}.scale-degree-label{align-items:flex-end;display:inline-flex}.degree-with-caret{flex-direction:column;align-items:center;display:inline-flex}.degree-caret{margin-bottom:-.5em;font-size:.8em;transform:scaleY(.6)}.blues-row{padding-top:.8rem}.mixolydian-row{padding-bottom:.8rem}.music-grid>.blues-row.scale-label-cell{justify-content:flex-start}.music-grid>.mixolydian-row.scale-label-cell{justify-content:flex-end}.music-grid>.blues-row.scale-degree-label-cell{align-items:flex-start}.music-grid>.mixolydian-row.scale-degree-label-cell{align-items:flex-end}@media (width<=1279px) and (hover:none){.chord-label:after{display:none}}@media (width<=1023px){.music-grid{grid-template-columns:minmax(88px, 100px) repeat(var(--grid-note-cols), 1fr);padding:0}.chord-label,.scale-label-cell{font-size:var(--fs-grid-label-sm)}.note-cell{margin:3px}}@media (height<=920px){.music-grid{padding:0}.chord-label,.scale-label-cell{font-size:var(--fs-grid-label-sm)}}@media (orientation:landscape) and (height<=500px){:root{--grid-rows:4}#app{min-height:100dvh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}.music-grid>.scale-label-row{display:none}}dialog{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:inherit;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}dialog::backdrop{background:#00000080}dialog p{font-size:var(--fs-ui-md);margin-bottom:.75rem}.dialog-header{border-bottom:1px solid var(--color-border);padding:1.5rem 1.5rem 1rem}.dialog-header h2{font-size:var(--fs-ui-xl);font-weight:800}.dialog-content{flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.dialog-content h3{font-size:var(--fs-ui-lg);font-weight:600}.dialog-footer{border-top:1px solid var(--color-border);justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem 1.5rem;display:flex}@keyframes shake{0%,to{transform:translate(-50%,-50%)}20%{transform:translate(calc(-50% - 6px),-50%)}40%{transform:translate(calc(6px - 50%),-50%)}60%{transform:translate(calc(-50% - 4px),-50%)}80%{transform:translate(calc(4px - 50%),-50%)}}.dialog-shake{animation:.3s ease-in-out shake}.close-btn{background:var(--color-stop)}.close-btn:hover:not(:disabled){background:var(--color-stop-hover)}.close-btn svg{vertical-align:-.2em}.back-btn{background:var(--color-neutral)}.back-btn:hover:not(:disabled){background:var(--color-neutral-hover)}.back-btn svg{vertical-align:-.2em}.instructions-dialog{width:90%;max-width:480px}.instructions-dialog p{line-height:1.2;font-size:var(--fs-ui-md)}.instructions-dialog ul{flex-direction:column;gap:1rem;padding-left:1.25rem;list-style:none;display:flex}.instructions-dialog li{font-size:var(--fs-ui-md);color:var(--color-text-muted);padding-left:.5rem;position:relative}.instructions-dialog li:before{content:"‣";color:var(--color-primary);margin-left:-1.25rem;position:absolute}.instructions-dialog li h3{font-size:inherit;color:var(--color-text);letter-spacing:.02em;margin-bottom:.25rem;font-weight:800;display:block}.conflict-dialog{width:90%;max-width:440px}.conflict-dialog .dialog-footer{justify-content:center}.auth-dialog{width:90%;max-width:440px}.auth-dialog .dialog-footer{justify-content:center;padding:1rem 0 1.5rem}.confirm-close-dialog{width:90%;max-width:440px}.download-dialog{width:90%;max-width:800px}.download-dialog .dialog-content>p{margin-bottom:0}.auth-form{flex-direction:column;gap:1rem;display:flex}.form-group{flex-direction:column;gap:.1rem;display:flex}.form-group label{font-size:var(--fs-ui-md)}.form-group input{border-radius:var(--radius-sm);font-size:var(--fs-ui-sm);background:#fffffff2;border:1px solid #444;padding:.25rem;font-family:inherit}.form-group input:focus{border-color:var(--color-primary);outline:none}.auth-feedback{border-radius:var(--radius-sm);font-size:var(--fs-ui-md);color:#ff8a80;background:#c628281f;padding:.65rem .75rem}.auth-form .btn-text{margin-top:1rem}.toggle-auth-link{box-shadow:none;color:var(--color-primary-soft);background:0 0}.toggle-auth-link:hover{color:var(--color-primary-soft-hover);text-decoration:underline}.recording-sections{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.recording-section{flex-direction:column;gap:.5rem;display:flex}.recording-section h3{color:#fffffff2}.audio-preview{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-md);align-items:center;height:120px;padding:0 1rem;display:flex}.audio-preview audio{width:100%}.log-preview{background:var(--color-surface-soft);border:1px solid var(--color-border);border-radius:var(--radius-md);height:120px;position:relative;overflow-y:auto}.log-pre{color:#ffffffe6;white-space:pre-wrap;word-break:break-word;height:100%;padding:.75rem;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.75rem;line-height:1.4;overflow:hidden auto}.log-preview-fade{background:linear-gradient(to bottom, transparent, var(--color-surface-soft));pointer-events:none;height:50px;position:absolute;bottom:0;left:0;right:0}.error-message{border-radius:var(--radius-sm);color:#ff8a80;font-size:var(--fs-ui-md);background:#c628281f;padding:1rem}@media (width<=1023px){dialog{max-height:90dvh;overflow-y:auto}}@media (width<=600px){.recording-sections{grid-template-columns:1fr}}