:root{--ink:#0d2140;--paper:#f2f2da;--paper2:#d9dbc2;--blue:#9bc6e7;--green:#55b33b;--red:#c40c2e;--deep:#071224;--panel:#0b1b35}
*{box-sizing:border-box}html{background:var(--ink)}body{margin:0;min-height:100vh;background:linear-gradient(rgba(13,33,64,.97),rgba(13,33,64,.97)),repeating-linear-gradient(0deg,transparent 0 15px,rgba(242,242,218,.025) 16px);color:var(--paper);font-family:"Courier New",monospace}
button,input,textarea,select{font:inherit}button{border:2px solid var(--paper);color:var(--paper);background:transparent;padding:.72rem .9rem;border-radius:6px;cursor:pointer;box-shadow:3px 3px 0 var(--deep)}button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--deep)}button:disabled{opacity:.38;cursor:not-allowed}.primary{background:var(--paper);color:var(--ink);font-weight:800}.app-shell{width:min(1160px,calc(100% - 24px));margin:24px auto 48px}.panel{border:2px solid rgba(242,242,218,.8);background:rgba(7,18,36,.36);box-shadow:6px 6px 0 rgba(7,18,36,.8);border-radius:10px;padding:20px;margin-bottom:18px}.hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.7rem,5vw,3rem);line-height:1;margin-bottom:.45rem}h2{font-size:1.14rem;border-bottom:1px dashed rgba(242,242,218,.35);padding-bottom:10px}h3.subhead{font-size:.9rem;margin:20px 0 10px;color:var(--blue)}.eyebrow{font-size:.78rem;letter-spacing:.12em;color:var(--blue)}.subtitle{max-width:800px;color:#d8d9c5;line-height:1.5;margin:0}.badge{border:2px solid var(--green);color:var(--green);padding:8px 10px;font-weight:700;white-space:nowrap}.muted,.note{color:#b9c4c7}.note{font-size:.79rem;line-height:1.5}.upload-row,.prompt-row,.option-row,.action-row,.seed-row,.editor-toolbar,.note-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.file-button input{display:none}.file-button span{display:inline-block;border:2px dashed var(--paper);padding:.75rem 1rem;border-radius:6px;cursor:pointer}#waveform{display:block;width:100%;height:116px;background:#08182e;border:1px solid rgba(242,242,218,.25);border-radius:6px;margin:14px 0}.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.stat{border:1px solid rgba(242,242,218,.22);padding:11px;border-radius:6px;background:rgba(13,33,64,.6)}.stat span{display:block;font-size:.67rem;color:#aab8be;margin-bottom:7px}.stat strong{font-size:.98rem}.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.scene-grid label,.seed-row label{display:flex;flex-direction:column;gap:7px}.prompt-label{display:block;margin-bottom:8px}.prompt-row textarea{flex:1;min-width:230px;resize:vertical;background:#08182e;color:var(--paper);border:1px solid rgba(242,242,218,.4);padding:10px;border-radius:6px}select,input[type=text]{background:#08182e;color:var(--paper);border:1px solid rgba(242,242,218,.35);padding:9px;border-radius:5px}.controls-grid,.mixer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.controls-grid>label,.mixer-grid>label{border:1px solid rgba(242,242,218,.22);padding:11px;border-radius:6px;background:rgba(11,27,53,.55)}.controls-grid label>span,.mixer-grid label>span{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;margin-bottom:9px}.controls-grid input[type=range],.mixer-grid input[type=range]{width:100%;accent-color:var(--paper)}.check,.mini-check{display:inline-flex;align-items:center;gap:7px}.check input,.mini-check input{accent-color:var(--green)}.mini-check{font-size:.72rem;margin-top:7px}.option-row{margin-top:14px}.seed-row{margin-top:12px}.seed-row label{flex:1;min-width:230px}.status{color:var(--blue);margin:14px 0 0}.structure-view{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.structure-card{border:1px solid rgba(242,242,218,.3);background:var(--panel);border-radius:5px;padding:8px 10px;min-width:94px}.structure-card strong{display:block;font-size:.76rem}.structure-card span{font-size:.63rem;color:#aab8be}.structure-card.active{border-color:var(--green)}.hidden{display:none}.mixer-grid{grid-template-columns:repeat(5,1fr)}.editor-toolbar select{min-width:90px}.chip{border:1px solid rgba(242,242,218,.3);padding:7px 9px;border-radius:999px;color:var(--blue);font-size:.75rem}.bar-editor{overflow:auto;background:#08182e;border:1px solid rgba(242,242,218,.2);border-radius:6px;padding:10px;margin-top:10px}.editor-grid{display:grid;grid-template-columns:92px repeat(8,minmax(48px,1fr));min-width:620px;gap:4px}.lane-label{display:flex;align-items:center;font-size:.7rem;color:var(--blue)}.step-cell{height:34px;border:1px solid rgba(242,242,218,.16);border-radius:4px;background:rgba(13,33,64,.55);color:#aab8be;display:grid;place-items:center;font-size:.68rem;cursor:pointer;user-select:none}.step-cell.on{background:var(--paper);color:var(--ink);font-weight:800}.step-cell.drum.on{background:#a9d79d}.step-cell.selected{outline:2px solid var(--green);outline-offset:1px}.step-head{height:24px;display:grid;place-items:center;color:#7f929b;font-size:.65rem}.note-toolbar{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(242,242,218,.25)}#selectedNoteInfo{flex:1;min-width:220px;color:#b9c4c7;font-size:.77rem}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(3,1fr)}.controls-grid{grid-template-columns:repeat(2,1fr)}.mixer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.hero{flex-direction:column}.scene-grid,.controls-grid,.mixer-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.badge{align-self:flex-start}.action-row button{flex:1 1 45%}}