@font-face{font-family:FFFORWA;src:url('../font/FFFFORWA.ttf') format('truetype');font-display:swap}
@font-face{font-family:agsfnt0;src:url('../font/agsfnt0.ttf') format('truetype');font-display:swap}
:root{font-family:agsfnt0,'Courier New',monospace;color:#111;background:#0000aa}
*{box-sizing:border-box}
html{min-height:100%}
body{max-width:1600px;min-height:100vh;margin:0 auto;border-inline:3px solid #000;background:#55ffff;box-shadow:0 0 0 3px #000}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #ff5555;outline-offset:2px}
.topbar{min-height:92px;padding:17px 26px;display:flex;align-items:center;gap:20px;border-bottom:3px solid #000;background:#55ffff;background-image:repeating-linear-gradient(0deg,transparent 0 5px,#00aaaa10 5px 6px)}
.site-link{font:12px FFFORWA,monospace;color:#ff5555;text-decoration:none;white-space:nowrap;text-shadow:2px 2px #aa0000}
.site-link span{color:#55ff55;text-shadow:2px 2px #00aaaa}
.site-link:hover{text-decoration:underline}
.header-divider{height:36px;width:2px;background:#000}
.brand{display:flex;align-items:center;font:clamp(21px,2.5vw,31px) FFFORWA,monospace;letter-spacing:.09em;color:#050519;text-shadow:3px 3px #00aaaa;white-space:nowrap}
.brand-mark{width:35px;height:35px;margin-right:10px;background:#ff5555;border:2px solid #000;box-shadow:3px 3px #000;color:#fff;display:grid;place-items:center;font:27px Arial,sans-serif;text-shadow:none}
.accent{color:#ff5555;text-shadow:2px 2px #aa0000}
.top-note,.local-badge,.eyebrow,.section-number,.count,.text-button,.stage-bottom,.compare-label,.dimensions,.sidebar-foot,.gallery-heading>span{font-family:FFFORWA,'Courier New',monospace;letter-spacing:.08em}
.top-note{font-size:10px;color:#134e56}
.local-badge{margin-left:auto;border:2px solid #000;background:#000;color:#55ff55;padding:9px 10px;white-space:nowrap;font-size:9px;box-shadow:3px 3px #00aaaa}
.workspace{display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr);gap:18px;padding:18px;min-height:calc(100vh - 92px)}
.sidebar{min-width:0;max-height:calc(100vh - 128px);overflow:auto;padding:0 12px 10px 0;scrollbar-color:#ff5555 #55ffff}
.intro{padding:8px 7px 16px}
.eyebrow{color:#aa0000;font-size:10px}
.intro h1{font:clamp(24px,2.8vw,35px) FFFORWA,monospace;line-height:1.25;letter-spacing:.02em;margin:10px 0 8px;text-shadow:2px 2px #fff}
.intro em{font-style:normal;color:#ff5555;text-shadow:2px 2px #aa0000}
.intro p{font-size:14px;line-height:1.35;margin:0;color:#164247}
.panel{margin-bottom:15px;padding:17px;background:#fff;border:2px solid #ff5555;outline:1px solid #000;box-shadow:4px 7px 0 #000}
.section-heading{display:flex;align-items:center;gap:10px;margin-bottom:15px;padding-bottom:11px;border-bottom:2px solid #000}
.section-number{font-size:12px;color:#aa0000}
.section-heading h2{font:13px FFFORWA,monospace;margin:0;line-height:1.4}
.count,.text-button{margin-left:auto;color:#aa0000;font-size:10px}
.dropzone{min-height:145px;border:2px dashed #000;background:#e8ffff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px;text-align:center;transition:background .15s,transform .15s;outline:none}
.dropzone:hover,.dropzone.dragging,.dropzone:focus-visible{background:#caffcb;transform:translate(-2px,-2px);box-shadow:3px 3px #000}
.upload-icon{font:34px Arial,sans-serif;line-height:1;color:#aa0000}
.dropzone strong{font:12px FFFORWA,monospace}
.dropzone span{font-size:13px}
.dropzone u{color:#aa0000;text-underline-offset:3px}
.dropzone small{font-size:11px;color:#34555c}
.file-list{display:flex;flex-direction:column;gap:5px;margin-top:10px;max-height:140px;overflow:auto}
.file-row{display:flex;align-items:center;gap:8px;border:1px solid #000;background:#e3e3e3;color:#111;padding:6px 8px;font-size:12px}
.file-row.active{background:#55ffff}
.file-row .file-name{border:0;background:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left;cursor:pointer}
.file-row .remove{border:0;background:none;color:#aa0000;font:20px Arial,sans-serif;line-height:1}
.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.preset-grid button,.secondary-button{border:2px solid #000;outline:1px solid #000;background:#fff;color:#000;box-shadow:3px 3px #000;font:10px FFFORWA,monospace;line-height:1.4;text-align:left;padding:10px;transition:transform .12s,box-shadow .12s}
.preset-grid button:hover,.secondary-button:not(:disabled):hover{transform:translateY(-2px);box-shadow:4px 5px #000}
.preset-grid button.active{background:#ff5555;color:#fff;box-shadow:inset 0 0 0 2px #aa0000,3px 3px #000}
.preset-grid button:last-child:nth-child(odd){grid-column:span 2}
.text-button{border:0;background:none;padding:4px;cursor:pointer}
.text-button:hover{color:#ff5555;text-decoration:underline}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-bottom:16px}
label{display:block;font-size:12px;line-height:1.3;color:#161616}
label output{float:right;color:#aa0000;font-family:FFFORWA,monospace;font-size:10px}
select,.number-field input{display:block;width:100%;margin-top:7px;padding:9px 7px;border:2px solid #000;border-radius:0;background:#050819;color:#79ff9a;font:12px agsfnt0,monospace;outline:none}
select:focus,.number-field input:focus{border-color:#ff5555}
input[type=range]{display:block;width:100%;margin:12px 0 0;accent-color:#ff5555;cursor:pointer}
.palette-swatches{display:flex;min-height:26px;margin:-2px 0 19px;border:2px solid #000;background:#000;overflow:hidden}
.palette-swatches span{flex:1;min-width:1px}
.palette-swatches .no-palette{background:#05141a;color:#79ff9a;text-align:center;font-size:11px;line-height:23px}
details{border-top:2px solid #000;padding-top:14px}
summary{list-style:none;cursor:pointer;font:11px FFFORWA,monospace;line-height:1.5;margin-bottom:15px}
summary::-webkit-details-marker{display:none}
summary span{float:right;color:#aa0000}
details:not([open]) summary{margin-bottom:0}
.number-field span{display:block;color:#46636a;font-size:11px;margin-top:4px}
.process-button{width:calc(100% - 7px);min-height:48px;border:2px solid #000;outline:1px solid #000;background:#ff5555;color:#fff;box-shadow:4px 6px #000;font:12px FFFORWA,monospace;text-align:left;padding:12px 14px;margin:3px 0 0}
.process-button:not(:disabled):hover{background:#df3434;transform:translate(-1px,-1px);box-shadow:5px 7px #000}
.process-button span{float:right;font:20px Arial,sans-serif;line-height:14px}
.sidebar-foot{font-size:9px;line-height:1.5;color:#07535a;padding:7px 6px}
.stage{min-width:0;background:#fff;border:2px solid #ff5555;outline:1px solid #000;box-shadow:5px 10px 0 #000;padding:22px 22px 28px;align-self:start}
.stage-toolbar,.stage-actions,.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.stage-toolbar h2,.gallery-heading h2{font:clamp(16px,2vw,23px) FFFORWA,monospace;line-height:1.3;margin:6px 0 0;overflow-wrap:anywhere}
.stage-actions{justify-content:flex-end}
.dimensions{font-size:10px;color:#aa0000;white-space:nowrap}
.secondary-button{white-space:nowrap;text-decoration:none}
.preview-area{height:min(63vh,710px);min-height:390px;margin-top:22px;border:3px solid #000;position:relative;overflow:hidden;background-color:#051017;background-image:linear-gradient(45deg,#10242b 25%,transparent 25%),linear-gradient(-45deg,#10242b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#10242b 75%),linear-gradient(-45deg,transparent 75%,#10242b 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;box-shadow:3px 3px #00aaaa}
.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;background:#061117;color:#d8fff2}
.empty-state:before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,#0002 0 2px,transparent 2px 5px)}
.empty-art{font:83px Arial,sans-serif;color:#55ff55;text-shadow:4px 4px #00aaaa;line-height:1;transform:rotate(-9deg);margin-bottom:17px}
.empty-state h3{font:18px FFFORWA,monospace;line-height:1.45;margin:0 0 8px}
.empty-state p{font-size:14px;color:#a8fef9;margin:0 0 20px}
.comparison{position:absolute;inset:0;--split:50%;overflow:hidden}
.comparison img{position:absolute;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.after-clip{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))}
.divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#55ff55;transform:translateX(-1px);pointer-events:none}
.divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:34px;width:34px;border:2px solid #000;background:#55ff55;color:#000;display:grid;place-items:center;font:19px Arial,sans-serif;box-shadow:3px 3px #000}
.comparison input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.compare-label{position:absolute;top:14px;background:#000;color:#55ff55;padding:8px;font-size:9px;pointer-events:none}
.before-label{left:14px}.after-label{right:14px}
.busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#061117d9;color:#79ff9a;font:12px FFFORWA,monospace;z-index:3}
.spinner{width:22px;height:22px;border:3px solid #215d5c;border-top-color:#55ff55;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:15px;color:#31545b;font-size:9px;line-height:1.5}
.stage-bottom #status{color:#aa0000;text-align:right}
.gallery{border-top:2px solid #000;margin-top:30px;padding-top:24px}
.gallery-heading>span{font-size:10px;color:#aa0000}
.gallery-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px;margin-top:18px}
.gallery-card{border:2px solid #000;background:#fff;box-shadow:3px 4px #000;min-width:0}
.gallery-card button{width:100%;border:0;background:transparent;color:#000;padding:0;text-align:left}
.gallery-card img{display:block;width:100%;height:115px;object-fit:contain;image-rendering:pixelated;background:#061117}
.gallery-card span{display:block;padding:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.gallery-card a{display:block;border-top:2px solid #000;padding:9px;color:#aa0000;text-decoration:none;font:10px FFFORWA,monospace}
.gallery-card a:hover{background:#ff5555;color:#fff}
@media(max-width:1080px){.top-note{display:none}.workspace{grid-template-columns:330px minmax(0,1fr)}.stage-toolbar{align-items:flex-start;flex-direction:column}.stage-actions{width:100%;justify-content:space-between}}
@media(max-width:760px){body{border:0}.topbar{min-height:73px;padding:13px 17px;gap:11px}.site-link{font-size:9px}.header-divider{height:24px}.brand{font-size:18px}.brand-mark{height:26px;width:26px;font-size:20px;margin-right:6px}.local-badge{display:none}.workspace{display:flex;flex-direction:column;padding:14px;gap:15px}.sidebar{max-height:none;overflow:visible;padding:0}.stage{padding:15px 15px 24px}.preview-area{height:50vh;min-height:300px}.intro h1{font-size:26px}}
@media(max-width:420px){.site-link{font-size:8px;max-width:82px;line-height:1.4;white-space:normal}.brand{font-size:16px}.field-pair{gap:9px}.stage-bottom{font-size:8px}}