:root{color-scheme:dark;--ink:#151222;--cream:#fff0cd;--mint:#a5f0cc}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--cream);font:16px/1.5 ui-monospace,Consolas,monospace}main{width:min(680px,calc(100% - 24px));margin:auto;padding:20px 0 32px}header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}a{color:var(--mint);text-underline-offset:4px}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}header button{color:var(--mint);background:#292139;border:1px solid #746087;padding:9px 12px;border-radius:6px;min-height:44px}section{text-align:center}.eyebrow{font-size:13px;letter-spacing:2px;color:var(--mint);margin-bottom:4px}h1{font-size:clamp(30px,5vw,44px);line-height:1.2;margin:0 0 10px}.intro{margin:0 0 20px;color:#cfc1dc}.phone{position:relative;max-width:540px;margin:0 auto;border:3px solid #66506e;border-radius:16px;overflow:hidden;background:#222b36;aspect-ratio:2/3}.phone-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.dial-panel{position:absolute;left:40%;top:24%;width:48%;padding:8px;background:#151c25;border:2px solid #63706b;border-radius:5px;box-shadow:3px 4px 0 #0b1018}.display{background:#add9b1;color:#173629;text-align:left;padding:8px;margin-bottom:10px;min-height:72px;border:3px solid #080f15;border-radius:3px}#line-state{display:block;font-size:11px;letter-spacing:1px}#digits{display:block;min-height:24px;font-size:clamp(15px,3.5vw,24px);overflow-wrap:anywhere;line-height:1.3;font-weight:bold}.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.keypad button{border:2px solid #59492e;background:#e5c78e;color:#231c18;border-radius:4px;box-shadow:0 3px #6b5436;min-width:0;min-height:54px;padding:3px;font-size:24px;line-height:1.05;font-weight:bold}.keypad span{display:block;font-size:9px;letter-spacing:1px;margin-top:3px}.keypad button:active,.keypad button.pressed{transform:translateY(2px);background:#fff0ba;box-shadow:0 1px #6b5436}.dial-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}.dial-actions button{min-height:44px;padding:6px 2px;border:2px solid #514630;background:#e5c78e;color:#231c18;font-weight:bold;font-size:14px;border-radius:4px}#call{background:var(--mint);border-color:#375849}button:disabled{opacity:.55;cursor:default}.receiver{position:absolute;left:9%;top:25%;width:26%;height:44%;background:transparent;border:2px solid transparent;border-radius:20px;color:var(--cream)}.receiver:hover,.receiver[aria-pressed=true]{border-color:#a5f0cc88;background:#a5f0cc0a}.receiver span{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;background:#171525e8;padding:7px 10px;border:1px solid #b59cce;border-radius:4px;font-size:14px}.message{max-width:540px;margin:18px auto 0;padding:15px 18px;border:1px solid #655074;background:#241b32;border-radius:8px;min-height:78px}.message p{margin:0}.hint{font-size:13px;color:#c6b4d4;max-width:540px;margin:16px auto 8px}.note{font-size:12px;color:#b5a5c4;margin:0}@media(max-width:480px){header{font-size:14px}.dial-panel{left:38%;width:58%;top:20%;padding:5px}.display{min-height:54px;padding:5px;margin-bottom:7px}.keypad{gap:4px}.keypad button{min-height:44px;font-size:21px}.keypad span{font-size:8px;margin-top:1px}.dial-actions{margin-top:8px;gap:4px}.dial-actions button{font-size:13px}.receiver{left:6%;width:27%;top:24%;height:50%}.receiver span{font-size:12px;padding:6px}.message{font-size:15px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(min-width:481px){.dial-panel{left:38%;width:49%;padding:6px}.display{min-height:64px;margin-bottom:8px}.keypad button{min-height:48px}.dial-actions{margin-top:10px}}