:root {
  --shell-void: #050507;
  --shell-surface: #0d0e12;
  --shell-bone: #f2eee5;
  --shell-quiet: #b8b4ab;
  --shell-coral: #ff654d;
  --shell-green: #b9ff5c;
  --shell-violet: #7656ff;
  --shell-cobalt: #4e9cff;
  --shell-line: rgba(242,238,229,.15);
  --shell-display: "Faculty Glyphic", Georgia, serif;
  --shell-body: "Onest", system-ui, sans-serif;
  --shell-data: "Azeret Mono", ui-monospace, monospace;
  color-scheme: dark;
}

html { background: var(--shell-void); scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: clip; }
body {
  position: relative; min-height: 100svh;
  background:
    radial-gradient(circle at 82% 8%, rgba(118,86,255,.11), transparent 30rem),
    radial-gradient(circle at 8% 45%, rgba(255,101,77,.08), transparent 34rem),
    var(--shell-void) !important;
  color: var(--shell-bone) !important;
  font-family: var(--shell-body) !important;
}
a { color: inherit; }
::selection { color: #10120d; background: var(--shell-green); }
:focus-visible { outline: 2px solid var(--shell-green) !important; outline-offset: 4px; }

.skip-link {
  position: fixed; z-index: 1000; top: 1rem; left: 1rem;
  transform: translateY(-180%); padding: .8rem 1rem; border-radius: 999px;
  background: var(--shell-green); color: #10120d; transition: transform .25s;
}
.skip-link:focus { transform: none; }

.shell-filament {
  position: fixed; z-index: 0; right: -13rem; top: 18vh; width: 32rem; height: 32rem;
  border: 4px solid var(--shell-coral); border-radius: 46% 54% 61% 39% / 42% 37% 63% 58%;
  opacity: .24; pointer-events: none; mix-blend-mode: screen;
  filter: drop-shadow(0 0 12px var(--shell-coral)) drop-shadow(0 0 48px rgba(255,101,77,.4));
  transform: rotate(calc(var(--shell-scroll, 0) * 220deg)) translate3d(calc(var(--shell-pointer-x, 0) * 14px), calc(var(--shell-pointer-y, 0) * 10px), 0);
}
.shell-filament::before { content: ""; position: absolute; inset: 11%; border: 1px solid var(--shell-green); border-radius: inherit; transform: rotate(23deg); }
.shell-filament::after { content: ""; position: absolute; left: -24%; top: 47%; width: 38%; height: 2px; background: linear-gradient(90deg, transparent, var(--shell-coral)); box-shadow: 0 0 12px var(--shell-coral); }

body > header, body > main, body > section, body > footer, body > .container { position: relative; z-index: 2; }
.nav, body > header.nav {
  background: rgba(5,5,7,.68) !important; border-bottom: 1px solid var(--shell-line) !important;
  backdrop-filter: blur(20px) saturate(130%); padding-top: env(safe-area-inset-top);
}
.brand .name, .brand .wordmark, .brand .word, .foot-brand, .world-brand { color: var(--shell-bone) !important; }
.period, .kicker, .eyebrow { color: var(--shell-coral) !important; }
.nav-links a, .nav-back { color: var(--shell-quiet) !important; }

.shell-motion {
  position: fixed; z-index: 95; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  min-width: 44px; min-height: 44px; padding: .65rem .9rem; border: 1px solid var(--shell-line);
  border-radius: 999px; background: rgba(13,14,18,.74); color: var(--shell-quiet);
  display: flex; align-items: center; gap: .55rem; font: .62rem var(--shell-data); letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(18px); touch-action: manipulation;
}
.shell-motion i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--shell-green); box-shadow: 0 0 14px var(--shell-green); }
.shell-paused .shell-motion i { background: var(--shell-quiet); box-shadow: none; }
.shell-paused .shell-filament { transform: none; }

h1, h2, .headline, .display-2, .text-gradient { font-family: var(--shell-display) !important; letter-spacing: -.04em !important; }
h1 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.lede, .body-dim, .muted, .updated, .disclaimer { color: var(--shell-quiet) !important; }

.btn--primary, .calc-submit, a.btn--primary {
  background: var(--shell-green) !important; border-color: var(--shell-green) !important; color: #10120d !important;
  box-shadow: 0 12px 48px rgba(185,255,92,.15) !important;
}
.btn, button, input { touch-action: manipulation; }
.btn { border-radius: 999px !important; }

.calc-page { position: relative; isolation: isolate; }
.calc-page::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 15rem; translate: -50%; width: min(70vw, 46rem); aspect-ratio: 1;
  border: 1px solid rgba(185,255,92,.24); border-radius: 50%; box-shadow: 0 0 90px rgba(185,255,92,.08), inset 0 0 70px rgba(255,101,77,.06);
}
.calc-card, .result-card, .calc-appcta, .meal {
  background: rgba(13,14,18,.72) !important; border-color: var(--shell-line) !important; backdrop-filter: blur(18px);
}
.calc-input, .opt { background: rgba(5,5,7,.58) !important; color: var(--shell-bone) !important; }
.opt[aria-pressed="true"] { background: var(--shell-green) !important; border-color: var(--shell-green) !important; color: #10120d !important; }
.result-card::after {
  content: ""; position: absolute; inset: 1.4rem; border: 2px solid var(--shell-green); border-radius: 50%; opacity: .15; pointer-events: none;
}
.result-num, .meal-protein { color: var(--shell-green) !important; }

.legal-hero { overflow: hidden; background: transparent !important; border-bottom: 1px solid var(--shell-line); }
.legal-hero::after { content: ""; position: absolute; right: 8%; bottom: -11rem; width: 24rem; height: 24rem; border: 3px solid var(--shell-violet); border-radius: 46% 54% 62% 38%; opacity: .22; filter: drop-shadow(0 0 30px var(--shell-violet)); }
.legal { color: var(--shell-quiet) !important; }
.legal h2 { color: var(--shell-bone) !important; scroll-margin-top: 7rem; }
.legal a { color: var(--shell-green) !important; }
.toc { border-color: var(--shell-line) !important; background: rgba(13,14,18,.58) !important; backdrop-filter: blur(15px); }
.callout { background: rgba(118,86,255,.09) !important; border-color: rgba(118,86,255,.32) !important; }

.footer, body > footer { background: #08090b !important; border-top: 1px solid var(--shell-line) !important; }
.footer a, body > footer a { color: var(--shell-quiet); }

body.shell-whoop { --shell-coral: var(--shell-cobalt); }
body.shell-whoop .badge, body.shell-whoop .live, body.shell-whoop .check-tag { color: var(--shell-cobalt) !important; }
body.shell-whoop .mock, body.shell-whoop .device-mock, body.shell-whoop .privacy-card {
  background: rgba(13,14,18,.68) !important; border-color: var(--shell-line) !important; backdrop-filter: blur(16px);
}
body.shell-whoop .privacy-grid { gap: 1px !important; background: var(--shell-line); }
body.shell-whoop .privacy-card { border-radius: 0 !important; }

@media (max-width: 720px) {
  .shell-filament { width: 22rem; height: 22rem; right: -12rem; top: 11rem; }
  .shell-motion span { display: none; }
  .nav-links { display: none !important; }
  .legal { padding-inline: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .shell-filament { transform: none !important; }
}