:root{--phone-aspect: 9 / 19.5;--letterbox: #0c0d10;--bezel: #000;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: ease-in-out;--ease-drawer: cubic-bezier(.32, .72, 0, 1);--ease-soft: ease;--motion-press: .12s;--motion-popover: .16s;--motion-thumb: .18s;--motion-feedback: .3s;--motion-drawer: .28s;--motion-panel: .35s;--motion-scene: .45s;--font-os: "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-voice: "Bricolage Grotesque Variable", "Archivo Variable", system-ui, sans-serif;--c-card: #fff6ec;--c-card-2: #ffe9d4;--c-sheet: #fff1e2;--c-text: #33261f;--c-muted: #8a7466;--c-accent: #ff5d4e;--c-accent-soft: #ff9b91;--c-on-accent: #fff6ec;--c-bad: #e0472f;--c-star: #ffb63b;--c-bubble: #33261f;--c-bubble-text: #fff6ec;--scr-bg: #fff3e6;--scr-bg-connected: #e8f6ee;--scr-text: #33261f;--radius-card: 22px;--radius-btn: 999px;--radius-bubble: 18px 18px 18px 6px;--edge-w: 2.5px;--c-edge: #33261f;--shadow-card: 0 4px 0 #33261f55, 0 14px 34px #0007;--chrome-bg: hsl(30 100% 97% / .94);--chrome-border: hsl(22 24% 22% / .16);--chrome-shadow: 0 12px 34px hsl(22 24% 10% / .22), inset 0 1px #fff9}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--letterbox);font:14px/1.4 var(--font-os);font-variant-numeric:tabular-nums;color:var(--c-text);overscroll-behavior:none}#app{position:fixed;inset:0;display:grid;place-items:center}.phone-frame{position:relative;width:100dvw;height:100dvh;overflow:hidden;background:var(--bezel);touch-action:none}@media (min-width: 600px) and (hover: hover) and (pointer: fine){.phone-frame{width:auto;height:min(100dvh,96vh);aspect-ratio:var(--phone-aspect);border-radius:28px;box-shadow:0 0 0 10px #16181d,0 24px 60px #000a}}.canvas-host,.overlay{position:absolute;inset:0}.canvas-host canvas{display:block;width:100%;height:100%;cursor:grab}.canvas-host canvas.is-grabbing{cursor:grabbing}.overlay{pointer-events:none}.fps{position:absolute;top:8px;left:8px;padding:2px 6px;border-radius:4px;background:#0008;color:#7fd18a;font-variant-numeric:tabular-nums}.ui-icon{display:block;width:1.25em;height:1.25em;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}button:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}.beat{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1d161180;opacity:0;pointer-events:none;transition:opacity var(--motion-panel) var(--ease-soft)}.beat.show{opacity:1;pointer-events:auto;backdrop-filter:blur(7px) saturate(.85);-webkit-backdrop-filter:blur(7px) saturate(.85)}.beat-card{width:min(80%,320px);padding:22px 18px;border-radius:var(--radius-card);text-align:center;background:var(--c-card);border:var(--edge-w) solid var(--c-edge);box-shadow:var(--shadow-card);transform:translateY(16px) scale(.97);transition:transform var(--motion-panel) var(--ease-out)}.beat.show .beat-card{transform:none}.beat.connect{background:#1d16116b}.beat.connect .beat-card{border-top:3px solid var(--c-accent)}.beat.voicemail{background:#1d161199}.beat.voicemail .beat-card{border-top:3px solid var(--c-bad);transform:scale(.985);transition:transform var(--motion-drawer) var(--ease-soft)}.beat.voicemail.show .beat-card{transform:none}.beat-line{font-family:var(--font-voice);font-size:19px;font-weight:500;line-height:1.25;letter-spacing:-.015em;margin-bottom:10px}.beat-meta{font-size:13px;color:var(--c-muted);margin-bottom:14px}.beat-note{margin-top:7px;font-size:12px}.beat-btn,.recents-btn,.recents-close{border:var(--edge-w) solid var(--c-edge);border-radius:var(--radius-btn);padding:10px 20px;font-family:var(--font-os);font-weight:600;letter-spacing:.005em;background-color:var(--c-accent);color:var(--c-on-accent);cursor:pointer}.beat-btn,.recents-btn,.recents-close,.settings-btn{transition:transform var(--motion-press) var(--ease-out)}.beat-btn:active,.recents-btn:active,.recents-close:active,.settings-btn:active{transform:scale(.97)}.recents-btn{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0));right:14px;display:flex;align-items:center;gap:7px;min-height:42px;padding:8px 14px;border:1px solid var(--chrome-border);background:var(--chrome-bg);color:var(--c-text);box-shadow:var(--chrome-shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:var(--font-os);font-size:13px}.recents{position:absolute;inset:0;background:radial-gradient(100% 60% at 50% 0%,#fff9,transparent 70%),var(--c-sheet);color:var(--c-text);padding:calc(20px + env(safe-area-inset-top,0)) 18px calc(18px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;transform:translateY(100%);transition:transform var(--motion-drawer) var(--ease-drawer)}.recents.show{transform:translateY(0)}.recents-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.recents-header-copy{display:flex;flex-direction:column;gap:1px}.recents-eyebrow{color:var(--c-muted);font:600 11px/1.2 var(--font-os);letter-spacing:.1em;text-transform:uppercase}.recents-title{font-size:27px;font-weight:650;letter-spacing:-.022em}.recents-close{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--chrome-border);background:#fff8;color:var(--c-text);box-shadow:inset 0 1px #fff}.recents-list{overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:0;padding-bottom:2px;scrollbar-width:none}.recents-list::-webkit-scrollbar{display:none}.recents-row{appearance:none;width:100%;display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--chrome-border);border-radius:18px;background:#fffaf5d1;box-shadow:0 7px 20px #3f302714,inset 0 1px #fff;color:var(--c-text);text-align:left;cursor:pointer;transition:transform var(--motion-press) var(--ease-out)}.recents-row:active{transform:scale(.985)}.recents-avatar{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--c-accent-soft),var(--c-accent));color:var(--c-on-accent);font:650 14px/1 var(--font-os);box-shadow:inset 0 1px #fff8}.recents-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px}.recents-caller{overflow:hidden;font:600 15px/1.2 var(--font-os);letter-spacing:-.008em;text-overflow:ellipsis;white-space:nowrap}.recents-result{color:var(--c-muted);font:500 12px/1.3 var(--font-os)}.recents-rating{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;color:var(--c-star)}.recents-rating>.ui-icon{width:16px;color:var(--c-muted)}.recents-empty{margin:auto;display:flex;max-width:250px;flex-direction:column;align-items:center;text-align:center}.recents-empty-mark{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;border-radius:22px;background:#fff9;color:var(--c-accent);box-shadow:0 10px 28px #3f30271a,inset 0 1px #fff}.recents-empty-mark .ui-icon{width:28px;height:28px}.recents-empty-title{margin-bottom:5px;font-size:20px;font-weight:750}.recents-empty-copy{color:var(--c-muted);font:500 14px/1.45 var(--font-os)}.call-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(120% 90% at 50% 20%,var(--scr-bg-connected),var(--scr-bg));color:var(--scr-text);opacity:0;transform:scale(1.04);pointer-events:none;transition:opacity var(--motion-scene) var(--ease-soft),transform var(--motion-scene) var(--ease-soft)}.call-screen.show{opacity:1;transform:scale(1);pointer-events:auto}.call-screen.brief{transform:none;transition:opacity var(--motion-drawer) var(--ease-out)}.call-screen.brief .call-screen-avatar,.call-screen.brief .call-screen-name,.call-screen.brief .call-screen-incoming{display:none}.call-screen-avatar{width:96px;height:96px;border-radius:50%;border:var(--edge-w) solid var(--c-edge);background:#47d175;animation:screen-pulse 1.4s var(--ease-in-out) infinite}.call-screen-name{font-size:29px;font-weight:600;letter-spacing:-.02em}.call-screen-incoming{font-size:11px;font-weight:500;text-transform:uppercase;color:var(--c-muted);letter-spacing:.14em}@keyframes screen-pulse{0%,to{box-shadow:0 0 #3cdd7180}50%{box-shadow:0 0 0 26px #3cdd7100}}.title-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(120% 90% at 50% 20%,var(--c-card-2),var(--c-sheet));color:var(--c-text);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;transition:opacity var(--motion-scene) var(--ease-soft),transform var(--motion-scene) var(--ease-soft)}.title-screen.hide{opacity:0;transform:scale(1.04);pointer-events:none}.title-cord{width:130px;color:var(--c-accent);animation:title-sway 3.2s var(--ease-in-out) infinite}.title-cord svg{display:block;width:100%}.title-name{font-family:var(--font-voice);font-size:clamp(44px,15vw,58px);font-weight:800;line-height:.98;letter-spacing:-.035em;font-optical-sizing:auto;text-shadow:0 4px 0 #33261f22}.title-tagline{font-size:13px;color:var(--c-muted);letter-spacing:.01em}.title-prompt{margin-top:26px;padding:12px 28px;border:var(--edge-w) solid var(--c-edge);border-radius:var(--radius-btn);background:var(--c-accent);color:var(--c-on-accent);font-size:16px;font-weight:700;box-shadow:0 4px #33261f55;animation:title-beckon 1.6s var(--ease-in-out) infinite}@keyframes title-beckon{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes title-sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.bell-row{position:absolute;top:calc(12px + env(safe-area-inset-top,0));left:50%;transform:translate(-50%);display:flex;gap:5px;opacity:0;transition:opacity var(--motion-feedback) var(--ease-soft);filter:drop-shadow(0 2px 0 #33261f2e)}.bell-row .bell{width:17px;color:var(--c-card)}.bell-row.show{opacity:1}.bell-row .bell{transition:opacity var(--motion-scene) var(--ease-soft),transform var(--motion-scene) var(--ease-out)}.bell-row .bell.gone{opacity:0;transform:translateY(-16px) rotate(24deg) scale(.4)}.bell-row .bell.anxious{animation:bell-tremble .5s var(--ease-in-out) infinite}@keyframes bell-tremble{0%,to{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}.bell-run{display:inline-flex;gap:2px}.bell-run .bell{display:inline-flex;width:13px}.bell-run .bell.spent{opacity:.22;filter:grayscale(1)}.caller-say{position:absolute;top:76px;left:12px;right:12px;padding:10px 14px;border-radius:var(--radius-bubble);background:var(--c-bubble);color:var(--c-bubble-text);font-family:var(--font-voice);font-size:16px;font-weight:450;letter-spacing:-.005em;line-height:1.32;box-shadow:0 6px 20px #0006;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--motion-feedback) var(--ease-soft),transform var(--motion-feedback) var(--ease-soft)}.caller-say.show{opacity:1;transform:translateY(0)}.settings-btn,.recents-btn,.recents.show{pointer-events:auto}.settings-btn{position:absolute;top:calc(8px + env(safe-area-inset-top,0));right:10px;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--chrome-border);border-radius:50%;background:var(--chrome-bg);color:var(--c-text);box-shadow:var(--chrome-shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:18px;cursor:pointer}.settings{position:absolute;top:calc(58px + env(safe-area-inset-top,0));right:10px;width:min(280px,calc(100% - 20px));padding:16px;border-radius:20px;background:var(--chrome-bg);border:1px solid var(--chrome-border);box-shadow:var(--chrome-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transform:translateY(-4px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity var(--motion-popover) var(--ease-out),transform var(--motion-popover) var(--ease-out)}.settings.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.settings-title{margin-bottom:12px;color:var(--c-muted);font:600 11px/1.2 var(--font-os);letter-spacing:.08em;text-transform:uppercase}.settings-row{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}.settings-checkbox{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.settings-label-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px}.settings-label{font:600 14px/1.2 var(--font-os)}.settings-meta{color:var(--c-muted);font:500 12px/1.3 var(--font-os)}.settings-switch{position:relative;flex:0 0 auto;width:44px;height:26px;border:1px solid var(--chrome-border);border-radius:999px;background:#bcb0a9;box-shadow:inset 0 1px 3px #0002;transition:background-color var(--motion-popover) ease}.settings-switch-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;transition:transform var(--motion-thumb) var(--ease-out)}.settings-checkbox:checked~.settings-switch{background:var(--c-accent)}.settings-checkbox:checked~.settings-switch .settings-switch-thumb{transform:translate(18px)}.settings-checkbox:focus-visible~.settings-switch{outline:2px solid var(--c-accent);outline-offset:2px}@media (prefers-reduced-motion: reduce){.beat,.recents,.caller-say,.call-screen,.call-screen.brief,.settings,.beat-btn,.recents-btn,.recents-close,.settings-btn,.settings-switch,.settings-switch-thumb,.recents-row,.title-screen,.bell-row,.bell-row .bell{transition:none}.beat-card,.beat.voicemail .beat-card{transform:none;transition:none}.call-screen-avatar,.title-cord,.title-prompt,.bell-row .bell.anxious{animation:none}}@media (prefers-reduced-transparency: reduce){.beat.show,.beat.connect,.beat.voicemail{background:#1d1611e0;backdrop-filter:none;-webkit-backdrop-filter:none}}