:root{color-scheme:dark;--page-max-width:1600px;--bg:#0c111a;--panel:#141d2a;--line:#283549;--muted:#899bb2;--text:#e7eef8;--mint:#76e3c4;--purple:#b8a2ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 80% 0%,#1b293b 0%,transparent 55%),var(--bg);color:var(--text)}main{width:100%;max-width:var(--page-max-width);flex:1 0 auto;margin:0 auto;padding:22px 32px 18px}
header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.identity{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;border-radius:6px}.identity:focus-visible{outline:2px solid var(--mint);outline-offset:6px}.brand-mark{display:block;flex-shrink:0;width:40px;height:40px;object-fit:contain}.brand{font-size:22px;font-weight:750;letter-spacing:-.8px}.brand span{color:var(--mint)}.tag{margin-top:3px;font-size:9px;font-weight:650;letter-spacing:2px;color:var(--muted)}
button,.button,select{font:inherit;font-size:14px;color:var(--text);border:1px solid #354359;background:#202c3d;border-radius:8px;padding:9px 12px;cursor:pointer;transition:background .16s,border-color .16s,transform .16s ease,box-shadow .16s ease}button:hover,.button:hover{background:#2a3a4c;border-color:#66817e}button:active,.button:active{background:#34495a}button:focus-visible,input:focus-visible,select:focus-visible,.button:focus-within{outline:2px solid var(--mint);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--mint);border-color:var(--mint);color:#102f2a;font-weight:750;min-width:118px}.primary:hover{background:#a2f1db;border-color:#a2f1db}.upload{display:flex;align-items:center;gap:8px;padding:10px 15px;font-weight:600}.upload input{position:absolute;width:1px;height:1px;opacity:0}
.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:var(--mint)}h1,.intro h2{margin:5px 0 6px;font-size:26px;line-height:1.2;font-weight:650;letter-spacing:-.7px}.sub{font-size:12px;color:var(--muted)}.stats{display:flex;gap:0;padding:12px 0;border:1px solid var(--line);border-radius:12px;background:#141e2acc}.stat{padding:0 20px;min-width:90px}.stat+.stat{border-left:1px solid var(--line)}.stat strong{display:block;font-size:22px;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums}.stat:first-child strong{color:var(--mint)}.stat span{display:block;font-size:9px;letter-spacing:.7px;color:var(--muted);margin-top:7px}
#player{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 18px 60px #0003}.controls,.practice-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:11px 14px;border-bottom:1px solid var(--line)}.controls label,.practice-controls label{font-size:11px;color:#b4c3d7;display:flex;align-items:center;gap:8px}.controls select,.practice-controls select{padding:7px 9px}.spacer{flex:1}.sound-controls{background:#111b28;padding-top:9px;padding-bottom:9px}.control-heading{color:var(--muted);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;min-width:80px}.sound-controls label:last-child{margin-left:auto}#pedal[aria-pressed="true"],#expand[aria-pressed="true"]{background:#24463f;border-color:#4b8e7d;color:#a1f1d9}#pedal-tail-value{font-variant-numeric:tabular-nums;min-width:31px;color:var(--mint)}
.practice-controls{font-size:11px;background:#141e2b;gap:8px 16px;padding:8px 14px;color:#adbed1}.practice-controls select{max-width:240px}.practice-controls button{font-size:13px;padding:6px 9px}.practice-controls input[type=number]{width:70px;font:inherit;padding:5px 7px;border:1px solid #354359;border-radius:6px;background:#0f1825;color:var(--text);font-variant-numeric:tabular-nums}.loop-controls{background:#101925}#loop-count{color:var(--mint)}#panic{margin-left:auto;color:#e4b7b7;border-color:#513d48;background:#2a232d}#panic:hover{background:#41303a}input[type=range],input[type=checkbox]{accent-color:var(--mint);cursor:pointer}input[type=range]{max-width:100%}
.stage{position:relative;background:#0d1321;overflow:hidden}canvas{display:block;width:100%;height:330px}.legend{position:absolute;top:14px;left:18px;right:18px;display:flex;gap:18px;align-items:center;font-size:10px;color:#91a5bf;pointer-events:none}.stage-hint{margin-left:auto;color:#637995}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--note-high,var(--mint));margin-right:6px}.dot.left{background:var(--note-low,var(--purple))}#roll{cursor:pointer;touch-action:manipulation}#roll:focus-visible{outline:2px solid var(--mint);outline-offset:-3px}#roll[aria-disabled="true"]{cursor:wait}
.keyboard{height:120px;position:relative;touch-action:none;background:#080d15}.key{position:absolute;top:0;bottom:0;border:1px solid #b4becd;border-top:0;border-radius:0 0 5px 5px;background:linear-gradient(#d9e2ef,#f7faff 85%,#c2cddd);color:#60728a;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;gap:4px;padding:0 0 10px;font-size:9px;cursor:pointer;user-select:none;contain:layout style;overflow:hidden}.key.black{height:63%;z-index:2;background:linear-gradient(#2a374b,#111a28 80%,#26374d);border:1px solid #070c14;box-shadow:0 3px 3px #0007;color:#a5b5ca;padding-bottom:9px}.key.expected{background:linear-gradient(#54b9a6,#b4f5df)}.key.pressed{background:linear-gradient(#a895e6,#e0d7fa);box-shadow:0 0 16px #ad92ed66}.key b{font-size:11px;font-weight:650}
.timeline{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:11px 14px;border-top:1px solid var(--line);background:#141e2b;font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted)}#seek{flex:1;min-width:80px}.timeline button,.midi-source select{padding:7px 10px;font-size:13px}.midi-source{display:flex;align-items:center;gap:6px}.midi-source select{max-width:220px}.midi-signal{min-width:85px;color:var(--muted)}.midi-signal.active{color:var(--mint)}
.footer{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-top:14px;font-size:11px;line-height:1.9;color:#8395ad}.footer p{margin:0}.footer>div{max-width:900px}#sound-status{color:#b4c5d9;font-weight:550}#settings-status{font-size:11px!important}#status{color:var(--mint);max-width:32%;padding-left:14px;border-left:2px solid #365e56}kbd{font:inherit;font-size:10px;padding:1px 4px;background:#202c3d;border:1px solid #384961;border-radius:4px;color:#c4d3e6}.drop{outline:2px dashed var(--mint);outline-offset:-5px}
body.player-expanded{overflow:hidden}#player.expanded{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;border:0;border-radius:0;z-index:100;overflow:auto;background:var(--bg);padding:12px}#player:fullscreen{width:100%;height:100%;background:var(--bg)}#player.expanded .transport-controls{position:sticky;top:-12px;z-index:5;background:#172333}#player.expanded .keyboard{height:clamp(100px,18vh,170px)}#player.expanded .stage{border-left:1px solid var(--line);border-right:1px solid var(--line)}
@media(min-width:1600px){main{padding-top:28px}.keyboard{height:135px}}
@media(max-width:900px){main{padding:18px 20px}.stat{padding:0 14px;min-width:75px}.controls,.practice-controls{gap:9px 12px}.control-heading{display:none}.sound-controls label:last-child{margin-left:0}#panic{margin-left:0}.footer{gap:15px}}
@media(max-width:600px){main{padding:14px 10px}header{margin-bottom:20px}.brand{font-size:20px}.brand-mark{width:36px;height:36px}.tag{font-size:8px;letter-spacing:1.4px}.upload{padding:9px 10px;font-size:13px}.intro{flex-wrap:wrap;gap:14px;margin-bottom:14px}h1,.intro h2{font-size:23px}.stats{width:100%;padding:10px 0}.stat{flex:1;min-width:0;padding:0 15px}.stat strong{font-size:19px}.stat span{font-size:8px}.controls,.practice-controls{padding:9px 10px;gap:9px 10px}.controls label,.practice-controls label{font-size:10px;gap:6px}.spacer{display:none}.primary{min-width:110px}.transport-controls button{font-size:13px;padding:9px 10px}.practice-controls select{max-width:180px}.loop-controls{gap:8px}.practice-controls input[type=number]{width:56px}.keyboard{height:105px}.key{font-size:8px}.key b{font-size:9px}.legend{left:12px;right:12px}.stage-hint{display:none}.timeline{gap:10px;padding:10px}.midi-source select{max-width:145px}.footer{display:block}#status{max-width:100%;margin-top:12px}#player.expanded{padding:8px}#player.expanded .transport-controls{top:-8px}}
/* Short interaction feedback; no perpetual animation or layout animation. */
@keyframes enter-fade{from{opacity:0}to{opacity:1}}
@keyframes enter-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pedal-on{0%{box-shadow:0 0 0 0 #76e3c455}100%{box-shadow:0 0 0 7px #76e3c400}}
header{animation:enter-rise .3s ease-out both}.intro{animation:enter-rise .34s .05s ease-out both}#player{animation:enter-fade .4s .08s ease-out backwards}
@media(hover:hover){button:not(:disabled):hover,.button:hover{transform:translateY(-1px);box-shadow:0 3px 10px #0003}}
button:not(:disabled):active,.button:active{transform:translateY(1px) scale(.98);transition-duration:60ms}
#pedal[aria-pressed="true"]{animation:pedal-on .3s ease-out}
.key{transform-origin:50% 0;transition:transform 120ms ease-out}
.key::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(#c5aaff88,#e2d4ff22);opacity:0;pointer-events:none;transition:opacity 160ms ease-out}
.key.pressed{transform:scaleY(.97);transition-duration:35ms}.key.pressed::after{opacity:1;transition-duration:35ms}
@media(prefers-reduced-motion:reduce){header,.intro,#player,#pedal{animation:none!important}button,.button,select,.key,.key::after{transition:none!important}button:not(:disabled):hover,button:not(:disabled):active,.button:hover,.button:active,.key.pressed{transform:none}}


.midi-settings{border-top:1px solid var(--line);background:#101925;font-size:11px;color:var(--muted)}
.midi-settings summary{cursor:pointer;padding:12px 14px;color:var(--text);line-height:1.6}
#midi-device-info{color:var(--mint);overflow-wrap:anywhere}.midi-settings p{padding:0 14px;margin:10px 0;line-height:1.7}
.midi-settings .practice-controls{border-top:1px solid var(--line)}

.language-control{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:11px;color:var(--muted)}
.language-control select{padding:8px 10px}
@media(max-width:600px){header{flex-wrap:wrap;gap:12px}.identity{flex:1;min-width:190px}.language-control{margin-left:0}.language-control>span{display:none}.upload{margin-left:auto}}

.home-about{max-width:1120px;margin:56px auto 12px;padding:32px 0 0;border-top:1px solid var(--line)}.home-about h1{font-size:clamp(22px,3vw,30px);font-weight:650;letter-spacing:-.5px;margin:0 0 14px}.home-about>p{max-width:850px;font-size:14px;line-height:1.9;color:#a8b9ce}.home-features{display:grid;grid-template-columns:1fr 1fr;gap:26px 36px;margin:30px 0}.home-about h3{font-size:16px;margin:0 0 10px;font-weight:600}.home-features p,.home-faq p{font-size:13px;color:var(--muted);line-height:1.9;margin:0}.home-faq{border-top:1px solid var(--line)}.home-faq details{padding:16px 0;border-bottom:1px solid var(--line)}.home-faq summary{font-size:14px;cursor:pointer;line-height:1.7}.home-faq p{margin-top:12px;max-width:900px}.home-languages{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:26px}.home-languages h3{width:100%;color:var(--muted);font-size:12px;font-weight:500;margin:0}.home-languages a{font-size:12px;color:#b9cbdc;text-decoration:none;padding:4px 0}.home-languages a:hover,.home-languages a[aria-current=page]{color:var(--mint);text-decoration:underline;text-underline-offset:4px}
@media(max-width:650px){.home-about{margin-top:32px;padding-top:24px}.home-features{grid-template-columns:1fr;gap:24px}.home-about>p{font-size:13px}.language-control select{max-width:140px}}

.premium-sound-status{margin:0;padding:7px 14px;border-bottom:1px solid var(--line);background:#111b28;color:var(--muted);font-size:12px;line-height:1.5}

.site-footer{flex-shrink:0;margin-top:44px;border-top:1px solid var(--line);background:#0a1019}.site-footer-inner{max-width:var(--page-max-width);margin:auto;padding:30px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}.footer-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-size:21px;letter-spacing:-.6px}.footer-logo img{flex:none}.footer-logo strong span{color:var(--mint)}.site-footer-brand p{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0 0}.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}.site-footer nav a{color:#bdcbdd;font-size:13px;text-decoration:none;padding:8px 0}.site-footer a:hover{color:var(--mint)}.site-footer small{color:var(--muted);font-size:11px}.site-header{margin-bottom:64px}.site-header a.button{text-decoration:none}.info-hero{max-width:780px;margin:0 0 32px}.info-hero h1{font-size:clamp(30px,5vw,46px);margin:12px 0 20px;letter-spacing:-1.2px}.info-lead{color:#aebfd4;font-size:16px;line-height:1.9}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.about-grid article{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.about-grid h2{font-size:20px;margin:0 0 15px}.about-grid p{font-size:14px;line-height:1.9;color:#aebfd4;margin:0}.about-cta{margin:36px 0 12px;padding:28px 0}.about-cta h2{font-size:24px}.about-cta a{display:inline-flex;text-decoration:none;margin:0 10px 10px 0}.contact-form{max-width:780px;padding:28px;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:grid;gap:18px}.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form label{display:grid;gap:8px;font-size:13px;color:#bdcadd}.contact-form input,.contact-form textarea{font:inherit;font-size:14px;color:var(--text);background:#0c1522;border:1px solid #354359;border-radius:8px;padding:12px;width:100%;min-width:0}.contact-form textarea{resize:vertical;min-height:170px;line-height:1.7}.contact-form textarea:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.contact-form .contact-length{margin-top:-12px;text-align:right;color:var(--muted);font-size:11px}.contact-form p{margin:0}.contact-form button{justify-self:start}.contact-form [readonly]{opacity:.7}
@media(max-width:650px){.site-footer-inner{padding:26px 20px;gap:20px}.site-footer-brand{width:100%}.site-footer nav{gap:20px}.site-header{margin-bottom:38px;gap:12px;flex-wrap:wrap}.site-header .language-control{margin-left:auto}.site-header>.button{margin-left:auto}.about-grid,.contact-row{grid-template-columns:1fr}.about-grid article,.contact-form{padding:20px}.info-lead{font-size:14px}.info-hero h1{letter-spacing:-.6px}.contact-form button{width:100%;justify-self:stretch}}

/* Persistent SPA shell; route content comes from server-rendered HTML. */
.route-view[hidden]{display:none!important}.site-nav{display:flex;align-items:center;gap:20px;width:100%;padding:12px 0 0;border-top:1px solid var(--line)}header:has(.site-nav){flex-wrap:wrap}.site-nav a{color:var(--muted);font-size:13px;text-decoration:none}.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--mint)}.route-view:not(#page-home){padding-top:20px}.site-loadbar{position:fixed;z-index:1000;top:0;left:0;height:3px;width:0;background:var(--mint);opacity:0;pointer-events:none;transition:width .25s ease,opacity .2s ease}.site-loadbar.loading{width:75%;opacity:1}.site-loadbar.complete{width:100%;opacity:0}@media(prefers-reduced-motion:reduce){.site-loadbar{transition:none}}

.demo-section{margin:0 0 24px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#111c29}.demo-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.demo-heading h2{font-size:16px;margin:0 0 5px}.demo-heading p{margin:0;font-size:12px;color:var(--muted)}.demo-heading>button{font-size:12px;padding:7px 10px}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;max-height:240px;overflow:auto}.demo-card{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #2b394d;border-radius:10px;background:#182435;min-width:0}.demo-card.selected{border-color:var(--mint)}.demo-art{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#76e3c417;color:var(--mint)}.demo-art .ui-icon{width:24px;height:24px}.demo-song-info{flex:1;min-width:0}.demo-song-info h3{font-size:14px;margin:0 0 5px;overflow-wrap:anywhere}.demo-song-info p{font-size:11px;line-height:1.5;color:var(--muted);margin:0 0 4px;overflow-wrap:anywhere}.demo-song-info small{font-size:10px;color:var(--muted)}.demo-card button{flex:none;font-size:12px;padding:9px 10px}.demo-section .cloud-status:empty{display:none}.demo-section .cloud-status{margin:12px 0 0}.demo-upload-form{max-width:780px}.demo-upload-form input{min-width:0}.demo-upload-form input[type=file]{width:100%}.admin-demo-list{display:grid;gap:12px}.admin-demo-section .cloud-song-main{overflow-wrap:anywhere}.admin-demo-section .cloud-song{flex-wrap:wrap}
@media(max-width:650px){.demo-section{padding:14px 12px}.demo-grid{grid-template-columns:1fr;max-height:260px}.demo-card{gap:10px;padding:12px}.demo-art{width:32px;height:38px}.demo-heading{align-items:flex-start}.demo-heading p{line-height:1.6}.demo-card button{max-width:110px}.demo-song-info h3{font-size:13px}}
.admin-demo-list .cloud-song-main>span{display:block;line-height:1.7}
.demo-song-info .demo-default-label{display:block;margin-top:5px;color:var(--mint)}

.demo-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.demo-default[aria-pressed="true"]{opacity:1;cursor:default;color:var(--mint);border-color:#4b8e7d;background:#203b35}#play:disabled,#roll[aria-disabled="true"]{cursor:default}
/* Images are composited once by the browser, beneath the note canvas only. */
.roll-surface{position:relative;isolation:isolate;overflow:hidden;background:#0d1321}
.player-wallpaper{position:absolute;inset:0;pointer-events:none;z-index:0}
.player-wallpaper img{display:block;width:100%;height:100%;object-fit:cover}
.player-wallpaper:has(img)::after{content:"";position:absolute;inset:0;background:rgba(13,19,33,var(--background-dim,.65))}
.roll-surface #roll{position:relative;z-index:1;background:transparent}
.roll-surface .legend{z-index:2;color:#c8d4e6;text-shadow:0 1px 3px #000}
/* A fixed toolbar keeps both actions aligned when the settings panel expands. */
.player-settings-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:10px 14px;background:#101925;border-top:1px solid var(--line)}
.player-settings-row>button{display:inline-flex;align-self:stretch;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 12px;font-size:14px;line-height:20px;text-align:center}
.player-settings-row>button .ui-icon{display:block;width:18px;height:18px;flex:none}
.player-settings-row>button>span{min-width:0}
.player-settings-row #midi-device-info{flex:1 1 260px;min-width:0;font-size:12px;line-height:20px}
.settings-chevron{transition:transform .16s ease}
#midi-settings-toggle[aria-expanded="true"] .settings-chevron{transform:rotate(90deg)}
#midi-settings{border-top:0}
#midi-settings[open]{border-top:1px solid var(--line)}
#midi-settings>.practice-controls{border-top:0}
@media(max-width:600px){.player-settings-row{padding:10px;gap:10px}.player-settings-row>button{flex:1 1 150px}.player-settings-row #midi-device-info{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.settings-chevron{transition:none}}
/* Center controls consistently, including icon labels and native inputs. */
#player .controls button,#player .practice-controls button,#player .timeline button{display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:20px;text-align:center}
#player .controls label,#player .practice-controls label,#player .timeline label{line-height:20px}
#player input[type="checkbox"],#player input[type="range"]{margin-top:0;margin-bottom:0;vertical-align:middle}

#panic .ui-icon{display:block;width:16px;height:16px;flex:none}

/* The handle changes only the note canvas; keys stay flush with its lower edge. */
#player{overflow-anchor:none}
.player-resize{-webkit-tap-highlight-color:transparent;height:22px;display:flex;align-items:center;justify-content:center;background:#101925;border-top:1px solid var(--line);cursor:ns-resize;touch-action:none;user-select:none;outline-offset:-3px}
.player-resize>span{display:block;width:36px;height:5px;border-top:1px solid #8193a9;border-bottom:1px solid #8193a9;border-radius:1px;pointer-events:none}
.player-resize:hover,.player-resize:focus-visible{background:#1b293b}
.player-resize:focus-visible{outline:2px solid var(--mint)}
body.resizing-player,body.resizing-player *{cursor:ns-resize!important;user-select:none!important}
@media(pointer:coarse){.player-resize{height:30px}}

html:has(body.resizing-player){overflow-anchor:none}

#glow-intensity-value{min-width:34px;font-variant-numeric:tabular-nums;color:var(--mint)}
.stage.glowing .key.expected,.stage.glowing .key.pressed{box-shadow:inset 0 10px 15px -10px #fff,0 0 12px #b9fff844}

/* Crawlable introduction and concise MIDI usage guide. */
.home-intro{margin:22px 0 28px;max-width:960px}.home-intro h1{font-size:clamp(23px,3vw,34px);line-height:1.25;letter-spacing:-.6px;margin:0 0 12px}.home-intro p,.home-steps{color:var(--muted);font-size:14px;line-height:1.85}.home-intro p{margin:0}.home-about>h2{font-size:24px;margin:0 0 16px}.home-features h2{font-size:16px;font-weight:600;margin:0 0 10px}.home-steps{padding-left:24px;max-width:900px}.home-steps li{padding:4px 0}