/* ANN – Research & Education. One dark world: night sky, aurora green for good, amber for the Sun and timing, violet for planning. */
:root{
  --bg:#03050c; --bg2:#080c19; --card:rgba(10,14,28,.62); --line:rgba(255,255,255,.11);
  --fg:#eef2f8; --dim:#9aa6b8; --mute:#6c778a;
  --g:#7df0b8; --am:#ffc978; --vi:#c3b2ff; --hot:#ff9b6a; --blue:#8fc4ff;
  --display:"Sora","Albert Sans",system-ui,sans-serif; --body:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0}
.eyebrow{font:500 .72rem/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.g{color:var(--g)}.am{color:var(--am)}.vi{color:var(--vi)}.hot{color:var(--hot)}.dim{color:var(--dim)}
.num{font-variant-numeric:tabular-nums}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:linear-gradient(to bottom,rgba(3,5,12,.92),rgba(3,5,12,.55));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:50;background:var(--bg)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand b{font:700 1.3rem/1 var(--display);letter-spacing:.04em}
.brand span{font:500 .58rem/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nav{display:flex;gap:4px}
.nav a{text-decoration:none;font-size:.92rem;color:var(--dim);padding:8px 12px;border-radius:999px}
.nav a[aria-current="page"]{color:var(--fg);background:rgba(255,255,255,.08)}
.nav a:hover{color:var(--fg)}
.nav a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* bottom tab bar on phones */
.tabbar{display:none}
@media (max-width:760px){
  .nav{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(5,8,18,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tabbar a{display:grid;justify-items:center;gap:2px;text-decoration:none;font-size:.7rem;color:var(--dim);padding:4px}
  .tabbar a[aria-current="page"]{color:var(--g)}
  .tabbar svg{width:22px;height:22px}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}

/* shared pieces */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:.8em 1.3em;font:600 .95rem/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-g{background:var(--g);color:#04241a}
.btn-vi{background:var(--vi);color:#160f33}
.btn-q{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--fg)}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}
.card h3{font:500 .72rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid}
.pill i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.tag{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px}
.tag.good{background:rgba(125,240,184,.15);color:var(--g)}
.tag.watch{background:rgba(255,201,120,.15);color:var(--am)}
.tag.limited{background:rgba(255,255,255,.08);color:var(--dim)}
.tag.early{background:rgba(195,178,255,.15);color:var(--vi)}
.sample{font:500 .68rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#14100a;background:var(--am);padding:5px 10px;text-align:center}
.foot{padding-block:36px 40px;color:var(--mute);font-size:.8rem;line-height:1.6;border-top:1px solid var(--line);margin-top:48px}
.foot b{color:var(--dim);font-weight:500}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}

.ico{flex:none;vertical-align:middle}
.kpchip{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--kc);font-variant-numeric:tabular-nums}
.kpchip b{min-width:3.2em;text-align:right}
.kpchip i{display:block;width:64px;height:7px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.kpchip s{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--kc) 55%,transparent),var(--kc));box-shadow:0 0 10px var(--kc)}
.kpchip.faint{opacity:.72}.kpchip.faint s{box-shadow:none}
.kpchip.none{color:var(--mute);font-weight:500}
.tag.plan{background:rgba(255,255,255,.06);color:var(--dim)}

.hdr .hr{display:flex;align-items:center;gap:10px}
.share{display:inline-flex;align-items:center;gap:7px;font:600 .88rem/1 inherit;font-family:inherit;color:#0b1a14;background:var(--g);border:0;border-radius:999px;padding:9px 15px;cursor:pointer;box-shadow:0 0 18px rgba(125,240,184,.35)}
.share:hover{filter:brightness(1.08)}.share:focus-visible{outline:2px solid #fff;outline-offset:2px}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:60;background:#f2f5fa;color:#0b0f18;font-weight:600;font-size:.9rem;padding:10px 16px;border-radius:12px;transition:.25s;max-width:calc(100% - 32px);word-break:break-all}
.toast.on{opacity:1;transform:translate(-50%,0)}