/* Standalone Netlify controls */
.volume-control input[type="range"]{width:100%;height:3px;appearance:none;background:linear-gradient(90deg,var(--acid) 72%,#27332c 72%);border-radius:5px;outline:0}.volume-control input[type="range"]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--acid);border:3px solid #0a0e0c;box-shadow:0 0 0 1px var(--acid),0 0 12px #80ff4488}.switches input[role="switch"]{appearance:none;width:31px;height:17px;border-radius:99px;background:#27322c;position:relative;cursor:pointer;transition:.15s}.switches input[role="switch"]:after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#081009;transition:.15s}.switches input[role="switch"]:checked{background:var(--acid)}.switches input[role="switch"]:checked:after{transform:translateX(14px)}.online-pill i{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 9px var(--acid)}.signal{color:var(--acid)}.hide-notes .key-label b,.hide-keys .key-label kbd{display:none}

:root{--acid:#80ff44;--ink:#050807;--line:#233029;--white-w:52px;--black-w:32px}*{box-sizing:border-box}html{background:#050706}body{margin:0;background:radial-gradient(circle at 50% -20%,#17351e 0,transparent 34%),#050706;color:#f4f7f4;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.app-shell{min-height:100vh;padding:0 clamp(16px,4vw,58px) 28px;overflow:hidden;background-image:radial-gradient(#9fff6e16 1px,transparent 1px);background-size:26px 26px}.topbar{height:78px;max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}.brand{display:flex;align-items:center;gap:12px;color:white;text-decoration:none}.brand>span:last-child{display:flex;flex-direction:column;letter-spacing:.12em;line-height:1.05}.brand strong{font-size:14px}.brand small{color:#7d8982;font-size:8px;margin-top:5px}.planet-mark{width:38px;height:38px;border:1px solid #80ff4488;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:10px;color:var(--acid);box-shadow:0 0 24px #80ff4438,inset 0 0 14px #80ff4425;position:relative}.planet-mark:after{content:"";position:absolute;width:49px;height:13px;border:1px solid #80ff4470;border-radius:50%;transform:rotate(-18deg)}.online-pill{font:700 10px/1 Arial;letter-spacing:.14em;color:#aab3ad;border:1px solid #26332b;border-radius:99px;padding:9px 12px;display:flex;gap:8px;align-items:center;background:#0b100e}.online-pill span{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 9px var(--acid)}.intro{text-align:center;padding:42px 0 28px}.eyebrow{color:var(--acid)!important;font-size:10px!important;font-weight:800;letter-spacing:.2em;display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 12px!important}.intro h1{font-size:clamp(42px,6vw,72px);line-height:.95;letter-spacing:-.055em;margin:0;font-weight:800}.intro h1 em{color:var(--acid);font-style:normal;text-shadow:0 0 40px #80ff443d}.intro>p{margin:15px 0 0;color:#9ba49f;font-size:14px}.studio{max-width:1320px;margin:auto;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#111815e8,#090d0bea);box-shadow:0 35px 90px #000b,0 0 0 1px #80ff4408 inset;overflow:hidden}.readout-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line);padding:17px 22px;gap:16px;background:#0b110e}.readout-row>div{display:flex;flex-direction:column;gap:6px}.readout-row>div:not(:first-child){border-left:1px solid #243029;padding-left:24px}.readout-row span,.control-block>label{color:#667269;font-size:8px;font-weight:800;letter-spacing:.18em}.readout-row strong{font-size:16px;min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chord-readout strong{color:var(--acid)}.range-readout{text-align:right}.piano-scroll{overflow-x:auto;padding:28px 24px 18px;scrollbar-color:#405044 #111a15}.piano{width:calc(21 * var(--white-w));height:238px;position:relative;margin:auto;display:flex;border:4px solid #050706;border-radius:6px;overflow:visible;box-shadow:0 12px 25px #000c}.white-key,.black-key{touch-action:none;user-select:none;border:0;position:relative;cursor:pointer;transition:background .07s,transform .07s}.white-key{width:var(--white-w);min-width:var(--white-w);height:230px;background:linear-gradient(90deg,#dce1dd,#fff 13%,#f9fbf9 82%,#c6ccc8);border-right:1px solid #8f9691;border-radius:0 0 5px 5px;color:#172019}.white-key.active{background:linear-gradient(#d9ffca,#8cff53);box-shadow:inset 0 -20px 28px #50c62166;transform:translateY(3px)}.black-key{position:absolute;top:0;width:var(--black-w);height:145px;z-index:2;background:linear-gradient(90deg,#050706,#283029 48%,#050706);border:1px solid #000;border-radius:0 0 5px 5px;color:#dce4df;box-shadow:0 7px 8px #0009}.black-key.active{background:linear-gradient(90deg,#1f5a19,var(--acid),#173d14);box-shadow:0 0 18px #80ff4499;transform:translateY(2px)}.key-label{position:absolute;left:0;right:0;bottom:12px;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.key-label b{font-size:10px}.key-label kbd,footer kbd{font:700 8px/1 Arial;padding:4px 5px;border:1px solid #8b938e66;border-radius:4px;background:#7d878024;color:#59625c;box-shadow:0 1px 0 #fff8}.black-key .key-label{bottom:10px}.black-key .key-label kbd{color:#b9c0bb;border-color:#758078;background:#ffffff10;box-shadow:none}.controls{display:grid;grid-template-columns:1.4fr .65fr 1.7fr;gap:28px;padding:20px 24px;border-top:1px solid var(--line);align-items:center}.control-block{min-height:62px;display:flex;flex-direction:column;justify-content:center;gap:15px}.volume-control label{display:flex;align-items:center;gap:7px}.volume-control output{margin-left:auto;color:var(--acid);font-size:10px}[data-slot="slider-track"]{background:#27332c!important;height:3px!important}[data-slot="slider-range"]{background:var(--acid)!important;box-shadow:0 0 9px #80ff4488}[data-slot="slider-thumb"]{background:var(--acid)!important;border:3px solid #0a0e0c!important;width:16px!important;height:16px!important;box-shadow:0 0 0 1px var(--acid),0 0 12px #80ff4488!important}.octave-control{border-left:1px solid var(--line);padding-left:24px}.octave-control>div{display:flex;align-items:center;gap:13px}.octave-control button,.recorder button{color:#cdd5d0;border:1px solid #2b3830;background:#111814;border-radius:7px;height:34px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}.octave-control button{width:34px;padding:0}.octave-control svg{width:13px}.octave-control strong{color:var(--acid);font-size:18px}.switches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-left:1px solid var(--line);padding-left:24px}.switches>label{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0d1310;border:1px solid #1d2922;border-radius:9px;padding:10px}.switches label>span{display:flex;flex-direction:column;gap:4px}.switches b{font-size:10px}.switches small{font-size:8px;color:#68736c}[data-slot="switch"]{width:31px!important;height:17px!important;background:#27322c}[data-slot="switch"][data-state="checked"]{background:var(--acid)!important}[data-slot="switch-thumb"]{width:13px!important;height:13px!important;background:#081009!important}.recorder{border-top:1px solid var(--line);padding:14px 24px;display:flex;justify-content:space-between;align-items:center;background:#080d0a}.recorder>div:first-child{display:flex;align-items:center;gap:10px;color:var(--acid)}.recorder>div:first-child span{display:flex;flex-direction:column;gap:3px}.recorder strong{color:#cbd4ce;font-size:9px;letter-spacing:.15em}.recorder small{color:#657069;font-size:9px}.recorder-actions{display:flex;gap:7px}.recorder button{font-size:9px;font-weight:700;letter-spacing:.05em}.recorder button:disabled{opacity:.35;cursor:not-allowed}.recorder .record.active{border-color:#ff4b5c;color:#ff7080;background:#361015}.record-dot{width:7px;height:7px;border-radius:50%;background:#ff4659;box-shadow:0 0 8px #ff4659}footer{max-width:1320px;margin:18px auto 0;display:flex;justify-content:space-between;color:#5d6861;font-size:9px;letter-spacing:.05em}footer kbd{color:#8b958e;border-color:#435047;box-shadow:none;margin:0 2px}footer a{color:#87928b;text-decoration:none}
@media(max-width:850px){.intro{padding-top:32px}.controls{grid-template-columns:1fr 1fr}.switches{grid-column:1/-1;border-left:0;padding-left:0}.readout-row{grid-template-columns:1fr 1fr}.range-readout{display:none}.piano{margin:0}.octave-control{padding-left:18px}.recorder{gap:12px}.recorder-actions button{padding:0 10px}}
@media(max-width:560px){:root{--white-w:43px;--black-w:27px}.app-shell{padding-inline:10px}.topbar{height:65px}.online-pill{font-size:8px}.intro{padding:27px 8px 21px}.intro>p{font-size:12px;line-height:1.5}.studio{border-radius:12px}.readout-row{padding:13px 14px;gap:8px}.readout-row>div:not(:first-child){padding-left:12px}.readout-row strong{font-size:13px}.piano-scroll{padding:18px 12px 12px}.piano{height:203px}.white-key{height:195px}.black-key{height:122px}.controls{grid-template-columns:1fr;padding:16px;gap:17px}.octave-control{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:15px}.switches{grid-template-columns:1fr 1fr 1fr}.switches>label{padding:8px;flex-direction:column;align-items:flex-start}.recorder{align-items:flex-start;padding:13px 16px;flex-direction:column}.recorder-actions{width:100%}.recorder-actions button{flex:1}footer{padding:0 5px;line-height:1.5;gap:15px}.brand small{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.octave-control>small{color:#748078;font-size:8px;font-weight:700;letter-spacing:.06em;min-height:10px}.octave-control>small.flash{color:var(--acid);animation:octave-flash .7s ease}@keyframes octave-flash{0%{transform:translateY(2px);opacity:.2}30%{transform:translateY(0);opacity:1;text-shadow:0 0 10px var(--acid)}100%{text-shadow:none}}