*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e6e7e7}body{font-family:Verdana,Arial,sans-serif;color:#243746}html[data-theme=dark]{color-scheme:dark}html[data-theme=light]{color-scheme:light}[hidden]{display:none!important}
:root{--ink:#243746;--muted:#425765;--surface:#fffdf7;--border:#8294a0;--link:#075d93;--panel:#f7f2e5;--focus:#815010}
[data-theme=dark]{--ink:#e5edf2;--muted:#c6d4dc;--surface:#0c1720;--border:#7392a8;--link:#f1a14a;--panel:#101e2a;--focus:#ffd08a}
.site{display:flex;flex-direction:column;width:100%;max-width:1120px;min-height:100svh;margin:auto;border:2px solid #52748b;background:#f1efe6;color:var(--ink);box-shadow:0 1px 0 #fff inset,0 5px 14px #2f241247}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:78px;padding:10px 13px;background:radial-gradient(ellipse at 80% 5%,#ffffff9e,transparent 38%),linear-gradient(180deg,#b6d9ec,#8fb9d2);border-bottom:5px solid #284d70;box-shadow:0 1px 0 #ffffffa6 inset}
.brand{display:flex;align-items:center;gap:9px;min-width:0;margin:0;font:700 18px/1.08 Georgia,"Times New Roman",serif;color:#173750;text-shadow:1px 1px #ffffffbf}.brand span{min-width:0}.brand-mark{display:block;width:32px;height:32px;flex:none;padding:2px;border:1px solid #8294a0;background:linear-gradient(180deg,#fffdf7,#e5e1d6);box-shadow:0 1px 0 #ffffffd9 inset,0 2px 2px #19222740;object-fit:contain;image-rendering:pixelated}
.appearance{display:flex;flex:none;flex-direction:column;gap:2px;width:108px;font:9px/1.2 Verdana,sans-serif;color:#173750}.appearance select{width:100%;min-height:36px;padding:3px;font:11px Verdana,sans-serif;background:#edf3f5;color:#173750;border:1px solid #587287}#theme-status{font-size:8px;min-height:10px;white-space:nowrap}
.workarea{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;padding:16px 15px;background:radial-gradient(ellipse at 50% 48%,#ffffff9e,transparent 62%),repeating-linear-gradient(135deg,#695b3f06 0 1px,transparent 1px 7px),linear-gradient(180deg,#f7f3e8,#ebe6d8)}
.intake{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:960px}.guide-frame{position:relative;width:100%;aspect-ratio:1280/590;border:2px solid #55768b;background:#111923;box-shadow:0 1px 0 #fff inset,0 3px 8px #00000057}.sample-image{display:block;width:100%;height:100%;object-fit:contain}.mark{position:absolute;top:7.4%;height:75.4%;border:2px solid;pointer-events:none;box-shadow:0 0 0 1px #00000073}.mark.current{left:23.5%;width:23.7%;border-color:#ffc04a}.mark.candidate{left:47%;width:23.2%;border-color:#5bd1d3}
.legend{display:flex;justify-content:center;gap:18px;color:var(--muted);font-size:11px;line-height:1.2}.legend span{display:inline-flex;align-items:center;gap:5px}.swatch{width:12px;height:12px;border:2px solid #ffc04a;background:#263a46}.swatch.candidate{border-color:#5bd1d3}
.upload{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:12px;border:1px solid #496f2a;background:linear-gradient(180deg,#b4d36b,#8bb344 48%,#759f37);color:#1b2a11;font:700 16px Verdana,sans-serif;text-shadow:0 1px 0 #ffffff8c;box-shadow:0 1px 0 #ffffffbf inset,0 2px 0 #567832;cursor:pointer}
.availability{margin:0;text-align:center;font:12px/1.45 Verdana,sans-serif;color:var(--muted)}#screenshot-status:empty{display:none}#screenshot-status{margin:0;font-size:13px;line-height:1.5}#image-reference{text-align:center}#screenshot-preview{display:block;width:auto;max-width:100%;max-height:65vh;object-fit:contain;margin:0 auto 8px}
.footer{flex:none;padding:9px 12px 10px;background:linear-gradient(180deg,#e9e6d9,#d6d2c4);border-top:4px solid #276b9c;text-align:center;box-shadow:0 -3px 10px #343d370f}.legal{max-width:580px;margin:0 auto 6px;font:10px/1.35 Verdana,sans-serif;color:#3c505f}.footlinks{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:9.5px}.footlinks a{display:inline-flex;align-items:center;min-height:20px;color:var(--link);text-decoration:underline;text-underline-offset:2px}.support{display:inline-flex;align-items:center}.coffee{min-height:32px;padding:4px 8px;background:#ffdd00;color:#302a12;border:1px solid #b89d40;font:600 10px Verdana,sans-serif;white-space:nowrap;opacity:1;box-shadow:none}.coffee small{display:block;font:8px/1.1 Verdana,sans-serif;color:inherit}
button,input,select,textarea{font:inherit}button,summary{cursor:pointer}button:disabled{cursor:not-allowed}a{color:var(--link)}button{min-height:40px;padding:7px 10px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}button.primary{background:#8bb344;color:#1b2a11;font-weight:bold;min-height:44px}summary{color:var(--link);font-size:13px;line-height:1.5;padding:4px 0;text-decoration:underline;text-underline-offset:2px}details p,dialog p,#results{font:14px/1.5 Verdana,sans-serif}details[open]{width:100%}.items-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}.item-card{min-width:0;border:1px solid var(--border);padding:12px;background:var(--panel)}h2{font:700 20px/1.3 Georgia,serif;margin:0 0 12px}.item-name{display:block;width:100%;margin:5px 0 14px}input,select{min-width:0;max-width:100%;padding:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}.line{border-top:1px solid var(--border);padding:10px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.line label{font-size:12px}.line input,.line select{display:block;width:100%;margin-top:4px;font-size:16px}.line .label-field{grid-column:1/-1}.line .remove{justify-self:start;font-size:12px;min-height:32px}.field-error{grid-column:1/-1;margin:0;color:var(--ink);font-size:13px}.form-error,#stale-result{padding:8px;border:1px solid var(--border)}#results{margin-top:20px;border-top:1px solid var(--border);padding-top:16px}.result-row{border-top:1px solid var(--border);padding:10px 0;overflow-wrap:anywhere}.result-row p{margin:4px 0}.result-row strong{font-size:14px}dialog{max-width:560px;width:calc(100% - 24px);max-height:85svh;overflow:auto;padding:20px;border:2px solid var(--border);background:var(--panel);color:var(--ink)}dialog::backdrop{background:#0a1016ba}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}input[type=file]:focus-visible+.availability{outline:3px solid var(--focus)}.upload:has(+input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}.visually-hidden{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;top:0;left:0;transform:translateY(-200%);background:var(--surface);padding:8px;z-index:10}.skip-link:focus{transform:translateY(0)}
[data-theme=dark] .site{border-color:#24445b;background:#0b141d;box-shadow:0 1px 0 #ffffff1f inset,0 5px 14px #00000073}[data-theme=dark] .masthead{background:radial-gradient(ellipse at 80% 0%,#63a0c53d,transparent 38%),linear-gradient(180deg,#245b7e,#17436a);border-bottom-color:#e1882f;box-shadow:0 1px 0 #ffffff29 inset}[data-theme=dark] .brand{color:#f0f5f7;text-shadow:1px 1px #07111b}[data-theme=dark] .appearance{color:#f1f4f7}[data-theme=dark] .appearance select{background:#15293a;color:#f1f4f7;border-color:#7392a8}[data-theme=dark] .workarea{background:radial-gradient(ellipse at 50% 48%,#28485c57,transparent 64%),repeating-linear-gradient(135deg,#82a0b006 0 1px,transparent 1px 7px),linear-gradient(180deg,#111d28,#09131c)}[data-theme=dark] .guide-frame{border-color:#638399;box-shadow:0 1px 0 #ffffff2e inset,0 3px 8px #00000080}[data-theme=dark] .upload{border-color:#a85c16;background:linear-gradient(180deg,#ffc05b,#ed922c 48%,#c66b1b);color:#281607;text-shadow:0 1px 0 #ffeec399;box-shadow:0 1px 0 #fff7d6b3 inset,0 2px 0 #9b5b22}[data-theme=dark] .footer{background:linear-gradient(180deg,#132332,#0b151f);border-top-color:#e1882f}[data-theme=dark] .legal{color:#c3d0d9}[data-theme=dark] button.primary{background:#ed922c;color:#281607}
@media(max-width:600px){.items-grid{grid-template-columns:1fr}}@media(max-width:430px){.masthead{padding:10px;gap:8px}.brand{font-size:17px;gap:7px}.brand-mark{width:30px;height:30px;padding:1px}.workarea{padding:12px}.intake{gap:8px}.footer{padding:8px 9px}.legal{font-size:10px}}
@media(max-width:430px){.brand{font-size:15px}}
@media(max-width:374px){.brand{font-size:14px}}
@media(max-width:340px){.brand{font-size:12px;gap:5px}.brand-mark{width:28px;height:28px}.appearance{width:100px}.appearance select{font-size:10px}.legal{font-size:9px}.footlinks{font-size:10px}.legend{font-size:10px;gap:12px}}