/* Phone layouts retain readable type, generous touch targets and room for browser chrome. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:820px){
  .workspace{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto;gap:24px}
  .preview-column{position:static;width:100%;max-width:none}
  .intro{max-width:520px;margin-inline:auto}.intro-note{display:none}
  input[type=text],textarea{font-size:16px}
}
@media(max-width:600px){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  main{padding-inline:16px}.site-header{height:72px;margin-inline:16px;gap:8px}
  .brand{font-size:18px;gap:6px;flex-shrink:0}.brand small{font-size:9px;letter-spacing:0}
  .brand>img{width:32px;height:36px}.site-header nav{gap:6px}
  .site-header #characters-button{display:none}
  .site-header .nav-button,.site-header nav .nav-button,.site-header .studio-link{font-size:12px;min-height:44px;padding:12px 5px;display:inline-flex;align-items:center;white-space:nowrap}
  .intro{margin-block:24px 22px}h1{font-size:clamp(32px,9.2vw,43px);line-height:1.2;letter-spacing:-.8px}
  .eyebrow{font-size:12px;letter-spacing:.2px;margin-bottom:10px}.intro-description{font-size:13px;line-height:1.8;margin-top:12px}
  .composer{border-radius:20px;padding:20px 16px}.form-section+.form-section{margin-top:23px}
  .section-heading{gap:7px;margin-bottom:15px}.section-heading h2{font-size:20px}
  .section-heading>.text-button{font-size:12px;min-height:44px;padding:10px 0}
  .step{width:23px;height:23px;font-size:10px;flex-shrink:0}
  .field-label{font-size:13px}.field-label>span{font-size:11px}
  input[type=text],textarea{font-size:16px;min-height:48px}.message-field textarea{height:116px;min-height:106px}
  .textarea-footer{font-size:11px;line-height:1.5;align-items:flex-start;padding:4px 10px 10px}
  .field-error{font-size:12px}.character-options{gap:7px}.character-option{padding:8px 3px 12px}
  .character-option img{width:clamp(64px,20vw,86px);height:clamp(68px,21vw,90px)}
  .character-option strong{font-size:16px}.character-option small{font-size:10px;white-space:normal;line-height:1.5;text-align:center}
  .duration-options{gap:7px}.duration-options button{min-height:65px;padding:10px 3px}
  .duration-options strong{font-size:20px}.duration-options small{font-size:10px;white-space:normal;text-align:center}
  .primary-button{min-height:52px;font-size:15px}.create-button{margin-top:24px}.composer-footnote{font-size:11px;line-height:1.7}
  .live-scene{min-height:0;height:clamp(270px,84vw,355px)}
  .preview-heading{font-size:12px;padding:17px 16px 0}.preview-count{font-size:10px}
  .scene-handnote{font-size:18px;left:17px;top:35px}.preview-bubble{font-size:14px}
  .preview-card-bottom p{font-size:13px}.preview-button{font-size:14px;min-height:48px}
  .preview-note p{font-size:12px}.small-friends{margin-top:12px}
  .editor-footer{font-size:11px;gap:4px 16px;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .editor-footer>a,.editor-footer>button{display:inline-flex;align-items:center;min-height:44px;font-size:11px}
  .editor-footer>span{flex-basis:100%;line-height:1.7}
  .modal{width:calc(100% - 20px);max-width:480px;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:14px 16px 20px;border-radius:20px;overscroll-behavior:contain;scroll-padding-block:16px}
  .modal-top{font-size:11px;margin-bottom:12px}.close-button{width:44px;height:44px;font-size:25px}
  .player-modal{padding:12px 12px 18px}.player-title h2,.player-modal .player-title h2{font-size:clamp(26px,7.5vw,32px)}
  .player-eyebrow,.player-description{font-size:12px}.player-description{margin-top:9px}
  .player-scene,.player-modal .player-scene{height:clamp(220px,38svh,330px);margin-top:14px;border-radius:18px}
  .scene-caption,.player-modal .scene-caption{font-size:13px;white-space:normal;text-align:center;width:max-content;line-height:1.5;padding:7px 11px}
  .player-controls{margin-top:14px}.progress-area{padding-inline:7px}.progress-label{font-size:12px}.progress-percent{font-size:11px}
  .skip-gift,.replay-gift{font-size:13px;min-height:44px;padding:10px 8px;margin-top:5px}
  .player-bottom-note{font-size:11px;margin-top:10px}.start-gift{width:100%;min-width:0}
  .gift-player.finished .player-scene{height:clamp(170px,27svh,215px)}
  .revealed-answer{padding:17px 16px 12px;margin-top:16px}.answer-text{font-size:23px;line-height:1.65}.answer-decoration{font-size:10px}
  .receiver-view{padding:18px 0 calc(24px + env(safe-area-inset-bottom))}.receiver-topline{font-size:10px;letter-spacing:1px;margin-bottom:16px}
  .receiver-create .text-button{min-height:44px;font-size:13px}
  .share-description,.share-status{font-size:13px}.share-actions{flex-wrap:wrap}.share-actions>button{min-width:115px;min-height:48px;font-size:14px}
  .share-url{font-size:16px!important}.share-bottom{font-size:12px;flex-wrap:wrap;gap:8px}.share-bottom a,.share-bottom .text-button{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  .info-modal p,.info-list{font-size:14px}.info-member p{font-size:12px}
  .studio-page{margin-top:24px;padding-inline:16px}.studio-intro{margin-bottom:20px}.studio-intro h1{font-size:clamp(28px,8vw,36px)}
  .studio-intro p{font-size:13px}.studio-intro>a{font-size:13px;min-height:44px;padding-block:12px;margin:0}
  .studio-layout{gap:16px}.studio-layout>section{grid-row:1}.studio-controls{padding:17px;gap:0 12px;grid-template-columns:minmax(0,1fr)}
  .studio-controls h2{font-size:22px;margin-bottom:12px}.studio-character{font-size:13px;padding:8px}
  .studio-character img{height:52px;width:50px}.studio-controls label{font-size:13px;margin-top:14px}
  .studio-controls select{font-size:16px;min-height:48px;width:100%;min-width:0}
  .studio-speed,.studio-timeline{height:44px;margin:0}.studio-controls .model-download{margin-top:12px;min-height:48px;font-size:13px;padding:14px 8px}
  .studio-file-note{font-size:11px;margin-bottom:0}.studio-stage{height:auto;aspect-ratio:1/1;min-height:270px;max-height:430px;border-radius:20px}
  .studio-stage img{width:75%;height:80%;margin:7% auto 0}.studio-badge{font-size:9px;left:14px;top:14px}.studio-drag-note{font-size:12px;bottom:12px}
  .studio-transport{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:10px}
  .studio-transport button{min-height:46px;font-size:13px}.studio-timeline{min-width:0;width:100%}.studio-time{font-size:12px;text-align:right}
  .studio-model-status,.studio-reference{font-size:12px}.studio-reference{line-height:1.9}
  .article,.article.narrow{padding-inline:18px;margin-top:26px}.article h1{font-size:clamp(29px,8.6vw,37px)}
  .article p,.article .lead{font-size:15px;line-height:1.9}.article h2{font-size:25px}.article section{margin-block:28px}
  .article-actions>a{min-height:44px;display:inline-flex;align-items:center;font-size:13px}
  .article-footer{gap:6px 18px;font-size:12px;padding-bottom:env(safe-area-inset-bottom)}.article-footer a{min-height:44px;display:inline-flex;align-items:center}
}
@media(max-width:350px){
  .site-header{margin-inline:12px}.brand{font-size:16px}.brand>img{width:27px}.site-header nav{gap:0}.site-header .nav-button,.site-header nav .nav-button{font-size:11px;padding-inline:4px}
  main{padding-inline:12px}.composer{padding-inline:13px}.section-heading h2{font-size:18px}.section-heading>.text-button{font-size:11px}
  .preview-heading{font-size:11px}.preview-count{font-size:9px}
}
@media(max-height:500px) and (orientation:landscape){
  .player-scene,.player-modal .player-scene{height:220px}.modal{max-height:calc(100dvh - 16px)}
}