/* Base: reset, backdrop texture, type utilities, motion primitives, view transitions. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 var(--f-text);
  overflow: hidden; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
/* fine grain + a soft top-lit mesh behind everything (§4) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }
body::after {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 70vh; z-index: 0; pointer-events: none;
  background: radial-gradient(52% 60% at 12% -8%, var(--mesh-1), transparent 70%), radial-gradient(46% 55% at 92% -12%, var(--mesh-2), transparent 70%);
}
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type */
.display { font-family: var(--f-display); font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.h2 { font-family: var(--f-display); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
.eyebrow { font: 600 .68rem/1.4 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--f-mono); font-size: .86em; }
.num { font-variant-numeric: tabular-nums; }
.ink-2 { color: var(--ink-2); } .muted { color: var(--muted); } .faint { color: var(--faint); }
.good { color: var(--good); } .crit { color: var(--crit); } .warn { color: var(--warn); }

/* motion primitives */
@keyframes shimmer { to { background-position: -100% 0; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
@keyframes flash { 0% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }

/* view transitions between screens (§8) */
::view-transition-old(root) { animation: 160ms var(--ease-io) both vt-out; }
::view-transition-new(root) { animation: 380ms var(--spring-soft) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
html[data-vt="next"]::view-transition-old(root) { animation: 180ms var(--ease) both slide-out-left; }
html[data-vt="next"]::view-transition-new(root) { animation: 420ms var(--spring-soft) both slide-in-right; }
html[data-vt="prev"]::view-transition-old(root) { animation: 180ms var(--ease) both slide-out-right; }
html[data-vt="prev"]::view-transition-new(root) { animation: 420ms var(--spring-soft) both slide-in-left; }
@keyframes slide-out-left { to { opacity: 0; transform: translateX(-24px); } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-out-right { to { opacity: 0; transform: translateX(24px); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-28px); } }
.topbar { view-transition-name: topbar; }
.sidebar { view-transition-name: sidebar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-group(topbar), ::view-transition-group(sidebar), ::view-transition-group(tabbar) { animation-duration: 0s; }