:root {
  color-scheme: dark;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-xl: 30px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --page-max-width: 1220px;
  --accent-rgb: 127, 177, 151;
  --accent: #6fa384;
  --accent-strong: #9ad3b4;
  --bg: #050607;
  --panel: linear-gradient(135deg, rgba(255,255,255,.078), rgba(255,255,255,.028)), rgba(5,8,7,.72);
  --text: #f2f6f3;
  --muted: rgba(242,246,243,.68);
  --border: rgba(255,255,255,.14);
  --input: rgba(0,0,0,.25);
  --soft: rgba(255,255,255,.055);
  --shadow-panel: 0 28px 82px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  --hero-bg: radial-gradient(circle at 32% 20%, rgba(70,140,115,.18), transparent 32%), radial-gradient(circle at 76% 42%, rgba(150,190,95,.08), transparent 30%), linear-gradient(180deg, #020404 0%, #050807 50%, #020303 100%);
  --chart-1: rgba(127,177,151,.95);
  --chart-2: rgba(118,170,210,.82);
  --chart-3: rgba(220,195,120,.82);
  --chart-4: rgba(190,170,255,.78);
  --chart-5: rgba(214,118,72,.84);
  --chart-6: rgba(255,170,170,.76);
}
* { box-sizing: border-box; }
html { min-height:100%; background:var(--bg); scroll-behavior:smooth; }
body { margin:0; min-height:100vh; font-family:var(--font-ui); background:var(--hero-bg); color:var(--text); line-height:1.45; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.18) 78%); opacity:.55; }
.app-shell { position:relative; z-index:1; min-height:100vh; overflow-x:clip; }
.hero, main, footer { width:min(var(--page-max-width), calc(100% - 32px)); margin:0 auto; }
.hero { position:relative; overflow:hidden; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:34px 0 18px; }
.hero__main { max-width:920px; }
.brand-logo { display:block; height:auto; object-fit:contain; }
.brand-logo--hero { width:clamp(4.5rem,7vw,6.25rem); max-height:4.55rem; margin:0 0 .65rem; }
.eyebrow,.kicker { margin:0 0 7px; color:var(--accent-strong); font-size:.76rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3,h4 { letter-spacing:-.03em; }
h1 { margin:0 0 10px; font-size:clamp(2.1rem,4vw,3.8rem); line-height:.98; font-weight:600; }
h2 { margin:0; font-size:clamp(1.2rem,2.4vw,1.65rem); }
h3 { margin:0 0 10px; }
h4 { margin:0 0 6px; font-size:1rem; }
p { margin-top:.6rem; }
.hero-copy { max-width:880px; margin:0; color:var(--muted); font-size:clamp(1rem,1.6vw,1.14rem); }
.hero-actions,.top-controls__row,.buttons { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; }
.hero-actions { margin-top:18px; width:100%; }
.top-controls { display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; justify-content:flex-start; min-width:max-content; }
.top-controls__row { justify-content:flex-end; }
.accessibility-toggle { width:100%; max-width:16rem; white-space:normal; }
button,.button { appearance:none; border:1px solid var(--border); border-radius:var(--radius-pill); background:var(--soft); color:var(--text); font:inherit; font-weight:850; text-decoration:none; min-height:2.6rem; display:inline-flex; align-items:center; justify-content:center; padding:.72rem 1rem; }
button:not(:disabled) { cursor:pointer; }
button:disabled { opacity:1; cursor:default; filter:none; pointer-events:none; }
input:disabled, select:disabled { opacity:.72; cursor:default; filter:saturate(.72); pointer-events:none; }
.primary { background:rgba(var(--accent-rgb),.26); border-color:rgba(var(--accent-rgb),.62); }
.ghost { background:transparent; }
.tiny { min-height:2.05rem; padding:0 .68rem; font-size:.76rem; letter-spacing:.04em; }
.tiny.is-active { background:rgba(var(--accent-rgb),.34); border-color:rgba(var(--accent-rgb),.7); }
.segmented-control { display:inline-flex; gap:.22rem; padding:.18rem; border:1px solid var(--border); border-radius:var(--radius-pill); background:rgba(0,0,0,.16); backdrop-filter:blur(12px); }
.account-status { margin-top:.75rem; display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; width:min(100%,760px); padding:.58rem .72rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--soft); color:var(--muted); font-size:.92rem; }
.account-status--warning { border-color:rgba(232,190,92,.48); background:rgba(232,190,92,.10); color:#f0d48a; }
.inline-auth-link { min-height:1.85rem; padding:0 .62rem; background:rgba(var(--accent-rgb),.24); border-color:rgba(var(--accent-rgb),.55); color:var(--accent-strong); font-size:.86rem; }
.workspace { display:grid; grid-template-columns:minmax(330px,1.08fr) minmax(330px,.92fr); gap:18px; padding:0 0 42px; }
.statistics-demo-main { display:grid; gap:18px; padding:0 0 42px; }
.card { border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--panel); box-shadow:var(--shadow-panel); padding:clamp(1rem,2vw,1.25rem); backdrop-filter:blur(14px); }
.wide-card { grid-column:1 / -1; }
.section-title { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:14px; }
.version-pill,.pill { display:inline-flex; align-items:center; min-height:1.8rem; padding:.2rem .62rem; border-radius:var(--radius-pill); background:rgba(var(--accent-rgb),.18); color:var(--accent-strong); font-weight:850; font-size:.78rem; }
.hint,.muted { color:var(--muted); font-size:.9rem; }
.principle-grid,.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.principle-grid article,.stat-card { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--soft); }
.principle-grid span { color:var(--muted); font-size:.92rem; }
.stat-card strong { font-size:1.8rem; line-height:1; }
.stat-card span { color:var(--muted); font-size:.85rem; }

/* Derived from the current OAR statistics presentation contract; no production JS is copied. */
.stats-card > .stats-grid,
.stats-card > .chart-list { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.stats-card .stat-card,
.stats-card .mini-chart { min-width:0; box-sizing:border-box; padding:1rem; }
.chart-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.mini-chart { border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; background:var(--soft); min-width:0; }
.stats-placeholder { display:grid; grid-template-columns:1fr; grid-column:1 / -1; width:100%; gap:1rem; align-items:center; padding:clamp(.9rem,2.2vw,1.2rem); border:1px solid var(--border); border-radius:var(--radius-lg); background:rgba(var(--accent-rgb),.07); }
.stats-placeholder__visual { display:flex; flex-direction:column; gap:1rem; align-items:center; width:100%; text-align:center; }
.stats-placeholder__ring { width:132px; aspect-ratio:1; border-radius:50%; border:2px solid rgba(var(--accent-rgb),.82); box-shadow:inset 0 0 0 18px rgba(var(--accent-rgb),.04),0 0 36px rgba(var(--accent-rgb),.10); display:grid; place-items:center; }
.stats-placeholder__ring span { font-size:1.7rem; font-weight:900; color:var(--accent-strong); }
.stats-placeholder__copy { width:min(100%,44rem); }
.stats-placeholder__copy h3 { margin:.1rem 0 .45rem; }
.directory-actions { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:12px 0; }
.directory-search-panel { display:block; width:100%; margin-top:1rem; }
.directory-search-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:.75rem; width:100%; }
.directory-filter-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:center; gap:.75rem; width:100%; margin-top:.8rem; }
input,select { width:100%; padding:.78rem .82rem; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--input); color:var(--text); font:inherit; outline:none; }
input::placeholder { color:rgba(var(--accent-rgb),.82); opacity:1; font-weight:650; }
.static-note { border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--soft); padding:.9rem 1rem; color:var(--muted); }
.governance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.governance-grid article { padding:14px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--soft); }
.governance-grid p { margin:0; color:var(--muted); font-size:.92rem; }
.governance-subsection { margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--border); }
.trust-transparency__intro { color:var(--muted); max-width:760px; }
.trust-transparency__grid { margin-top:1rem; }
footer { display:flex; justify-content:space-between; gap:16px; padding:0 0 36px; color:var(--muted); font-size:.9rem; }

/* Example statistics mirrors the production presentation structure but contains synthetic values only. */
.stats-card--example > .stats-grid,.stats-card--example > .chart-list { width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.stats-card--example .public-statistics-pies { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; width:100%; }
.stats-card--example .public-statistics-pies .pie-chart__body { display:grid; grid-template-columns:minmax(12rem,.72fr) minmax(16rem,1.28fr); align-items:center; gap:clamp(1rem,3vw,2rem); }
.pie-chart__body { display:grid; grid-template-columns:minmax(7rem,10rem) 1fr; gap:1rem; align-items:center; }
.pie-chart__graphic { width:min(10rem,42vw); aspect-ratio:1; border-radius:50%; border:1px solid var(--border); box-shadow:var(--shadow-panel); justify-self:center; }
.stats-card--example .public-statistics-pies .pie-chart__graphic { width:min(15rem,42vw); max-width:100%; }
.pie-chart__legend { display:grid; gap:.45rem; min-width:0; }
.pie-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:.8rem; color:var(--muted); padding:.18rem 0; }
.pie-row > span { min-width:0; display:inline-flex; align-items:flex-start; gap:.5rem; }
.pie-row b { color:var(--text); justify-self:end; }
.pie-row__swatch { display:inline-block; width:.72rem; height:.72rem; border-radius:50%; flex:0 0 auto; margin-top:.22rem; }
.c1 { background:var(--chart-1); }.c2 { background:var(--chart-2); }.c3 { background:var(--chart-3); }.c4 { background:var(--chart-4); }.c5 { background:var(--chart-5); }.c6 { background:var(--chart-6); }
.pie-disciplines { background:conic-gradient(var(--chart-1) 0 28%,var(--chart-2) 28% 49%,var(--chart-3) 49% 67%,var(--chart-4) 67% 81%,var(--chart-5) 81% 92%,var(--chart-6) 92% 100%); }
.pie-practice-areas { background:conic-gradient(var(--chart-1) 0 72%,var(--chart-2) 72% 84%,var(--chart-3) 84% 93%,var(--chart-4) 93% 100%); }
.pie-activity { background:conic-gradient(var(--chart-1) 0 64%,var(--chart-3) 64% 88%,var(--chart-6) 88% 100%); }
.pie-scope { background:conic-gradient(var(--chart-2) 0 22%,var(--chart-1) 22% 63%,var(--chart-5) 63% 100%); }
.compact-pie { grid-template-columns:minmax(7rem,9.25rem) 1fr; }
.detail-statistics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.timeline-chart { grid-column:1 / -1; }
.pilot-timeline { display:flex; flex-direction:column; gap:.45rem; align-items:center; text-align:center; width:100%; }
.pilot-timeline__dots { display:flex; gap:clamp(.75rem,3vw,2rem); align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.pilot-month { display:grid; gap:.25rem; justify-items:center; color:var(--muted); font-size:.75rem; }
.pilot-month__dot { width:2.5rem; height:2.5rem; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(var(--accent-rgb),.8); background:rgba(var(--accent-rgb),.10); color:var(--accent-strong); font-weight:800; }
.discipline-note { padding:.2rem .2rem 0; }
.authenticated-statistics-hint { margin:.35rem .2rem 0; padding:.75rem .85rem; border-left:2px solid rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.045); border-radius:0 var(--radius-md) var(--radius-md) 0; }
.synthetic-badge { display:inline-flex; min-height:1.8rem; align-items:center; padding:.2rem .62rem; border:1px solid rgba(245,210,15,.58); border-radius:var(--radius-pill); background:rgba(245,210,15,.12); color:#ffe759; font-size:.78rem; font-weight:900; letter-spacing:.08em; }
.example-note { margin-top:1rem; padding:.9rem 1rem; border:1px dashed rgba(245,210,15,.55); border-radius:var(--radius-lg); background:rgba(245,210,15,.08); color:#f3e9a2; font-weight:700; }
.example-note--top { max-width:880px; }
.stats-card--example { position:relative; overflow:hidden; }
.demo-tape { position:fixed; z-index:8; left:-12%; width:124%; pointer-events:none; user-select:none; background:rgba(245,210,15,.70); border-top:3px solid rgba(20,20,20,.78); border-bottom:3px solid rgba(20,20,20,.78); box-shadow:0 1px 3px rgba(0,0,0,.18); color:#111; font-weight:950; letter-spacing:.12em; text-transform:uppercase; padding:.72rem 0; overflow:hidden; }
.demo-tape--shared { top:66.666vh; transform:rotate(-3.2deg); transform-origin:left top; }
.demo-tape__track { display:flex; justify-content:space-around; gap:2rem; white-space:nowrap; font-size:clamp(.72rem,1.75vw,1.05rem); }

@media (max-width:1000px) {
  .workspace { grid-template-columns:1fr; }
  .principle-grid,.stats-grid { grid-template-columns:repeat(2,1fr); }
  .governance-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .stats-card--example .public-statistics-pies .pie-chart__body,.pie-chart__body,.compact-pie { grid-template-columns:minmax(0,1fr); justify-items:center; }
  .stats-card--example .pie-chart__legend { width:100%; }
  .detail-statistics-grid { grid-template-columns:1fr; }
  .timeline-chart { grid-column:auto; }
}
@media (max-width:700px) {
  .hero { flex-direction:column; padding-top:22px; }
  .top-controls { align-items:flex-start; }
  .principle-grid,.stats-grid,.governance-grid,.chart-list,.directory-filter-row { grid-template-columns:1fr; }
  .directory-search-row { grid-template-columns:1fr; }
  .section-title,footer { flex-direction:column; }
  .hero,main,footer { width:min(100% - 22px,var(--page-max-width)); }
  .card { border-radius:22px; }
  .demo-tape { left:-22%; width:144%; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition-duration:.001ms !important; } }