@font-face{
  font-family:'Sharp Grotesk Book 20';
  src:url('assets/sharp-grotesk-book-20.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Sharp Grotesk Book 23';
  src:url('assets/sharp-grotesk-book-23.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --blue:#0061fe;
  --ink:#1a1918;
  --paper:#f1f2f4;
  --lime:#b4dc19;
  --surface-base:#fff;
  --surface-subtle:#f6f6f7;
  --surface-sunken:#f1f2f4;
  --text-subtle:#736c64;
  --border-base:#bbb5ae;
  --highlight-blue:#b4d1ff;
  --highlight-purple:#d8c8f1;
  --highlight-green:#dff29f;
  --identity-blue:#b4c8e1;
  --identity-purple:#c8aff0;
  --identity-yellow:#fad24b;
  --line:rgba(26,25,24,.16);
  --gutter:clamp(24px,5vw,84px);
  --space-2:2px;
  --space-4:4px;
  --space-6:6px;
  --space-8:8px;
  --space-10:10px;
  --space-12:12px;
  --space-16:16px;
  --space-20:20px;
  --space-24:24px;
  --space-28:28px;
  --space-32:32px;
  --space-36:36px;
  --space-44:44px;
  --space-52:52px;
  --space-60:60px;
  --space-68:68px;
  --space-76:76px;
  --space-84:84px;
  --space-100:100px;
  --space-116:116px;
  --space-132:132px;
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-round:999px;
}

body,
button,
a,
input,
textarea,
select{
  font-family:'Atlas Grotesk',AtlasGrotesk,-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Helvetica,Arial,sans-serif;
}

h1,
h2,
h3,
.wordmark,
.preview-body strong,
.curiosity-track,
.playground-backdrop{
  font-family:'Sharp Grotesk Book 20','Atlas Grotesk',Arial,sans-serif;
  font-weight:400;
}

.curiosity-track,
.playground-backdrop{
  font-family:'Sharp Grotesk Book 23','Sharp Grotesk Book 20','Atlas Grotesk',Arial,sans-serif;
}

button:focus-visible,
a:focus-visible{
  outline-color:#3080ff;
}

::selection{
  background:var(--highlight-green);
  color:var(--ink);
}

.site-header{
  height:84px;
}

.site-header.scrolled{
  background:rgba(241,242,244,.92);
}

.wordmark{
  font-weight:400;
  letter-spacing:-.035em;
}

.brand-wordmark{
  display:block;
  width:auto;
  height:32px;
}

.brand-glyph{
  display:none;
  width:auto;
  height:28px;
}

.footer-wordmark .brand-wordmark{
  height:28px;
}

.wordmark-labs{
  font-family:'Atlas Grotesk',Arial,sans-serif;
  font-weight:400;
  letter-spacing:-.015em;
}

.hero{
  background:radial-gradient(ellipse at 50% 59%,var(--surface-base) 0%,var(--paper) 52%);
}

.hero-title-wrap h1,
.about h2,
.experiments-heading h2,
.connect h2{
  font-weight:400;
  letter-spacing:-.04em;
}

.hero-brand-title{
  display:flex;
  justify-content:center;
  line-height:0;
}

.hero-brand-wordmark{
  display:block;
  width:min(440px,62vw);
  height:auto;
}

.hero-title-wrap p{
  margin-top:var(--space-16);
  color:var(--text-subtle);
}

.hero-orbit{
  color:#8c8279;
}

.hero-bottom{
  color:var(--text-subtle);
}

.scroll-pill{
  border-color:rgba(0,97,254,.32);
  background:rgba(0,97,254,.035);
}

.scroll-pill-dot{
  box-shadow:0 0 0 2px rgba(0,97,254,.08);
}

.hero-cue-open .scroll-pill,
.hero-fallback .scroll-pill{
  border-color:rgba(15,80,60,.4);
  background:rgba(180,220,25,.12);
}

.hero-cue-open .scroll-pill-dot,
.hero-fallback .scroll-pill-dot{
  box-shadow:0 0 0 1px rgba(15,80,60,.4),0 0 0 3px rgba(180,220,25,.2);
}

.about{
  padding:var(--space-60) var(--gutter) var(--space-32);
}

.about-heading{
  margin:var(--space-84) 0 var(--space-76);
}

.about h2 em{
  color:var(--lime);
}

.about-bottom{
  margin-bottom:var(--space-68);
}

.lab-principles{
  gap:var(--space-24);
}

.principle-number{
  color:var(--highlight-blue);
  margin-bottom:var(--space-20);
}

.lab-principles p{
  color:#deebff;
}

.about-bottom-rule{
  padding-top:var(--space-24);
}

.experiments{
  padding:var(--space-100) 0 var(--space-32);
  background:var(--surface-subtle);
}

.experiments-heading{
  gap:var(--space-32);
  margin-bottom:var(--space-68);
}

.experiments-heading h2{
  margin-top:var(--space-36);
}

.experiments-intro p{
  margin-bottom:var(--space-24);
}

.experiment-count,
.card-category,
.playground-heading>span,
.drag-instruction,
.footer-bottom>span,
.concept-note,
.dialog-question>span{
  color:var(--text-subtle);
}

.experiment-rail{
  gap:var(--space-24);
}

.experiment-card{
  padding:var(--space-28) var(--space-32) var(--space-32);
  border-radius:var(--radius-xs);
}

.experiment-card:hover{
  box-shadow:inset 0 0 0 2px rgba(26,25,24,.14);
}

.card-studio{
  background:#deebff;
}

.card-memory{
  background:var(--highlight-purple);
}

.card-canvas{
  background:var(--highlight-green);
}

.status-pill,
.playground-actions button{
  border-color:rgba(26,25,24,.27);
  border-radius:var(--radius-round);
}

.status-pill{
  padding:var(--space-6) var(--space-10);
}

.studio-visual,
.memory-visual,
.canvas-visual{
  margin:var(--space-20) 0 var(--space-12);
}

.file-slip{
  padding:var(--space-12) var(--space-20);
  border-color:var(--highlight-blue);
}

.studio-preview{
  background:#283750;
  border-radius:var(--radius-md);
}

.preview-kicker{
  color:var(--highlight-blue);
}

.preview-circle{
  background:var(--lime);
}

.memory-core{
  background:#78286e;
  border-radius:var(--radius-2xl);
  box-shadow:10px 12px 0 var(--identity-purple),0 20px 30px rgba(120,40,110,.14);
}

.memory-node{
  background:var(--surface-base);
  border-color:#c1ace7;
  border-radius:var(--radius-sm);
  padding:var(--space-12) var(--space-20);
}

.canvas-visual{
  background-image:radial-gradient(rgba(32,111,84,.24) 1px,transparent 1px);
  border-radius:var(--radius-sm);
}

.canvas-note{
  padding:var(--space-24);
}

.note-a{
  background:var(--identity-yellow);
}

.note-b{
  background:var(--highlight-blue);
}

.note-c{
  background:var(--surface-base);
}

.canvas-connector{
  background:#206f54;
}

.canvas-cursor span{
  border-radius:var(--radius-xs);
}

.canvas-tools{
  border-radius:var(--radius-xs);
  padding:var(--space-10) var(--space-16);
}

.card-description h3{
  letter-spacing:-.035em;
  font-weight:400;
}

.card-description p{
  color:#44403d;
}

.rail-bottom{
  padding-top:var(--space-28);
  gap:var(--space-32);
}

.rail-progress{
  background:#dbdbdb;
}

.curiosity-band{
  background:var(--lime);
  border-color:rgba(26,25,24,.08);
}

.curiosity-track{
  gap:var(--space-36);
}

.connect{
  background:var(--surface-subtle);
  padding:var(--space-52) var(--gutter) var(--space-84);
}

.connect-layout{
  margin-top:var(--space-84);
}

.connect-copy>p{
  margin-bottom:var(--space-36);
}

.connect-links{
  gap:var(--space-10);
}

.connect-links a{
  padding:var(--space-16) 0;
}

.site-footer{
  background:var(--surface-sunken);
}

.playground-heading{
  padding:var(--space-32) var(--gutter) 0;
  gap:var(--space-24);
}

.playground-actions{
  gap:var(--space-20);
}

.playground-actions button{
  padding:var(--space-8) var(--space-16);
}

.playground-backdrop{
  color:#d3cec9;
}

.physics-fallback svg{
  filter:drop-shadow(10px 14px 0 #004dc7);
}

.footer-bottom{
  padding:var(--space-28) var(--gutter);
  gap:var(--space-20);
}

.experiment-dialog{
  border-radius:var(--radius-md);
  background:var(--surface-base);
  color:var(--ink);
}

.experiment-dialog::backdrop{
  background:rgba(26,25,24,.48);
}

.dialog-content{
  padding:var(--space-36) var(--space-44);
}

.dialog-top{
  margin-bottom:var(--space-44);
}

.dialog-close{
  border-color:rgba(26,25,24,.2);
}

.dialog-question{
  margin:var(--space-32) 0;
  padding-left:var(--space-20);
}

.dialog-content h2{
  margin:var(--space-16) 0 var(--space-24);
  font-weight:400;
  letter-spacing:-.035em;
}

.dialog-done{
  margin-top:var(--space-24);
  padding:var(--space-16) var(--space-24);
}

@media(max-width:700px){
  :root{--gutter:24px}
  .site-header{height:76px}
  .site-header .brand-wordmark{display:none}
  .site-header .brand-glyph{display:block}
  .hero-brand-wordmark{width:min(360px,84vw)}
  .hero-title-wrap p{margin-top:var(--space-12)}
  .about{padding-top:var(--space-36);padding-bottom:var(--space-24)}
  .about-heading{margin:var(--space-52) 0 var(--space-44)}
  .about-bottom{margin-bottom:var(--space-44)}
  .lab-principles{gap:var(--space-16)}
  .experiments{padding-top:var(--space-60)}
  .experiments-heading{margin-bottom:var(--space-36)}
  .experiments-heading h2{margin-top:var(--space-28)}
  .experiments-intro{margin-top:var(--space-28)}
  .experiment-card{padding:var(--space-24)}
  .rail-bottom{gap:var(--space-16);padding-top:var(--space-20)}
  .curiosity-track{gap:var(--space-24)}
  .connect{padding-top:var(--space-36);padding-bottom:var(--space-60)}
  .connect-layout{margin-top:var(--space-44)}
  .connect-copy{margin-top:var(--space-36)}
  .connect-copy>p{margin-bottom:var(--space-20)}
  .playground-heading{padding-top:var(--space-24)}
  .playground-actions{gap:var(--space-10)}
  .footer-bottom{padding-top:var(--space-24);padding-bottom:var(--space-24);gap:var(--space-20)}
  .dialog-content{padding:var(--space-24)}
  .dialog-top{margin-bottom:var(--space-28)}
}

@media(max-width:360px){
  .site-header .brand-glyph{height:26px}
  .site-header nav{gap:8px;font-size:12px}
}

html.gate-locked,
html.gate-locked body{
  overflow:hidden;
  overscroll-behavior:none;
}

html.gate-locked body>:not(.password-gate){
  visibility:hidden;
}

html.gate-revealing body>:not(.password-gate){
  visibility:visible;
}

.password-gate{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  min-height:100svh;
  place-items:center;
  padding:24px;
  overflow:auto;
  background:var(--surface-sunken);
  opacity:1;
  transition:opacity .32s cubic-bezier(.2,.7,.2,1);
}

html.gate-locked .password-gate{
  display:grid;
}

.password-gate.gate-unlocking{
  opacity:0;
  pointer-events:none;
}

.password-gate-inner{
  width:min(360px,88vw);
  transform:translateY(-3vh);
}

.password-gate-logo{
  width:auto;
  height:58px;
  margin:0 auto 44px;
}

.password-form{
  width:100%;
}

.password-control{
  display:flex;
  width:100%;
  min-height:56px;
  overflow:hidden;
  border:1px solid var(--border-base);
  border-radius:var(--radius-md);
  background:var(--surface-base);
  transition:border-color .18s ease,box-shadow .18s ease;
}

.password-control:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px #deebff;
}

.password-control input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  padding:0 16px;
  background:transparent;
  color:var(--ink);
  font-family:'Atlas Grotesk',AtlasGrotesk,Arial,sans-serif;
  font-size:16px;
  line-height:1;
}

.password-control input::placeholder{
  color:var(--text-subtle);
  opacity:1;
}

.password-control button{
  display:grid;
  width:56px;
  flex:0 0 56px;
  place-items:center;
  border:0;
  border-radius:0;
  background:var(--ink);
  color:#fff;
  font-family:'Atlas Grotesk',AtlasGrotesk,Arial,sans-serif;
  font-size:23px;
  line-height:1;
  transition:background-color .18s ease,color .18s ease;
}

.password-control button:hover{
  background:#393633;
}

.password-control button:focus-visible{
  position:relative;
  z-index:1;
  outline:3px solid var(--blue);
  outline-offset:-4px;
}

.password-control button:disabled,
.password-control input:disabled{
  cursor:wait;
  opacity:.62;
}

.password-status{
  min-height:20px;
  margin:12px 0 0;
  color:#c0154c;
  font-size:12px;
  line-height:20px;
  text-align:center;
}

.password-control.gate-error{
  border-color:#c0154c;
  animation:gate-shake .32s ease both;
}

.gate-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@keyframes gate-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  55%{transform:translateX(5px)}
  78%{transform:translateX(-3px)}
}

@media(max-width:480px){
  .password-gate-inner{width:min(340px,88vw)}
  .password-gate-logo{height:52px;margin-bottom:36px}
}

@media(prefers-reduced-motion:reduce){
  .password-gate{transition:none}
  .password-control.gate-error{animation:none}
}