:root{--bg:#14141a;--panel:#1c1c24;--line:#2c2c38;--ink:#e8e8f0;--dim:#8d8da0;--accent:#dca44a;--metal:#cfd4e0;font-family:ui-sans-serif,-apple-system,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);height:100vh;margin:0;display:flex}aside{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;flex:none;width:300px;display:flex;overflow-y:auto}main{flex:1;min-width:0;display:flex}#stage{flex:1;place-items:center;min-width:0;display:grid}#right{border-left:1px solid var(--line);background:var(--panel);flex-direction:column;flex:none;gap:12px;width:340px;padding:14px;display:flex;overflow-y:auto}h1{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0;padding:16px 16px 10px;font-size:13px}.steps{border-bottom:1px solid var(--line);flex-direction:column;display:flex}.steps button{all:unset;cursor:pointer;border-left:3px solid #0000;align-items:baseline;gap:10px;padding:11px 16px;font-size:13px;display:flex}.steps button:hover{background:#23232d}.steps button[aria-current=true]{border-left-color:var(--accent);background:#23232d}.steps b{color:var(--dim);font-variant-numeric:tabular-nums;font-weight:500}.steps button[aria-current=true] b{color:var(--accent)}section{flex-direction:column;gap:12px;padding:14px 16px;display:none}section[data-on]{display:flex}label{color:var(--dim);flex-direction:column;gap:5px;font-size:12px;display:flex}label span{justify-content:space-between;display:flex}label b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}input[type=range]{width:100%;accent-color:var(--accent)}select{border:1px solid var(--line);color:var(--ink);font:inherit;background:#14141a;border-radius:5px;flex:1;min-width:0;padding:6px 8px;font-size:13px}input[type=color]{border:1px solid var(--line);cursor:pointer;background:#14141a;border-radius:5px;width:100%;height:32px;padding:2px}input[type=text]{border:1px solid var(--line);color:var(--ink);font:inherit;background:#14141a;border-radius:5px;padding:6px 8px;font-size:13px}.shapes{grid-template-columns:1fr 1fr;gap:6px;display:grid}.shapes button,.act{all:unset;text-align:center;border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:8px;font-size:12px}.shapes button:hover,.act:hover{border-color:var(--accent)}.act.danger{color:#ff6f8b;border-color:#5a2733}.act.danger:hover{border-color:#ff6f8b}.shapes button[aria-pressed=true],.act[aria-pressed=true]{border-color:var(--accent);background:#352a1b}.row{gap:6px;display:flex}.row .act{flex:1}.swatches{grid-template-columns:repeat(6,1fr);gap:5px;display:grid}.swatches button{all:unset;aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:5px}.swatches button[aria-pressed=true]{border-color:var(--ink)}canvas{display:block}#edit{touch-action:none;background:#0e0e13;border-radius:10px}#preview,#thumb,#locked{background:repeating-conic-gradient(#1a1a22 0% 25%,#15151c 0% 50%) 50%/16px 16px;border-radius:10px}#thumb{image-rendering:pixelated}.note{color:var(--dim);font-size:11.5px;line-height:1.5}.note code{color:var(--metal)}.hd{letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-size:11px}#status{color:var(--dim);border-top:1px solid var(--line);padding:8px 16px;font-size:11.5px}textarea{width:100%;height:160px;color:var(--metal);border:1px solid var(--line);background:#0e0e13;border-radius:6px;padding:8px;font:11px/1.5 ui-monospace,monospace}.site-footer{color:var(--dim);border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;gap:16px;padding:20px 24px;font-size:12px;display:flex}.site-footer nav{flex-wrap:wrap;gap:18px;display:flex}.site-footer a{color:var(--accent);text-underline-offset:3px}.preset-library{border-bottom:1px solid var(--line);padding-bottom:14px}.preset-library summary{cursor:pointer;color:var(--ink);font-size:13px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.preset-card{appearance:none;color:var(--ink);background:var(--bg);border:1px solid var(--line);cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;display:flex}.preset-card:hover{border-color:var(--accent);background:#282320}.preset-card img{object-fit:contain;width:76px;height:76px}.preset-card strong{font-size:12px}.preset-card span{color:var(--dim);font-size:10px;line-height:1.4}#preset-confirm{border:1px solid var(--accent);border-radius:8px;padding:10px}body{height:auto;min-height:100vh;padding-bottom:52px;display:block}.analytics-consent{z-index:20;border:1px solid var(--accent);background:var(--panel);border-radius:12px;max-width:620px;padding:18px;position:fixed;bottom:52px;left:16px;right:16px;box-shadow:0 10px 40px #0008}.analytics-consent p{margin:0 0 12px;font-size:13px;line-height:1.5}.analytics-consent a{color:var(--accent)}.analytics-consent>div{flex-wrap:wrap;gap:12px;display:flex}.analytics-settings{z-index:19;background:var(--panel);position:fixed;bottom:10px;left:16px}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;display:flex}header h1{color:var(--ink);letter-spacing:.1em;padding:0;font-size:18px}header p{color:var(--dim);margin-bottom:0;font-size:12px}.file-controls{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.file-controls input{max-width:200px}.workspace{min-height:calc(100vh - 100px);display:flex}#stage{padding:24px}#edit{aspect-ratio:1;width:100%;max-width:640px;height:auto}#right{width:340px}#preview-host{min-height:312px}#thumb-host{min-height:128px}#locked-host{min-height:160px}#right canvas{touch-action:none;max-width:100%;height:auto!important}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}#render-error:not(:empty){color:#ffd38a;background:#332516;padding:16px}input{min-width:0}@media (width<=1100px){aside{width:250px}main{flex-direction:column}#right{border-left:0;border-top:1px solid var(--line);width:100%}}@media (width<=650px){header{flex-direction:column;align-items:start;padding:16px}.workspace{flex-direction:column}aside{border-right:0;width:100%}.steps{flex-direction:row}.steps button{flex:1;gap:4px;padding:12px 6px;font-size:11px}section{padding:12px 16px}.note{margin:0}#stage{padding:16px}#right{align-items:center}.file-controls{width:100%}.file-controls label{max-width:100%}}