:root{color-scheme:dark;font:13px Inter,Segoe UI,sans-serif;color:#e7e7f2;background:#111218}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{background:#292a36;color:#e8e8f4;border:1px solid #3b3c4c;border-radius:6px;padding:8px 10px;cursor:pointer}button:hover{background:#393749;border-color:#9380ff}button:disabled{opacity:.35;cursor:default}.primary{background:#7856ef;border-color:#9478ff;color:white}header{height:68px;display:flex;align-items:center;gap:35px;padding:0 20px;border-bottom:1px solid #30313d;background:#1a1b24}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#b39aff;font-size:22px;font-weight:800}.brand span{color:white;font-size:17px}small{font-size:9px;color:#a79cc7;margin-left:8px;letter-spacing:1px}.actions{margin-left:auto;display:flex;gap:8px}.options{display:flex;align-items:center;gap:12px;height:52px;padding:8px 15px;background:#20212b;border-bottom:1px solid #343541}.options label{display:flex;align-items:center;gap:6px;white-space:nowrap}input[type=range]{width:85px;accent-color:#a88cff}input[type=color]{width:29px;height:28px;padding:0;border:0}main{display:grid;grid-template-columns:66px minmax(300px,1fr) 280px;height:calc(100dvh - 120px);min-height:500px}.tools{background:#1c1d27;padding:10px 7px;display:flex;flex-direction:column;gap:5px;border-right:1px solid #343541}.tools button{padding:10px 3px;font-size:18px;border-color:transparent;background:transparent}.tools button.active{background:#4b3b77;border-color:#9271ef}.work{min-width:0;display:flex;flex-direction:column;background:#101117}.tab{padding:12px 18px;background:#242530;width:100%}.tab span{color:#8c8ca2;margin-left:12px;font-size:11px}.viewport{flex:1;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;padding:48px;position:relative}#stage{position:relative;flex-shrink:0;box-shadow:0 10px 60px #0008;background-color:#ddd;background-image:linear-gradient(45deg,#bcbcbc 25%,transparent 25%),linear-gradient(-45deg,#bcbcbc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bcbcbc 75%),linear-gradient(-45deg,transparent 75%,#bcbcbc 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}canvas{display:block;touch-action:none}#welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#1b1d28;color:#f2edff;text-align:center;padding:20px}#welcome h1{font-size:25px;font-weight:600;letter-spacing:-.6px}#welcome p{color:#a3a5ba}#welcome button{margin:5px}.mark{font-size:55px;color:#b79aff}.muted{font-size:11px}footer{padding:9px 14px;display:flex;justify-content:space-between;color:#9295aa;font-size:11px;border-top:1px solid #30313c}.panels{overflow:auto;background:#1d1e28;border-left:1px solid #343541}.panels section{padding:16px;border-bottom:1px solid #353541}h2{font-size:10px;letter-spacing:1.4px;color:#a5a7bb;margin:0 0 16px}h2 span{float:right}h3{font-size:15px}p{font-size:12px;line-height:1.6;color:#a4a6bc}.row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0;font-size:11px}.row select{max-width:170px}.layerActions{display:flex;gap:5px;margin:10px 0}.layerActions button{font-size:11px;flex:1;padding:7px 4px}.layer{display:flex;align-items:center;gap:7px;padding:10px 6px;border:1px solid transparent;border-radius:6px;margin:4px 0;cursor:pointer}.layer.selected{background:#343047;border-color:#77609f}.layer .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer button{padding:3px;font-size:11px}.badge{font-size:9px;color:#c5b3f4}i{height:24px;border-left:1px solid #444} @media(max-width:1050px){.options{overflow:auto}.panels{width:230px}main{grid-template-columns:58px minmax(250px,1fr) 230px}header{gap:15px}header small{display:none}.actions button{font-size:11px}}@media(max-width:700px){header{height:auto;min-height:68px;flex-wrap:wrap;padding:12px;gap:10px}.actions{width:100%;margin:0}.brand{font-size:18px}main{height:auto;min-height:80vh;grid-template-columns:52px 1fr}.work{height:65vh}.panels{grid-column:1/-1;width:100%;display:grid;grid-template-columns:1fr 1fr}.viewport{padding:15px}.options{height:55px}#welcome h1{font-size:18px}}

#swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}#swatches button{height:25px;padding:0;border:1px solid #ffffff44}

textarea{width:100%;resize:vertical;background:#14151e;border:1px solid #484457;border-radius:6px;color:#eee;padding:10px;font:14px Segoe UI,sans-serif}.textLabel{display:block;margin-bottom:8px;color:#b3aec5}.row input[type=number],.row input[type=text]{width:105px;background:#292a36;color:#eee;border:1px solid #494657;padding:5px;border-radius:4px}.layerActions label{font-size:10px;white-space:nowrap}

.toolGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.toolGrid button{font-size:11px;padding:7px}.tools{overflow:auto}.tools button{flex-shrink:0}

.panelNav{position:sticky;top:0;z-index:5;width:100%;border-radius:0;background:#302c41;padding:12px}.panels h2{scroll-margin-top:52px}