/* Theoria: a tactile, centered scientific studio. */
.hero-shell.container{width:min(1200px,calc(100% - 64px));display:block;padding-block:12px 44px}
.hero.hero-rotating{position:relative;width:100%;min-width:0;padding:0;text-align:center;color:var(--ink)}
.hero-message{position:relative;margin:0}
.hero-stage{position:relative;width:100%;--hero-stage-height:540px;--hero-headroom:0px;height:calc(var(--hero-stage-height) + var(--hero-headroom));padding:0;margin-bottom:-8px;clip-path:inset(0 0 8px);overflow:hidden;isolation:isolate}
.hero-heading-stack{position:absolute;inset:0;align-content:center;padding:30px}
.hero[data-webgl-ready=true] .hero-heading-stack{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;white-space:nowrap}
.hero-canvas:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.hero[data-interactive=true] .hero-canvas{pointer-events:auto;cursor:grab;touch-action:pan-y}
.hero[data-dragging=true] .hero-canvas{cursor:grabbing;touch-action:none}
.hero-heading-stack,.hero-copy-stack{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;justify-items:center}
.hero-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:2}
.hero-canvas[hidden]{display:none}
.hero.hero-rotating .hero-title{grid-area:1/1;align-self:start;width:100%;max-width:1100px;margin:0;font-family:inherit;font-size:clamp(3.25rem,5.7vw,5.125rem);font-weight:500;line-height:1.13;letter-spacing:-.047em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
.hero-phrase{display:inline-block;max-width:100%}
.hero-heading-accent{color:inherit}
.hero-copy-stack{width:min(100%,680px);margin:0 auto}
.hero.hero-rotating .hero-description{grid-area:1/1;align-self:start;width:100%;margin:0;font-size:1.0625rem;line-height:1.75;color:var(--muted);text-wrap:pretty}
.hero-reserve{visibility:hidden;pointer-events:none;user-select:none}
.hero.hero-rotating .store-options{grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));justify-content:center;gap:12px;width:min(100%,26rem);max-width:26rem;padding:0;margin:20px auto 3px}
.hero-rotating .store-button{min-height:50px;height:100%;gap:8px;padding:10px 12px;font-size:.8125rem;line-height:1.4;white-space:nowrap}
.hero-rotating .store-button::before{width:20px;height:20px}
.hero-rotating .store-status{top:-7px;right:8px;padding:2px 9px;font-size:.75rem}
.hero.hero-rotating .hero-link{margin-top:1px;font-size:.8125rem}
.hero-motion-option{display:inline-flex;align-items:center;gap:9px;min-height:44px;font-size:.8125rem;color:var(--muted);cursor:pointer}
.hero-motion-option input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.hero-motion-option input:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
/* The app continues the story below the experiments. */
.hero-product{position:relative;width:min(100%,1000px);max-width:none;min-width:0;align-self:center;display:flex;flex-direction:column;padding-top:0}
.hero-product.container{width:min(1000px,calc(100% - 64px));margin-inline:auto;margin-bottom:64px}
.hero-product .preview-tabs{align-self:center;flex:none;gap:8px;margin:0 0 24px;padding:4px;border:1px solid var(--line);border-radius:30px;background:var(--paper)}
.hero-product .preview-tabs button{position:relative;min-height:44px;min-width:100px;padding:0 24px;border-radius:24px;background:none;font-size:.8125rem;letter-spacing:0;font-weight:600;color:var(--muted)}
.hero-product .preview-tabs button[aria-selected=true]{background:white;box-shadow:0 1px 5px #1b304a0d;color:var(--ink)}
.hero-product .preview-tabs button:hover{color:var(--blue)}
.hero-product .preview-panel{min-width:0;outline-offset:10px;perspective:1400px}
.hero-product .device-stage{padding:20px 82px 38px 12px;isolation:isolate;perspective:1400px}
.hero-product .device-stage::before{display:block;inset:16% 0 0;background:var(--paper);border-radius:34px}
.hero-product .tablet{position:relative;border:7px solid #26384b;border-radius:23px;overflow:hidden;background:var(--paper);box-shadow:0 25px 45px -28px #1b304a60,0 3px 10px #1b304a12;transform:none;transform-origin:50% 50%;backface-visibility:hidden}
.hero-product .tablet img{display:block;width:100%;height:auto;aspect-ratio:1180/820}
.hero-product .phone{width:23%;right:11px;bottom:6px;border:5px solid #26384b;border-radius:27px;box-shadow:0 20px 32px -18px #1b304a73,0 3px 8px #1b304a1a;transform:none;transform-origin:50% 70%;background:var(--paper);backface-visibility:hidden}
.hero-product .phone img{display:block;width:100%;height:auto;aspect-ratio:390/844}
.hero-product .preview-caption{align-items:flex-start;gap:24px;padding:22px 12px 0;min-height:58px}
.hero-product .preview-caption p{max-width:48ch;font-size:.875rem;line-height:1.65;color:var(--muted)}
.hero-product .preview-caption span{font-size:.75rem;line-height:1.65;color:var(--muted)}
.hero-product .preview-fallback{font-size:.8125rem}

.hero-rotating:lang(ru) .hero-title,.hero-rotating:lang(el) .hero-title,.hero-rotating:lang(grc) .hero-title{letter-spacing:-.035em}
.hero-rotating:lang(grc) .hero-title{line-height:1.22}
.hero-rotating:lang(ar) .hero-title{line-height:1.5;letter-spacing:0;font-size:clamp(2.625rem,4.7vw,4.5rem)}
.hero-rotating:lang(ja) .hero-title,.hero-rotating:lang(zh-Hans) .hero-title,.hero-rotating:lang(ko) .hero-title{font-size:clamp(2.25rem,4.7vw,4.375rem);font-variation-settings:normal}
.hero-rotating:lang(ja) .hero-title{line-height:1.45;letter-spacing:.01em}
.hero-rotating:lang(zh-Hans) .hero-title{line-height:1.4;letter-spacing:.015em}
.hero-rotating:lang(ko) .hero-title{line-height:1.35;letter-spacing:-.03em}
.hero-rotating:lang(ja) .hero-break,.hero-rotating:lang(zh-Hans) .hero-break,.hero-rotating:lang(ko) .hero-break{display:none}
.hero-rotating:lang(ja) .hero-description,.hero-rotating:lang(zh-Hans) .hero-description,.hero-rotating:lang(ko) .hero-description{line-height:1.9;max-width:42em}

@media(min-width:1600px){.hero-shell.container{padding-top:16px}.hero-stage{--hero-stage-height:560px}}
@media(max-width:900px){
  .hero-shell.container{width:min(780px,calc(100% - 64px));gap:56px;padding-block:12px 44px}
  .hero-stage{--hero-stage-height:460px}
  .hero.hero-rotating .hero-title{font-size:clamp(2.875rem,6.4vw,3.75rem);letter-spacing:-.045em}
  .hero-copy-stack{max-width:640px}
  .hero.hero-rotating .hero-description{max-width:640px;font-size:1rem}
  .hero-product .device-stage{padding:18px 58px 30px 0}
  .hero-product .phone{border-width:4px;border-radius:23px}
}
@media(max-width:600px){
  .hero-shell.container{width:calc(100% - 40px);gap:40px;padding-block:4px 32px}
  .hero-stage{--hero-stage-height:350px;margin-inline:-20px;width:calc(100% + 40px)}
  .hero[data-scene=galton] .hero-stage{--hero-headroom:32px}
  .hero-experiment-view{padding-bottom:32px}
  .hero[data-scene=galton] .hero-experiment-view{padding-bottom:0}
  .hero-experiment{width:100%;height:100%}
  .hero.hero-rotating .hero-title{font-size:clamp(2.5rem,8.5vw,3.125rem);line-height:1.14;letter-spacing:-.05em}
  .hero-copy-stack{max-width:36em}
  .hero.hero-rotating .hero-description{font-size:1rem;line-height:1.7;max-width:36em}
  .hero-break{display:none}
  .hero-phrase{display:block}
  .hero-controls{margin-top:12px}
  .hero.hero-rotating .store-options{margin-top:20px;gap:10px}
  .hero-rotating .store-button{font-size:.75rem;padding-inline:9px;gap:6px}
  .hero-rotating .store-button::before{width:19px;height:19px}
  .hero-product.container{width:calc(100% - 40px);margin-bottom:44px}
  .hero-product .preview-tabs{gap:3px;margin-bottom:17px}
  .hero-product .preview-tabs button{min-width:80px;padding-inline:18px;font-size:.75rem}
  .hero-product .device-stage{padding:10px 34px 22px 0}
  .hero-product .device-stage::before{border-radius:18px}
  .hero-product .tablet{border-width:4px;border-radius:13px}
  .hero-product .phone{width:25%;right:0;bottom:5px;border-width:3px;border-radius:17px}
  .hero-product .preview-caption{gap:12px;min-height:60px;padding:16px 0 0}
  .hero-product .preview-caption p{max-width:28ch;font-size:.75rem}
  .hero-rotating:lang(ar) .hero-title{font-size:2.5rem}
  .hero-rotating:lang(ja) .hero-title,.hero-rotating:lang(zh-Hans) .hero-title,.hero-rotating:lang(ko) .hero-title{font-size:2.25rem}
  .hero-rotating:lang(ja) .hero-phrase,.hero-rotating:lang(zh-Hans) .hero-phrase,.hero-rotating:lang(ko) .hero-phrase{display:inline}
}
@media(max-width:359px){.hero-stage{--hero-stage-height:320px}.hero.hero-rotating .store-options{grid-template-columns:minmax(0,264px)}.hero-rotating .store-button{font-size:.8125rem}.hero-product .preview-caption{flex-direction:column;gap:4px;min-height:74px}.hero.hero-rotating .hero-title{font-size:2.25rem}.hero-product .preview-tabs button{min-width:68px;padding-inline:13px}}
@media(prefers-reduced-motion:reduce){.hero-dot span,.hero-signup{transition:none!important}.hero.hero-rotating .hero-signup:hover{transform:none}}
@media(forced-colors:active){.hero-heading-accent{color:CanvasText}.hero-dot[aria-current=true]{outline:1px solid Highlight;outline-offset:-9px}.hero-dot span,.hero-dot span::after{background:ButtonText}.hero-toggle{color:ButtonText}.hero.hero-rotating .hero-signup{border-color:ButtonText}.hero-art{opacity:.75}}
/* Keep the approved canvas and apparatus at their original size; controls use its surrounding space. */
.hero-experiment-view{position:relative}
.hero-navigation{margin:0 0 16px}
.hero-scene-arrow{position:absolute;z-index:4;top:46%;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #b9c9d7;border-radius:50%;background:#fff;color:var(--blue);cursor:pointer;transition:background .16s,border-color .16s}
.hero-scene-arrow-prev{left:8px}.hero-scene-arrow-next{right:8px}
.hero-scene-arrow:hover{background:#eef3ff;border-color:var(--blue)}.hero-scene-arrow:active{background:#dce8ff}
.hero-scene-arrow svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hero-scene-arrow:focus-visible,.hero-experiment-controls button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.hero-experiment-controls{position:absolute;inset:0 0 auto;z-index:4;pointer-events:none}
.hero-experiment-controls button{position:absolute;top:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:24px;background:#fff;color:var(--ink);font:inherit;font-size:.8125rem;line-height:1.45;cursor:pointer;pointer-events:auto;transition:background .16s,border-color .16s}
.hero-experiment-controls [data-hero-restart]{right:0;width:44px;height:44px;padding:0}
.hero-experiment-controls [data-hero-light]{left:0}
.hero-experiment-controls button:hover{background:var(--paper);border-color:#9eafbf}
.hero-experiment-controls svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hero-hint-stack{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;max-width:65ch;min-height:2.8em;margin:0 auto}
.hero .hero-hint{grid-area:1/1;margin:0;font-size:.8125rem;line-height:1.55;color:var(--muted);text-wrap:balance}
.hero-light-track{display:block;flex:none;direction:ltr;width:32px;height:20px;padding:3px;border-radius:12px;background:#617187;transition:background .16s}
.hero-light-track>span{display:block;width:14px;height:14px;border-radius:50%;background:#fff;transform:translateX(0);transition:transform .16s}
.hero [data-hero-light][aria-checked=true] .hero-light-track{background:var(--blue)}
.hero [data-hero-light][aria-checked=true] .hero-light-track>span{transform:translateX(12px)}
.hero [hidden]{display:none!important}
.hero[data-interactive=true] .hero-canvas{touch-action:none}
@media(max-width:760px){
 .hero-experiment-view{padding-top:44px}
 .hero-navigation{direction:ltr;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:56px;margin-bottom:12px}
 .hero-scene-arrow{position:static;width:44px;height:44px}
 .hero-scene-arrow-prev{grid-column:1;grid-row:1}.hero-scene-arrow-next{grid-column:3;grid-row:1}
 .hero-hint-stack{grid-column:2;grid-row:1;min-height:0}
 .hero .hero-hint{font-size:.75rem;line-height:1.5}
 .hero:dir(rtl) .hero-hint-stack{direction:rtl}
 .hero-experiment-controls button{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){.hero-scene-arrow,.hero-experiment-controls button,.hero-light-track,.hero-light-track>span{transition:none}}
@media(forced-colors:active){.hero-scene-arrow,.hero-experiment-controls button{color:ButtonText;background:ButtonFace;border-color:ButtonText}.hero-light-track{outline:1px solid ButtonText}.hero-light-track>span{background:ButtonText}}