@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--lime:#d5ff70;--muted:#919ca9;--line:#2b3541}*{box-sizing:border-box}body{margin:0;background:#10151c;color:#edf2ed;font-family:'DM Sans',sans-serif}main{max-width:1440px;margin:auto;padding:0 38px}header{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px}a{color:var(--lime);text-decoration:none}header>span{color:var(--muted)}.heading{display:flex;justify-content:space-between;align-items:center;padding:30px 0}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted);margin:0 0 10px}h1{font:700 clamp(32px,5vw,64px)/1 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:0}h1 span{color:var(--lime)}h1 i{font-style:normal;color:var(--lime);margin-left:20px}.heading>p{font-size:13px;color:var(--muted);line-height:1.8}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px}.simulation,aside{background:#171f28;border:1px solid var(--line);border-radius:12px;overflow:hidden}.canvas-bar{display:flex;justify-content:space-between;padding:15px 18px;font:10px monospace;letter-spacing:1px;color:#b5c1cb}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:7px}.canvas-wrap{position:relative;background:#090e15;aspect-ratio:8/5}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:crosshair}#hint{pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#788696;font-size:14px}#hint small{font-size:11px;margin-top:12px;color:#526070}.controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:12px}button{font:500 12px 'DM Sans',sans-serif;color:#c6d1da;background:#222e3b;border:1px solid #354352;border-radius:6px;padding:10px 12px;cursor:pointer;min-height:40px}button:hover{background:#334455}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}button.active,button[aria-pressed=true]{border-color:var(--lime);background:#2c3926;color:var(--lime)}#pause{background:var(--lime);color:#182014;border-color:var(--lime)}.controls label{display:flex;align-items:center;gap:8px;font-size:11px;margin:0 auto;color:#a6b3bf}input{width:90px;accent-color:var(--lime)}output{width:15px}aside{padding:18px}.palette-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}h2{font:500 18px 'Space Grotesk',sans-serif;margin:0}.palette-heading>span{font:8px monospace;color:var(--muted)}#palette{display:grid;grid-template-columns:1fr 1fr;gap:7px}.element{text-align:left;padding:9px;font-size:11px;display:flex;gap:9px;align-items:center}.swatch{width:10px;height:10px;flex-shrink:0;border-radius:2px;background:var(--color);box-shadow:0 0 12px color-mix(in srgb,var(--color),transparent 75%)}.selected{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}.selected>span{font:10px monospace;color:var(--lime);letter-spacing:1px}.selected p{color:var(--muted);font-size:12px;line-height:1.7;margin-bottom:0}.bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 0}.actions{display:flex;flex-wrap:wrap;gap:7px}.bottom p{font-size:11px;color:var(--muted)}details{border:1px solid var(--line);border-radius:8px;padding:15px 18px}summary{cursor:pointer;font-size:12px;color:#b6c2ce}.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.notes p{font-size:12px;line-height:1.8;color:var(--muted)}.notes b{display:block;color:#d2ddd8;font-weight:500}footer{display:flex;justify-content:space-between;color:#69798a;font:9px monospace;letter-spacing:1px;padding:24px 0}@media(max-width:850px){main{padding:0 16px}.workbench{grid-template-columns:1fr}.heading>p{display:none}.heading{padding:24px 0}h1{font-size:44px}aside{padding:14px}#palette{grid-template-columns:repeat(7,1fr)}.element{flex-direction:column;gap:6px;padding:9px 3px;font-size:10px}.selected{margin-top:12px;padding-top:10px;display:flex;gap:12px;align-items:center}.selected p{margin:0;font-size:11px}.selected>span{min-width:65px}.palette-heading{margin-bottom:12px}.bottom{display:block}.notes{grid-template-columns:1fr 1fr}.controls label{margin-left:auto}header>span{display:none}}@media(max-width:430px){.controls{gap:5px;padding:8px}.controls button{font-size:11px;padding:8px}.controls label{gap:4px}input{width:56px}.canvas-bar{font-size:8px}.actions button{font-size:11px;padding:9px}.notes{grid-template-columns:1fr}#hint{font-size:11px}}
#categories{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}#categories button{font-size:10px;min-height:30px;padding:6px 8px}#palette{max-height:380px;overflow-y:auto;align-content:start;padding:2px}.element[hidden]{display:none}.workbench{align-items:start}.simulation{align-self:start}.element{min-width:0}.palette-heading>span{font-size:8px}@media(max-width:850px){#palette{grid-template-columns:repeat(5,minmax(0,1fr));max-height:230px}.element{font-size:10px;overflow-wrap:anywhere}.selected{min-height:55px}}