:root{--phone-aspect: 9 / 19.5;--letterbox: #0c0d10;--bezel: #000;--ease-out: cubic-bezier(.23, 1, .32, 1);--font-body: "Baloo 2 Variable", ui-rounded, 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}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--letterbox);font:14px/1.4 var(--font-body);color:var(--c-text);overscroll-behavior:none}#app{position:fixed;inset:0;display:grid;place-items:center}.phone-frame{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bezel);touch-action:none}@media (min-aspect-ratio: 9 / 19.5){.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%}.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}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:#000a;opacity:0;pointer-events:none;transition:opacity .35s ease}.beat.show{opacity:1;pointer-events:auto}.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(14px);transition:transform .35s ease}.beat.show .beat-card{transform:translateY(0)}.beat.connect .beat-card{border-top:3px solid var(--c-accent)}.beat.voicemail .beat-card{border-top:3px solid var(--c-bad)}.beat-line{font-size:16px;font-style:italic;margin-bottom:8px}.beat-meta{font-size:13px;color:var(--c-muted);margin-bottom:14px}.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-body);font-weight:700;background-color:var(--c-accent);color:var(--c-on-accent);cursor:pointer}.beat-btn,.recents-btn,.recents-close,.settings-btn,.theme-chip{transition:transform .12s var(--ease-out)}.beat-btn:active,.recents-btn:active,.recents-close:active,.settings-btn:active,.theme-chip:active{transform:scale(.97)}.recents-btn{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom,0));right:14px;padding:8px 14px;background-color:var(--c-card-2);color:var(--c-text)}.recents{position:absolute;inset:0;background:var(--c-sheet);color:var(--c-text);padding:16px;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s ease}.recents.show{transform:translateY(0)}.recents-header{display:flex;align-items:center;justify-content:space-between;font-size:20px;font-weight:700;margin-bottom:12px}.recents-close{padding:6px 14px;background-color:var(--c-card-2);color:var(--c-text)}.recents-list{overflow-y:auto;display:flex;flex-direction:column;gap:2px}.recents-row{display:flex;justify-content:space-between;padding:12px 10px;border-radius:10px;opacity:.6}.recents-row.answered{opacity:1;cursor:pointer;background:var(--c-card);border:var(--edge-w) solid var(--c-edge);transition:transform .12s var(--ease-out)}.recents-row.answered:active{transform:scale(.985)}.recents-rating{font-variant-numeric:tabular-nums;color:var(--c-muted)}.recents-row.answered .recents-rating{color:var(--c-star)}.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 .45s ease,transform .45s ease}.call-screen.show{opacity:1;transform:scale(1);pointer-events:auto}.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 ease-in-out infinite}.call-screen-name{font-size:26px;font-weight:700}.call-screen-incoming{font-size:14px;color:var(--c-muted);letter-spacing:.06em}@keyframes screen-pulse{0%,to{box-shadow:0 0 #3cdd7180}50%{box-shadow:0 0 0 26px #3cdd7100}}.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-size:15px;line-height:1.3;box-shadow:0 6px 20px #0006;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}.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;width:34px;height:34px;border:0;border-radius:50%;background:#0007;color:#fff;font-size:16px;cursor:pointer}.settings{position:absolute;top:48px;right:10px;padding:12px 14px;border-radius:12px;background:var(--c-card);border:var(--edge-w) solid var(--c-edge);box-shadow:0 10px 30px #000a;opacity:0;transform:scale(.94);transform-origin:top right;pointer-events:none;transition:opacity .15s var(--ease-out),transform .15s var(--ease-out)}.settings.show{opacity:1;transform:scale(1);pointer-events:auto}.settings-row{display:flex;align-items:center;gap:8px;cursor:pointer}@media (prefers-reduced-motion: reduce){.beat,.recents,.caller-say,.call-screen,.settings,.beat-btn,.recents-btn,.recents-close,.settings-btn,.theme-chip,.recents-row.answered{transition:none}.call-screen-avatar{animation:none}}