:root{font:15px/1.5 ui-sans-serif,system-ui,sans-serif;color:#ecebdf;background:#171d1c;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{max-width:1440px;margin:auto;padding:34px;background:#171d1c;min-height:100vh}.app:fullscreen{overflow:auto;max-width:none}header,.intro,.bar,nav{display:flex;justify-content:space-between;align-items:center;gap:16px}small{letter-spacing:.22em;color:#c7e597;font-size:10px}h1{font:46px/1.12 Georgia,serif;margin:14px 0}h1 span{display:block;font:16px/1.5 ui-sans-serif,system-ui;color:#aebdb5;margin-top:13px}h2{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#c7e597}h3{font-size:15px}p{max-width:850px;color:#b1bdb6}.intro{border-top:1px solid #455048;border-bottom:1px solid #455048;padding:12px 0;margin:24px 0}.intro b{font-size:10px;letter-spacing:.15em;white-space:nowrap}button,.upload{font:inherit;color:inherit;border:1px solid #536151;background:#29352d;border-radius:5px;padding:10px 14px;cursor:pointer}button:hover,.upload:hover{background:#3a4a39}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #d7ff8f;outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed}nav{justify-content:flex-start;margin-bottom:26px;flex-wrap:wrap}.upload input{display:block;max-width:220px;font-size:11px}main{display:grid;grid-template-columns:290px 1fr;gap:28px}aside{padding:20px;background:#202a24;border:1px solid #39473c;border-radius:8px}label{display:block;font-size:12px;color:#beccbf;margin:18px 0}input,select,textarea{background:#111b16;color:#e0e8d9;border:1px solid #52604c;border-radius:4px;padding:9px;width:100%;font:inherit;margin-top:6px}.frame{display:flex;justify-content:space-between;width:100%;font-size:11px;margin:10px 0;gap:10px;text-align:left}.frame span{overflow-wrap:anywhere}.frame.active{border-color:#c7e597}.muted{font-size:12px}.canvas{background:#101813;padding:24px;border:1px solid #39473c;border-radius:8px}.canvas svg{display:block;width:100%;height:370px;image-rendering:pixelated}.bar{font-size:11px;color:#aebcae;margin:12px 0}.mask{display:grid;gap:1px;background:#101813;border:1px solid #465b45;max-height:250px;overflow:auto}.mask button{padding:0;border:0;border-radius:0;min-height:14px;aspect-ratio:1;background:#52604b}.mask button.excluded{background:#df8c70}.pixel{display:flex;gap:10px;align-items:center}.pixel label{flex:1}output{display:block;background:#0e1812;padding:16px;color:#c7e597;font:12px/1.8 monospace;overflow-wrap:anywhere}.project,footer{margin-top:28px;padding:25px;border:1px solid #3f4d40;border-radius:8px}.project textarea{height:220px;font:12px/1.6 monospace;resize:vertical}.project button,footer button{margin:6px 10px 6px 0}footer details{margin-top:20px;font-size:12px}summary{cursor:pointer}[role=alert]{color:#ffb89f}@media(max-width:750px){.app{padding:18px}main{grid-template-columns:1fr}h1{font-size:32px}header,.intro{align-items:flex-start;flex-direction:column}.canvas svg{height:270px}.pixel{flex-wrap:wrap}.pixel label{min-width:60px}.intro b{white-space:normal}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}