:root{color-scheme:dark;--bg:#101214;--panel:#171a1d;--elevated:#1d2125;--border:#2d3237;--muted:#929ba4;--text:#ebedef;--accent:#ffad62;--accent-strong:#ffc086;--mono:Consolas,"Liberation Mono",Menlo,monospace;--sans:Inter,"Segoe UI",Arial,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a,select,summary{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.4}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
input,select{min-width:0}
button{color:inherit}
h1,h2,h3,p{margin:0}
fieldset{padding:0;margin:0;border:0;min-width:0}
[hidden]{display:none!important}
.shell{max-width:1440px;width:calc(100% - 96px);margin-inline:auto}
.site-header{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.brand{display:inline-flex;align-items:center;gap:12px;font-size:24px;letter-spacing:-1.1px;font-weight:700}
.brand-light{font-weight:400}
.brand-dot{color:var(--accent)}
.brand-mark{display:grid;place-items:center;position:relative;width:27px;height:27px;border:2px solid var(--accent)}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--bg)}
.brand-mark:before{width:13px;height:31px}
.brand-mark:after{height:13px;width:31px}
.brand-mark i{z-index:1;background:var(--accent);width:7px;height:7px}
.site-header nav{display:flex;align-items:center;gap:32px;font-size:12px}
.site-header nav>a{color:#c7cdd2}
.site-header nav>a span{margin-left:8px;color:var(--muted)}
.local-badge{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}
.local-badge>span,.live-dot{width:6px;height:6px;background:#9db8a1;border-radius:50%;display:inline-block}
.intro{display:flex;justify-content:space-between;align-items:center;padding:49px 0 40px;gap:32px}
.eyebrow{font:10px/1.5 var(--mono);letter-spacing:1.8px;color:var(--muted);display:flex;align-items:center;gap:10px}
.mini-cross{font-size:18px;color:var(--accent);line-height:1}
.tag{font:9px/1 var(--mono);letter-spacing:.6px;padding:5px 6px;background:#25292d;color:#c0c6cc;white-space:nowrap;border-radius:3px}
.eyebrow .tag{margin-left:3px;color:var(--accent);background:#2b241e}
h1{font-size:clamp(31px,3.15vw,47px);line-height:1.18;letter-spacing:-1.8px;font-weight:550;margin:14px 0 13px}
h1>span{color:var(--accent)}
.intro-copy{font-size:14px;color:#a1a9b0}
.intro-side{border-left:1px solid var(--border);padding-left:24px;min-width:200px}
.intro-side p{font-size:16px;color:#ccd1d5;line-height:1.45;margin:8px 0 12px}
.micro-label{font:9px/1.4 var(--mono);letter-spacing:1.1px;color:var(--muted)}
.tiny{font:9px/1.5 var(--mono);letter-spacing:.5px;color:var(--muted)}
.editor{border:1px solid #353a3f;border-radius:10px;background:var(--panel);overflow:hidden;box-shadow:0 12px 40px #0002}
.editor-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--border)}
.workspace-label{display:flex;align-items:center;gap:11px;font:10px var(--mono);min-width:0;color:var(--muted)}
.workspace-label strong{color:#e0e4e7;font-weight:400;overflow:hidden;text-overflow:ellipsis;max-width:280px;white-space:nowrap}
.live-dot{background:var(--accent);width:5px;height:5px}
.divider{color:#525a61;margin-inline:3px}
.file-actions{display:flex;gap:8px;flex-shrink:0}
.button{border:1px solid transparent;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:9px 12px;font-size:11px;font-weight:550;line-height:1.4;transition:background .15s,border-color .15s}
.button.primary{background:var(--accent);color:#211a13;border-color:var(--accent)}
.button.primary:hover:enabled{background:var(--accent-strong);border-color:var(--accent-strong)}
.button-file{font:9px var(--mono);padding-left:9px;border-left:1px solid #72502d}
.button.quiet{background:transparent;color:#b5bdc5}
.button.quiet:hover:enabled{background:#252a2f}
.button.secondary{background:#202429;border-color:#373d43;color:#cfd5db}
.button.secondary:hover:enabled{background:#2c3238;border-color:#535d65}
.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 304px}
.viewer{min-width:0;border-right:1px solid var(--border)}
.viewer-toolbar{padding:11px 17px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--border);height:55px;background:#191d20}
.tool-switch{display:flex;gap:2px;border:1px solid var(--border);padding:3px;border-radius:5px}
.tool-switch button{background:transparent;border:0;color:var(--muted);font-size:10px;padding:5px 9px;border-radius:3px;white-space:nowrap}
.tool-switch button span{font-size:13px;margin-right:5px}
.tool-switch button[aria-pressed=true]{background:#33312d;color:var(--accent)}
.zoom-tools{display:flex;align-items:center;gap:4px}
.icon-button{border:1px solid transparent;background:transparent;color:#b5bdc5;display:grid;place-items:center;width:28px;height:28px;border-radius:4px;font-size:17px;line-height:1}
.icon-button:hover{background:#2b3035}
.icon-button[aria-pressed=true]{color:var(--accent);background:#332b23}
.zoom-tools select{background:transparent;color:#cbd1d6;border:0;padding:4px 1px;font:10px var(--mono);width:65px;cursor:pointer}
.zoom-tools option{background:var(--panel)}
.compact{padding:5px 7px!important}
.toolbar-divider{height:17px;width:1px;background:var(--border);margin:0 5px}
.viewport{height:504px;overflow:auto;position:relative;background-color:#111416;background-image:radial-gradient(#383e44 0.7px,transparent 0.7px);background-size:16px 16px;overscroll-behavior:contain;scrollbar-color:#454d55 #171b1f;scrollbar-width:thin}
.stage-wrap{min-width:100%;min-height:100%;width:max-content;display:flex;justify-content:center;align-items:center;padding:45px}
.surface{position:relative;flex-shrink:0;background:#000;image-rendering:pixelated;cursor:crosshair;touch-action:none;isolation:isolate;box-shadow:0 0 0 1px #40474d}
.surface.checker{background-color:#252a2e;background-image:conic-gradient(#363c42 25%,transparent 0 50%,#363c42 0 75%,transparent 0);background-size:16px 16px}
.surface.moving{cursor:move}
.surface canvas{display:block;position:relative;z-index:0;width:100%;height:100%;image-rendering:pixelated}
.pixel-grid{position:absolute;inset:0;pointer-events:none;z-index:1;background-image:linear-gradient(to right,#ffffff24 1px,transparent 1px),linear-gradient(to bottom,#ffffff24 1px,transparent 1px);display:none}
.selection{position:absolute;z-index:2;border:1px solid var(--accent);background:#ffad6214;box-shadow:0 0 0 1px #0009;pointer-events:none}
.selection.invalid{border-color:#ff7969;background:#ff796924}
.selection-label{position:absolute;bottom:calc(100% + 7px);left:-1px;white-space:nowrap;background:var(--accent);color:#231b14;padding:3px 6px;border-radius:3px;font:9px/1.4 var(--mono);letter-spacing:.2px}
.selection.label-below .selection-label{top:calc(100% + 7px);bottom:auto}
.selection i{position:absolute;display:block;width:8px;height:8px;border:1px solid #241b13;background:var(--accent);pointer-events:auto;touch-action:none}
.selection i:before{content:"";position:absolute;inset:-5px}
.selection [data-handle=nw]{left:-4px;top:-4px;cursor:nwse-resize}
.selection [data-handle=n]{left:calc(50% - 4px);top:-4px;cursor:ns-resize}
.selection [data-handle=ne]{right:-4px;top:-4px;cursor:nesw-resize}
.selection [data-handle=e]{right:-4px;top:calc(50% - 4px);cursor:ew-resize}
.selection [data-handle=se]{right:-4px;bottom:-4px;cursor:nwse-resize}
.selection [data-handle=s]{left:calc(50% - 4px);bottom:-4px;cursor:ns-resize}
.selection [data-handle=sw]{left:-4px;bottom:-4px;cursor:nesw-resize}
.selection [data-handle=w]{left:-4px;top:calc(50% - 4px);cursor:ew-resize}
.ruler{position:absolute;pointer-events:none;color:#8c969f;font:8px var(--mono);background:#171b1ef0}
.ruler-x{top:-23px;left:0;width:100%;height:18px;border-bottom:1px solid #454d55}
.ruler-y{top:0;left:-29px;width:24px;height:100%;border-right:1px solid #454d55}
.ruler span{position:absolute}
.ruler-x span{bottom:3px;transform:translateX(-50%)}
.ruler-x span:after{content:"";position:absolute;left:50%;bottom:-4px;height:3px;width:1px;background:#66717b}
.ruler-y span{right:4px;transform:translateY(-50%)}
.viewer-status{display:flex;justify-content:space-between;gap:10px;padding:9px 17px;border-top:1px solid var(--border);font:9px var(--mono);color:var(--muted);background:#181c1f}
.viewer-status #cursor-info{color:var(--accent)}
.frame-row{padding:12px 17px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);font:9px var(--mono);color:var(--muted)}
.frame-row>select{padding:5px 22px 5px 8px;background:#20252a;border:1px solid #343b42;color:#d6dce1;border-radius:4px;max-width:190px;font-size:10px}
.frame-row>label:first-child{font-size:9px;letter-spacing:.7px}
.raw-option{margin-left:auto;display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:10px}
.raw-option input{accent-color:var(--accent);width:12px;height:12px}
.viewer-hint{padding:12px 17px;border-top:1px solid var(--border);font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.viewer-hint>span:first-child{color:var(--accent);font-size:17px;margin-right:2px}
.keycap{font:9px var(--mono);border:1px solid #363d44;border-radius:3px;padding:2px 4px;white-space:nowrap}
.viewer-hint #undo{margin-left:auto}
.text-button{background:transparent;border:0;padding:0;color:var(--accent);font-size:10px;line-height:1.5}
.text-button:hover:enabled{text-decoration:underline}
.viewer-hint .text-button{color:#afb7bf;margin-left:5px}
.inspector{padding:22px 22px 20px;min-width:0;background:#1b1f22}
.panel-heading{display:flex;justify-content:space-between;align-items:center}
.panel-heading h2{font-size:14px;font-weight:550;letter-spacing:-.3px}
.panel-heading .micro-label{font-size:8px}
.panel-description{font-size:10px;color:var(--muted);margin:5px 0 19px}
.coordinate-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.coordinate-grid label{display:block;padding:8px 11px;border:1px solid #383f46;border-radius:5px;background:#161a1d}
.coordinate-grid label>span{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--accent)}
.coordinate-grid small{font:9px var(--sans);color:var(--muted)}
.coordinate-grid input{font:24px/1.4 var(--mono);color:var(--text);padding:5px 0 0;background:transparent;border:0;outline:0;width:100%;appearance:textfield;-moz-appearance:textfield}
.coordinate-grid input::-webkit-inner-spin-button{appearance:none}
.coordinate-grid label:focus-within{border-color:var(--accent);outline:1px solid var(--accent)}
.coordinate-grid input:focus-visible{outline:0}
.selection-summary{display:flex;justify-content:space-between;color:#b0b8bf;font:9px var(--mono);margin:11px 0 17px;gap:8px}
.coordinate-output{padding:11px 12px;border:1px dashed #45423b;border-radius:4px;background:#25231f;overflow:auto}
.coordinate-output .micro-label{font-size:8px;color:#b4a08b}
.coordinate-output output{display:block;font:16px/1.6 var(--mono);color:var(--accent);white-space:pre;margin-top:3px;letter-spacing:.5px}
.full{width:100%}
.copy-button{margin-top:9px;font-size:11px;padding:11px 10px;justify-content:flex-start}
.copy-icon{margin-right:2px;font-size:14px}
.copy-button kbd{font:8px var(--mono);border:1px solid #a16c3a;padding:2px 3px;border-radius:3px;margin-left:auto;white-space:nowrap}
.crop-heading{display:flex;justify-content:space-between;align-items:center;margin:22px 0 9px}
.crop-heading .text-button{font-size:9px;color:#b1b9c1}
.crop-preview{display:flex;align-items:center;justify-content:center;min-height:77px;max-height:130px;padding:12px;border:1px solid #343b42;background-color:#111416;background-image:conic-gradient(#1a1e22 25%,transparent 0 50%,#1a1e22 0 75%,transparent 0);background-size:12px 12px;border-radius:4px;overflow:hidden;isolation:isolate}
.crop-preview canvas{image-rendering:pixelated;max-width:100%;max-height:104px;object-fit:contain}
.crop-preview>span{font-size:10px;color:#828c95}
.validation{background:#392922;border:1px solid #785344;border-radius:4px;padding:9px;margin:0 0 12px;font-size:10px;color:#ffcbad}
.validation .text-button{display:block;text-align:left;margin-top:6px;font-size:10px}
.guide{display:grid;grid-template-columns:.95fr 1fr;gap:80px;padding:68px 0 51px}
.guide-title .eyebrow{font-size:9px;letter-spacing:1.5px}
.guide-title h2{font-size:30px;line-height:1.18;letter-spacing:-1px;font-weight:500;margin:15px 0}
.guide-title>p:last-child{font-size:12px;color:var(--muted)}
.guide-steps{margin:0;padding:0;list-style:none}
.guide-steps li{display:flex;gap:21px;padding:0 0 23px}
.guide-steps li+li{border-top:1px solid var(--border);padding-top:21px}
.guide-steps li:last-child{padding-bottom:0}
.step-number{font:10px var(--mono);color:var(--accent);padding-top:4px}
.guide-steps h3{font-weight:500;font-size:13px}
.guide-steps p{color:var(--muted);font-size:11px;line-height:1.85;max-width:460px;margin-top:6px}
code{font-family:var(--mono);font-size:.95em;color:#c5cbd0}
.faq{border-top:1px solid var(--border);padding:5px 0 26px}
.faq details{border-bottom:1px solid var(--border);padding:16px 0}
.faq summary{list-style:none;display:flex;justify-content:space-between;cursor:pointer;font-size:12px;color:#c8cfd5}
.faq summary:after{content:"+";color:var(--accent);font:16px var(--mono)}
.faq details[open] summary:after{content:"−"}
.faq details>p{font-size:12px;color:var(--muted);line-height:1.8;max-width:850px;margin-top:14px}
.site-footer{display:flex;align-items:center;gap:25px;min-height:95px;padding-bottom:15px}
.footer-brand{font-size:16px;gap:0;letter-spacing:-.7px}
.site-footer p{font-size:10px;color:var(--muted)}
.site-footer>span{font-size:9px;color:#838e98;margin-left:auto}
.empty-state{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100%;padding:55px 30px;text-align:center}
.empty-icon{font:60px var(--mono);color:var(--accent);margin-bottom:18px}
.empty-state h2{font-size:20px;font-weight:500;letter-spacing:-.5px}
.empty-state p{font-size:12px;line-height:1.8;color:var(--muted);margin:13px 0}
.empty-state .button{color:var(--accent);margin-top:6px}
.drop-overlay{position:absolute;inset:10px;z-index:10;background:#1b211ff5;border:2px dashed var(--accent);border-radius:5px;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:20px;pointer-events:none}
.drop-overlay>span{font-size:48px}
.toast{position:fixed;bottom:27px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#e9ede9;color:#18231b;border:1px solid #a8c2af;border-radius:6px;box-shadow:0 7px 30px #0006;font-size:12px;z-index:100;max-width:90vw;text-align:center}
.error-banner{position:fixed;bottom:23px;left:50%;transform:translateX(-50%);max-width:min(600px,90vw);display:flex;gap:20px;align-items:center;padding:16px 18px;background:#472c28;border:1px solid #a45c4f;border-radius:6px;color:#ffe1d8;font-size:12px;z-index:101;box-shadow:0 7px 30px #0006}
.error-banner button{color:inherit;border:0;background:transparent;font-size:22px;flex-shrink:0}
.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}
.skip-link{position:absolute;left:24px;top:-100px;background:var(--accent);color:#211a13;padding:12px;z-index:200}
.skip-link:focus{top:15px}
.noscript{position:fixed;bottom:0;width:100%;background:#ffe2b8;color:#241a0f;text-align:center;padding:20px}

@media(min-width:1500px){.viewport{height:560px}
}
@media(max-width:1100px){.shell{width:calc(100% - 48px)}
.editor-layout{grid-template-columns:minmax(0,1fr) 282px}
.inspector{padding:20px 17px}
.intro-side{min-width:165px}
.viewport{height:480px}
.viewer-toolbar{padding:11px}
.tool-switch button{padding:5px 6px}
.zoom-tools{gap:1px}
.guide{gap:50px}
.viewer-status #pixel-info{display:none}
.frame-row{gap:8px;flex-wrap:wrap}
.frame-row>select{max-width:165px}
.viewer-hint{font-size:9px}
.workspace-label{gap:7px}
.workspace-label strong{max-width:180px}
}

@media(max-width:800px){.intro-side{display:none}
.site-header{height:82px}
.site-header nav{gap:20px}
.local-badge{font-size:9px}
.intro{padding:32px 0}
.editor-layout{grid-template-columns:minmax(0,1fr) 263px}
.viewer-toolbar{height:auto;min-height:55px;flex-wrap:wrap;gap:9px}
.zoom-tools{margin-left:auto}
.viewport{height:430px}
.workspace-label>span:nth-child(2),.workspace-label>.divider{display:none}
.panel-description{font-size:9px}
.guide{gap:30px;grid-template-columns:.8fr 1fr}
.guide-title h2{font-size:25px}
.site-footer{flex-wrap:wrap;gap:10px 20px;padding-top:15px}
.site-footer>span{width:100%;margin-left:0}
}

@media(max-width:650px){.shell{width:calc(100% - 32px)}
.site-header{height:72px}
.brand{font-size:21px}
.brand-mark{width:23px;height:23px}
.site-header nav>a{font-size:10px}
.site-header nav{gap:0}
.local-badge{display:none}
.intro{padding:29px 0 27px}
.eyebrow{font-size:8px;letter-spacing:1.2px}
h1{font-size:32px;letter-spacing:-1.2px;max-width:350px;line-height:1.17;margin:12px 0}
.intro-copy{font-size:11px;max-width:275px;line-height:1.8}
.editor{border-radius:7px}
.editor-topbar{padding:12px;gap:7px;flex-wrap:wrap}
.workspace-label strong{max-width:170px}
.file-actions{gap:3px;margin-left:auto}
.file-actions .button{font-size:10px;padding:7px 9px}
.file-actions .button-file{display:none}
.file-actions #example-button{font-size:9px}
.editor-layout{display:block}
.viewer{border-right:0}
.viewer-toolbar{padding:9px 11px;flex-wrap:nowrap;gap:3px}
.tool-switch button{font-size:9px;padding:5px 6px}
.tool-switch button span{margin-right:3px}
.zoom-tools .icon-button{width:23px;height:27px;font-size:16px}
.zoom-tools select{width:55px;font-size:9px}
.toolbar-divider{margin:0 2px}
.zoom-tools .compact{font-size:10px}
.viewport{height:390px}
.viewer-status{padding:9px 12px;font-size:8px}
.frame-row{padding:11px 12px;font-size:8px;gap:8px}
.frame-row>select{max-width:145px;font-size:9px}
.raw-option{font-size:9px}
.viewer-hint{padding:10px 12px;gap:4px;line-height:1.8}
.inspector{padding:22px 18px;border-top:1px solid var(--border)}
.coordinate-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.coordinate-grid label{padding:7px 8px}
.coordinate-grid input{font-size:22px}
.coordinate-grid small{font-size:8px}
.panel-description{font-size:10px;margin-bottom:15px}
.panel-heading .micro-label{font-size:9px}
.selection-summary{margin-bottom:14px}
.coordinate-output output{font-size:19px}
.coordinate-output{padding:9px 12px}
.copy-button{font-size:12px;padding:12px}
.crop-preview{min-height:85px}
.guide{display:block;padding:44px 0 34px}
.guide-title h2{font-size:28px}
.guide-title>p:last-child br{display:none}
.guide-title>p:last-child{font-size:11px}
.guide-steps{margin-top:30px}
.guide-steps p{font-size:11px}
.faq summary{font-size:11px;gap:20px}
.faq details>p{font-size:11px}
.site-footer{padding:13px 0 28px;min-height:90px}
.site-footer p{font-size:9px}
.site-footer>span{font-size:8px}
.selection-label{font-size:8px}
.ruler{font-size:8px}
.error-banner{width:90vw}
.stage-wrap{padding:38px}
.empty-state{padding:40px 20px}
.empty-state h2{font-size:18px}
.empty-state p{font-size:11px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}


.paste-details{margin-top:22px;padding-top:17px;border-top:1px solid var(--border)}
.paste-details summary{display:flex;align-items:center;justify-content:space-between;list-style:none;font-size:10px;color:#bdc6ce;cursor:pointer}
.paste-details summary>span{color:var(--accent);font:14px var(--mono)}
.paste-details[open] summary>span{transform:rotate(45deg)}
.paste-details label{display:block;font-size:9px;color:var(--muted);margin:13px 0 6px}
.paste-row{display:flex;gap:6px}
.paste-row input{width:100%;background:#14181b;border:1px solid #3c454e;border-radius:4px;padding:8px;font:10px var(--mono);color:var(--text)}
.paste-row button{font-size:10px;padding:7px 9px}
.paste-details p{font-size:9px;color:var(--muted);line-height:1.7;margin-top:8px}