:root{--bg:#ffffff0d;--text:#fff;--muted:#fff9;--grid-half:#ffffff0f;--grid-cm:#ffffff21;--tick:#ffffffe6;--accent:#60a5fa;--accent-soft:#60a5fa2e;--panel:#171717d9;--border:#ffffff26;color-scheme:dark}html,body{height:100%;color:var(--text);margin:0;font-family:Manrope,ui-sans-serif,system-ui,sans-serif;overflow:hidden}#grid{cursor:crosshair;touch-action:none;width:100vw;height:100vh;position:fixed;inset:0}#grid.dragging{cursor:grabbing}.hud{color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none;font-size:12px;position:fixed}#readout{bottom:14px;left:16px}#readout strong{color:var(--text);font-weight:500}#title{color:var(--text);pointer-events:none;margin:0;font-family:Poiret One,ui-sans-serif,system-ui,sans-serif;font-size:20px;font-weight:400;position:fixed;top:14px;left:16px}#topbar{color:var(--muted);align-items:center;gap:10px;font-size:12px;display:flex;position:fixed;top:12px;right:16px}.units{border:1px solid var(--border);background:var(--panel);border-radius:8px;padding:2px;display:inline-flex}.units button{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:4px 9px;font-size:13px}.units button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:500}.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);font:inherit;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:6px 12px;font-size:13px;transition:background .15s,color .15s;display:inline-flex}.btn:hover{background:var(--accent-soft);color:var(--accent)}.btn.primary{color:#0a0a0a;background:#fff;border-color:#fff;font-weight:600}.btn.primary:hover{color:#0a0a0a;background:#ffffffd9}#panel{box-sizing:border-box;border:1px solid var(--border);background:var(--panel);backdrop-filter:blur(12px);border-radius:12px;width:360px;max-width:calc(100vw - 32px);max-height:calc(100vh - 68px);padding:20px;font-size:13px;line-height:1.5;position:fixed;top:52px;right:16px;overflow-y:auto;box-shadow:0 10px 30px #0000004d}#panel[hidden]{display:none}#panel h2{margin:0 0 12px;font-size:15px;font-weight:600}#panel h3{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:18px 0 6px;font-size:12px;font-weight:500}#panel p{margin:6px 0}.note{color:var(--muted);font-size:12px}#guess{font-size:15px}#search{box-sizing:border-box;border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);font:inherit;border-radius:8px;padding:7px 10px}#search:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}#results{border:1px solid var(--border);border-radius:8px;max-height:216px;margin:6px 0 0;padding:4px;list-style:none;overflow-y:auto}#results button{width:100%;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:space-between;gap:12px;padding:6px 8px;display:flex}#results button:hover,#results button.selected{background:var(--accent-soft)}#results .tag{color:var(--muted);white-space:nowrap;font-size:11px}#results .empty{color:var(--muted);padding:6px 8px}.link{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;margin-top:12px;padding:0;font-size:12px}.link:hover{text-decoration:underline}#card-mode{box-sizing:border-box;height:100dvh;padding:12px 16px max(12px, env(safe-area-inset-bottom));pointer-events:none;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px;display:grid;position:fixed;top:0;left:0;right:0}.card-stage{justify-content:center;align-items:safe center;width:100%;min-width:0;min-height:0;display:flex}.card-hint,.card-controls{z-index:1;position:relative}#card-mode[hidden],body.card-mode #title,body.card-mode #topbar,body.card-mode #panel,body.card-mode #readout{display:none}.card-hint,.card-controls{box-sizing:border-box;border:1px solid var(--border);background:var(--panel);text-align:center;pointer-events:auto;border-radius:10px;max-width:min(440px,100%);padding:10px 14px;font-size:13px}.card-hint{color:var(--muted);margin:0}.card{--w:8.56;--h:5.398;width:calc(var(--w) * var(--ppc) * 1px);height:calc(var(--h) * var(--ppc) * 1px);border-radius:calc(.318 * var(--ppc) * 1px);border:1px dashed var(--accent);background:var(--accent-soft);opacity:.8;flex:none;position:relative}.card.portrait{--w:5.398;--h:8.56}.card .chip{left:calc(.9 * var(--ppc) * 1px);top:calc(1.9 * var(--ppc) * 1px);width:calc(1.1 * var(--ppc) * 1px);height:calc(.85 * var(--ppc) * 1px);border-radius:calc(.12 * var(--ppc) * 1px);border:1px solid var(--accent);opacity:.5;position:absolute}.card.portrait .chip{left:calc(1.9 * var(--ppc) * 1px);top:calc(.9 * var(--ppc) * 1px);width:calc(.85 * var(--ppc) * 1px);height:calc(1.1 * var(--ppc) * 1px)}.card .dims{color:var(--accent);font-size:11px;position:absolute;bottom:8px;right:10px}.card-controls{width:100%}.slider-row{align-items:center;gap:8px;display:flex}.slider-row input{min-width:0;accent-color:var(--accent);flex:1}.slider-row .btn{width:32px;padding:4px 0}.slider-row output{text-align:right;font-variant-numeric:tabular-nums;width:48px;color:var(--muted)}.actions{justify-content:space-between;align-items:center;gap:8px;margin-top:16px;display:flex}.card-controls .actions{margin-top:12px}@media (width<=560px){#status{display:none}}