:root{--bg:#08090c;--panel:#111319;--panel2:#171a21;--line:#292d36;--muted:#858b98;--text:#f4f5f7;--gold:#f2b941;--gold2:#ffcf67;--root:#f0a83a;--tone:#efe6cd;--danger:#ff6a59;--shadow:0 18px 50px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:radial-gradient(circle at 50% -20%,#292313 0,transparent 35%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-width:1060px}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:72px;padding:0 28px;display:flex;align-items:center;border-bottom:1px solid var(--line);background:rgba(8,9,12,.92)}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:900;letter-spacing:.08em;font-size:1.05rem}.brand>span:last-child span{color:var(--gold)}.brand-mark{display:flex;align-items:flex-end;gap:2px;width:28px;height:28px;padding:5px;background:var(--gold);border-radius:6px}.brand-mark i{width:3px;background:#151515;border-radius:2px}.brand-mark i:nth-child(1){height:9px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:11px}.brand-mark i:nth-child(4){height:18px}.corpus-badge{margin-left:38px;color:var(--muted);font-size:.8rem;letter-spacing:.03em}.corpus-badge span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#55d586;box-shadow:0 0 12px #55d586;margin-right:8px}.corpus-badge b{color:#d9dce2}.top-actions{margin-left:auto;display:flex;gap:8px}.icon-button,.ghost-button,.transport-button,.play-button{border:1px solid var(--line);background:#15171c;color:#dfe1e5;border-radius:7px;height:38px;cursor:pointer}.icon-button{width:40px;font-size:1.2rem}.ghost-button{padding:0 15px;font-weight:700}.workspace{flex:1;display:grid;grid-template-columns:252px minmax(560px,1fr) 250px;gap:12px;padding:12px;max-height:calc(100vh - 102px)}.panel{background:linear-gradient(180deg,rgba(22,24,30,.98),rgba(14,16,20,.98));border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.controls,.export{padding:18px;overflow:auto}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.panel-heading p{font-weight:800;margin:0}.panel-heading span,.eyebrow{font-size:.67rem;font-weight:800;letter-spacing:.14em;color:var(--gold)}label{display:block;color:#aeb2bb;font-size:.77rem;font-weight:700;margin-bottom:15px}.field-row{display:grid;gap:10px}.field-row.two{grid-template-columns:1fr 1fr}select,input{width:100%;height:40px;margin-top:7px;background:#0d0f13;border:1px solid #323640;border-radius:6px;color:#f3f3f4;padding:0 10px;font:inherit;font-size:.87rem;outline:none}select:focus,input:focus{border-color:var(--gold)}.stepper{display:flex;margin-top:7px}.stepper input{margin:0;border-radius:0;text-align:center;padding:0;appearance:textfield}.stepper button,.seed-field button{border:1px solid #323640;background:#1c1f25;color:#fff;cursor:pointer}.stepper button{width:32px}.stepper button:first-child{border-radius:6px 0 0 6px}.stepper button:last-child{border-radius:0 6px 6px 0}.slider-field{margin:4px 0 18px}.slider-field>div:first-child{display:flex;justify-content:space-between}.slider-field label{margin:0}.slider-field output{font-size:.73rem;color:var(--gold);font-weight:800}.slider-field input{height:4px;margin:12px 0 7px;padding:0;accent-color:var(--gold)}.range-labels{display:flex;justify-content:space-between;color:#626875;font-size:.65rem}.seed-field{display:flex}.seed-field input{border-radius:6px 0 0 6px;font-family:ui-monospace,monospace;letter-spacing:.08em}.seed-field button{width:42px;margin-top:7px;border-radius:0 6px 6px 0}.generate-button{width:100%;height:48px;border:0;border-radius:7px;background:linear-gradient(135deg,var(--gold),#e59620);color:#111;font-weight:900;display:flex;align-items:center;justify-content:center;gap:18px;cursor:pointer;box-shadow:0 8px 24px rgba(242,185,65,.16)}.generate-button:hover,.download-button:hover{filter:brightness(1.08);transform:translateY(-1px)}kbd{background:rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.25);border-radius:4px;padding:2px 5px}.stage{padding:22px;overflow:auto;position:relative}.stage-head{display:flex;align-items:center;justify-content:space-between}.eyebrow{margin:0 0 7px}.stage h1{margin:0;font-size:1.55rem;letter-spacing:-.03em}.transport{display:flex;gap:7px}.transport-button{width:38px}.play-button{padding:0 16px;font-weight:800}.play-button span{color:var(--gold);margin-right:7px}.timeline{height:30px;margin:24px 0 0 42px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;color:#676c76;font-size:.64rem;position:relative}.timeline #playhead{position:absolute;left:0;bottom:-380px;width:1px;height:410px;background:var(--gold);z-index:5;box-shadow:0 0 8px var(--gold);opacity:0}.chord-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 18px}.chord-card{position:relative;min-height:92px;padding:14px;border:1px solid #30343d;background:#111319;border-radius:8px;cursor:pointer;overflow:hidden}.chord-card:hover{border-color:#565c68}.chord-card.active{border-color:var(--gold);box-shadow:inset 0 -2px var(--gold)}.chord-card .bar-no{color:#666c78;font-size:.65rem;font-weight:800;letter-spacing:.1em}.chord-card strong{display:block;font-size:1.18rem;margin:8px 0 3px}.chord-card small{color:#808692;font-family:ui-monospace,monospace;font-size:.67rem}.chord-card button{position:absolute;right:9px;top:9px;background:transparent;border:0;color:#707683;cursor:pointer;font-size:1rem}.piano-roll-wrap{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#0c0e12}.roll-head{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--line);font-size:.74rem;font-weight:800}.roll-head div{color:#747a86;font-size:.65rem;font-weight:600}.legend-root,.legend-tone{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 5px 0 12px}.legend-root{background:var(--root)}.legend-tone{background:var(--tone)}.piano-roll{height:258px;display:grid;grid-template-columns:42px 1fr}.keyboard{position:relative;background:#e7e4db;border-right:1px solid #343740}.key-label{height:16.125px;border-bottom:1px solid #b9b7af;color:#3b3c3f;font-size:.51rem;padding:2px 3px}.key-label.black{background:#22252a;color:#aeb2b8;width:70%}.grid{position:relative;background-image:linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(to right,rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:calc(100% / 16) 100%,25% 100%,100% 16.125px}.midi-note{position:absolute;height:12px;border-radius:2px;background:var(--tone);box-shadow:0 1px 0 rgba(255,255,255,.15) inset;min-width:3px}.midi-note.root{background:linear-gradient(90deg,#d48a27,var(--root))}.insight-bar{margin-top:14px;display:grid;grid-template-columns:1fr 1fr 1fr 2fr;border-top:1px solid var(--line);padding-top:14px;gap:15px}.insight-bar div span{display:block;color:#666c78;font-size:.6rem;font-weight:800;letter-spacing:.1em}.insight-bar strong{font-size:.75rem}.insight-bar p{margin:0;color:#707683;font-size:.68rem;line-height:1.45}.file-card{display:flex;align-items:center;gap:12px;background:#0d0f13;border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:20px}.midi-icon{width:48px;height:48px;border-radius:6px;background:var(--gold);color:#121212;display:grid;place-items:center;font-size:.69rem;font-weight:950}.file-card strong{display:block;font-size:.74rem;overflow-wrap:anywhere}.file-card span{display:block;color:#747a86;font-size:.67rem;margin-top:5px}.export-check{display:flex;gap:10px;margin:15px 0}.export-check>span{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(85,213,134,.12);color:#62d58e;font-size:.7rem}.export-check p{margin:0}.export-check strong{font-size:.75rem}.export-check small{display:block;color:#747a86;font-size:.66rem;margin-top:3px}.download-button{width:100%;height:48px;border:0;border-radius:7px;background:#f3f4f6;color:#111;font-weight:900;margin-top:14px;cursor:pointer}.download-button span{font-size:1.1rem;margin-right:7px}.drop-note{text-align:center;color:#6f7580;font-size:.66rem;line-height:1.5}.data-note{display:flex;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:#717783;font-size:.64rem;line-height:1.45}.data-note span{width:7px;height:7px;border-radius:50%;background:#55d586;margin-top:4px;flex:0 0 auto}.data-note p{margin:0}.data-note b{color:#b9bdc5}footer{height:30px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;color:#505560;font-size:.59rem;letter-spacing:.08em}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:11px 16px;border-radius:7px;background:#f3f4f6;color:#121212;font-size:.78rem;font-weight:800;opacity:0;pointer-events:none;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}@media(max-height:760px){.workspace{max-height:none}.piano-roll{height:210px}.midi-note{height:10px}.key-label{height:13.125px}.grid{background-size:calc(100% / 16) 100%,25% 100%,100% 13.125px}}