*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--col-bg: #02020d;--col-teal: #00aacc;--col-purple: #6633aa;--col-text: #ddeeff;--col-text-dim: #7799aa;--col-border: #224455;--font-mono: "Courier New", "Courier", monospace;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}html,body{width:100%;height:100%;overflow:hidden;background:var(--col-bg);color:var(--col-text);font-family:var(--font-mono)}#app{position:relative;width:100vw;height:100dvh;min-height:100svh}#generative-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;image-rendering:auto;display:block;will-change:contents}#space-canvas{position:absolute;inset:0;z-index:2;display:block;cursor:crosshair}#space-canvas.aiming{cursor:none}#info-overlay{position:absolute;bottom:calc(24px + var(--safe-bottom));left:calc(24px + var(--safe-left));z-index:10;min-width:260px;padding:14px 16px;background:#02020d99;border:.5px solid rgba(0,170,204,.4);border-radius:6px;opacity:.45;transition:opacity .6s ease;pointer-events:none;backdrop-filter:blur(4px)}.info-row{display:flex;justify-content:space-between;gap:16px;font-size:11px;line-height:1.9}.info-label{color:var(--col-text-dim);letter-spacing:.08em;flex-shrink:0}.info-value{color:var(--col-text);text-align:right;word-break:break-word}.info-dim{color:var(--col-text-dim)}#controls{position:absolute;bottom:calc(24px + var(--safe-bottom));right:calc(24px + var(--safe-right));z-index:10;display:flex;flex-direction:column;align-items:flex-end;gap:20px}.knob-group{display:flex;gap:24px;align-items:flex-end}.knob-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}.knob-label{font-size:9px;letter-spacing:.18em;color:var(--col-text-dim);opacity:.55;writing-mode:horizontal-tb;transition:opacity .3s,color .3s}.knob-wrap:hover .knob-label{opacity:1;color:var(--col-teal)}input[type=range]{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:2px;height:120px;background:transparent;outline:none;cursor:pointer;position:relative}input[type=range]::-webkit-slider-runnable-track{width:2px;background:linear-gradient(to bottom,#00aacc0f,#00aacc2e);border-radius:1px;box-shadow:0 0 6px #00aacc1f,0 0 1px #00aacc80}input[type=range]::-moz-range-track{width:2px;background:linear-gradient(to bottom,#00aacc0f,#00aacc2e);border-radius:1px;box-shadow:0 0 6px #00aacc1f,0 0 1px #00aacc80}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:3px;border-radius:1px;background:var(--col-teal);box-shadow:0 0 8px var(--col-teal),0 0 20px #0ac6,0 0 40px #00aacc1a;cursor:pointer;transition:box-shadow .2s,background .2s}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{background:#3ce;box-shadow:0 0 12px #0ac,0 0 30px #0ac9,0 0 60px #0ac3}input[type=range]::-moz-range-thumb{width:18px;height:3px;border-radius:1px;border:none;background:var(--col-teal);box-shadow:0 0 8px var(--col-teal),0 0 20px #0ac6;cursor:pointer}.chord-picker{display:flex;flex-direction:column;align-items:flex-end;gap:8px;opacity:.5;transition:opacity .3s}.chord-picker:hover{opacity:1}.piano{position:relative;width:161px;height:48px;user-select:none}.piano-white-row{display:flex;gap:1px;width:100%;height:100%}.pkey.white{flex:1;height:100%;background:#b4d2dc14;border:.5px solid rgba(0,170,204,.25);border-radius:0 0 2px 2px;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;font-family:var(--font-mono);font-size:7px;letter-spacing:.04em;color:#00aacc59;transition:background .15s,border-color .15s,color .15s;position:relative}.pkey.white:hover{background:#00aacc1f;border-color:#00aacc80;color:#00aaccb3}.pkey.white.active{background:#00aacc2e;border-color:var(--col-teal);color:var(--col-teal);box-shadow:0 0 10px #00aacc4d,inset 0 0 8px #00aacc1a}.piano-black-row{position:absolute;top:0;left:0;width:100%;height:58%;pointer-events:none}.pkey.black{position:absolute;width:14px;height:100%;background:#02020de0;border:.5px solid rgba(0,170,204,.35);border-top:none;border-radius:0 0 2px 2px;cursor:pointer;pointer-events:auto;transition:background .15s,box-shadow .15s}.pkey.black[data-note=C♯]{left:16px}.pkey.black[data-note=D♯]{left:39px}.pkey.black[data-note=F♯]{left:85px}.pkey.black[data-note=G♯]{left:108px}.pkey.black[data-note=A♯]{left:131px}.pkey.black:hover{background:#00aacc2e;box-shadow:0 0 8px #00aacc4d}.pkey.black.active{background:#00aacc47;border-color:var(--col-teal);box-shadow:0 0 14px #00aacc80}.mode-row{display:flex;gap:4px}.mode-btn{background:transparent;border:.5px solid rgba(0,170,204,.2);border-radius:2px;padding:3px 6px;font-family:var(--font-mono);font-size:8px;letter-spacing:.1em;color:var(--col-text-dim);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.mode-btn:hover{border-color:#00aacc80;color:var(--col-text)}.mode-btn.active{background:#00aacc1f;border-color:var(--col-teal);color:var(--col-teal);box-shadow:0 0 8px #0ac3}#start-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;padding:14px 36px;background:transparent;border:1px solid var(--col-teal);border-radius:4px;color:var(--col-teal);font-family:var(--font-mono);font-size:13px;letter-spacing:.15em;cursor:pointer;transition:background .3s,box-shadow .3s,opacity .5s}#start-btn:hover{background:#00aacc1a;box-shadow:0 0 20px #00aacc4d}#start-btn.hidden{opacity:0;pointer-events:none}#ios-headphones-tip{position:absolute;top:calc(50% + 52px);left:50%;transform:translate(-50%);z-index:10;padding:6px 10px;border:.5px solid rgba(0,170,204,.4);border-radius:999px;color:var(--col-text-dim);font-size:9px;letter-spacing:.12em;background:#02020db8;backdrop-filter:blur(4px);opacity:.85;transition:opacity .35s;pointer-events:none}#ios-headphones-tip.hidden{opacity:0}#start-btn.stop-mode{position:fixed;bottom:calc(24px + var(--safe-bottom));left:50%;top:auto;transform:translate(-50%);padding:6px 20px;font-size:11px;letter-spacing:.12em;border-color:#00aacc59;color:var(--col-text-dim);opacity:.5;transition:opacity .3s,border-color .3s,color .3s}#start-btn.stop-mode:hover{opacity:1;border-color:#00aaccb3;color:var(--col-teal);background:#00aacc14;box-shadow:none}#status{position:absolute;top:calc(20px + var(--safe-top));left:50%;transform:translate(-50%);z-index:10;font-size:10px;letter-spacing:.12em;color:var(--col-text-dim);opacity:0;transition:opacity .5s}#status.visible{opacity:.6}#badge{position:absolute;top:calc(20px + var(--safe-top));left:calc(24px + var(--safe-left));z-index:10;font-size:11px;letter-spacing:.08em;color:var(--col-text-dim);opacity:.5}#badge span{color:var(--col-teal);opacity:.9}#built-by{position:absolute;top:calc(40px + var(--safe-top));left:calc(24px + var(--safe-left));z-index:10;font-size:9px;letter-spacing:.05em;color:var(--col-text-dim);opacity:.55;text-decoration:none;transition:opacity .25s,color .25s}#built-by:hover{opacity:.95;color:var(--col-teal)}#autopilot-btn{position:absolute;top:calc(16px + var(--safe-top));right:calc(62px + var(--safe-right));z-index:20;height:28px;padding:0 10px;background:transparent;border:.5px solid rgba(0,170,204,.4);border-radius:999px;color:var(--col-text-dim);font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;cursor:pointer;transition:background .25s,border-color .25s,color .25s,box-shadow .25s,opacity .25s;opacity:.9}#autopilot-btn:hover,#autopilot-btn.active{background:#00aacc1f;border-color:#00aaccd9;color:var(--col-teal);box-shadow:0 0 14px #00aacc40}#info-btn{position:absolute;top:calc(16px + var(--safe-top));right:calc(24px + var(--safe-right));z-index:20;width:28px;height:28px;padding:0;background:transparent;border:.5px solid rgba(0,170,204,.4);border-radius:50%;color:var(--col-text-dim);font-family:var(--font-mono);font-size:13px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}#info-btn:hover,#info-btn.active{background:#00aacc1a;border-color:#0acc;color:var(--col-teal);box-shadow:0 0 14px #00aacc40}#info-panel{position:absolute;inset:0;z-index:15;display:flex;align-items:flex-start;justify-content:flex-end;padding:calc(60px + var(--safe-top)) calc(24px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(24px + var(--safe-left));pointer-events:none;opacity:0;transition:opacity .3s ease;background:#02020d80;backdrop-filter:blur(2px)}#info-panel.open{pointer-events:auto;opacity:1}#info-panel>div{position:relative;width:380px;max-width:calc(100vw - (48px + var(--safe-left) + var(--safe-right)));max-height:calc(100dvh - (80px + var(--safe-top) + var(--safe-bottom)));min-height:0;display:flex;flex-direction:column;background:#02020de0;border:.5px solid rgba(0,170,204,.35);border-radius:6px;backdrop-filter:blur(8px);overflow-y:auto;overflow-x:hidden}.ip-body{overflow-y:auto;min-height:0;padding:16px;display:flex;flex-direction:column;gap:18px;scrollbar-width:thin;scrollbar-color:rgba(0,170,204,.3) transparent}.ip-body::-webkit-scrollbar{width:4px}.ip-body::-webkit-scrollbar-track{background:transparent}.ip-body::-webkit-scrollbar-thumb{background:#00aacc4d;border-radius:2px}.ip-lead{font-size:11px;line-height:1.8;color:var(--col-text);opacity:.75}.ip-section{display:flex;flex-direction:column;gap:6px}.ip-section-title{font-size:9px;letter-spacing:.14em;color:var(--col-teal);opacity:.7;margin-bottom:4px}.ip-row{display:flex;gap:12px;font-size:10px;line-height:1.7}.ip-label{color:var(--col-text-dim);letter-spacing:.06em;flex-shrink:0;width:88px;padding-top:1px}.ip-value{color:var(--col-text);opacity:.8}@media (max-width: 900px),(max-height: 700px){#info-overlay,#status,#badge,#built-by{display:none}#start-btn.stop-mode{top:calc(12px + var(--safe-top));bottom:auto;left:50%;transform:translate(-50%);z-index:25;padding:6px 16px}#autopilot-btn{right:calc(52px + var(--safe-right));height:24px;padding:0 8px;font-size:9px}#ios-headphones-tip{top:calc(50% + 46px);font-size:8px;letter-spacing:.1em}#controls{left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));bottom:calc(14px + var(--safe-bottom));width:min(100%,420px);max-width:420px;margin-left:auto;align-items:stretch;gap:12px}.knob-group{width:100%;justify-content:space-between;gap:8px;align-items:flex-end}.knob-wrap{gap:6px;min-width:0}.knob-label{font-size:8px;letter-spacing:.1em}input[type=range]{height:86px}input[type=range]::-webkit-slider-thumb{width:14px}input[type=range]::-moz-range-thumb{width:14px}}