:root{
  --bg:#060c17;
  --surface:#0c1524;
  --raised:#132036;
  --line:#1c2a43;
  --grid:rgba(160,190,240,.09);
  --ink:#e7eefb;
  --soft:#b6c4dc;
  --grey:#8394b0;
  --blue:#5b9dff;
  --blue-deep:#2b63d9;
  --blue-pale:#a9cdfb;
  --serif:'Playfair Display',Georgia,serif;
  --sans:Manrope,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,Consolas,monospace;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;position:relative;color:var(--ink);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,pre{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#04101f;padding:9px 13px;z-index:20}
.skip:focus{left:12px;top:12px}

.site{max-width:1400px;margin:0 auto}
main{padding:0 20px}

/* liquid glass: the Amphi popup and pill recipe (frost, top rim, grain) */
.glass{
  position:relative;isolation:isolate;
  background-image:linear-gradient(155deg,rgb(255 255 255/.15),rgb(255 255 255/.045));
  background-clip:padding-box;
  -webkit-backdrop-filter:saturate(1.8) blur(24px);backdrop-filter:saturate(1.8) blur(24px);
  border:1px solid rgb(255 255 255/.12);border-top-color:rgb(255 255 255/.24);
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255/.22),
    inset 0 -10px 18px -12px rgb(120 170 255/.28),
    0 12px 32px -12px rgb(0 0 0/.55),
    0 2px 8px -4px rgb(0 0 0/.3);
}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:url(grain.svg) center/cover no-repeat;opacity:.4;mix-blend-mode:overlay;pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background-color:rgb(16 28 50/.94)}
}

.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:11px 18px;
  font:600 13px var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,background-color .2s ease;
}
.btn span{font:400 11px var(--mono);opacity:.72}
.btn:hover{transform:translateY(-2px);background-color:rgb(255 255 255/.07);
  box-shadow:inset 0 1px 0 0 rgb(255 255 255/.34),inset 0 -10px 18px -12px rgb(120 170 255/.4),0 18px 36px -14px rgb(20 80 210/.6),0 2px 8px -4px rgb(0 0 0/.3)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.primary{
  background-image:
    radial-gradient(ellipse 90% 120% at 0% 0%,rgb(125 178 255/.62),transparent 62%),
    linear-gradient(155deg,rgb(70 132 255/.55),rgb(34 84 200/.34));
  border-color:rgb(160 200 255/.34);border-top-color:rgb(215 232 255/.6);
}

/* nav: no bar, three floating pieces that fold away on scroll */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;max-width:1400px;margin:0 auto;display:flex;gap:10px;align-items:center;padding:16px 20px;pointer-events:none}
.nav>*{pointer-events:auto}
.brand{display:flex;align-items:center;border-radius:999px;padding:9px 15px;font:16px var(--serif);white-space:nowrap}
.brand span{display:block;max-width:150px;margin-left:9px;overflow:hidden;transition:max-width .45s cubic-bezier(.16,1,.3,1),opacity .25s ease,margin .45s cubic-bezier(.16,1,.3,1)}
.mark{width:19px;height:17px;fill:var(--blue);flex:none}
.nav nav{display:flex;gap:2px;border-radius:999px;padding:4px;max-width:640px;overflow:hidden;transition:max-width .5s cubic-bezier(.16,1,.3,1),opacity .25s ease,padding .4s ease,margin .4s ease,border-color .3s ease}
.nav nav a{padding:6px 12px;border-radius:999px;color:var(--soft);font-size:13px;white-space:nowrap;transition:background .18s ease,color .18s ease}
.nav nav a:hover{color:#fff}
.nav nav a.selected{background:rgb(255 255 255/.13);color:#fff}
.actions{display:flex;margin-left:auto;gap:8px;align-items:center}
.nav .btn{padding:9px 15px;font-size:12px}
.nav .ghost{max-width:140px;overflow:hidden;transition:max-width .45s cubic-bezier(.16,1,.3,1),opacity .25s ease,padding .4s ease,margin .4s ease,border-color .3s ease}
.nav .more{display:none;padding:11px 12px}
@media (min-width:821px){
  .nav.collapsed .more{display:inline-flex}
  .nav.collapsed:not(.open) .brand span{max-width:0;opacity:0;margin-left:0}
  .nav.collapsed:not(.open) nav{max-width:0;opacity:0;padding-inline:0;margin-left:-10px;border-color:transparent;pointer-events:none}
  .nav.collapsed:not(.open) .ghost{max-width:0;opacity:0;padding-inline:0;margin-left:-8px;border-color:transparent;pointer-events:none}
}

/* hero */
.backdrop{position:absolute;top:0;left:0;right:0;height:max(860px,116vh);z-index:-1;background:url(hero-bg.webp) center top/cover no-repeat;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.hero{min-height:100vh;min-height:100svh;padding:104px 0 52px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font:11px var(--mono);color:var(--blue-pale);text-transform:uppercase;letter-spacing:.06em;margin-bottom:20px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(91,157,255,.18)}
h1{font:400 clamp(46px,5.4vw,88px)/.98 var(--serif);letter-spacing:-.04em;padding-bottom:.1em;color:var(--ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1{
    color:transparent;
    background:linear-gradient(162deg,rgb(255 255 255/.97) 0%,rgb(186 216 255/.6) 34%,rgb(255 255 255/.92) 55%,rgb(132 180 255/.52) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-stroke:1px rgb(255 255 255/.2);
    filter:drop-shadow(0 1px 0 rgb(255 255 255/.2)) drop-shadow(0 18px 30px rgb(30 90 220/.4));
  }
}
.title{font-size:16px;line-height:1.55;max-width:540px;margin-top:22px;color:var(--soft)}
.byline{color:var(--grey);font-size:13px;margin-top:10px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* experiment map */
.graph{display:flex;flex-direction:column;border-radius:22px;background-color:rgb(6 12 23/.38);height:clamp(440px,66vh,640px);overflow:hidden}
.graph-head{display:flex;justify-content:space-between;align-items:start;gap:14px;padding:15px 16px 0}
.graph-head b{display:block;font:500 17px var(--serif)}
.graph-head span{display:block;color:var(--soft);font-size:11px;line-height:1.4;margin-top:2px;max-width:360px}
.graph-tools{display:flex;gap:6px;flex:none}
.tool{border:1px solid rgb(255 255 255/.14);border-radius:999px;background:rgb(255 255 255/.07);color:var(--ink);font:500 11px var(--sans);padding:6px 11px;cursor:pointer;transition:background .15s ease}
.tool:hover{background:rgb(255 255 255/.16)}
.tool.strong{background:rgb(91 157 255/.32);border-color:rgb(160 200 255/.4)}
.tool.strong:hover{background:rgb(91 157 255/.5)}
#graphSvg{flex:1;min-height:0;width:100%;display:block;cursor:grab;touch-action:pan-y}
#graphSvg:active{cursor:grabbing}
.link{stroke:rgb(169 205 251/.3);stroke-width:1.1;transition:opacity .2s ease,stroke .2s ease}
.link.hot{stroke:rgb(190 220 255/.85);stroke-width:1.5}
.node{cursor:pointer;transition:opacity .2s ease;outline:none}
.node path{stroke:rgb(255 255 255/.55);stroke-width:1;transition:stroke-width .15s ease}
.node.k-setup path,.node.k-pred path{stroke-width:1.4}
.node text{font:500 11px var(--sans);fill:var(--soft);text-anchor:middle;paint-order:stroke;stroke:rgb(6 12 23/.7);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.node.k-paper text,.node.k-finding text,.node.k-concept text{fill:#fff;font-weight:600;font-size:12px}
.node.minor text{font-size:9.5px;opacity:0;transition:opacity .2s ease}
.zoomed .node.minor text,.node.minor.lit text,.node.minor:hover text,.node.minor:focus-visible text{opacity:1}
.node:hover path,.node:focus-visible path{stroke:#fff;stroke-width:2.2}
.node.sel path{stroke:#fff;stroke-width:3}
.dim{opacity:.16}
.graph-legend{display:flex;flex-wrap:wrap;gap:5px 12px;padding:0 16px 13px;font-size:10px;color:var(--soft)}
.graph-legend li{display:inline-flex;align-items:center;gap:5px}
.graph-head small{font:10px var(--mono);color:var(--blue-pale);margin-left:8px;letter-spacing:.02em}
.node-card{position:absolute;left:12px;right:12px;bottom:12px;max-height:60%;overflow:auto;border-radius:16px;padding:15px 16px 12px;background:rgb(8 15 29/.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgb(255 255 255/.14);box-shadow:0 20px 44px -20px rgb(0 0 0/.8)}
.node-card small{display:block;font:11px var(--mono);color:var(--blue-pale);padding-right:60px}
.node-card h3{font:500 19px/1.2 var(--serif);margin-top:5px}
.card-text{font-size:13px;line-height:1.55;color:#d5dff0;margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tags span{border:1px solid rgb(160 200 255/.3);border-radius:999px;padding:2px 8px;font-size:10px;color:var(--blue-pale)}
.card-links{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:11px;padding-top:10px;border-top:1px solid rgb(255 255 255/.1);font-size:11px;color:var(--grey)}
.card-links button{border:0;background:none;color:var(--blue);font:600 11px var(--sans);padding:0 0 0 4px;cursor:pointer}
.card-links button:hover{color:#fff}
.card-close{position:absolute;top:11px;right:11px;border:0;border-radius:999px;background:rgb(255 255 255/.1);color:var(--ink);font:500 10px var(--sans);padding:5px 10px;cursor:pointer}
.card-close:hover{background:rgb(255 255 255/.2)}
.graph-fallback{display:none;padding:0 16px 16px;color:var(--soft);font-size:13px}
.graph.nograph #graphSvg,.graph.nograph .graph-tools,.graph.nograph .graph-legend{display:none}
.graph.nograph .graph-fallback{display:block}
.graph.nograph{height:auto}
.graph.expanded{position:fixed;inset:14px;height:auto;z-index:60;box-shadow:0 0 0 100vmax rgb(3 7 14/.88),inset 0 1px 0 0 rgb(255 255 255/.22)}
.graph.expanded #graphSvg{touch-action:none}
@media (min-width:900px){
  .graph.expanded .node-card{left:auto;top:66px;bottom:14px;width:390px;max-height:none}
  .graph.expanded.has-card #graphSvg{width:calc(100% - 410px);align-self:flex-start}
}
.lock{overflow:hidden}

/* highlights */
#highlights,.section{scroll-margin-top:90px}
.line{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px}
.line b{font-weight:500}
.line span{font:10px var(--mono);color:var(--grey)}
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.highlight{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:19px 18px 16px}
.hl-title{display:flex;gap:9px;align-items:center}
.hl-title>i{width:12px;height:12px;border-radius:50%;flex:none}
.hl-title h3{font:500 24px var(--serif)}
.hl-title>b{margin-left:auto;border:1px solid #2f4674;color:var(--blue-pale);border-radius:14px;padding:3px 9px;font:500 10px var(--sans)}
.highlight>p{color:var(--grey);font-size:12px;margin-top:8px}
.bars{position:relative;display:flex;gap:9px;margin-top:14px;padding:0 14px;background:repeating-linear-gradient(to bottom,transparent 0 31px,var(--grid) 32px 33px) top/100% 165px no-repeat}
.bars::after{content:"";position:absolute;left:0;right:0;top:165px;border-top:1px solid #3a4c6e}
.bar{flex:1;min-width:0;display:grid;grid-template-rows:165px auto}
.fill{position:relative;align-self:end;height:calc(var(--h)*.84);min-height:2px;background:var(--c);border-radius:4px 4px 0 0;transform-origin:bottom}
.fill b{position:absolute;left:0;right:0;bottom:100%;padding-bottom:5px;text-align:center;font:500 11px var(--mono);white-space:nowrap}
.bar span{padding-top:9px;font-size:11px;line-height:1.3;color:var(--soft);text-align:center}
.note{color:var(--grey);font-size:11px;margin:12px 0 42px}

/* promos */
.promos{display:grid;grid-template-columns:1fr 1fr 1.02fr;gap:18px;margin-bottom:55px}
.promo{height:207px;border-radius:14px;padding:18px;color:#fff;position:relative;overflow:hidden;border:1px solid #223457;transition:transform .2s ease,box-shadow .2s ease}
.promo:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,70,170,.28)}
.promo.first{background:radial-gradient(circle at 88% 8%,#2b63d9,#12305f 44%,#0a1528 78%)}
.promo.second{background:linear-gradient(140deg,#0c1a33,#173a78 62%,#3f83ee)}
.promo small{font:500 15px var(--serif)}
.promo em{font:10px var(--mono);font-style:normal;background:rgba(169,205,251,.16);color:var(--blue-pale);border-radius:4px;padding:2px 6px;margin-left:6px}
.promo h2{position:absolute;left:18px;bottom:18px;font:400 27px/1.05 var(--serif)}
.promo>b{position:absolute;right:18px;top:16px;font-weight:400}
.changes{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px 8px}
.changes header{font:500 16px var(--serif);margin-bottom:6px}
.changes div{display:grid;grid-template-columns:14px 1fr;column-gap:6px;padding:7px 0;border-top:1px solid var(--line)}
.changes i{width:7px;height:7px;border-radius:50%;background:var(--blue);margin-top:5px;grid-row:span 2}
.changes small{color:var(--grey);font-size:10px}
.changes strong{font:500 14px/1.25 var(--serif)}

/* rail + sections */
.layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:22px;border-top:1px solid var(--line);padding-top:28px}
.rail{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column;gap:11px;font-size:11px;color:var(--grey)}
.rail a{transition:color .15s ease}
.rail a:hover{color:var(--ink)}
.rail i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#33466b;margin-right:8px;vertical-align:1px}
.section{padding-bottom:50px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.section.last{border-bottom:0;margin-bottom:10px}
.section h2{font:400 31px var(--serif);margin-bottom:5px}
.section h2::before{content:"";display:inline-block;width:4px;height:22px;border-radius:2px;background:var(--blue);margin-right:12px;vertical-align:-.08em}
.section>p{color:var(--grey);font-size:12px}
.chart{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:18px}
.chart-head{display:flex;justify-content:space-between;gap:16px;align-items:start}
.chart h3{font:500 17px var(--serif)}
.chart-head p{color:var(--grey);font-size:11px;margin-top:2px}
.chip{display:inline-block;background:var(--raised);border-radius:6px;padding:6px 9px;font-size:10px;color:var(--soft);white-space:nowrap;transition:background .15s ease}
.chip:hover{background:#1b2c4a}
.chip.dark{background:var(--blue);color:#04101f;font-weight:600;padding:8px 11px}
.chip.dark:hover{background:#7db2ff}
.chart img{width:100%;max-width:820px;margin:20px auto 16px;background:#f3f7fd;border-radius:8px;padding:14px 14px 10px}
.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-size:12px;line-height:1.45;color:var(--soft);margin-bottom:14px}
.legend b{font:500 12px var(--mono);color:var(--blue-pale);margin-right:3px}
.chart>footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px;font:10px var(--mono);color:var(--grey)}
.prose{max-width:720px;margin-top:16px}
.prose p{font-size:16px;line-height:1.68;color:#d5dff0}
.prose p+p{margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.chart.mini{margin-top:0}
.chart.mini p{color:var(--soft);font-size:13px;line-height:1.5;margin-top:7px}
.rows{margin:14px 0}
.rows li{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line);font-size:13px;color:var(--soft)}
.rows b{font:500 17px var(--serif);color:var(--ink)}
code{font:12px var(--mono);background:var(--raised);color:var(--blue-pale);border-radius:4px;padding:3px 6px}
.bib{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-top:18px}
.bib pre{font:12px/1.7 var(--mono);color:var(--soft);padding:18px;overflow-x:auto}
#copy{position:absolute;top:10px;right:10px;border:0;border-radius:6px;background:var(--raised);color:var(--ink);padding:6px 10px;font:10px var(--sans);cursor:pointer;transition:background .15s ease}
#copy:hover{background:#1b2c4a}

/* footer */
.foot{margin-top:40px;padding:44px 40px 48px;border-top:1px solid var(--line);background:linear-gradient(180deg,#0a1425,#0d1d3a);display:grid;grid-template-columns:200px 1.3fr 1fr 1fr;gap:35px;font-size:12px;color:var(--soft)}
.foot-logo{display:flex;gap:10px;align-items:center;font:500 22px/1 var(--serif);color:var(--ink)}
.foot-logo b{font-weight:500}
.foot-logo .mark{width:46px;height:42px;fill:var(--blue);flex:none}
.foot strong{display:block;font:500 16px var(--serif);color:var(--ink);margin-bottom:6px}
.foot a:hover{color:var(--blue-pale)}
.links{display:flex;flex-direction:column;gap:9px}

@media (prefers-reduced-motion:no-preference){
  .kicker,h1,.title,.byline,.cta{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
  h1{animation-delay:.05s}
  .title,.byline{animation-delay:.12s}
  .cta{animation-delay:.2s}
  .graph{animation:fade .9s ease .15s both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  /* the three charts wait below the fold and come in as they are scrolled to */
  .js .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*130ms)}
  .js .reveal.in{opacity:1;transform:none}
  .js .reveal .fill{transform:scaleY(0);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*130ms + 280ms)}
  .js .reveal.in .fill{transform:none}
  .js .reveal .fill b{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i,0)*130ms + 900ms)}
  .js .reveal.in .fill b{opacity:1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media (max-width:1050px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .highlights{grid-template-columns:1fr 1fr}
  .highlight:last-child{grid-column:1/-1}
  .promos{grid-template-columns:1fr 1fr}
  .changes{grid-column:1/-1}
  .foot{grid-template-columns:1fr 1fr;padding:40px 30px}
}
@media (max-width:820px){
  .nav .more{display:inline-flex}
  .nav nav{position:absolute;top:66px;right:14px;flex-direction:column;align-items:stretch;border-radius:18px;padding:6px;min-width:170px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
  .nav nav a{padding:9px 13px}
  .nav.open nav{opacity:1;transform:none;pointer-events:auto}
  .nav.collapsed:not(.open) .brand span{max-width:0;opacity:0;margin-left:0}
  .hero{grid-template-columns:minmax(0,1fr);gap:34px;min-height:0;padding-top:96px}
  .graph{height:480px}
}
@media (max-width:700px){
  .nav{padding:12px 14px}
  main{padding:0 14px}
  .hero{padding-top:88px}
  h1{font-size:46px}
  .graph-head{flex-direction:column;gap:9px}
  .graph{height:500px}
  .highlights,.promos,.cards,.legend{grid-template-columns:1fr}
  .highlight:last-child,.changes{grid-column:auto}
  .chart-head{flex-direction:column}
  .prose p{font-size:15px}
  .bib pre{font-size:11px;padding-top:40px}
  .foot{grid-template-columns:1fr;gap:26px;padding:36px 20px}
}
@media (max-width:420px){
  .nav .ghost{display:none}
  .bars{padding:0 6px;gap:6px}
}