/* R83: an open editorial layout with original, correctly matched product scenes. */
html[data-theme] .design83{box-sizing:border-box;display:grid;grid-template-columns:.8fr 1.3fr;gap:28px 6%;width:min(1440px,90%);margin:clamp(60px,8vw,120px) auto;padding:clamp(28px,4vw,64px) 0;border-top:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);align-items:center}
.design83-intro{grid-column:1;grid-row:1;align-self:center;max-width:32rem}
html[data-theme] .design83 h2{font:500 clamp(30px,3.5vw,54px)/1.18 Lora,serif;letter-spacing:-.025em;margin:0 0 22px;color:var(--ui-fg)}
.design83-intro p{font:400 clamp(14px,1.15vw,17px)/1.8 Manrope,sans-serif;margin:0 0 28px;max-width:34ch;color:var(--ui-fg)}
.design83 figure{position:relative;margin:0;overflow:hidden;min-width:0}
.design83-primary{grid-column:2;grid-row:1 / span 2;align-self:start}
.design83-secondary{grid-column:1;grid-row:2;width:100%;max-width:440px}
.design83 figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;transition:transform 1.2s ease}
.design83 figcaption{font:500 12px/1.5 Manrope,sans-serif;letter-spacing:.05em;padding-top:12px;color:var(--ui-fg)}
/* The diagram performs a short introduction, then rests without a control. */
.flow82 :is(.flow82-dash,.flow82-fire,.flow82-liquid){animation-iteration-count:1;animation-duration:3s;animation-fill-mode:forwards}
.flow82-toolbar{justify-content:center;text-align:center}.flow82-toolbar>span{max-width:none}
@media(max-width:760px){html[data-theme] .design83{grid-template-columns:1fr 1fr;width:90%;gap:26px 14px;margin-block:56px}.design83-intro{grid-column:1 / -1;grid-row:1;max-width:none}.design83-intro p{max-width:45ch}.design83-primary{grid-column:1 / -1;grid-row:2}.design83-secondary{grid-column:2;grid-row:3;max-width:none}.design83-intro .btn{min-height:44px}.design83 figcaption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.flow82 :is(.flow82-dash,.flow82-fire,.flow82-liquid){animation:none}.design83 figure img{transition:none}}