/* 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}
  .llm-lab{--lab-ink:#293630;--lab-muted:#58665c;--lab-line:#c8cabc;color:var(--lab-ink);margin-top:90px;scroll-margin-top:35px}
  .llm-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:32px}
  .llm-heading .section-tag{color:#627062;margin-bottom:19px}
  .llm-heading h3{font-size:clamp(29px,3.5vw,51px);letter-spacing:-.05em;line-height:1.12;margin:0;font-weight:650}
  .llm-heading h3 em{font-family:Georgia,serif;font-weight:400;color:#6d7863}
  .llm-heading>p{font-size:14px;line-height:1.7;color:var(--lab-muted);max-width:290px;margin:0 0 4px}
  .llm-toolbar{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--lab-line);border-bottom:0;background:#f2f1e8;padding:14px 18px;gap:12px}
  .llm-depth{display:flex;gap:3px}.llm-depth button{background:transparent;border:0;color:#59655b;padding:11px 16px;font:600 12px Arial,sans-serif;cursor:pointer;border-radius:3px}
  .llm-depth button[aria-pressed="true"]{background:#2f4036;color:#faf5eb}
  .llm-text-button{padding:11px 10px;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;color:#465649;cursor:pointer;font-size:11px;font-weight:600;min-height:44px}
  .llm-lab button:focus-visible{outline:3px solid #9a4d37;outline-offset:4px}
  .llm-workspace{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);border:1px solid var(--lab-line);background:#f8f6ef}
  .llm-stage{position:relative;min-height:510px;background:radial-gradient(ellipse at 50% 40%,#f5e7d7,#e8e7dd 75%);overflow:hidden}
  .llm-stage canvas,.llm-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
  .llm-stage canvas{opacity:0;touch-action:pan-y;cursor:grab;transition:opacity var(--motion-slow)}.llm-stage[data-render-state="ready"] canvas{opacity:1}
  .llm-stage[data-render-state="ready"] .llm-poster{opacity:0}
  .llm-stage-label{position:absolute;top:24px;left:25px;font:700 9px var(--mono);letter-spacing:.15em;z-index:2;color:#696758}
  .llm-hover{position:absolute;bottom:40px;left:24px;right:24px;text-align:center;font-size:12px;color:#3e5144;z-index:2;pointer-events:none;margin:0}
  .llm-render-note{position:absolute;bottom:15px;left:18px;right:18px;color:#6b7266;font-size:9px;text-align:center;line-height:1.4}
  .llm-pins{position:absolute;inset:0;pointer-events:none}.llm-pin{position:absolute;left:0;top:0;white-space:nowrap;font:600 9px var(--mono);color:#364c3c;background:#f6f3e9e8;border:1px solid #b6bbaa;border-radius:3px;padding:6px 8px;transform:translate(-50%,-50%);box-shadow:0 2px 12px #333a2310}
  .llm-pin.is-selected{color:#fff9ee;background:#3b5141;border-color:#3b5141}.llm-pin.is-failure{background:#a95640;color:#fff8ed;border-color:#a95640}
  .llm-explanation{padding:33px 32px;display:flex;flex-direction:column;border-left:1px solid var(--lab-line)}
  .llm-card-top{display:flex;align-items:center;justify-content:space-between;font:700 10px var(--mono);letter-spacing:.12em;color:#69725f}.llm-card-dot{width:7px;height:7px;background:#a9634f;border-radius:50%}
  .llm-explanation h4{font-size:clamp(25px,2.3vw,34px);letter-spacing:-.045em;line-height:1.12;font-weight:600;margin:25px 0 15px}
  .llm-explanation>p{font-size:14px;line-height:1.75;color:var(--lab-muted);margin:0 0 24px}
  .llm-small-label{font:700 9px var(--mono);letter-spacing:.12em;color:#68735f;display:block}
  .llm-example{padding:18px;background:#eeece1;border-left:2px solid #b79a7a}.llm-example p{font-family:Georgia,serif;font-size:19px;line-height:1.5;margin:11px 0;color:#3c493b}
  .llm-example>span:last-child{font-size:11px;line-height:1.6;display:block;color:#61705e}
  .llm-takeaway{margin:23px 0}.llm-takeaway p{font-size:12px;line-height:1.7;margin:9px 0 0;color:#4f5f51}
  .llm-next{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:14px 0 0;border:0;border-top:1px solid var(--lab-line);background:transparent;color:#374d3c;font:600 12px Arial,sans-serif;cursor:pointer;min-height:44px}.llm-next span{font-size:20px}
  .llm-steps{display:flex;border:1px solid var(--lab-line);border-top:0;background:#f2f1e8}
  .llm-steps button{flex:1;min-height:62px;border:0;border-right:1px solid var(--lab-line);background:transparent;padding:14px 10px;font-size:12px;color:#536050;cursor:pointer}.llm-steps button:last-child{border-right:0}
  .llm-steps button span{font:700 10px var(--mono);margin-right:10px;opacity:.75}.llm-steps button[aria-pressed="true"]{background:#dce1d1;color:#20382b;box-shadow:inset 0 -3px #657a59}
  .llm-token-demo{padding:24px;display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:center;border:1px solid var(--lab-line);border-top:0;background:#eceee2}
  .llm-token-demo p{font-size:12px;line-height:1.6;margin:7px 0 0;color:#5b6856}.llm-token-output{font-family:Georgia,serif;font-size:21px;color:#3b5142}.llm-caret{display:inline-block;width:2px;height:21px;background:#a7654e;vertical-align:middle;margin-left:3px}.llm-demo-note{grid-column:1/-1;font-size:10px;color:#616c5e}
  .llm-failures{border:1px solid var(--lab-line);border-top:0;background:#f6f2e8}.llm-failures>button{display:flex;align-items:center;gap:14px;width:100%;background:transparent;border:0;padding:21px 24px;cursor:pointer;color:#4e5544;text-align:left;min-height:65px;font-size:13px;font-weight:600}
  .llm-failure-symbol{border:1px solid #ac6b52;color:#98583e;border-radius:50%;width:22px;height:22px;text-align:center;line-height:22px;font-family:Georgia,serif}.llm-failures>button>span:last-child{margin-left:auto;font:600 10px var(--mono);color:#8b5d45}
  #llm-failure-panel{padding:0 24px 25px}.llm-failure-intro{font-size:12px;color:#68705e;line-height:1.65;max-width:720px;margin:0 0 17px}
  .llm-failure-options{display:flex;flex-wrap:wrap;gap:7px}.llm-failure-options button{background:#ede9dc;color:#645a46;border:1px solid #d1c7b4;padding:11px 14px;min-height:44px;font-size:11px;cursor:pointer;border-radius:2px}.llm-failure-options button[aria-pressed="true"]{background:#985e47;border-color:#985e47;color:#fff8ee}
  .llm-failure-detail{margin-top:20px;max-width:860px}.llm-failure-detail h4{font-size:20px;letter-spacing:-.025em;font-weight:600;margin:0 0 8px}.llm-failure-detail p{font-size:13px;line-height:1.75;margin:9px 0;color:#5d6556}.llm-failure-detail .llm-failure-example{border-left:2px solid #bba589;padding-left:14px;font-family:Georgia,serif;font-size:16px}
  .llm-disclaimer{font-size:11px;line-height:1.8;color:#64705e;margin:18px 0 0;max-width:940px}.llm-disclaimer strong{color:#4e604e}
  .llm-lab [hidden]{display:none!important}
  @media(min-width:1001px){.atmosphere-copy{max-width:65%}.atmosphere-copy h1{font-size:clamp(75px,8.5vw,148px)}}
  @media(max-width:1000px){.llm-explanation{padding:27px 24px}.llm-stage{min-height:490px}.llm-heading{gap:25px}.llm-steps button span{margin-right:5px}}
  @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}.llm-heading{display:block}.llm-heading>p{margin-top:20px;max-width:390px}.llm-workspace{grid-template-columns:1fr}.llm-stage{min-height:400px}.llm-explanation{border-left:0;border-top:1px solid var(--lab-line)}.llm-heading h3{font-size:36px}.llm-lab{margin-top:65px}.llm-token-demo{grid-template-columns:1fr auto}.llm-token-demo>div:first-child{grid-column:1/-1}.llm-failures>button{flex-wrap:wrap}.llm-failures>button>span:last-child{margin-left:36px;flex-basis:100%}.llm-steps button{font-size:11px;padding:10px 3px}.llm-steps button span{display:block;margin:0 0 6px}.llm-depth button{font-size:11px;padding:10px}.llm-toolbar{padding:10px}.llm-toolbar>.llm-text-button{font-size:10px;padding:9px 3px}.llm-explanation h4{font-size:29px}.visual-modal-surface .hero-poster{width:100%;top:20%;height:75%;right:-12%}}
  @media(max-width:390px){.llm-heading h3{font-size:31px}.llm-stage{min-height:340px}.llm-pin{font-size:8px;padding:5px}.llm-toolbar{gap:4px}.llm-depth button{padding:10px 7px}.llm-stage-label{font-size:8px}.llm-explanation{padding:24px 20px}}
  @media(prefers-reduced-motion:reduce){.hero-background canvas,.hero-poster,.llm-stage canvas{transition:none}}
  /* Learning Nucleus, 26.10 brief: overview action, caption, step navigation, evaluator links. */
  .llm-explore{position:absolute;top:16px;right:16px;z-index:3;min-height:44px;padding:11px 16px;border:1px solid #2f4036;background:#2f4036;color:#faf5eb;font:600 12px Arial,sans-serif;cursor:pointer;border-radius:3px}
  .llm-explore span{margin-left:8px}.llm-explore:hover{background:#3d5245}
  .llm-hover{bottom:62px}
  .llm-caption{position:absolute;bottom:36px;left:18px;right:18px;margin:0;text-align:center;font-size:11px;font-style:italic;color:#56604f;z-index:2}
  .llm-nav{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid var(--lab-line)}
  .llm-nav .llm-next{margin:0 0 0 auto;padding:0 0 0 12px;border:0;gap:10px;text-align:right}
  .llm-nav-back,.llm-nav-reset{min-height:44px;padding:0 10px;border:0;background:transparent;color:#4a5a4d;font:600 12px Arial,sans-serif;cursor:pointer}
  .llm-nav-back{padding-left:0}.llm-nav-reset{text-decoration:underline;text-underline-offset:4px;font-size:11px}
  .llm-steps button{line-height:1.3}
  .llm-failure-link{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;color:#7d4a36;text-underline-offset:4px}
  @media(hover:none){.llm-hover{display:none}}
  @media(max-width:780px){.llm-explore{top:auto;bottom:62px;right:50%;transform:translateX(50%);white-space:nowrap}.llm-stage:has(.llm-explore:not([hidden])) .llm-hover{visibility:hidden}.llm-steps{flex-wrap:wrap}.llm-steps button{flex:1 1 33%;border-bottom:1px solid var(--lab-line)}}
  @media(max-width:390px){.llm-caption{font-size:10px}.llm-steps button{flex-basis:50%}}
  /* 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. */

  .llm-depth button{min-height:44px}
  /* 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. */
  .llm-panel{border:1px solid var(--lab-line);border-top:0;background:#eceee2;padding:24px;position:relative}
  .llm-panel-head p{font-size:12px;line-height:1.65;margin:7px 0 0;color:#5b6856;max-width:760px}
  .llm-panel .llm-demo-note{display:block;margin-top:14px;font-size:10px;line-height:1.6;color:#616c5e}
  .llm-temp{display:flex;align-items:center;gap:12px;margin:18px 0 6px;font:600 11px Arial,sans-serif;color:#4a5a4d}
  .llm-temp output{font:700 12px var(--mono);min-width:28px;color:#8b4f38}.llm-temp input{flex:1;max-width:320px;accent-color:#9a5a43;min-height:44px}
  .llm-prob-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:7px;max-width:640px}
  .llm-prob-list li{display:grid;grid-template-columns:96px 1fr 44px;gap:12px;align-items:center;font-size:13px}
  .llm-prob-token{font-family:Georgia,serif;color:#3b5142}.llm-prob-value{font:700 11px var(--mono);color:#5d6556;text-align:right}
  .llm-prob-bar{height:12px;background:#dcdccd;border-radius:2px;overflow:hidden}.llm-prob-bar i{display:block;height:100%;background:linear-gradient(90deg,#b8735a,#d9a35f);transition:width var(--motion-standard)}
  .llm-prob-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px}.llm-prob-actions span{font-size:12px;line-height:1.6;color:#4f5f51;flex:1;min-width:220px}
  .llm-attn-arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .llm-attn-arcs path{fill:none;stroke:#9a5a43;stroke-linecap:round}
  .llm-attn-tokens{display:flex;flex-wrap:wrap;gap:8px;margin-top:84px;position:relative}
  .llm-attn-token{min-height:44px;padding:8px 13px;border:1px solid #c9c4b2;background:#f7f4ea;font:500 15px Georgia,serif;color:#33463a;cursor:pointer;border-radius:3px}
  .llm-attn-token[aria-pressed="true"]{background:#2f4036;color:#faf5eb;border-color:#2f4036}
  .llm-attn-token.is-future{opacity:.38;border-style:dashed}
  .llm-attn-summary{font-size:13px;color:#3e5144;margin:14px 0 0}
  .llm-window-track{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px;align-items:center}
  .llm-slot{width:38px;height:30px;border-radius:3px;font:700 8px var(--mono);display:grid;place-items:center;color:#fff8ee;letter-spacing:.04em}
  .llm-slot.is-system{background:#6f6a7e}.llm-slot.is-user{background:#9a5a43}.llm-slot.is-model{background:#5f7d71}.llm-slot.is-empty{background:transparent;border:1px dashed #b9b8a6}
  .llm-slot.is-dropped{opacity:.28;filter:grayscale(1);transform:scale(.85)}
  .llm-window-edge{font:700 9px var(--mono);color:#8b4f38;border-left:2px solid #8b4f38;padding:7px 8px 7px 6px;letter-spacing:.12em;text-transform:uppercase}
  .llm-window-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}.llm-window-foot p{font-size:12px;color:#4f5f51;margin:0}
  .llm-key{display:inline-block;padding:1px 6px;border-radius:2px;color:#fff8ee;font-weight:600}.llm-key.is-system{background:#6f6a7e}.llm-key.is-user{background:#9a5a43}.llm-key.is-model{background:#5f7d71}
  .llm-embed-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .llm-embed-list li{background:#f7f4ea;border:1px solid #d5d0bf;padding:14px;display:grid;gap:6px}
  .llm-embed-token{font:500 18px Georgia,serif;color:#33463a}.llm-embed-meta{font:700 9px var(--mono);color:#6a705f;letter-spacing:.06em}
  .llm-embed-vector{display:flex;align-items:flex-end;gap:4px;height:46px;border-bottom:1px solid #c9c4b2;padding-top:4px}
  .llm-embed-vector i{flex:1;background:#7f9a8c;border-radius:2px 2px 0 0;min-height:3px}.llm-embed-vector i.is-negative{background:#c08a76}
  .llm-training{border:1px solid var(--lab-line);border-top:0;background:#f2f0e6}
  .llm-training>button{display:flex;align-items:center;gap:14px;width:100%;background:transparent;border:0;padding:21px 24px;cursor:pointer;color:#4e5544;text-align:left;min-height:65px;font-size:13px;font-weight:600}
  .llm-training>button>span:last-child{margin-left:auto;font:600 10px var(--mono);color:#8b5d45}
  #llm-training-panel{padding:0 24px 25px}
  .llm-training-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .llm-training-stages li{background:#f9f7ef;border:1px solid #d9d3c2;padding:16px}.llm-training-stages h4{font-size:17px;letter-spacing:-.02em;font-weight:600;margin:9px 0 6px}.llm-training-stages p{font-size:12px;line-height:1.65;margin:0;color:#5d6556}
  .llm-training-you{margin:16px 0 10px;padding:12px 14px;border-left:2px solid #9a5a43;background:#efe7da;font-size:13px;line-height:1.65;color:#4a4136}
  @media(max-width:780px){.llm-panel{padding:20px 16px}.llm-embed-list,.llm-training-stages{grid-template-columns:1fr}.llm-prob-list li{grid-template-columns:80px 1fr 40px}.llm-training>button{flex-wrap:wrap}.llm-training>button>span:last-child{margin-left:36px;flex-basis:100%}.llm-slot{width:30px}}
  /* Legend dots, opened block, bead label, token status. */
  .llm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;box-shadow:0 0 0 1px #00000014}
  .llm-pin{border-left:3px solid var(--pin,#b6bbaa)}
  .llm-pin.is-sub{background:#2f4036;color:#faf5eb;border-color:#2f4036;border-left-color:#d9826a}
  .llm-pin.is-bead{background:#d9824f;color:#fff8ee;border-color:#d9824f;font-size:10px;padding:4px 7px;transform-origin:center}
  .llm-open-block{position:absolute;top:16px;right:16px;z-index:3;min-height:44px;padding:11px 16px;border:1px solid #6f5b86;background:#f4f0f7;color:#46385a;font:600 12px Arial,sans-serif;cursor:pointer;border-radius:3px}
  .llm-open-block[aria-pressed="true"]{background:#46385a;color:#f8f3fb}
  .llm-block-note{margin:0 0 18px;padding:12px 14px;border-left:2px solid #9b88b0;background:#f1edf4;font-size:13px;line-height:1.65;color:#4a4256}
  .llm-token-status{display:block;font:500 11px Arial,sans-serif;color:#61705e;margin-top:6px}
  /* Phone story: pinned model, one card per step. */
  .llm-story{list-style:none;margin:0;padding:0}
  .llm-story-card{padding:26px 20px 34px;border-top:1px solid var(--lab-line);min-height:62vh;background:#f8f6ef}
  .llm-story-card h4{font-size:27px;letter-spacing:-.04em;line-height:1.12;font-weight:600;margin:14px 0 12px}
  .llm-story-card>p{font-size:14px;line-height:1.75;color:var(--lab-muted);margin:0 0 18px}
  .llm-story-card .llm-example p{font-family:Georgia,serif;font-size:18px;line-height:1.5;margin:10px 0;color:#3c493b}
  .llm-story-card .llm-example>span:last-child{font-size:11px;line-height:1.6;display:block;color:#61705e}
  .llm-story-tip{font-size:12px!important;margin-top:16px!important}
  .llm-story-panels .llm-panel{border:1px solid var(--lab-line);margin-top:16px}
  @media(max-width:780px){
    .llm-workspace.is-story{display:block}
    .llm-workspace.is-story .llm-stage{position:sticky;top:0;z-index:4;min-height:300px;height:300px;border-bottom:1px solid var(--lab-line)}
    .llm-workspace.is-story .llm-explanation{display:none}
    .llm-open-block{top:auto;bottom:62px;right:50%;transform:translateX(50%);white-space:nowrap}
  }
  /* overflow:hidden on the page wrapper disables position:sticky (phone lesson story); clip keeps the same cropping. */
  @supports (overflow:clip){.site-shell{overflow:clip}}
  @media(max-width:780px){
    .llm-workspace.is-story .llm-hover,.llm-workspace.is-story .llm-render-note{display:none}
    .llm-workspace.is-story .llm-open-block{top:10px;bottom:auto;right:10px;transform:none;min-height:40px;padding:8px 12px;font-size:11px}
    .llm-workspace.is-story .llm-caption{bottom:12px}
    .llm-workspace.is-story .llm-explore{bottom:40px}
  }
  /* The hover line only appears while a part is hovered; the caption below already explains drag and select. */
  .llm-hover:empty{display:none}
  /* 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){
    .llm-workspace{display:block;position:relative}
    .llm-workspace>.llm-stage{height:clamp(560px,72vh,680px);min-height:0}
    .llm-workspace .llm-explore{display:none!important}
    .llm-explanation{position:absolute;top:0;left:0;z-index:5;width:min(400px,40%);max-height:min(calc(clamp(560px,72vh,680px) - 80px),var(--pop-max,9999px));overflow:auto;padding:0 22px 12px;
      border:1px solid rgba(255,255,255,.9);border-left:1px solid rgba(255,255,255,.9);border-radius:18px;background:rgba(255,253,250,.92);
      -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);box-shadow:0 26px 60px -30px rgba(70,44,62,.55);
      transform:translate(var(--pop-x,0px),var(--pop-y,64px));opacity:0;transition:opacity var(--motion-standard),box-shadow var(--motion-quick)}
    .llm-explanation.is-placed{opacity:1}
    .llm-explanation.is-closed{display:none}
    .llm-explanation.is-dragging{box-shadow:0 36px 80px -30px rgba(70,44,62,.7);transition:none;cursor:grabbing;user-select:none}
    .llm-explanation .llm-card-top{position:sticky;top:0;z-index:1;margin:0 -22px 0;padding:10px 12px 10px 8px;gap:8px;justify-content:flex-start;
      background:rgba(255,253,250,.96);border-bottom:1px solid rgba(38,34,44,.08);cursor:grab;user-select:none;touch-action:none}
    .llm-explanation.is-dragging .llm-card-top{cursor:grabbing}
    .llm-card-top .llm-card-dot{margin-left:auto}
    .llm-card-grip,.llm-card-close{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:#5b5361;cursor:inherit;font-size:16px;line-height:1}
    .llm-card-close{cursor:pointer;font-size:22px}
    .llm-card-grip:hover,.llm-card-close:hover{background:rgba(38,34,44,.07)}
    .llm-card-grip:focus-visible,.llm-card-close:focus-visible,.llm-card-open:focus-visible{outline:3px solid #9a4d37;outline-offset:2px}
    .llm-explanation h4{font-size:clamp(22px,1.9vw,27px);margin:14px 0 10px}
    .llm-explanation>p{font-size:14px;line-height:1.65;margin:0 0 14px}
    .llm-explanation .llm-example{margin:0 0 14px;padding:12px 14px}
    .llm-explanation .llm-takeaway{margin:0 0 6px}
    .llm-explanation[data-state="overview"] :is(.llm-example,.llm-takeaway){display:none}
    .llm-explanation .llm-example p{font-size:16px;margin:6px 0}
    /* Back / View all / Next stay visible at the bottom of the card while its text scrolls. */
    .llm-explanation .llm-nav{gap:2px;padding:8px 22px 10px;margin:0 -22px -12px;position:sticky;bottom:-12px;z-index:1;background:rgba(255,253,250,.97)}
    .llm-explanation .llm-nav :is(.llm-nav-back,.llm-nav-reset,.llm-next){white-space:nowrap;min-height:40px}
    .llm-explanation .llm-nav .llm-next{font-size:12.5px}
    .llm-card-open{position:absolute;top:68px;right:16px;z-index:4;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.9);
      background:rgba(255,253,250,.9);color:#3b3340;font:600 13px var(--font,Inter,system-ui,sans-serif);cursor:pointer;box-shadow:0 14px 30px -18px rgba(70,44,62,.55)}
    .llm-card-open[hidden]{display:none}
  }
  @media(max-width:780px){.llm-card-grip,.llm-card-close,.llm-card-open{display:none!important}}
  @media(min-width:781px) and (prefers-reduced-motion:reduce){.llm-explanation{transition:none}}
  /* Still image instead of 3D: the card simply sits top right. */
  @media(min-width:781px){.llm-stage:not([data-render-state="ready"])~.llm-explanation{left:auto;right:16px;transform:translateY(64px);opacity:1}}
  /* One lesson (no Simple / Deeper switch): only "Pause motion" remains in the toolbar. */
  .llm-toolbar{justify-content:flex-end}

  /* Tip for a clicked part of the model: what it is, plus a link to its lesson step. */
  .llm-tip{position:absolute;top:0;left:0;z-index:6;width:min(290px,calc(100% - 20px));padding:14px 16px 14px;border-radius:14px;background:rgba(255,253,250,.97);
    border:1px solid rgba(38,34,44,.12);box-shadow:0 18px 40px -20px rgba(70,44,62,.6);color:#2d2832;font-family:var(--font,Inter,system-ui,sans-serif)}
  .llm-tip[hidden]{display:none}
  .llm-tip-title{display:block;font-size:14px;font-weight:700;margin:0 26px 6px 0}
  .llm-tip-text{margin:0 0 12px;font-size:13px;line-height:1.55;color:#4d4552}
  .llm-tip-go{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--au-grad,#b5476f);color:#fff;font:600 12.5px var(--font,Inter,system-ui,sans-serif);cursor:pointer}
  .llm-tip-close{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#5b5361;font-size:20px;line-height:1;cursor:pointer}
  .llm-tip-close:hover{background:rgba(38,34,44,.07)}
  .llm-tip :is(.llm-tip-go,.llm-tip-close):focus-visible{outline:3px solid #9a4d37;outline-offset:2px}
  /* Pins are buttons: clicking a name opens the same tip as clicking the part in the model. */
  button.llm-pin{pointer-events:auto;cursor:pointer;appearance:none;-webkit-appearance:none;margin:0;line-height:1.2;text-align:left}
  button.llm-pin:hover{border-color:#6c7a66;box-shadow:0 4px 16px #333a2326}
  button.llm-pin:focus-visible{outline:3px solid #9a4d37;outline-offset:2px}
}
