:root{font-family:Arial,Helvetica,sans-serif;color:#eae7e2;background:#111;color-scheme:dark;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button,select{background:#222;border:1px solid #393939;color:inherit;border-radius:4px;padding:9px 12px;font-size:12px;cursor:pointer}button:hover,select:hover{border-color:#888}button:disabled{opacity:.3;cursor:default}button.accent{background:#d82e30;border-color:#d82e30;color:white}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,#stage:focus-visible{outline:2px solid #ff5757;outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 3vw;border-bottom:1px solid #333}.brand{font-weight:900;font-size:20px;letter-spacing:-1px}.brand span{font-size:10px;letter-spacing:2px;color:#999;margin-left:14px}nav{display:flex;align-items:center;gap:8px}nav a{font-size:12px;margin-right:12px}main{max-width:1800px;margin:auto;padding:24px 3vw}.workshop{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px}.workspace{min-width:0}.toolbar,.stage-footer,.section-title,.explore-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.toolbar{padding:0 0 12px}.toolbar>div{display:flex;align-items:center;gap:8px}label{font-size:12px;color:#aaa}input[type=checkbox]{accent-color:#ee3939}#stage{background:repeating-conic-gradient(#242424 0% 25%,#1b1b1b 0% 50%) 50%/20px 20px;border:1px solid #333;touch-action:none;overflow:hidden}#stage svg{display:block;width:100%;height:100%;user-select:none}#stage [data-part]{cursor:grab}#stage.dragging [data-part]{cursor:grabbing}.stage-footer{font-size:11px;color:#888;padding-top:12px;min-height:30px}aside{border:1px solid #333;background:#191919;padding:16px;border-radius:6px;align-self:start}.layers{display:flex;gap:5px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid #333}.layers button{font-size:10px;padding:8px}.layers button.active{background:#eee;color:#111;border-color:#eee}.section-title{margin:18px 0}h2{font-size:11px;letter-spacing:1.5px;margin:0;font-weight:600}.control{display:grid;grid-template-columns:55px minmax(0,1fr) 64px;align-items:center;gap:9px;margin:15px 0}.control input[type=range]{width:100%;min-width:0;accent-color:#ee3939}.control input[type=number]{width:64px;background:#111;border:1px solid #444;color:#eee;padding:6px;border-radius:3px;font-size:12px}.colors{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.colors label:not(.check){display:flex;align-items:center;gap:8px}.colors input[type=color]{width:30px;height:29px;padding:2px;border:1px solid #444;background:none;cursor:pointer}.palette-row{display:flex;gap:6px;margin-top:18px}.palette-row button{flex:1}.explore{margin-top:38px;border-top:1px solid #333;padding-top:24px}.explore-heading{margin-bottom:20px}.explore-heading>div{display:flex;gap:8px}.explore-heading h2 span{color:#888;margin-left:10px}#variations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.candidate{padding:0;overflow:hidden;text-align:left;background:#191919;border:1px solid #333}.candidate svg{display:block;width:100%;background:repeating-conic-gradient(#242424 0% 25%,#1b1b1b 0% 50%) 50%/16px 16px}.candidate span{display:block;padding:13px;font-size:11px;color:#aaa}.selection{fill:none;stroke:#fb7777;stroke-width:1.3;stroke-dasharray:6 5;pointer-events:none}.guide{stroke:#888;stroke-opacity:.25;stroke-width:1;pointer-events:none}@media(min-width:1500px){#variations{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:900px){.workshop{grid-template-columns:minmax(0,1fr) 250px}#variations{grid-template-columns:repeat(2,minmax(0,1fr))}.brand span{display:none}}@media(max-width:680px){header{align-items:flex-start;flex-direction:column;padding:18px 16px;gap:14px}nav{width:100%;flex-wrap:wrap;gap:6px}nav a{margin-right:auto}.workshop{grid-template-columns:1fr}main{padding:18px 16px}aside{padding:14px}.layers{padding-bottom:12px}.control{grid-template-columns:55px minmax(0,1fr) 72px}.control input[type=number]{width:72px}.section-title{margin:14px 0}.explore-heading{align-items:flex-start;flex-direction:column;gap:16px}#variations{gap:10px}.candidate span{font-size:10px;padding:10px}.stage-footer{font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.candidate svg{height:auto}

.palette-row{flex-wrap:wrap}.palette-row button{min-width:42%}

.candidate{align-self:start}