:root {
  color-scheme: dark;
  --room: #120d0a; --wood-1: #4a2c1a; --wood-2: #33200f;
  --alu-1: #e3e4e6; --alu-2: #b7babf; --engrave: #2c2e33; --engrave-soft: #5d6067;
  --amber: #ffb14a; --lamp: #ff3b2a; --needle: #e5281c;
  --wide: 'Syncopate', 'Arial Black', Arial, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --body: 'Barlow', Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(120% 80% at 50% 0%, #22170f, var(--room) 70%); color: #efe7da; font: 16px/1.45 var(--body);
  padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  padding-block: 18px max(40px, env(safe-area-inset-bottom)); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.cabinet { max-width: 460px; margin: 0 auto; padding: 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 14px;
  background-color: var(--wood-1);
  background-image: repeating-linear-gradient(91deg, rgba(0,0,0,.16) 0 1px, transparent 1px 5px), repeating-linear-gradient(89deg, rgba(255,214,170,.05) 0 2px, transparent 2px 17px),
    linear-gradient(90deg, var(--wood-1), var(--wood-2) 30%, #4f2f1c 55%, var(--wood-2) 80%, var(--wood-1));
  box-shadow: 0 24px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,180,.15), inset 0 0 0 1px rgba(0,0,0,.4); }
.cabinet.wide { max-width: 520px; }
@media (min-width: 1000px) { .cabinet.wide { max-width: 1040px; } }
.face { border-radius: 6px; display: flex; flex-direction: column; gap: 16px; color: var(--engrave);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.035) 1px 3px), linear-gradient(180deg, var(--alu-1), var(--alu-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.5); }
.plate { padding: 12px 16px; }
.module { position: relative; padding: 22px 20px 24px; }
.module::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  --screw: #9a9da3 0 2.5px, #5c5f65 2.5px 3.5px, rgba(255,255,255,.6) 3.5px 4px, transparent 4.5px;
  background: radial-gradient(circle at 10px 10px, var(--screw)), radial-gradient(circle at calc(100% - 10px) 10px, var(--screw)),
    radial-gradient(circle at 10px calc(100% - 10px), var(--screw)), radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), var(--screw)); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plate-right { display: inline-flex; gap: 12px; align-items: center; }
.badge { font-family: var(--wide); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; color: var(--engrave); text-shadow: 0 1px 0 rgba(255,255,255,.65); text-decoration: none; }
.badge b { color: #b3281c; }
.lamp { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; color: var(--engrave-soft); }
.lamp i { width: 10px; height: 10px; border-radius: 50%; background: #5b2420; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.lamp.lit i { background: var(--lamp); box-shadow: 0 0 9px var(--lamp), inset 0 0 2px #fff; }
.heading { margin: 0; padding-bottom: 12px; font: 700 22px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--engrave); text-shadow: 0 1px 0 rgba(255,255,255,.7);
  border-bottom: 2px solid transparent; border-image: linear-gradient(180deg, rgba(0,0,0,.22) 50%, rgba(255,255,255,.75) 50%) 1; }
.lede { margin: 0; font: 500 16px/1.45 var(--body); color: var(--engrave-soft); }
.lede strong { color: var(--engrave); font-weight: 600; }
.slot-wrap { position: relative; display: flex; }
.slot-wrap svg { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; stroke: var(--amber); }
.slot { flex: 1; min-width: 0; font: 500 18px/1.2 var(--cond); letter-spacing: .06em; color: var(--amber); caret-color: var(--amber); background: #0d0d0e; border: 1px solid rgba(255,177,74,.55); border-radius: 3px; padding: 13px 12px 13px 40px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 8px rgba(255,177,74,.18), 0 1px 0 rgba(255,255,255,.7); }
.slot::placeholder { color: #c9a26a; opacity: 1; }
.slot:focus { outline: none; border-color: var(--amber); box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 0 0 3px rgba(255,177,74,.35), 0 0 14px rgba(255,177,74,.35); }
.key { font: 700 13px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--engrave); cursor: pointer;
  background: linear-gradient(180deg, #f6f6f4, #cfd1d4); border: 1px solid #8a8d93; border-radius: 3px; padding: 11px 13px;
  box-shadow: 0 3px 0 #7c7f85, 0 4px 6px rgba(0,0,0,.3), inset 0 1px 0 #fff; text-shadow: 0 1px 0 #fff; }
.key:active { transform: translateY(2px); }
.key:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.key.red { width: 100%; padding: 16px; font-size: 16px; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.4); background: linear-gradient(180deg, #e8492f, #b9271a); border-color: #7d1a10; box-shadow: 0 3px 0 #6e160d, 0 4px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); }
.key.amber { width: 100%; padding: 15px; font-size: 15px; color: #2a1606; text-shadow: 0 1px 0 rgba(255,255,255,.35); background: linear-gradient(180deg, #ffcd73, #e9992b); border-color: #9a5d12; box-shadow: 0 3px 0 #8a520f, 0 4px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5); text-align: center; text-decoration: none; display: block; }
.textlink { background: none; border: 0; padding: 2px 0; font: 600 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--engrave); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.key:focus-visible, .textlink:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }
.module form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.module p, .confirm p { margin: 0; }
.divider { height: 0; margin: 2px 0; border-top: 1px dashed rgba(0,0,0,.22); box-shadow: 0 1px 0 rgba(255,255,255,.7); }
.sub { margin: 0; font: 700 14px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--engrave); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.error { margin: 0; padding: 10px 12px; border-radius: 4px; background: rgba(156,31,20,.09); box-shadow: inset 0 0 0 1px rgba(156,31,20,.35); font: 500 15px/1.4 var(--body); color: #7d1a10; }
.good { margin: 0; padding: 10px 12px; border-radius: 4px; background: rgba(47,154,74,.1); box-shadow: inset 0 0 0 1px rgba(47,154,74,.4); font: 500 15px/1.4 var(--body); color: #1e5e30; }

/* The code: six digits in a lit frequency-style display. One real input sits on top for typing, paste and one-time-code autofill. */
.code { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 12px; border-radius: 4px; background: #0b0b0c;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.7); }
.code .cell { height: 62px; display: grid; place-items: center; border-radius: 3px; background: linear-gradient(180deg, #151517, #0d0d0e); box-shadow: inset 0 0 0 1px #26262a;
  font: 700 40px/1 var(--cond); color: var(--amber); text-shadow: 0 0 10px rgba(255,177,74,.6); font-variant-numeric: tabular-nums; }
.code .cell.next { box-shadow: inset 0 0 0 1px var(--amber), 0 0 10px rgba(255,177,74,.35); }
.code .cell.next::after { content: ''; width: 2px; height: 30px; background: var(--amber); animation: blink 1s steps(1) infinite; }
.code.bad .cell { color: #ff6b5b; text-shadow: 0 0 10px rgba(255,80,60,.6); }
@keyframes blink { 50% { opacity: 0; } }
.code input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.code:focus-within { box-shadow: inset 0 3px 10px rgba(0,0,0,.95), 0 0 0 3px rgba(255,177,74,.35); }
/* The cells stay empty on a wrong code, ready to retype, so the frame itself
   has to carry the "that's wrong" signal. It comes after :focus-within because
   the box is focused as soon as the page loads, and the amber focus ring
   would otherwise hide it. */
.code.bad, .code.bad:focus-within { box-shadow: inset 0 0 0 2px #ff6b5b, 0 0 14px rgba(255,107,91,.5), inset 0 3px 10px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.7); }
/* Without JavaScript, codeEntry.js never adds the .js class, so the cells
   stay hidden and the real input is shown full-width in their place, rather
   than confined to the grid's first of six columns. */
.code:not(.js) { display: block; }
.code:not(.js) .cell { display: none; }
.code:not(.js) input { position: static; width: 100%; opacity: 1; padding: 13px 12px; color: var(--amber); background: transparent; font: 700 24px/1 var(--cond); letter-spacing: .1em; caret-color: var(--amber); }

.foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font: 500 11px/1.4 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--engrave-soft); }
.foot .credit { color: var(--engrave-soft); text-decoration: none; }
.foot .credit:hover { text-decoration: underline; }

.notice { padding: 10px 16px; border-radius: 6px; background: #0b0b0c; color: var(--amber); font: 600 13px/1.4 var(--cond); letter-spacing: .06em; box-shadow: inset 0 0 0 1px rgba(255,177,74,.3); }
.notice .textlink { color: var(--amber); text-shadow: none; }

.confirm-wrap { margin: 0; }
.confirm-wrap summary { list-style: none; cursor: pointer; }
.confirm-wrap summary::-webkit-details-marker { display: none; }
.confirm { margin-top: 10px; padding: 12px; border-radius: 4px; background: rgba(156,31,20,.09); box-shadow: inset 0 0 0 1px rgba(156,31,20,.35); display: flex; flex-direction: column; gap: 10px; }

@media (prefers-reduced-motion: reduce) { .code .cell.next::after { animation: none; } }