/* CLOCKPOT — minimalist paper monochrome. The countdown is the biggest thing on every screen. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600&display=swap');

:root{
  --black:#08090A; --coal:#111315; --graphite:#292C30; --fog:#9DA2A6; --ivory:#F1F0EA; --white:#FFFFFF;
  --disp:'Bricolage Grotesque',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --body:'Inter Tight',system-ui,sans-serif;
  --line:rgba(241,240,234,.09); --line2:rgba(241,240,234,.16);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--black);color:var(--ivory);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{
  /* faint paper grain */
  background-image:radial-gradient(circle at 20% 10%,rgba(255,255,255,.015),transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .02 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--ivory);text-decoration:none}
.mono{font-family:var(--mono)}
.fog{color:var(--fog)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}

/* ── header ── */
header{position:sticky;top:0;z-index:40;background:rgba(8,9,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:30px;height:30px;border-radius:7px}
.brand b{font-family:var(--disp);font-weight:800;letter-spacing:.02em;font-size:18px}
.brand .tk{font-family:var(--mono);color:var(--fog);font-size:12px;letter-spacing:.18em}
nav.tabs{display:flex;gap:2px;margin-left:8px}
nav.tabs a{font-size:12.5px;letter-spacing:.03em;color:var(--fog);padding:8px 11px;border-radius:8px;cursor:pointer}
nav.tabs a:hover{color:var(--ivory)} nav.tabs a.on{color:var(--black);background:var(--ivory)}
.sp{flex:1}
.ca{font-family:var(--mono);font-size:12px;color:var(--fog);border:1px solid var(--line2);padding:6px 9px;border-radius:8px;cursor:pointer}
.ca:hover{color:var(--ivory)}
.btn{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.03em;padding:9px 15px;border-radius:9px;border:1px solid var(--ivory);background:var(--ivory);color:var(--black);cursor:pointer}
.btn.ghost{background:transparent;color:var(--ivory)}
.icon{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:8px;color:var(--fog)}
@media(max-width:820px){
  .brand .tk{display:none}
  /* keep the tabs reachable on mobile: horizontally-scrollable strip (no JS, no hidden panes) */
  nav.tabs{margin-left:0;flex-wrap:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs a{flex:0 0 auto;white-space:nowrap}
}

/* ── hero ── */
.hero{position:relative;padding:52px 0 38px;text-align:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .mascot{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:520px;max-width:96vw;opacity:.10;pointer-events:none;filter:grayscale(1) contrast(1.05)}
.hero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.34em;color:var(--fog);text-transform:uppercase}
.count{font-family:var(--disp);font-weight:800;font-size:clamp(78px,17.5vw,176px);line-height:.9;letter-spacing:-.02em;
  color:var(--white);position:relative;font-variant-numeric:tabular-nums;
  text-shadow:0 0 40px rgba(255,255,255,.18),0 0 90px rgba(255,255,255,.08);animation:breatheGlow 5.2s ease-in-out infinite}
.count.warn{animation:shake .5s linear infinite}
.count.flash{animation:flash .8s ease}
.count.drawing{animation:drawingPulse 1.1s ease-in-out infinite}
@keyframes drawingPulse{0%,100%{opacity:.5;text-shadow:0 0 34px rgba(255,255,255,.14)}50%{opacity:1;text-shadow:0 0 70px rgba(255,255,255,.5)}}
.until{font-family:var(--mono);letter-spacing:.28em;font-size:12px;color:var(--fog);text-transform:uppercase;margin-top:6px}
.pot{margin-top:26px}
.pot .big{font-family:var(--disp);font-weight:800;font-size:clamp(30px,6vw,52px);letter-spacing:-.01em;
  color:var(--white);text-shadow:0 0 30px rgba(255,255,255,.20),0 0 64px rgba(255,255,255,.07);animation:breatheSoft 6s ease-in-out infinite}
.pot .usd{font-family:var(--mono);color:var(--fog);font-size:14px;margin-top:2px}
.pot .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--fog);text-transform:uppercase;margin-top:6px}
.badge{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ivory);
  border:1px solid var(--line2);border-radius:20px;padding:6px 14px}
.badge.rewind{color:var(--white);border-color:rgba(255,255,255,.4);box-shadow:0 0 22px rgba(255,255,255,.12)}
.herobtns{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.heromini{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;position:relative}
.heromini .m{font-family:var(--mono);font-size:12px;color:var(--fog)}
.heromini .m b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--white);letter-spacing:.01em;text-shadow:0 0 20px rgba(255,255,255,.16)}
.statusdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--fog);margin-right:6px;vertical-align:1px}
.statusdot.ok{background:#eef3ef;box-shadow:0 0 8px rgba(255,255,255,.55)}.statusdot.bad{background:#e8b7bd}
/* live viewer count — bigger, brighter, with a breathing pulse dot */
.viewers{position:absolute;right:0;top:-46px;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:14px;color:var(--ivory);letter-spacing:.02em;
  border:1px solid var(--line2);border-radius:22px;padding:7px 14px;background:rgba(255,255,255,.02);
  box-shadow:0 0 26px rgba(255,255,255,.05)}
.viewers b{font-family:var(--disp);font-weight:800;font-size:17px;color:var(--white);text-shadow:0 0 16px rgba(255,255,255,.4)}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--white);box-shadow:0 0 10px rgba(255,255,255,.8);animation:pulseDot 2.2s ease-in-out infinite}
@media(max-width:820px){.viewers{position:static;margin:12px auto 0}}

/* ── sections ── */
section.pane{padding:40px 0;border-bottom:1px solid var(--line)}
.h2{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.01em;margin:0 0 4px}
.sub{color:var(--fog);font-size:13.5px;margin:0 0 22px;max-width:640px}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1.2fr .8fr}
@media(max-width:820px){.g3,.g4,.g2{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--coal),#0d0f11);border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover{border-color:var(--line2);box-shadow:0 0 0 1px rgba(255,255,255,.04),0 8px 40px rgba(255,255,255,.05)}
.card h4{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--fog);text-transform:uppercase;font-weight:500}
.kpi{font-family:var(--disp);font-weight:800;font-size:30px;letter-spacing:-.01em;color:var(--ivory);text-shadow:0 0 22px rgba(255,255,255,.10)}
.kpi.sm{font-size:22px}
.row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.row .k{color:var(--fog)} .row .v{font-family:var(--mono)}
.ill{width:100%;max-width:300px;display:block;margin:6px auto;filter:grayscale(1)}
.step{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.step .n{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--fog);min-width:34px}
.step b{font-family:var(--disp);font-size:16px} .step p{margin:3px 0 0;color:var(--fog);font-size:13px}
.timeline{display:flex;gap:8px;align-items:center;justify-content:center;margin:18px 0;flex-wrap:wrap}
.timeline .t{font-family:var(--mono);font-size:12px;border:1px solid var(--line2);border-radius:10px;padding:8px 12px;color:var(--fog)}
.timeline .t.hit{color:var(--white);border-color:rgba(255,255,255,.4)}
.timeline .arw{color:var(--graphite)}

/* ── tables ── */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
th{font-family:var(--mono);font-weight:500;color:var(--fog);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:right}
th:first-child,td:first-child{text-align:left}
td.mono,.addr{font-family:var(--mono)}
.addr a{color:var(--ivory);border-bottom:1px dotted var(--graphite)}
.tag{font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:6px;border:1px solid var(--line2);color:var(--fog)}
.tag.rw{color:var(--white);border-color:rgba(255,255,255,.35)}
.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--fog)}
.pager button{font-family:var(--mono);font-size:12px;background:transparent;border:1px solid var(--line2);color:var(--ivory);border-radius:8px;padding:6px 12px;cursor:pointer}
.pager button:disabled{opacity:.35;cursor:default}
input,.inp{font-family:var(--mono);font-size:13px;background:#0b0d0f;border:1px solid var(--line2);color:var(--ivory);border-radius:9px;padding:10px 12px;width:100%}
details{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-top:8px;background:var(--coal)}
summary{cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--fog)}
details p,details code{color:var(--fog);font-size:12.5px}
code{font-family:var(--mono);color:var(--ivory);background:#0b0d0f;border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.fixture{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#e8cf9a;border:1px solid rgba(232,207,154,.35);border-radius:6px;padding:2px 8px;margin-left:8px}
footer{padding:34px 0;color:var(--fog);font-size:12px}
footer .frow{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.disc{margin-top:14px;max-width:760px;line-height:1.5}

/* ── ambient cold-white shine behind everything (minimal, monochrome) ── */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient::before{content:"";position:absolute;left:50%;top:-24vh;width:120vw;height:90vh;transform:translateX(-50%);
  background:radial-gradient(48% 60% at 50% 0%,rgba(255,255,255,.07),rgba(255,255,255,.02) 42%,transparent 68%);
  animation:ambientBreathe 12s ease-in-out infinite}
.ambient::after{content:"";position:absolute;inset:-30%;
  background:radial-gradient(28% 24% at 16% 26%,rgba(255,255,255,.035),transparent 60%),
             radial-gradient(26% 22% at 84% 34%,rgba(255,255,255,.03),transparent 60%),
             radial-gradient(30% 26% at 60% 88%,rgba(255,255,255,.025),transparent 62%);
  animation:ambientDrift 26s ease-in-out infinite alternate}
header,main,.hero,footer{position:relative;z-index:1}
@keyframes ambientBreathe{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes ambientDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-2.5%,0) scale(1.06)}}
@keyframes breatheGlow{0%,100%{text-shadow:0 0 34px rgba(255,255,255,.13),0 0 80px rgba(255,255,255,.05)}50%{text-shadow:0 0 58px rgba(255,255,255,.30),0 0 120px rgba(255,255,255,.12)}}
@keyframes breatheSoft{0%,100%{text-shadow:0 0 24px rgba(255,255,255,.14)}50%{text-shadow:0 0 44px rgba(255,255,255,.26)}}
@keyframes pulseDot{0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(255,255,255,.7)}50%{transform:scale(1.35);box-shadow:0 0 16px rgba(255,255,255,1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-.4deg)}75%{transform:translateX(3px) rotate(.4deg)}}
@keyframes flash{0%{text-shadow:0 0 90px rgba(255,255,255,.7);color:#fff}100%{text-shadow:0 0 42px rgba(255,255,255,.14)}}
.spin-rev{animation:spinrev 3s linear}
@keyframes spinrev{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){
  .count,.count.warn,.count.flash,.count.drawing,.pot .big,.spin-rev,.pulse-dot,.ambient::before,.ambient::after{animation:none!important}
}