@charset "UTF-8";
@import url('robot-preview.css?v=20261015-1');

@font-face {
  font-family: "Telma";
  src: url("fonts/Telma-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nippo";
  src: url("fonts/Nippo-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nippo";
  src: url("fonts/Nippo-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Array";
  src: url("fonts/Array-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Comico";
  src: url("fonts/Comico-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg:#0b0c10;
  --panel:#111218;
  --raised:#191b24;
  --line:#30323f;
  --soft:#22242e;
  --text:#e2ddd3;
  --muted:#b3afb5;
  --accent-rgb:190,190,207;
  --accent:rgb(var(--accent-rgb));
  --selected:#f1cb8d;
  --blue:#87b8ec;

  --font-body: "Nippo", sans-serif;
  --font-display: "Comico", sans-serif;
  --font-brand: "Telma", serif;
  --font-data: "Array", monospace;

  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --ease-bounce:cubic-bezier(.68,-.55,.265,1.55);
  --ease-anticipate:cubic-bezier(.32,0,.67,0);
  --ease-overshoot:cubic-bezier(.34,1.56,.64,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --move:520ms;

  /* Motion timing tokens */
  --motion-instant:120ms;
  --motion-fast:200ms;
  --motion-normal:320ms;
  --motion-deliberate:480ms;
  --motion-elaborate:680ms;

  /* Panel animation timing */
  --panel-anticipate:80ms;
  --panel-unfold:280ms;
  --panel-settle:60ms;
  --panel-total:420ms;
  --panel-close:280ms;

  /* Depth system - elevation with ambient and contact shadows */
  --shadow-ambient-1:0 0 12px rgba(5,5,8,0.25);
  --shadow-contact-1:0 2px 8px rgba(5,5,8,0.18);
  --shadow-edge-1:0 0 1px rgba(226,221,211,0.06);

  --shadow-ambient-2:0 0 20px rgba(5,5,8,0.3);
  --shadow-contact-2:0 4px 16px rgba(5,5,8,0.22);
  --shadow-edge-2:0 0 2px rgba(226,221,211,0.08);

  --shadow-ambient-3:0 0 32px rgba(5,5,8,0.35);
  --shadow-contact-3:0 8px 32px rgba(5,5,8,0.28);
  --shadow-edge-3:0 0 4px rgba(226,221,211,0.12);

  --shadow-float:0 12px 48px rgba(5,5,8,0.4), 0 0 8px rgba(184,166,217,0.18);

  --depth-0:0 0 0 transparent;
  --depth-1:var(--shadow-contact-1), var(--shadow-ambient-1), var(--shadow-edge-1);
  --depth-2:var(--shadow-contact-2), var(--shadow-ambient-2), var(--shadow-edge-2);
  --depth-3:var(--shadow-contact-3), var(--shadow-ambient-3), var(--shadow-edge-3);
  --depth-float:var(--shadow-float);

  /* Light sources - enhanced visibility */
  --light-primary:radial-gradient(ellipse at 60% 30%, rgba(226,221,211,0.15), transparent 70%);
  --light-accent:radial-gradient(ellipse at 50% 40%, rgba(184,166,217,0.12), transparent 60%);
  --light-warm:radial-gradient(ellipse at 45% 35%, rgba(241,203,141,0.09), transparent 65%);
  --light-cool:radial-gradient(ellipse at 55% 25%, rgba(135,184,236,0.06), transparent 68%);

  /* Glass material properties */
  --glass-bg:linear-gradient(125deg, rgba(184,166,217,0.12), rgba(184,166,217,0.04) 68%, rgba(226,221,211,0.06));
  --glass-border:1px solid rgba(226,221,211,0.15);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-blur:12px;

  color-scheme:dark;
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:105px
}
/* Hide the page scrollbar while retaining native scrolling and anchor navigation. */
html:has(body[data-page="home"]),
html:has(body[data-page="experiments"]),
body[data-page="home"],
body[data-page="experiments"] {
  scrollbar-width:none;
}
html:has(body[data-page="home"])::-webkit-scrollbar,
html:has(body[data-page="experiments"])::-webkit-scrollbar,
body[data-page="home"]::-webkit-scrollbar,
body[data-page="experiments"]::-webkit-scrollbar {
  display:none;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);

  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;

  -webkit-font-smoothing: antialiased;
}
body[data-page="home"]::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  inset:86px 0 0 auto;
  width:min(54vw,760px);
  background:url("machinepsychlab-skiss.png") right 8% top 38px / min(42vw,620px) auto no-repeat;
  filter:invert(1);
  opacity:.11;
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 84%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 84%,transparent 100%);
}
.background-ripple.jquery-ripples{
  visibility:hidden;
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background-repeat:no-repeat;
}
.background-ripple canvas{pointer-events:none}
body.background-ripple-ready .background-ripple{visibility:visible}
body.background-ripple-ready[data-page]::before{opacity:0}
body[data-page="home"]{
  position:relative;
}
body[data-page="home"] main,
body[data-page="home"] .site-footer{
  position:relative;
  z-index:1;
}
body[data-page="ai-progress"]::before{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  inset:86px 0 0;
  background:url("machinepsychlab-skiss-unordered.png") center 150px / min(86vw,1280px) auto no-repeat;
  filter:invert(1);
  opacity:.10;
  mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 82%,transparent 100%);
}
body[data-page="ai-progress"] main,
body[data-page="ai-progress"] .site-footer{
  position:relative;
  z-index:1;
}
body[data-page="experiments"]::before{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  inset:86px 0 0;
  background:url("study3.png") center 150px / min(94vw,1450px) auto no-repeat;
  filter:invert(1);
  opacity:.055;
  mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 78%,transparent 100%);
}
body[data-page="experiments"] main,
body[data-page="experiments"] .site-footer{
  position:relative;
  z-index:1;
}
a{
  color:inherit;
  text-decoration:none
}
button,input,select{
  font:inherit;
  color:inherit
}
button,summary{
  cursor:pointer
}
button:disabled{
  opacity:.45;
  cursor:default
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--selected);
  outline-offset:5px;
  animation:focus-draw-in var(--motion-normal) var(--ease-enter) both
}
@keyframes focus-draw-in{
  from{
    outline-offset:2px;
    outline-color:transparent
  }
  to{
    outline-offset:5px;
    outline-color:var(--selected)
  }
}
::selection{
  background:var(--accent);
  color:var(--bg)
}
[hidden]{
  display:none!important
}
p{
  color:var(--muted);
  margin:0 0 1.4rem
}
h1,h2,h3{
  font-family: var(--font-display);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.04;
  margin:0 0 1.5rem
}
h1{
  font-size:clamp(48px,6vw,86px)
}
h2{
  font-size:clamp(34px,4.4vw,62px)
}
h3{
  font-size:24px;
  letter-spacing:-.035em
}
.type-light{
  font-weight:300;
  color:var(--muted)
}
.wrap{
  width:min(100%,1560px);
  margin:auto;
  padding-inline:5%
}
.eyebrow,
.micro,
.section-number,
.status-tag {
  font-family: var(--font-data);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow{
  color:var(--accent);
  font-family:var(--font-brand);
  font-weight:400;
  letter-spacing:-.02em;
  text-transform:none
}
.method-sequence li>span,
.progress-title a,
.chart-meta>span:first-child,
.provenance-content h3,
th,
.benchmark-browser summary>span:last-child,
.benchmark-explainer small,
.text-link{
  font-family:var(--font-brand);
  font-weight:400;
  letter-spacing:-.02em;
  text-transform:none
}
.micro,.section-number{
  color:var(--muted);
  font-size:9px
}
.status-tag{
  font-size:9px;
  border:1px solid var(--line);
  padding:6px 10px;
  color:var(--muted);
  display:inline-block
}
.skip{
  position:fixed;
  top:-80px;
  left:20px;
  z-index:99;
  background:var(--text);
  color:var(--bg);
  padding:10px
}
.skip:focus{
  top:10px
}
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  height:86px;
  padding:0 5%;
  border-bottom:1px solid var(--soft);
  background:#0b0c10f7
}
.brand {
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  letter-spacing: -0.02em;
  view-transition-name: brand;
}
.site-footer .brand{
  view-transition-name:none
}
.brand .psych {
  color: var(--accent);
}

.brand .lab {
  color: var(--text);
}
.brand-inline,
.brand-email {
  font-family: var(--font-brand);
}
.brand-inline .psych,
.brand-email .psych {
  color: var(--accent);
}
.brand-email .machine,
.brand-email .psych,
.brand-email .lab {
  color: var(--text);
  margin-left: 0;
}
.brand-email .psych {
  color: var(--accent);
}
.brand-symbol{
  width:30px;
  height:30px;
  display:inline-block;
  flex:0 0 30px;
  margin-right:12px;
  background:url('brand-symbol.png') center/contain no-repeat;
  vertical-align:middle;
}
.href-symbol{
  display:inline-block;
  width:1.25em;
  height:1.25em;
  line-height:0;
  margin-left:.22em;
  background:url('href-symbol.png') center/contain no-repeat;
  vertical-align:-.12em;
  flex:0 0 auto;
}
.home-introduction p{ line-height:1.7; }

/* One JavaScript timeline selects a candidate before revealing its token. */
.transformer-heading { position:relative; min-height:8rem; padding-bottom:150px; }
.home-introduction h2.transformer-heading { background:none; color:var(--text); }
/* Clip ink on each token, so hidden glyphs do not paint the heading background. */
.token { background-image:linear-gradient(115deg,#ece0c9 5%,#dcd6d4 48%,#bcb5cd 100%); background-clip:text; -webkit-background-clip:text; color:transparent; }
.transformer-heading.generating[data-generation-phase="waiting"] { visibility:hidden; }
.generated-tokens { display:inline; }
.token, .token-comma, .token-question { opacity:1; }
.transformer-heading.generating .token,
.transformer-heading.generating .token-comma,
.transformer-heading.generating .token-question { opacity:0; }
.transformer-heading.generating .revealed { opacity:1; }
.token.revealed { transition:opacity 350ms ease, text-shadow 700ms ease; }
.token.just-revealed { text-shadow:none; }
.transformer-heading.generating .token { display:inline-block; transform-origin:top left; }
.candidate.token-in-flight .candidate-word { opacity:0; }
.token-cursor { display:none; }
.transformer-heading.generating .token-cursor { display:inline-block; width:1px; height:.85em; background:#a9cfd8; vertical-align:baseline; animation:cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 50% { opacity:0; } }
.token-candidates { position:absolute; top:calc(100% - 140px); left:0; width:min(280px,100%); padding:0; border:0; background:none; opacity:0; visibility:hidden; transform:translateY(6px); filter:blur(2px); pointer-events:none; transition:opacity 450ms ease,transform 550ms var(--ease),filter 450ms ease,visibility 0s 450ms; font:13px/1.5 var(--font-data); letter-spacing:.02em; z-index:2; }
.token-candidates.active { opacity:1; visibility:visible; transform:translateY(0); filter:blur(0); transition-delay:0s; }
.token-candidates.active.departing { opacity:0; transform:translateY(-6px); filter:blur(2px); }
.token-candidates.active.particle-transition { opacity:var(--candidate-ink,1); transform:none; filter:none; transition:none; }
.candidate-particles { position:absolute; pointer-events:none; z-index:3; }
.candidate { display:grid; grid-template-columns:1fr 4ch; position:relative; align-items:baseline; gap:16px; padding:5px 0 7px; margin:0; color:#aebcc5; isolation:isolate; transition:color 300ms ease; }
.candidate::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#a9cfd818; z-index:-2; }
.candidate::before { content:''; position:absolute; left:0; bottom:0; height:1px; width:var(--probability); background:linear-gradient(90deg,#91b5c3,#bed9df); opacity:.6; z-index:-1; transition:width 400ms var(--ease),opacity 300ms ease; }
.candidate-prob { color:#8b9fae; font-size:11px; font-variant-numeric:tabular-nums; text-align:right; transition:color 300ms ease; }
.candidate.selected { color:#d8eaf0; }
.candidate.selected::before { opacity:1; }
.candidate.selected .candidate-prob { color:#bfd6df; }
@media (prefers-reduced-motion:reduce) {
  .transformer-heading.generating[data-generation-phase="waiting"] { visibility:visible; }
  .transformer-heading { padding-bottom:0; }
  .transformer-heading.generating .token, .transformer-heading.generating .token-comma, .transformer-heading.generating .token-question { opacity:1; }
  .transformer-heading.generating .token-cursor, .token-candidates, .candidate-particles { display:none; }
}

.intro-content {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}


.home-introduction .text-link .href-symbol{
  width:0;
  height:0;
  margin-left:0;
  margin-right:.2em;
  vertical-align:baseline;
  position:relative;
  top:0;
  overflow:visible;
}
.home-introduction .text-link .href-symbol::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.1em;
  width:.95em;
  height:.95em;
  background:url('href-symbol.png') center/180% no-repeat;
}
.brand-email .href-symbol{
  width:1.7em;
  height:1.7em;
  margin-left:.35em;
  vertical-align:-.3em;
}
.site-header nav{
  overflow:clip;
  display:flex;
  gap:5px;
  padding:5px;
  border:1px solid var(--line);
  position:relative;
  isolation:isolate
}
.site-header nav a{
  font:12px var(--font-body);
  padding:10px 19px;
  color:var(--muted);
  transition:color .18s,font-weight var(--move)
}
.site-header nav a span{
  font:8px var(--font-data);
  margin-right:12px;
  opacity:.6
}
.site-header nav a[aria-current]{
  color:var(--text);
  font-weight:650;
  view-transition-name:active-nav
}
.nav-indicator{
  position:absolute;
  left:0;
  top:5px;
  height:calc(100% - 10px);
  width:var(--nav-width,0px);
  transform:translateX(var(--nav-left,0px));
  background:var(--raised);
  border-bottom:1px solid var(--accent);
  z-index:-1;
  transition:transform var(--move) var(--ease),width var(--move) var(--ease);
  view-transition-name:nav-indicator
}
.section-label,.entry-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.home-entry{
  position:relative;
  padding-top:36px
}
.text-ripple-tint{pointer-events:none!important;user-select:none!important;z-index:100;contain:layout style}
.text-ripple-tint *{pointer-events:none!important;animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.text-ripple-tint{display:none}}
.entry-meta b{
  color:var(--text);
  font-weight:400;
  margin-left:18px
}
.wordmark{
  position:relative;
  font-family:var(--font-brand);
  font-size:clamp(44px,10.4vw,163px);
  letter-spacing:-.08em;
  line-height:1.13;
  margin:42px 0 25px;
  white-space:nowrap;
  font-weight:400
}
.wordmark .machine{
  font-weight:650
}
.wordmark .psych{
  font-weight:300;
  color:var(--accent);
  letter-spacing:-.095em
}
.wordmark .lab{
  font-weight:500;
  letter-spacing:-.085em
}
.wordmark-marker{
  display:none;
  position:absolute;
  left:0;
  bottom:-7px;
  width:14px;
  height:3px;
  background:var(--accent)
}
.wordmark.constructing .wordmark-marker{
  display:block;
  animation:measure-word 1.45s var(--ease) both
}
.wordmark.constructing .character{
  display:inline-block;
  animation:construct-letter .65s var(--ease) both;
  animation-delay:var(--delay)
}
@keyframes construct-letter{
  0%{
    clip-path:inset(0 100% 0 0);
    transform:scaleX(.4);
    filter:blur(5px);
    font-weight:300
  }
  50%{
    clip-path:inset(0);
    filter:blur(0)
  }
  100%{
    transform:scaleX(1)
  }
}
@keyframes measure-word{
  0%{
    left:0;
    width:40px
  }
  90%{
    left:98%;
    width:14px;
    opacity:1
  }
  100%{
    left:98%;
    opacity:0
  }
}
@keyframes draw-rule{
  from{
    transform:scaleX(0)
  }
  to{
    transform:scaleX(1)
  }
}
.home-readout{
  margin-top:32px;
  border-left:2px solid var(--accent);
  padding-left:14px;
  min-height:92px
}
.home-readout .eyebrow{
  font-size:8px
}
.home-readout strong{
  display:block;
  font:500 19px/1.4 var(--font-data);
  margin:7px 0;
  overflow-wrap:anywhere
}
.home-readout .micro{
  letter-spacing:.02em;
  text-transform:none
}
.text-button{
  border:0;
  background:none;
  color:var(--muted);
  padding:10px 0;
  font:11px var(--font-body);
  transition:color var(--motion-normal) var(--ease),
              transform var(--motion-normal) var(--ease-enter);
  cursor:pointer
}
.text-button:hover{
  color:var(--text);
  transform:translateY(-1px)
}
.text-button:active{
  transform:translateY(0) scale(0.98);
  transition-duration:var(--motion-instant)
}
.observatory-window{
  min-width:0;
  align-self:stretch;
  position:relative
}
.window-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:0 0 10px
}
.window-top .eyebrow{
  font-size:9px
}
.window-top .micro{
  font-size:8px
}
.home-chart{
  min-height:320px
}
.home-metric-switch{
  display:flex;
  align-items:center;
  gap:7px;
  border-top:1px solid var(--line);
  padding-top:13px;
  margin-bottom:13px
}
.home-metric-switch button{
  font:10px var(--font-body);
  border:0;
  background:none;
  color:var(--muted);
  padding:8px 10px
}
.home-metric-switch button[aria-pressed=true]{
  background:var(--raised);
  color:var(--accent)
}
.path-arrow{
  grid-column:2;
  grid-row:1/3;
  font-size:28px;
  align-self:center;
  color:var(--accent);
  transition:transform var(--move) var(--ease)
}
.large-copy{
  font:400 26px/1.4 var(--font-display);
  letter-spacing:-.03em;
  color:var(--text)
}
.method-sequence{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5%;
  padding:0;
  margin:50px 0 0;
  list-style:none
}
.method-sequence li{
  padding-top:24px;
  position:relative
}
.method-sequence li:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:var(--line);
  transform-origin:left
}
.method-sequence li>span{
  font:10px var(--font-data);
  color:var(--accent)
}
.method-sequence h3{
  margin:23px 0 13px;
  font-family:var(--font-display);
  font-size:26px;
  font-weight:400
}
.method-sequence p{
  font-size:13px;
  max-width:340px
}
.site-footer{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px 40px;
  padding:38px 5%;
  border-top:1px solid var(--line);
  background:#0e0f14;
  font-size:13px
}
.site-footer p{
  font-size:12px;
  margin:13px 0 0
}
.site-footer>a:not(.micro){
  justify-self:end;
  align-self:center
}
.site-footer>a span{
  color:var(--accent);
  margin-left:20px
}
.site-footer>.micro:last-child{
  text-align:right
}
.progress-intro{
  padding-top:33px
}
.observatory{
  position:relative;
  z-index:1;
  background:var(--bg);
}
.progress-title{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin:29px 0
}
.progress-title h1{
  font-size:clamp(42px,5vw,70px);
  margin:0;
  line-height:1.02
}
.progress-title p{
  font-size:13px;
  line-height:1.8;
  margin:0
}
.progress-title a{
  display:inline-block;
  margin-top:10px;
  border-bottom:1px solid var(--line);
  color:var(--accent)
}
.snapshot-bar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-block:1px solid var(--line);
  padding:13px 0;
  font:9px/1.5 var(--font-data);
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--muted)
}
.lens-nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
  margin-top:30px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line)
}
.lens-nav button{
  background:none;
  border:0;
  text-align:left;
  position:relative;
  padding:10px 0;
  color:var(--muted)
}
.lens-nav button>span{
  font:10px var(--font-data);
  display:inline-block;
  margin-right:15px
}
.lens-nav button strong{
  font:400 25px var(--font-body);
  letter-spacing:-.04em
}
.lens-nav small{
  display:block;
  font:11px var(--font-body);
  margin-top:10px
}
.lens-nav button:after{
  content:'';
  position:absolute;
  bottom:-25px;
  height:2px;
  width:100%;
  left:0;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--move) var(--ease)
}
.lens-nav button[aria-pressed=true]{
  color:var(--text)
}
.lens-nav button[aria-pressed=true]:after{
  transform:scaleX(1)
}
.lens-nav button[aria-pressed=true]>span{
  color:var(--accent)
}
.instrument-toolbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  align-items:center
}
.segmented{
  display:flex;
  flex-wrap:wrap;
  gap:3px
}
.segmented button{
  background:none;
  border:1px solid transparent;
  color:var(--muted);
  padding:8px 15px;
  font:12px var(--font-body);
  transition:background var(--motion-normal) var(--ease),
              border-color var(--motion-normal) var(--ease),
              color var(--motion-fast) var(--ease),
              transform var(--motion-normal) var(--ease-enter),
              box-shadow var(--motion-normal) var(--ease);
  position:relative;
  cursor:pointer
}
.segmented button:hover{
  border-color:rgba(184,166,217,0.3);
  color:var(--text);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(5,5,8,0.15)
}
.segmented button:active{
  transform:translateY(0) scale(0.98);
  transition-duration:var(--motion-instant)
}
.segmented button[aria-pressed=true]{
  border-color:var(--line);
  background:var(--raised);
  color:var(--text);
  box-shadow:inset 0 1px 3px rgba(5,5,8,0.2),
              0 0 0 1px rgba(184,166,217,0.1)
}
.toolbar-secondary{
  display:flex;
  align-items:center;
  gap:28px
}
.scale-label{
  display:flex;
  align-items:center;
  gap:8px;
  font:10px var(--font-data);
  color:var(--muted)
}
select,input{
  border:1px solid var(--line);
  border-radius:0;
  background:var(--panel);
  padding:9px 10px;
  min-height:37px;
  font:11px var(--font-body);
  max-width:100%
}
#scale{
  font-size:11px;
  padding:8px;
  min-height:32px
}
#filter-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border:1px solid var(--line);
  margin-left:7px;
  font:9px var(--font-data)
}
.expand-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows var(--panel-total) var(--ease),
              opacity var(--panel-unfold) var(--ease) var(--panel-anticipate),
              visibility 0s var(--panel-total);
  visibility:hidden;
  position:relative;
  isolation:isolate
}
.expand-panel.is-open{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition-delay:0s
}
.expand-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent) 85%, transparent);
  opacity:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:opacity var(--motion-normal) var(--ease),
              transform var(--panel-unfold) var(--ease-enter);
  pointer-events:none
}
.expand-panel.is-open::before{
  opacity:.4;
  transform:scaleX(1);
  transition-delay:var(--panel-anticipate), var(--panel-anticipate)
}
.expand-inner{
  overflow:hidden;
  min-height:0;
  transform:translateY(-8px);
  transition:transform var(--panel-unfold) var(--ease-overshoot);
  will-change:transform
}
.expand-panel.is-open .expand-inner{
  transform:translateY(0);
  transition-delay:var(--panel-anticipate)
}
.filters{
  display:grid;
  grid-template-columns:1.3fr .6fr .6fr 1fr 1fr 1fr auto;
  gap:14px;
  padding:22px 0 26px;
  border-top:1px solid var(--line);
  align-items:end
}
.filters select,.filters input{
  width:100%
}
.quiet-button{
  background:none;
  border:1px solid var(--line);
  font:10px var(--font-body);
  padding:10px 13px;
  min-height:37px;
  white-space:nowrap;
  transition:background var(--motion-normal) var(--ease),
              border-color var(--motion-normal) var(--ease),
              color var(--motion-fast) var(--ease),
              transform var(--motion-normal) var(--ease-enter),
              box-shadow var(--motion-normal) var(--ease);
  cursor:pointer;
  position:relative
}
.quiet-button:hover{
  background:var(--raised);
  border-color:rgba(184,166,217,0.4);
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(5,5,8,0.18)
}
.quiet-button:active{
  transform:translateY(0) scale(0.98);
  transition-duration:var(--motion-instant);
  box-shadow:0 1px 4px rgba(5,5,8,0.12)
}
.instrument-heading{
  display:flex;
  justify-content:space-between;
  gap:35px;
  margin:9px 0 24px
}
.instrument-heading h2{
  font-size:30px;
  margin:12px 0
}
.instrument-heading p{
  font-size:12px;
  max-width:780px;
  margin:0
}
.coverage-signal{
  position:relative;
  isolation:isolate;
  white-space:nowrap;
  display:grid;
  gap:4px;
  align-self:center;
  text-align:right
}
.coverage-signal strong{
  font:400 30px/1.2 var(--font-body);
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.035em;
  color:#d8c9b6;
  text-shadow:0 1px 2px rgba(5, 6, 9, .4), 0 0 22px rgba(190, 158, 117, .08)
}
.coverage-signal span{
  font:400 8px/1.5 var(--font-body);
  letter-spacing:.08em;
  color:var(--muted);
  text-transform:uppercase
}
.coverage-signal::before{
  content:"";
  position:absolute;
  inset:-18px 0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse, rgba(174, 140, 107, .065), transparent 70%);
  mix-blend-mode:screen
}
.instrument-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 0fr;
  gap:0;
  transition:grid-template-columns var(--move) var(--ease),gap var(--move) var(--ease)
}
.instrument-body.has-selection{
  grid-template-columns:minmax(0,1fr) minmax(250px,.36fr);
  gap:30px
}
.chart-region{
  min-width:0;
  position:relative
}
.chart-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font:9px var(--font-data);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  padding-bottom:10px;
  border-bottom:1px solid var(--soft)
}
.chart-meta>span:first-child{
  color:var(--accent)
}
#chart{
  min-height:375px
}
.chart-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible
}
.chart-svg text{
  font:10px var(--font-data);
  fill:var(--muted)
}
.chart-svg .grid{
  stroke:var(--soft);
  stroke-width:1
}
.chart-svg .axis-line{
  stroke:#4b4e63;
  stroke-width:1
}
.chart-svg .point-hit{
  fill:transparent;
  cursor:pointer;
  outline:none
}
.chart-svg .point-mark{
  fill:var(--accent);
  stroke:var(--bg);
  stroke-width:1.3;
  pointer-events:none;
  transition:fill .18s,stroke .18s
}
.chart-svg .point-mark.estimated{
  fill:var(--bg);
  stroke:var(--accent);
  stroke-width:1.5
}
.chart-svg .point-mark.mixed{
  fill:var(--blue);
  stroke:var(--bg)
}
.chart-svg .point-mark.unspecified{
  fill:var(--bg);
  stroke:var(--muted);
  stroke-dasharray:2 2
}
.chart-svg .uncertainty{
  stroke:var(--accent);
  stroke-width:1;
  opacity:.35;
  pointer-events:none
}
.chart-svg .record.selected .point-mark{
  fill:var(--selected);
  stroke:var(--selected)
}
.chart-svg .record.selected .selection-ring{
  stroke:var(--selected);
  opacity:1
}
.chart-svg .selection-ring{
  fill:none;
  stroke:var(--text);
  stroke-width:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s
}
.chart-svg .record:hover .selection-ring,.chart-svg .record:focus-within .selection-ring{
  opacity:1
}
.chart-svg .record.dim{
  opacity:.25
}
.chart-svg .record{
  transition:opacity .18s
}
.chart-svg .reference{
  stroke:var(--selected);
  stroke-dasharray:5 5;
  opacity:.7
}
.chart-svg .focus-rule{
  stroke:var(--selected);
  stroke-dasharray:2 5;
  opacity:.6;
  pointer-events:none
}
.chart-svg .axis-enter{
  animation:draw-axis .6s var(--ease) both;
  transform-origin:left
}
@keyframes draw-axis{
  from{
    clip-path:inset(0 100% 0 0)
  }
  to{
    clip-path:inset(0)
  }
}
.hover-readout{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:10px;
  font:11px var(--font-data);
  color:var(--text);
  padding:8px 0;
  border-bottom:1px solid var(--soft);
  overflow-wrap:anywhere
}
.inspector{
  min-width:0;
  max-height:0;
  overflow:hidden;
  visibility:hidden;
  opacity:0;
  transition:opacity .3s .12s,visibility .3s
}
.has-selection .inspector{
  visibility:visible;
  opacity:1;
  max-height:580px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent
}
.inspector-inner{
  min-width:250px;
  border-left:1px solid var(--line);
  padding:0 0 15px 23px
}
.inspector-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px
}
.inspector-head .eyebrow{
  font-size:9px
}
.inspector-head button{
  border:0;
  background:none;
  font-size:24px;
  line-height:1;
  color:var(--muted)
}
.inspector h3{
  font-size:24px;
  line-height:1.15;
  overflow-wrap:anywhere
}
.inspector .inspection-value{
  font:400 34px/1.2 var(--font-data);
  letter-spacing:-.06em;
  color:var(--selected);
  margin:10px 0
}
.inspector .unit{
  font:9px var(--font-data);
  margin-bottom:22px
}
.inspector dl{
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  margin:10px 0 20px
}
.inspector dt{
  font:8px var(--font-data);
  text-transform:uppercase;
  color:var(--muted);
  margin-top:9px
}
.inspector dd{
  font-size:11px;
  margin:0;
  overflow-wrap:anywhere
}
.inspector details{
  font-size:11px;
  color:var(--muted)
}
.inspector details p{
  font-size:11px;
  margin-top:14px;
  overflow-wrap:anywhere
}
.inspector summary{
  color:var(--text)
}
.inspection-notice{
  font-size:11px;
  color:var(--selected);
  padding:12px;
  border:1px solid var(--line)
}
.related-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:20px
}
.related-metrics button{
  border:1px solid var(--line);
  padding:6px 9px;
  background:none;
  font:10px var(--font-body)
}
.related-metrics button[aria-pressed=true]{
  color:var(--accent);
  border-color:var(--accent)
}
.record-finder select{
  width:100%;
  font-size:11px
}
.post-chart-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,360px);
  gap:28px;
  align-items:end;
  margin-top:14px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.benchmark-browser-trigger{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  min-height:57px;
  padding:12px 16px;
  border:1px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  color:var(--text);
  text-align:left;
  transition:background .2s,border-color .2s,transform .2s var(--ease)
}
.benchmark-browser-trigger:hover{
  background:color-mix(in srgb,var(--accent) 16%,transparent);
  transform:translateY(-1px)
}
.benchmark-browser-trigger:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px
}
.benchmark-browser-trigger strong{
  font:500 14px var(--font-body)
}
.benchmark-browser-trigger span{
  color:var(--accent);
  font-size:19px;
  transition:transform .2s var(--ease)
}
.benchmark-browser-trigger:hover span{
  transform:translateX(3px)
}
.benchmark-browser-trigger .href-symbol{
  width:1.5em;
  height:1.5em;
  font-size:14px;
}
.post-chart-controls .record-finder{
  display:grid;
  grid-template-columns:auto minmax(160px,1fr);
  gap:12px;
  align-items:center;
  padding:10px 0;
  color:var(--muted);
  font:10px var(--font-data);
  white-space:nowrap
}
.layer-toggle{
  display:grid;
  grid-template-columns:1fr 1fr 20px;
  align-items:center;
  text-align:left;
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  padding:23px 0;
  background:none;
  position:relative;
  transition:background var(--motion-normal) var(--ease),
              border-color var(--motion-normal) var(--ease);
  cursor:pointer
}
.layer-toggle::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  right:0;
  height:1px;
  background:var(--accent);
  opacity:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:opacity var(--motion-normal) var(--ease),
              transform var(--motion-normal) var(--ease-enter);
  pointer-events:none
}
.layer-toggle:hover{
  background:linear-gradient(90deg, rgba(184,166,217,0.04), transparent 60%);
  border-bottom-color:rgba(184,166,217,0.3)
}
.layer-toggle:hover::after{
  opacity:.6;
  transform:scaleX(.2)
}
.layer-toggle[aria-expanded=true]::after{
  opacity:.8;
  transform:scaleX(1)
}
.layer-toggle>span{
  font:9px var(--font-data);
  text-transform:uppercase;
  color:var(--muted);
  transition:color var(--motion-fast) var(--ease)
}
.layer-toggle:hover>span{
  color:var(--text)
}
.layer-toggle strong{
  font:400 17px var(--font-body);
  transition:color var(--motion-fast) var(--ease)
}
.layer-toggle:hover strong{
  color:var(--text)
}
.layer-toggle i{
  font-style:normal;
  color:var(--accent);
  font-size:20px;
  transition:transform var(--motion-normal) var(--ease-overshoot),
              color var(--motion-fast) var(--ease)
}
.layer-toggle:hover i{
  color:var(--selected)
}
.layer-toggle[aria-expanded=true] i{
  transform:rotate(45deg)
}
.methodology-toggle{
  grid-template-columns:1fr;
  width:auto;
  margin-right:auto;
  padding:13px 0 9px;
  border-bottom-color:var(--soft);
  color:var(--muted)
}
.methodology-toggle strong{
  padding-right:18px;
  font:400 11px var(--font-data);
  letter-spacing:.04em
}
.methodology-toggle i{
  font-size:15px
}
.provenance-content{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding:22px 0;
  border-bottom:1px solid var(--line)
}
.provenance-content h3{
  font:9px var(--font-data);
  text-transform:uppercase;
  color:var(--muted);
  letter-spacing:.07em;
  margin-bottom:10px
}
.provenance-content p{
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
  margin:0;
  overflow-wrap:anywhere
}
.provenance-content a,.notice a,.data-state a,.text-link{
  border-bottom:1px solid var(--line)
}
.table-scroll{
  overflow:auto;
  max-height:470px;
  padding-bottom:20px
}
table{
  border-collapse:collapse;
  width:100%;
  font-size:11px;
  text-align:left
}
caption{
  text-align:left;
  padding:20px 0;
  color:var(--muted);
  font:10px var(--font-data)
}
th,td{
  padding:13px;
  border-bottom:1px solid var(--soft);
  min-width:100px
}
th{
  position:sticky;
  top:0;
  background:var(--raised);
  font-weight:400;
  color:var(--accent)
}
td button{
  border:0;
  background:none;
  text-align:left;
  font:inherit;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px
}
.data-state{
  padding:70px 25px;
  background:var(--panel);
  text-align:center
}
.data-state h2{
  font-size:34px;
  margin-top:20px
}
.loading-rule{
  height:2px;
  width:120px;
  background:var(--line);
  margin:0 auto 35px;
  overflow:hidden
}
.loading-rule:after{
  content:'';
  display:block;
  width:35%;
  height:100%;
  background:var(--accent);
  animation:loading 1.6s ease-in-out infinite
}
@keyframes loading{
  0%{
    transform:translateX(-120%)
  }
  100%{
    transform:translateX(400%)
  }
}
.loading{
  font:11px var(--font-data);
  padding:100px 0;
  text-align:center
}
.reading-notes{
  padding-block:60px
}
.reading-notes .method-sequence{
  margin-top:25px
}
.reading-notes .inspection-layers{
  margin-top:32px
}
.archive-intro,.report-intro{
  padding-top:38px
}
.archive-intro h1,.report-intro h1{
  margin-top:40px
}
.archive-summary{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  margin:35px 0
}
.archive-summary>p{
  max-width:470px;
  margin:0
}
.archive-summary>div{
  display:flex;
  align-items:center;
  gap:22px
}
.archive-summary strong{
  font:400 56px/1.1 var(--font-body);
  font-variant-numeric:lining-nums tabular-nums;
  color:#d8c9b6;
  letter-spacing:-.035em;
  text-shadow:0 1px 2px rgba(5, 6, 9, .4), 0 0 22px rgba(190, 158, 117, .08)
}
.archive-summary .micro{
  max-width:100px;
  font-family:var(--font-body);
  letter-spacing:.06em
}
.archive{
  padding-bottom:30px
}
.archive-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-block:1px solid var(--line);
  padding:15px 0
}
.archive-schema{
  display:grid;
  grid-template-columns:1.2fr 1fr .7fr 1fr;
  gap:15px;
  border-bottom:1px solid var(--soft);
  padding:17px 0;
  font:9px var(--font-data);
  color:var(--muted);
  text-transform:uppercase
}
.archive-empty{
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:10%;
  align-items:center;
  padding:60px 5%
}
.archive-empty h2{
  margin-top:18px
}
.archive-empty p{
  font-size:14px;
  max-width:460px
}
.record-glyph{
  position:relative;
  width:220px;
  height:240px;
  margin:auto
}
.record-glyph i{
  position:absolute;
  inset:0 30px 25px 0;
  border:1px solid var(--line);
  clip-path:polygon(0 0,80% 0,100% 20%,100% 100%,0 100%);
  background:var(--panel);
  transform:translate(calc(var(--i)*10px),calc(var(--i)*9px));
  transform-origin:bottom left
}
.record-glyph i:nth-child(1){
  --i:0
}
.record-glyph i:nth-child(2){
  --i:1
}
.record-glyph i:nth-child(3){
  --i:2
}
.record-glyph i:nth-child(4){
  --i:3;
  border-color:var(--accent);
  background:var(--bg)
}
.record-glyph i:last-child:after{
  content:'';
  position:absolute;
  inset:28% 5% 4%;
  background:radial-gradient(ellipse, rgba(155, 123, 213, .13), transparent 70%);
  pointer-events:none
}
.record-note-symbol{
  position:absolute;
  width:80%;
  height:auto;
  left:10%;
  bottom:9%;
  opacity:.55;
  filter:saturate(.55) brightness(.78) drop-shadow(0 0 8px rgba(151, 119, 211, .15));
}
.template-object{
  display:grid;
  grid-template-columns:90px 1fr 40px;
  gap:28px;
  align-items:center;
  padding:26px;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  transition:border-color var(--motion-deliberate) var(--ease),
              background var(--motion-deliberate) var(--ease),
              transform var(--motion-deliberate) var(--ease-enter),
              box-shadow var(--motion-deliberate) var(--ease);
  view-transition-name:report-object;
  box-shadow:var(--depth-0);
  cursor:pointer
}
.template-object:hover{
  background:var(--panel);
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--depth-2)
}
.template-object:active{
  transform:translateY(0) scale(0.99);
  transition-duration:var(--motion-instant);
  box-shadow:var(--depth-1)
}
.object-id{
  font:9px/1.5 var(--font-data);
  border-right:1px solid var(--line);
  color:var(--muted)
}
.object-id b{
  font:400 44px var(--font-data);
  color:var(--accent)
}
.template-object h3{
  margin:10px 0
}
.template-object p{
  font-size:12px;
  margin:0
}
.object-arrow{
  font-size:35px;
  width:1.1em;
  height:1.1em;
  color:var(--accent);
  transition:transform var(--motion-deliberate) var(--ease-enter),
              color var(--motion-fast) var(--ease)
}
.template-object:hover .object-arrow{
  transform:translate(4px,-4px);
  color:var(--selected)
}
.archive-principles{
  padding-bottom:70px
}
.report-intro .section-label{
  margin-top:25px
}
.report-intro h1{
  view-transition-name:report-object
}
.notice{
  max-width:850px;
  border-left:2px solid var(--accent);
  background:var(--panel);
  padding:20px 24px;
  font-size:14px
}
.record-metadata{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--line);
  padding:21px 0;
  gap:25px;
  margin-top:35px;
  font:9px var(--font-data);
  color:var(--muted);
  text-transform:uppercase
}
.record-metadata b{
  display:block;
  font:400 12px var(--font-data);
  color:var(--text);
  margin-top:12px;
  text-transform:none
}
.report-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:8%;
  padding-block:40px 80px
}
.report-nav{
  position:sticky;
  top:112px;
  align-self:start;
  display:grid;
  gap:2px
}
.report-context{
  display:flex;
  justify-content:space-between;
  gap:15px;
  font:10px var(--font-data);
  color:var(--muted)
}
.report-progress{
  height:2px;
  background:var(--line);
  margin:17px 0
}
.report-progress i{
  display:block;
  height:100%;
  width:var(--progress,0%);
  background:var(--accent);
  transition:width var(--move) var(--ease)
}
.report-nav a{
  display:flex;
  gap:15px;
  padding:10px 8px;
  color:var(--muted);
  font:11px/1.5 var(--font-body);
  border-left:1px solid transparent;
  transition:background var(--move),border-color var(--move),color var(--move)
}
.report-nav a span{
  font:9px var(--font-data);
  padding-top:2px
}
.report-nav a[aria-current]{
  background:var(--raised);
  border-color:var(--accent);
  color:var(--text)
}
.report-section{
  padding:38px 0 65px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:115px
}
.report-section:first-child{
  padding-top:10px
}
.report-section h2{
  font-size:34px;
  margin-top:19px
}
.report-section p{
  max-width:750px
}
.figure-slot{
  border:1px dashed var(--line);
  padding:28px;
  margin-top:30px
}
.figure-slot p{
  font-size:13px;
  margin:15px 0 0
}
.reveal-ready[data-reveal=mask]{
  clip-path:inset(0 0 90% 0)
}
.reveal-ready[data-reveal=mask].revealed{
  animation:reveal-mask .9s var(--ease) both
}
@keyframes reveal-mask{
  to{
    clip-path:inset(0)
  }
}
.reveal-ready[data-reveal=rules] .method-sequence li:before{
  transform:scaleX(0)
}
.reveal-ready[data-reveal=rules].revealed .method-sequence li:before{
  animation:draw-rule .9s var(--ease) both
}
.reveal-ready[data-reveal=rules].revealed li:nth-child(2):before{
  animation-delay:.12s
}
.reveal-ready[data-reveal=rules].revealed li:nth-child(3):before{
  animation-delay:.24s
}
.reveal-ready[data-reveal=instrument].revealed .record-glyph i{
  animation:assemble-record .9s var(--ease) both;
  animation-delay:calc(var(--i)*80ms)
}
@keyframes assemble-record{
  from{
    transform:translate(0,0) rotate(-9deg);
    opacity:.2
  }
  to{
    transform:translate(calc(var(--i)*10px),calc(var(--i)*9px)) rotate(0);
    opacity:1
  }
}
/* Page-specific snapshots retain their natural dimensions; only their textures slide. */
@view-transition { navigation:auto; }
[data-transition-offscreen] { view-transition-name:none!important; }
.site-header { view-transition-name:page-header; }
body[data-page="home"] main h1 { view-transition-name:home-heading; }
body[data-page="home"] main > section:first-of-type { view-transition-name:home-hero; }
body[data-page="home"] main > section:nth-of-type(2) { view-transition-name:home-body; }
body[data-page="home"] main > section:nth-of-type(3) { view-transition-name:home-lower; }
body[data-page="home"] .site-footer { view-transition-name:home-footer; }
body[data-page="home"] .home-introduction { view-transition-name:home-introduction; }
body[data-page="ai-progress"] main h1 { view-transition-name:progress-heading; }
body[data-page="ai-progress"] main > section:first-of-type { view-transition-name:progress-hero; }
body[data-page="ai-progress"] main > section:nth-of-type(2) { view-transition-name:progress-body; }
body[data-page="ai-progress"] main > section:nth-of-type(3) { view-transition-name:progress-lower; }
body[data-page="ai-progress"] .site-footer { view-transition-name:progress-footer; }
body[data-page="experiments"] main h1 { view-transition-name:archive-heading; }
body[data-page="experiments"] main > section:first-of-type { view-transition-name:archive-hero; }
body[data-page="experiments"] main > section:nth-of-type(2) { view-transition-name:archive-body; }
body[data-page="experiments"] main > section:nth-of-type(3) { view-transition-name:archive-lower; }
body[data-page="experiments"] .site-footer { view-transition-name:archive-footer; }
body[data-page="report"] main h1 { view-transition-name:report-heading; }
body[data-page="report"] main > section:first-of-type { view-transition-name:report-hero; }
body[data-page="report"] main > section:nth-of-type(2) { view-transition-name:report-body; }
body[data-page="report"] main > section:nth-of-type(3) { view-transition-name:report-lower; }
body[data-page="report"] .site-footer { view-transition-name:report-footer; }
::view-transition-group(*) { animation-duration:900ms; animation-timing-function:cubic-bezier(.22,.61,.36,1); }
/* Opacity already supplies the section fades. Avoid the default plus-lighter
   blend pass for every pair of full-section snapshot textures. */
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode:normal; }
::view-transition-group(home-heading),
::view-transition-group(home-hero),
::view-transition-group(home-body),
::view-transition-group(home-lower),
::view-transition-group(home-footer),
::view-transition-group(home-introduction),
::view-transition-group(progress-heading),
::view-transition-group(progress-hero),
::view-transition-group(progress-body),
::view-transition-group(progress-lower),
::view-transition-group(progress-footer),
::view-transition-group(archive-heading),
::view-transition-group(archive-hero),
::view-transition-group(archive-body),
::view-transition-group(archive-lower),
::view-transition-group(archive-footer),
::view-transition-group(report-heading),
::view-transition-group(report-hero),
::view-transition-group(report-body),
::view-transition-group(report-lower),
::view-transition-group(report-footer) { animation:none; }
::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(page-header), ::view-transition-new(page-header), ::view-transition-old(brand), ::view-transition-new(brand) { animation:none; mix-blend-mode:normal; }
::view-transition-old(home-heading),
::view-transition-old(home-hero),
::view-transition-old(progress-heading),
::view-transition-old(progress-hero),
::view-transition-old(archive-heading),
::view-transition-old(archive-hero),
::view-transition-old(report-heading),
::view-transition-old(report-hero) { animation:section-left-out 700ms cubic-bezier(.22,.61,.36,1) both; }
::view-transition-new(home-heading),
::view-transition-new(home-hero),
::view-transition-new(progress-heading),
::view-transition-new(progress-hero),
::view-transition-new(archive-heading),
::view-transition-new(archive-hero),
::view-transition-new(report-heading),
::view-transition-new(report-hero) { animation:section-right-in 950ms cubic-bezier(.22,.61,.36,1) both; }
::view-transition-old(home-body),
::view-transition-old(home-lower),
::view-transition-old(home-footer),
::view-transition-old(home-introduction),
::view-transition-old(progress-body),
::view-transition-old(progress-lower),
::view-transition-old(progress-footer),
::view-transition-old(archive-body),
::view-transition-old(archive-lower),
::view-transition-old(archive-footer),
::view-transition-old(report-body),
::view-transition-old(report-lower),
::view-transition-old(report-footer) { animation:section-right-out 700ms cubic-bezier(.22,.61,.36,1) both; }
::view-transition-new(home-body),
::view-transition-new(home-lower),
::view-transition-new(home-footer),
::view-transition-new(home-introduction),
::view-transition-new(progress-body),
::view-transition-new(progress-lower),
::view-transition-new(progress-footer),
::view-transition-new(archive-body),
::view-transition-new(archive-lower),
::view-transition-new(archive-footer),
::view-transition-new(report-body),
::view-transition-new(report-lower),
::view-transition-new(report-footer) { animation:section-left-in 950ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes section-left-out { to { transform:translate3d(-70px,-12px,0); opacity:0; } }
@keyframes section-right-out { to { transform:translate3d(70px,12px,0); opacity:0; } }
@keyframes section-right-in { from { transform:translate3d(90px,16px,0); opacity:0; } to { transform:translate3d(0,0,0); opacity:1; } }
@keyframes section-left-in { from { transform:translate3d(-90px,20px,0); opacity:0; } to { transform:translate3d(0,0,0); opacity:1; } }
@media(max-width:1100px){
  .site-header{
    gap:18px
  }
  .site-header nav a{
    padding-inline:14px
  }
  .filters{
    grid-template-columns:repeat(3,1fr)
  }
  .instrument-toolbar{
    align-items:start
  }
  .toolbar-secondary{
    gap:18px
  }
  .segmented button{
    padding-inline:10px
  }
  .lens-nav button strong{
    font-size:22px
  }
  .lens-nav small{
    font-size:10px
  }
  .instrument-body.has-selection{
    grid-template-columns:minmax(0,1fr) 265px;
    gap:20px
  }
  .window-top{
    flex-direction:column;
    gap:5px
  }
}
@media(max-width:760px){
  html{
    scroll-padding-top:125px
  }
  .site-header{
    height:auto;
    min-height:108px;
    padding:15px 5% 10px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:13px
  }
  .site-header .brand{
    font-size:16px
  }
  .brand-symbol{
    width:23px;
    height:22px;
    margin-right:9px
  }
  .brand-symbol i{
    width:4px
  }
  .site-header nav{
    grid-row:2;
    grid-column:1/3;
    justify-content:space-between;
    width:100%;
    padding:3px;
    gap:0
  }
  .site-header nav a{
    padding:9px 12px;
    font-size:11px
  }
  .site-header nav a span{
    font-size:8px;
    margin-right:7px
  }
  .nav-indicator{
    top:3px;
    height:calc(100% - 6px)
  }
  .home-entry{
    padding-top:26px
  }
  .entry-meta>.micro{
    display:none
  }
  .entry-meta>.eyebrow{
    font-size:8px;
    letter-spacing:-.02em
  }
  .wordmark{
    font-size:10.3vw;
    margin:30px 0 24px
  }
  .home-readout{
    grid-column:2;
    margin-top:0;
    min-height:0
  }
  .home-readout strong{
    font-size:15px
  }
  .home-readout .eyebrow{
    font-size:7px
  }
  .home-readout .micro{
    font-size:8px
  }
  .window-top{
    flex-direction:row;
    gap:15px
  }
  .window-top .eyebrow,.window-top .micro{
    font-size:7px
  }
  .home-chart{
    min-height:285px
  }
  .home-metric-switch{
    gap:0;
    flex-wrap:wrap
  }
  .home-metric-switch button{
    font-size:9px;
    padding:8px
  }
  .observatory-window>p{
    font-size:8px
  }
  .section-label>.micro{
    display:none
  }
  .large-copy{
    font-size:23px
  }
  .method-sequence{
    grid-template-columns:1fr;
    gap:23px;
    margin-top:30px
  }
  .method-sequence h3{
    margin-top:16px;
    font-size:25px
  }
  .method-sequence p{
    margin-bottom:0;
    max-width:100%
  }
  .site-footer{
    grid-template-columns:1fr;
    gap:23px;
    padding-block:30px
  }
  .site-footer>a:not(.micro){
    justify-self:start
  }
  .site-footer>.micro:last-child{
    text-align:left
  }
  .progress-intro{
    padding-top:25px
  }
  .progress-intro .eyebrow{
    font-size:8px
  }
  .progress-title{
    margin:23px 0;
    display:block
  }
  .progress-title h1{
    font-size:43px
  }
  .progress-title p{
    font-size:11px;
    margin-top:18px
  }
  .progress-title p br{
    display:none
  }
  .progress-title p a{
    display:block;
    width:max-content
  }
  .snapshot-bar{
    display:block;
    font-size:8px;
    line-height:1.7
  }
  .snapshot-bar>span{
    display:block
  }
  .lens-nav{
    gap:14px;
    grid-template-columns:1fr 1fr;
    margin-top:15px;
    padding-bottom:18px
  }
  .lens-nav button strong{
    font-size:22px
  }
  .lens-nav button>span{
    font-size:9px;
    margin-right:8px
  }
  .lens-nav small{
    font-size:9px;
    margin-top:6px
  }
  .lens-nav button:after{
    bottom:0
  }
  .instrument-toolbar{
    display:block;
    padding:18px 0
  }
  .segmented{
    gap:0
  }
  .segmented button{
    font-size:11px;
    padding:8px 11px
  }
  .toolbar-secondary{
    justify-content:space-between;
    margin-top:15px
  }
  .filters{
    grid-template-columns:1fr 1fr;
    gap:14px
  }
  .filters label:first-child{
    grid-column:1/3
  }
  .filters label{
    font-size:8px
  }
  .instrument-heading{
    gap:10px;
    margin:0 0 20px;
    align-items:start
  }
  .instrument-heading h2{
    font-size:26px
  }
  .instrument-heading .eyebrow{
    font-size:8px
  }
  .instrument-heading p{
    font-size:11px
  }
  .coverage-signal{
    align-self:start;
    margin-top:15px
  }
  .coverage-signal strong{
    font-size:24px
  }
  .coverage-signal span{
    font-size:7px;
    max-width:68px;
    white-space:normal
  }
  .instrument-body,.instrument-body.has-selection{
    grid-template-columns:minmax(0,1fr);
    gap:0
  }
  .inspector{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows var(--move) var(--ease),opacity var(--move)
  }
  .has-selection .inspector{
    grid-template-rows:1fr
  }
  .inspector-inner{
    min-width:0;
    min-height:0;
    overflow:hidden;
    border-left:0;
    padding:0;
    background:var(--panel)
  }
  .has-selection .inspector-inner{
    padding:20px;
    margin-top:20px;
    border:1px solid var(--line)
  }
  .inspector dl{
    grid-template-columns:95px minmax(0,1fr);
    gap:10px
  }
  .inspector dt{
    margin:0
  }
  #chart{
    min-height:310px
  }
  .chart-meta{
    font-size:7px
  }
  .chart-svg text{
    font-size:9px
  }
  .hover-readout{
    font-size:9px;
    min-height:43px
  }
  .layer-toggle{
    grid-template-columns:1fr 20px;
    gap:8px;
    padding:18px 0
  }
  .layer-toggle>span{
    grid-column:1;
    font-size:8px
  }
  .layer-toggle strong{
    grid-column:1;
    font-size:17px
  }
  .layer-toggle i{
    grid-column:2;
    grid-row:1/3
  }
  .methodology-toggle{
    padding:12px 0 8px
  }
  .methodology-toggle strong{
    font-size:11px
  }
  .methodology-toggle i{
    grid-row:1
  }
  .provenance-content{
    grid-template-columns:1fr;
    gap:25px
  }
  .reading-notes{
    padding-block:40px
  }
  .archive-intro,.report-intro{
    padding-top:28px
  }
  .archive-intro h1,.report-intro h1{
    font-size:43px;
    margin-top:28px
  }
  .archive-summary{
    align-items:start;
    gap:20px
  }
  .archive-summary>p{
    font-size:13px
  }
  .archive-summary>div{
    display:block
  }
  .archive-summary strong{
    font-size:48px
  }
  .archive-summary .micro{
    display:block;
    font-size:8px
  }
  .archive-schema{
    grid-template-columns:1fr 1fr;
    gap:14px;
    font-size:8px
  }
  .archive-empty{
    grid-template-columns:1fr;
    padding:35px 0;
    gap:25px
  }
  .record-glyph{
    width:140px;
    height:155px;
    margin:0 20px
  }
  .record-glyph i:last-child:after{
    font-size:45px;
    bottom:10px;
    left:12px
  }
  .archive-empty h2{
    font-size:40px
  }
  .archive-empty p{
    font-size:13px
  }
  .archive-toolbar .status-tag{
    font-size:7px;
    padding:5px
  }
  .template-object{
    grid-template-columns:48px 1fr 18px;
    gap:15px;
    padding:20px 14px
  }
  .template-object h3{
    font-size:22px
  }
  .template-object p{
    font-size:11px
  }
  .object-id{
    font-size:8px
  }
  .object-id b{
    font-size:30px
  }
  .object-arrow{
    font-size:22px
  }
  .record-metadata{
    grid-template-columns:1fr 1fr;
    gap:22px
  }
  .report-layout{
    grid-template-columns:1fr;
    gap:30px;
    padding-top:25px
  }
  .report-nav{
    position:static;
    grid-template-columns:1fr 1fr;
    gap:3px
  }
  .report-context,.report-progress{
    grid-column:1/3
  }
  .report-nav a{
    font-size:10px;
    gap:10px;
    padding:8px
  }
  .report-section h2{
    font-size:29px
  }
  .report-section{
    padding-bottom:40px;
    scroll-margin-top:130px
  }
  .notice{
    font-size:12px;
    padding:16px 20px
  }
  .data-state{
    padding:45px 18px
  }
  .data-state h2{
    font-size:30px
  }

}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .reveal-ready[data-reveal]{
    clip-path:none!important
  }
  .method-sequence li:before{
    transform:none!important
  }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none!important
  }
}
/* Focused UX refinement: open navigation, restrained controls, native scroll scenes. */
.site-header nav { border:0; padding:4px 0; gap:clamp(36px, 4.5vw, 72px); overflow:visible; }
.site-header nav a { padding:12px 0; font-size:14px; transition:color .25s,transform .35s var(--ease); }
.site-header nav a:hover { color:var(--text); transform:translateY(-2px); }
.site-header nav a[aria-current] { font-weight:500; }
.nav-indicator { top:auto; bottom:0; height:2px; background:var(--accent); border:0; }
.site-header nav a[href*="experiments"] { color:var(--text); }

.site-header nav a,
body[data-page="ai-progress"] .lens-nav button strong {
  font-family:var(--font-display);
}

body[data-page="experiments"] .site-header .brand,
body[data-page="experiments"] .brand-inline,
body[data-page="experiments"] .site-footer .brand,
body[data-page="experiments"] .brand-email {
  font-family:var(--font-brand);
  font-weight:400;
  letter-spacing:-.02em;
}

body[data-page="experiments"] .brand .psych,
body[data-page="experiments"] .brand-inline .psych,
body[data-page="experiments"] .brand-email .psych {
  color:var(--accent);
}
.segmented button,.home-metric-switch button,.related-metrics button { border:0; border-bottom:1px solid transparent; background:none; transition:color .25s,border-color .3s,transform .3s var(--ease); }
.segmented button:hover,.home-metric-switch button:hover,.related-metrics button:hover { color:var(--text); transform:translateY(-1px); }
.segmented button[aria-pressed=true],.home-metric-switch button[aria-pressed=true],.related-metrics button[aria-pressed=true] { background:none; border-color:var(--accent); color:var(--text); }
#filter-count { border:0; width:auto; }
.quiet-button { border:0; border-bottom:1px solid var(--line); transition:color .25s,border-color .25s; }
.quiet-button:hover { background:none; border-color:var(--accent); }
.text-link { display:inline-flex; gap:25px; padding-block:10px; border-bottom:1px solid var(--line); font-family:var(--font-body); font-size:inherit; font-weight:inherit; letter-spacing:inherit; }
.home-introduction p .text-link { align-items:center; gap:0; padding-block:0; line-height:inherit; vertical-align:baseline; }
.home-introduction p .text-link .href-symbol {
  width:1.35em;
  height:1.35em;
  margin-left:-.08em;
  margin-right:0;
  position:relative;
  top:-.1em;
  background-size:contain;
  overflow:hidden;
}
.home-introduction p .text-link .href-symbol::after { content:none; }
.home-introduction p .text-link:hover .href-symbol { transform:none; }
.text-link span { transition:transform .4s var(--ease); }
.text-link:hover span { transform:translateY(4px); }
.home-introduction { display:grid; grid-template-columns:1.3fr 1fr; gap:10%; padding:35px 0 70px; align-items:start; position:relative; }
.home-introduction h2 { font-size:clamp(30px,3.3vw,49px); margin-bottom:32px; }
.home-introduction p { max-width:470px; font-size:16px; line-height:1.75; }
.research-scroll { display:grid; grid-template-columns:1fr 1fr; gap:10%; position:relative; border-top:1px solid var(--line); }
.research-stage { align-self:start; padding-top:60px; }
.scene-words { position:relative; font:400 clamp(35px,5.7vw,86px)/1.1 var(--font-display); letter-spacing:-.065em; margin:24px 0 45px; }
.scene-words span { display:block; }
.research-object { position:relative; height:200px; width:80%; }
.research-object i { position:absolute; inset:0; border-top:1px solid var(--line); background:var(--bg); font:11px var(--font-data); font-style:normal; padding:15px 0; color:var(--muted); transform:translate(0,calc(var(--layer)*45px)); }
.research-object i:nth-child(1){--layer:0}
.research-object i:nth-child(2){--layer:1}
.research-object i:nth-child(3){--layer:2}
.scene-track { height:1px; background:var(--line); width:80%; margin-top:25px; }
.scene-track i { display:block; height:100%; width:100%; background:var(--accent); transform-origin:left; transform:scaleX(var(--research-progress,0)); }
.research-scene { padding:65px 0; }
.research-scene h2 { font-size:clamp(29px,3.2vw,46px); margin-top:25px; line-height:1.1; }
.research-scene p { max-width:460px; }
.scroll-enhanced .research-stage { position:sticky; top:105px; padding-top:65px; }
.scroll-enhanced .scene-words { height:1.2em; }
.scroll-enhanced .scene-words span { position:absolute; inset:0; opacity:0; will-change:transform,opacity; }
.scroll-enhanced .scene-words span:first-child { opacity:1; }
.scroll-enhanced .research-scene { min-height:70svh; display:flex; flex-direction:column; justify-content:center; }
.scroll-enhanced .research-object i { transform:translate(calc(var(--layer)*var(--research-progress,0)*12px),calc(var(--layer)*(45px + var(--research-progress,0)*14px))); }
.home-destinations { display:grid; grid-template-columns:1.35fr 1fr; gap:9%; padding-block:75px; border-top:1px solid var(--line); }
.experiment-destination { display:block; padding-top:25px; }
.experiment-destination h2 { font-size:clamp(45px,6.3vw,92px); margin-block:28px; }
.experiment-destination p { display:flex; align-items:center; gap:12px; max-width:460px; }
.experiment-destination p .destination-arrow { font-size:clamp(45px,6.3vw,92px); margin-left:0; }
.experiment-destination small { display:block; margin-top:30px; font-size:12px; color:var(--muted); }
.experiment-destination .text-link { color:var(--accent); }
.destination-arrow { display:inline-block; width:1em; height:1em; font-size:1em; transition:transform .45s var(--ease); }
.experiment-destination:hover .destination-arrow,.context-link:hover .destination-arrow { transform:translate(7px,-7px); }
.context-destination { padding-top:30px; }
.context-link { display:block; }
.context-link h2 { font-size:32px; margin-block:18px; }
.context-link h2 .destination-arrow { margin-left:-.12em; }
.context-link p { font-size:13px; max-width:440px; }
.context-destination .observatory-window { border:0; padding-top:8px; }
.context-destination .home-chart { min-height:290px; }
.context-destination .home-readout { border:0; min-height:55px; margin-top:18px; padding:0; }
.context-destination .home-readout strong { font-size:14px; }
.context-destination .home-readout .micro { font-size:9px; }
.source-credit { font-size:11px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.source-credit a { text-decoration:underline; text-underline-offset:4px; }
.source-credit span { margin-left:12px; }
.benchmark-browser{
  width:min(1120px,calc(100vw - 48px));
  height:min(760px,calc(100vh - 48px));
  margin:auto;
  padding:0;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text)
}
.benchmark-browser::backdrop{background:rgba(5,5,8,.82);backdrop-filter:blur(6px)}
.benchmark-browser-shell{height:100%;overflow:auto;padding:28px 32px 36px}
.benchmark-browser header{display:flex;justify-content:space-between;align-items:start;gap:30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.benchmark-browser header h2{margin:7px 0 0;font-size:34px}
.benchmark-browser header button{border:0;border-bottom:1px solid var(--line);padding:7px 0;background:none;color:var(--muted);font:12px var(--font-body)}
.capability-mode .instrument-toolbar,.capability-mode #filter-panel { display:none; }
.benchmark-search { display:grid; grid-template-columns:auto minmax(220px,1fr); align-items:center; gap:18px; margin:24px 0 28px; color:var(--muted); font:11px var(--font-data); }
.benchmark-search input{font-size:16px;padding:11px 4px}
.benchmark-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 30px; }
.benchmark-category { min-width:0; border-top:1px solid var(--line); }
.benchmark-category h3 { display:flex;justify-content:space-between;gap:12px;margin:0;padding:12px 2px;font:13px var(--font-body);color:var(--text); }
.benchmark-category h3 small { color:var(--muted); font:9px var(--font-data); white-space:nowrap; }
.benchmark-options { padding:0 2px 7px; }
.benchmark-list button { display:block; width:100%; border:0; border-top:1px solid var(--soft); padding:10px 2px; background:none; color:var(--muted); text-align:left; font:13px var(--font-body); transition:color .2s,border-color .2s; }
.benchmark-list button:hover,.benchmark-list button[aria-pressed=true] { color:var(--text); border-color:var(--accent); }
.benchmark-list button[aria-pressed=true]::before { content:'•'; color:var(--accent); margin-right:7px; }
.lens-nav .primary-lens { flex:1.35; }
.lens-nav .primary-lens strong { color:var(--accent); }
.benchmark-explainer { margin:2px 0 22px; border:0; }
.benchmark-explainer>summary { display:flex; align-items:center; gap:14px; width:fit-content; max-width:100%; padding:10px 0; color:#c3b5cd; cursor:pointer; list-style:none; font:16px/1.5 var(--font-brand); text-shadow:0 0 20px rgba(174, 148, 183, .1); }
.benchmark-explainer>summary::-webkit-details-marker { display:none; }
.benchmark-explainer>summary:hover,.benchmark-explainer[open]>summary { color:var(--text); }
.benchmark-explainer>summary .href-symbol { display:none; }
.benchmark-explainer>summary::after { content:""; flex:0 0 6px; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); transition:transform .2s var(--ease); }
.benchmark-explainer[open]>summary::after { transform:rotate(225deg); }
.benchmark-explainer-content { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; background:none; border:0; padding:14px 0 24px; }
.benchmark-explainer-content>div { background:none; padding:0; }
.benchmark-explainer small { display:block; margin-bottom:9px; color:#c8b7d2; font:15px/1.5 var(--font-brand); letter-spacing:0; text-transform:none; }
.benchmark-explainer p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; text-shadow:0 1px 2px rgba(5, 6, 9, .6); }
.chart-options-toggle { display:inline-flex; align-items:center; gap:9px; margin-left:auto; padding:8px 0; border:0; background:none; color:var(--muted); font:12px var(--font-body); cursor:pointer; white-space:nowrap; }
.chart-options-toggle:hover,.chart-options-toggle[aria-expanded=true] { color:var(--text); }
.options-chevron { width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); transition:transform .18s; }
.chart-options-toggle[aria-expanded=true] .options-chevron { transform:rotate(225deg); }
.chart-options-toggle #filter-count { width:auto; height:auto; margin:0; font:inherit; }
.chart-options-toggle #filter-count[hidden] { display:none; }
.chart-options-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; border-top:1px solid var(--line); }
.chart-range { display:flex; align-items:center; gap:18px; min-width:0; }
.chart-options-label { color:var(--muted); font:10px var(--font-data); white-space:nowrap; }
.range-controls { margin-left:0; }
.range-controls button { min-width:42px; }
.instrument-toolbar:has(.segmented:empty) { justify-content:flex-end; }
.instrument-heading { margin-top:5px; }
.instrument-heading h2 { margin-top:0; }
.lens-nav button strong { font-size:25px; }
@media(max-width:760px) {
  .instrument-toolbar .chart-options-toggle { display:flex; margin-left:auto; }
  .chart-options-row { flex-wrap:wrap; gap:14px; }
  .chart-range { flex-wrap:wrap; gap:8px; width:100%; }
  .chart-range .range-controls { width:auto; order:initial; }
  body[data-page="home"]::before{
    inset:132px 0 0 auto;
    width:100vw;
    background-size:min(58vw,300px) auto;
    background-position:right 2% top 20px;
    opacity:.065;
  }
  body[data-page="ai-progress"]::before{
    inset:132px 0 0;
    background-size:145vw auto;
    background-position:center 115px;
    opacity:.065;
  }
  body[data-page="experiments"]::before{
    inset:132px 0 0;
    background-size:165vw auto;
    background-position:center 110px;
    opacity:.04;
  }
  .site-header { grid-template-columns:1fr; gap:12px; padding-bottom:10px; }
  .site-header nav { grid-column:1; gap:24px; justify-content:flex-start; width:100%; padding:0; }
  .site-header nav a { padding:8px 0; font-size:12px; }
  .nav-indicator { top:auto; bottom:0; height:1px; }
  .home-introduction { grid-template-columns:1fr; gap:10px; padding:10px 0 35px; }
  .home-introduction h2 { font-size:32px; }
  .home-introduction p { font-size:14px; }
  .token-candidates { left: 0; }
  .research-scroll { display:block; }
  .research-stage { padding-top:25px; }
  .research-object { display:none; }
  .scene-words { font-size:46px; margin:12px 0 18px; }
  .scene-track { margin-top:12px; width:100%; }
  .scroll-enhanced .research-stage { top:105px; padding-block:20px; background:var(--bg); z-index:2; }
  .scroll-enhanced .research-scene { min-height:60svh; padding-block:60px; }
  .research-scene h2 { font-size:30px; }
  .home-destinations { grid-template-columns:1fr; gap:45px; padding-block:40px; }
  .experiment-destination h2 { font-size:clamp(42px,13.5vw,54px); }
  .experiment-destination p .destination-arrow { font-size:clamp(42px,13.5vw,54px); }
  .context-destination { border-top:1px solid var(--line); padding-top:35px; }
  .context-destination .home-readout { display:block; }
  .context-destination .home-readout strong,.context-destination .home-readout .micro { display:block; margin-bottom:7px; }
  .benchmark-search { grid-template-columns:1fr; }
  .benchmark-browser { width:calc(100vw - 20px); height:calc(100vh - 20px); }
  .benchmark-browser-shell { padding:20px 18px 28px; }
  .benchmark-browser header h2 { font-size:27px; }
  .benchmark-list { grid-template-columns:1fr; gap:22px; }
  .benchmark-explainer-content { grid-template-columns:1fr 1fr; }
  .post-chart-controls { grid-template-columns:1fr; gap:0; }
  .post-chart-controls .record-finder { grid-template-columns:1fr; border-top:1px solid var(--soft); }
  .range-controls { width:100%; order:2; overflow:auto; }
  .source-credit span { display:block; margin:8px 0 0; }
  .instrument-toolbar:has(.segmented:empty) .toolbar-secondary { margin-top:0; }
}
@media(prefers-reduced-motion:reduce) {
  .scroll-enhanced .research-stage { position:static; }
  .scroll-enhanced .research-scene { min-height:0; }
  .scene-words { height:auto!important; }
  .scene-words span { position:static!important; opacity:1!important; transform:none!important; }
  .research-object i { transform:translateY(calc(var(--layer)*45px))!important; }
}
.filters label,.record-finder { font:9px var(--font-data); color:var(--muted); display:grid; gap:9px; }
.tour-control { font:10px var(--font-data); color:var(--muted); padding:8px 0; margin-top:8px; }

/* Occasional brand silhouettes inherit the scene's light and grain, behind type. */
.brand-atmosphere {
  position:fixed;
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:0;
  mix-blend-mode:screen;
}
.brand-atmosphere img {
  position:relative;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:sepia(.32) saturate(.48) contrast(.82) blur(.35px);
  mask-image:radial-gradient(ellipse at 50% 43%, #000 22%, rgba(0,0,0,.85) 48%, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 43%, #000 22%, rgba(0,0,0,.85) 48%, transparent 74%);
}
.brand-atmosphere-scribble {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  fill:none;
  stroke:#e2cedd;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
  mask-image:radial-gradient(ellipse, #000 55%, transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse, #000 55%, transparent 88%);
}
.brand-atmosphere-scribble path {
  stroke-dasharray:1;
  stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
}
.brand-atmosphere-scribble path:nth-child(even) {
  stroke:#decaab;
  stroke-width:1;
}
@media (prefers-reduced-motion:reduce), (forced-colors:active) {
  .brand-atmosphere { display:none; }
}

/* Shared atmosphere: light, paper-like ink, and a fine photographic grain.
   Blend only large display type; reading copy and data keep solid colors. */
body {
  background-image:
    radial-gradient(ellipse at 78% 18%, rgba(126, 105, 151, .12), transparent 55%),
    radial-gradient(ellipse at 12% 3%, rgba(169, 135, 86, .075), transparent 48%);
  background-attachment:fixed;
  isolation:isolate;
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:31;
  pointer-events:none;
  background:url("atmosphere-grain.svg") repeat;
  opacity:.035;
  mix-blend-mode:soft-light;
}
.site-header {
  background:none;
  backdrop-filter:none;
  border-bottom:0;
  isolation:isolate;
}
.site-header::before {
  content:"";
  position:absolute;
  inset:0 0 -144px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(110deg, rgba(28, 24, 29, .9), rgba(17, 17, 25, .88));
  backdrop-filter:blur(12px);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .92) 24%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, .22) 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .92) 24%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, .22) 70%, transparent 100%);
}
.brand, .brand-inline, .brand-email {
  color:var(--text);
  text-shadow:0 1px 1px rgba(5, 6, 9, .5), 0 0 16px rgba(188, 159, 111, .10);
}
.brand-symbol, .href-symbol {
  filter:sepia(.2) saturate(.72);
  mix-blend-mode:screen;
}
.site-header nav a {
  text-shadow:0 0 18px rgba(190, 166, 127, .10);
}
.site-header .brand :is(.machine, .psych, .lab) {
  padding-right:.2em;
  margin-right:-.2em;
}
.nav-indicator {
  display:none;
  background:linear-gradient(90deg, var(--accent), rgba(184, 166, 217, .3));
  box-shadow:0 0 12px rgba(184, 166, 217, .18);
}
.home-entry, .archive-intro, .progress-title, .report-intro {
  position:relative;
}
.home-entry::before {
  content:"";
  position:absolute;
  inset:0 0 18% -5%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 48% 27%, rgba(158, 129, 110, .08), transparent 67%);
  /* Fade the local glow in before it reaches the title, avoiding a seam at the header. */
  mask-image:linear-gradient(to bottom, transparent, #000 140px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 140px);
}
.wordmark {
  text-shadow:0 2px 2px rgba(3, 4, 7, .3), 0 0 38px rgba(183, 152, 111, .08);
  mix-blend-mode:screen;
}
.wordmark .psych {
  text-shadow:0 0 32px rgba(155, 126, 191, .14);
}
/* One shared brand ink for logos, text hover and the logo's particle intro. */
body :is(.wordmark,.brand,.brand-inline,.brand-email,.knowledge-signature) .psych {
  background-image:none;
  color:var(--accent);
  text-shadow:none;
}
/* Telma's swashes extend past their advance width: retain room for clipped ink. */
.wordmark [data-wordmark] > span {
  padding-right:.2em;
  margin-right:-.2em;
}
.home-introduction h2, .research-scene h2, .scene-words,
.home-destinations h2, .archive-intro h1, .progress-title h1,
.report-intro h1, .report-section h2 {
  color:var(--text);
  text-shadow:0 1px 2px rgba(3, 4, 7, .35), 0 0 26px rgba(191, 163, 127, .06);
}
.type-light {
  color:#beb4c5;
}
.eyebrow, .text-link, .brand .psych, .brand-inline .psych, .brand-email .psych {
  text-shadow:0 0 18px rgba(167, 137, 192, .10);
}
.home-introduction p, .research-scene p, .progress-title p, .report-section p {
  text-shadow:0 1px 2px rgba(5, 6, 9, .65);
}
/* Quiet ink movement, using the original typography and palette of each role. */
.ink-drift {
  animation-duration:32s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-delay:var(--ink-delay,0s);
  animation-play-state:paused;
}
.ink-drift.ink-in-view { animation-play-state:running; }
.ink-drift-gradient {
  background-size:180% 100%;
  background-repeat:no-repeat;
  animation-name:ink-gradient-drift;
}
.ink-drift-solid { animation-name:ink-color-drift; }
@keyframes ink-gradient-drift {
  from { background-position:0% 50%; }
  to { background-position:100% 50%; }
}
@keyframes ink-color-drift {
  from { color:var(--ink-base); }
  to { color:color-mix(in srgb,var(--ink-base) 86%,#c2d6df); }
}
/* Hover ink retains its deliberate response above the ambient colour. */
a.ink-drift-solid:is(:hover,:focus-visible),button.ink-drift-solid:is(:hover,:focus-visible) { animation-name:none; }
a.ink-drift-gradient:is(:hover,:focus-visible) { animation-play-state:paused; }
.ink-motion-paused .ink-drift { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce),(forced-colors:active) {
  .ink-drift { animation:none; }
  .ink-drift-gradient { background-size:100% 100%; }
}
.research-object i {
  background:none;
  border-top:0;
  box-shadow:none;
}
.site-footer {
  border-top-color:rgba(191, 177, 157, .18);
  background:linear-gradient(110deg, rgba(144, 116, 82, .035), transparent 65%);
}
.observatory {
  background:none;
}
body[data-page="ai-progress"]::before {
  opacity:.04;
}
.chart-region, .observatory-window {
  background:radial-gradient(ellipse at 55% 50%, rgba(137, 113, 158, .045), transparent 70%);
}
.chart-svg text {
  fill:#bcb3b7;
}
.chart-svg .grid {
  stroke:rgba(191, 179, 180, .1);
}
.chart-svg .axis-line {
  stroke:rgba(191, 179, 180, .28);
}
.chart-svg .point-mark {
  fill:var(--point-ink, var(--accent));
  stroke:rgba(201, 183, 218, .32);
  stroke-width:.65;
}
.chart-svg .point-mark.estimated, .chart-svg .point-mark.unspecified {
  fill:transparent;
}
.chart-svg .point-mark.mixed {
  fill:var(--mixed-ink, var(--blue));
  stroke:rgba(173, 194, 211, .4);
}
.chart-svg .ink-light { stop-color:#d1bfdc; }
.chart-svg .ink-mid { stop-color:var(--accent); }
.chart-svg .ink-edge { stop-color:#9988ad; }
.chart-svg .ink-mixed .ink-light { stop-color:#c1d0d7; }
.chart-svg .ink-mixed .ink-mid { stop-color:#a0b8ca; }
.chart-svg .ink-mixed .ink-edge { stop-color:#829bae; }
.chart-meta, .instrument-heading p, .coverage-signal,
.home-metric-switch, .segmented, .post-chart-controls {
  text-shadow:0 1px 2px rgba(5, 6, 9, .5), 0 0 18px rgba(174, 148, 183, .06);
}

/* Clipped light stays above a legible solid-color fallback. No glyph masking. */
/* Observatory controls and source annotations share the surrounding ink and light. */
body[data-page="ai-progress"] select,
body[data-page="ai-progress"] input {
  color:var(--text);
  border:0;
  border-bottom:1px solid rgba(193, 177, 204, .28);
  background-color:transparent;
  background-image:linear-gradient(110deg, rgba(185, 157, 123, .04), rgba(163, 141, 191, .045));
  padding:10px 8px;
  transition:border-color .2s, background-color .2s;
}
body[data-page="ai-progress"] select {
  appearance:none;
  border-bottom:0;
  background-color:transparent;
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23b8a6c6' stroke-width='1.2'/%3E%3C/svg%3E");
  background-position:right 9px center;
  background-repeat:no-repeat;
  padding-left:0;
  text-shadow:0 1px 2px rgba(5, 6, 9, .5), 0 0 18px rgba(174, 148, 183, .08);
}
body[data-page="ai-progress"] select:hover,
body[data-page="ai-progress"] input:hover {
  border-bottom-color:var(--accent);
  background-color:rgba(184, 166, 217, .035);
}
body[data-page="ai-progress"] select:hover { background-color:transparent; color:#cbbbd6; }
body[data-page="ai-progress"] select option {
  background:#1a1820;
  color:var(--text);
}
body[data-page="ai-progress"] #scale { padding-right:30px; }
.benchmark-browser-trigger {
  border:0;
  border-bottom:1px solid rgba(184, 166, 217, .32);
  background:none;
  padding-inline:0;
}
.benchmark-browser-trigger:hover {
  background:linear-gradient(90deg, rgba(184, 166, 217, .055), transparent);
}
.inspector-inner {
  position:relative;
  border:0;
  background:none;
  text-shadow:0 1px 2px rgba(5, 6, 9, .5);
}
.inspector-inner::before {
  content:"";
  position:absolute;
  inset:0 auto 20px 0;
  width:1px;
  background:linear-gradient(transparent, rgba(184, 166, 217, .3) 12%, rgba(184, 166, 217, .14) 75%, transparent);
  pointer-events:none;
}
.inspection-measure {
  position:relative;
  isolation:isolate;
  margin:18px 0 26px;
}
/* Feather the light, not the glyphs; the measurement remains fully legible. */
.inspection-measure::before {
  content:"";
  position:absolute;
  inset:-32px 0 -22px 0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 25% 40%, rgba(198, 157, 105, .11), transparent 68%),
    radial-gradient(ellipse at 85% 65%, rgba(163, 137, 188, .055), transparent 70%);
  /* Off-center light can reach the box edges; fade the whole decorative layer. */
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 25%, rgba(0, 0, 0, .65) 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 25%, rgba(0, 0, 0, .65) 55%, transparent 100%);
  mix-blend-mode:screen;
}
.inspector .inspection-value {
  width:fit-content;
  max-width:100%;
  margin:0 0 8px;
  font:400 clamp(38px, 3.5vw, 48px)/1.15 var(--font-body);
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:-.035em;
  overflow-wrap:anywhere;
  color:#e3cdaa;
  text-shadow:0 1px 2px rgba(5, 6, 9, .45), 0 0 24px rgba(198, 157, 105, .1);
}
.inspector .unit {
  margin:0;
  font:400 11px/1.6 var(--font-body);
  letter-spacing:.015em;
  color:#bbb0be;
}
.inspector dt {
  font:400 9px/1.5 var(--font-body);
  letter-spacing:.06em;
  color:#b8aeb7;
}
.inspector dd { font-size:12px; color:var(--text); }
.inspector summary, .inspector a { color:#c9b9d5; }
.inspection-notice {
  border:0;
  border-left:1px solid rgba(220, 192, 155, .45);
  color:#dcc09b;
}
.related-metrics button {
  border-bottom-color:rgba(184, 166, 217, .22);
  color:var(--muted);
}
.related-metrics button[aria-pressed=true] { color:var(--text); }
.benchmark-browser {
  background:radial-gradient(ellipse at 8% 0, rgba(166, 130, 99, .08), transparent 60%), linear-gradient(120deg, #1b1720, #111219);
  border-color:rgba(184, 166, 217, .22);
  box-shadow:0 24px 90px rgba(5, 5, 9, .5);
}
/* Native select enhancement: keyboard/search behavior stays with the browser. */
@supports (appearance:base-select) {
  body[data-page="ai-progress"] select,
  body[data-page="ai-progress"] select::picker(select) { appearance:base-select; }
  body[data-page="ai-progress"] select {
    padding-right:8px;
    background-image:none;
    align-items:center;
  }
  body[data-page="ai-progress"] select::picker-icon { color:var(--accent); }
  body[data-page="ai-progress"] select::picker(select) {
    background:radial-gradient(ellipse at 0 0, rgba(175, 140, 108, .08), transparent 65%), linear-gradient(115deg, rgba(31, 26, 36, .92), rgba(19, 20, 28, .94));
    backdrop-filter:blur(18px);
    color:var(--text);
    border:0;
    padding:16px 18px;
    box-shadow:0 8px 45px 12px rgba(13, 12, 19, .35);
    /* Feather the surface inside its padding; option text stays in the solid center. */
    mask-image:linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 10px), transparent), linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
    mask-composite:intersect;
    max-height:min(360px, 55vh);
    max-width:calc(100vw - 32px);
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:#69586f transparent;
  }
  body[data-page="ai-progress"] select option {
    background:transparent;
    padding:9px 12px;
    min-height:36px;
    white-space:normal;
    overflow-wrap:anywhere;
    border:0;
    text-shadow:0 0 16px rgba(174, 148, 183, .08);
  }
  body[data-page="ai-progress"] select option:hover,
  body[data-page="ai-progress"] select option:checked {
    background:linear-gradient(90deg, rgba(184, 166, 217, .1), transparent);
  }
  body[data-page="ai-progress"] select option:hover { color:var(--accent); }
  body[data-page="ai-progress"] select option::checkmark { color:var(--accent); }
}

@supports (background-clip:text) or (-webkit-background-clip:text) {
  .coverage-signal strong, .archive-summary strong {
    background-image:linear-gradient(115deg, #ded2bd, #c7bcc6 70%, #afa1bc);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
  }
  .wordmark .machine, .wordmark .lab,
  .home-introduction h2, .research-scene h2, .scene-words span,
  .home-destinations h2, .archive-intro h1, .progress-title h1,
  .report-intro h1, .report-section h2,
  .site-header .brand .machine, .site-header .brand .lab,
  .site-header nav a, .instrument-heading h2, .lens-nav button strong,
  .inspector h3, .benchmark-browser header h2 {
    background-image:linear-gradient(115deg, #ece0c9 5%, #dcd6d4 48%, #bcb5cd 100%);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    text-shadow:none;
  }
  .inspector .inspection-value {
    background-image:linear-gradient(115deg, #edddbf 5%, #dec3a1 52%, #c5b6ce 100%);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    text-shadow:0 0 24px rgba(198, 157, 105, .08);
  }
  .home-introduction h2 .type-light, .research-scene h2 .type-light,
  .archive-intro h1 .type-light, .progress-title h1 .type-light,
  .report-intro h1 .type-light {
    background-image:linear-gradient(110deg, #c8bfbd, #b5a9c5);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
  }
}
@media (max-width:760px) {
  .wordmark { mix-blend-mode:normal; }
  .has-selection .inspector-inner {
    border:0;
    padding:24px 0;
  }
  .inspector-inner::before {
    inset:0 0 auto;
    width:auto;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(184, 166, 217, .3), transparent);
  }
  .scroll-enhanced .research-stage {
    background:none;
    isolation:isolate;
  }
  .scroll-enhanced .research-stage::before {
    content:"";
    position:absolute;
    inset:0 -6% -28px;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(110deg, #17151c, #101118);
    mask-image:linear-gradient(#000 65%, transparent);
    -webkit-mask-image:linear-gradient(#000 65%, transparent);
  }
}
@media (forced-colors:active) {
  .psych { background-image:none!important; color:CanvasText!important; text-shadow:none!important; }
  .coverage-signal::before { display:none; }
  .coverage-signal strong, .archive-summary strong { background-image:none; color:CanvasText; text-shadow:none; }
  .inspection-measure::before { display:none; }
  body::after, .home-entry::before, .site-header::before,
  .scroll-enhanced .research-stage::before { display:none; }
  .wordmark, .brand-symbol, .href-symbol { mix-blend-mode:normal; }
  .wordmark span, main h1, main h2, main .type-light, .scene-words span,
  .site-header .brand span, .site-header nav a, .lens-nav button strong,
  .inspector h3, .inspector .inspection-value {
    background-image:none!important;
    color:CanvasText!important;
    text-shadow:none!important;
  }
  .chart-svg .point-mark, .chart-svg .point-mark.mixed { fill:CanvasText; stroke:CanvasText; }
  .chart-svg .point-mark.estimated, .chart-svg .point-mark.unspecified { fill:Canvas; stroke:CanvasText; }
  .chart-svg .record.selected .point-mark { fill:Highlight; stroke:Highlight; }
  .chart-svg text { fill:CanvasText; }
  body[data-page="ai-progress"] select, body[data-page="ai-progress"] input,
  body[data-page="ai-progress"] select::picker(select) {
    background:Canvas;
    color:CanvasText;
    border:1px solid ButtonText;
    mask-image:none;
  }
  body[data-page="ai-progress"] select { appearance:auto; }
  .inspector-inner::before { background:CanvasText; }
}

/* Navigation image studies: a cut print grows as hand-drawn subject contours build. */
.nav-preview {
  position:absolute;
  top:calc(100% - 14px);
  width:var(--preview-width);
  aspect-ratio:var(--preview-ratio);
  margin-top:0;
  z-index:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  filter:drop-shadow(0 9px 12px #06050955);
  scale:.74;
  rotate:0deg;
  translate:0 4.5px;
  transform-origin:50% 25%;
  transition:opacity 160ms ease, visibility 160ms;
}
.nav-preview::before {
  content:"";
  position:absolute;
  inset:-20px 0 0;
}
.nav-preview.is-open {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  will-change:rotate, scale, translate;
  animation:nav-print-grow 2200ms cubic-bezier(.22,1,.36,1) both,
    nav-print-sway 12500ms cubic-bezier(.37,0,.63,1) -3125ms infinite,
    nav-print-float 11200ms cubic-bezier(.37,0,.63,1) -2800ms infinite;
}
.nav-preview-strip {
  position:absolute;
  inset:0;
  background:var(--preview-mono) center / 100% 100% no-repeat;
  mask-image:url('menu/torn-paper.svg'), var(--subject-mask);
  mask-position:center;
  mask-size:100% 100%;
  mask-repeat:no-repeat;
  mask-composite:intersect;
  clip-path:polygon(0 var(--strip-top), 0 var(--strip-top), 0 var(--strip-bottom), 0 var(--strip-bottom));
}
.nav-preview-strip > div {
  position:absolute;
  inset:0;
  background:var(--preview-color) center / 100% 100% no-repeat;
  opacity:1;
}
@keyframes nav-print-grow {
  from { scale:.74; }
  to { scale:1; }
}
@keyframes nav-print-sway {
  /* One uninterrupted sweep per half-cycle; no easing stops at the centre. */
  0%, 100% { rotate:-8deg; }
  50% { rotate:8deg; }
}
@keyframes nav-print-float {
  /* Start mid-sweep via the quarter-cycle offset above, already moving downward. */
  0%, 100% { translate:0 0; }
  50% { translate:0 9px; }
}
.nav-preview-scribble {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.nav-preview-scribble path {
  fill:none;
  stroke:#f4f0e8;
  stroke-width:1.45px;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
}
.nav-preview.is-open .nav-preview-scribble path {
  animation:var(--ink-cycle) 4800ms linear 260ms infinite;
}
.nav-preview.is-open .nav-preview-scribble path:nth-child(odd) {
  animation:var(--ink-cycle) 4800ms linear 260ms infinite,
    nav-ink-color 9600ms steps(1,end) 260ms infinite;
}
@keyframes nav-ink-color {
  0%, 100% { stroke:#f4f0e8; }
  50% { stroke:#b5a0d5; }
}
@keyframes nav-ink-repaint-0 {
  0% { stroke-dashoffset:1; opacity:0; }
  1.500% { stroke-dashoffset:1; opacity:.85; }
  29.167%, 68% { stroke-dashoffset:0; opacity:.85; }
  80% { stroke-dashoffset:0; opacity:0; }
  100% { stroke-dashoffset:1; opacity:0; }
}
@keyframes nav-ink-repaint-1 {
  0%, 6.667% { stroke-dashoffset:1; opacity:0; }
  8.167% { stroke-dashoffset:1; opacity:.85; }
  35.833%, 68% { stroke-dashoffset:0; opacity:.85; }
  80% { stroke-dashoffset:0; opacity:0; }
  100% { stroke-dashoffset:1; opacity:0; }
}
@keyframes nav-ink-repaint-2 {
  0%, 13.333% { stroke-dashoffset:1; opacity:0; }
  14.833% { stroke-dashoffset:1; opacity:.85; }
  42.500%, 68% { stroke-dashoffset:0; opacity:.85; }
  80% { stroke-dashoffset:0; opacity:0; }
  100% { stroke-dashoffset:1; opacity:0; }
}
@keyframes nav-ink-repaint-3 {
  0%, 20.000% { stroke-dashoffset:1; opacity:0; }
  21.500% { stroke-dashoffset:1; opacity:.85; }
  49.167%, 68% { stroke-dashoffset:0; opacity:.85; }
  80% { stroke-dashoffset:0; opacity:0; }
  100% { stroke-dashoffset:1; opacity:0; }
}
@keyframes nav-ink-repaint-4 {
  0%, 26.667% { stroke-dashoffset:1; opacity:0; }
  28.167% { stroke-dashoffset:1; opacity:.85; }
  55.833%, 68% { stroke-dashoffset:0; opacity:.85; }
  80% { stroke-dashoffset:0; opacity:0; }
  100% { stroke-dashoffset:1; opacity:0; }
}
.nav-preview.is-open .nav-preview-strip {
  animation:nav-paper-reveal 680ms cubic-bezier(.22,1,.36,1) var(--strip-delay) both;
}
.nav-preview.is-open .nav-preview-strip > div {
  animation:nav-print-register 780ms steps(1,end) var(--strip-delay) both,
    nav-vintage-glitch 14500ms steps(1,end) calc(8500ms + var(--glitch-delay)) infinite;
}
/* A brief staggered color registration every 14.5 seconds of sustained hover. */
@keyframes nav-vintage-glitch {
  0%, 100% { opacity:0; transform:translateX(0); }
  .6% { opacity:.7; transform:translateX(2px); }
  1.2% { opacity:0; transform:translateX(0); }
  1.6% { opacity:.9; transform:translateX(-1px); }
  2.3% { opacity:0; transform:translateX(0); }
}
@keyframes nav-paper-reveal {
  0% { clip-path:polygon(0 var(--strip-top), 0 var(--strip-top), 0 var(--strip-bottom), 0 var(--strip-bottom)); transform:translateX(var(--strip-shift)); }
  32% { clip-path:polygon(0 var(--strip-top), 48% var(--strip-top), 40% var(--strip-bottom), 0 var(--strip-bottom)); }
  62% { clip-path:polygon(0 var(--strip-top), 77% var(--strip-top), 84% var(--strip-bottom), 0 var(--strip-bottom)); }
  100% { clip-path:polygon(0 var(--strip-top), 100% var(--strip-top), 100% var(--strip-bottom), 0 var(--strip-bottom)); transform:translateX(0); }
}
@keyframes nav-print-register {
  0% { opacity:1; transform:translateX(0); }
  26% { opacity:0; }
  43% { opacity:.85; transform:translateX(var(--strip-shift)); }
  57% { opacity:0; transform:translateX(0); }
  72% { opacity:.65; }
  100% { opacity:0; transform:translateX(0); }
}
@media (min-width:761px) {
  .site-header {
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:86px var(--preview-space, 0px);
    height:auto;
    row-gap:0;
    transition:grid-template-rows 280ms var(--ease);
  }
  .site-header > .brand { grid-row:1; grid-column:1; }
  .site-header > nav {
    grid-row:1;
    grid-column:2;
    justify-self:end;
    justify-content:flex-start;
    width:clamp(384px, 31vw, 444px);
    gap:clamp(56px, 5vw, 72px);
  }
  .site-header nav a { position:relative; z-index:2; padding:15px 2px; letter-spacing:.035em; }
  .site-header .nav-indicator { z-index:1; }
  .site-header nav a:focus-visible { outline-offset:6px; }
}
.nav-preview-arrow {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  overflow:visible;
  z-index:3;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
.nav-preview-arrow path {
  fill:none;
  stroke:#f4f0e8;
  stroke-width:2.6px;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.nav-preview-arrow.is-open { opacity:1; visibility:visible; }
.nav-preview-arrow.is-open .nav-preview-arrow__shaft {
  animation:nav-arrow-draw 1250ms cubic-bezier(.4,0,.25,1) 150ms both;
}
.nav-preview-arrow.is-open .nav-preview-arrow__head {
  animation:nav-arrow-draw 240ms ease-out 1400ms both;
}
@keyframes nav-arrow-draw { to { stroke-dashoffset:0; } }
.nav-preview-caption {
  position:relative;
  z-index:4;
  grid-row:2;
  grid-column:1 / -1;
  align-self:start;
  width:max-content;
  padding-top:34px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:visible;
  text-shadow:0 1px 3px #0b0c10, 0 3px 14px #0b0c10b3;
  transform:translateY(8px);
  transition:opacity 220ms ease, transform 280ms var(--ease), visibility 220ms;
}
.nav-preview-caption > span:first-child {
  display:block;
  margin-bottom:14px;
  color:var(--muted);
  font:10px var(--font-data);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nav-preview-caption > span:last-child {
  display:block;
  color:var(--text);
  font:clamp(38px, 5vw, 64px)/1.15 var(--font-brand);
  letter-spacing:-.025em;
}
.has-nav-preview .nav-preview-caption {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-preview-dismissed .nav-preview-caption { transition:none; }
@media (max-width:760px) {
  .site-header nav { gap:clamp(32px, 10vw, 48px); }
  .nav-preview, .nav-preview-caption, .nav-preview-arrow { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .site-header { transition:none; }
  .nav-preview-arrow.is-open path { animation:none; stroke-dashoffset:0; }
  .nav-preview-caption { transition:none; transform:none; }
  .nav-preview, .nav-preview.is-open { transition:none; animation:none; transform:none; scale:1; rotate:none; translate:none; will-change:auto; }
  .nav-preview.is-open .nav-preview-scribble path { animation:none; stroke-dashoffset:0; opacity:.8; }
  .nav-preview.is-open .nav-preview-scribble { animation:none; opacity:1; }
  .nav-preview.is-open .nav-preview-strip {
    animation:none;
    clip-path:polygon(0 var(--strip-top), 100% var(--strip-top), 100% var(--strip-bottom), 0 var(--strip-bottom));
  }
  .nav-preview.is-open .nav-preview-strip > div { animation:none; opacity:0; }
}

/* Only a small feathered part of each photo receives pointer light and ripples. */
.nav-preview-ripple {
  position:absolute;
  inset:0;
  isolation:isolate;
  pointer-events:none;
  background-position:center;
  background-size:100% 100%;
  opacity:0;
  transition:opacity 220ms ease;
  mask-image:url('menu/torn-paper.svg'), var(--subject-mask),
    radial-gradient(circle 54px at var(--spot-x, -100px) var(--spot-y, -100px), #000 8%, #0009 44%, transparent 100%);
  mask-position:center;
  mask-size:100% 100%;
  mask-repeat:no-repeat;
  mask-composite:intersect;
}
.nav-preview-ripple.is-active { opacity:.8; }
.nav-preview-ripple::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle 54px at var(--spot-x) var(--spot-y), #b4a2ff66, transparent 90%);
  mix-blend-mode:screen;
}
.nav-preview-ripple canvas { pointer-events:none; }
@media (prefers-reduced-motion:reduce) {
  .nav-preview-ripple { display:none; transition:none; }
}