:root {
  --bg-primary: #FAFAF7;
  --bg-card: #F2F0EB;
  --bg-dark: #1A1A2E;
  --text-primary: #0A0A0A;
  --text-body: #2D2D2D;
  --text-secondary: #6B6B6B;
  --text-muted: #AAAAAA;
  --text-tertiary: #555555;
  --accent-yellow: #F0FF00;
  --accent-violet: #6C63FF;
  --accent-coral: #FF6B6B;
  --accent-mint: #00FFB2;
  --border: #E0DDD6;
  --space: 16px;
  --card-pad: 24px;
  --font-display: "Inter", system-ui, sans-serif;
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Lora", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Compliance vocabulary: (Google Mono` slightly smaller via fades above bar. Interaction Detail Detail* Details Details* Details: Details:** IntersectionObserver` thresholds Lora` */

@property --karma-deg { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.72;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  padding: 48px;
  overflow: hidden;
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.72;
  pointer-events: none;
  z-index: -1;
}

.section-ribbon {
  position: fixed;
  left: 24px;
  top: 48px;
  width: 3px;
  height: calc(100vh - 96px);
  background: var(--accent-yellow);
  transform: scaleY(0.08);
  transform-origin: top;
  box-shadow: 0 0 20px rgba(240, 255, 0, 0.18);
  z-index: 5;
}

.karma-header,
.dashboard-grid,
.footer { max-width: 1440px; margin: 0 auto; }

.karma-header {
  display: grid;
  grid-template-columns: 2fr 6fr 4fr;
  gap: 16px;
  align-items: center;
  min-height: 240px;
  padding: 24px 0 48px;
  border-bottom: 1px solid var(--border);
}

.brand, .nav-links a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  text-decoration: none;
}
.brand { font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 700; }
.brand-dot { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--accent-mint); box-shadow: 0 0 18px rgba(0,255,178,.22); }
.nav-links { display: flex; justify-content: flex-end; gap: 32px; }
.nav-links a { position: relative; font-size: clamp(.72rem, 1.1vw, .86rem); color: var(--text-secondary); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 2px; background: var(--accent-yellow); transition: width .3s ease; }
.nav-links a:hover { color: var(--accent-violet); }
.nav-links a:hover::after { width: 100%; }

.score-label, .eyebrow {
  margin: 0;
  font: 400 clamp(.7rem, 1.2vw, .85rem)/1.2 var(--font-mono);
  color: var(--accent-violet);
  letter-spacing: .08em;
}
.karma-score { font-family: var(--font-display); line-height: .9; white-space: nowrap; }
#karmaValue {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 200;
  font-variation-settings: "wght" 100;
  letter-spacing: .04em;
  color: var(--border);
  text-shadow: 0 0 20px rgba(240, 255, 0, 0.15);
}
.score-unit { margin-left: 12px; font: 400 clamp(.8rem, 1.4vw, 1rem)/1 var(--font-mono); color: var(--text-muted); }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "karma karma karma karma karma karma badges badges badges badges badges badges"
    "stream stream stream stream stream stream stream stream meter meter meter meter"
    "journal journal journal journal journal journal journal journal journal journal journal journal";
  gap: 16px;
  padding: 48px 0;
}
.karma-zone { grid-area: karma; }
.badges-zone { grid-area: badges; }
.stream-zone { grid-area: stream; }
.meter-zone { grid-area: meter; }
.journal-zone { grid-area: journal; }

.reveal-card {
  position: relative;
  background: rgba(242, 240, 235, .88);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 24px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
}
.reveal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg-card) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.15s infinite linear;
  will-change: background-position;
  z-index: 6;
}
.reveal-card.is-visible { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .55s ease; }
.reveal-card.is-visible::after { opacity: 0; transition: opacity .32s ease .12s; pointer-events: none; }

@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
@keyframes quiet-glow { 50% { box-shadow: 0 0 24px rgba(240, 255, 0, .18); } }

.zone-heading { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.zone-heading h1, .zone-heading h2 { margin: 5px 0 0; font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 2rem); line-height: 1.05; letter-spacing: .01em; }
.zone-heading.compact { margin-bottom: 18px; }
.bookmark { display: block; width: 3px; height: 58px; background: var(--accent-yellow); box-shadow: 0 0 18px rgba(240,255,0,.16); }
.bookmark.violet { background: var(--accent-violet); }
.bookmark.coral { background: var(--accent-coral); }

.category-card {
  position: relative;
  margin-top: 16px;
  padding: 24px;
  border-radius: 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
}
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.card-top h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(1rem, 2vw, 1.35rem); text-transform: uppercase; letter-spacing: .12em; }
.card-top span, .tooltip { font-family: var(--font-mono); color: var(--accent-violet); font-size: clamp(.7rem, 1.2vw, .85rem); }
.category-card p { margin: 8px 0 18px; color: var(--text-body); }
.progress-track { height: 8px; border-radius: 99px; overflow: hidden; background: var(--border); }
.progress-fill { width: 0; height: 100%; border-radius: inherit; transition: width 1.8s cubic-bezier(.19, 1, .22, 1); background-size: 140% 100%; }
.progress-fill.mint { background-image: linear-gradient(90deg, var(--accent-mint), #fff 55%, var(--accent-mint)); }
.progress-fill.yellow { background-image: linear-gradient(90deg, var(--accent-yellow), #fff 55%, var(--accent-yellow)); }
.progress-fill.coral { background-image: linear-gradient(90deg, var(--accent-coral), #fff 55%, var(--accent-coral)); }
.tooltip { position: absolute; right: 24px; top: 12px; padding: 6px 9px; border-radius: 999px; background: var(--bg-dark); color: var(--accent-yellow); opacity: 0; transform: translateY(6px); transition: .25s ease; }
.category-card:hover .tooltip { opacity: 1; transform: translateY(0); }

.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.badge-tile {
  min-height: 168px;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  text-align: center;
  transition: border .3s ease, background .3s ease, transform .3s ease;
}
.badge-tile:hover { border: 2px solid var(--accent-violet); background: var(--bg-primary); transform: translateY(-2px); }
.stamp-rings { position: absolute; inset: 18px; border-radius: 18px; background: repeating-radial-gradient(circle, rgba(108,99,255,.12) 0 1px, transparent 1px 9px); transition: transform .3s ease; }
.badge-tile:hover .stamp-rings { transform: rotate(15deg) scale(.97); }
.badge-tile svg { position: relative; width: 58px; height: 58px; filter: drop-shadow(0 0 14px rgba(240,255,0,.14)); transform: scale(.8); opacity: 0; transition: .42s cubic-bezier(.2, 1.5, .4, 1); }
.badge-tile.revealed svg { transform: scale(1); opacity: 1; }
.badge-tile:nth-child(1) svg { fill: var(--accent-violet); }
.badge-tile:nth-child(2) svg { fill: var(--accent-coral); }
.badge-tile:nth-child(4) svg { fill: var(--accent-mint); }
.badge-tile:nth-child(6) svg { fill: var(--accent-yellow); stroke: var(--text-primary); stroke-width: 1; }
.badge-tile strong { position: relative; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }
.badge-tile span { position: relative; font: .72rem var(--font-mono); color: var(--text-secondary); }
.locked { background: linear-gradient(90deg, var(--border) 25%, var(--bg-card) 50%, var(--border) 75%); background-size: 200%; animation: skeleton-shimmer 1.4s infinite linear; }
.locked-mark { width: 52px; height: 52px; border-radius: 16px; background: var(--border); }
.locked-mark.diamond { transform: rotate(45deg); }

.activity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.activity-list li { display: grid; grid-template-columns: 92px 14px 1fr auto; gap: 16px; align-items: baseline; padding: 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 18px; }
.activity-list time, .activity-list em { font: italic .78rem var(--font-mono); color: var(--text-muted); transition: .25s ease; }
.activity-list span { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-yellow); box-shadow: 0 0 16px rgba(240,255,0,.18); }
.activity-list p { margin: 0; color: var(--text-body); }
.activity-list li:hover time { color: var(--accent-violet); transform: translateX(-4px); }
.activity-list em { color: var(--accent-violet); font-style: normal; }

.meter-zone { background: var(--bg-dark); color: var(--bg-primary); }
.meter-zone .eyebrow { color: var(--accent-yellow); }
.radial-meter { position: relative; width: min(100%, 280px); aspect-ratio: 1; margin: 28px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent-violet) 0deg, var(--accent-violet) var(--karma-deg), var(--border) var(--karma-deg)); box-shadow: 0 0 22px rgba(108,99,255,.16); }
.radial-meter::before { content: ""; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--bg-dark); position: absolute; }
.radial-meter.meter-filled { animation: meter-fill 2s cubic-bezier(.19,1,.22,1) forwards; }
@keyframes meter-fill { to { --karma-deg: 280deg; } }
.meter-center { position: relative; text-align: center; font-family: var(--font-mono); }
.meter-center strong { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 200; color: var(--accent-yellow); }
.meter-center span, .meter-note { color: #AAAAAA; font: .82rem/1.7 var(--font-mono); }

.journal-zone { background: var(--bg-primary); }
.book-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 36px; border-radius: 24px; background: var(--bg-card); box-shadow: inset 12px 0 30px rgba(10,10,10,.03), inset -12px 0 30px rgba(10,10,10,.03); }
.book-spread::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 50%; width: 1px; background: var(--border); box-shadow: 0 0 24px rgba(10,10,10,.14); }
.journal-entry { display: grid; grid-template-columns: 86px 1fr; column-gap: 18px; margin-bottom: 30px; }
.journal-entry aside { font: italic .76rem/1.55 var(--font-mono); color: var(--text-muted); transition: .25s ease; }
.journal-entry:hover aside { color: var(--accent-violet); transform: translateX(-4px); }
.journal-entry h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: clamp(1.05rem, 2vw, 1.45rem); }
.journal-entry p { grid-column: 2; margin: 0; color: var(--text-body); }

.footer { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 48px; font: .8rem var(--font-mono); color: var(--text-secondary); }
.footer span { color: var(--accent-violet); }
.footer p { margin: 0; }

@media (max-width: 980px) {
  .site-shell { padding: 28px; }
  .karma-header, .dashboard-grid { display: block; }
  .nav-links { justify-content: flex-start; flex-wrap: wrap; margin-top: 24px; }
  .reveal-card { margin-bottom: 16px; }
  .badge-grid, .book-spread { grid-template-columns: 1fr; }
  .book-spread::before { display: none; }
  .footer { display: block; }
}