:root{--ease-out:cubic-bezier(.22,1,.36,1);--studio-ink:#203b2b;--studio-line:#dce2d6;--warm-paper:#f4f3ed;--sage:#c9d7c0}html{scroll-padding-top:24px}[hidden]{display:none!important}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #41ad83;outline-offset:5px}button:disabled{cursor:default}.showcase-intro{padding-top:24px;padding-bottom:40px}.showcase-intro .breadcrumbs{margin-bottom:44px}.hero-title-block{position:relative}.hero-title-block>.eyebrow{margin:0 0 24px;font-size:12px}.showcase-title{font-size:clamp(64px,6.9vw,100px);line-height:.98;letter-spacing:-.065em;margin:0;max-width:1060px;font-weight:400}.showcase-title span{display:block}.showcase-title span+span{color:#b9efcd}.hero-bottom{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-top:32px}.hero-bottom .product-copy{font-size:17px;line-height:1.65;max-width:500px;margin:0;color:var(--fg-soft)}.play-slot{flex-shrink:0;min-height:56px;min-width:246px}.tour-button{border:1px solid #b9efcd;background:#b9efcd;color:#133a29;border-radius:12px;min-height:56px;padding:16px 24px;font:500 14px/1.5 var(--display);display:inline-flex;align-items:center;gap:12px;cursor:pointer;box-shadow:0 2px 0 #fff2 inset;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}.tour-button svg{width:20px;height:20px;fill:currentColor;stroke:none}.tour-button:hover{background:#d4f7df;transform:translateY(-2px);box-shadow:0 8px 24px #0002}.tour-button:active{transform:translateY(0) scale(.98)}.tour-active .tour-button{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;box-shadow:0 8px 48px #0004;background:#143b2b;color:white;border-color:#56745b}.showcase-zone{padding:0 24px}.stage-wrap{max-width:1232px;margin:auto;border-radius:16px;background:#c9d7c0;box-shadow:0 32px 64px #0003;color:#193c2c;overflow:hidden}.stage-top{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;gap:24px;border-bottom:1px solid #9eb09966}.stage-title{display:flex;align-items:center;gap:12px;font-size:13px}.square-mark{display:grid;place-items:center;width:28px;height:28px;border:1px solid #78947e;border-radius:6px;font-size:20px}.device-controls{display:flex;gap:4px;padding:4px;background:#b6c7ae;border-radius:10px}.device-controls button{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#38563e;padding:8px 12px;border-radius:7px;font-size:12px;min-height:40px;cursor:pointer}.device-controls button[aria-pressed=true]{background:#f8faf3;color:#173b2a;box-shadow:0 2px 4px #28462c18}.device-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}.stage-surface{position:relative;padding:40px 64px 32px;background:radial-gradient(ellipse at 50% 70%,#edf2df 0%,#d7e2cc 42%,#c9d7c0 78%);min-width:0}.live-shell{container-type:inline-size;width:100%;max-width:1080px;margin:auto;position:relative;box-shadow:0 20px 36px #31482d24,0 3px 8px #31482d15;border-radius:12px;overflow:hidden;background:#fffef9;color:#203b2b;transition:width .65s var(--ease-out),border-radius .65s var(--ease-out)}.live-shell.is-mobile{width:390px;border:6px solid #213c2d;border-radius:28px;max-height:800px;overflow:auto;scrollbar-width:thin}.studio{color:#203b2b}.studio-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 32px;border-bottom:1px solid var(--studio-line);font:12px/1.5 var(--display);letter-spacing:.07em}.studio-head strong{font-weight:600}.studio-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:36px;align-items:start}.studio-grid figure{margin:0;min-width:0;align-self:stretch;position:relative}.studio-grid img{width:100%;height:100%;min-height:340px;max-height:560px;object-fit:cover;border-radius:6px;display:block}.studio-grid figcaption{position:absolute;left:20px;bottom:20px;margin:0;background:#fffef9e8;color:#314c35;padding:8px 12px;font-size:12px;border-radius:6px;backdrop-filter:blur(8px)}.studio h2{font:400 clamp(28px,3.1vw,42px)/1.08 var(--display);letter-spacing:-.045em;margin:8px 0 20px;color:#203b2b}.studio p{font-size:15px;line-height:1.7;color:#51634f;margin:0 0 20px}.studio h3{font:500 22px/1.3 var(--display);margin:0 0 16px;letter-spacing:-.025em;color:#25452e}.studio h3:focus{outline:none}.studio ul{padding:0;margin:16px 0 24px;list-style:none;font-size:14px;line-height:1.7}.studio li{padding:12px 0;border-top:1px solid #dce2d6}.studio li:before{content:'↳';margin-right:12px;color:#527857}.studio [data-hm-control]{margin:24px 0 0}.studio button.hm-show-more__button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;font:500 14px/1.4 var(--display);min-height:48px;padding:14px 20px;border-radius:8px;border:1px solid #a0b49a;background:#e9f0df;color:#25462d;text-decoration:none;cursor:pointer;transition:background .18s,box-shadow .18s}.studio button.hm-show-more__button:hover{background:#d5e5c4;box-shadow:0 4px 12px #244c2b15}.demo-plus{font-size:20px;line-height:1}.studio .studio-foot{border-top:1px solid var(--studio-line);font-size:12px;line-height:1.5;padding:16px 32px;margin:0;color:#5b6c55}.studio.is-open [data-hm-control]{display:none}.studio.is-open [data-hm-content]{margin-top:24px}.studio [data-hm-close-control]{margin-bottom:0}.studio [data-hm-close]{background:transparent!important}.demo-cursor{position:absolute;width:32px;height:40px;top:0;left:0;z-index:2;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 3px #0003)}.demo-cursor svg{width:100%;height:100%;fill:#183c2a;stroke:#fff;stroke-width:2}.scene-controls{padding:0 32px 24px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px 24px}.scene-steps{display:flex;gap:4px}.scene-steps button{border:0;border-bottom:1px solid transparent;background:none;color:#546e52;min-height:44px;padding:8px 12px;cursor:pointer;font:13px/1.5 var(--display)}.scene-steps button>span{font:12px var(--mono);margin-right:8px}.scene-steps button[aria-pressed=true]{color:#123b26;border-color:#2b5e37}.scene-steps button:hover{color:#123b26;background:#ffffff40;border-radius:6px}.scene-caption{font-size:12px;line-height:1.6;margin:0;color:#436043;text-align:right;max-width:280px}.tour-progress{grid-column:1/-1;height:2px;background:#92ab8b55;overflow:hidden}.tour-progress>span{display:block;height:100%;width:100%;background:#436f44;transform:scaleX(0);transform-origin:left}.product-meta{display:flex;gap:24px;align-items:center;justify-content:space-between;padding-top:28px;padding-bottom:56px;font:12px/1.5 var(--mono);color:var(--fg-soft)}.product-meta>a{text-decoration:none}.product-meta>a:hover{text-decoration:underline}.paper{background:#f5f5ef}.product-paper{padding-top:80px}.motion-explain{display:grid;grid-template-columns:1.2fr 1fr;gap:0 80px;align-items:center;margin:0 0 80px}.motion-explain>.eyebrow{grid-column:1/-1;margin-bottom:24px}.motion-explain h2{font-size:48px;line-height:1.08;margin:0;grid-row:2/4;letter-spacing:-.045em}.motion-explain>p:not(.eyebrow){font-size:16px;margin:0 0 16px}.motion-explain .text-link{align-self:start}.workflow{border-top:1px solid #cdd9cc;padding:64px 0 72px}.workflow-intro{display:grid;grid-template-columns:1.2fr 1fr;column-gap:80px;align-items:end;margin-bottom:32px}.workflow-intro .eyebrow{grid-column:1/-1}.workflow h2{font-size:40px;line-height:1.12;letter-spacing:-.04em;margin:0}.workflow-intro>p:not(.eyebrow){font-size:15px;max-width:360px;margin:0}.workflow-layout{display:flex;flex-direction:column;gap:24px}.workflow-steps{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:0;background:#e5ebe1;border-radius:12px;padding:6px}.workflow-step{display:flex;gap:16px;text-align:left;font:14px/1.5 var(--display);background:transparent;border:0;border-radius:8px;color:#3e5941;padding:20px;cursor:pointer;transition:background .2s,box-shadow .2s}.workflow-step>span:first-child{font:12px/1.8 var(--mono);color:#71836b}.workflow-step>span:nth-child(2){flex:1}.workflow-step strong{display:block;font-size:16px;font-weight:500}.workflow-step small{display:block;font:13px/1.5 var(--sans);margin-top:8px;color:#5f705b}.workflow-step[aria-pressed=true]{background:#fffef9;box-shadow:0 2px 6px #24442216}.workflow-step:hover{background:#f6f7ef}.workflow-captures{background:#e5ebe1;border-radius:16px;padding:32px;width:100%;min-width:0;position:relative}.workflow-captures.is-enhanced{display:grid}.workflow-captures figure{margin:0;grid-area:2/1;max-width:100%;overflow:hidden}.workflow-captures .photo img{max-height:640px;border:1px solid #c4d1be;border-radius:8px;background:#fffef9;box-shadow:0 10px 28px #29432915}.workflow-captures .photo figcaption{color:#52694e;padding-top:20px;font-size:12px}.workflow-description{grid-area:1/1;margin:0 0 24px;font-size:14px;color:#415d3c}.workflow-description:empty{display:none}.zoomable>a{cursor:zoom-in;display:block;position:relative}.zoomable>a:after{content:'↗';position:absolute;right:16px;bottom:16px;width:36px;height:36px;background:#fff;color:#294731;border:1px solid #b9cdb0;border-radius:8px;display:grid;place-items:center;box-shadow:0 2px 8px #0001;transition:transform .2s}.zoomable>a:hover:after{transform:scale(1.1)}.refined-features{grid-template-columns:1fr 1fr;gap:48px 64px;border-top:1px solid #cdd9cc;padding-top:56px;margin-bottom:64px}.refined-features>div:nth-child(-n+2){display:grid;grid-template-columns:100px 1fr;column-gap:24px}.refined-features h2{font-size:24px;letter-spacing:-.025em}.refined-features p{font-size:15px;line-height:1.7}.refined-features>div:nth-child(-n+2) h2{grid-column:2}.refined-features>div:nth-child(-n+2) p{grid-column:2}.feature-visual{grid-column:1;grid-row:1/3;align-self:start;width:100px;aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#e4ebde;color:#42623e;gap:8px}.type-visual>span:first-child{font:36px var(--display);letter-spacing:-.07em}.type-visual>span+span{font-size:24px;font-weight:300}.key-visual kbd{font:12px var(--display);background:#fffef9;box-shadow:0 3px 0 #b9c9b0;border:1px solid #cfdbca;border-radius:6px;padding:10px 6px}.mobile-proof{border-top:1px solid #cdd9cc;border-bottom:1px solid #cdd9cc;display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:32px 0;align-items:start}.mobile-proof h2{font-size:28px;margin:0 0 16px}.mobile-proof p{font-size:15px;max-width:480px}.mobile-proof summary{list-style:none;display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14px;padding:20px;border:1px solid #bdcdb6;border-radius:12px;background:#e6eddf;min-height:64px}.mobile-proof summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.mobile-proof summary>span:first-of-type{flex:1}.mobile-proof details[open] summary>span:last-child{transform:rotate(45deg)}.mobile-proof details .mobile-shot{margin:24px auto 0;max-width:260px}.status-note{margin-top:40px;background:#e5eddf;padding:32px}.status-note h2{font-size:28px}.status-note p{max-width:850px}.media-credit{margin:24px 0;font-size:12px;color:#5c7054}.image-dialog{position:fixed;inset:0;border:1px solid #b6c7ae;border-radius:16px;padding:16px;background:#f5f5ef;color:#203b2b;max-width:min(1280px,calc(100vw - 32px));width:fit-content;max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 32px 100px #0005}.image-dialog::backdrop{background:#04100ce6;backdrop-filter:blur(8px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:24px;position:sticky;top:-16px;background:#f5f5ef;z-index:1;padding:0 0 16px}.dialog-top p{font:12px var(--mono);margin:0}.dialog-top button{border:1px solid #a7b99e;border-radius:8px;padding:10px 16px;min-height:44px;background:#fff;color:#203b2b;cursor:pointer;font-size:14px;white-space:nowrap}.image-dialog>img{max-height:calc(100dvh - 160px);width:auto;max-width:100%;object-fit:contain;margin:auto;border:1px solid #d4dece;border-radius:8px}.dialog-caption{font-size:13px;margin:12px 0 0;max-width:800px}.image-dialog[open]{animation:dialog-in .3s var(--ease-out)}@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
/* Journal: photographic editorial composition. Text is unchanged. */
.photo-intro{padding-top:24px;padding-bottom:64px}.photo-intro>.wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:32px 64px;align-items:center}.photo-intro .breadcrumbs{grid-column:1/-1;margin:0}.intro-copy{display:block}.intro-copy h1{font-size:clamp(48px,5.6vw,80px);line-height:1.04;letter-spacing:-.055em;max-width:600px}.intro-copy .lede{font-size:17px;max-width:420px;margin:32px 0 0}.photo-intro .hero-photo{margin:0}.photo-intro .hero-photo img{height:540px;object-position:50% 70%;border-radius:12px}.photo-feature{gap:64px;align-items:center}.photo-feature .photo img{height:480px}.photo-feature h2{font-size:44px;letter-spacing:-.04em}.photo-feature .btn{border-radius:12px;min-height:48px}.image-story{margin-top:64px;padding-top:64px;gap:80px}.image-story h2{font-size:40px;letter-spacing:-.035em}.article-intro{padding-top:24px;padding-bottom:48px}.article-intro h1{font-size:clamp(40px,5.3vw,76px);line-height:1.06;letter-spacing:-.05em;max-width:1050px}.article-intro .lede{max-width:680px;font-size:18px}.article-hero{margin-top:40px}.article-hero img{height:480px}.article-grid{grid-template-columns:220px minmax(0,716px);gap:72px}.prose{font-size:17px;line-height:1.85}.prose h2{font-size:32px;line-height:1.2;letter-spacing:-.025em}.toc a{transition:color .2s}.toc a[aria-current=true]{color:#125c41;text-decoration:underline;text-underline-offset:5px}.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:60;background:transparent;pointer-events:none}.reading-progress span{display:block;width:100%;height:100%;background:#6bb695;transform:scaleX(0);transform-origin:left}.profile-photo-grid{grid-template-columns:1.2fr .8fr;gap:80px}.profile-photo-grid h1{font-size:clamp(48px,6vw,84px);letter-spacing:-.055em;line-height:1.04}.portrait-placeholder.portrait-large{min-height:460px;background:#d5dfce;border-color:#b4c4aa}.portrait-large>span{font-size:112px;letter-spacing:-.065em}.profile-article{max-width:760px}.photo{overflow:visible}.photo img{transition:filter .25s}.photo a:hover img{filter:brightness(1.025)}.image-story .photo img{border-radius:12px}.btn{transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}
html[data-theme=light] .showcase-title span+span{color:#256c4b}html[data-theme=light] .stage-wrap{box-shadow:0 24px 48px #213c2918}html[data-theme=light] .showcase-intro .tour-button{background:#173e2b;color:#f7fff7;border-color:#173e2b}
@container(max-width:500px){.studio-grid{grid-template-columns:1fr;padding:20px;gap:24px}.studio-grid img{height:176px;min-height:0;max-height:none}.studio-grid figcaption{display:none}.studio-head{padding:16px 20px}.studio h2{font-size:32px;margin-top:0}.studio h2 br{display:none}.studio p{font-size:14px}.studio .studio-foot{font-size:12px;padding:16px 20px}.studio ul{font-size:14px}.studio h3{font-size:22px}.studio [data-hm-control]{margin-top:20px}}
@media(max-width:1050px){.showcase-title{font-size:76px}.stage-surface{padding:32px}.studio-grid{gap:28px;padding:28px}.studio h2{font-size:32px}.studio-grid img{min-height:300px}.stage-wrap{max-width:100%}.stage-top{padding:16px 24px}.scene-controls{padding:0 24px 24px}.scene-caption{max-width:200px}.motion-explain{gap:0 40px}.motion-explain h2{font-size:40px}.workflow-intro{gap:24px}.workflow h2{font-size:36px}.workflow-step{padding:16px;gap:12px}.workflow-step small{font-size:12px}.photo-intro>.wrap{gap:32px}.intro-copy h1{font-size:58px}.photo-intro .hero-photo img{height:460px}.photo-feature h2{font-size:36px}.profile-photo-grid{gap:40px}.refined-features{gap:40px}.refined-features>div:nth-child(-n+2){grid-template-columns:1fr}.feature-visual{grid-row:auto;grid-column:1;margin-bottom:20px}.refined-features>div:nth-child(-n+2) h2,.refined-features>div:nth-child(-n+2) p{grid-column:1}}
@media(max-width:820px){.showcase-intro{padding-top:16px;padding-bottom:28px}.showcase-intro .breadcrumbs{margin-bottom:32px}.hero-title-block>.eyebrow{margin-bottom:20px}.showcase-title{font-size:clamp(46px,9vw,68px);letter-spacing:-.06em;line-height:1.02}.hero-bottom{display:block;margin-top:24px}.hero-bottom .product-copy{font-size:16px;max-width:520px}.play-slot{margin-top:24px}.showcase-zone{padding:0 16px}.stage-top{padding:16px}.stage-title{font-size:12px}.device-controls{display:none}.stage-surface{padding:0 12px 16px;background:#c9d7c0}.live-shell,.live-shell.is-mobile{width:100%;max-height:none;overflow:hidden;border:0;border-radius:12px}.studio-grid{padding:20px;gap:24px}.studio-grid img{min-height:0}.scene-controls{grid-template-columns:1fr;padding:0 16px 16px;gap:12px}.scene-steps{justify-content:space-between}.scene-steps button{padding:8px;font-size:12px}.scene-steps button>span{margin-right:4px;font-size:12px}.scene-caption{text-align:left;max-width:100%;font-size:12px;min-height:20px}.product-meta{padding:24px 24px 40px;flex-wrap:wrap;gap:12px;font-size:12px}.product-meta>a{margin-left:auto}.product-meta>span:first-child{display:none}.product-paper{padding-top:40px}.motion-explain{display:block;margin-bottom:40px}.motion-explain h2{font-size:34px;margin-bottom:24px}.motion-explain>p:not(.eyebrow){font-size:16px}.workflow{padding:40px 0}.workflow-intro{display:block;margin-bottom:24px}.workflow h2{font-size:32px;margin-bottom:24px}.workflow-intro>p:not(.eyebrow){max-width:520px}.workflow-step{display:block;padding:12px 8px}.workflow-step strong{font-size:12px;line-height:1.45}.workflow-step>span:first-child{display:block;margin-bottom:8px}.workflow-step small,.workflow-step>span:last-child{display:none}.workflow-captures{padding:16px;border-radius:12px}.workflow-captures .photo figcaption{padding-top:16px;line-height:1.7}.workflow-description{font-size:14px;min-height:66px;margin-bottom:20px}.workflow-layout{gap:16px}.workflow-steps{padding:4px}.zoomable>a:after{right:8px;bottom:8px;width:32px;height:32px}.refined-features{gap:32px;padding-top:32px;margin-bottom:40px}.refined-features h2{font-size:24px}.refined-features p{font-size:14px}.feature-visual{width:72px}.type-visual>span:first-child{font-size:28px}.key-visual{width:90px}.mobile-proof{grid-template-columns:1fr;gap:24px;padding:32px 0}.mobile-proof h2{font-size:28px}.mobile-proof .eyebrow{margin-bottom:12px}.mobile-proof p{font-size:14px}.mobile-proof details .mobile-shot{max-width:240px}.status-note{padding:24px;margin-top:32px}.status-note h2{font-size:24px}.status-note p{font-size:14px}.image-dialog{padding:12px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:12px}.dialog-top{gap:12px;top:-12px}.dialog-top p{font-size:12px;max-width:160px}.dialog-top button{padding:10px 12px}.image-dialog>img{max-height:calc(100dvh - 180px)}.dialog-caption{font-size:12px}.photo-intro{padding-top:16px;padding-bottom:40px}.photo-intro>.wrap{display:block}.photo-intro .breadcrumbs{margin-bottom:28px}.intro-copy h1{font-size:52px;max-width:460px;letter-spacing:-.055em}.intro-copy .lede{margin:24px 0 32px;font-size:16px;max-width:500px}.photo-intro .hero-photo img{height:340px;object-position:50% 75%}.photo-feature{gap:28px}.photo-feature .photo img{height:300px}.photo-feature h2{font-size:34px}.photo-feature .eyebrow{margin-bottom:20px}.image-story{margin-top:40px;padding-top:40px;gap:28px}.image-story h2{font-size:32px}.article-intro{padding-top:16px;padding-bottom:32px}.article-intro h1{font-size:42px;line-height:1.08}.article-intro .lede{font-size:17px}.article-hero img{height:300px}.article-grid{display:block}.prose h2{font-size:28px}.profile-photo-grid{display:block}.profile-photo-grid h1{font-size:56px}.profile-photo-grid .portrait-large{margin-top:32px;min-height:320px}.portrait-large>span{font-size:88px}}
@media(max-width:440px){.showcase-title{font-size:46px}.tour-button{padding:14px 20px;min-height:52px}.studio h2{font-size:30px}.refined-features{grid-template-columns:1fr}.refined-features>div:nth-child(-n+2){grid-template-columns:72px 1fr;gap:0 20px}.refined-features>div:nth-child(-n+2) h2,.refined-features>div:nth-child(-n+2) p{grid-column:2}.feature-visual{grid-column:1;grid-row:1/3;width:72px;margin:0}.key-visual{flex-direction:column;gap:8px;height:92px}.key-visual kbd{padding:5px 8px}.refined-features h2{font-size:22px}.stage-title .square-mark{width:24px;height:24px}.scene-steps button{padding:8px 4px}.photo-intro .hero-photo img{height:300px}.intro-copy h1{font-size:46px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Iteration 2: bring the product action into the first desktop viewport. */
@media(min-width:1051px){.showcase-intro{padding-top:12px;padding-bottom:32px}.showcase-intro .breadcrumbs{margin-bottom:24px}.hero-title-block>.eyebrow{margin-bottom:20px}.showcase-title{font-size:88px}.hero-bottom{margin-top:24px}.stage-top{padding:12px 28px}.stage-surface{padding:28px 56px 24px}.studio-head{padding:14px 28px}.studio-grid{padding:28px;gap:40px}.studio h2{font-size:36px;margin-top:0}.studio-grid img{min-height:300px}.showcase-intro .product-copy{max-width:490px}}.stage-wrap,.workflow-captures,.image-dialog{border-radius:12px}




/* Finish: the desktop mobile preview uses the same proportions as the real mobile layout. */
.live-shell.is-mobile .studio-grid{grid-template-columns:1fr;padding:20px;gap:24px}.live-shell.is-mobile .studio-grid img{min-height:0;height:176px;max-height:none}.live-shell.is-mobile .studio-head{padding:16px 20px}.live-shell.is-mobile .studio h2{font-size:30px;line-height:1.08;margin-top:0}.live-shell.is-mobile .studio p{font-size:14px}.live-shell.is-mobile .studio h2 br{display:none}.live-shell.is-mobile .studio-grid figcaption{display:none}
@media(max-width:820px){.tour-active .tour-button{left:auto;right:20px;bottom:20px;transform:none;min-width:52px;width:52px;height:52px;padding:14px;justify-content:center}.tour-active .tour-button span{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}}

/* Review gate: public header metrics match hypermedia.se; keep approved journal/language links. */
.public-header .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:40px 0 0;flex-wrap:nowrap}
.public-header .brand{font:700 22px/33px var(--display);gap:10px}.public-header .brand svg{width:26px;height:26px}
.public-header .nav{gap:28px;font-size:15px;line-height:22.5px}.public-header .nav a{padding:6px 0}
.header-controls{gap:16px}.language-link{font-size:13px}
.hero-bottom{display:block}.hero-bottom .product-copy{max-width:540px}.play-slot{margin-top:24px;min-width:0}
@media(max-width:820px){.public-header .topbar{gap:16px}.public-header .nav{display:none}.header-controls{gap:16px}.public-header .brand{font-size:22px;gap:10px}.public-header .brand svg{width:26px;height:26px}.language-link{font-size:13px}}
@media(max-width:360px){.public-header .topbar,.header-controls{gap:8px}.language-link{font-size:0}.language-link:after{font-size:12px}.language-link[lang=en]:after{content:'EN'}.language-link[lang=sv]:after{content:'SV'}}

/* Product settings share the stage's existing visual language. */
.animation-controls{display:flex;flex-wrap:wrap;align-items:end;gap:16px 24px;padding:24px 32px;border-top:1px solid #b4c2ac;background:#e5eddf;color:#203b2c}
.animation-controls[hidden],.animation-controls [hidden]{display:none!important}
.animation-controls label{display:grid;gap:8px;font-size:14px;font-weight:600}
.animation-controls select{font:inherit;color:#203b2c;background:#f8fbf5;border:1px solid #82977c;border-radius:8px;padding:10px 36px 10px 12px;min-height:44px}
.animation-controls select:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.animation-controls p{font-size:14px;line-height:1.5;margin:0;max-width:30ch;align-self:center}
.animation-controls code{flex-basis:100%;font-size:13px;line-height:1.6;overflow-wrap:anywhere;white-space:normal}
.animation-controls select:disabled{opacity:.5}
@media(max-width:600px){.animation-controls{padding:20px;gap:16px}.animation-controls label{flex:1 1 100%;min-width:0}.animation-controls select{width:100%;padding-right:20px}.animation-controls p{max-width:none}.animation-controls code{font-size:12px}}

/* Approved follow-ups: segmented choices on desktop, copyable shortcode. */
.animation-controls .segments{border:0;margin:0;padding:0;min-width:0;display:none}
.animation-controls .segments legend{font-size:14px;font-weight:600;padding:0;margin-bottom:8px}
.animation-controls .segments label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-weight:500;background:#f8fbf5;border:1px solid #82977c;margin-left:-1px;cursor:pointer;transition:background-color .2s,color .2s}
.animation-controls .segments label:first-of-type{border-radius:8px 0 0 8px;margin-left:0}.animation-controls .segments label:last-of-type{border-radius:0 8px 8px 0}
.animation-controls .segments input{position:absolute;opacity:0;pointer-events:none}
.animation-controls .segments label:has(:checked){background:#203b2c;color:#f8fbf5;border-color:#203b2c}
.animation-controls .segments label:hover:not(:has(:checked,:disabled)){background:#d5e2cd}
.animation-controls .segments label:has(:focus-visible){outline:2px solid #203b2c;outline-offset:2px;position:relative;z-index:1}
.animation-controls .segments label:has(:disabled){opacity:.5;cursor:default}
@media(min-width:601px){.animation-controls>label{display:none}.animation-controls .segments{display:block}}
.animation-controls .code-row{flex-basis:100%;display:flex;align-items:center;gap:12px;min-width:0}
.animation-controls .code-row code{flex:0 1 auto;min-width:0}
.copy-code{font:inherit;font-size:14px;font-weight:600;color:#203b2c;background:#f8fbf5;border:1px solid #82977c;border-radius:8px;min-height:44px;padding:0 16px;cursor:pointer;flex:none;transition:background-color .2s}
.copy-code:hover{background:#d5e2cd}.copy-code:focus-visible{outline:2px solid currentColor;outline-offset:3px}.copy-code.is-copied{background:#203b2c;color:#f8fbf5;border-color:#203b2c}
.copy-status{font-size:13px;flex:none;min-width:0}
@media(prefers-reduced-motion:reduce){.animation-controls .segments label,.copy-code{transition:none}}
@media(max-width:600px){.animation-controls .code-row{flex-wrap:wrap}}

/* Monogram until a real portrait exists: toned surface, no frame. */
.portrait-placeholder{border:0}
.portrait-placeholder.portrait-large{align-items:center;border:0}
.portrait-placeholder.portrait-large span{font:500 clamp(96px,14vw,168px)/1 var(--display);letter-spacing:-.04em;opacity:.85}