.keycard-page{color:#f4ecd9;background:repeating-linear-gradient(90deg,#c7a35817 0 2px,#0000 2px 54px),#101b38;min-height:100vh;padding:1.4rem 1rem 4rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.keycard-shell{width:min(1060px,100%);margin:auto}.keycard-kicker{color:#d6ad57;letter-spacing:.15em;font-size:.68rem;font-weight:1000}.keycard-title h1{letter-spacing:-.07em;margin:.15rem 0 .35rem;font:1000 clamp(3rem,8vw,6rem)/.86 system-ui,sans-serif}.keycard-title p{color:#c4bfd0;margin:0 0 1.2rem;font-size:.8rem}.keycard-workspace{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);align-items:stretch;gap:1rem;display:grid}.keycard-door{background:linear-gradient(90deg,#ffffff0d,#0000 22%),repeating-linear-gradient(90deg,#4a291b 0 50px,#53301e 50px 100px);border:10px solid #8a562e;border-top-color:#b77c47;min-height:590px;position:relative;box-shadow:8px 10px #d6ad57}.keycard-room{color:#d6ad57;letter-spacing:.13em;background:#17213b;border:2px solid #d6ad57;padding:.55rem 1.1rem;font:900 1.4rem system-ui,sans-serif;position:absolute;top:50px;left:50%;transform:translate(-50%)}.keycard-peephole{background:#17120f;border:5px solid #a27a49;border-radius:50%;width:20px;height:20px;position:absolute;top:155px;left:50%;transform:translate(-50%)}.keycard-reader{color:#ff625a;background:#33363b;border:4px solid #141519;border-radius:12px;width:105px;padding:.65rem;position:absolute;top:220px;right:32px;box-shadow:4px 5px #00000059}.keycard-reader-led{font-size:.48rem;font-weight:1000}.keycard-reader-led i{background:#ff4c47;border-radius:50%;width:9px;height:9px;margin-right:.35rem;display:inline-block;box-shadow:0 0 8px #ff4c47}.keycard-slot{background:#090a0b;border-radius:8px;height:10px;margin:.7rem 0}.keycard-reader-screen{text-align:center;background:#180b0b;border:2px solid #111;padding:.55rem .25rem;font-size:.48rem;line-height:1.5}.keycard-reader-screen strong{font-size:.72rem}.keycard-reader.is-green{color:#70ef8a}.keycard-reader.is-green .keycard-reader-led i{background:#70ef8a;box-shadow:0 0 8px #70ef8a}.keycard-reader.is-green .keycard-reader-screen{background:#071b0d}.keycard-handle{background:#c49a55;border-radius:12px;width:90px;height:35px;position:absolute;top:380px;right:25px;box-shadow:inset 0 4px #e5c17f,0 5px #72552b}.keycard-handle i{background:#d1aa68;border-radius:50%;width:30px;height:35px;position:absolute;right:0}.keycard-console{color:#17213b;background:#f4ecd9;border:3px solid #d6ad57;padding:1.2rem;box-shadow:8px 10px #7d542c}.keycard-card{aspect-ratio:1.6;color:#f4ecd9;background:radial-gradient(circle at 80% 20%,#d6ad5757,#0000 23%),linear-gradient(135deg,#152444,#0c1730);border-radius:14px;width:min(390px,82%);margin:0 auto 1rem;padding:1rem;transition:transform .18s;position:relative;box-shadow:0 10px 16px #17213b47}.keycard-card span,.keycard-card strong,.keycard-card small{display:block}.keycard-card span{color:#d6ad57;font-size:.55rem}.keycard-card span b{font-size:1rem}.keycard-card strong{font-size:.8rem;position:absolute;bottom:2.1rem;right:1rem}.keycard-card small{color:#a8b1c4;font-size:.42rem;position:absolute;bottom:1rem;right:1rem}.keycard-card>i{color:#d6ad57;font-size:1.5rem;position:absolute;top:1rem;right:1rem}.keycard-rounds{grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:1.2rem;display:grid}.keycard-rounds span{color:#a09a8c;text-align:center;border:1px solid #9f9a8d;padding:.5rem;font-size:.5rem}.keycard-rounds span.is-current{color:#345f95;border-color:#345f95;font-weight:1000}.keycard-rounds span.is-read{color:#1c7040;background:#d7ebd6;border-color:#26844d;font-weight:1000}.keycard-console label{justify-content:space-between;font-size:.63rem;font-weight:1000;display:flex}.keycard-console label b{color:#a96d2e;font-size:1rem}.keycard-track{height:34px;margin-top:.5rem;position:relative}.keycard-track>i{opacity:.65;background:#8de09e;height:10px;position:absolute;top:12px}.keycard-track input{accent-color:#17213b;cursor:grab;width:100%;margin:0;position:absolute;inset:0}.keycard-scale{color:#77736b;justify-content:space-between;gap:.5rem;font-size:.46rem;display:flex}.keycard-scale b{color:#9b672d;text-align:center}.keycard-swipe,.keycard-reset{color:#17213b;cursor:pointer;background:#d6ad57;border:0;border-bottom:7px solid #815529;width:100%;min-height:62px;margin-top:1rem;font:1000 .75rem ui-monospace,monospace}.keycard-reset{background:#77d68b;border-color:#327445}.keycard-swipe:active,.keycard-reset:active{border-bottom-width:3px;transform:translateY(4px)}.keycard-notice{color:#a15c27;border-bottom:2px solid #17213b;min-height:2.7rem;padding:.75rem 0;font-size:.58rem;font-weight:1000}.keycard-console dl{grid-template-columns:1fr 1fr;gap:0 .8rem;display:grid}.keycard-console dl div{border-bottom:1px dotted #9c9688;justify-content:space-between;gap:.4rem;padding:.5rem 0;font-size:.53rem;display:flex}.keycard-console dd{margin:0;font-weight:1000}.keycard-console dd.is-locked{color:#c33d3d}.keycard-console dd.is-open{color:#198149}.keycard-back{color:#f4ecd9;margin-top:1.8rem;font-weight:1000;display:inline-block}.keycard-page button:focus-visible,.keycard-page input:focus-visible,.keycard-back:focus-visible{outline-offset:3px;outline:4px solid #76e5ed}@media (max-width:760px){.keycard-page{padding:1rem .7rem 4rem}.keycard-workspace{grid-template-columns:1fr}.keycard-door{min-height:500px}.keycard-title h1{font-size:3.5rem}.keycard-console{padding:1rem}.keycard-card{width:88%}}@media (prefers-reduced-motion:reduce){.keycard-card{transition:none!important}.keycard-swipe:active,.keycard-reset:active{transform:none}}