/* Page-specific styles, "pages" layer (see site.css for the layer order). */
@layer pages {
  /* Two independent 3D experiences; typography and page structure stay with the site. */
  .hero.atmosphere-hero{color:#282e2b;background:#eee7dc;isolation:isolate}
  .atmosphere-hero:before{background:radial-gradient(ellipse at 82% 38%,#e5cdbd 0%,transparent 53%),#eee7dc}
  .atmosphere-hero:after{background:linear-gradient(0deg,#eee7dc,transparent);height:17%}
  .atmosphere-hero .atmosphere-type-one{color:#282e2b}
  .hero.atmosphere-hero .atmosphere-copy h1 .atmosphere-type-two{-webkit-text-stroke:1.5px #484a43}
  .hero.atmosphere-hero .atmosphere-copy h1 .atmosphere-type-two i{color:#a75a48}
  .atmosphere-hero .atmosphere-type-three{color:#a16873}
  .atmosphere-hero .atmosphere-deck,.atmosphere-hero .atmosphere-social-proof{color:#535850}
  .atmosphere-hero .atmosphere-topline,.atmosphere-hero .atmosphere-floor{color:#4c514b;border-color:#b8b1a5}
  .atmosphere-hero .atmosphere-kicker{color:#66594f}
  .atmosphere-hero .atmosphere-action-secondary{color:#333b34;border-color:#9d9d90;background:#e5e1d6}
  .atmosphere-hero .atmosphere-action-secondary b{border-color:#9d9d90}
  .atmosphere-hero .atmosphere-action-primary{background:#b96e59;color:#fff7ec;border-color:#a95b46}
  .hero.atmosphere-hero .button.atmosphere-action-primary,.hero.atmosphere-hero .button.atmosphere-action-secondary{gap:0;font-size:12px;min-height:56px}
  .hero.atmosphere-hero .atmosphere-action-primary span{font-size:inherit;background:#b96e59;color:#fff7ec}
  .hero.atmosphere-hero .atmosphere-action-primary b{background:#b96e59;color:#fff7ec;border-color:#934d3d}
  .hero.atmosphere-hero .atmosphere-action-secondary span{font-size:inherit;background:#e5e1d6;color:#333b34;border-color:#9d9d90}
  .hero.atmosphere-hero .atmosphere-action-secondary b{background:#e5e1d6;color:#333b34;border-color:#9d9d90}
  .atmosphere-hero .visual-trigger,.atmosphere-hero .motion-switch{color:#333b34;border-color:#aaa89c}
  .atmosphere-hero .atmosphere-coordinates{color:#665b53}
  .atmosphere-hero .hero-floor-left,.atmosphere-hero .hero-down{color:#4c514b}
  .atmosphere-hero .hero-contour,.atmosphere-hero .sculpture-tag{display:none}
  .hero-background{pointer-events:none}
  .hero-background canvas{opacity:0;transition:opacity var(--motion-slow)}
  .hero-background[data-render-state="ready"] canvas{opacity:1}
  .hero-poster{position:absolute;width:52%;height:90%;right:-2%;top:2%;object-fit:contain;transition:opacity var(--motion-slow)}
  .hero-background[data-render-state="ready"] .hero-poster{opacity:0}
  .visual-modal-surface .hero-background{inset:0;position:absolute;z-index:0;background:#eee7dc}
  .visual-modal-surface .hero-background canvas{pointer-events:auto;touch-action:pan-y;cursor:grab}
  .visual-modal-surface .hero-poster{width:65%;height:95%;right:-1%}
  .visual-modal{background:#eee7dc;color:#2b312c}
  .visual-modal:after{background:linear-gradient(90deg,#eee7dcd9,transparent 62%)}
  .visual-modal-header,.visual-modal-footer,.visual-modal-content p{color:#535850}
  .visual-modal-content h2{color:#292e2b}.visual-modal-content h2 em{color:#9c6170}
  .visual-modal-content>span{color:#8c5944}
  .visual-modal-header{border-color:#b6aea0}.visual-modal-header button{background:#efe9df;color:#282e2b;border-color:#a4998a}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @media(min-width:1001px){.atmosphere-copy{max-width:65%}.atmosphere-copy h1{font-size:clamp(75px,8.5vw,148px)}}
  
  @media(max-width:780px){.hero-poster{width:70%;height:53%;top:auto;bottom:-1%;right:-6%}.hero-background[data-render-state="ready"] canvas{opacity:1}.visual-modal-surface .hero-poster{width:100%;top:20%;height:75%;right:-12%}}
  
  @media(prefers-reduced-motion:reduce){.hero-background canvas,.hero-poster{transition:none}}
  /* Learning Nucleus, 26.10 brief: overview action, caption, step navigation, evaluator links. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Soft contact shadow under the floating model (static, costs nothing per frame). */
  /* The model now stands on a plinth with real (desktop) or baked shadows; no CSS shadow. */

  
  /* The Open Core: vertical caption would cross the sculpture on narrow screens; it is decorative (aria-hidden). */
  @media(max-width:780px){.atmosphere-hero .atmosphere-coordinates{display:none}}
  .hero-poster{right:1%}
  /* Lesson panels: probabilities, attention, context window, embeddings, training. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Legend dots, opened block, bead label, token status. */
  
  
  
  
  
  
  
  
  /* Phone story: pinned model, one card per step. */
  
  
  
  
  
  
  
  
  
  /* overflow:hidden on the page wrapper disables position:sticky (phone lesson story); clip keeps the same cropping. */
  @supports (overflow:clip){.site-shell{overflow:clip}}
  
  /* The hover line only appears while a part is hovered; the caption below already explains drag and select. */
  
  /* Desktop: the stage spans the full width at one fixed height (the model never rescales between steps). The step
     explanation is a card docked to the right of the model; main.js shifts the model left while it is open and sets
     --pop-x / --pop-y. The card can be dragged by its header, closed and opened again. */
  @media(min-width:781px){
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Back / View all / Next stay visible at the bottom of the card while its text scrolls. */
    
    
    
    
    
  }
  
  
  /* Still image instead of 3D: the card simply sits top right. */
  
  /* One lesson (no Simple / Deeper switch): only "Pause motion" remains in the toolbar. */
  

  /* Tip for a clicked part of the model: what it is, plus a link to its lesson step. */
  
  
  
  
  
  
  
  
  /* Pins are buttons: clicking a name opens the same tip as clicking the part in the model. */
  
  
  

  /* Homepage teaser for the 3D lesson on lab.html (replaced lesson A on 04.11.2026). */
  .lab-teaser{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-7);align-items:center;margin:var(--space-8) 0 var(--space-6);
    padding:var(--space-5);border-radius:var(--radius-lg);background:var(--c-glass);border:1px solid var(--c-glass-line);box-shadow:var(--shadow-card)}
  .lab-teaser-visual{display:block;border-radius:calc(var(--radius-lg) - 6px);overflow:hidden;background:#f3f2ee}
  .lab-teaser-visual img{display:block;width:100%;height:auto;transition:transform var(--motion-slow) var(--ease)}
  .lab-teaser-visual:hover img{transform:scale(1.02)}
  .lab-teaser-copy h3{margin:var(--space-3) 0 var(--space-3);font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.03em;color:var(--c-ink)}
  .lab-teaser-copy h3 em{font-family:var(--font-serif);font-weight:400;color:var(--c-accent-ink)}
  .lab-teaser-copy>p{margin:0 0 var(--space-4);font-size:16px;line-height:1.65;color:var(--c-muted)}
  .lab-teaser-points{margin:0 0 var(--space-5);padding:0;list-style:none;display:grid;gap:8px}
  .lab-teaser-points li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--c-ink-soft)}
  .lab-teaser-points li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--grad-accent)}
  @media(max-width:900px){.lab-teaser{grid-template-columns:1fr;gap:var(--space-5);padding:var(--space-4)}}
}