.mobile-picker { display:none; }
.mobile-editor-section { display:contents; }
.mobile-editor-section > summary { display:none; }
.preview-tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 14px; }
.preview-tools button { min-height:44px; }
.expand-preview { margin-left:auto; }
.export-status { margin:12px 0 0; color:var(--brand-teal); font-size:.875rem; line-height:1.5; overflow-wrap:anywhere; }
.export-status:empty { display:none; }
.export-status.error { color:#9b2f22; }
.stage-frame { position:relative; width:calc(100% - 10px); aspect-ratio:16/9; box-sizing:content-box; border:5px solid var(--brand-ink); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.stage-frame > .stage { position:absolute; inset:0 auto auto 0; width:960px; height:540px; border:0; border-radius:0; box-shadow:none; transform-origin:top left; }
.preview-open { overflow:hidden; }
.preview-viewport { min-width:0; }
.large-preview.preview-zoomed .preview-viewport { overflow:auto; max-height:calc(100dvh - 60px); overscroll-behavior:contain; }
.large-preview.preview-zoomed .stage-frame,.large-preview.preview-zoomed .canvas-shell { width:var(--preview-zoom-width); max-width:none; margin:0; }
.large-preview { width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#f5f8f7; color:var(--brand-ink); overflow:auto; }
.large-preview-shell { display:block; width:100%; min-height:100%; background:#f5f8f7; }
.large-preview-shell:fullscreen { width:100vw; height:100dvh; overflow:auto; }
.large-preview::backdrop { background:#182024cc; }
.large-preview-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:none; margin:0; padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left)); }
.large-preview-bar > strong { margin-right:auto; }
.large-preview-bar button { min-height:44px; }
.large-preview .stage-wrap,.large-preview .preview-panel { max-width:none; border-radius:0; margin:auto; padding:0; border:0; }
.large-preview .stage-frame,.large-preview .canvas-shell { width:100%; min-width:0; margin-inline:auto; border:0; border-radius:0; box-shadow:none; }
.large-preview .stage-header,.large-preview .preview-heading { margin:0; padding:8px 16px; }
.large-preview .preview-tools,.large-preview .stage-actions,.large-preview .export-status,.large-preview .playback,.large-preview .export,.large-preview .duration-control,.large-preview .timeline { margin-left:16px; margin-right:16px; }
.large-preview .stage-header h2 { font-size:1.25rem; }
.large-preview .point-count,.large-preview .preview-heading .eyebrow { display:none; }
.large-preview .stage-actions { flex-direction:row; flex-wrap:wrap; align-items:center; }
.large-preview .export-actions { width:auto; }
.stage.png-export-stage { position:fixed!important; left:-10000px!important; top:0!important; width:960px!important; height:540px!important; max-width:none!important; min-width:0!important; border:0!important; border-radius:0!important; margin:0!important; aspect-ratio:16/9!important; transform:none!important; }
.mobile-chart-type { display:none; }
.custom-settings-body { display:contents; }
@media(max-width:900px) {
  .mobile-ui-ready .theme-table-wrap { display:none; }
  .mobile-ui-ready .mobile-picker { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .mobile-picker label { display:block; color:var(--brand-teal); font-size:.875rem; font-weight:700; }
  .mobile-picker select { display:block; width:100%; min-width:0; margin-top:6px; min-height:48px; padding:10px 36px 10px 12px; border:1px solid #99b9b8; border-radius:9px; background:var(--brand-white); color:var(--brand-ink); font:400 1rem var(--brand-ui-font); }
  .studio-page .theme-gallery { padding:20px 16px; }
  .studio-page .gallery-heading { margin-bottom:18px; gap:14px; }
  .studio-page .gallery-heading h1 { font-size:2rem; }
  .studio-page .gallery-heading .eyebrow { margin:0 0 8px; font-size:.75rem; }
  .studio-page .custom-entry p,.studio-page .custom-entry small { display:none; }
  .studio-page .custom-entry a { margin:0; padding:11px 14px; font-size:.875rem; min-height:44px; }
  .studio-page .stage-wrap { grid-row:1; padding:18px 16px; }
  .studio-page .controls { padding:16px; gap:14px; }
  .mobile-ui-ready .controls > div:first-child,.mobile-ui-ready .controls > section:first-of-type { display:none; }
  .mobile-editor-section { display:block; min-width:0; border:1px solid var(--brand-line); border-radius:12px; overflow:hidden; background:white; }
  .mobile-editor-section > summary { display:list-item; padding:16px; min-height:52px; color:var(--brand-teal); font-size:1rem; font-weight:800; cursor:pointer; }
  .mobile-editor-section > section { padding:0 16px 16px; }
  .mobile-editor-section > .ai-editor { padding:16px; border:0; border-top:3px solid var(--brand-gold); border-radius:0; }
  .mobile-editor-section .section-label { display:none; }
  .mobile-editor-section > summary:focus-visible { outline:3px solid var(--brand-teal); outline-offset:-4px; }
  .preview-tools #playButton { flex:1; min-height:48px; }
  .studio-page .stage-header { gap:12px; align-items:center; }
  .studio-page .stage-header h2 { font-size:1.5rem; overflow-wrap:anywhere; }
  .studio-page .stage-actions { gap:12px; font-size:.875rem; }
  .studio-page .export-actions { display:flex; flex-wrap:wrap; }
  .studio-page .export-actions button { min-height:48px; flex:1; font-size:.875rem; }
  .studio-page .ai-suggestions button,.studio-page .ai-undo,.custom-page .ideas button { min-height:44px; min-width:44px; padding:10px 12px; font-size:.875rem; }
  .studio-page .ai-apply { min-height:48px; font-size:1rem; }
  .studio-page .settings label,.studio-page .ai-feedback,.studio-page .point-count span { font-size:.875rem; }
  .studio-page .settings input:not([type=range]),.studio-page .ai-prompt,.custom-page textarea,.custom-page #data,.custom-page select { font-size:1rem; }
  .studio-page .duration-control input[type=range],.custom-page input[type=range] { min-height:32px; }
  .studio-page .chart-faq { padding:28px 16px; }
  .custom-page main { padding:24px 16px; }
  .custom-page .topbar .brand { flex:0 1 220px; }
  .custom-page .preview-panel,.custom-page .composer { min-width:0; }
  .custom-page .preview-panel { padding:16px; }
  .custom-page .preview-heading,.custom-page .export,.custom-page .section-heading { flex-wrap:wrap; }
  .custom-page .data-section,.custom-page .chat-section { padding:16px; }
  .custom-page button,.custom-page .file-button,.custom-page .type-options label { min-height:44px; }
  .custom-page .hint,.custom-page .feedback,.custom-page .csv-status,.custom-page .file-button,.custom-page .csv-review>label,.custom-page .type-options label { font-size:.875rem; }
  .custom-page .export>div { display:flex; flex-wrap:wrap; gap:8px; }
  .custom-page .intro { margin-bottom:18px; }
  .custom-page .intro h1 { font-size:2rem; }
  .custom-page .intro .eyebrow { font-size:.75rem; margin-bottom:8px; }
  .custom-page .lab { grid-template-columns:minmax(0,1fr); gap:16px; }
  .custom-mobile-ready .custom-page .composer { display:grid; gap:12px; border:0; border-radius:0; background:none; }
  .custom-mobile-ready .custom-page .chart-types { margin:0 0 16px; padding:0; border:0; }
  .custom-page .chart-types legend,.custom-page .type-options { display:none; }
  .custom-page .mobile-chart-type { display:block; font-size:.875rem; font-weight:700; color:var(--brand-teal); }
  .mobile-chart-type select { display:block; width:100%; min-width:0; min-height:48px; margin-top:6px; padding:10px 12px; border:1px solid #99b9b8; border-radius:9px; background:white; color:var(--brand-ink); font:400 1rem var(--brand-ui-font); }
  .custom-page .composer { grid-row:1; }
  .custom-page .preview-panel { display:flex; flex-direction:column; grid-row:2; }
  .custom-page .preview-heading { order:0; gap:8px; }
  .custom-page .creation-progress { order:1; }
  .custom-page .preview-tools { order:2; }
  .custom-page .preview-tools #play { flex:1; font-size:.875rem; min-height:48px; }
  .custom-page .preview-viewport { order:3; }
  .custom-page .export { order:4; margin-top:12px; padding-top:0; border:0; }
  .custom-page .export>p { display:none; }
  .custom-page .export>div { width:100%; }
  .custom-page .export button { flex:1; min-height:48px; }
  .custom-page .export-status { order:5; }
  .custom-page .custom-playback-settings { order:6; margin-top:14px; }
  .custom-page .custom-settings-body { display:block; padding:0 14px 14px; }
  .custom-page .data-details { order:7; padding:14px 0 0; }
  .custom-page #newChart { order:8; align-self:flex-start; margin-top:10px; }
  .custom-page .empty { min-height:0; padding:22px 16px; gap:12px; }
  .custom-page .empty-mark { display:none; }
  .custom-page .empty h3 { font-size:1.25rem; }
  .custom-page .mobile-editor-section .section-heading h2,.custom-page .mobile-editor-section .chat-section>h2 { display:none; }
  .custom-page .mobile-editor-section .section-heading { justify-content:flex-end; }
  .custom-page .mobile-editor-section .data-section { border:0; }
  .custom-page .messages { max-height:220px; font-size:1rem; }
  .custom-page .message small,.custom-page .creation-note,.custom-page .capabilities { font-size:.875rem; }
  .custom-page .playback button { font-size:.875rem; }
  .large-preview-bar { gap:8px; }
  .large-preview-bar > strong { display:none; }
  .large-preview-bar button { flex:1; }
  .large-preview .stage-wrap,.large-preview .preview-panel { padding:0; }
  .large-preview .preview-tools { margin-bottom:8px; }
  .large-preview .stage-actions { gap:8px; }
}
/* Landscape reserves the entire viewport for the chart, with overlay controls. */
@media(orientation:landscape) {
  .large-preview { overflow:hidden; background:#182024; }
  .large-preview-shell { position:relative; height:100%; min-height:100%; background:#182024; overflow:hidden; }
  .large-preview-shell:fullscreen { height:100dvh; }
  .large-preview .stage-wrap,.large-preview .preview-panel { position:absolute; inset:0; width:100%; height:100%; background:#182024; }
  .large-preview .stage-wrap > :not(.preview-viewport),.large-preview .preview-panel > :not(.preview-viewport) { display:none; }
  .large-preview .preview-viewport { display:grid; place-items:center; width:100%; height:100%; overflow:hidden; }
  .large-preview .stage-frame,.large-preview .canvas-shell { width:min(100vw,calc(100dvh * 16/9)); min-width:0; max-width:100%; max-height:100%; margin:0; }
  .large-preview .canvas-shell canvas { max-height:100dvh; object-fit:contain; }
  .large-preview .canvas-shell { width:min(100vw,calc(100dvh * var(--custom-chart-ratio,1.6))); }
  .large-preview .canvas-shell .empty { min-height:0; max-height:100dvh; padding:12px; gap:8px; }
  .large-preview-bar { position:absolute; z-index:5; inset:0 0 auto; justify-content:flex-end; gap:8px; padding-top:max(8px,env(safe-area-inset-top)); background:linear-gradient(#18202480,transparent); }
  .large-preview-bar > strong { display:none; }
  .large-preview-bar button { flex:0 0 auto; min-height:44px; padding:8px 12px; font-size:.875rem; background:#fff; color:var(--brand-teal); border:1px solid #99b9b8; border-radius:9px; box-shadow:0 2px 6px #18202433; }
  .large-preview-bar #playButton,.large-preview-bar #play { margin-right:auto; }
  .large-preview.preview-zoomed .preview-viewport { display:block; overflow:auto; max-height:100%; }
  .large-preview.preview-zoomed .stage-frame,.large-preview.preview-zoomed .canvas-shell { max-height:none; max-width:none; }
  .large-preview.preview-zoomed .canvas-shell canvas { max-height:none; }
}