*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#08030c;color:#ffe9ff;font-family:system-ui,'Yu Gothic',sans-serif}body{min-height:100dvh;display:grid;place-items:center}main{width:min(100vw,calc((100dvh - 38px)*16/9))}body.editing{display:block}body.editing main{width:min(1400px,100%);margin:auto}#stage{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#16051d;box-shadow:0 0 65px #c8006028}#stage:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;display:grid;place-items:center}#stage:fullscreen #game{width:min(100vw,calc(100dvh * 16/9));height:auto}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none}button{cursor:pointer;color:inherit;font:inherit;border:1px solid #8f3d83;background:#210e2d;border-radius:7px;padding:9px 15px;transition:background .15s}button:hover{background:#66135e}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #fff;outline-offset:3px}.primary{background:linear-gradient(110deg,#dc079f,#8b10c7);border-color:#ff88e9;font-weight:800;box-shadow:0 0 25px #f500a92a}input,select{font:inherit;color:white;background:#200b27;border:1px solid #84366f;padding:5px;border-radius:4px}input[type=number]{width:83px}input[type=range]{accent-color:#ff52d3;padding:0;cursor:pointer}input[type=checkbox]{accent-color:#ff52d3}label{display:inline-flex;align-items:center;gap:7px}[hidden]{display:none!important}#pause{position:absolute;right:1.5%;top:2%;font-size:clamp(16px,3vw,36px);padding:0;width:5%;height:9%;background:#130719cc;box-shadow:0 0 12px #ff3dec}#overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,#090010ee 0%,#100315d9 44%,transparent 85%);overflow:auto}.panel{width:53%;padding:3% 5%;text-align:center;margin:auto 0}.eyebrow{color:#ff81e8;letter-spacing:.2em;font-size:clamp(9px,1.15vw,15px);margin:0}h1{font-size:clamp(25px,4.2vw,62px);line-height:1.1;margin:14px 0;color:white;text-shadow:3px 3px #a0008f,0 0 20px #ff00c4}h1 span{color:#ff8fe9}#message{font-size:clamp(10px,1.2vw,17px);line-height:1.6}.keys{font-weight:bold;font-size:clamp(10px,1.4vw,20px);letter-spacing:.14em;margin:12px 0;color:#ffd4f4}#start{display:block;width:100%;font-size:clamp(15px,1.8vw,25px);padding:11px}.menu-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.menu-actions button{font-size:clamp(10px,1vw,14px);padding:7px 11px}.volume-row{display:flex;margin:14px 0 8px;font-size:clamp(10px,1.1vw,15px);gap:12px}.volume-row input{flex:1;min-width:30px}.volume-row output{min-width:3em}details{text-align:left;border-top:1px solid #7a356c66;padding-top:9px;font-size:clamp(10px,1vw,14px)}summary{cursor:pointer;color:#dca6ce}.settings-body{padding:8px 0}.settings-body p{font-size:11px;margin:0 0 8px}.settings-body small{display:block;font-size:10px;color:#cf9cc3;margin-top:6px}#key-bindings{display:flex;gap:6px;margin-bottom:10px}#key-bindings button{flex:1;padding:6px}.binding-active{outline:2px solid #fff;background:#791458}.menu-note{font-size:clamp(9px,.9vw,12px);color:#c193b4;margin:12px 0 0}footer{height:36px;display:flex;gap:20px;align-items:center;padding:0 12px;font-size:11px;color:#bd8bab}footer span:nth-child(2){margin-left:auto}footer button{font-size:11px;padding:3px 8px}
#editor{padding:28px 30px;background:radial-gradient(ellipse at 100% 0,#49144055,transparent 45%),#100816;min-height:100dvh}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px}.editor-header h2{font-size:24px;margin:8px 0 0;letter-spacing:.02em}.editor-header .eyebrow{font-size:12px}.editor-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:13px 0;font-size:13px}.editor-bar label{white-space:nowrap}.editor-volume{margin-left:auto}.editor-volume input{width:100px}#clock{font:700 20px monospace;min-width:105px;text-align:right;color:#ffadea}.grid-settings{background:#1f1129;padding:12px;border:1px solid #623152;border-radius:8px}.grid-settings input{width:75px}.grid-settings button{padding:6px 10px}.timeline-wrap{border:1px solid #713762;border-radius:8px;overflow:hidden;background:#100616}#timeline{height:355px;cursor:crosshair}.scrub-row{display:flex;gap:12px;align-items:center;font:12px monospace;color:#dca6ce;padding:10px 0}.scrub-row input{flex:1;min-width:0}#record[aria-pressed=true]{color:#fff;background:#a01b56;border-color:#ff89c1;box-shadow:0 0 16px #f9278433}.editor-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.record-pads{display:flex;gap:8px}.record-pads button{flex:1;min-height:48px;font-weight:800;color:#ffa5e4;border-bottom:3px solid #f543c1;touch-action:manipulation}.record-pads button.flash{background:#a72b86}.help,.save-note{font-size:12px;color:#c29eb8;line-height:1.7;margin:12px 0}.note-inspector{padding:16px;border:1px solid #633453;border-radius:8px;background:#201028}.note-inspector strong{display:block;font-size:13px;color:#ffb3e7;margin-bottom:12px}.note-inspector>div{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-bottom:12px}.note-inspector button{font-size:12px;padding:7px 12px}.file-actions{padding-top:18px;border-top:1px solid #56314b}.file-actions button{font-size:12px}#note-count{margin-left:auto;color:#ffadea;font-size:13px}#editor-status{color:#ffbce9;font-size:13px;min-height:20px;margin:5px 0}.save-note{margin:5px 0}.loop-settings{font-size:12px}
@media(orientation:portrait){.panel{width:65%;padding:3%}h1{margin:6px 0}#message{margin:6px 0}.keys{margin:5px 0}#start{padding:6px}.menu-actions{margin-top:6px;gap:4px}.volume-row{margin:7px 0}.menu-note{margin:5px 0}footer{font-size:9px;gap:5px}#editor{padding:18px 12px}.editor-header h2{font-size:18px}.editor-header button{font-size:11px}.editor-bottom{grid-template-columns:1fr}.editor-volume{margin-left:0}#timeline{height:320px}}@media(max-height:500px) and (orientation:landscape){main{width:min(100vw,calc(100dvh*16/9))}footer{display:none}.panel{padding:2% 5%}h1{font-size:32px;margin:5px 0}#message{margin:5px 0}.keys{margin:5px 0}#start{padding:7px}.menu-actions{margin-top:5px}.volume-row{margin:7px 0}.menu-note{margin:5px 0}#editor{padding:16px 22px}}

/* Vertical chart editor: lanes and waveform share one downward time axis. */
.editor-workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px;align-items:start}.editor-workspace .editor-bottom{display:flex;flex-direction:column;margin:0;gap:10px}.editor-workspace #timeline{height:auto;aspect-ratio:1000/640}.editor-workspace .record-pads{gap:4px}.editor-workspace .record-pads button{padding:7px 3px;font-size:12px}.editor-workspace .note-inspector>div{flex-direction:column;align-items:flex-start}.editor-workspace .help{font-size:11px}.editor-header{margin-bottom:14px}.scrub-row{padding:3px 0}.loop-settings{margin:8px 0 12px}@media(max-width:900px){.editor-workspace{grid-template-columns:minmax(0,1fr)}.editor-workspace .editor-bottom{display:grid;grid-template-columns:1fr 1fr}.editor-workspace .note-inspector>div{flex-direction:row}}@media(max-width:540px){.editor-workspace .editor-bottom{grid-template-columns:1fr}}

.sfx-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;margin:10px 0}.sfx-controls select,.sfx-controls button{font-size:12px;padding:5px 9px}.sfx-level{flex:1;min-width:150px}.sfx-level input{width:50px;min-width:30px;flex:1}.sfx-level output{min-width:3em;text-align:right}.panel .sfx-controls{font-size:clamp(10px,1vw,14px);margin:8px 0 12px}#editor .sfx-controls{max-width:540px}.panel .sfx-controls select,.panel .sfx-controls button{font-size:inherit}@media(max-height:500px) and (orientation:landscape){.panel{padding-top:1%;padding-bottom:1%}h1{font-size:28px}.panel .sfx-controls{margin:5px 0;gap:6px}.volume-row{margin:5px 0}}

.auto-option{display:flex;justify-content:center;gap:8px;font-size:13px;margin:8px 0 12px}.auto-option input{width:17px;height:17px}.auto-option span{font-size:10px;color:#caa8c2}#auto-badge{position:absolute;right:9%;top:3%;padding:7px 14px;border:1px solid #ff9de6;border-radius:5px;background:#280925db;color:#fff1fb;font:bold 14px monospace;letter-spacing:.1em;pointer-events:none}.sfx-controls button[aria-pressed=false],#preview-notes[aria-pressed=false]{color:#ba9cad;border-color:#65465d;background:#18111b}.sfx-controls button[aria-pressed=true],#preview-notes[aria-pressed=true]{border-color:#ff6bd8;background:#571042}.sfx-controls .sfx-level{flex-basis:100%}#editor .sfx-controls{max-width:680px}#editor .sfx-controls .sfx-level{flex-basis:210px}@media(max-height:500px) and (orientation:landscape){.auto-option{margin:5px 0;font-size:11px}.auto-option span{font-size:9px}#auto-badge{font-size:11px;padding:4px 8px}}
/* The supplied title art remains visible around a compact game menu. */
#overlay.landing{background:#050006 url('assets/start.jpg') center/contain no-repeat;overflow:hidden;align-items:flex-start}
.landing .panel{position:absolute;left:4.5%;top:28%;width:25%;max-height:48%;margin:0;padding:1.3%;background:#08050bf2;border:2px solid #ef7bea;border-radius:9px;box-shadow:5px 5px 0 #340529,0 0 20px #0005;overflow:auto}
.landing .eyebrow,.landing h1,.landing #message,.landing #chart-label{display:none}
.landing .keys{font-size:14px;margin:0 0 8px}
.landing #start{font-size:18px;padding:9px}
.landing .auto-option{font-size:14px;margin:0 0 9px;flex-wrap:wrap;gap:5px}
.landing .auto-option span{display:none}
.landing .menu-actions{margin:8px 0}
.landing .menu-actions button{width:100%;font-size:14px;padding:7px}
#sound-settings{width:100%;font-size:14px;margin:0 0 9px;padding:7px}
.landing details{font-size:13px;padding-top:8px}
#sound-dialog{width:min(430px,92vw);max-height:90dvh;overflow:auto;background:#100916;color:#ffe9ff;border:2px solid #ed75d5;border-radius:12px;padding:24px;box-shadow:0 0 60px #e400aa33}
#sound-dialog::backdrop{background:#050009b8}#sound-title{font-size:21px;margin:0 0 20px}#sound-dialog .volume-row,#sound-dialog .sfx-controls{font-size:15px}#sound-dialog .sfx-controls button,#sound-dialog select{font-size:14px;padding:9px}#sound-close{width:100%;margin-top:18px}
#reward{position:absolute;inset:0;background:#000;z-index:5}#reward>img{width:100%;height:100%;object-fit:contain;display:block}.reward-actions{position:absolute;left:1.5%;bottom:1.5%;display:flex;flex-direction:column;gap:6px;padding:9px;background:#080510ec;border:1px solid #f17ad7;border-radius:7px;font:700 13px monospace}.reward-actions button{font:14px system-ui;padding:8px}
@media(max-height:500px) and (orientation:landscape){.landing .panel{top:26%;max-height:51%;width:28%;left:3%;padding:1%}.landing .keys{display:none}.landing #start{font-size:15px;padding:5px}.landing .auto-option{font-size:12px;margin-bottom:5px}.landing .menu-actions{margin:5px 0}.landing .menu-actions button,#sound-settings{font-size:12px;padding:4px}#sound-settings{margin-bottom:5px}.landing details{font-size:12px;padding-top:4px}.reward-actions{font-size:10px;padding:5px}.reward-actions button{font-size:12px;padding:5px}}
@media(orientation:portrait){#stage.landing-stage{aspect-ratio:auto;min-height:640px;height:calc(100dvh - 38px)}.landing-stage #game{position:absolute;visibility:hidden}#overlay.landing{background-size:100% auto;background-position:top center;overflow:auto}.landing .panel{position:relative;top:auto;left:auto;margin:calc(56.25vw + 16px) auto 20px;width:88%;max-height:none;padding:18px}.landing .keys{font-size:16px}.landing .auto-option{font-size:16px}.landing #start{font-size:20px}.landing .menu-actions button,#sound-settings{font-size:16px;padding:10px}.landing details{font-size:14px}}
#how-to{width:100%;font-size:14px;padding:7px;margin-bottom:8px}
#help-dialog{width:min(480px,92vw);max-height:90dvh;overflow:auto;background:#100916;color:#ffe9ff;border:2px solid #ed75d5;border-radius:12px;padding:24px;line-height:1.7;font-size:15px}#help-dialog::backdrop{background:#050009b8}#help-title{font-size:21px;margin-top:0}#help-close{width:100%}.landing .keys{letter-spacing:0;font-size:14px}
@media(max-height:500px) and (orientation:landscape){.landing .keys{display:block;font-size:11px;margin-bottom:4px}.landing .panel{top:25%;max-height:52%;padding:1%}.landing #how-to{font-size:12px;padding:3px;margin-bottom:4px}.landing .menu-actions:has(>button:not([hidden])){margin:4px 0}.landing .menu-actions:not(:has(>button:not([hidden]))){margin:0}}
@media(orientation:portrait){#how-to{font-size:16px;padding:10px}.landing .keys{font-size:15px}}
/* Touch play uses the available viewport, independent of native fullscreen. */
body.touch-game.in-game,body.expanded-game.in-game{display:block;overflow:hidden;min-height:100dvh}
.touch-game.in-game main,.expanded-game.in-game main{width:100vw}
.touch-game.in-game #stage,.expanded-game.in-game #stage{width:100%;height:100dvh;aspect-ratio:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.touch-game.in-game #game,.touch-game.in-game #stage:fullscreen #game{width:100%;height:100%}
.touch-game.in-game footer{display:none}
.touch-game #pause{width:48px;height:44px;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));font-size:25px}
.touch-game.in-game #overlay .panel{width:min(540px,95%);margin:auto;padding:20px;background:#080510ed;border-radius:10px}
.touch-game.in-game #overlay h1{font-size:26px;margin:8px}.touch-game.in-game #overlay button{min-height:44px;font-size:14px}.touch-game.in-game #message{font-size:15px}
.touch-game #reward{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.touch-game #reward>img{height:calc(100% - 65px);object-fit:contain;min-height:0}.touch-game .reward-actions{position:static;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;min-height:60px;font-size:14px}.touch-game .reward-actions button{min-height:44px;font-size:14px}
.touch-game #auto-badge{right:70px;top:6px;font-size:11px;padding:4px}
@media(orientation:portrait){.touch-game.in-game #overlay .panel{max-height:95dvh;overflow:auto}}
#credits{padding:12px 16px 22px;text-align:center;font-size:13px;line-height:1.7;color:#d9afcd}#credits p{margin:4px 0}#credits a{color:#ff99e3;overflow-wrap:anywhere}#help-dialog hr{border:0;border-top:1px solid #864575;margin:22px 0}.prototype-help{font-size:14px}.touch-game .pc-only,.touch-game #key-hint,.touch-game #help-keys{display:none}.touch-game:not(.in-game){overflow:auto}