:root{--tolex:#1b1916;--piping:oklch(93% .03 88);--cream:oklch(92% .035 85);--gold-hi:oklch(90% .08 90);--gold:oklch(80% .1 84);--gold-lo:oklch(62% .1 74);--ink:oklch(24% .03 70);--ink-soft:oklch(36% .04 72);--led-off:oklch(30% .08 28);--led-on:oklch(66% .23 30);--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--font-script:"Yellowtail", cursive;--font-label:"Barlow Condensed", "Arial Narrow", sans-serif;--font-body:"Barlow", "Helvetica Neue", sans-serif;--ease-out:cubic-bezier(.22, 1, .36, 1);--tolex-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' seed='4' stitchTiles='stitch'/><feDiffuseLighting surfaceScale='2.2' lighting-color='%23ffffff'><feDistantLight azimuth='235' elevation='38'/></feDiffuseLighting></filter><rect width='100%' height='100%' fill='%231b1916'/><rect width='100%' height='100%' filter='url(%23t)' opacity='0.16'/></svg>");--brushed-gold:repeating-linear-gradient(0deg, #fffae11a 0 1px, #5a3c0a12 1px 2px, transparent 2px 4px), linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 62%, var(--gold) 100%);font-family:var(--font-body);color:var(--cream)}html,body{background:#0d0b09;height:100%;margin:0;overflow:hidden}button,select{font:inherit}#stage{touch-action:none;width:100vw;height:100dvh;position:fixed;inset:0}#webcam{display:none}#overlay{width:100%;height:100%;position:absolute;inset:0}.hidden{display:none!important}.tolex{background:var(--tolex) var(--tolex-grain);outline:2px solid var(--piping);outline-offset:-7px;box-shadow:0 12px 28px #0000008c,inset 0 1px #ffffff0f}.plate-label{color:var(--ink);font-family:var(--font-label);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px #fff5d28c;white-space:nowrap;font-size:12px;font-weight:700}.plate-label b{color:var(--ink-soft);font-weight:700}#amp{top:var(--space-sm);box-sizing:border-box;z-index:10;border-radius:12px;width:min(880px,100vw - 16px);padding:14px;position:absolute;left:50%;transform:translate(-50%)}.faceplate{justify-content:space-between;align-items:center;gap:var(--space-lg);padding:var(--space-sm) var(--space-xl);background:var(--brushed-gold);border-radius:4px;display:flex;box-shadow:inset 0 0 0 1px #462d0a8c,inset 0 1px #fffadc99,0 2px #00000080}.plate-group{align-items:center;gap:var(--space-xs);flex-direction:column;display:flex}.plate-input{gap:var(--space-md);flex-direction:row}.plate-eyebrow{width:9ch;color:var(--ink);font-family:var(--font-label);letter-spacing:.12em;text-transform:uppercase;font-size:11px;font-weight:700;line-height:1.05}.jack{width:34px;height:34px;transition:box-shadow .3s var(--ease-out);background:radial-gradient(circle,#050403 0 34%,#3a3a3a 36%,#c9c9c9 44%,#6a6a6a 58%,#e8e8e8 70%,#7a7a7a 84%,#2a2a2a 100%);border-radius:50%;box-shadow:0 2px 3px #00000073}.jack.live{box-shadow:0 2px 3px #00000073,0 0 0 2px #281e0a59}.knob-unit{cursor:pointer;flex-direction:column;align-items:center;gap:6px;display:flex;position:relative}.knob-unit select{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.knob-scale{place-items:center;width:64px;height:64px;display:grid;position:relative}.knob-scale i{transform:rotate(var(--a));position:absolute;inset:0}.knob-scale i:before{content:"";background:var(--ink);border-radius:1px;width:2px;height:5px;margin-left:-1px;position:absolute;top:0;left:50%}.knob-scale i.on:before{background:var(--ink);height:7px;box-shadow:0 0 0 .5px var(--ink)}.knob{width:50px;height:50px;transform:rotate(var(--angle,-135deg));transition:transform .35s var(--ease-out);background:repeating-conic-gradient(#f6e2a4 0deg 5deg,#8f6c30 5deg 10deg);border-radius:50%;position:relative;box-shadow:0 4px 7px #00000080,inset 0 0 0 1px #3c280a99}.knob-cap{background:radial-gradient(circle at 36% 30%,#fff5cf 0%,#e6c677 38%,#b08638 78%,#8a6427 100%);border-radius:50%;position:absolute;inset:6px;box-shadow:inset 0 -2px 3px #50320a73,0 1px 2px #00000073}.knob-cap:after{content:"";background:var(--ink);border-radius:2px;width:3px;height:13px;margin-left:-1.5px;position:absolute;top:3px;left:50%}.knob-unit:focus-within .knob{box-shadow:0 4px 7px #00000080,0 0 0 3px #281c0ab3}.switch-row{gap:var(--space-md);display:flex}.toggle{cursor:pointer;background:radial-gradient(circle,#2a2a2a 0 30%,#d8d8d8 34%,#8a8a8a 60%,#eee 80%,#6a6a6a 100%);border:none;border-radius:13px;width:26px;height:40px;padding:0;position:relative;box-shadow:0 2px 3px #0006}.toggle span{transform-origin:50% 2px;width:9px;height:20px;transition:transform .2s var(--ease-out);background:linear-gradient(90deg,#7a7a7a,#f4f4f4 45%,#9a9a9a);border-radius:5px;margin:-2px 0 0 -4.5px;position:absolute;top:50%;left:50%;transform:rotate(180deg);box-shadow:0 3px 3px #00000073}.toggle[aria-pressed=true] span,.toggle[data-held] span{transform:rotate(0)}.toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.switch-legend i{font-size:14px;font-style:normal}.plate-power{gap:6px}.led{background:radial-gradient(circle at 35% 30%, oklch(50% .1 28), var(--led-off));border-radius:50%;width:12px;height:12px;transition:background .12s,box-shadow .12s;box-shadow:inset 0 1px 2px #0009,0 0 0 2px #3c280a59}.led.on{background:radial-gradient(circle at 35% 30%, oklch(90% .1 40), var(--led-on));box-shadow:0 0 10px 2px oklch(66% .23 30/.7),0 0 0 2px #3c280a59}.led.hit{background:radial-gradient(circle at 35% 30%,oklch(97% .06 60),oklch(75% .2 40));box-shadow:0 0 18px 5px oklch(70% .23 35/.85),0 0 0 2px #3c280a59}.plate-model{color:var(--ink);font-family:var(--font-label);letter-spacing:.04em;font-size:20px;font-weight:600;line-height:1}.plate-buttons{gap:var(--space-sm);flex-direction:row}.plate-button{min-width:44px;height:32px;padding:0 var(--space-md);white-space:nowrap;color:var(--gold-hi);font-family:var(--font-label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:linear-gradient(#2e261b,#17120b);border:1px solid #1e1408e6;border-radius:4px;font-size:13px;font-weight:700;box-shadow:inset 0 1px #ffe6aa26,0 2px #3c280a99}.plate-button.round{letter-spacing:0;border-radius:50%;width:32px;min-width:32px;padding:0}.plate-button[aria-expanded=true]{background:linear-gradient(#17120b,#2e261b);box-shadow:inset 0 2px 3px #0009}.plate-button:disabled{opacity:.45;cursor:default}.plate-button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.button-led{vertical-align:middle;background:radial-gradient(circle at 35% 30%, oklch(50% .1 28), var(--led-off));border-radius:50%;width:7px;height:7px;margin:0 7px 1px 0;transition:background .12s,box-shadow .12s;display:inline-block;box-shadow:inset 0 1px 1px #0009}#musicButton[data-on] .button-led{background:radial-gradient(circle at 35% 30%, oklch(90% .1 40), var(--led-on));box-shadow:0 0 6px 1px oklch(66% .23 30/.7)}.music-icon{display:none}:is(.knob-unit:has(select:disabled),.plate-switches:has(.toggle:disabled)){opacity:.38;cursor:default}.knob-unit select:disabled,.toggle:disabled{cursor:default}#stage.music .free-only,#stage:not(.music) .music-only,#stage.auto .manual-only,#stage:not(.auto) .auto-only{display:none}#chordBadge{pointer-events:none;z-index:5;position:absolute;top:132px;left:clamp(16px,4vw,48px)}#chordDisplay{color:var(--cream);font-family:var(--font-script);transform-origin:0 100%;text-shadow:0 3px #140c06d9,0 8px 20px #0009;transition:opacity .2s var(--ease-out);font-size:96px;line-height:1;transform:rotate(-4deg)}#chordDisplay.pop{animation:pop .28s var(--ease-out)}@keyframes pop{0%{opacity:.4;transform:rotate(-4deg)translateY(6px)}}#romanDisplay{margin-top:var(--space-sm);padding-left:var(--space-xs);color:var(--gold);font-family:var(--font-label);letter-spacing:.24em;text-transform:uppercase;text-shadow:0 1px 2px #000c;font-size:15px;font-weight:600}#guide{pointer-events:none;z-index:6;position:absolute;inset:0}.guide-card{box-sizing:border-box;color:var(--cream);border-radius:10px;padding:18px 20px 16px;font-size:13px;line-height:1.5;position:absolute}.guide-card.left{top:250px;left:var(--space-sm);width:216px}.guide-card.right{top:140px;right:var(--space-sm);width:300px}.guide-title{margin:0 0 var(--space-sm);color:var(--gold);font-family:var(--font-label);letter-spacing:.22em;text-transform:uppercase;font-size:12px;font-weight:700}.guide-card p{margin:var(--space-sm) 0 0}.guide-rows{gap:var(--space-xs);margin:0;padding:0;list-style:none;display:flex}.guide-rows li{font-family:var(--font-label);letter-spacing:.06em;transition:background .15s var(--ease-out), color .15s var(--ease-out);border-radius:4px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:6px 4px;font-size:13px;font-weight:600;display:flex}.guide-rows li .gesture{font-size:18px}#degreeRows{flex-direction:column;gap:2px}#degreeRows li{align-items:center;gap:var(--space-sm);grid-template-columns:28px 1fr auto;padding:3px 10px 3px 6px;display:grid}#degreeRows .gesture{font-size:17px}#degreeRows .roman{color:oklch(80% .04 85);letter-spacing:.04em;font-size:13px}#degreeRows .chord{color:var(--cream);font-family:var(--font-script);letter-spacing:0;font-size:22px;font-weight:400;line-height:1.15}.guide-rows li.active,.guide-chips span.active{background:var(--brushed-gold);color:var(--ink);box-shadow:inset 0 0 0 1px #462d0a99}#degreeRows li.active .roman,#degreeRows li.active .chord{color:var(--ink)}.guide-chips{gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap;display:flex}.guide-chips span{font-family:var(--font-label);letter-spacing:.08em;text-transform:uppercase;border:1px solid #efe4c840;border-radius:3px;padding:3px 8px;font-size:12px;font-weight:600}.guide-chips span.active{border-color:#0000}#tutorial{top:148px;right:var(--space-sm);box-sizing:border-box;z-index:8;width:340px;animation:warm-up .5s var(--ease-out) both;border-radius:12px;padding:14px;position:absolute}.tutorial-plate{align-items:center;gap:var(--space-md);padding:5px 5px 5px var(--space-md);background:var(--brushed-gold);border-radius:4px;display:flex;box-shadow:inset 0 0 0 1px #462d0a8c}.tutorial-leds{gap:7px;margin-left:auto;display:flex}.tutorial-leds i{background:radial-gradient(circle at 35% 30%, oklch(50% .1 28), var(--led-off));border-radius:50%;width:9px;height:9px;box-shadow:inset 0 1px 2px #0009,0 0 0 1.5px #3c280a59}.tutorial-leds i.on,.tutorial-leds i.now{background:radial-gradient(circle at 35% 30%, oklch(90% .1 40), var(--led-on));box-shadow:0 0 8px 1px oklch(66% .23 30/.7),0 0 0 1.5px #3c280a59}.tutorial-leds i.now{opacity:.55;animation:1.2s ease-in-out infinite alternate standby}@keyframes standby{0%{opacity:.2}to{opacity:.85}}.tutorial-body{padding:var(--space-md) var(--space-sm) var(--space-xs)}.tutorial-body.enter{animation:step-in .35s var(--ease-out)}@keyframes step-in{0%{opacity:0;transform:translateY(6px)}}.tutorial-head{justify-content:space-between;align-items:flex-end;gap:var(--space-md);display:flex}.tutorial-cue{color:var(--gold);font-family:var(--font-label);letter-spacing:.22em;text-transform:uppercase;margin:0;font-size:12px;font-weight:700}.tutorial-title{color:var(--cream);font-family:var(--font-script);white-space:nowrap;transform-origin:0 100%;text-shadow:0 3px #140c06d9,0 8px 20px #0009;transition:color .2s var(--ease-out);margin:4px 0 0;font-size:72px;font-weight:400;line-height:1;transform:rotate(-4deg)}#tutorial[data-state=passed] .tutorial-title,#tutorial[data-state=end] .tutorial-title{color:var(--gold-hi)}.tutorial-hands{gap:var(--space-sm);display:flex}.tutorial-hand{box-sizing:border-box;background:#00000047;border:1px solid #efe4c840;border-radius:6px;flex-direction:column;align-items:center;gap:3px;min-width:58px;padding:8px 8px 6px;display:flex}.tutorial-hand .gesture{white-space:nowrap;align-items:center;font-size:28px;line-height:1.1;display:flex}.tutorial-hand small{color:oklch(80% .04 85);font-family:var(--font-label);letter-spacing:.14em;text-transform:uppercase;font-size:10px;font-weight:700}.zone-tag{color:#efe4c8;font-family:var(--font-label);background:#140c0699;border:1.5px solid #e6c677;border-radius:3px;margin-left:4px;padding:0 6px;font-size:15px;font-weight:700;line-height:1.4}.tutorial-text{max-width:40ch;margin:var(--space-md) 0 0;color:oklch(86% .03 85);text-wrap:pretty;font-size:14px;line-height:1.55}.tutorial-text b{color:var(--cream);font-weight:500}.tutorial-keys{margin:var(--space-xs) 0 0;color:oklch(75% .03 80);font-size:12px;line-height:1.5;display:none}#stage.no-camera .tutorial-keys{display:block}.tutorial-status{align-items:center;gap:var(--space-sm);min-height:18px;margin:var(--space-md) 0 0;color:var(--gold);font-family:var(--font-label);letter-spacing:.14em;text-transform:uppercase;font-size:13px;font-weight:600;display:flex}.tutorial-status .led{flex:none;width:10px;height:10px}.tutorial-status b{letter-spacing:.04em;text-transform:none;font-weight:700}#tutorial[data-state=end] :is(.tutorial-hands,.tutorial-keys,.tutorial-status){display:none}.modal{z-index:40;background:#080604b3;place-items:center;display:grid;position:absolute;inset:0}.help-card{box-sizing:border-box;border-radius:12px;width:min(560px,100vw - 24px);max-height:calc(100dvh - 40px);padding:16px;overflow-y:auto}.help-plate{padding:var(--space-sm) var(--space-lg);background:var(--brushed-gold);border-radius:4px;justify-content:space-between;align-items:center;display:flex;box-shadow:inset 0 0 0 1px #462d0a8c}.help-plate h2{color:var(--ink);font-family:var(--font-label);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px #fff5d28c;margin:0;font-size:18px;font-weight:700}.help-body{padding:var(--space-sm) var(--space-lg) var(--space-lg);font-size:14px;line-height:1.6}.help-body h3,.music-body h3{margin:var(--space-xl) 0 var(--space-xs);color:var(--gold);font-family:var(--font-label);letter-spacing:.18em;text-transform:uppercase;font-size:13px;font-weight:700}.help-body p{color:oklch(86% .03 85);max-width:65ch;margin:0}.help-body a{color:var(--gold)}.help-lesson{justify-content:space-between;align-items:center;gap:var(--space-md) var(--space-lg);margin-top:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid #efe4c824;flex-wrap:wrap;display:flex}.help-lesson p{flex:18ch}.credit{opacity:.7;font-size:12px;margin-top:var(--space-xl)!important}.music-card{width:min(660px,100vw - 24px)}.music-body{padding:0 var(--space-lg) var(--space-lg)}.music-body h3{margin:var(--space-lg) 0 var(--space-sm)}.music-intro{max-width:60ch;margin:var(--space-md) 0 0;color:oklch(86% .03 85);font-size:14px;line-height:1.5}.slot input,.chip input{opacity:0;pointer-events:none;position:absolute}.slot,.chip{cursor:pointer;position:relative}.slot-grid{gap:var(--space-sm);grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.slot-face{transition:background .15s var(--ease-out), border-color .15s var(--ease-out);background:#00000047;border:1px solid #efe4c840;border-radius:6px;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 5px;display:flex}.slot-face .gesture{font-size:20px;line-height:1.1}.slot-face .gesture.tilted{transform:rotate(-35deg)}.slot[hidden],#tiltRow[hidden]{display:none}.row-toggle{margin-top:var(--space-sm)}.slot-chord{max-width:100%;color:var(--cream);font-family:var(--font-label);letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap;font-size:22px;font-weight:700;line-height:28px;overflow:hidden}.slot-chord.long{font-size:17px}.slot-chord.empty{opacity:.35}.chip-grid{gap:var(--space-xs);display:grid}.roots{grid-template-columns:repeat(13,1fr)}.types{grid-template-columns:repeat(8,1fr)}.chip>span{height:34px;color:var(--cream);font-family:var(--font-label);letter-spacing:.03em;white-space:nowrap;transition:background .15s var(--ease-out), border-color .15s var(--ease-out);border:1px solid #efe4c840;border-radius:3px;place-items:center;padding:0 4px;font-size:15px;font-weight:600;display:grid}.slot:hover .slot-face,.chip:hover>span{border-color:#efe4c88c}.slot input:checked+.slot-face,.chip input:checked+span{background:var(--brushed-gold);border-color:#0000;box-shadow:inset 0 0 0 1px #462d0a99}.slot input:checked+.slot-face .slot-chord,.chip input:checked+span{color:var(--ink)}.chip:has(input:disabled){pointer-events:none;opacity:.35}.slot input:focus-visible+.slot-face,.chip input:focus-visible+span{outline:2px solid var(--cream);outline-offset:2px}.auto-plate{justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg) var(--space-sm);background:var(--brushed-gold);border-radius:4px;display:flex;box-shadow:inset 0 0 0 1px #462d0a8c,inset 0 1px #fffadc99,0 2px #00000080}.bpm-group{flex:1}.auto-plate{flex-wrap:wrap}.hold-row{align-items:center;gap:var(--space-sm) var(--space-md);padding-top:var(--space-sm);border-top:1px solid #462d0a4d;flex-basis:100%;display:flex}.hold-row .toggle{flex:none;margin-inline:7px;transform:rotate(90deg)}.hold-row:has(.toggle:disabled){opacity:.45}.hold-hint{color:var(--ink-soft);font-size:12px;line-height:1.35}.bpm-row{align-items:center;gap:var(--space-sm);width:100%;height:40px;display:flex}.bpm-range{cursor:pointer;appearance:none;background:0 0;flex:1;min-width:90px;height:24px;margin:0}.bpm-range::-webkit-slider-runnable-track{background:linear-gradient(#17120b,#3a2c16);border-radius:3px;height:6px;box-shadow:inset 0 1px 2px #000000b3,0 1px #fff5d28c}.bpm-range::-moz-range-track{background:linear-gradient(#17120b,#3a2c16);border-radius:3px;height:6px;box-shadow:inset 0 1px 2px #000000b3,0 1px #fff5d28c}.bpm-range::-webkit-slider-thumb{appearance:none;background:linear-gradient(90deg,#7a7a7a,#f4f4f4 45%,#9a9a9a);border-radius:3px;width:14px;height:24px;margin-top:-9px;box-shadow:0 2px 3px #00000073}.bpm-range::-moz-range-thumb{background:linear-gradient(90deg,#7a7a7a,#f4f4f4 45%,#9a9a9a);border:none;border-radius:3px;width:14px;height:24px;box-shadow:0 2px 3px #00000073}.bpm-range:focus-visible,.bpm-number:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.bpm-number{width:3.4ch;height:30px;color:var(--gold-hi);font-family:var(--font-label);text-align:center;appearance:textfield;background:#17120b;border:none;border-radius:3px;padding:0 4px;font-size:19px;font-weight:700;box-shadow:inset 0 1px 3px #000c,0 1px #fff5d28c}.bpm-number::-webkit-inner-spin-button{appearance:none;margin:0}.bpm-number::-webkit-outer-spin-button{appearance:none;margin:0}.pattern-row{gap:var(--space-xs);height:40px;display:flex}.chip.pattern>span{height:40px;color:var(--ink);letter-spacing:.12em;text-transform:uppercase;border-color:#281c0a73;flex-direction:column;justify-content:center;gap:1px;padding:0 5px;font-size:10px;line-height:1;display:flex}.chip.pattern b{letter-spacing:.02em;font-size:15px}.chip.pattern:hover>span{border-color:#281c0acc}.chip.pattern input:checked+span{color:var(--gold-hi);background:linear-gradient(#2e261b,#17120b);box-shadow:inset 0 1px #ffe6aa26,0 2px #3c280a99}.chip.pattern input:focus-visible+span{outline-color:var(--ink)}.custom-editor{margin-top:var(--space-sm);padding:var(--space-md);background:#00000047;border:1px solid #efe4c82e;border-radius:4px}.custom-editor[hidden]{display:none}.custom-grid{gap:var(--space-sm);grid-template-columns:repeat(4,1fr);display:grid}.step-beat{grid-template-columns:repeat(4,1fr);gap:3px;display:grid}.step{min-width:0;color:var(--cream);font-family:var(--font-label);cursor:pointer;transition:background .15s var(--ease-out), border-color .15s var(--ease-out);background:0 0;border:1px solid #efe4c840;border-radius:3px;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;display:flex}.step:hover{border-color:#efe4c88c}.step:focus-visible{outline:2px solid var(--cream);outline-offset:2px}.step-arrow{font-size:22px;font-weight:700;line-height:26px}.step[data-step=\.] .step-arrow{opacity:.3}.step[data-step=D],.step[data-step=U]{background:var(--brushed-gold);color:var(--ink);border-color:#0000;box-shadow:inset 0 0 0 1px #462d0a99}.step-count{letter-spacing:.08em;opacity:.6;font-size:11px;font-weight:700}.custom-foot{justify-content:space-between;align-items:center;gap:var(--space-md);margin-top:var(--space-md);display:flex}.custom-hint{color:oklch(86% .03 85);flex:1;margin:0;font-size:13px;line-height:1.4}.music-footer{justify-content:flex-end;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg) var(--space-sm);border-top:1px solid #efe4c824;display:flex}#musicOff{margin-right:auto}.rocker.compact{margin:0;padding:10px 24px;font-size:16px}.rocker[data-on] .rocker-led{background:radial-gradient(circle at 35% 30%, oklch(90% .1 40), var(--led-on));box-shadow:0 0 10px 2px oklch(66% .23 30/.7)}#musicOn:disabled{opacity:.5;cursor:not-allowed}#startOverlay{z-index:50;outline-offset:-14px;box-shadow:none;position:absolute;inset:0}.cab-piping{border:3px solid var(--piping);border-radius:6px;place-items:center;display:grid;position:absolute;inset:28px;box-shadow:inset 0 0 60px #000c,0 0 0 1px #0009}.grille{background:radial-gradient(at 50% 45%,#0000 30%,#0009 100%),repeating-linear-gradient(45deg,#d6be8c12 0 1px,#0000 1px 7px),repeating-linear-gradient(45deg,#ffffff0d 0 1px,#0000 1px 3px),repeating-linear-gradient(-45deg,#00000073 0 1px,#0000 1px 3px),#22201d}.start-card{padding:var(--space-xl);text-align:center;animation:warm-up .9s var(--ease-out) both;flex-direction:column;align-items:center;display:flex}@keyframes warm-up{0%{opacity:0;transform:translateY(12px)}}.script-logo{color:var(--cream);font-family:var(--font-script);text-shadow:0 4px #0a0603e6,0 14px 30px #000000b3;margin:0;font-size:clamp(64px,13vw,132px);font-weight:400;line-height:1;transform:rotate(-5deg)}.start-tagline{margin:var(--space-xl) 0 0;color:var(--gold);font-family:var(--font-label);letter-spacing:.3em;text-transform:uppercase;font-size:15px;font-weight:600}.rocker{align-items:center;gap:var(--space-md);margin-top:var(--space-2xl);background:var(--brushed-gold);color:var(--ink);font-family:var(--font-label);letter-spacing:.24em;text-transform:uppercase;text-shadow:0 1px #fff5d28c;cursor:pointer;transition:transform .12s var(--ease-out), box-shadow .12s var(--ease-out);border:none;border-radius:4px;padding:14px 30px;font-size:20px;font-weight:700;display:inline-flex;box-shadow:inset 0 0 0 1px #462d0a8c,inset 0 1px #fffadcb3,0 5px #5e4418,0 14px 24px #0000008c}.rocker:hover:not(:disabled) .rocker-led,.rocker[data-warming] .rocker-led{background:radial-gradient(circle at 35% 30%, oklch(90% .1 40), var(--led-on));box-shadow:0 0 10px 2px oklch(66% .23 30/.7)}.rocker:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 0 0 1px #462d0a8c,0 1px #5e4418,0 6px 12px #00000080}.rocker.dark{color:var(--gold-hi);text-shadow:none;background:linear-gradient(#2e261b,#17120b);box-shadow:inset 0 0 0 1px #1e1408e6,inset 0 1px #ffe6aa26,0 5px #0b0906,0 14px 24px #0000008c}.rocker.dark:active:not(:disabled){box-shadow:inset 0 0 0 1px #1e1408e6,0 1px #0b0906,0 6px 12px #00000080}.start-actions{justify-content:center;gap:var(--space-lg);margin-top:var(--space-2xl);flex-wrap:wrap;display:flex}.start-actions .rocker{margin:0}.start-actions .rocker:disabled{cursor:wait}.start-actions .rocker:disabled:not([data-warming]){opacity:.45}.rocker:focus-visible{outline:3px solid var(--cream);outline-offset:4px}.rocker-led{background:radial-gradient(circle at 35% 30%, oklch(50% .1 28), var(--led-off));width:12px;height:12px;transition:all .2s var(--ease-out);border-radius:50%;box-shadow:inset 0 1px 2px #0009}.start-note{max-width:40ch;margin:var(--space-xl) 0 0;color:oklch(75% .03 80);font-size:13px;line-height:1.55}@media (width<=900px){.faceplate{gap:var(--space-md)}.plate-input{display:none}}@media (width<=720px){#amp{padding:11px}.faceplate{padding:6px var(--space-sm);gap:6px}.plate-input,.plate-power{display:none}.knob-scale{width:50px;height:50px}.knob{width:40px;height:40px}.knob-cap:after{height:10px}.toggle{width:22px;height:34px}.plate-buttons{grid-template-columns:auto auto;gap:6px;display:grid}#guideToggle{grid-area:2/1/auto/-1}#musicButton{letter-spacing:0;border-radius:50%;width:28px;min-width:28px;padding:0;font-size:15px;position:relative}#musicButton .music-text{display:none}#musicButton .music-icon{display:inline}#musicButton .button-led{width:8px;height:8px;margin:0;position:absolute;top:-2px;right:-2px}.plate-button{height:28px;padding:0 var(--space-sm)}.plate-button.round{width:28px;min-width:28px}.plate-label{letter-spacing:.1em;font-size:10px}#chordBadge{top:118px}#chordDisplay{font-size:68px}#guide{inset:auto var(--space-sm) auto var(--space-sm);gap:var(--space-sm);flex-direction:column;display:flex;top:200px}.guide-card,.guide-card.left,.guide-card.right{width:auto;padding:14px 16px 12px;position:static}.guide-card p{display:none}#degreeRows{flex-direction:row}#degreeRows li{flex-direction:column;gap:0;padding:4px 2px;display:flex}#degreeRows .chord{font-size:17px}.guide-title{margin-bottom:var(--space-xs)}#tutorial{top:218px;left:var(--space-sm);right:var(--space-sm);width:auto;padding:11px}.tutorial-title{font-size:52px}.tutorial-text{max-width:none;font-size:13px}}@media (width<=380px){.faceplate{gap:var(--space-xs)}.legend-text{display:none}}@media (width<=600px){.start-actions .rocker{letter-spacing:.18em;padding:12px 20px;font-size:16px}.music-body{padding:0 var(--space-sm) var(--space-md)}.slot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.slot-face{padding-inline:2px}.slot-chord{font-size:19px;line-height:24px}.slot-chord.long{font-size:15px}.roots{grid-template-columns:repeat(7,1fr)}.types{grid-template-columns:repeat(4,1fr)}.auto-plate{gap:var(--space-md) var(--space-lg);padding:var(--space-md);flex-wrap:wrap}.bpm-group{flex-basis:60%}.pattern-row{width:100%}.pattern-row .chip{flex:1 1 0;min-width:0}.chip.pattern>span{letter-spacing:.06em;padding:0 2px}.chip.pattern b{letter-spacing:0;font-size:12px}.custom-editor{padding:var(--space-sm)}.custom-grid{gap:var(--space-xs)}.step-beat{gap:2px}.step-arrow{font-size:18px}.auto-plate>.plate-group:has(.pattern-row){flex-basis:100%}.music-footer{padding-inline:var(--space-sm)}}@media (width>=721px) and (height<=800px){#tutorial{top:144px}.tutorial-title{font-size:60px}}@media (width<=720px) and (height<=740px){.tutorial-body{padding:var(--space-sm) var(--space-xs) 0}.tutorial-title{font-size:40px}.tutorial-text,.tutorial-status{margin-top:var(--space-sm)}}@media (hover:none){#stage.no-camera .tutorial-keys{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}