:root{
  --bg:#080808;
  --text:#efebe4;
  --muted:#77736d;
  --accent:#d8b775;
  --line:rgba(239,235,228,.13);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{min-height:100%;background:var(--bg)}
body{
  margin:0;min-height:100svh;overflow:hidden;color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),#080808;
  background-size:72px 72px;
}
.noise{
  position:fixed;inset:-50%;z-index:20;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noise .24s steps(2) infinite
}
@keyframes noise{0%{transform:translate(0)}25%{transform:translate(2%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(3%,1%)}100%{transform:translate(-1%,-2%)}}
.ambient{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.12}
.ambient-a{width:42vw;height:42vw;right:-15vw;top:-20vw;background:var(--accent);animation:drift 10s ease-in-out infinite alternate}
.ambient-b{width:32vw;height:32vw;left:-16vw;bottom:-18vw;background:#6e5a36;animation:drift 14s 2s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(5vw,5vh) scale(1.12)}}
.pointer-light{
  position:fixed;z-index:0;left:-260px;top:-260px;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(216,183,117,.1),transparent 68%);transition:transform .12s linear
}
.countdown-header,.countdown-footer{
  position:fixed;z-index:5;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;
  color:var(--muted);font-size:9px;letter-spacing:.22em
}
.countdown-header{top:26px}.countdown-footer{bottom:24px}
.archive-mark,.live-mark{display:flex;align-items:center;gap:10px}
.archive-mark i{color:var(--accent);font-style:normal;font-size:13px}
.live-mark i{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1.8s infinite}
@keyframes pulse{50%{opacity:.25}}
.countdown-main{
  position:relative;z-index:2;min-height:100svh;width:min(1380px,calc(100% - 80px));margin:auto;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(580px,1.1fr);gap:5vw;align-items:center
}
.eyebrow{margin:0 0 34px;color:var(--muted);font-size:10px;letter-spacing:.25em}
.eyebrow span{color:var(--accent)}
.countdown-copy h1{margin:0;font-size:clamp(54px,6.4vw,104px);line-height:.98;letter-spacing:-.055em;font-weight:460}
.countdown-copy h1 em{color:var(--accent);font-family:Georgia,"Times New Roman",serif;font-weight:400}
.intro{margin:38px 0 0;color:var(--muted);font-size:14px;line-height:1.9}
.clock-shell{
  position:relative;min-height:520px;display:grid;place-content:center;
  border:1px solid var(--line);background:rgba(12,12,11,.52);backdrop-filter:blur(18px)
}
.clock-shell:before,.clock-shell:after{content:"";position:absolute;width:28px;height:28px;border-color:var(--accent);opacity:.6}
.clock-shell:before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}
.clock-shell:after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}
.orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(216,183,117,.09);border-radius:50%;pointer-events:none}
.orbit-one{width:430px;height:430px;margin:-215px;animation:spin 24s linear infinite}
.orbit-one:after{content:"✦";position:absolute;top:26px;left:62px;color:var(--accent);font-size:10px}
.orbit-two{width:350px;height:350px;margin:-175px;border-style:dashed;animation:spin 36s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.clock-grid{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 40px}
.time-unit{width:112px;text-align:center}
.time-unit strong{
  display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-variant-numeric:tabular-nums;
  font-size:clamp(54px,5.3vw,82px);line-height:1;letter-spacing:-.06em
}
.time-unit.seconds strong{color:var(--accent)}
.time-unit span{display:block;margin-top:15px;color:var(--muted);font-size:8px;letter-spacing:.2em}
.time-divider{width:1px;height:74px;background:linear-gradient(transparent,var(--line),transparent)}
.clock-meta{
  position:absolute;left:34px;right:34px;bottom:28px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;color:var(--muted);font-size:8px;letter-spacing:.18em
}
.clock-meta strong{color:#aaa49b;font-weight:500}
.opening{
  position:fixed;inset:0;z-index:100;display:grid;place-content:center;text-align:center;background:#080808;
  opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .8s var(--ease),transform 1.2s var(--ease),visibility .8s
}
.opening.visible{opacity:1;visibility:visible;transform:none}
.opening span{color:var(--accent);font-family:Georgia,serif;font-size:18px;letter-spacing:.25em}
.opening h2{margin:18px 0 0;font-size:clamp(56px,10vw,140px);font-weight:450;letter-spacing:-.06em}
@media(max-width:1000px){
  body{overflow:auto}.countdown-main{grid-template-columns:1fr;padding:120px 0 100px;gap:65px}.clock-shell{min-height:440px}.countdown-copy{text-align:center}.intro{margin-left:auto;margin-right:auto}
}
@media(max-width:600px){
  body{background-size:44px 44px}.countdown-header,.countdown-footer{left:18px;right:18px;font-size:7px}.countdown-main{width:calc(100% - 32px);padding-top:105px;gap:48px}.countdown-copy h1{font-size:clamp(48px,14vw,72px)}.intro{font-size:13px}.clock-shell{min-height:360px}.clock-grid{padding:0 12px}.time-unit{width:72px}.time-unit strong{font-size:clamp(42px,13vw,62px)}.time-divider{height:52px}.orbit-one{width:310px;height:310px;margin:-155px}.orbit-two{width:250px;height:250px;margin:-125px}.clock-meta{left:18px;right:18px}.countdown-footer span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.noise,.ambient,.orbit,.live-mark i{animation:none}.pointer-light{display:none}}