:root{color-scheme:light;font-family:Courier Prime,IBM Plex Mono,SF Mono,monospace;--bg-top: #efe6db;--bg-bottom: #d8c9b9;--device-shell-top: #545965;--device-shell-bottom: #40454f;--device-shell-edge: #2c3038;--screen-bezel-top: #3d424c;--screen-bezel-bottom: #1f232a;--screen-bg: #c8c88a;--screen-bg-2: #b9bb78;--screen-ink: #262712;--key-top: #767b88;--key-bottom: #5d6270;--key-dark: #454954;--accent-top: #ffbc68;--accent-bottom: #ff9a27;--display-size: 128px;--display-scale: 2.32;--display-font: "Courier Prime", "Nimbus Mono PS", "Courier New", monospace}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.75),transparent 24%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom));color:#f4f0ea}button{font:inherit}.app-shell{min-height:100dvh;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}.phone-frame{width:min(100%,392px);max-height:calc(100dvh - 24px);padding:18px 16px 16px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 10%),linear-gradient(180deg,var(--device-shell-top),var(--device-shell-bottom));border:1px solid var(--device-shell-edge);box-shadow:inset 0 1px #ffffff1f,0 24px 48px #2f201038;display:flex;flex-direction:column;gap:16px;overflow:hidden}.device-header{width:calc((var(--display-size) * var(--display-scale)) + 24px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 2px}.device-header-copy{flex:1 1 auto;min-width:0;text-align:left}.device-header h1,.device-header p{margin:0}.device-kicker{color:#f0ece6b8;font-size:.56rem;line-height:1.1;letter-spacing:.16em;text-transform:uppercase}.device-header h1{margin-top:5px;color:#f3f0eb;font-size:.98rem;line-height:1;letter-spacing:.07em;text-transform:uppercase}.device-leds{display:flex;align-items:center;gap:8px;padding-right:4px}.device-led{width:12px;height:12px;border-radius:999px;border:1px solid rgba(0,0,0,.35);opacity:.28;box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffffff0d}.device-led-green{background:#5aa152}.device-led-amber{background:#c68422}.device-led-red{background:#b74a4a}.device-led-on{opacity:1;box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffffff0d,0 0 8px currentColor}.device-led-off{opacity:.22;box-shadow:inset 0 1px #ffffff1f,0 0 0 1px #ffffff08}.device-led-heartbeat{opacity:1;animation:led-heartbeat 2.4s infinite ease-in-out}.device-led-active{opacity:1;animation:led-gps-pulse .95s infinite ease-in-out}@keyframes led-heartbeat{0%,18%,to{opacity:.28;transform:scale(1);box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffffff0d}24%,32%{opacity:1;transform:scale(1.02);box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffffff0d,0 0 8px #5aa152e6}40%{opacity:.45;transform:scale(1)}46%,54%{opacity:1;transform:scale(1.02);box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffffff0d,0 0 10px #5aa152f2}}@keyframes led-gps-pulse{0%,to{opacity:.34;transform:scale(1);box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffffff0d}50%{opacity:1;transform:scale(1.04);box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffffff0d,0 0 10px #c68422f2}}.display-wrapper{width:fit-content;margin:0 auto}.display-bezel{padding:12px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 16%),linear-gradient(180deg,var(--screen-bezel-top),var(--screen-bezel-bottom));border:1px solid #171a1f;box-shadow:inset 0 1px #ffffff14,inset 0 -4px 8px #00000073}.display-screen{position:relative;width:calc(var(--display-size) * var(--display-scale));height:calc(var(--display-size) * var(--display-scale));border:6px solid #121317;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 18%),linear-gradient(180deg,var(--screen-bg),var(--screen-bg-2));color:var(--screen-ink);box-shadow:inset 0 0 0 1px #ffffff14,inset 0 0 22px #383b1229;overflow:hidden;image-rendering:pixelated}.lcd-content{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column}.lcd-grid,.lcd-scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.lcd-grid{z-index:0;background-image:linear-gradient(to right,rgba(38,39,18,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(38,39,18,.08) 1px,transparent 1px);background-size:.78125% 100%,100% .78125%}.lcd-scanlines{z-index:1;background:repeating-linear-gradient(to bottom,#ffffff05 0,#ffffff05 2px,#1a1c0e0d 2px,#1a1c0e0d 5px)}.status-bar{height:calc(16px * var(--display-scale));display:flex;align-items:center;justify-content:space-between;padding:0 calc(4px * var(--display-scale));font-family:var(--display-font);font-size:calc(7px * var(--display-scale));font-weight:700;line-height:1;border-bottom:calc(1px * var(--display-scale)) solid rgba(38,39,18,.72);text-transform:uppercase}.status-bar span{flex:0 0 auto}.screen-content{flex:1;display:grid;grid-template-rows:repeat(9,1fr);padding:calc(8px * var(--display-scale)) calc(8px * var(--display-scale)) calc(6px * var(--display-scale));text-align:left;font-family:var(--display-font);font-size:calc(8px * var(--display-scale));font-weight:700;line-height:1;text-transform:uppercase;text-shadow:0 0 1px rgba(38,39,18,.38)}.screen-row{margin:0;display:flex;align-items:center;min-height:0;white-space:pre}.screen-content-visual{padding:calc(4px * var(--display-scale))}.screen-visual{width:100%;height:100%}.screen-visual-qr{display:flex;align-items:center;justify-content:center;background:#f8f7edeb}.screen-qr-image{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.screen-visual-camera{overflow:hidden;border:calc(1px * var(--display-scale)) solid rgba(38,39,18,.55)}.screen-qr-video{width:100%;height:100%;object-fit:cover;display:block;background:#0f130a}.screen-qr-canvas{display:none}.screen-title{font-size:calc(10px * var(--display-scale));letter-spacing:calc(.28px * var(--display-scale))}.keypad-panel{padding:0 6px 2px;min-height:0}.top-key-row,.digit-grid{display:grid}.top-key-row{grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.35dvh,12px);margin-bottom:clamp(8px,1.35dvh,12px)}.digit-grid{grid-template-columns:repeat(3,1fr);gap:clamp(7px,1.1dvh,10px) clamp(8px,1.35dvh,12px)}.key{border:0;border-radius:18px;color:#f6f3ed;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 32%),linear-gradient(180deg,var(--key-top),var(--key-bottom));box-shadow:inset 0 1px #ffffff1f,0 8px 14px #0000003d}.key:active{transform:translateY(1px)}.top-key{min-height:clamp(44px,7.4dvh,54px);font-size:1rem;font-weight:700;letter-spacing:.05em}.digit-key{min-height:clamp(56px,10.4dvh,78px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:700}.digit-primary{font-size:1.25rem;line-height:1}.digit-secondary{font-size:.52rem;line-height:1;letter-spacing:.08em}.key-accent{background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 34%),linear-gradient(180deg,var(--accent-top),var(--accent-bottom));color:#fffaf3}.key-secondary{background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 34%),linear-gradient(180deg,#888d99,#6c717d)}@media(max-width:440px){:root{--display-scale: 2.12}.phone-frame{width:100%;border-radius:26px;padding:14px 12px;gap:14px}.device-header{padding:0}.device-kicker{font-size:.5rem}.device-header h1{font-size:.9rem}.display-bezel{padding:10px;border-radius:18px}.keypad-panel{padding:0}.top-key-row{gap:10px;margin-bottom:10px}.digit-grid{gap:8px 10px}.top-key{min-height:clamp(42px,6.9dvh,48px);font-size:.9rem}.digit-key{min-height:clamp(52px,9.4dvh,68px)}.digit-primary{font-size:1.14rem}.digit-secondary{font-size:.48rem}}@media(max-height:820px){:root{--display-scale: 2.02}.phone-frame{gap:12px;padding:14px 12px 12px}.display-bezel{padding:9px}.device-header h1{font-size:.88rem}.top-key-row{gap:8px;margin-bottom:8px}.digit-grid{gap:6px 8px}}