:root{
  --bg:#f6f4f2;--panel:#ffffff;--fg:#2a2528;--muted:#6f676b;--line:#e2dcde;--accent:#b8334a;--accent-fg:#ffffff;--soft:#f1e9eb;--ok:#2f6b3f;
  --font-ui:"Special Elite","Courier New",monospace;
  --font-body:system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1d1a1c;--panel:#2a2628;--fg:#f0eaec;--muted:#aaa0a5;--line:#413b3e;--accent:#ee7a8e;--accent-fg:#2a1218;--soft:#38303a;--ok:#7fcf93;color-scheme:dark}}
@font-face{font-family:"Special Elite";src:url(fonts/elite.ttf) format("truetype");font-display:block}
@font-face{font-family:"Amatic Stand-in";font-weight:700;src:url(fonts/amatic700.woff2) format("woff2");font-display:block}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:15px;line-height:1.5;padding-inline:16px;padding-block:24px}
.wrap{max-width:1040px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:780px){.wrap{grid-template-columns:minmax(0,1fr)}}
.left{position:sticky;top:16px}
@media (max-width:780px){.left{position:static}}
h1{font-family:var(--font-ui);font-weight:400;font-size:22px;margin:0 0 4px;text-wrap:balance}
h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 20px;font-size:14px}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px}
canvas.main{display:block;width:100%;height:auto;aspect-ratio:1264/1795;background:#fff}
.cap{display:block;margin-top:8px;color:var(--muted);font-size:12px}
.item{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:12px;min-width:0}
.item.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ihead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.ihead b{font-family:var(--font-ui);font-weight:400;font-size:15px}
.thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:12px}
@media (max-width:480px){.thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.thumb{border:2px solid transparent;border-radius:4px;padding:0;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;font-size:11px;color:var(--muted)}
.thumb img{width:100%;height:auto;aspect-ratio:1264/1795;display:block;border:1px solid var(--line)}
.thumb[aria-pressed=true]{border-color:var(--accent);color:var(--fg)}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:560px){.fields{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
input[type=text],select{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:9px 11px;width:100%}
input:focus-visible,select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;font-size:13px;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);font-size:15px;padding:12px 18px;width:100%}
button:disabled{opacity:.6;cursor:default}
.add{width:100%;padding:11px;border-style:dashed;margin-bottom:20px}
.sum,.box{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:6px;margin-bottom:16px}
.sum .row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.sum .tot{font-family:var(--font-ui);font-size:20px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.hint{font-size:13px;color:var(--muted)}
.err{font-size:13px;color:var(--accent);min-height:1.2em}
.ok{color:var(--ok)}
.hp{position:absolute;left:-9999px;opacity:0}
table{border-collapse:collapse;width:100%;font-size:14px}
td,th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
[hidden]{display:none!important}