/* ============================================================================
   PETRICHOR: design tokens, locked from the approved avatar/banner art
   (peach dawn-pink -> lavender dusk radial gradient, deep ink navy mark)
   and from the ui-ux-pro-max "Real-Time / Operations Landing" + Dark Mode OLED
   read (dashboard/data mood kept; the skill's blue/amber swapped for the art's
   own peach/lavender so the site matches the actual asset, not a generic pick).
   type:   Instrument Serif (display) + Inter (body/UI) + JetBrains Mono (data)
   space:  8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128
   radius: 28 (panels) / 18 (cards) / 12 (controls) / 999 (pills)
   motion: one idiom -> the "decay sawtooth": linear drain, instant reset
   ========================================================================= */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/inter-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');}

:root{
  --ink:#070f1f;
  --ink-2:#0e1d38;
  --ink-3:#152847;
  --line:rgba(246,201,168,.14);
  --line-strong:rgba(246,201,168,.30);
  --peach:#f6c9a8;
  --peach-hot:#ffb37e;
  --lavender:#c9b8dc;
  --lavender-dim:#7c7396;
  --cream:#fbf3ea;
  --cream-dim:rgba(251,243,234,.64);
  --cream-faint:rgba(251,243,234,.36);
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;
  --radius-pill:999px;
  --sp-1:8px;--sp-2:12px;--sp-3:16px;--sp-4:24px;--sp-5:32px;--sp-6:48px;--sp-7:64px;--sp-8:96px;--sp-9:128px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hero-cycle:12s;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--sp-4);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
noscript p{
  display:block;max-width:var(--max);margin:var(--sp-3) auto;padding:var(--sp-3) var(--sp-4);
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--cream-dim);font-size:14px;
}

/* background wash: a faint dawn glow bleeding up from the bottom-right, echoing the art's own radial gradient without repeating a hero-gradient cliche */
body::before{
  content:'';
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 88% -8%, rgba(246,201,168,.16), transparent 60%),
    radial-gradient(700px 500px at 6% 108%, rgba(201,184,220,.10), transparent 60%);
}

/* ---------------------------------------------------------------- nav --- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(7,15,31,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);
  height:72px;
}
.nav__brand{display:flex;align-items:center;gap:var(--sp-2);min-width:0;}
.nav__mark{width:34px;height:34px;border-radius:10px;flex:none;box-shadow:0 0 0 1px var(--line-strong);}
.nav__word{font-family:var(--font-display);font-size:22px;letter-spacing:.01em;white-space:nowrap;}
.nav__status{
  display:flex;align-items:center;gap:7px;
  margin-left:var(--sp-2);padding:5px 11px 5px 9px;
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--cream-dim);
  flex:none;
}
.nav__status-dot{width:6px;height:6px;border-radius:50%;background:var(--peach-hot);animation:dot-breathe 2.6s var(--ease) infinite;}
.nav__links{display:flex;align-items:center;gap:var(--sp-5);}
.nav__link{font-size:14px;color:var(--cream-dim);transition:color .2s var(--ease);}
.nav__link:hover{color:var(--cream);}
.nav__ca{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12px;color:var(--cream-dim);
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.02);
}
.nav__ca button{display:flex;color:var(--peach);}
.nav__actions{display:flex;align-items:center;gap:var(--sp-2);}
.icon-btn{
  width:38px;height:38px;border-radius:var(--radius-pill);overflow:hidden;flex:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  box-shadow:0 0 0 1px var(--line);
}
.icon-btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-strong),0 8px 18px rgba(0,0,0,.35);}
.icon-btn img{width:100%;height:100%;object-fit:cover;}
.btn-buy{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px 9px 16px;
  background:linear-gradient(135deg,var(--peach-hot),var(--peach));
  color:var(--ink);font-weight:700;font-size:14px;
  border-radius:var(--radius-pill);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
  box-shadow:0 8px 20px -6px rgba(255,179,126,.45);
}
.btn-buy:hover{transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(255,179,126,.6);}
.btn-buy img{width:26px;height:26px;border-radius:50%;flex:none;}

/* --------------------------------------------------------------- hero --- */
.hero{padding:var(--sp-8) 0 var(--sp-7);}
.hero .container{
  display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-7);align-items:center;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--peach);
  margin-bottom:var(--sp-3);
}
.hero__eyebrow::before{content:'';width:22px;height:1px;background:var(--peach);}
.hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(40px,5.4vw,66px);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 var(--sp-4);color:var(--cream);
}
.hero__title em{font-style:italic;color:var(--peach-hot);}
.hero__sub{
  font-size:17px;line-height:1.65;color:var(--cream-dim);
  max-width:46ch;margin:0 0 var(--sp-5);
}
.hero__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 15px 15px 24px;
  background:var(--cream);color:var(--ink);
  font-weight:700;font-size:15px;border-radius:var(--radius-pill);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(251,243,234,.35);}
.btn-primary img{width:30px;height:30px;border-radius:50%;}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 20px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  color:var(--cream-dim);font-size:14px;transition:border-color .2s var(--ease),color .2s var(--ease);
}
.btn-ghost:hover{border-color:var(--peach);color:var(--cream);}
.hero__stats{display:flex;gap:var(--sp-6);margin-top:var(--sp-6);}
.stat-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--cream-faint);margin-bottom:6px;}
.stat-value{font-family:var(--font-mono);font-size:22px;color:var(--cream);}

/* ---------------------------------------------------------- the meter --- */
.meter{position:relative;display:flex;flex-direction:column;align-items:center;}
.meter__tag{
  position:absolute;top:-14px;right:6px;z-index:3;
  display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 10px;
  background:var(--ink-2);border:1px dashed var(--line-strong);border-radius:var(--radius-pill);
  transform:rotate(3deg);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.meter__tag::before{
  content:'';position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;
  background:var(--ink);border:1px dashed var(--line-strong);border-radius:50%;
}
.meter__tag-label{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--cream-faint);}
.meter__tag-value{font-family:var(--font-mono);font-size:12px;color:var(--peach);}
.meter__tag button{display:flex;border-radius:50%;transition:transform .2s var(--ease);}
.meter__tag button:hover{transform:scale(1.1);}
.meter__tag button img{width:16px;height:16px;}
.meter__tag.is-copied .meter__tag-value{color:var(--peach-hot);}

.meter__frame{
  position:relative;
  width:min(300px,72vw);
  padding:var(--sp-6) var(--sp-5) var(--sp-4);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
}
.meter__drop-wrap{position:relative;width:196px;height:235px;}
.meter__ripples{position:absolute;left:50%;bottom:-26px;width:230px;height:70px;transform:translateX(-50%);opacity:.85;}
.meter__ripples path{animation:petri-ripple var(--hero-cycle) ease-out infinite;transform-origin:50% 0%;}
.meter__ripples path:nth-child(2){animation-delay:-90ms;opacity:.7;}
.meter__ripples path:nth-child(3){animation-delay:-180ms;opacity:.5;}
.meter__drop{
  position:absolute;inset:0;
  clip-path:url(#petriDropClip);
  background:rgba(255,255,255,.02);
}
.meter__liquid{
  position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;
  animation:petri-level var(--hero-cycle) linear infinite,petri-color var(--hero-cycle) linear infinite;
}
.meter__liquid::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 40%);
  mix-blend-mode:overlay;
}
.meter__outline{position:absolute;inset:0;width:100%;height:100%;}
.meter__outline path{fill:none;stroke:var(--line-strong);stroke-width:2;}
.meter__readout{text-align:center;}
.meter__percent{
  font-family:var(--font-mono);font-weight:700;font-size:44px;line-height:1;
  color:var(--cream);letter-spacing:-.01em;
}
.meter__status{
  margin-top:6px;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--peach-hot);
}
.meter__caption{
  font-size:12px;color:var(--cream-faint);text-align:center;max-width:26ch;line-height:1.5;
}
.meter__clock{
  display:flex;align-items:center;gap:8px;
  padding-top:var(--sp-3);margin-top:var(--sp-1);
  border-top:1px solid var(--line);width:100%;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--cream-faint);letter-spacing:.08em;
}
.meter__clock b{color:var(--cream-dim);font-weight:600;}

/* ------------------------------------------------------------- feeds --- */
.feeds{padding:var(--sp-8) 0 var(--sp-7);border-top:1px solid var(--line);}
.feeds__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  margin-bottom:var(--sp-6);
}
.feeds__title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);margin:0 0 8px;}
.feeds__note{font-size:14px;color:var(--cream-faint);max-width:44ch;}
.feeds__legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--cream-faint);}
.legend-dot{width:8px;height:8px;border-radius:50%;}
.legend-dot.fresh{background:var(--peach-hot);}
.legend-dot.cooling{background:var(--peach);}
.legend-dot.stale{background:var(--lavender);}
.legend-dot.evaporated{background:var(--lavender-dim);}

.feeds__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);
}
.feed-card{
  position:relative;padding:var(--sp-4);
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:var(--sp-3);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.feed-card:hover{border-color:var(--line-strong);transform:translateY(-3px);}
.feed-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);}
.feed-card__name{font-size:13px;font-weight:600;color:var(--cream);line-height:1.35;}
.feed-card__ring-wrap{position:relative;width:44px;height:44px;flex:none;}
.feed-card__ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.feed-card__ring-track{fill:none;stroke:var(--line);stroke-width:4;}
.feed-card__ring-progress{fill:none;stroke:var(--peach-hot);stroke-width:4;stroke-linecap:round;animation:ring-drain var(--ring-dur,10000ms) linear infinite;animation-delay:var(--ring-delay,0ms);}
.feed-card__bottom{display:flex;align-items:baseline;justify-content:space-between;}
.feed-card__weight{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--cream);}
.feed-card__status{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--cream-faint);}

/* ------------------------------------------------------------ footer --- */
.footer{border-top:1px solid var(--line);padding:var(--sp-6) 0 var(--sp-7);}
.footer .container{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--sp-6);
}
.footer__brand{display:flex;align-items:center;gap:var(--sp-2);}
.footer__mark{width:30px;height:30px;border-radius:9px;box-shadow:0 0 0 1px var(--line-strong);}
.footer__word{font-family:var(--font-display);font-size:18px;}
.footer__ticker{font-family:var(--font-mono);font-size:11px;color:var(--peach);margin-left:6px;}
.footer__meta{font-size:13px;color:var(--cream-faint);max-width:38ch;line-height:1.6;margin-top:var(--sp-2);}
.footer__counters{display:flex;gap:var(--sp-6);}
.footer__links{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-end;}
.footer__links-row{display:flex;gap:var(--sp-2);}
.footer__ca{font-family:var(--font-mono);font-size:11px;color:var(--cream-faint);}

/* -------------------------------------------------------------- boot --- */
#boot-error{
  position:fixed;inset:auto 0 0 0;z-index:99999;
  background:#3a0e0e;color:#ffd7d0;font:12px/1.6 var(--font-mono);
  padding:12px 16px;white-space:pre-wrap;
}

/* ----------------------------------------------------------- motion --- */
@keyframes petri-level{
  0%{height:100%;}
  88%{height:6%;}
  100%{height:6%;}
}
@keyframes petri-color{
  0%{background-color:var(--peach-hot);}
  55%{background-color:var(--peach);}
  100%{background-color:var(--lavender-dim);}
}
@keyframes petri-ripple{
  0%,88%{transform:scale(1);opacity:.28;}
  95%{transform:scale(1.1);opacity:.85;}
  100%{transform:scale(1);opacity:.28;}
}
@keyframes ring-drain{
  from{stroke-dashoffset:0;}
  to{stroke-dashoffset:var(--ring-circ,175);}
}
@keyframes dot-breathe{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.72);}
}
@keyframes flash-copied{
  0%{opacity:0;transform:translateY(3px);}
  15%,85%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(-3px);}
}
.copied-flash{animation:flash-copied 1.6s var(--ease);}

@media (prefers-reduced-motion:reduce){
  .meter__liquid,.meter__ripples path,.feed-card__ring-progress,.nav__status-dot{animation:none !important;}
  .meter__liquid{height:62%;background-color:var(--peach);}
  .feed-card__ring-progress{stroke-dashoffset:calc(var(--ring-circ,175) * .4);}
}

/* -------------------------------------------------------- responsive --- */
@media (max-width:920px){
  .hero .container{grid-template-columns:1fr;}
  .meter{order:-1;margin-bottom:var(--sp-3);}
  .nav__links{display:none;}
  .feeds__grid{grid-template-columns:repeat(2,1fr);}
  .footer .container{flex-direction:column;}
  .footer__links{align-items:flex-start;}
}
@media (max-width:520px){
  .nav__ca{display:none;}
  .btn-buy span{display:none;}
  .hero{padding:var(--sp-6) 0 var(--sp-5);}
  .hero__stats{gap:var(--sp-4);flex-wrap:wrap;}
  .feeds__grid{grid-template-columns:1fr 1fr;gap:var(--sp-2);}
  .feed-card{padding:var(--sp-3);}
  .meter__frame{width:min(280px,84vw);}
}
@media (max-width:390px){
  .feeds__grid{grid-template-columns:1fr;}
  .container{padding:0 var(--sp-3);}
  .nav__status-label{display:none;}
  .nav__status{padding:7px;}
  .nav .container{gap:var(--sp-2);}
}