:root{font-family:Inter,system-ui,sans-serif;color:#ecdfc8;background:#172429;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #607476;background:#24383d;color:#eadbc0;padding:10px 13px;border-radius:5px}button:hover{background:#405552}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #edaa63;outline-offset:2px}header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;border-bottom:1px solid #4d5c59}h1{font:36px Georgia;margin:5px 0}h1 i{color:#e4ad72}small{font-size:10px;letter-spacing:2px;color:#a9b6a5}nav,.exports{display:flex;flex-wrap:wrap;gap:7px}main{display:grid;grid-template-columns:260px minmax(400px,1fr) 270px;min-height:calc(100vh - 150px)}aside{padding:25px 20px;border-right:1px solid #455450;background:#1b2c30}aside.source{border-right:0;border-left:1px solid #455450}h2{font:28px Georgia}label{display:block;font-size:12px;margin:12px 0;color:#bac4b5}input,select,textarea{display:block;width:100%;background:#132125;color:#eee0c9;border:1px solid #596960;border-radius:4px;padding:8px;margin-top:5px}textarea{resize:vertical;min-height:100px}.source textarea{height:270px;font:11px monospace}p{font-size:12px;line-height:1.6;color:#b0bbaa}aside>button{margin:4px 0;width:100%}.numbers{display:grid;grid-template-columns:1fr 1fr;gap:0 9px}.stage{padding:30px}.headline{display:flex;justify-content:space-between;align-items:center}.headline h2{font:clamp(30px,3vw,48px) Georgia;margin:14px 0 28px}.headline em{color:#e6ac70}.headline>b{font:42px Georgia;color:#dcaa74}.headline b span{display:block;font:10px system-ui;letter-spacing:1px}.art{background:#e7dfce;box-shadow:0 15px 40px #0004}.art>svg{display:block;width:100%;max-height:65vh}.art g[role=button]{cursor:pointer}.art g:focus{outline:2px solid #fa7139}.caption{display:flex;justify-content:space-between;font:10px monospace;gap:12px;padding:13px 0;color:#b5b69b}.footnote{display:flex;gap:22px;border-top:1px solid #657368;margin:17px 0;padding-top:22px;min-height:170px}.footnote>div:first-child{flex:0 0 100px}.footnote svg{width:100px;height:110px;image-rendering:pixelated;background:#ddd2b8}.footnote h3{font:22px Georgia;margin:8px 0}.footnote p{white-space:pre-wrap;overflow-wrap:anywhere}.footnote code{font-size:10px;color:#d6af7f}.pixelgrid{display:grid;gap:0;margin:15px 0;max-height:245px;overflow:auto}.pixelgrid button{padding:0;border:0;aspect-ratio:1;border-radius:0;min-width:2px}.status{color:#f1bb79;background:#283b3b;padding:12px;border-radius:5px}.warning{color:#ffc171}footer{text-align:center;padding:17px;font-size:9px;letter-spacing:3px;color:#94a591}.focus .controls,.focus .source{display:none}.focus main{display:block}.focus .stage{max-width:1200px;margin:auto}.focus .art>svg{height:70vh;max-height:none}@media(max-width:1100px){main{grid-template-columns:230px 1fr}.source{grid-column:1/-1}.source textarea{height:160px}}@media(max-width:680px){header{padding:18px;display:block}nav{margin-top:15px}main{display:flex;flex-direction:column}.stage{order:-1;padding:18px}.art>svg{max-height:none}.headline h2{font-size:32px}.controls,.source{border:0}.pixelgrid{max-width:300px}.caption{font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}button{transition:background .18s ease,box-shadow .18s ease}.footnote{animation:unfold .35s ease both}.art g[role=button]{transition:filter .18s ease}.art g[role=button]:hover,.art g[role=button]:focus{filter:drop-shadow(0 3px 3px #13212580)}@keyframes unfold{0%{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}