/* Shared refinements: readable, responsive layouts and restrained motion. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1)}
main{min-width:0}
h1,h2,h3{overflow-wrap:break-word;text-wrap:balance}
.topic-hero:before{inset:-30px 0}
.format-card,.format-preview,.format-grid>*{min-width:0}
.format-preview{flex-wrap:wrap}
.example-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.example-visual{width:100%;flex:none}
.example-body{flex:1}
.hero-note,.breadcrumbs,.topic-hero-art figcaption,.topic-page .closing .source-note,.edit-example small{color:#9aa3b1}
.source-credit{color:#aab8ce}
.prompt-formula b{color:#a4aab5}
.topic-related>img,.scenario-image img{object-fit:contain}
.scenario-card:hover .scenario-image img{transform:none}
.topic-related>img{background:#202329}
.topic-nav a,.expanded-footer nav a{min-height:44px;display:flex;align-items:center}
.copy-button,.filter,.text-button{min-height:44px}
.arrows button{min-height:44px;min-width:62px}
.dialog-head button,.image-close,.motion-frame.playing .motion-play{width:44px;height:44px}
.dialog-head{position:sticky;top:0;background:#202226;z-index:2}
.dots{gap:0}
.dots button,.dots button.active{position:relative;width:32px;height:44px;background:transparent;border-radius:7px;transition:none}
.dots button:before{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:10px;background:#707b8d;transform:translate(-50%,-50%);transition:width .2s var(--ease-out),background .2s}
.dots button.active:before{width:22px;background:var(--blue)}
.demo-stage.playing .demo-play{opacity:1;pointer-events:auto;left:auto;top:auto;right:16px;bottom:16px;width:44px;height:44px;transform:none;z-index:2}
.demo-stage.playing .demo-play span{font-size:17px;margin:0}
.video-caption{pointer-events:none}
.copy-fallback{width:100%;min-height:100px;margin-top:12px;padding:12px;background:#11151a;color:#fff;border:1px solid #8babdb;border-radius:6px;font:inherit}
.button,.copy-button,.filter,.example-card,.topic-related,.scenario-card,.structure-card,.prompt-card{transition:transform .25s var(--ease-out),border-color .25s,background-color .25s,box-shadow .25s}
.button.primary{min-width:140px;position:relative;isolation:isolate;overflow:hidden}
.button.primary:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,#fff9 50%,transparent 80%);transform:translateX(-125%);pointer-events:none;z-index:-1}
.button.primary:active{transform:translateY(1px)}
.floating-label{animation:none}
.hero-inner{animation:hero-arrive .55s var(--ease-out) both}
@keyframes hero-arrive{from{transform:translateY(10px)}to{transform:none}}
dialog[open]{animation:dialog-enter .25s var(--ease-out)}
dialog[open]::backdrop{animation:backdrop-enter .2s ease-out}
@keyframes dialog-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(hover:hover) and (pointer:fine){
  .button.primary:hover{transform:translateY(-3px);box-shadow:0 7px 22px #0003}
  .button.primary:hover:after{transform:translateX(125%);transition:transform .6s var(--ease-out)}
  .scenario-card:hover,.structure-card:hover,.prompt-card:hover{transform:translateY(-4px);border-color:#7d90aa}
  .example-card:hover,.topic-related:hover{transform:translateY(-4px)}
}
@media(max-width:1000px) and (min-width:701px){
  .topic-hero{gap:32px;grid-template-columns:1.1fr .9fr}
  .topic-hero h1{font-size:clamp(38px,5.4vw,51px)}
  .topic-tagline{font-size:25px}
  .topic-actions{gap:16px}
  .scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scenario-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .scenario-card:last-child .scenario-image{height:260px}
}
@media(max-width:700px){
  .topic-page .topic-hero h1{font-size:clamp(36px,10.3vw,44px)}
  .closing h2,.topic-page .closing h2{font-size:clamp(32px,9vw,44px)}
  .topic-page .section-heading h2,.guide-heading h2{font-size:clamp(27px,8vw,32px)}
  .topic-hero-art>.image-open,.topic-ai-social-posts .topic-hero-art>.image-open,.topic-carousel-templates .topic-hero-art>.image-open{transform:none}
  .topic-nav{flex-wrap:wrap;gap:0 20px;overflow:visible}
  .topic-hero-art figcaption{font-size:12px}
  .scenario-image{height:auto;aspect-ratio:4/3}
  .topic-ai-social-posts .scenario-image,.topic-carousel-templates .scenario-image{height:auto;aspect-ratio:4/5}
  .demo-stage{aspect-ratio:16/9}
  .demo-stage video{object-fit:contain}
  .video-caption{display:none}
  .demo-bottom{gap:12px;flex-wrap:wrap}
  .story-visual{height:auto;aspect-ratio:3/4;padding:26px}
  .story-visual img{max-width:100%;width:100%;height:100%;object-fit:contain;transform:none}
  .floating-label{left:10px;bottom:18px;max-width:calc(100% - 20px);font-size:10px}
  .expanded-footer nav a{font-size:13px}
  .image-dialog-head{position:sticky;top:0;background:#191c21;z-index:1}
}
@media(max-width:480px){
  .examples-grid{grid-template-columns:minmax(0,1fr)}
  .example-body{padding:22px}
  .example-body h3{font-size:22px}
  .example-body p{font-size:14px}
  .example-category{font-size:10px}
  .format-preview{padding:14px;gap:15px}
  .format-card{padding:20px}
  .carousel-panel{padding-inline:10px}
  .dots button,.dots button.active{width:27px}
  .arrows button{min-width:52px;padding-inline:8px}
  .carousel-controls{gap:6px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.js-motion .reveal{opacity:1!important;transform:none!important}
  .button:hover,.example-card:hover,.scenario-card:hover,.prompt-card:hover,.structure-card:hover,.topic-related:hover{transform:none!important}
}