:root { color-scheme: dark; --bg:#12161b; --fg:#e6eaee; --mut:#9aa6b2; --card:#1b2129; --line:#323c48; --acc:#ffb01c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 780px; margin: 0 auto; padding: 16px; }
main.narrow { max-width: 460px; padding-top: 12vh; }
h1 { letter-spacing: .15em; } h2 { font-size: 1.05rem; margin: 0 0 .5rem; } h3 { font-size: .95rem; margin: 1rem 0 .3rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.small { color: var(--mut); font-size: .85rem; }
.err { color:#ffb4b4; border:1px solid #7a3a3a; padding:.5rem .7rem; border-radius:6px; }
.machine { position:relative; width:100%; max-width:750px; margin:0 auto; }
.machine img { display:block; user-select:none; -webkit-user-drag:none; }
.machine img.bg { width:100%; height:auto; }
.machine img.layer { position:absolute; object-fit:fill; }
.machine .slot, .machine .key { position:absolute; margin:0; padding:0; background:transparent; border:0; cursor:pointer; border-radius:6px; }
.machine .slot:hover { outline:2px solid rgba(255,255,255,.35); }
.machine .slot.sel { outline:3px dashed var(--acc); outline-offset:-2px; }
.machine .key:hover { outline:2px solid rgba(255,255,255,.4); }
.machine .slot:focus-visible, .machine .key:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #7cc4ff; outline-offset:2px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:14px 0; }
.kpline { text-align:center; font-family: ui-monospace, Consolas, monospace; margin:.6rem 0 0; }
button, input, select { font:inherit; color:inherit; background:#222b36; border:1px solid var(--line); border-radius:6px; padding:.45rem .8rem; }
button:not(.slot):not(.key) { cursor:pointer; background:#2d3b4c; }
button:disabled { opacity:.5; cursor:not-allowed; }
input[type=text] { width:100%; margin:.3rem 0 .6rem; font-family: ui-monospace, Consolas, monospace; }
.panel input[type=text] { width:auto; }
.msg { min-height:1.4em; margin:.6rem 0 0; }
.prize { font-family: ui-monospace, Consolas, monospace; word-break:break-all; }
.techimg { width:100%; max-width:420px; height:auto; display:block; border-radius:6px; }
pre { background:#0d1116; border:1px solid var(--line); padding:10px; border-radius:6px; overflow:auto; font-size:.85rem; }
.orders { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.orders li { display:flex; flex-direction:column; gap:4px; }
.orders img { width:100%; height:auto; border-radius:4px; }
details.reset summary { cursor:pointer; }
a { color:#8fc7ff; }
fieldset.modes { border:0; padding:0; margin:0 0 .8rem; display:grid; gap:.4rem; }
fieldset.modes label, label { display:block; }
input[type=password] { width:100%; margin:.3rem 0 .6rem; }