html:has(.dialer){background:0 0;min-height:0}html:has(.dialer) body{background:0 0;min-height:0}.dialer{border:1px solid var(--line);background:var(--paper);color:var(--ink);margin:0;padding:14px 16px 12px}.dialer h2{color:var(--honey-dark);font-family:var(--font-condensed), Impact, sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;font-size:13px;font-weight:500}.dialer button{font-family:inherit}.dialer button:focus-visible{outline:2px solid var(--honey);outline-offset:2px}.dialer-left{flex-direction:column;flex:none;align-items:center;gap:10px;width:240px;display:flex}.receiver{cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;gap:2px;width:100%;padding:0;display:flex}.receiver svg{width:100%;height:auto;fill:var(--ink);transition:transform .25s ease-out,fill .16s;display:block}.receiver:hover svg{fill:#333}.receiver.is-lifted svg{fill:var(--honey);transform:translateY(-3px)rotate(-5deg)}.receiver.is-wiggling svg{animation:.45s ease-in-out receiver-wiggle}.receiver span{font-family:var(--font-condensed), Impact, sans-serif;letter-spacing:.1em;text-transform:uppercase;font-size:15px;font-weight:500}.receiver:hover span{color:var(--honey-dark)}.dialer-body{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px;display:flex}.rotary{background:#111;border-radius:50%;flex:none;width:200px;height:200px;transition:opacity .2s;position:relative;box-shadow:inset 0 0 0 2px #2a2a2a,0 2px 6px #00000040}.rotary.is-idle{opacity:.8}.plate-label{color:#111;background:#f1e7d4;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:26px;height:26px;font-size:12px;font-weight:700;line-height:1;display:flex;position:absolute}.plate-label small{letter-spacing:.04em;font-size:6px;font-weight:600}.finger-wheel{border-radius:50%;width:164px;height:164px;position:absolute;top:18px;left:18px;box-shadow:inset 0 0 0 1px #ffffff40}.hole{background:0 0;border:1px solid #ffffff59;border-radius:50%;width:28px;height:28px;padding:0;position:absolute;box-shadow:0 0 0 2px #111}.hole:not(:disabled){cursor:pointer}.hole:not(:disabled):hover{background:#e0b46a4d}.hub{background:#f3ede1;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;display:flex;position:absolute;top:46px;left:46px}.hub img{width:44px;height:auto}.finger-stop{background:#c9c9c9;border-radius:3px;width:22px;height:6px;position:absolute;top:150px;left:160px;transform:rotate(45deg)}.keypad{background:#2b2b2b;border-radius:8px;flex:none;grid-template-columns:repeat(3,56px);gap:8px;padding:12px;transition:opacity .2s;display:grid}.keypad.is-idle{opacity:.8}.keypad button{height:46px;color:var(--ink);cursor:pointer;background:linear-gradient(#f4f4f4,#c9c9c9);border:1px solid #9a9a9a;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;display:flex}.keypad button:disabled{cursor:default}.keypad button:not(:disabled):active{background:#bdbdbd;transform:translateY(1px)}.keypad strong{font-size:18px;line-height:1}.keypad small{letter-spacing:.08em;min-height:10px;font-size:8px}.dialer-side{flex-direction:column;flex:220px;gap:8px;min-width:0;display:flex}.readout{background:var(--ink);color:#f1e7d4;padding:9px 12px}.readout p{margin:0}.readout .digits{color:#e0b46a;letter-spacing:.18em;min-height:28px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:22px}.readout .status{color:#d8d0c2;margin-top:3px;font-size:12px}.readout .is-ringing{animation:1.2s ease-in-out infinite dial-pulse}.on-line{align-items:center;gap:6px;font-size:13px;display:flex}.on-line span:last-child{color:var(--muted);font-size:12px}.bars{align-items:flex-end;gap:3px;height:20px;margin-right:4px;display:flex}.bars i{background:var(--honey);transform-origin:bottom;width:4px;height:20px;transform:scaleY(.3)}.is-speaking .bars i{animation:.9s ease-in-out infinite dial-bar}.bars i:nth-child(2){animation-delay:.15s}.bars i:nth-child(3){animation-delay:.3s}.bars i:nth-child(4){animation-delay:.45s}.directory-label{color:#4a4a4a;letter-spacing:.1em;text-transform:uppercase;margin:2px 0 0;font-size:11px;font-weight:600}.directory{flex-direction:column;gap:4px;display:flex}.directory button{border:1px solid var(--line);background:var(--paper);min-height:32px;color:var(--ink);text-align:left;cursor:pointer;align-items:center;gap:10px;padding:0 10px;font-size:12.5px;transition:background .12s,border-color .12s,box-shadow .12s,transform .12s;display:flex}.directory button:not(:disabled):hover{border-color:var(--honey);background:var(--honey-wash);transform:translateY(-1px);box-shadow:0 2px 6px #9a61102e}.directory button:not(:disabled):active{box-shadow:none;transform:translateY(0)}.directory button:disabled{cursor:default;opacity:.55}.directory .word{letter-spacing:.04em;width:44px;font-weight:700}.directory .number{width:72px;color:var(--honey-dark);font-family:ui-monospace,SF Mono,Menlo,monospace}.directory .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.call-cue{color:var(--line-strong);letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:4px;font-size:11px;font-weight:600;transition:color .12s;display:flex}.call-cue span{display:none}.directory button:not(:disabled):hover .call-cue{color:var(--honey-dark)}.directory button:not(:disabled):hover .call-cue span{display:inline}.dialer .note{color:#4a4a4a;text-align:center;margin:10px 0 0;font-size:11.5px}@keyframes receiver-wiggle{0%,to{transform:rotate(0)}20%{transform:translateY(-2px)rotate(-4deg)}40%{transform:translateY(-2px)rotate(4deg)}60%{transform:translateY(-1px)rotate(-3deg)}80%{transform:rotate(2deg)}}@keyframes dial-pulse{0%,to{opacity:.35}50%{opacity:1}}@keyframes dial-bar{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}