/* Oura-style layer: tokens + hero + stories + contributors */
:root {
  --bg: #f5f3ef; --surface: #fffefc; --surface-2: #f8f6f2; --ink: #17181d; --ink-2: #3b3d45; --muted: #74757d; --faint: #a6a6ad;
  --line: rgba(40, 30, 20, .07); --line-2: rgba(40, 30, 20, .12); --track: #ece8e2;
  --ok: #2b9d6c; --hi: #e05a5a; --lo: #3b7ee0; --warn: #d38f22; --brand: #6c5cf2; --brand-wash: #efecff;
  --shadow: 0 1px 1px rgba(60, 40, 20, .03), 0 12px 32px -14px rgba(60, 40, 20, .12);
  --r: 24px;
}
:root[data-theme='dark'] {
  --bg: #0b0d17; --surface: #141726; --surface-2: #1a1e30; --ink: #f2f2f6; --ink-2: #c8cad6; --muted: #9a9db0; --faint: #6a6e84;
  --line: rgba(255, 255, 255, .06); --line-2: rgba(255, 255, 255, .1); --track: #252a40; --brand-wash: #221f3d;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .04);
}
h1 { font-weight: 600; letter-spacing: -.035em; font-size: 34px; }
h2 { font-weight: 600; letter-spacing: -.025em; }
.card { border-radius: var(--r); }

/* gradient ring */
.gring { position: relative; flex: none; }
.gring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.gring .trk { fill: none; stroke: var(--track); }
.gring .arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); }
.gring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gring.mini .in b { font: 600 15px var(--display); letter-spacing: -.02em; }
.o-lab { font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.o-num { font: 300 78px/1 var(--display); letter-spacing: -.055em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.o-num.sm { font-size: 50px; margin: 0 0 2px; }
.o-word { font: 500 14px var(--sans); color: var(--ink-2); }

/* hero */
.ohero, .syhero { position: relative; overflow: hidden; border-radius: 30px; background: var(--surface); box-shadow: var(--shadow); padding: 30px 34px; isolation: isolate; }
.mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mesh i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .62; animation: drift 16s ease-in-out infinite alternate; }
.mesh i:nth-child(1) { width: 340px; height: 340px; background: #cfc6ff; left: -80px; top: -120px; }
.mesh i:nth-child(2) { width: 300px; height: 300px; background: #bdeee0; right: -60px; bottom: -150px; animation-delay: -6s; }
.mesh i:nth-child(3) { width: 260px; height: 260px; background: #ffd8c4; right: 22%; top: -140px; animation-delay: -11s; opacity: .5; }
:root[data-theme='dark'] .mesh i { opacity: .22; }
@keyframes drift { to { transform: translate(40px, 30px) scale(1.12); } }
.ohero .gring .trk, .syhero .gring .trk { stroke: color-mix(in srgb, var(--surface) 55%, transparent); }
.ohero-in, .syhero-in { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.o-cap { font: 400 18px/1.45 var(--sans); color: var(--ink-2); margin: 0; max-width: 460px; }
.o-cap b { color: var(--ink); font-weight: 600; }
.o-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(10px); border-radius: 18px; }
.o-stats > div { padding: 14px 16px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; min-width: 0; }
.o-stats > div + div { border-left: 1px solid var(--line); }
.o-stats b { font: 600 17px var(--display); letter-spacing: -.02em; white-space: nowrap; }
.o-stats small { font-size: 12px; line-height: 1.3; color: var(--muted); }

/* stories */
.stories { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 2px 2px 10px; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; width: 260px; min-height: 200px; scroll-snap-align: start; display: flex; flex-direction: column; padding: 18px; border-radius: 24px; color: var(--ink);
  background: linear-gradient(155deg, color-mix(in srgb, var(--a) 15%, var(--surface)), color-mix(in srgb, var(--b) 10%, var(--surface)) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 16%, transparent); transition: transform .25s var(--ease); }
.story:active { transform: scale(.98); }
.st-top { display: flex; align-items: center; gap: 8px; }
.st-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); flex: none; }
.st-k { font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--a) 70%, var(--ink)); }
.st-t { font: 600 19px/1.22 var(--display); letter-spacing: -.02em; margin-top: 16px; }
.st-s { font-size: 13px; color: var(--muted); margin-top: 6px; }
.st-b { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 14px; gap: 8px; }
.st-v { font: 300 32px/1 var(--display); letter-spacing: -.04em; white-space: nowrap; }
.st-v small { font: 500 11.5px var(--sans); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.spk { color: var(--a); flex: none; }

/* contributors */
.contribs { padding: 4px 0; }
.contrib { display: flex; align-items: center; gap: 14px; padding: 14px 20px; color: var(--ink); }
.contrib + .contrib { border-top: 1px solid var(--line); }
.c-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--a); background: color-mix(in srgb, var(--a) 13%, transparent); }
.contrib b { font: 600 15px var(--display); letter-spacing: -.01em; }
.c-w { font-size: 12.5px; color: var(--ok); font-weight: 500; }
.c-w.mid { color: var(--warn); } .c-w.bad { color: var(--hi); }
.c-bar { height: 6px; border-radius: 6px; background: var(--track); margin-top: 9px; overflow: hidden; }
.c-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--a), var(--b)); transition: width 1.3s var(--ease); }
.plan-prog { height: 4px; background: var(--track); }
.plan-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7a6cf5, #4fd1c5); transition: width 1.3s var(--ease); }
.o-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--sans); color: var(--brand); background: var(--brand-wash); padding: 6px 11px; border-radius: 999px; }
.oins .hl { font: 500 21px/1.35 var(--display); letter-spacing: -.02em; margin-top: 16px; }