:root{--sand:#fbf3ea;--cream:#fffaf4;--ink:#2a1f1a;--muted:#7a675c;--sun:#e98a4a;--sun-deep:#c9652a;--line:#ecdccd}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--sand);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
.wrap{max-width:560px;margin:0 auto;padding:0 20px}
header{background:radial-gradient(120% 90% at 50% 0%,#ffd9b3 0%,#fbe6d2 38%,var(--sand) 75%);padding:44px 0 26px;text-align:center}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:5px solid var(--cream);box-shadow:0 14px 40px rgba(201,101,42,.25)}
h1{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(34px,8vw,48px);line-height:1.05;margin-top:16px}
.tag{color:var(--muted);font-size:17px;margin-top:8px}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--cream);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--muted)}
.badge b{color:var(--sun-deep);font-weight:600}
.card{background:var(--cream);border:1px solid var(--line);border-radius:22px;padding:26px 22px;margin:22px 0;box-shadow:0 10px 30px rgba(42,31,26,.06);text-align:center}
.price{font-family:Fraunces,Georgia,serif;font-size:44px;line-height:1}
.price small{font-family:Inter,sans-serif;font-size:16px;color:var(--muted);font-weight:500}
.btn{display:inline-block;width:100%;max-width:360px;margin-top:18px;padding:17px 24px;border-radius:999px;border:0;background:var(--sun-deep);color:#fff;text-decoration:none;font:600 18px Inter,sans-serif;cursor:pointer;box-shadow:0 12px 30px rgba(201,101,42,.35);transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px);background:#b5571f}
.btn.ghost{background:transparent;color:var(--sun-deep);border:2px solid var(--sun-deep);box-shadow:none}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.fine{font-size:13px;color:var(--muted);margin-top:12px}
ul.how{list-style:none;text-align:left;margin:18px auto 0;max-width:380px}
ul.how li{padding:7px 0 7px 30px;position:relative;font-size:15px}
ul.how li:before{content:"✦";position:absolute;left:6px;color:var(--sun)}
.notice{font-size:13px;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:14px;padding:12px 14px;margin-top:16px;text-align:left}
footer{text-align:center;color:var(--muted);font-size:13px;padding:24px 0 44px}
footer p+p{margin-top:6px}
/* call panel */
.timer{font-family:Fraunces,Georgia,serif;font-size:56px;line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.status{font-size:16px;color:var(--muted);min-height:24px}
.orb{width:110px;height:110px;margin:10px auto 6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd9b3,var(--sun) 55%,var(--sun-deep));box-shadow:0 0 0 0 rgba(233,138,74,.5)}
.panel[data-state=live] .orb{animation:pulse 1.8s ease-out infinite}
.panel[data-speaking="1"] .orb{animation-duration:.9s}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,138,74,.55)}100%{box-shadow:0 0 0 26px rgba(233,138,74,0)}}
.hurry .timer{color:var(--sun-deep)}
.msg{margin-top:14px;font-size:15px;color:var(--ink);min-height:0}
.msg:empty{display:none}
.msg.err{background:#fff1e6;border:1px solid #f3c6a5;border-radius:12px;padding:12px}
.alert{background:#fff7d6;border:2px solid #2a1f1a;border-radius:14px;padding:14px;text-align:left;font-size:15px;margin-bottom:16px}
.alert b{display:block;font-size:17px;margin-bottom:4px}
.alert input{width:100%;margin-top:8px;padding:8px;font:13px monospace;border:1px solid #2a1f1a;border-radius:8px;background:#fff}
.alert button{margin-top:8px;padding:10px 14px;border-radius:999px;border:0;background:#2a1f1a;color:#fff7d6;font-weight:600;cursor:pointer}
[hidden]{display:none!important}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.row .btn{width:auto;flex:1 1 140px}
.panel[data-state=connecting] .orb{animation:ringing 2.2s ease-out infinite}
@keyframes ringing{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(233,138,74,.55)}18%{transform:scale(1.07);box-shadow:0 0 0 14px rgba(233,138,74,.2)}45%{transform:scale(1);box-shadow:0 0 0 26px rgba(233,138,74,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(233,138,74,0)}}