:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:var(--page);color-scheme:light;font-size:16px;line-height:1.5;font-weight:400;--paper: #f7f7f2;--white: #ffffff;--ink: #292d27;--stone: #60675d;--line: #d8dcd1;--rust: #b83f16;--rust-dark: #96330f;--leaf: #29653b;--leaf-pale: #eaf2e9;--brick: #9c3027;--brick-pale: #fbede8;--page: var(--paper);--surface: var(--white);--text: var(--ink);--muted: var(--stone);--border: var(--line);--accent: var(--rust);--accent-hover: var(--rust-dark);--on-accent: var(--white);--success: var(--leaf);--success-bg: var(--leaf-pale);--error: var(--brick);--error-bg: var(--brick-pale);--focus: #245ec4;--control-border: #878e81;--disabled-bg: #e6e8e0;--hover-bg: #eeefe8;--text-small: .875rem;--text-body: 1rem;--text-section: 1.25rem;--text-title: 2.25rem;--radius: 8px;--space: 8px;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:0}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;touch-action:manipulation;font-weight:600}button:disabled{cursor:not-allowed}button,input{border-radius:var(--radius)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}a{color:inherit;text-decoration-thickness:from-font;text-underline-offset:3px}a:hover{color:var(--accent-hover)}h1,h2,p{margin:0}h1{font-size:var(--text-title);line-height:1.1;letter-spacing:-.04em;font-weight:700;text-wrap:balance}h2{font-size:var(--text-section);line-height:1.3;font-weight:600;letter-spacing:-.015em}ol{margin:0;padding-inline-start:24px}p+p{margin-block-start:12px}fieldset{margin:0;padding:0;border:0;min-width:0}summary{cursor:pointer;min-height:44px;padding-block:10px}summary:hover{color:var(--accent-hover)}.app{width:min(1168px,100% - 64px);margin-inline:auto;padding-block-end:max(24px,env(safe-area-inset-bottom))}.site-header{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;min-height:88px;padding-block:16px;border-block-end:1px solid var(--border)}.brand{display:inline-flex;gap:12px;align-items:center;font-size:var(--text-section);font-weight:600;letter-spacing:-.025em;text-decoration:none;flex-shrink:0}.brand-mark{display:grid;grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px);gap:3px}.brand-mark i{background:var(--accent)}.brand-mark i:last-child{background:var(--text)}.header-utilities{display:flex;gap:24px;align-items:center}.network-label{color:var(--muted);font-size:var(--text-small)}.network-label span{margin-inline-start:4px}.secondary,.primary{min-height:44px;padding:10px 16px;line-height:1.4}.secondary{border:1px solid var(--control-border);background:transparent}.secondary:hover:not(:disabled){background:var(--hover-bg)}.secondary:disabled{color:var(--muted);border-color:var(--border)}.primary{border:1px solid transparent;color:var(--on-accent);background:var(--accent)}.primary:hover:not(:disabled){background:var(--accent-hover)}.primary:disabled{color:var(--muted);background:var(--disabled-bg)}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-block:32px 24px}.intro p{color:var(--muted);margin-block-start:8px}.connection-state{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--text-small)}.state-dot{width:8px;height:8px;flex-shrink:0;border:1px solid var(--muted);background:var(--page);border-radius:50%}.state-dot.online{background:var(--success);border-color:var(--success)}.workspace{display:grid;grid-template-columns:minmax(0,704px) minmax(280px,1fr);grid-template-rows:min-content 1fr;column-gap:48px;align-items:start}.canvas-area{min-width:0;grid-row:1 / 3}.canvas-topline,.canvas-bottomline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;font-size:var(--text-small)}.canvas-topline{min-height:44px;margin-block-end:8px}.grid-toggle{display:inline-flex;gap:8px;align-items:center;min-height:44px;cursor:pointer}input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);margin:0}.canvas-frame{padding:16px;background:#e8ebe2}.canvas-board{position:relative;display:block;padding:0;border:0;border-radius:0;width:100%;aspect-ratio:1;cursor:crosshair;background:var(--surface);touch-action:pan-y}.canvas-board[aria-disabled=true]{cursor:wait}.canvas-board canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.pixel-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,#292d272e 1px,transparent 1px),linear-gradient(to bottom,#292d272e 1px,transparent 1px);background-size:1.5625% 1.5625%}.pixel-marker{position:absolute;width:1.5625%;height:1.5625%;pointer-events:none;outline:2px solid #fff;box-shadow:0 0 0 4px #20252b;z-index:1}.canvas-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:var(--hover-bg);font-weight:600;color:var(--muted);font-size:var(--text-body);padding:24px}.canvas-placeholder>span{font-weight:400;font-size:var(--text-small)}.canvas-bottomline{color:var(--muted);margin-block-start:12px;min-height:24px}.coordinate-readout,.selection-info,.paint-action,.footer-state,.address{font-variant-numeric:tabular-nums}.coordinate-details{margin-block-start:8px;font-size:var(--text-small)}.coordinate-form{display:flex;gap:12px;align-items:flex-end;margin-block:8px}.coordinate-form label{display:grid;gap:4px;flex:1;min-width:0}.coordinate-form input{width:100%;min-width:0;min-height:44px;padding:8px;background:var(--surface);border:1px solid var(--control-border);font-size:var(--text-body);color:var(--text)}.coordinate-form button{font-size:var(--text-small)}.paint-panel{padding-block-start:8px;min-width:0;scroll-margin-top:16px}.section-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-block-end:20px}.palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.swatch{display:flex;position:relative;justify-content:center;align-items:center;padding:0;border:1px solid var(--control-border);border-radius:4px;aspect-ratio:1;min-width:0;background:var(--swatch)}.swatch.selected{outline:2px solid var(--text);outline-offset:3px}.swatch span:not(:empty){background:var(--surface);border-radius:50%;width:20px;height:20px;display:grid;place-content:center;color:var(--text);font-size:var(--text-small);font-weight:700}.swatch:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.selection-info{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:var(--text-small);padding-block:20px 16px}.selection-info>span:first-child,.paint-event-heading>span{display:inline-flex;gap:8px;align-items:center}.color-sample{width:14px;height:14px;display:inline-block;border:1px solid #20252b45;border-radius:2px;flex-shrink:0}.paint-action,.full-width{width:100%}.paint-action{min-height:48px}.gas-note{text-align:center;color:var(--muted);font-size:var(--text-small);margin-block:10px 0}.pixel-context{margin-block-start:12px}.small{font-size:var(--text-small)}.muted{color:var(--muted)}.notice{padding:12px;margin-block:12px;background:var(--hover-bg);border-radius:var(--radius);font-size:var(--text-small);overflow-wrap:anywhere}.notice p+button{margin-block-start:8px}.error{color:var(--error);background:var(--error-bg)}.success{color:var(--success);background:var(--success-bg)}.cooldown-note{font-size:var(--text-small);color:var(--muted);margin-block-start:12px}.transaction-link{display:inline-block;font-size:var(--text-small);padding-block:10px}.wallet-details{font-size:var(--text-small);margin-block-start:8px}.address-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.address{font-size:var(--text-small);overflow-wrap:anywhere;min-width:0;max-width:100%;text-decoration-color:var(--border)}.copy-button{font-size:var(--text-small);border:0;border-radius:4px;background:var(--hover-bg);padding:4px 8px;min-height:32px}.activity-panel{min-width:0;margin-block-start:32px;border-block-start:1px solid var(--border);padding-block-start:24px}.activity-panel .section-heading{margin-block-end:12px}.empty-feed{text-align:center;padding:24px 8px}.empty-pixel{display:block;width:24px;height:24px;border:2px dashed var(--control-border);margin:0 auto 12px}.activity-list{list-style:none;padding:0}.activity-list li{padding-block:12px;border-block-end:1px solid var(--border)}.paint-event-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:8px;font-size:var(--text-small)}.paint-event-heading a{padding-block:4px}.activity-list .address-group{gap:4px}.activity-list .address{flex-basis:100%}.about{display:grid;grid-template-columns:1fr 2fr;gap:48px;border-block-start:1px solid var(--border);margin-block-start:48px;padding-block:32px}.about p,.about li{max-width:65ch;color:var(--muted)}.about details{margin-block-start:8px}.about li{padding-block:4px}.about details p{margin-block-start:12px}.site-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;border-block-start:1px solid var(--border);padding-block:24px}.site-footer>div{min-width:0}.site-footer .address-group{margin-block-start:8px}.footer-state{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.wallet-dialog{width:min(460px,calc(100% - 32px));max-height:calc(100% - 48px);border:1px solid var(--border);border-radius:16px;padding:24px;color:var(--text);background:var(--page);overflow-wrap:anywhere;overscroll-behavior:contain}.wallet-dialog::backdrop{background:#20252b80}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block-end:20px}.wallet-dialog p{margin-block:16px}.wallet-options{display:grid;gap:12px}.wallet-options button{overflow-wrap:anywhere}.startup{padding-block:64px}.startup p{margin-block:24px}.skip-link{position:absolute;inset-inline-start:16px;top:-120px;padding:12px 16px;color:var(--on-accent);background:var(--accent);z-index:10}.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:1140px){.palette{gap:10px}.workspace{grid-template-columns:minmax(0,672px) minmax(0,1fr)}}@media(max-width:959px){.app{width:min(760px,100% - 40px)}.workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}.canvas-area{grid-row:auto}.paint-panel{margin-block-start:20px}.palette{gap:12px}.swatch{max-height:48px;aspect-ratio:auto;height:44px}.activity-panel{margin-block-start:32px}.activity-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.about{gap:24px}.site-footer{flex-direction:column}}@media(max-width:599px){:root{--text-title: 1.75rem}.app{width:calc(100% - 32px)}.site-header{min-height:64px;padding-block:8px;gap:12px}.brand{font-size:var(--text-body);gap:8px}.brand-mark{grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:2px}.network-label{display:none}.wallet-button{font-size:var(--text-small);padding-inline:10px}.header-utilities{gap:0;min-width:0}.intro{align-items:flex-start;gap:8px;margin-block:16px 4px;flex-direction:column}.intro p{font-size:var(--text-small);margin-block-start:6px}.connection-state{font-size:var(--text-small)}.canvas-topline{margin-block-end:4px;min-height:36px}.grid-toggle{min-height:36px}.canvas-frame{padding:8px}.canvas-bottomline{margin-block-start:8px}.coordinate-details{margin-block-start:0}.coordinate-details summary{min-height:36px;padding-block:7px}.paint-panel{margin-block-start:8px;padding-block-start:0}.section-heading{margin-block-end:12px}.palette{gap:8px}.swatch{height:auto;aspect-ratio:1;max-height:44px}.selection-info{padding-block:8px}.paint-action{min-height:44px}.gas-note{margin-block-start:8px}.activity-list{display:block}.about{display:block;margin-block-start:32px;padding-block:24px}.about h2{margin-block-end:16px}.site-footer{padding-block:24px 8px}.coordinate-form{gap:8px}.coordinate-form button{padding-inline:10px}}@media(prefers-reduced-motion:no-preference){.primary,.secondary{transition:background-color .12s ease-out}}@media(forced-colors:active){.swatch,.color-sample,.canvas-board{forced-color-adjust:none}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline-color:Highlight}}
