:root{--bg:#fff;--fg:#0b0f16;--muted:rgba(11,15,22,.65);--border:rgba(11,15,22,.12);--panel:rgba(11,15,22,.05);--ok:#12b981;--warn:#f59f0b;--bad:#ef4444;--shadow:0 10px 30px rgba(11,15,22,.10)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans";overflow:hidden}.hud{position:fixed;top:14px;left:14px;z-index:10}.chip{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);user-select:none;white-space:nowrap;font-size:14px;letter-spacing:.2px}.dot{width:10px;height:10px;border-radius:999px;background:var(--warn);box-shadow:0 0 0 3px rgba(245,159,11,.18)}.chip[data-state="online"] .dot{background:var(--ok);box-shadow:0 0 0 3px rgba(18,185,129,.18)}.chip[data-state="offline"] .dot{background:var(--bad);box-shadow:0 0 0 3px rgba(239,68,68,.18)}.chip[data-state="reconnecting"] .dot{background:var(--warn);box-shadow:0 0 0 3px rgba(245,159,11,.18)}.stage{height:100%;display:flex;flex-direction:column;justify-content:center;padding:clamp(18px,4vw,56px)}.timewrap{width:100%;display:flex;justify-content:flex-end}.timecol{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.time{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 1;font-weight:900;letter-spacing:.02em;line-height:1;text-align:right;font-size:clamp(56px,13vw,220px)}.diff{font-variant-numeric:tabular-nums;color:var(--muted);font-size:clamp(14px,2.2vw,24px);text-align:right;min-height:1.2em}.footer{position:fixed;left:clamp(18px,4vw,56px);bottom:clamp(16px,3vw,40px)}.date{color:var(--muted);font-size:clamp(12px,1.8vw,16px);letter-spacing:.06em}.tz{color:var(--muted);font-size:clamp(12px,1.6vw,15px);letter-spacing:.02em;margin-top:6px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media (max-width:520px){.timewrap{justify-content:center}.timecol{align-items:center}.time{text-align:center}.diff{text-align:center}.footer{left:0;right:0;text-align:center}}