@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#e9edf5;background:#090d18;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #91f7dd;outline-offset:5px}header{height:94px;max-width:1440px;margin:auto;padding:0 5%;display:flex;align-items:center;border-bottom:1px solid #ffffff0c;gap:30px}.brand{color:#f3f6ff;text-decoration:none;font:800 32px Manrope,sans-serif;letter-spacing:-2px}.logo{font-size:38px;color:#8cf4d5;vertical-align:middle;margin-right:8px}.brand-dot{color:#8cf4d5}.tagline{font-size:9px;letter-spacing:2px;color:#727d93}.apps{margin-left:auto;color:#9ca6ba;text-decoration:none;font-size:12px}main{max-width:1320px;padding:0 32px;margin:auto}.intro{padding:53px 0 35px}.eyebrow{font-size:9px;letter-spacing:2.4px;color:#91dcca;font-weight:600}h1{font-family:Manrope,sans-serif;font-size:clamp(30px,3.3vw,46px);line-height:1.23;letter-spacing:-1.9px;margin:17px 0}h1 span{color:#a3adbf;font-weight:500}.intro p{color:#7f8ba2;font-size:13px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:22px}.stage{position:relative;min-width:0;align-self:start;border:1px solid #252e40;border-radius:15px;background:radial-gradient(ellipse at 50% 45%,#12233155,transparent 65%),#0b101c;overflow:hidden}.stage-top{display:flex;justify-content:space-between;padding:23px 25px;color:#66758e;font-size:9px;letter-spacing:1.5px}.stage-top>span:first-child{color:#91dbc7}.stage-top i{display:inline-block;width:5px;height:5px;background:#8dffcf;border-radius:50%;margin-right:7px;box-shadow:0 0 12px #8dffcf}.canvas-wrap{width:100%;aspect-ratio:1.15;display:flex;justify-content:center;align-items:center;background-image:radial-gradient(#8497b51c 1px,transparent 1px);background-size:24px 24px}.canvas-wrap canvas{width:100%;height:100%;object-fit:contain;min-height:0}.stage-bottom{padding:16px 25px 22px;display:flex;justify-content:space-between;align-items:center}.stage-bottom strong{display:block;font-size:13px;font-weight:500}.stage-bottom span{display:block;color:#69758c;font-size:10px;margin-top:7px}.transport{display:flex;gap:8px}.transport button{border:1px solid #2a3447;background:#151e2e;color:#cbd8ea;width:36px;height:36px;border-radius:50%;font-size:17px}.progress{height:2px;background:#172233}.progress div{height:100%;background:#8de4ce;transition:width .15s}aside{border:1px solid #252e40;border-radius:15px;background:#0f1522;padding:24px}.panel-title{display:flex;justify-content:space-between;align-items:center}.panel-title h2{font:600 18px Manrope;margin:0}.panel-title>span{color:#93e4d0}.hint{font-size:10px;color:#707e96;margin:9px 0 23px}.orbit{border-top:1px solid #252c3c;padding:16px 0 12px;--accent:#8fe5cb}.orbit-1{--accent:#96baff}.orbit-2{--accent:#c6a0ff}h3{font-size:12px;font-weight:500;margin:0 0 15px;display:flex;align-items:center;gap:8px}.orbit-dot{width:7px;height:7px;border:1px solid var(--accent);border-radius:50%}.orbit-role{margin-left:auto;color:#58667f;font-size:10px}.orbit label{display:block;margin:12px 0 0}label>span{display:flex;justify-content:space-between;font-size:10px;color:#8a97ac}label b{color:#c5d2e5;font-weight:500;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent,#8fe5cb);height:3px;display:block;margin:12px 0 7px;cursor:pointer}.finish{border-top:1px solid #252c3c;padding-top:17px}.palette-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:10px;color:#8a97ac}.palette-row>div{display:flex;gap:10px}.swatch{height:19px;width:19px;border-radius:50%;border:2px solid #0f1522;outline:1px solid transparent}.swatch.active{outline-color:#b9d2da}.weight{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#8a97ac;margin-top:16px}select{background:#151f30;border:1px solid #2b364a;border-radius:5px;font-size:10px;padding:4px;color:#b9c8da}.toggle{display:flex;gap:8px;align-items:center;margin:18px 0}.toggle input{accent-color:#91e8cf}.toggle span{font-size:10px}.export{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-radius:7px;background:#a1eed8;color:#102a28;padding:13px 14px;font-size:15px}.export span{font-size:12px;font-weight:700}.export:hover{background:#c4ffed}.export-note{font-size:8px;color:#5f6d83;text-align:center;margin:10px 0 0}.discover{padding:43px 0 34px}.discover-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.discover-title .eyebrow{font-size:8px;color:#6b8290}.discover h2{font:500 24px Manrope;letter-spacing:-.6px;margin:9px 0 0}.random{color:#b0bfcf;border:1px solid #2a3547;border-radius:7px;background:#121b2a;font-size:11px;padding:11px 15px}.presets{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.preset{text-align:left;min-width:0;background:#101724;border:1px solid #222d40;border-radius:9px;padding:0 12px 14px;color:#d4dce9;transition:border-color .2s,transform .2s}.preset:hover{transform:translateY(-3px);border-color:#6a998f}.preset.chosen{border-color:#609c8d;background:#142320}.preset canvas{width:100%;height:100px;object-fit:contain;display:block}.preset-title{font-size:10px;display:flex;justify-content:space-between;gap:5px}.preset-title>span{color:#839e9e}.preset-note{display:block;font-size:8px;line-height:1.6;color:#677990;margin-top:7px}footer{border-top:1px solid #1d2635;display:flex;justify-content:space-between;padding:23px 0 30px;color:#8494aa;font-size:12px}footer span span{font-size:10px;color:#526077;margin-left:12px}footer>span:last-child{font-size:9px;color:#526077}@media(min-width:1150px){.canvas-wrap{max-height:636px}}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 285px}aside{padding:18px}.presets{grid-template-columns:repeat(3,1fr)}.tagline{display:none}.canvas-wrap{aspect-ratio:1}}@media(max-width:650px){header{height:75px;padding:0 22px}main{padding:0 18px}.intro{padding:35px 0 23px}.intro p{max-width:260px;line-height:1.7}.workspace{grid-template-columns:1fr;gap:15px}.stage-top{padding:18px 15px;font-size:8px}.canvas-wrap{aspect-ratio:1}.stage-bottom{padding:15px}aside{padding:22px}.orbit{padding:18px 0}.orbit label{margin-top:18px}.orbit input{margin-top:16px}.presets{grid-template-columns:repeat(2,1fr)}.discover-title{align-items:flex-end}.discover h2{font-size:21px}.discover-title .eyebrow{max-width:160px;line-height:1.8}.random{padding:10px;font-size:10px}footer>span:last-child{display:none}.preset-title{font-size:11px}.preset-note{font-size:9px}}.transport button.complete{width:auto;border-radius:20px;padding:0 13px;font-size:10px;color:#a1eed8}.presets canvas{filter:drop-shadow(0 0 3px #7bcfcd44)}@media(max-width:420px){.stage-bottom{gap:8px}.transport{gap:5px}.transport button.complete{padding:0 8px;font-size:9px}}.mode-switch{display:flex;gap:5px;background:#090f1b;border:1px solid #263246;border-radius:8px;padding:4px;margin-bottom:20px}.mode-switch button{flex:1;border:0;background:transparent;color:#8594ac;padding:9px 5px;border-radius:5px;font-size:12px}.mode-switch button[aria-pressed=true]{background:#213c37;color:#b1ffe7}