@font-face{font-family:Inter;src:url(/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#f5f3ef;--card:#ffffffcc;--ink:#14161a;--muted:#5b616b;--green:#16a34a;--green-d:#0f7a37;--red:#dc2626;--red-d:#a91b1b;--grey:#3f4652;--r:clamp(20px,3.2vmin,36px);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Roboto,sans-serif;overflow:hidden;user-select:none;-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
body{background:radial-gradient(120vmax 80vmax at 15% -10%,#ffffff 0,#f5f3ef 45%,#ece8e1 100%)}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vmin;padding:5vmin;text-align:center;animation:enter .45s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(12px) scale(.99)}}
h1{font-size:clamp(40px,6.6vmin,72px);font-weight:700;letter-spacing:-.025em;line-height:1.12;max-width:20ch}
h2{font-size:22px;font-weight:600;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;margin:8px 4px 0}
.big-text{font-size:clamp(28px,4.6vmin,44px);color:var(--muted)}
.clock{font-size:clamp(28px,4.4vmin,44px);font-weight:500;color:var(--muted);letter-spacing:-.01em;text-transform:capitalize}
.offline-banner{position:absolute;top:3vmin;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:30px;font-weight:600;padding:14px 28px;border-radius:999px;box-shadow:0 10px 30px #dc262640}
/* start */
.warm{background:radial-gradient(90vmax 70vmax at 50% 0,#fff 0,#f3efe8 60%,#e9e3d8 100%)}
.greet{font-size:clamp(52px,9vmin,100px);font-weight:700;letter-spacing:-.035em;color:var(--ink)}
/* avatar */
.photo{width:min(38vmin,340px);aspect-ratio:1;border-radius:50%;background:#ddd center/cover no-repeat;box-shadow:0 0 0 .9vmin #fff,0 2vmin 6vmin #1a1f2a26;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:650;font-size:min(17vmin,150px);letter-spacing:-.03em}
.photo.initials{text-shadow:0 2px 12px #0003}
.photo.pulse{animation:halo 2.4s var(--ease) infinite}
@keyframes halo{0%{box-shadow:0 0 0 .9vmin #fff,0 0 0 1vmin #16a34a55,0 2vmin 6vmin #1a1f2a26}100%{box-shadow:0 0 0 .9vmin #fff,0 0 0 6vmin #16a34a00,0 2vmin 6vmin #1a1f2a26}}
/* contact card */
#contacts{display:flex;flex-wrap:wrap;gap:5vmin;justify-content:center}
.contact{border:1px solid #ffffff;background:var(--card);backdrop-filter:blur(20px);border-radius:calc(var(--r)*1.4);padding:4vmin 4vmin 3vmin;width:min(60vmin,540px);display:flex;flex-direction:column;align-items:center;gap:2.4vmin;box-shadow:0 1px 0 #fff inset,0 3vmin 8vmin -2vmin #1a1f2a2e;color:var(--ink);transition:transform .2s var(--ease)}
.contact .name{font-size:clamp(44px,7.4vmin,80px);font-weight:700;letter-spacing:-.03em}
.contact .bar{align-self:stretch;background:linear-gradient(180deg,#1fb757,var(--green));color:#fff;display:flex;align-items:center;justify-content:center;gap:2vmin;font-size:clamp(40px,6.4vmin,68px);font-weight:650;padding:2.6vmin;border-radius:var(--r);box-shadow:0 1.2vmin 3vmin -1vmin #16a34a80,inset 0 1px 0 #ffffff40}
.contact .bar svg{width:1em;height:1em}
.contact .state{font-size:26px;font-weight:600;color:var(--green-d);display:flex;align-items:center;gap:10px}
.contact .state::first-letter{color:var(--green)}
.contact.offline .state{color:var(--red-d)}
.contact:active{transform:scale(.97)}
/* buttons */
button{font:inherit;cursor:pointer}
.btn{border:0;border-radius:var(--r);color:#fff;display:flex;align-items:center;justify-content:center;gap:2.4vmin;font-size:clamp(40px,6.6vmin,72px);font-weight:650;letter-spacing:-.015em;padding:3.4vmin 6vmin;min-height:120px;transition:transform .18s var(--ease),filter .18s;box-shadow:inset 0 1px 0 #ffffff33}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn:active{transform:scale(.97);filter:brightness(.95)}
.green{background:linear-gradient(180deg,#1fb757,var(--green));box-shadow:0 1.4vmin 4vmin -1vmin #16a34a8c,inset 0 1px 0 #ffffff40}
.red{background:linear-gradient(180deg,#ef4444,var(--red));box-shadow:0 1.4vmin 4vmin -1vmin #dc26268c,inset 0 1px 0 #ffffff40}
.grey{background:linear-gradient(180deg,#4b5361,var(--grey));box-shadow:0 1.4vmin 4vmin -1vmin #1a1f2a66}
.wide{min-width:min(66vw,600px)}
.slim{min-height:96px;font-size:clamp(32px,4.8vmin,46px);background:#e6e2db;color:var(--ink);box-shadow:none}
.giant{flex-direction:column;gap:2vmin;font-size:clamp(46px,7.4vmin,84px);padding:5vmin 11vmin;border-radius:calc(var(--r)*1.6);line-height:1.08;animation:glow 3.2s ease-in-out infinite}
.giant svg{width:1.4em;height:1.4em}
@keyframes glow{50%{box-shadow:0 1.4vmin 4vmin -1vmin #16a34a8c,0 0 0 2.4vmin #16a34a1f,inset 0 1px 0 #ffffff40}}
.row{display:flex;gap:5vmin}
.row .btn{min-width:min(36vw,400px);min-height:min(24vmin,210px)}
/* in call: full-bleed video, glass controls */
.dark{background:#0b0d10;padding:0;animation:none}
#remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0d10}
#local{position:absolute;top:3vmin;right:3vmin;width:22vmin;aspect-ratio:4/3;object-fit:cover;border-radius:2.4vmin;box-shadow:0 0 0 2px #ffffff55,0 2vmin 5vmin #0008;transform:scaleX(-1)}
#call-status{position:absolute;top:3vmin;left:3vmin;font-size:clamp(34px,5.4vmin,56px);font-weight:650;letter-spacing:-.02em;color:#fff;padding:1.4vmin 3vmin;border-radius:999px;background:#0b0d1059;backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px #ffffff26}
.hangup{position:absolute;bottom:4vmin;left:50%;transform:translateX(-50%);min-width:min(56vw,520px);background:linear-gradient(180deg,#ef4444e6,#dc2626e6);backdrop-filter:blur(18px);box-shadow:0 2vmin 6vmin #0009,inset 0 0 0 1px #ffffff33}
.hangup:active{transform:translateX(-50%) scale(.97)}
/* family (phone) view */
body.family #v-home{justify-content:flex-start;padding-top:7vh;overflow:auto}
body.family .contact{width:min(92vw,520px);padding:28px 22px 22px}
body.family .contact .photo{width:min(44vw,220px);font-size:min(22vw,110px)}
body.family h1{font-size:clamp(30px,8vw,44px)}
body.family .clock{display:none}
body.family .btn{font-size:clamp(28px,7.4vw,44px);min-height:88px}
body.family .photo{width:min(54vw,280px);font-size:min(26vw,140px)}
body.family .row{flex-direction:column;gap:18px;width:90vw}
body.family .row .btn{min-width:0;width:100%;min-height:110px}
#family-extra{width:min(92vw,520px);display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:14px}
.setting{display:flex;gap:14px;align-items:center;background:var(--card);backdrop-filter:blur(20px);border:1px solid #fff;border-radius:18px;padding:16px 18px;font-size:18px;line-height:1.35;color:var(--ink);box-shadow:0 8px 24px -10px #1a1f2a33;text-align:left}
.setting .ico{width:28px;height:28px;flex:none;color:var(--green-d)}
.setting input[type=checkbox]{width:30px;height:30px;flex:none;accent-color:var(--green)}
.setting.file input{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}