:root{color-scheme:dark;--bg:#111019;--orange:#ff9b43;--muted:#8d899a;--line:#34303e;--ink:#f8f2e9;font-family:Consolas,'Courier New',monospace}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#29203166,transparent 65%),var(--bg);color:var(--ink)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--orange);outline-offset:4px}main{max-width:1100px;margin:auto;padding:28px 36px 24px}.masthead{display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;color:var(--ink);text-decoration:none;font-family:Arial,sans-serif;font-size:20px;font-weight:900;letter-spacing:2px}.brand-icon{position:relative;font-size:30px;background:var(--orange);color:#111019;width:42px;height:42px;display:grid;place-items:center;transform:rotate(-7deg)}.brand-icon span{position:absolute;right:2px;top:1px;font-size:13px}.brand-sub{display:block;font-family:Consolas,monospace;font-size:9px;letter-spacing:3px;margin-top:5px;color:var(--muted)}.edition{font-size:11px;color:#a8a1b1;letter-spacing:1px}i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-right:8px;box-shadow:0 0 9px #ff9b4350}.heading{display:flex;align-items:center;justify-content:space-between;padding:27px 0 24px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--orange);margin:0 0 10px}h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;font-size:clamp(30px,5.4vw,58px);letter-spacing:1px;margin:0;line-height:1.1}h1 span{color:var(--orange)}h1 b{font:12px Consolas;vertical-align:top;margin:6px}.subtitle{color:#aaa4b4;font:13px Arial,sans-serif;margin:10px 0 0}.badge{height:73px;width:73px;flex-shrink:0;border:1px solid #b87d4d;border-radius:50%;transform:rotate(12deg);display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--orange);font-size:22px;font-weight:bold}.badge span{font-size:9px;margin-top:3px;letter-spacing:1px}.cabinet{background:#17141e;border:1px solid #45404e;border-radius:12px;overflow:hidden;box-shadow:0 24px 70px #0006}.cabinet-top{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#aaa2b4;letter-spacing:1.3px;font-size:9px;border-bottom:1px solid var(--line)}.screen{position:relative;background:#080a12;aspect-ratio:3/2;overflow:hidden}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0px,transparent 3px,#0002 4px);opacity:.3}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#090a1288,#090a12b8 30%,#090a12b8 70%,#090a1288);z-index:2}.overlay.hidden{display:none}.modal{text-align:center;width:90%;max-width:560px;padding:20px}.modal .eyebrow{font-size:11px}h2{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(27px,4.6vw,53px);font-weight:900;line-height:1.08;letter-spacing:1px;margin:17px 0}h2 em{font-style:normal;color:var(--orange)}#modal-text{color:#c3becb;font:14px/1.7 Arial,sans-serif;margin:16px 0 25px}.play{background:var(--orange);color:#19111a;border:0;border-radius:3px;padding:17px 27px;font-weight:bold;font-size:14px;letter-spacing:2px;min-width:240px;box-shadow:0 4px 0 #a64d26}.play:hover{background:#ffb76e;transform:translateY(-1px)}.play span{margin-left:25px;font-size:20px}.modal-hint{font-size:9px;color:#938b9f;letter-spacing:1px;margin-top:24px}.console{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--line)}.track{display:flex;gap:12px;align-items:center;min-width:0}.disc{font-size:24px;color:var(--orange);background:#2e2430;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.track strong{display:block;font-size:10px;letter-spacing:.8px}.track div>span{display:block;color:var(--muted);font:11px Arial,sans-serif;margin-top:5px}.actions{display:flex;gap:8px;align-items:center}.actions button{background:#25212e;border:1px solid #494151;border-radius:4px;color:#c4bdce;padding:9px 10px;font-size:10px;white-space:nowrap}.actions button:hover{color:var(--orange);border-color:var(--orange)}.actions button:disabled{opacity:.35;cursor:default}.volume input{width:65px;accent-color:var(--orange)}footer{display:flex;justify-content:space-between;padding:20px 0 0;gap:12px;color:#80788e;font-size:9px;letter-spacing:.5px}.keys{display:flex;gap:18px;flex-wrap:wrap}.keys span{display:flex;align-items:center;gap:5px}kbd{background:#211d29;border:1px solid #41384c;border-bottom-width:2px;color:#b9aec7;padding:4px 6px;border-radius:3px;font:9px Consolas}.footer-note{align-self:center}.toast{position:absolute;bottom:20%;left:50%;transform:translateX(-50%);background:#211924eF;border:1px solid #a66c42;color:#ffe4bc;padding:12px 22px;max-width:90%;text-align:center;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:3}.toast.visible{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.touch-controls{display:none;justify-content:space-between;margin-top:12px}.touch-controls div{display:flex;gap:12px}.touch-controls button{touch-action:none;user-select:none;background:#292231;color:#ffe4bc;border:1px solid #5c465a;border-radius:7px;min-height:54px;min-width:65px;font-size:20px}.touch-controls .fire{background:var(--orange);color:#21141a;padding:0 25px;font-weight:bold;font-size:14px}.cabinet:fullscreen{border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center;background:#080a12}.cabinet:fullscreen .screen{width:min(100vw,calc((100vh - 110px)*1.5));align-self:center;flex-shrink:1;min-height:0}.cabinet:fullscreen .cabinet-top,.cabinet:fullscreen .console{flex-shrink:0}
@media(pointer:coarse){.touch-controls{display:flex}.modal-hint{font-size:8px}.keys{display:none}}@media(max-width:700px){main{padding:17px 12px}.masthead{padding-bottom:16px}.edition{font-size:8px}.heading{padding:20px 0}.badge{width:55px;height:55px;font-size:18px}.badge span{font-size:7px}.eyebrow{font-size:8px}.subtitle{font-size:11px;max-width:250px;line-height:1.5}.cabinet-top{padding:0 10px;font-size:7px;letter-spacing:.5px}.console{padding:12px 10px;flex-wrap:wrap}.track{flex:1}.track strong{font-size:9px}.track div>span{font-size:10px}.actions{margin-left:auto}.volume{display:none}#modal-text{font-size:12px;line-height:1.5;margin:10px 0 14px}.modal .eyebrow{font-size:8px}h2{margin:10px 0}.play{padding:11px 20px;font-size:11px;min-width:200px}.modal-hint{margin:15px 0 0;font-size:7px}.footer-note{display:none}footer{padding-top:14px}.keys{gap:10px}.toast{font-size:11px;padding:8px 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.screen:after{display:none}}

@media(min-width:800px) and (min-height:600px){main{max-width:min(1100px,calc((100dvh - 360px)*1.5 + 56px));padding:20px 28px}.masthead{padding-bottom:14px}.brand{font-size:17px}.brand-icon{width:34px;height:34px;font-size:26px}.heading{padding:18px 0}h1{font-size:42px}.badge{height:56px;width:56px;font-size:18px}.badge span{font-size:7px}.subtitle{font-size:12px}.console{padding:12px}.volume{display:none}.track strong{font-size:9px}.track div>span{font-size:10px}.actions{gap:5px}.actions button{padding:9px 7px}footer{font-size:8px}.keys{gap:10px}.footer-note{display:none}.modal h2{font-size:clamp(27px,4vw,43px)}.modal #modal-text{font-size:12px}.modal .play{padding:12px 22px}.modal .eyebrow{font-size:9px}.modal-hint{font-size:8px}}


.in-game .masthead,.in-game .heading{display:none}@media(min-width:800px) and (min-height:600px){.in-game main{max-width:min(1100px,calc((100dvh - 180px)*1.5 + 56px))}.in-game .volume{display:block}}


.console{flex-wrap:wrap}.track{border:0;padding:0;background:transparent;color:inherit;text-align:left;flex:1 1 220px;max-width:100%}.track:hover .disc{background:#20505e;color:#a1fff0}.track-info{display:block;min-width:0}.track-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}.track-info>span{display:block;color:var(--muted);font:10px Arial,sans-serif;margin-top:4px}.track-info .library-hint{font:8px Consolas;letter-spacing:1px;color:#8de4e0;margin-top:5px}.actions{flex-wrap:wrap}dialog{color:#f5f8ef;width:min(740px,94vw);max-height:85dvh;padding:25px;border:1px solid #75e6e1;border-radius:14px;background:repeating-radial-gradient(ellipse at -15% 25%,transparent 0 34px,#7aeaf315 35px 36px,transparent 37px 60px),radial-gradient(ellipse at 0% 4%,#1598ab66,transparent 45%),radial-gradient(ellipse at 100% 38%,#8b39bf55,transparent 50%),linear-gradient(145deg,#0b2534,#171729 55%,#091c25);box-shadow:0 20px 80px #000b,0 0 34px #30dce528}dialog::backdrop{background:#060912c9;backdrop-filter:blur(4px)}.music-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.music-heading h2{font-size:36px;margin:8px 0}.music-heading .eyebrow{color:#94ebe6;font-size:9px}.music-heading em{color:#c0a2ff}.music-heading>button{background:#102a38;color:#efffff;border:1px solid #76b6c2;border-radius:5px;padding:10px}.music-note{font:13px/1.6 Arial,sans-serif;color:#c7dce6;margin:12px 0 20px}.music-list{display:grid;gap:9px}.music-row{display:flex;align-items:center;gap:16px;text-align:left;padding:16px;border:1px solid #65bcc766;border-radius:7px;background:#081b29e8;color:#fff8e5}.music-row:hover{border-color:#96e6e2;background:#143a48}.music-row.current{background:linear-gradient(110deg,#14535aeb,#26234af2);border-color:#7cf4ed;box-shadow:0 0 15px #46e8df33,inset 3px 0 #9afff3}.track-number{color:#85ebe1;font-size:16px;min-width:26px}.track-name{flex:1;font:700 18px/1.45 Arial,sans-serif;overflow-wrap:anywhere}.track-duration{font-size:11px;color:#a6bccb;white-space:nowrap}@media(max-width:700px){.track-name{font-size:16px}.music-row{padding:12px;gap:10px}.track-info strong{max-width:65vw}dialog{padding:17px}.track-duration{font-size:9px}}


.console{background:repeating-radial-gradient(ellipse at -10% 30%,transparent 0 32px,#7aeaf312 33px 34px,transparent 35px 60px),radial-gradient(ellipse at 0% 0%,#22b8c933,transparent 55%),radial-gradient(ellipse at 100% 100%,#a354ce26,transparent 55%),linear-gradient(110deg,#12343e,#26213a);border-top-color:#70cdc499}.console .disc{background:#12343e;color:#a0eee5;border:1px solid #69bdbd66}.console .actions button{background:#102a38cc;border-color:#6d9da477;color:#e3efee}.console .track-info strong{color:#fff8e5}


#practice-boss{border:1px solid #a27e47;border-radius:4px;padding:8px 12px;background:#28202c;color:#f0d180;font:9px Consolas,monospace;letter-spacing:.7px}#practice-boss:hover{background:#3a2c38;border-color:#f0d180}.in-game #practice-boss{display:none}body:not(.in-game) footer .keys{display:none}footer{flex-wrap:wrap;align-items:center}


.console{position:relative;padding-bottom:17px}.music-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#75eee511;overflow:hidden}.music-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#6ceee4,#c3a0ff);box-shadow:0 0 8px #6ceee4;margin:0;border-radius:0}.console.playing .disc{box-shadow:0 0 13px #66eee533}.audio-settings{background:#071a26db;border:1px solid #5ab5c34d;border-radius:10px;padding:16px;margin:0 0 20px}.audio-settings h3{margin:0 0 5px;font:700 17px Arial,sans-serif;color:#e8ffff}.audio-settings p{margin:0 0 15px;color:#adc6d0;font:12px Arial,sans-serif}.audio-slider-row{display:grid;grid-template-columns:65px minmax(50px,1fr) 40px 100px;gap:12px;align-items:center;margin:12px 0;font:13px Arial,sans-serif}.audio-slider-row input{width:100%;accent-color:#80f6ed;min-width:0}.audio-slider-row output{color:#a9ece8;font:11px Consolas,monospace}.audio-slider-row button{background:#102a38;border:1px solid #6d9da4;border-radius:4px;padding:8px;color:#e3efee;font:10px Consolas,monospace}.audio-slider-row button[aria-pressed=true]{color:#f3cbb3;border-color:#b68770}.track-number{min-width:40px;font-size:12px;white-space:nowrap}@media(max-width:500px){.audio-slider-row{grid-template-columns:50px minmax(40px,1fr) 32px 76px;gap:7px;font-size:12px}.audio-slider-row button{font-size:9px;padding:8px 4px}.audio-settings{padding:12px}}


#open-scores{border:1px solid #8ed8d2;border-radius:4px;padding:8px 12px;background:#162d34;color:#c8f6ee;font:9px Consolas,monospace;letter-spacing:.7px}#open-scores:hover{background:#21424b;border-color:#a6fff1}#scores-dialog{max-width:700px}#score-entry[hidden]{display:none}#score-entry{padding:17px;border:1px solid #b58e56;background:#352b3755;border-radius:8px;margin:16px 0}#score-entry>p{margin:0 0 7px;color:#ffcd8e;font:14px Arial,sans-serif}#score-summary{color:#f7ecd9;font:13px Consolas,monospace}.score-input-row{display:flex;align-items:center;gap:13px;margin:15px 0 8px;font:13px Arial,sans-serif}#score-initials{width:100px;padding:9px 5px;border:1px solid #8de4e0;border-radius:4px;background:#101b2c;color:#ffcf8d;text-align:center;font:bold 25px Consolas,monospace;letter-spacing:5px;text-transform:uppercase}#save-score{padding:12px;border:1px solid #ffbb72;border-radius:4px;background:#ffb35b;color:#20151c;font:bold 11px Consolas,monospace}#save-score:disabled{opacity:.4;cursor:default}#initials-help{color:#b6a8bf;font:11px Arial,sans-serif}#score-feedback{font:13px/1.5 Arial,sans-serif;color:#a6f5df;min-height:18px}.scores-table{width:100%;border-collapse:collapse;font:14px Consolas,monospace}.scores-table caption{text-align:left;color:#b9c8d9;font:12px/1.5 Arial,sans-serif;margin:10px 0}.scores-table th{text-align:left;padding:11px 8px;border-bottom:1px solid #6e8b9e;color:#8dd8dc;font-size:10px}.scores-table td{padding:12px 8px;border-bottom:1px solid #45607455}.scores-table td:nth-child(2){font-weight:bold;letter-spacing:3px;color:#ffe4b4}.scores-table th:nth-child(n+3),.scores-table td:nth-child(n+3){text-align:right}.scores-table tr:first-child td{color:#ffd38b}.scores-table tr.score-new{background:#5a614143;box-shadow:inset 3px 0 #f1ce87}.scores-empty{color:#b0a4bf!important;text-align:center;padding:25px 8px!important;font:13px Arial,sans-serif}@media(max-width:500px){.score-input-row{flex-wrap:wrap;gap:10px}.scores-table{font-size:12px}.scores-table th{font-size:9px;padding:9px 4px}.scores-table td{padding:11px 4px}}


#riff{border:1px solid #d098f7;background:#352241;color:#e4bcff;padding:11px 14px;border-radius:4px;font:bold 11px Consolas,monospace}#riff:disabled{opacity:.38;cursor:default}#riff:not(:disabled){box-shadow:0 0 14px #c58bff44}