:root{--ink:#171916;--paper:#f0eee6;--acid:#c9ff44;--line:#17191633;--font-geist-sans:Arial, Helvetica, sans-serif;--font-geist-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{background:var(--paper);min-width:320px}body{color:var(--ink);background:linear-gradient(#1719160e 1px, transparent 1px), linear-gradient(90deg, #1719160e 1px, transparent 1px), var(--paper);background-size:24px 24px;margin:0;font-family:Arial,Helvetica,sans-serif}button{font:inherit}.site-header,.site-footer{width:min(1500px,100% - 40px);margin:0 auto}.site-header{border-bottom:2px solid var(--ink);justify-content:space-between;align-items:center;gap:24px;padding:18px 0;display:flex}.brand,.site-nav,.site-footer nav{align-items:center;display:flex}.brand{color:var(--ink);gap:10px;font-weight:800;text-decoration:none}.brand img{width:34px;height:34px}.site-nav,.site-footer nav{flex-wrap:wrap;gap:16px}.site-nav a,.site-footer a{color:var(--ink);font-size:.92rem;font-weight:700;text-decoration:none}.site-nav a:hover,.site-footer a:hover{text-decoration:underline}main{width:min(1500px,100% - 40px);margin:0 auto;padding:64px 0}.intro{max-width:770px;margin-bottom:40px}.eyebrow{font:700 .72rem/1 var(--font-geist-mono), monospace;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}h1,h2,p{margin-top:0}h1{font:750 clamp(3.2rem, 8vw, 7rem)/.88 var(--font-geist-sans), sans-serif;letter-spacing:-.07em;margin-bottom:16px}.intro p{max-width:640px;margin-bottom:0;font-size:clamp(1rem,2vw,1.2rem);line-height:1.55}.workspace{border:2px solid var(--ink);background:var(--paper);box-shadow:12px 12px 0 var(--ink);grid-template-columns:minmax(240px,.72fr) minmax(420px,1.55fr) minmax(280px,.9fr);display:grid}.canvas-panel{border-left:2px solid var(--ink);border-right:2px solid var(--ink);padding:24px}.timing-panel{flex-direction:column;gap:25px;min-width:0;padding:28px;display:flex}.timing-panel h2{font:750 2rem/1 var(--font-geist-sans), sans-serif;letter-spacing:-.045em;margin-bottom:12px}.timing-panel p{color:#555850;margin-bottom:0;font-size:.9rem;line-height:1.5}.field{gap:8px;display:grid}.field>span,.timing-result span{font:700 .66rem/1 var(--font-geist-mono), monospace;letter-spacing:.1em;text-transform:uppercase}.field input{border:2px solid var(--ink);width:100%;min-width:0;height:48px;color:var(--ink);font:650 .92rem/1 var(--font-geist-mono), monospace;background:#fff;border-radius:0;padding:0 12px}.field input:focus{outline:3px solid var(--acid);outline-offset:2px}.input-with-unit{position:relative}.input-with-unit input{padding-right:52px}.input-with-unit>span{font:750 .7rem/1 var(--font-geist-mono), monospace;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.timing-result{border-top:2px solid var(--ink);gap:18px;margin-top:auto;padding-top:22px;display:grid}.timing-result div{gap:7px;display:grid}.timing-result strong{overflow-wrap:anywhere;font:650 .9rem/1.45 var(--font-geist-mono), monospace}.canvas-header,.legend{font:650 .78rem/1.2 var(--font-geist-mono), monospace;text-transform:uppercase;justify-content:space-between;gap:20px;display:flex}.canvas-header{margin-bottom:14px}.artwork-heading{border-bottom:2px solid var(--ink);align-items:center;gap:10px;min-height:48px;margin-bottom:12px;display:flex}.artwork-heading h2{overflow-wrap:anywhere;min-width:0;font:750 1.8rem/1.1 var(--font-geist-sans), sans-serif;letter-spacing:-.045em;margin:0}.artwork-title-input{border:2px solid var(--ink);width:100%;min-width:0;color:var(--ink);font:750 1.45rem/1.1 var(--font-geist-sans), sans-serif;background:#fff;padding:5px 8px}.artwork-title-input:focus{outline:3px solid var(--acid);outline-offset:2px}.edit-title-button{flex:none;margin-left:auto}.canvas-tools{gap:7px;margin-left:auto;display:flex}.icon-button{border:2px solid var(--ink);width:36px;height:36px;color:var(--ink);cursor:pointer;background:0 0;place-items:center;padding:7px;display:grid}.icon-button:hover,.icon-button:focus-visible{background:var(--acid)}.icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:100%;height:100%}.coordinate{color:#61645d}.pixel-grid{aspect-ratio:1;border:2px solid var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;background:#777a72;grid-template-columns:repeat(16,1fr);gap:1px;width:100%;padding:1px;display:grid}.pixel{background:var(--ink);cursor:crosshair;border:0;border-radius:0;min-width:0;padding:0}.pixel.is-on,.preview-pixel.is-on{background:#fff}.pixel:focus-visible{z-index:1;outline:3px solid var(--acid);outline-offset:-3px;position:relative}.legend{color:#555850;flex-wrap:wrap;justify-content:flex-start;margin-top:18px;font-size:.68rem}.legend span{align-items:center;gap:7px;display:inline-flex}.swatch{border:1px solid var(--ink);width:12px;height:12px}.swatch.white{background:#fff}.swatch.black{background:var(--ink)}.value-panel{background:var(--acid);flex-direction:column;justify-content:space-between;gap:40px;min-width:0;padding:30px;display:flex}.gallery-panel{z-index:8;border-left:2px solid var(--ink);width:min(360px,100vw - 52px);min-width:0;box-shadow:-10px 10px 0 var(--ink);background:#fff;flex-direction:column;padding:28px 0 16px;transition:transform .18s;display:flex;position:fixed;top:73px;bottom:0;right:0;transform:translate(100%)}.gallery-panel.is-open{transform:translate(0)}.gallery-toggle{border:2px solid var(--ink);width:48px;min-height:112px;color:var(--ink);background:var(--acid);cursor:pointer;border-right:0;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;font-weight:800;display:flex;position:absolute;top:24px;left:-48px}.gallery-toggle-label{writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.08em}.gallery-heading,.gallery-message{padding-left:22px;padding-right:22px}.gallery-heading h2{font:750 1.65rem/1 var(--font-geist-sans), sans-serif;letter-spacing:-.045em;margin-bottom:8px}.gallery-heading p,.empty-gallery{color:#61645d;margin-bottom:0;font-size:.82rem;line-height:1.45}.gallery-list{overscroll-behavior:contain;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px;min-height:0;margin-top:20px;padding:0 22px 10px;display:grid;overflow-y:auto}.gallery-card{border:2px solid var(--ink);background:var(--paper)}.gallery-card-header{border-bottom:1px solid var(--ink);align-items:center;min-height:40px;display:flex}.gallery-title{overflow-wrap:anywhere;min-width:0;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;flex:1;padding:8px;font-size:.78rem;font-weight:750}.gallery-title:hover,.gallery-title:focus-visible{background:var(--acid)}.gallery-load{width:100%;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;padding:10px;display:block}.gallery-load:hover{background:var(--acid)}.gallery-thumbnail{aspect-ratio:1;background:var(--ink);border:1px solid var(--ink);grid-template-columns:repeat(16,1fr);width:100%;display:grid}.gallery-thumbnail i{background:var(--ink)}.gallery-thumbnail i.is-on{background:#fff}.gallery-delete{border:0;border-left:1px solid var(--ink);width:38px;height:38px;color:var(--ink);cursor:pointer;background:0 0;flex:0 0 38px;place-items:center;padding:9px;display:grid}.gallery-delete:hover{color:#fff;background:#9c231d}.gallery-delete svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:100%;height:100%}.gallery-message{min-height:1.8em;font:650 .68rem/1.3 var(--font-geist-mono), monospace;padding-top:8px}output{overflow-wrap:anywhere;max-height:360px;font:700 clamp(1.35rem, 3vw, 2.5rem)/1.25 var(--font-geist-mono), monospace;letter-spacing:-.055em;display:block;overflow-y:auto}.approximate-value{font:650 1rem/1.4 var(--font-geist-mono), monospace;border-top:1px solid #17191659;margin-top:18px;padding-top:16px}.approximate-value span{letter-spacing:.1em;text-transform:uppercase;margin-right:6px;font-size:.68rem}.button{border:2px solid var(--ink);cursor:pointer;min-height:52px;padding:14px 18px;font-weight:750;transition:transform .12s,box-shadow .12s}.button:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.button:active{box-shadow:none;transform:translate(0)}.button.primary{color:#fff;background:var(--ink)}.button.secondary{color:var(--ink);background:0 0}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#171916bf;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal{border:2px solid var(--ink);background:var(--paper);width:min(520px,100%);max-height:calc(100vh - 48px);box-shadow:12px 12px 0 var(--acid);padding:34px;position:relative;overflow-y:auto}.modal h2{font:750 2.5rem/1 var(--font-geist-sans), sans-serif;letter-spacing:-.05em;margin-bottom:22px}.close-button{border:2px solid var(--ink);cursor:pointer;background:0 0;place-items:center;width:38px;height:38px;padding:0 0 4px;font-size:1.8rem;line-height:1;display:grid;position:absolute;top:14px;right:14px}.preview-frame{background:var(--acid);border:2px solid var(--ink);padding:16px}.preview-grid{background:var(--ink);border:0;gap:0;padding:0}.preview-pixel{background:var(--ink)}.preview-value{border-top:2px solid var(--ink);margin-top:22px;padding-top:18px}.preview-value span{font:700 .68rem/1 var(--font-geist-mono), monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;display:block}.preview-value strong{overflow-wrap:anywhere;font:650 1rem/1.45 var(--font-geist-mono), monospace;display:block}.preview-approximate{color:#555850;font:650 .82rem/1.4 var(--font-geist-mono), monospace;margin-top:10px}.site-footer{border-top:2px solid var(--ink);justify-content:space-between;gap:20px;padding:34px 0 40px;display:flex}.site-footer p{margin:0;font-size:.9rem;font-weight:650}@media (width<=1120px){.site-header,.site-footer{width:min(680px,100% - 28px)}main{width:min(680px,100% - 28px);padding:40px 0 52px}.workspace{box-shadow:8px 8px 0 var(--ink);grid-template-columns:1fr}.canvas-panel{border-left:0;border-right:0;border-bottom:2px solid var(--ink)}.gallery-list{grid-template-columns:repeat(2,minmax(0,1fr))}.timing-panel{grid-template-columns:1.25fr 1fr .8fr;align-items:end;display:grid}.timing-result{grid-column:1/-1;grid-template-columns:1fr 1fr;margin-top:0}}@media (width<=680px){.site-header,.site-footer{flex-direction:column;align-items:flex-start}.timing-panel{display:flex}.timing-result{grid-template-columns:1fr}.gallery-panel{top:132px}}@media (width<=480px){.canvas-panel,.timing-panel,.value-panel,.modal{padding:18px}.legend{gap:8px;display:grid}}@media (prefers-reduced-motion:reduce){.button,.gallery-panel{transition:none}}