:root{font-family:'DM Sans',sans-serif;color:#e9edf3;background:#10141c;font-size:16px}*{box-sizing:border-box}body{margin:0}header{height:86px;padding:0 5%;border-bottom:1px solid #2b303a;display:flex;align-items:center;justify-content:space-between}.brand{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;letter-spacing:-2px;color:white;text-decoration:none;display:flex;align-items:baseline;gap:0}.brand-dot{color:#bef264}.brand small{font:500 12px 'DM Sans',sans-serif;letter-spacing:2px;margin-left:22px}.beta{font-size:12px;letter-spacing:1px;color:#aeb7c4}main{max-width:1500px;margin:auto;padding:42px 5%}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.eyebrow{font-size:12px;letter-spacing:2px;color:#bef264;margin:0 0 12px}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(36px,4vw,58px);line-height:1.05;letter-spacing:-2px;margin:0 0 18px}.intro h1 br{display:none}.intro p:not(.eyebrow){color:#9da8b7;max-width:600px;line-height:1.6;margin:0}.steps{display:flex;gap:22px;font-size:14px;color:#748093;padding-bottom:5px}.steps .active{color:#bef264}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px}.panel{padding:24px;background:#191f29;border:1px solid #303744;border-radius:14px;margin-bottom:18px}h2{font-size:18px;font-weight:600;margin:0 0 20px}h2>span{font-size:12px;color:#bef264;margin-right:10px}.upload{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;border:1px dashed #586371;padding:24px 12px;border-radius:8px;cursor:pointer;background:#202733}.upload:hover{border-color:#bef264}.upload span{font-size:12px;color:#a7b1bf}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.source-row{display:flex;align-items:center;gap:14px;margin-top:18px}.source-row canvas{width:85px;height:65px;border-radius:5px;background:#fff;object-fit:contain}.source-row strong{font-size:14px;word-break:break-word}.source-row p{font-size:12px;color:#a6b0bd;line-height:1.5;margin:5px 0}.text-button{background:none;color:#bef264;border:0;padding:0;font-size:12px;cursor:pointer}#message{font-size:13px;line-height:1.5;color:#a6b0bd;margin:16px 0 0}label:not(.upload){display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:20px 0 10px;color:#d9e0e9}label span{color:#9aa6b7;font-size:13px}input[type=number]{width:65px;background:#11161e;border:1px solid #454e5c;color:#fff;padding:8px;border-radius:5px;font-size:14px}input[type=range]{width:100%;accent-color:#bef264}.check{justify-content:flex-start!important;gap:8px}.check input{accent-color:#bef264}.types{display:flex;padding:4px;background:#10151e;border-radius:7px;gap:4px}.types button{flex:1;border:0;padding:10px 5px;color:#9aa6b7;background:none;border-radius:5px;cursor:pointer;font:500 14px inherit}.types .selected{background:#323d4b;color:#fff}.hint{font-size:12px;color:#9ba8b8;line-height:1.6}.primary,.outline{font:600 14px 'DM Sans',sans-serif;padding:12px 18px;border-radius:7px;cursor:pointer}.primary{background:#bef264;color:#14220a;border:1px solid #bef264}.primary:hover{background:#d0ff84}.outline{border:1px solid #56606e;background:transparent;color:#e5ebf3}.outline:hover{border-color:#bef264}button:focus-visible,input:focus-visible{outline:2px solid #bef264;outline-offset:4px}#generate{width:100%;margin-top:8px}.viewer-panel{border:1px solid #303744;border-radius:14px;overflow:hidden;background:#191f29;align-self:start;position:sticky;top:20px}.viewer-top{display:flex;justify-content:space-between;align-items:center;padding:24px}.viewer-top h2{font-family:'Space Grotesk',sans-serif;font-size:24px;margin:0}.viewer-top .eyebrow{margin-bottom:5px}#viewer{height:440px;position:relative;background:radial-gradient(ellipse at 50% 40%,#303c4c,#151c27 75%)}#viewer canvas{width:100%;height:100%;display:block;touch-action:none}.view-help{position:absolute;bottom:18px;left:0;right:0;text-align:center;pointer-events:none;color:#9ba8b8;font-size:12px}.metrics{display:flex;border-top:1px solid #303744;border-bottom:1px solid #303744;padding:20px 24px;gap:35px}.metrics small{display:block;font-size:11px;letter-spacing:1px;color:#8f9bae;margin-bottom:8px}.metrics strong{font-size:14px;font-weight:500}.export{padding:24px}.export h2{margin-bottom:8px}.export p{font-size:14px;line-height:1.5;color:#aab4c2;margin-top:0}.downloads{display:flex;gap:12px;margin:20px 0}.export .hint{font-size:12px;margin-bottom:0}footer{display:flex;justify-content:space-between;gap:24px;margin-top:25px;font-size:12px;color:#7f8c9f;line-height:1.6}button:disabled{opacity:.5;cursor:wait}@media(max-width:1050px){.steps{display:none}.workspace{grid-template-columns:300px minmax(0,1fr)}.intro h1 br{display:block}.metrics{gap:18px}}@media(max-width:760px){header{height:72px}.brand small{display:none}.beta{font-size:10px}main{padding-top:28px}.workspace{display:flex;flex-direction:column}.viewer-panel{position:static}.intro h1 br{display:none}h1{font-size:38px}#viewer{height:330px}.metrics{flex-wrap:wrap}footer{flex-direction:column;gap:8px}.downloads button{flex:1}.source-row canvas{width:95px}}

select{max-width:160px;border:1px solid #454e5c;background:#11161e;color:#fff;padding:8px;border-radius:5px;font-size:13px}

header nav{display:flex;align-items:center;gap:20px}header nav a{color:#d9e0e9;font-size:14px;text-decoration:none}header nav a:hover{color:#bef264}@media(max-width:500px){header nav .beta{display:none}}