/* Viewport layouts shared by every recorded story and design template. */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px;letter-spacing:0;flex-shrink:0}
.brand .brand-name{text-decoration:none;font:800 clamp(26px,3vw,38px)/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.5px}
.product-credit{font-size:12px;font-weight:600;letter-spacing:.1px;line-height:1.4;text-underline-offset:3px}
.brand .brand-product{display:inline-flex;align-items:baseline;gap:4px;border:1px solid currentColor;padding:5px 8px;text-decoration:none}
.product-credit strong{font-weight:700}
.product-credit:hover{text-decoration:underline}
.entry-footer .product-credit{font-size:11px;text-align:right;flex-shrink:0}
.entry-header .edition{margin-left:10px}
.footer-copy{min-width:0;max-width:min(65%,580px)}
.footer-top .footer-copy>p{max-width:none}
.mini-watt-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--ink);color:var(--paper);padding:15px 19px;margin-top:16px;min-height:50px;max-width:320px;font-size:14px;font-weight:700;text-decoration:none;pointer-events:auto}
.mini-watt-cta:hover{outline:1px solid var(--ink);outline-offset:4px}
.footer-top .mini-watt-details{max-width:none;margin:10px 0 0;font-size:10px;font-weight:500;line-height:1.5}
.story.transitioning #mini-watt-offer{visibility:hidden}
@media(max-width:599px){
 .entry-header .edition{display:none}
 .story-chrome header{gap:14px}
 .story-chrome .edition{font-size:8px;letter-spacing:.5px}
 .brand .brand-product{font-size:11px;padding:4px 6px;gap:3px}
 .entry-footer .product-credit{font-size:10px}
 .footer-copy{max-width:calc(100% - 64px)}
 .mini-watt-cta{font-size:12px;padding:12px 14px;min-height:46px;margin-top:12px}
 .footer-top .mini-watt-details{font-size:9px;margin-top:8px}
 .is-promotion .footer-top{align-items:flex-start}
 .is-promotion .advance{margin-top:0}
}
:root{--page-gutter:clamp(22px,4.5vw,88px)}
.story{height:100svh;min-height:560px}
.story-chrome{padding:calc(20px + env(safe-area-inset-top)) var(--page-gutter) calc(16px + env(safe-area-inset-bottom))}
.chapter-label{min-width:0;align-items:baseline}
#position{flex-shrink:0}
#chapter-name{overflow-wrap:anywhere}
.footer-top p{font-size:clamp(12px,1.15vw,18px);max-width:min(65%,580px)}
.footer-bottom{min-height:52px}
.text-button{min-height:44px}
.footer-actions{gap:clamp(14px,1.8vw,30px)}
.library-controls>*{min-height:44px}
.chapter-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:start}
.chapter-tile{min-width:0}
.chapter-tile span{font-size:12px}
.chapter-tile small{font-size:10px}
dialog{width:min(960px,calc(100% - 40px));max-width:960px;padding:clamp(22px,3vw,40px);max-height:calc(100svh - 40px);overscroll-behavior:contain}
.dialog-heading{gap:24px}
#chapters-dialog .dialog-heading{margin-bottom:24px}
#restart-onboarding,#recap-details{width:auto;min-height:44px;margin:0 8px 20px 0;padding:12px 16px}
#share-dialog{max-width:860px}
#share-preview{height:min(54svh,560px);max-width:100%;object-fit:contain}
.key-field input{font-size:16px}
.connect-layout>*{min-width:0}
.entry-header,.entry-footer{width:auto}
.entry-header{width:100%;max-width:1600px;margin-inline:auto;padding-left:clamp(22px,4.5vw,70px);padding-right:clamp(22px,4.5vw,70px)}
.entry-footer{width:min(calc(100% - 44px),1460px);margin-inline:auto}
.loading-screen{width:100%;max-width:1600px;margin:auto;min-height:580px;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.loading-copy h1{font-size:clamp(72px,9.3vw,148px)}
.loading-bottom{max-width:560px}
.loading-art{width:52%;right:0}
@media(min-width:900px){
 .story-chrome{padding-top:clamp(24px,3.3svh,40px);padding-bottom:clamp(16px,2.2svh,28px)}
 .progress{max-width:none;margin-top:20px;gap:6px}
 .chapter-label{margin-top:16px;font-size:11px}
 .brand{font-size:42px}
 .edition{font-size:11px}
 .footer-top{padding-bottom:20px}
 .advance{width:60px;height:60px}
 .demo-label{font-size:11px;max-width:none}
 .text-button{font-size:13px}
 .chapter-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
 #share-dialog{display:block;max-width:1000px}
 #share-dialog:not([open]){display:none}
 .share-layout{grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:36px}
 #share-preview{height:min(58svh,580px);width:100%;max-height:none}
 .share-preview-frame{padding:18px}
 .loading-screen{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;padding-top:26px;padding-bottom:24px;min-height:min(690px,calc(100svh - 150px))}
 .loading-copy{grid-column:1;align-self:center}
 .loading-art{height:100%;max-height:620px;top:0;width:52%}
 .loading-bottom{grid-column:1;padding-top:36px}
}
@media(min-width:900px) and (max-height:760px){
 .story-chrome{padding-top:18px;padding-bottom:12px}
 .progress{margin-top:12px}
 .chapter-label{margin-top:10px}
 .footer-top{padding-bottom:12px}
 .advance{width:48px;height:48px}
 .loading-copy h1{font-size:clamp(70px,10svh,100px);margin-top:22px}
 .loading-screen{min-height:510px}
 .entry-poster{min-height:560px;padding-top:18px}
 .entry-poster h1{font-size:clamp(88px,8.5vw,120px);margin-top:16px}
 .entry-description{font-size:12px;margin-top:16px}
 .entry-art{height:260px}
 .poster-footnote{padding-top:200px}
 .connect-panel{padding-top:18px;padding-bottom:22px}
 .connect-panel h2{font-size:60px;margin:18px 0 14px}
 .connect-intro{font-size:12px}
 .recap-period{margin-bottom:18px}
 .demo-divider{margin-top:16px}
 .recap-contents{padding-top:20px;padding-bottom:20px;margin-top:10px}
}
@media(min-width:600px) and (max-width:899px){
 .chapter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .connect-layout{max-width:760px}
 .entry-poster{max-width:640px;width:100%;justify-self:center}
 .loading-art{width:70%;right:-5%}
}
@media(max-width:599px){
 .story-chrome{padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .progress{margin-top:14px}
 .chapter-label{margin-top:12px;font-size:9px;gap:12px}
 .footer-top{gap:16px;padding-bottom:12px}
 .footer-top p{max-width:calc(100% - 66px);font-size:12px}
 .advance{width:48px;height:48px}
 .footer-bottom{gap:10px;min-height:50px}
 .footer-actions{gap:14px}
 .demo-label{max-width:110px;font-size:8px}
 dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px);padding:22px}
 .dialog-heading h2{font-size:clamp(32px,9vw,46px)}
 .chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
 #restart-onboarding,#recap-details{width:100%;margin:0 0 10px}
 .library-controls{margin-top:12px}
 .library-controls input{flex-basis:100%}
 #share-preview{height:min(30svh,260px);width:auto;max-width:100%}
 .share-colors{flex-wrap:wrap;gap:12px}
 .consent-actions{flex-direction:column}
 .consent-actions button{min-height:48px;margin-top:0}
 .loading-art{width:100%;right:-7%}
 .loading-bottom{max-width:none}
 .entry-footer{font-size:8px;line-height:1.6;letter-spacing:.3px}
}
@media(max-height:650px) and (max-width:599px){
 .story-chrome{padding-top:12px;padding-bottom:8px}
 .story-chrome header{gap:12px}
 .story-chrome .brand{font-size:30px}
 .story-chrome .edition{font-size:8px}
 .progress{margin-top:10px}
 .chapter-label{margin-top:9px}
 .footer-top p{font-size:11px}
 .footer-top{padding-bottom:10px}
 .footer-bottom{padding-top:3px;min-height:47px}
}