:root{color-scheme:dark;--bg:#11120f;--panel:#191a16;--panel-2:#20211c;--ink:#f1f0e9;--muted:#9b9c91;--line:#34352e;--lime:#c7f36b;--lime-dim:#829c4a;--orange:#ee906d;--blue:#86b8dc;--mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Space Grotesk',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}button,select,textarea,input{font:inherit}button{color:inherit}.topbar{height:72px;border-bottom:1px solid #292a24;display:flex;align-items:center;justify-content:space-between;padding:0 max(calc((100vw - 1100px)/2),32px)}.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font:700 17px var(--display);letter-spacing:-.7px}.brand-light{font-weight:500;color:#a8aa9d}.brand-mark{width:27px;height:27px;border-radius:8px 8px 8px 3px;background:var(--lime);color:#171911;display:grid;place-items:center;font:700 19px var(--display);transform:rotate(-7deg)}nav{display:flex;gap:34px;height:100%;align-items:center}nav a{color:#898a80;text-decoration:none;font-size:13px}nav .nav-active{color:var(--ink);position:relative}nav .nav-active:after{content:"";position:absolute;bottom:-28px;left:0;right:0;height:2px;background:var(--lime)}.top-actions{display:flex;gap:18px;align-items:center}.beta-label,.eyebrow,.section-index,.local-badge,.field-label,.quick-prompts>span,.pattern-head,.beat-name,.range-labels,.prototype-note,.footer{font-family:var(--mono)}.beta-label{font-size:9px;letter-spacing:1px;color:#aaaB9f;display:flex;align-items:center;gap:8px}.beta-label i,.pulse-dot{width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 10px #c7f36b88}.avatar{width:30px;height:30px;border:1px solid #42443a;border-radius:50%;background:transparent;font:500 12px var(--mono)}main{max-width:840px;margin:0 auto;padding:64px 24px 80px}.intro{margin:0 0 32px}.eyebrow{font-size:10px;color:var(--lime);letter-spacing:1.5px;display:flex;gap:10px;align-items:center}.eyebrow-line{width:22px;height:1px;background:var(--lime)}h1{font:600 clamp(42px,7vw,66px)/1.05 var(--display);letter-spacing:-4px;margin:18px 0 10px}h1 em{font-style:normal;color:var(--lime)}.intro p{margin:0;color:#a8a99f;font-size:15px}.studio-card,.result-card{background:linear-gradient(140deg,#1b1c18,#181915);border:1px solid #34352d;border-radius:13px;padding:25px 28px;box-shadow:0 16px 50px #0002}.studio-heading,.result-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.studio-heading>div,.result-top>div:first-child{display:flex;align-items:center;gap:10px}.section-index{color:var(--lime);font-size:10px}.studio-heading h2,.result-top h2{font:600 16px var(--display);margin:0;letter-spacing:-.3px}.local-badge{font-size:9px;letter-spacing:1px;color:#aeb0a4;border:1px solid #3b3d34;padding:7px 9px;border-radius:4px}.field-label{font-size:10px;color:#a9aa9f;letter-spacing:.7px;display:block;margin-bottom:9px}.prompt-wrap{position:relative;background:#11120f;border:1px solid #3a3b32;border-radius:8px;padding:13px 14px 24px 40px;transition:border .2s}.prompt-wrap:focus-within{border-color:var(--lime-dim)}textarea{width:100%;resize:vertical;min-height:47px;max-height:100px;color:var(--ink);border:0;outline:0;background:transparent;line-height:1.55}textarea::placeholder{color:#686a60}.prompt-spark{position:absolute;left:15px;top:14px;color:var(--lime);font-size:17px}.char-count{position:absolute;right:13px;bottom:8px;color:#696b60;font:9px var(--mono)}.quick-prompts{display:flex;align-items:center;gap:8px;margin:11px 0 24px;flex-wrap:wrap}.quick-prompts>span{font-size:9px;letter-spacing:1px;color:#73756b;margin-right:2px}.quick-prompts button{font-size:10px;color:#b7b8ac;background:#24251f;border:1px solid #383a31;border-radius:4px;padding:6px 9px;cursor:pointer}.quick-prompts button:hover{border-color:#777c5f;color:var(--lime)}.control-row{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:20px;align-items:end}.select-wrap{display:flex;align-items:center;position:relative}.select-wrap select{width:100%;appearance:none;background:#22231e;border:1px solid #3b3d34;color:#e6e6dc;border-radius:5px;padding:10px 12px;outline:0}.select-wrap>span{position:absolute;right:12px;color:#a5a69a;pointer-events:none}.energy-options{height:37px;display:flex;background:#22231e;border:1px solid #393b32;border-radius:5px;padding:3px}.energy{flex:1;background:transparent;border:0;border-radius:3px;color:#96978e;font-size:11px;cursor:pointer}.energy.active{background:#393b31;color:var(--lime);box-shadow:0 1px 4px #0005}.tempo-block .field-label{display:flex;justify-content:space-between}.tempo-block strong{color:var(--ink);font-weight:500}.tempo-block small{color:#999a8e;font:9px var(--mono)}input[type=range]{appearance:none;width:100%;height:3px;background:#484a3d;border-radius:4px;display:block;margin:15px 0 9px}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--lime);border:2px solid #22231d;box-shadow:0 0 0 1px var(--lime)}.range-labels{display:flex;justify-content:space-between;color:#717369;font-size:9px}.generate-row{border-top:1px solid #303129;margin-top:24px;padding-top:18px;display:flex;align-items:center;justify-content:space-between}.generate-row p{margin:0;color:#a6a79c;font-size:11px;display:flex;align-items:center;gap:9px}.generate-button{border:0;background:var(--lime);color:#1a1c12;border-radius:5px;padding:11px 15px;font-weight:700;font-size:12px;display:flex;gap:10px;align-items:center;cursor:pointer;box-shadow:0 3px 14px #c7f36b20;transition:transform .15s,background .15s}.generate-button:hover{transform:translateY(-1px);background:#d5fb87}.generate-button kbd{font:10px var(--mono);opacity:.55;margin-left:5px}.result-card{margin-top:14px;padding-bottom:18px}.result-top{margin-bottom:20px}.result-actions{display:flex;align-items:center;gap:15px}.beat-name{font-size:9px;letter-spacing:1px;color:#898b7f}.play-button{display:flex;gap:8px;align-items:center;background:#292a23;border:1px solid #484a3d;border-radius:5px;padding:8px 13px;font-size:11px;cursor:pointer}.play-button:hover{border-color:var(--lime-dim);color:var(--lime)}.play-button span:first-child{font-size:10px;color:var(--lime)}.pattern-head{display:grid;grid-template-columns:100px 1fr 110px;align-items:center;color:#75776c;font-size:8px;letter-spacing:.6px;padding:0 0 9px;border-bottom:1px solid #303129}.step-count{display:grid;grid-template-columns:repeat(8,1fr);text-align:center;color:#77796e;font-size:9px}.bar-label{text-align:right}.pattern-scroll{overflow-x:auto}.pattern-head,.track-row{min-width:570px}.sequencer{display:flex;flex-direction:column}.track-row{display:grid;grid-template-columns:100px 1fr 110px;align-items:center;min-height:49px;border-bottom:1px solid #282923}.track-name{display:flex;align-items:center;gap:8px;color:#b9baaf;font-size:10px}.track-dot{width:6px;height:6px;border-radius:2px;background:var(--lime)}.track-row[data-track="snare"] .track-dot,.track-row[data-track="clap"] .track-dot{background:var(--orange)}.track-row[data-track="closed-hat"] .track-dot,.track-row[data-track="open-hat"] .track-dot{background:var(--blue)}.track-row[data-track="bass"] .track-dot{background:#be91e8}.steps{display:grid;grid-template-columns:repeat(32,1fr);gap:3px}.step{height:23px;border:1px solid #393b33;background:#23241f;border-radius:3px;padding:0;cursor:pointer;transition:background .12s,border .12s,transform .12s}.step:nth-child(4n+1){margin-left:3px}.step:nth-child(17){margin-left:8px}.step.on{background:var(--lime-dim);border-color:#a9ce63}.track-row[data-track="snare"] .step.on,.track-row[data-track="clap"] .step.on{background:#a7624d;border-color:#e68c6b}.track-row[data-track="closed-hat"] .step.on,.track-row[data-track="open-hat"] .step.on{background:#52758a;border-color:#8ebbd9}.track-row[data-track="bass"] .step.on{background:#755995;border-color:#be91e8}.step.playing{transform:scaleY(1.16);box-shadow:0 0 8px #c7f36b77}.result-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;font:9px var(--mono);color:#83857a}.result-foot>span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.legend-kick,.legend-snare,.legend-hat,.legend-clap,.legend-bass{width:6px;height:6px;background:var(--lime-dim);border-radius:2px;margin-left:5px}.legend-snare,.legend-clap{background:#a7624d}.legend-hat{background:#52758a}.legend-bass{background:#755995}.text-button{background:transparent;border:0;color:#96988b;font:9px var(--mono);cursor:pointer}.text-button:hover{color:var(--ink)}.text-button span{margin-left:4px}.prototype-note{margin:14px 3px 0;color:#898a80;font-size:9px;line-height:1.6;display:flex;gap:7px}.prototype-note span{color:var(--lime)}.how{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:78px;padding-top:28px;border-top:1px solid #303129}.how .eyebrow{font-size:9px}.how h2{font:500 25px/1.2 var(--display);letter-spacing:-1px;margin:13px 0}.how p{color:#9b9d91;line-height:1.8;margin:22px 0 0;font-size:12px}footer{max-width:840px;padding:18px 24px 28px;margin:auto;display:flex;justify-content:space-between;color:#696b61;font:9px var(--mono);border-top:1px solid #262720}@media(max-width:640px){.topbar{height:60px;padding:0 18px}.topbar nav{display:none}.beta-label{font-size:8px}main{padding:44px 16px 55px}h1{letter-spacing:-2.5px}.studio-card,.result-card{padding:19px 16px}.control-row{grid-template-columns:1fr 1fr;gap:18px}.tempo-block{grid-column:1/-1}.generate-row{align-items:flex-start;gap:14px;flex-direction:column}.generate-button{width:100%;justify-content:center}.pattern-head,.track-row{grid-template-columns:68px 1fr}.bar-label{display:none}.steps{gap:3px}.step{height:20px}.track-name{font-size:9px}.result-actions{gap:8px}.beat-name{display:none}.how{grid-template-columns:1fr;gap:5px;margin-top:55px}.how p{margin:0}footer{padding:16px}}