:root{--bg:#141416;--fg:#ededee;--sub:#8e9096;--faint:#63656b;--hair:#26272b;--accent:#e3b062;--ok:#7fb894}
@media (prefers-color-scheme:light){:root{--bg:#ffffff;--fg:#323232;--sub:#6b6b6b;--faint:#96959a;--hair:#e7e6e2;--accent:#a8762a;--ok:#3f8a5f}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:'Peyda',system-ui,sans-serif;-webkit-text-size-adjust:100%;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#live{height:100%;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 14px);max-width:760px;margin:0 auto}
.lv-top{display:flex;align-items:center;justify-content:space-between}
.lv-brand{font-size:20px;font-weight:700}
.lv-pulse{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:14px}
.lv-pulse i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:lvp 1.8s ease-in-out infinite}
.lv-pulse.off i{background:var(--faint);animation:none}
.lv-pulse b{font-weight:500}
@keyframes lvp{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.lv-metrics{display:flex;gap:6px;overflow-x:auto;margin-top:26px;padding-bottom:4px;scrollbar-width:none;justify-content:center;flex-wrap:wrap}
.lv-metrics::-webkit-scrollbar,.lv-pages::-webkit-scrollbar{display:none}
.lv-metrics button{padding:8px 16px;border-radius:999px;font-size:15px;color:var(--sub);white-space:nowrap;border:1px solid transparent}
.lv-metrics button.on{color:var(--fg);border-color:var(--hair);background:rgba(127,127,127,.08)}
.lv-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0}
.lv-big{font-size:clamp(84px,26vw,200px);font-weight:700;line-height:1.05;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:0}
.lv-unit{margin-top:6px;font-size:clamp(20px,4.6vw,30px);color:var(--accent);font-weight:600}
.lv-sub{margin-top:8px;font-size:16px;color:var(--sub);min-height:24px}
.lv-periods{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin-bottom:20px}
.lv-periods button{min-width:0;padding:10px 6px;border-radius:14px;border:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;gap:2px}
.lv-periods button span{font-size:13px;color:var(--sub)}
.lv-periods button strong{font-size:15px;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
.lv-periods button.on{border-color:var(--accent)}
.lv-periods button.on span{color:var(--accent)}
.lv-pages{display:flex;gap:2px;overflow-x:auto;border-top:1px solid var(--hair);padding-top:10px;scrollbar-width:none}
.lv-pages button:first-child{margin-inline-start:auto}.lv-pages button:last-child{margin-inline-end:auto}
.lv-pages button{flex:none;padding:8px 14px;font-size:15px;color:var(--faint);white-space:nowrap;border-radius:10px}
.lv-pages button.on{color:var(--fg);font-weight:600}
.lv-stage.swap{animation:lvs .28s ease}
@keyframes lvs{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-height:560px){.lv-metrics{margin-top:12px}.lv-big{font-size:clamp(64px,20vw,120px)}}
@media (prefers-reduced-motion:reduce){.lv-pulse i,.lv-stage.swap{animation:none}}