/* A product studio with readable, scroll-linked ingredient notes. */
.experience{height:600svh}
.studio-haze{background:radial-gradient(ellipse at 76% 43%,#3c3e3950,transparent 55%),radial-gradient(ellipse at 65% 96%,#aeb88c15,transparent 50%),#0d100d}
.studio-haze::after{opacity:.06}.studio-grid{opacity:.3}.studio-word{opacity:.6}.studio-cross{display:none}
.scene-fallback{background:#0d100d}
.scene-chapter{left:6vw;width:42%;max-width:600px;top:clamp(160px,22vh,230px)}
.scene-chapter h1{font-size:clamp(58px,6.1vw,104px);line-height:1.02;letter-spacing:-.055em}
.scene-chapter h1 em{display:inline;margin-left:0;white-space:nowrap}
.scene-chapter .scene-description{max-width:430px;font-size:18px;line-height:1.65}
.scene-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 26px;margin-top:24px}
.scene-actions .scene-cta{margin:0;background:var(--acid);color:#171d12;border-color:var(--acid);font-weight:600}
.scene-actions .scene-cta span{color:inherit}.scene-actions .scene-cta:hover{background:#f9e268}
.scene-secondary{font-size:16px;text-underline-offset:6px;text-decoration:underline;text-decoration-color:#b9c3a560;min-height:44px;display:inline-flex;align-items:center}
.hero-service-note{font-size:14px;line-height:1.5;color:#b8c4ad;margin-top:20px}.hero-service-note span{padding-inline:7px}
.scene-formula{top:clamp(55px,11vh,150px);max-width:450px}
.scene-formula .scene-eyebrow{margin-bottom:14px;color:#d8c7d7}
.scene-formula[data-chapter="2"] .scene-eyebrow{color:#b4d9e5}
.scene-formula h2{font-size:clamp(38px,4.6vw,74px);line-height:1.04;margin-bottom:23px}
.scene-formula h2 em{color:#e8bada}.scene-formula[data-chapter="2"] h2 em{color:#a4d8ed}
.ingredient-story{--ingredient-accent:#e8bada;--beat-progress:0;position:relative;border-top:1px solid #e8bada66;padding:18px 0 0;max-width:410px}
[data-ingredient-story="biotin"]{--ingredient-accent:#a4d8ed;border-color:#a4d8ed66}
.ingredient-story-top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:12px;line-height:1.5;letter-spacing:.06em;color:#b9c3b4}
.ingredient-story-top [data-beat-amount]{font-size:14px;letter-spacing:0;color:var(--ingredient-accent);white-space:nowrap}
.ingredient-story h3{font-size:clamp(26px,2.5vw,38px);font-weight:600;line-height:1.15;letter-spacing:-.03em;margin:15px 0 10px;color:#f2f2e9}
.ingredient-benefit{font-size:18px;line-height:1.4;font-weight:600;color:var(--ingredient-accent);margin:0 0 8px}
.ingredient-explanation{font-size:16px;line-height:1.55;color:#c3cbba;min-height:3.1em;max-width:400px;margin:0}
.ingredient-steps{display:flex;gap:9px;margin-top:17px}
.ingredient-steps button{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:center;background:none;color:#95a18e;min-height:44px;padding:5px 0;font-size:12px;font-variant-numeric:tabular-nums}
.ingredient-steps i{display:block;width:100%;height:3px;background:#e9efd222;position:relative;overflow:hidden}
.ingredient-steps i::after{content:"";position:absolute;inset:0;background:var(--ingredient-accent);transform:scaleX(0);transform-origin:left}
.ingredient-steps button[aria-current]{color:var(--ingredient-accent)}
.ingredient-steps button[aria-current] i::after{transform:scaleX(var(--beat-progress))}
.ingredient-steps button.is-entered i::after{transform:scaleX(1)}
.ingredient-steps button:hover i{background:#e9efd25c}
.ingredient-cue{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:1.5;color:#98a88b;margin:4px 0 0}
.scene-formula .scene-text-button{margin-top:17px;font-size:15px;width:fit-content}
.scene-product-label{right:6vw;bottom:17%;text-align:right}
.scene-illustration-note{position:absolute;bottom:118px;right:6vw;z-index:4;font-size:12px;line-height:1.5;color:#89997d;max-width:300px;text-align:right;pointer-events:none}
.scene-finish h2{font-size:clamp(48px,5.2vw,86px)}
.product-reading-link{display:inline-flex;align-items:center;gap:16px;font-weight:600;font-size:16px;min-height:44px;margin-top:12px;text-decoration:underline;text-underline-offset:5px}
.detail-context{padding:18px 20px;background:#edf0e5;border-left:3px solid #8b9e71;border-radius:0 6px 6px 0;margin-block:24px}
.detail-context p{font-size:15px!important;line-height:1.65!important;margin:0!important}.detail-context p+p{margin-top:12px!important}
.formula-notes{max-width:1300px;margin:26px auto 0;padding-top:22px;border-top:1px solid #d7dfc626;font-size:15px;line-height:1.7;color:#b4bfa8}
.product-editorial{padding:90px 6vw;background:#e7e9dc;color:#1c2719}
.product-editorial-header{max-width:1280px;margin:0 auto 44px;display:flex;align-items:end;justify-content:space-between;gap:30px}
.product-editorial-header h2{font-size:clamp(36px,4.5vw,66px);line-height:1.06;letter-spacing:-.04em;max-width:730px;margin:16px 0 0}
.product-editorial-header>p{font-size:18px;line-height:1.65;max-width:310px;color:#53604a}
.product-profiles{max-width:1280px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.product-profile{padding:32px;background:#f9faf2;border:1px solid #d4dbc8;border-radius:14px;min-width:0;border-top:4px solid #bc86aa}
.product-profile[data-product="biotin"]{border-top-color:#77afc5}.profile-top{display:flex;justify-content:space-between;gap:20px;align-items:start}
.profile-top .eyebrow{font-size:12px;color:#58664e;letter-spacing:.06em}.profile-number{font-family:var(--font-display);font-size:24px;color:#889579}
.product-profile h3{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:15px 0 20px}
.product-profile>p{font-size:18px;line-height:1.7;color:#4b5943}
.profile-details{margin-top:22px;border-top:1px solid #d4dbc8;border-bottom:1px solid #d4dbc8;display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:18px 0}
.profile-details dt{font-size:13px;color:#647057;margin-bottom:6px}.profile-details dd{font-size:18px;font-weight:600;line-height:1.4;margin:0}
.product-profile details{margin-top:20px}.product-profile summary{min-height:44px;display:list-item;cursor:pointer;font-size:16px;font-weight:600;line-height:1.5;padding:10px 0}
.product-profile details p{font-size:16px;line-height:1.65;color:#56634d;margin:6px 0 12px}
.profile-link{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:16px;font-weight:600;margin-top:24px;padding:15px 0;border-top:1px solid #d4dbc8;min-height:50px}
.profile-link:hover{color:#677738}.product-editorial :focus-visible{outline:3px solid #52763b;outline-offset:5px}
@media(min-width:901px) and (max-height:800px){.scene-chapter{top:140px}.scene-chapter h1{font-size:clamp(53px,5.4vw,76px)}.scene-formula{top:55px}.scene-formula h2{font-size:44px;margin-bottom:15px}.ingredient-story{padding-top:13px}.ingredient-story h3{font-size:30px;margin-top:11px}.ingredient-benefit{font-size:17px}.ingredient-steps{margin-top:11px}.scene-illustration-note{bottom:88px}.scene-product-label{bottom:21%}.scene-formula .scene-text-button{margin-top:8px}}
@media(max-width:1100px){.scene-chapter{left:5vw;width:44%}.scene-formula{max-width:420px}.scene-chapter .scene-description{font-size:17px}.scene-actions{gap:12px 20px}.hero-service-note{font-size:13px}.product-profile{padding:26px}.product-editorial-header{align-items:start}}
@media(max-width:900px) and (min-height:551px){
 .experience{height:640svh}.experience-pin{min-height:0}.scene-chapter{left:6vw;width:88%;max-width:none;top:135px}.scene-chapter h1{font-size:clamp(38px,8.5vw,64px);line-height:1.04;margin-bottom:16px}.scene-chapter h1 br{display:block}.scene-chapter h1 em{margin:0}
 .scene-chapter .scene-description{font-size:16px;line-height:1.5;max-width:480px}.scene-actions{margin-top:16px;gap:12px 20px}.scene-actions .scene-cta{font-size:15px;min-height:44px;padding:10px 14px}.scene-secondary{font-size:15px}.hero-service-note{margin-top:13px;font-size:13px}.scene-chapter .scene-eyebrow{font-size:11px;letter-spacing:.08em;margin-bottom:12px}
 .scene-chapter.scene-formula{top:25px;width:88%;max-width:480px}.scene-formula h2{font-size:clamp(30px,5.5vw,40px);line-height:1.08;margin-bottom:14px}.scene-formula h2 br{display:none}.scene-formula h2 em{display:inline}
 .ingredient-story{padding-top:13px;max-width:none}.ingredient-story-top{font-size:10px}.ingredient-story-top [data-beat-amount]{font-size:13px}.ingredient-story h3{font-size:27px;margin:11px 0 7px}.ingredient-benefit{font-size:16px;margin-bottom:5px}.ingredient-explanation{font-size:15px;line-height:1.45;min-height:2.9em}.ingredient-steps{margin-top:7px;gap:10px}.ingredient-steps button{gap:6px;min-height:37px}.ingredient-cue{font-size:11px}.scene-formula .scene-text-button{font-size:14px;min-height:36px;margin-top:7px}
 .scene-finish{top:45px}.scene-finish h2{font-size:clamp(40px,7vw,62px)}.scene-illustration-note{bottom:75px;right:6vw;font-size:10px;max-width:260px}.scene-product-label{display:none}.scene-fallback img:first-child{top:54%}.scene-fallback img:last-child{top:52%}
}
@media(max-width:760px){.product-editorial{padding:55px 6vw}.product-editorial-header{display:block;margin-bottom:28px}.product-editorial-header h2{font-size:38px;max-width:450px}.product-editorial-header>p{font-size:17px;margin-top:22px;max-width:440px}.product-profiles{grid-template-columns:1fr}.product-profile{padding:25px}.product-profile h3{font-size:30px}.product-profile>p{font-size:17px}.profile-details dd{font-size:17px}.scene-intro .scene-eyebrow{font-size:10px}.hero-service-note{max-width:300px}.formula-notes{font-size:14px}.scene-chapter .scene-description{max-width:390px}}
@media(max-width:900px) and (min-height:551px) and (max-height:740px){.scene-chapter{top:115px}.scene-intro h1{font-size:clamp(36px,9vw,50px);margin-bottom:12px}.scene-intro .scene-description{max-width:420px;font-size:15px;line-height:1.4}.scene-actions{margin-top:12px}.hero-service-note{display:none}.scene-chapter.scene-formula{top:17px}.scene-formula h2{font-size:28px;margin-bottom:10px}.scene-formula .scene-eyebrow{font-size:10px;margin-bottom:9px}.ingredient-story{padding-top:10px}.ingredient-story h3{font-size:25px;margin:9px 0 6px}.ingredient-benefit{font-size:15px}.ingredient-explanation{font-size:14px;line-height:1.4}.ingredient-story-top [data-beat-amount]{font-size:12px}.ingredient-steps{margin-top:4px}.ingredient-steps button{min-height:34px}.ingredient-cue{display:none}.scene-formula .scene-text-button{min-height:32px;margin-top:3px;font-size:13px}.scene-illustration-note{bottom:62px;font-size:9px;max-width:230px}}
@media(max-width:360px){.scene-chapter .scene-description{font-size:15px}.scene-actions{gap:4px 14px}.scene-secondary{font-size:14px}.scene-chapter.scene-formula h2{font-size:27px}.ingredient-benefit{font-size:15px}.product-profile{padding:22px}.product-profile h3{font-size:28px}}
@media(max-width:360px) and (max-height:640px){.scene-formula .scene-text-button{display:none}.scene-illustration-note{max-width:110px;bottom:62px;font-size:9px;line-height:1.3}.scene-intro .scene-secondary{display:none}}
@media(min-width:600px) and (max-height:550px){.experience{height:650svh}.scene-chapter{left:5vw;width:44%;top:94px}.scene-chapter h1{font-size:39px;line-height:1.05}.scene-chapter h1 br{display:block}.scene-chapter .scene-description{font-size:14px;line-height:1.35}.scene-intro .scene-eyebrow{font-size:10px}.scene-actions{margin-top:12px;gap:8px}.scene-secondary,.hero-service-note{display:none}.scene-chapter.scene-formula{top:16px}.scene-formula h2{font-size:28px;margin-bottom:10px}.scene-formula h2 br{display:none}.scene-formula .scene-eyebrow{font-size:10px;margin-bottom:8px}.ingredient-story{padding-top:9px}.ingredient-story h3{font-size:24px;margin:8px 0 5px}.ingredient-story-top{font-size:10px}.ingredient-story-top [data-beat-amount]{font-size:12px}.ingredient-benefit{font-size:15px}.ingredient-explanation{font-size:14px;line-height:1.35;min-height:0}.ingredient-steps{margin-top:5px}.ingredient-steps button{min-height:32px;gap:5px}.ingredient-cue,.scene-formula .scene-text-button,.scene-illustration-note{display:none}.scene-finish{top:28px}.scene-finish h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.experience{height:auto}.experience-pin{min-height:780px}.scene-chapter{transition:none}.ingredient-steps i::after{transition:none}.scene-illustration-note{display:none}}

/* One measured layout owns the copy, WebGL canvas, and photography fallback. */
#hero-stage{--hero-header-space:140px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:minmax(0,1fr) 66px;grid-template-areas:"copy models" "controls controls";column-gap:clamp(20px,4vw,80px);row-gap:12px;height:100svh;min-height:0;padding:var(--hero-header-space) clamp(16px,5vw,96px) 0;box-sizing:border-box;overflow:clip}
#hero-stage[data-hero-layout]{height:var(--hero-stage-height,100svh)}
#hero-stage .scene-chapters{position:relative;inset:auto;grid-area:copy;align-self:center;min-width:0;width:100%;display:grid;pointer-events:none}
#hero-stage .scene-chapter{position:relative;inset:auto;grid-area:1/1;display:none;width:100%;max-width:none;margin:0;opacity:0;transform:none;transition:none;pointer-events:none}
#hero-stage .scene-chapter.active{display:block;opacity:1;pointer-events:auto}
#hero-stage .scene-chapter h1{font-family:var(--font-display);font-size:clamp(36px,5.2vw,86px);font-weight:700;line-height:1.03;letter-spacing:-.045em;margin:0 0 20px}
#hero-stage .scene-chapter h1 br{display:block}
#hero-stage .scene-chapter h1 em{font:inherit;display:inline;margin:0;white-space:normal;color:var(--acid)}
#hero-stage .scene-chapter h2{font-size:clamp(30px,3.8vw,57px);line-height:1.05;letter-spacing:-.04em;margin:0 0 20px}
#hero-stage .scene-chapter h2 em{font:inherit}
#hero-stage .scene-chapter .scene-description{font-size:clamp(15px,1.3vw,19px);line-height:1.55;max-width:470px;margin:0}
#hero-stage .scene-eyebrow{font-size:11px;line-height:1.5;letter-spacing:.08em;margin:0 0 14px}
#hero-stage .scene-actions{margin-top:20px;gap:12px 20px}
#hero-stage .scene-actions .scene-cta{min-height:44px;font-size:15px;padding:10px 16px;gap:24px}
#hero-stage .scene-secondary{min-height:44px;font-size:15px}
#hero-stage .hero-service-note{font-size:13px;line-height:1.45;margin-top:15px;max-width:none}
#hero-stage .scene-model-zone{grid-area:models;position:relative;min-width:0;min-height:0;overflow:hidden;--model-note-space:28px}
#hero-stage #product-canvas{position:absolute;inset:0 0 var(--model-note-space);width:100%;height:calc(100% - var(--model-note-space));display:block}
#hero-stage .scene-fallback{position:absolute;inset:0 0 var(--model-note-space);width:100%;height:auto;display:flex;align-items:center;justify-content:center;padding:0;perspective:none;background:none;overflow:hidden;box-sizing:border-box;transition:none}
#hero-stage .scene-fallback img,#hero-stage .scene-fallback img:first-child,#hero-stage .scene-fallback img:last-child{position:static;inset:auto;display:block;width:100%;height:100%;max-width:none;max-height:100%;object-fit:contain;transform:none!important;rotate:0!important;filter:none;mix-blend-mode:normal;will-change:auto}
#hero-stage #product-canvas{transition:none}
#hero-stage .scene-illustration-note{position:absolute;inset:auto 0 0;display:block;font-size:10px;line-height:1.3;max-width:none;margin:0;text-align:center;color:#a5b09a}
#hero-stage .scene-product-label{display:none}
#hero-stage .scene-loading{inset:auto auto calc(var(--model-note-space) + 12px) 50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:8px 12px;border:1px solid #a5b09a40;border-radius:999px;background:#0d100de6;font-size:11px;line-height:1.3;text-align:center;pointer-events:none}
#hero-stage .experience-bottom{grid-area:controls;position:relative;inset:auto;width:100%;height:100%;min-height:0;margin:0;gap:18px;align-self:end}
#hero-stage .scene-navigation{flex:none;width:auto;gap:clamp(8px,1.5vw,24px);min-width:0}
#hero-stage .scene-skip{margin-right:58px}
#hero-stage .scene-navigation button{height:44px;min-height:44px;padding:4px 0;gap:4px;line-height:1.2;justify-content:center;box-sizing:border-box}
#hero-stage[data-hero-layout="stack"]{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr) 56px;grid-template-areas:"copy" "models" "controls";row-gap:14px;padding-inline:clamp(16px,5vw,42px)}
#hero-stage[data-hero-layout="stack"] .scene-chapters{align-self:start}
#hero-stage[data-hero-layout="stack"] .scene-chapter h1{font-size:clamp(32px,6.8vw,58px);line-height:1.04;margin-bottom:14px}
#hero-stage[data-hero-layout="stack"] .scene-chapter h2{font-size:clamp(27px,4.8vw,40px);line-height:1.06;margin-bottom:12px}
#hero-stage[data-hero-layout="stack"] .scene-chapter h2 br{display:none}
#hero-stage[data-hero-layout="stack"] .scene-eyebrow{font-size:10px;margin-bottom:10px}
#hero-stage[data-hero-layout="stack"] .scene-description{max-width:540px;font-size:15px;line-height:1.45}
#hero-stage[data-hero-layout="stack"] .scene-actions{margin-top:14px;gap:8px 18px}
#hero-stage[data-hero-layout="stack"] .hero-service-note{font-size:12px;margin-top:10px}
#hero-stage[data-hero-layout="stack"] .ingredient-story{max-width:none;padding-top:10px}
#hero-stage[data-hero-layout="stack"] .ingredient-story-top{font-size:10px}
#hero-stage[data-hero-layout="stack"] .ingredient-story-top [data-beat-amount]{font-size:12px}
#hero-stage[data-hero-layout="stack"] .ingredient-story h3{font-size:25px;margin:9px 0 6px}
#hero-stage[data-hero-layout="stack"] .ingredient-benefit{font-size:15px;line-height:1.35;margin-bottom:5px}
#hero-stage[data-hero-layout="stack"] .ingredient-explanation{font-size:14px;line-height:1.4;min-height:0;max-width:540px}
#hero-stage[data-hero-layout="stack"] .ingredient-steps{margin-top:6px;gap:10px}
#hero-stage[data-hero-layout="stack"] .ingredient-steps button{min-height:34px;gap:5px}
#hero-stage[data-hero-layout="stack"] .ingredient-cue{display:none}
#hero-stage[data-hero-layout="stack"] .scene-formula .scene-text-button{font-size:13px;min-height:34px;margin-top:5px}
#hero-stage[data-hero-layout="stack"] .scene-model-zone{--model-note-space:24px}
#hero-stage[data-hero-layout="stack"] .scene-illustration-note{font-size:9px}
#hero-stage[data-hero-layout="stack"] .scene-navigation button{font-size:0;min-width:32px;min-height:44px;align-items:center;justify-content:center;gap:0}
#hero-stage[data-hero-layout="stack"] .scene-navigation button span{font-size:14px}
#hero-stage[data-hero-layout="stack"] .scene-skip{display:none}
#hero-stage[data-hero-layout="stack"] .scroll-invitation{font-size:9px;line-height:1.35}
@media(max-height:650px){#hero-stage .hero-service-note{display:none}#hero-stage[data-hero-layout="stack"] .scene-intro .scene-secondary{display:none}#hero-stage[data-hero-layout="stack"] .scene-formula .scene-text-button{display:none}#hero-stage[data-hero-layout="stack"]{row-gap:10px;grid-template-rows:max-content minmax(0,1fr) 48px}#hero-stage[data-hero-layout="stack"] .scene-chapter h1{font-size:32px;margin-bottom:10px}#hero-stage[data-hero-layout="stack"] .scene-eyebrow{margin-bottom:8px}#hero-stage[data-hero-layout="stack"] .scene-actions{margin-top:10px}#hero-stage[data-hero-layout="stack"] .scene-model-zone{--model-note-space:20px}#hero-stage .scene-illustration-note{font-size:9px}}
@media(max-height:500px){#hero-stage[data-hero-layout="columns"]{grid-template-rows:minmax(0,1fr) 44px;row-gap:6px;column-gap:20px}#hero-stage[data-hero-layout="columns"] .scene-chapter h1{font-size:32px;margin-bottom:10px}#hero-stage[data-hero-layout="columns"] .scene-chapter h2{font-size:27px;margin-bottom:10px}#hero-stage[data-hero-layout="columns"] .scene-eyebrow{font-size:10px;margin-bottom:8px}#hero-stage[data-hero-layout="columns"] .scene-description{font-size:14px;line-height:1.35}#hero-stage[data-hero-layout="columns"] .scene-actions{margin-top:10px}#hero-stage[data-hero-layout="columns"] .scene-secondary,#hero-stage[data-hero-layout="columns"] .hero-service-note,#hero-stage[data-hero-layout="columns"] .ingredient-cue,#hero-stage[data-hero-layout="columns"] .scene-text-button{display:none}#hero-stage[data-hero-layout="columns"] .ingredient-story{padding-top:8px}#hero-stage[data-hero-layout="columns"] .ingredient-story h3{font-size:24px;margin:7px 0 5px}#hero-stage[data-hero-layout="columns"] .ingredient-benefit{font-size:14px;margin-bottom:4px}#hero-stage[data-hero-layout="columns"] .ingredient-explanation{font-size:13px;line-height:1.35;min-height:0}#hero-stage[data-hero-layout="columns"] .ingredient-steps{margin-top:4px}#hero-stage[data-hero-layout="columns"] .ingredient-steps button{min-height:30px;gap:4px}#hero-stage[data-hero-layout="columns"] .scene-model-zone{--model-note-space:0px}#hero-stage[data-hero-layout="columns"] .scene-illustration-note{display:none}#hero-stage[data-hero-layout="columns"] .scene-navigation button{font-size:0;min-height:38px}#hero-stage[data-hero-layout="columns"] .scene-skip{display:none}}
@media(prefers-reduced-motion:reduce){#hero-stage{height:100svh;min-height:0}#hero-stage .scene-model-zone{--model-note-space:0px}#hero-stage .scene-illustration-note{display:none}}
/* A safe first paint and no-script layout before the measured mode is available. */
#hero-stage:not([data-hero-layout]) .scene-fallback{padding:0}
@media(max-width:959px){#hero-stage:not([data-hero-layout]){height:auto;min-height:100svh;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(220px,1fr) 56px;grid-template-areas:"copy" "models" "controls";row-gap:12px}#hero-stage:not([data-hero-layout]) .scene-chapter h1{font-size:clamp(32px,6.8vw,58px)}#hero-stage:not([data-hero-layout]) .hero-service-note{display:none}}
@media(min-width:600px) and (min-aspect-ratio:13/10){#hero-stage:not([data-hero-layout]){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);grid-template-rows:minmax(220px,1fr) 56px;grid-template-areas:"copy models" "controls controls"}}
@media(max-height:500px){#hero-stage[data-hero-layout="columns"] .scene-navigation{flex:none;width:auto;gap:8px}#hero-stage[data-hero-layout="columns"] .scene-navigation button{flex:none;width:35px;height:44px;min-width:35px;min-height:44px;padding:4px 0;gap:0;font-size:0;line-height:1;align-items:center;justify-content:center}#hero-stage[data-hero-layout="columns"] .scene-navigation button span{font-size:14px;line-height:1}#hero-stage[data-hero-layout="columns"] .scene-navigation button.active span::after{content:none}}

/* Long stories scroll within their row instead of covering the scene controls. */
#hero-stage .scene-chapters {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  pointer-events: auto;
  scrollbar-width: thin;
  scrollbar-color: #a7b694 #ffffff12;
  scroll-padding-block: 4px;
}
#hero-stage .scene-chapters:focus-visible {
  outline: 2px solid #d9e3c7;
  outline-offset: -2px;
}
#hero-stage[data-hero-layout="stack"] {
  --hero-stack-controls: 56px;
  --hero-stack-gap: 14px;
  --hero-model-min: 100px;
  grid-template-rows: max-content minmax(var(--hero-model-min), 1fr) var(--hero-stack-controls);
  row-gap: var(--hero-stack-gap);
}
#hero-stage[data-hero-layout="stack"] .scene-chapters {
  max-height: max(0px, calc(var(--hero-stage-height, 100svh) - var(--hero-header-space) - var(--hero-model-min) - var(--hero-stack-controls) - var(--hero-stack-gap) - var(--hero-stack-gap)));
}
@media (max-height: 650px) {
  #hero-stage[data-hero-layout="stack"] {
    --hero-stack-controls: 48px;
    --hero-stack-gap: 10px;
  }
}
@media (max-width: 360px) and (max-height: 600px) {
  #hero-stage[data-hero-layout="stack"] { --hero-model-min: 80px; }
}