:root{color-scheme:dark;--bg:#171e1b;--panel:#202924;--panel2:#27332b;--line:#3a493e;--text:#f1f0e8;--muted:#b3bdb0;--soft:#829385;--mint:#b6d6aa;--orange:#f1b775;--red:#dd8d79;--font:system-ui,-apple-system,'Helvetica Neue',sans-serif;--display:system-ui,-apple-system,'Helvetica Neue',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 77% 5%,#283e30 0,transparent 32%),var(--bg);color:var(--text);font:15px/1.5 var(--font)}
button,input,select{font:inherit}
button,a,select,input{outline-offset:3px}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--orange)}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.57}
a{color:inherit}
.page-shell{max-width:1460px;margin:auto;padding:0 clamp(16px,3vw,46px) 36px}
.topbar{height:83px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:700 24px/1 var(--display);letter-spacing:-.07em;white-space:nowrap}
.brand-mark{width:39px;height:39px;border:1px solid #77917e;border-radius:12px;display:grid;place-items:center;color:var(--mint);font-size:23px;letter-spacing:0}
.brand-accent{color:var(--mint)}.brand small{display:block;margin-top:5px;color:var(--soft);font:700 9px/1 var(--font);letter-spacing:.21em}
.top-actions{display:flex;align-items:center;gap:23px}.console-link{text-decoration:none;color:var(--muted);font-size:13px}.console-link:hover{color:var(--text)}
#language{min-width:58px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--text)}
.intro{display:flex;align-items:end;justify-content:space-between;gap:38px;padding:49px 0 37px}
.intro-copy{max-width:850px}.overline,.eyebrow{margin:0;color:var(--mint);font-size:10px;font-weight:700;letter-spacing:.19em}.overline{display:flex;align-items:center;gap:11px}
.live-dot{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 5px #b6d6aa1c}
h1,h2,p{margin-top:0}.intro h1{font:600 clamp(36px,5vw,66px)/1.06 var(--display);letter-spacing:-.065em;margin:19px 0 14px}.intro-text{font-size:16px;color:var(--muted);max-width:650px;margin:0}
.intro-note{flex:0 0 238px;color:var(--muted);font-size:12px;line-height:1.5;border-left:1px solid var(--line);padding:4px 0 4px 17px}.note-number{display:block;color:var(--orange);font:600 12px var(--display);margin-bottom:8px}
.workspace{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:18px;align-items:start;min-width:0}
.right-column{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}.panel{min-width:0;background:linear-gradient(150deg,#222e25,#1d2621 70%);border:1px solid var(--line);border-radius:18px;padding:25px}
.section-head{display:flex;align-items:start;gap:15px;margin-bottom:23px}.section-number{display:grid;place-items:center;width:29px;height:29px;flex:0 0 29px;border:1px solid #6a816c;border-radius:50%;font:600 10px var(--display);color:var(--mint)}
.section-head h2{font:600 23px/1.15 var(--display);letter-spacing:-.04em;margin:5px 0 0}.model-list{display:grid;gap:9px}
.model-card{display:grid;width:100%;grid-template-columns:26px 1fr;gap:10px;text-align:left;padding:15px 13px;border:1px solid #435246;border-radius:12px;background:#263229;color:var(--text);transition:background .15s,border .15s,transform .15s}
.model-card:hover{background:#2d3c31;transform:translateY(-1px)}.model-card[aria-pressed=true]{background:#314535;border-color:var(--mint);box-shadow:inset 3px 0 var(--mint)}
.model-card .index{color:var(--mint);font:600 11px var(--display);padding-top:2px}.model-card strong{display:block;font:600 15px/1.2 var(--display);letter-spacing:-.025em}.model-card .desc{display:block;color:var(--muted);font-size:11px;margin:6px 0 9px;line-height:1.45}.model-card .value{display:inline-block;color:#d6e6d1;font-size:10px;font-weight:700;border:1px solid #647868;border-radius:20px;padding:2px 8px}
.model-note,.fine-print{color:var(--soft);font-size:11px;line-height:1.5}.model-note{margin:20px 0 0}.controls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.control{display:grid;gap:8px;font-size:12px;color:var(--muted)}.control>span:first-child{display:flex;justify-content:space-between;gap:5px;white-space:nowrap}.control output{color:var(--text);font-size:11px}
input[type=number],select{min-height:41px;width:100%;padding:8px 10px;border:1px solid #4d604e;border-radius:8px;background:#17221b;color:var(--text)}input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--mint);cursor:pointer}
.seed-row{display:flex;gap:5px}.seed-row input{min-width:0}.seed-row button{width:39px;flex:0 0 39px;border:1px solid #4d604e;border-radius:8px;background:#17221b;color:var(--mint);font-size:22px}
.groups-head{display:flex;justify-content:space-between;gap:10px;margin:27px 0 10px;font-size:12px;color:var(--text);font-weight:700}.groups-head small{color:var(--soft);font-size:11px;font-weight:400}
.group-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.group-control{display:flex;align-items:center;justify-content:space-between;gap:5px;text-align:left;min-height:42px;padding:8px 10px;border:1px solid #4d604e;border-radius:8px;background:#1c2920;color:var(--muted);font-size:11px}.group-control strong{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--mint)}.group-control[data-state=off]{opacity:.54}.group-control[data-state=on]{background:#314433;border-color:#77977a;color:var(--text)}
.group-presets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 11px}.group-presets button{min-height:30px;padding:4px 10px;background:#1a281e;border:1px solid #526554;border-radius:16px;color:var(--muted);font-size:10px}.group-presets button:hover{background:#344a37;color:var(--text)}
.group-explainer{color:var(--soft);font-size:11px;line-height:1.45;margin:10px 0 0}
.generation-actions{display:flex;gap:10px;margin:25px 0 12px}.generation-actions button{border-radius:9px;padding:12px 18px;min-height:46px;font-size:12px;font-weight:700}.primary{border:1px solid var(--mint);background:var(--mint);color:#1c2d20}.primary:hover:not(:disabled){background:#d2e8c8}.secondary{border:1px solid #6a816c;background:transparent;color:var(--text)}.secondary:hover:not(:disabled){background:#2d3c31}.fine-print{margin:0}
.stage-head{align-items:center;flex-wrap:wrap}.stage-head>div{flex:1}.status{color:var(--muted);font-size:11px;white-space:nowrap}.status[data-state=busy]{color:var(--orange)}.status[data-state=error]{color:var(--red)}.status[data-state=ready]{color:var(--mint)}
.live-head{align-items:center;flex-wrap:wrap}.live-head>div{flex:1}.live-intro{color:var(--muted);font-size:12px;max-width:730px;margin:-6px 0 18px}.live-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.live-actions button{min-height:44px;border-radius:9px;padding:10px 16px;font-size:12px;font-weight:700}.live-now{color:var(--mint);font-size:12px;margin-left:auto}.live-chart-head{display:flex;justify-content:space-between;gap:12px;margin:25px 0 10px;align-items:baseline}.live-chart-head small{color:var(--soft);font-size:10px}.live-chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.chord-bar{min-height:82px;padding:10px 11px;border:1px solid #4a5d4c;border-radius:9px;background:linear-gradient(to right,#354b39 var(--fill,0%),#1c2a20 var(--fill,0%));overflow:hidden}.chord-bar.pending{opacity:.45}.chord-bar.active{border-color:var(--mint)}.chord-bar .number{display:block;color:var(--soft);font:700 10px var(--display);margin-bottom:5px}.chord-bar strong{display:block;font:600 20px/1 var(--display);letter-spacing:-.04em}.chord-bar small{display:block;color:var(--soft);font-size:10px;margin-top:5px}.live-caveat{color:var(--soft);font-size:11px;margin:11px 0 0}
.playback-row{display:flex;gap:13px;align-items:center;padding:15px;border:1px solid #435246;border-radius:12px;background:#17221b}.playback-row audio{width:100%;min-width:0;height:39px;accent-color:var(--mint)}.download-actions{display:flex;gap:6px;flex:0 0 auto}.download{padding:9px 10px;text-decoration:none;border:1px solid #526653;border-radius:7px;font-size:11px;white-space:nowrap}.download:hover:not(.disabled){background:#334637}.download.disabled{opacity:.4;pointer-events:none}
.view-bar{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:27px 0 14px}.view-bar p{margin:5px 0 0;color:var(--soft);font-size:11px}.sound-mode{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--muted);font-size:11px}.sound-mode select{min-width:154px;min-height:34px;font-size:11px}
.roll-viewport{max-width:100%;min-width:0;overflow-x:auto;border:1px solid #3e5042;border-radius:10px;background:#17221b;scrollbar-color:#6b806e #17221b;touch-action:pan-x}.roll-inner{position:relative;min-height:296px}.roll-viewport canvas{display:block;cursor:crosshair}.playhead{position:absolute;top:0;bottom:0;width:2px;background:#f6d0a1;box-shadow:0 0 8px #f6d0a1aa;pointer-events:none;display:none}.hover-info{min-height:18px;color:var(--soft);font-size:11px;margin:8px 0 15px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:17px}.metrics>div{display:flex;align-items:baseline;gap:7px}.metrics strong{font:600 21px var(--display);letter-spacing:-.04em}.metrics span{color:var(--soft);font-size:9px;font-weight:700;letter-spacing:.11em}
.page-footer{display:flex;justify-content:space-between;gap:30px;border-top:1px solid var(--line);margin-top:30px;padding-top:22px;color:var(--soft);font-size:11px}.page-footer p{max-width:670px;margin:0}.page-footer a{color:var(--muted);white-space:nowrap}
.joint-entry{margin-top:18px}.joint-entry .section-head{margin-bottom:12px}.joint-entry p{max-width:800px;color:var(--muted);font-size:12px}.joint-entry-link{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--mint);border-radius:8px;color:var(--mint);text-decoration:none;font-size:12px;font-weight:700}.joint-entry-link:hover{background:#314535}
@media(max-width:1100px){.controls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.group-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.intro{padding-top:38px}.intro-note{display:none}.workspace{grid-template-columns:1fr}.model-list{grid-template-columns:repeat(2,minmax(0,1fr))}.model-panel{order:0}.right-column{order:1}}
@media(max-width:600px){.topbar{height:69px}.brand{font-size:21px}.brand-mark{width:34px;height:34px}.top-actions{gap:8px}.console-link{font-size:11px}.intro{padding:34px 0 25px}.intro h1{font-size:38px}.intro-text{font-size:13px}.panel{padding:17px;border-radius:13px}.model-list{grid-template-columns:1fr}.model-card{padding:12px}.model-card .desc{margin:3px 0 6px}.section-head{margin-bottom:17px}.section-head h2{font-size:21px}.controls-grid{gap:12px}.groups-head{flex-direction:column;gap:2px}.generation-actions{flex-direction:column}.generation-actions button{width:100%}.stage-head .status{width:100%;margin-left:44px}.playback-row{display:grid}.download-actions{justify-content:flex-end}.view-bar{align-items:start;flex-direction:column}.sound-mode{width:100%;justify-content:space-between}.metrics{gap:5px}.metrics>div{display:grid;gap:0}.metrics strong{font-size:19px}.page-footer{display:grid;gap:12px}}
@media(max-width:600px){.live-head .status{width:100%;margin-left:44px}.live-actions button{flex:1}.live-now{width:100%;margin-left:0}.live-chart{gap:4px}.chord-bar{min-height:72px;padding:8px 6px}.chord-bar strong{font-size:15px}.live-chart-head{display:block}.live-chart-head small{display:block;margin-top:3px}}