@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/playfair-display-bold.ttf') format('truetype')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-regular.ttf') format('truetype')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-medium.ttf') format('truetype')}
:root{color-scheme:dark;--page-bg:#000;--surface:#181818;--panel:#242424;--control-bg:#2D2D2D;--selected:#203955;--ink:#F5F5F5;--muted:#B6B6B6;--border:#787878;--divider:#3C3C3C;--primary:#70B5FF;--primary-ink:#102337;--accent:#82BEFF;--art-outline:rgba(255,255,255,.1);--shadow:0 2px 6px #0003,0 12px 32px #0005;--ui-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
:root[data-theme="light"]{color-scheme:light;--page-bg:#F7F3EA;--surface:#ECECEC;--panel:#F8F8F8;--control-bg:#FFF;--selected:#E7F1FF;--ink:#222;--muted:#626262;--border:#898989;--divider:#DDD;--primary:#0265DC;--primary-ink:#FFF;--accent:#005CCC;--art-outline:rgba(0,0,0,.1);--shadow:0 2px 6px #0001,0 12px 32px #0002}
:root[data-theme="night"]{color-scheme:dark;--page-bg:#1D160F;--surface:#1D160F;--panel:#241B12;--control-bg:#2E2217;--selected:#43311E;--ink:#EFD4A4;--muted:#BFA580;--border:#92724E;--divider:#4B3825;--primary:#D9AD70;--primary-ink:#21180D;--accent:#E7BC82;--art-outline:rgba(255,255,255,.1);--shadow:0 2px 6px #0003,0 12px 32px #0005}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--surface);overflow:hidden;overscroll-behavior:none}
body,button,select,input,textarea{font-family:var(--ui-font)}
button,a,select,input{touch-action:manipulation}
button{font-size:13px;font-weight:600;letter-spacing:0;cursor:pointer;transition:border-color 150ms,color 150ms,background-color 150ms,transform 150ms}
button:disabled{cursor:wait;opacity:.5}
button:active:not(:disabled),a.pill:active{transform:scale(.96)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.mobile-only{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[data-tg="app"]{position:fixed;inset:0;background:var(--page-bg);color:var(--ink);cursor:text;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
[data-mode="poster"]:is([data-tool="type"],[data-tool="effects"]){--studio-top:76px}
@media(min-width:721px){[data-mode="poster"]:is([data-tool="type"],[data-tool="effects"]) [data-tg="panel"]{margin-top:72px;padding-top:24px}[data-mode="poster"]:is([data-tool="type"],[data-tool="effects"]) [data-tg="stage"]{padding-top:96px}[data-mode="poster"]:is([data-tool="type"],[data-tool="effects"]) [data-tg="pcanvas"]{width:min(100%,calc((100dvh - 184px)*var(--poster-aspect,1)));max-height:calc(100dvh - 184px)}}
#garden{position:absolute;inset:0;width:100%;height:100%;display:block}
#type-input{position:fixed;left:0;top:0;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;font-size:16px;color:transparent;background:transparent;caret-color:transparent;pointer-events:none}
.pill{background:var(--control-bg);border:1px solid var(--border);color:var(--ink);min-height:44px;padding:10px 14px;border-radius:8px;line-height:1.3}
@media(hover:hover){.pill:hover,.garden-card:hover,.motion-card:hover,.palette-card:hover{border-color:var(--accent);background-color:var(--selected)}}
.primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary);font-weight:700}
@media(hover:hover){.primary:hover{background:var(--primary);color:var(--primary-ink);border-color:var(--accent)}}
.app-header{position:absolute;inset:0 0 auto;z-index:7;min-height:calc(72px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 12px calc(24px + env(safe-area-inset-left));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-bottom:1px solid var(--divider);background:var(--panel);cursor:default}
.app-identity{display:flex;align-items:center;gap:24px;min-width:0}
.app-brand{display:inline-flex;align-items:baseline;gap:4px;font-size:22px;font-weight:750;letter-spacing:-1px;line-height:1}
.brand-dot{width:6px;height:6px;background:var(--accent);border-radius:2px}
.copy-wrap{position:relative;display:flex;align-items:center;gap:12px}
.copy-wrap .pill{min-height:36px;padding:7px 12px;font-size:12px}
[data-mode="poster"] .copy-wrap{display:none}
#copy-note{position:absolute;top:48px;left:0;width:190px;font-size:12px;color:var(--muted);max-width:220px;line-height:1.5}
.theme-switch,[data-tg="modes"]{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--surface)}
.theme-switch{justify-self:end}
[data-tg="modes"]{justify-self:center}
.theme-switch button,[data-tg="modes"] button{border:0;border-radius:8px;min-height:36px;min-width:44px;padding:8px 14px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;letter-spacing:0}
.theme-switch button[aria-pressed="true"]{background:var(--control-bg);color:var(--ink);box-shadow:0 1px 3px #0002}
[data-tg="modes"] button[aria-pressed="true"]{background:var(--selected);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
@media(hover:hover){.theme-switch button:hover:not(:disabled):not([aria-pressed="true"]),[data-tg="modes"] button:hover:not(:disabled):not([aria-pressed="true"]){background:var(--control-bg);color:var(--ink)}}
.garden-toolbar{position:absolute;top:calc(72px + env(safe-area-inset-top));left:0;right:0;z-index:6;min-height:56px;padding:6px 16px;display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:1px solid var(--divider);background:var(--panel);cursor:default}
.selector-pill{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--border);background:var(--control-bg);border-radius:8px;padding:0 11px;font-size:12px;color:var(--muted);white-space:nowrap}
.selector-pill:hover,.selector-pill:focus-within{border-color:var(--accent)}
.selector-pill select{background:var(--control-bg);color:var(--ink);border:0;font-size:13px;outline:none;cursor:pointer;max-width:145px;min-height:42px;padding:3px 1px;color-scheme:inherit}
.selector-pill select:disabled{opacity:.5;cursor:wait}
#visitors-toggle{white-space:nowrap;font-size:11px;min-width:105px;color:var(--muted)}
#visitors-toggle[aria-pressed="true"]{color:var(--ink)}
[data-tg="bar"]{position:absolute;left:calc(24px + env(safe-area-inset-left));right:calc(24px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:.04em}
[data-tg="hints"]{display:flex;gap:20px;flex-wrap:wrap;opacity:.8;line-height:1.6}
[data-tg="ctrls"]{display:flex;gap:8px;align-items:center;min-width:0}
[data-tg="pal"]{display:flex;gap:4px;align-items:center;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--control-bg);max-width:330px;overflow-x:auto;scrollbar-width:none;touch-action:pan-x}
[data-tg="pal"]::-webkit-scrollbar{display:none}
[data-tg="sw"]{width:32px;height:32px;min-width:32px;padding:0;border-radius:8px;border:2px solid transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;outline:1px solid var(--art-outline);outline-offset:-1px}
[data-tg="sw"][aria-pressed="true"]{border-color:var(--ink)}
[data-tg="sw"]:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
[data-tg="dot"]{width:14px;height:14px;border-radius:4px;pointer-events:none}
[data-tg="coarse"]{display:none}
[data-tg="poster"]{position:absolute;inset:0;display:grid;grid-template-columns:minmax(280px,336px) minmax(0,1fr);background:var(--surface);cursor:default;color:var(--ink);font-size:13px;letter-spacing:0}
[data-tg="panel"]{border-right:1px solid var(--divider);overflow-y:auto;overflow-x:hidden;margin-top:128px;padding:20px 24px 32px;scroll-padding:16px 0 24px;display:flex;flex-direction:column;gap:20px;background:var(--panel);scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.poster-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.poster-header h1{font:700 20px/1.3 var(--ui-font);letter-spacing:-.3px;margin:0}
#loop-info,#export-status{color:var(--muted);line-height:1.5}
#loop-info{padding:4px 8px;border-radius:4px;background:var(--surface);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.control-note{margin:0;color:var(--muted);font-size:12px;line-height:1.5;letter-spacing:0}
.section{display:flex;flex-direction:column;gap:10px}
.section+.section{border-top:1px solid var(--divider);padding-top:20px}
.section-label{color:var(--ink);font-size:14px;font-weight:700;line-height:1.3;letter-spacing:0}
#poster-words{width:100%;min-height:44px;background:var(--control-bg);border:1px solid var(--border);border-radius:8px;color:var(--ink);font:400 16px/1.4 var(--ui-font);padding:10px 12px;outline:none;user-select:text}
#poster-words:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
:is([data-tool="type"],[data-tool="effects"])[data-font="mono"] #poster-words{font-family:"DM Mono",ui-monospace,monospace;font-size:16px}
#regrow{align-self:flex-start;padding:8px 12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.garden-card,.motion-card{display:flex;text-align:left;background:var(--control-bg);border:1px solid var(--border);color:var(--ink);font:inherit;min-height:44px;padding:10px 9px;border-radius:8px;letter-spacing:0}
.garden-card{align-items:center;gap:9px;min-height:60px}
.garden-card[aria-pressed="true"],.motion-card[aria-pressed="true"]{border-color:var(--accent);background:var(--selected);box-shadow:inset 0 0 0 1px var(--accent)}
.garden-card canvas{width:34px;height:34px;flex:none}
.garden-name{font-size:13px;font-weight:600}
.garden-sub{display:block;color:var(--muted);font-size:11px;font-weight:400;line-height:1.5;margin-top:3px}
.motion-card{flex-direction:column;gap:4px;padding:10px 12px}
.motion-title{font-size:13px;font-weight:600}
.motion-sub{color:var(--muted);font-size:11px;line-height:1.5}
.palette-card{display:flex;flex-direction:column;gap:8px;align-items:stretch;background:var(--control-bg);border:1px solid var(--border);color:var(--ink);font:inherit;padding:6px;border-radius:12px;text-align:left}
.palette-card[aria-pressed="true"]{border-color:var(--accent);background:var(--selected);box-shadow:inset 0 0 0 1px var(--accent)}
.palette-preview{display:flex;align-items:center;justify-content:center;height:44px;border-radius:6px;outline:1px solid var(--art-outline);outline-offset:-1px}
.flower-dot{width:18px;height:18px;border-radius:4px}
.stem-dot{width:12px;height:12px;border-radius:3px;margin-left:-4px}
.palette-type{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:18px;margin-left:8px}
.palette-name{padding:0 4px 2px;font-size:12px;font-weight:600}
.export-section{border-top:1px solid var(--divider);padding-top:20px}
.export-field{display:flex;flex-direction:column;gap:7px;min-width:0;color:var(--muted);font-size:12px;font-weight:500}
.export-field select{width:100%;min-width:0;min-height:44px;padding:9px 10px;font-size:13px;color:var(--ink);background:var(--control-bg);border:1px solid var(--border);border-radius:8px;outline:none;letter-spacing:0}
.export-field select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.export-field input:not([type="range"]){width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--control-bg);color:var(--ink);font:inherit;font-size:16px;outline:none;user-select:text;letter-spacing:0}
.export-field input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.export-field input:disabled{opacity:.5}
.effects-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.effects-heading h2{margin:0}
#effects-layer-count{white-space:nowrap;font-variant-numeric:tabular-nums}
.effects-layers{display:flex;flex-direction:column;gap:6px}
.effect-layer-tab{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;text-align:left;padding:8px 10px}
.effect-layer-tab[aria-pressed="true"]{background:var(--selected);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.effect-layer-swatch{width:22px;height:22px;border-radius:4px;flex:none;outline:1px solid var(--art-outline);outline-offset:-1px}
.effect-layer-name{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.effect-layer-meta{margin-left:auto;color:var(--muted);font-size:11px;font-weight:400;white-space:nowrap}
.effects-fields{display:flex;flex-direction:column;gap:10px;min-width:0;margin:4px 0 0;padding:0;border:0}
.effects-fields legend{padding:0 0 10px;font-size:13px;font-weight:700;color:var(--ink)}
.effect-layer-details>summary{min-height:44px;line-height:44px;font-size:13px;font-weight:600;cursor:pointer}
.effect-layer-details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.effect-layer-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.effect-layer-actions .pill{font-size:12px;letter-spacing:0;padding:10px 8px}
.effect-color-field{display:flex;gap:10px;align-items:flex-end}
.effect-color-field>.export-field:first-child{flex:none}
.effect-hex-field{flex:1;min-width:0}
.effect-color-picker{position:relative;display:block;width:56px;height:44px;border:1px solid var(--border);border-radius:8px;background:var(--control-bg)}
.effect-color-picker:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.effect-color-picker:has(input:disabled){opacity:.5}
.export-field #effect-color{position:absolute;inset:0;width:100%;height:100%;min-height:44px;opacity:0;padding:0;cursor:pointer}
#effect-color-face{position:absolute;inset:6px;border-radius:3px;pointer-events:none}
#effect-color-hex{font-variant-numeric:tabular-nums}
.effect-range{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--muted);font-size:12px}
.effect-range>span{display:flex;align-items:center;justify-content:space-between;gap:12px}
.effect-range output{color:var(--ink);font-variant-numeric:tabular-nums}
.effect-range input{appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:var(--primary)}
.effect-range input:disabled{opacity:.5;cursor:wait}
.effect-range input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.effect-range input::-webkit-slider-runnable-track{height:4px;background:var(--border);border-radius:2px}
.effect-range input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border:1px solid var(--primary);border-radius:6px;background:var(--primary)}
.effect-range input::-moz-range-track{height:4px;background:var(--border);border-radius:2px}
.effect-range input::-moz-range-thumb{width:22px;height:22px;border:1px solid var(--primary);border-radius:6px;background:var(--primary)}
.effect-checkbox{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;color:var(--ink);font-size:13px}
.effect-checkbox input{width:20px;height:20px;margin:0;accent-color:var(--primary)}
.effect-checkbox:has(input:disabled){opacity:.5;cursor:wait}
.effects-text-fields{border-top:1px solid var(--divider);padding-top:14px}
#effects-status:empty{display:none}
.export-field textarea{width:100%;min-height:100px;resize:vertical;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--control-bg);color:var(--ink);font:inherit;font-size:12px;line-height:1.6;outline:none;user-select:text;letter-spacing:0}
.export-field textarea:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.recipe-section{display:block;border-top:1px solid var(--divider);padding-top:14px}
.recipe-section>summary{min-height:44px;cursor:pointer;line-height:44px;font-size:14px;font-weight:700;letter-spacing:0;color:var(--ink)}
.recipe-section>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.recipe-section> :not(summary){margin-top:12px}
#recipe-count{margin-left:8px;color:var(--muted);font-size:11px}
.recipe-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.recipe-actions .pill{font-size:11px;padding:10px 8px;letter-spacing:0}
#recipe-embed{grid-column:1/-1}
#recipe-status:empty{display:none}
#recipe-library{display:flex;flex-direction:column;gap:8px}
.recipe-item{display:flex;align-items:stretch;gap:8px;min-width:0}
.recipe-open{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;text-align:left;padding:10px}
.recipe-title{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;letter-spacing:0}
.recipe-meta{color:var(--muted);font-size:10px;line-height:1.5;letter-spacing:0}
.recipe-remove{flex:none;font-size:10px;padding:10px 8px;letter-spacing:0}
#recipe-link{font-size:12px;word-break:break-all}
.studio-resources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.studio-resources .pill{display:flex;align-items:center;justify-content:center;min-width:0;text-decoration:none;font-size:11px;letter-spacing:0}
[data-tg="app"]:has(> #download-result:not([hidden])) [data-tg="panel"]{padding-bottom:calc(152px + env(safe-area-inset-bottom))}
.export-options,.export-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.export-buttons .pill{min-width:0;font-size:12px;letter-spacing:0}
#export-dimensions{font-size:12px;font-variant-numeric:tabular-nums}
#export-note{margin:0;color:var(--muted);font-size:11px;line-height:1.6}
#export-status{min-height:16px}
#export-cancel{align-self:flex-start}
[data-tg="stage"]{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;padding:148px 40px 32px;min-width:0;min-height:0;overflow:hidden}
[data-tg="pcanvas"]{aspect-ratio:var(--poster-aspect,1);width:min(100%,calc((100dvh - 232px)*var(--poster-aspect,1)));max-height:calc(100dvh - 232px);height:auto;display:block;object-fit:contain;box-shadow:0 2px 6px #0001,0 12px 28px #0002;outline:1px solid var(--art-outline);outline-offset:-1px}
.preview-playback{display:grid;grid-template-columns:auto minmax(44px,1fr) auto;align-items:center;gap:10px;flex:none;width:100%;max-width:640px;color:var(--muted);cursor:default}
#preview-toggle{min-width:72px;font-size:11px;padding:10px 12px}
#preview-time{font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:0}
#preview-seek{appearance:none;-webkit-appearance:none;min-width:0;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:var(--primary)}
#preview-seek:disabled{opacity:.5;cursor:wait}
#preview-seek:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
#preview-seek::-webkit-slider-runnable-track{height:4px;background:var(--border);border-radius:2px}
#preview-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border:1px solid var(--primary);border-radius:6px;background:var(--primary)}
#preview-seek::-moz-range-track{height:4px;background:var(--border);border-radius:2px}
#preview-seek::-moz-range-thumb{width:22px;height:22px;border:1px solid var(--primary);border-radius:6px;background:var(--primary)}
#done-typing{display:none}
.download-result{position:absolute;z-index:12;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:10px;border:1px solid var(--border);border-radius:18px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow);cursor:default}
[data-mode="type"] .download-result{bottom:calc(116px + env(safe-area-inset-bottom))}
.download-details{display:flex;align-items:center;gap:12px;margin:2px 4px 10px;max-width:480px;font-size:11px;line-height:1.5}
#download-name{min-width:0;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#download-size{color:var(--muted);white-space:nowrap}
.download-actions{display:flex;gap:8px;align-items:center}
.download-actions .pill{display:inline-flex;align-items:center;justify-content:center;font-size:12px;text-decoration:none;white-space:nowrap}
html[data-touch] [data-tg="app"]{touch-action:manipulation;top:var(--tg-top,0px);bottom:auto;height:var(--tg-h,100%)}
@media(pointer:coarse){[data-tg="fine"]{display:none}[data-tg="coarse"]{display:inline}[data-tg="sw"]{width:44px;height:44px;min-width:44px}.selector-pill select,.export-field select{font-size:16px}}
@media(max-width:720px){
  .mobile-only{display:block}
  .copy-wrap{display:none}
  .app-header{grid-template-columns:1fr auto;gap:8px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left))}
  .app-identity{display:none}
  .theme-switch{grid-column:1;grid-row:1;justify-self:start;gap:2px}
  [data-tg="modes"]{grid-column:2;grid-row:1;justify-self:end}
  .theme-switch button{font-size:12px;padding:8px 6px;min-height:44px}
  [data-tg="modes"] button{font-size:12px;padding:8px 9px;min-height:44px}
  .garden-toolbar{top:calc(76px + env(safe-area-inset-top));min-height:52px;padding:4px 16px;gap:6px}
  .selector-pill{padding:0 8px;gap:4px;min-width:0;flex:1}
  .selector-pill>span{display:none}
  .selector-pill select{font-size:16px;max-width:none;width:100%;min-width:0}
  .export-field select{font-size:16px}
  #recipe-link,.export-field textarea{font-size:16px}
  #visitors-toggle{flex:none;font-size:10px;min-width:auto;padding:10px 9px}
  [data-tg="bar"]{left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));gap:10px}
  [data-tg="hints"]{gap:8px 14px;font-size:10px}
  [data-tg="ctrls"]{display:grid;grid-template-columns:1fr 1fr 1fr 1.65fr;gap:8px;width:100%}
  [data-tg="pal"]{grid-column:1/-1;max-width:100%;padding:4px;gap:4px}
  [data-tg="sw"]{width:44px;height:44px;min-width:44px}
  [data-tg="dot"]{width:16px;height:16px}
  [data-tg="btn"]{padding:9px 8px;font-size:11px;letter-spacing:0}
  [data-tg="poster"]{display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-padding-top:calc(var(--studio-top,128px) + min(28dvh,240px) + 81px + env(safe-area-inset-top));scroll-padding-bottom:16px}
  [data-tg="poster"]::before{content:"";order:-2;position:sticky;top:0;flex:none;height:calc(var(--studio-top,128px) + env(safe-area-inset-top));margin-bottom:calc(-1 * var(--studio-top,128px) - env(safe-area-inset-top));background:var(--surface);z-index:4;pointer-events:none}
  [data-tg="stage"]{order:-1;flex:none;position:sticky;top:calc(var(--studio-top,128px) + env(safe-area-inset-top));z-index:2;padding:12px 16px;background:var(--surface);margin-top:calc(var(--studio-top,128px) + env(safe-area-inset-top));border-bottom:1px solid var(--divider)}
  [data-tg="pcanvas"]{width:min(100%,calc(min(28dvh,240px)*var(--poster-aspect,1)));max-height:min(28dvh,240px)}
  [data-tg="panel"]{flex:none;border-right:0;overflow:visible;margin-top:0;padding:20px 16px calc(32px + env(safe-area-inset-bottom));gap:20px}
  .poster-header{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .words-section{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .words-section .section-label{grid-column:1/-1}
  .words-section #regrow{font-size:10px;padding:8px 10px;align-self:center}
  .export-section{scroll-margin-top:calc(var(--studio-top,128px) + 92px + env(safe-area-inset-top) + min(28dvh,240px))}
  .palette-preview{height:52px}
  [data-mode="type"] .download-result{bottom:calc(188px + env(safe-area-inset-bottom))}
  .download-result{width:calc(100% - 32px)}
  .download-details{max-width:100%}
  .download-actions .pill{flex:1;padding:8px 10px}
}
html[data-kb] [data-mode="type"] .garden-toolbar,
html[data-kb] [data-mode="type"] [data-tg="hints"],
html[data-kb] [data-mode="type"] [data-tg="ctrls"]> :not(#done-typing){display:none}
html[data-kb] [data-mode="type"] [data-tg="ctrls"]{display:flex;justify-content:flex-end}
html[data-kb] [data-mode="type"] #done-typing{display:block}
html[data-kb] [data-mode="poster"] .garden-toolbar{display:none}
html[data-kb] [data-mode="poster"] [data-tg="poster"]{scroll-padding-top:calc(237px + env(safe-area-inset-top))}
html[data-kb] [data-mode="poster"] [data-tg="poster"]::before{height:calc(76px + env(safe-area-inset-top));margin-bottom:calc(-76px - env(safe-area-inset-top))}
html[data-kb] [data-mode="poster"] [data-tg="stage"]{top:calc(76px + env(safe-area-inset-top));margin-top:calc(76px + env(safe-area-inset-top));padding:10px 16px}
html[data-kb] [data-mode="poster"] [data-tg="pcanvas"]{width:min(100%,calc(84px*var(--poster-aspect,1)));max-height:84px}
@media(max-height:500px) and (min-width:721px) and (max-width:1040px){
  .copy-wrap{display:none}
  .app-header{grid-template-columns:auto 1fr auto;gap:8px;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left))}
  .app-identity{display:none}
  .theme-switch{grid-column:1;grid-row:1;justify-self:start;gap:2px}
  [data-tg="modes"]{grid-column:3;grid-row:1;justify-self:end}
  .theme-switch button{font-size:12px;padding:8px 6px;min-height:44px}
  [data-tg="modes"] button{font-size:12px;padding:8px 9px;min-height:44px}
  .garden-toolbar{top:calc(12px + env(safe-area-inset-top));left:190px;right:160px;min-height:44px;padding:0;gap:6px;z-index:8;background:transparent;border:0}
  .selector-pill{padding:0 8px;min-width:0;flex:1}
  .selector-pill select{width:100%;min-width:0;max-width:100%}
  #visitors-toggle{flex:none}
  .selector-pill>span{display:none}
  [data-tg="panel"]{margin-top:72px;padding-top:14px}
  [data-tg="stage"]{padding:86px 18px 18px}
  [data-tg="pcanvas"]{width:min(100%,calc((100dvh - 160px)*var(--poster-aspect,1)));max-height:calc(100dvh - 160px)}
}
@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled),a.pill:active{transform:none}}