/* One primary canvas, persistent navigation, secondary controls in settings. */
:root{--panel:#111a2a;--line:#354058;--radius:20px;--dock-height:76px}
.entry{padding: max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)));gap:14px}
.entry-header{width:100%;padding:0 0 12px;min-height:48px;border-bottom:0}
.entry-brand{display:flex;align-items:center;gap:10px;font-size:22px;letter-spacing:-.6px}
.entry-brand img{border-radius:50%;width:36px;height:36px}
.observatory{border-color:#8eadd024;background:linear-gradient(150deg,#17243a66,#080e1c44);box-shadow:0 24px 100px #0003;border-radius:24px}



.entry .style-toggle{width:48px;height:48px;right:14px;top:14px;padding:5px}
.entry-caption{padding:6px 16px 18px;gap:8px}
.entry-console{background:#111a2ae6;padding:16px;gap:12px;border-top-color:#8eadd024}
.entry input{border-radius:16px;background:#080f1f;min-height:54px;padding:12px 14px}
.entry input::placeholder{font-size:14px}
.entry .entry-field-heading label{font-size:13px}
.entry form .primary{width:54px;min-height:54px;border-radius:16px;font-size:0}
.entry #entry-history-toggle,.entry #entry-keyboard-toggle{min-height:48px}
.entry #entry-keyboard-toggle{font-size:11px;border-color:transparent;background:transparent;padding:6px}
.app-dock{position:fixed;z-index:9;bottom:max(10px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(480px,calc(100% - 24px));padding:5px;border:1px solid #8eadd036;background:#101827f2;backdrop-filter:blur(20px);border-radius:23px;box-shadow:0 12px 48px #0006}
.app-dock>.btn{min-width:0;min-height:60px;padding:6px 3px;gap:3px;flex-direction:column;font-size:10px;line-height:1.3;background:transparent;border-color:transparent;border-radius:17px}
.app-dock>.btn::before{width:26px;height:26px;flex-basis:26px}
.app-dock>.btn[aria-current=page],.app-dock>.btn[aria-expanded=true]{background:#26344b;border-color:#8eadd030;color:#fff}
#menu{width:min(540px,calc(100% - 24px));padding:24px;max-height:calc(100dvh - 32px);border-radius:26px}
#menu h2{font-family:Georgia,serif;font-size:30px;padding:4px 80px 24px 0}
#menu h3{font-size:13px;font-weight:500;color:var(--muted);margin:0 0 12px}
.settings-language{padding-bottom:18px;border-bottom:1px solid var(--line)}
.settings-language>label{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
#language-toggle{width:100%;min-height:48px;justify-content:space-between;text-align:start;padding:10px 14px}
#language-value{min-width:0;overflow-wrap:anywhere}
.language-chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 4px 5px 14px;flex-shrink:0}
#language-toggle[aria-expanded=true] .language-chevron{transform:rotate(225deg);margin-bottom:0}
#language-picker{margin-top:10px}
#language-search{width:100%;min-height:48px;font-size:16px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--text)}
#language-options{display:grid;gap:5px;max-height:min(220px,30dvh);overflow-y:auto;margin-top:8px;scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg)}
#language-options::-webkit-scrollbar{width:6px}#language-options::-webkit-scrollbar-thumb{background:var(--accent);border-radius:5px}
.language-option{min-height:48px;text-align:start;justify-content:flex-start;padding:10px 14px}
.language-option[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
#language-empty{font-size:14px;color:var(--muted)}
.settings-premium{padding:20px 0 18px}
#menu .settings-premium h3{font-size:23px;font-family:Georgia,serif;color:var(--text);margin:0 0 8px}
.settings-premium p,.settings-premium li{font-size:14px;line-height:1.45;margin:0}
.settings-premium p{color:var(--muted)}
.settings-premium ul{padding-inline-start:20px;margin:12px 0 16px}
#premium-buy{width:100%;min-height:48px;white-space:normal}
.premium-status:empty{display:none}
.settings-legal{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.settings-privacy{font-size:14px;color:var(--muted);display:inline-flex;min-height:44px;align-items:center}
#menu[open]{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg)}
@media(orientation:landscape) and (max-height:600px){#menu{width:min(720px,calc(100% - 32px))}#menu h2{font-size:24px;padding-bottom:14px}.settings-language{padding-bottom:12px}.settings-premium{padding:12px 0}.settings-premium ul{margin:8px 0}.settings-premium li{display:inline;margin-inline-end:14px}.settings-legal{padding-top:6px}}
.list-view{padding-top:max(24px,env(safe-area-inset-top));padding-bottom:110px}
#sky-actions,#history-open{bottom:calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 12px)}
.galaxy-controls{bottom:calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 12px)}
.galaxy-title{top:max(24px,env(safe-area-inset-top))}
#feedback{top:max(78px,calc(env(safe-area-inset-top) + 60px));bottom:auto;overflow-wrap:anywhere}
@media(min-width:900px) and (min-height:601px){.entry{padding-left:max(40px,calc((100vw - 1440px)/2));padding-right:max(40px,calc((100vw - 1440px)/2));gap:12px}.entry-header{padding-bottom:4px}.entry-brand{font-size:26px}.entry-console{padding:18px 24px;gap:24px}.entry-caption{padding-bottom:24px}.entry .style-toggle{top:24px;right:24px}}
@media(max-width:500px){.entry-brand{font-size:20px}.entry{gap:8px}.entry-console{padding:10px 12px;gap:6px}.entry .entry-field-heading{gap:4px}.entry .layout-key{height:22px}.entry #entry-history-toggle{width:48px}.entry .style-toggle img{width:36px;height:36px}.entry-caption{padding-bottom:12px}}
@media(orientation:landscape) and (max-height:600px){:root{--dock-height:64px}.entry{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:76px;gap:6px}.entry-header{min-height:36px;padding:0}.entry-brand{font-size:19px}.entry-brand img{width:30px;height:30px}.observatory{grid-template-columns:minmax(0,1.15fr) minmax(310px,1fr)}.entry .style-toggle{top:6px;right:8px}.entry-caption{padding:0 12px 6px}.entry-console{padding:8px 12px;gap:6px}.app-dock{bottom:6px;padding:3px}.app-dock>.btn{min-height:52px}.app-dock>.btn::before{width:22px;height:22px;flex-basis:22px}.entry input,.entry form .primary{min-height:48px;height:48px}.entry .entry-field-heading{margin-bottom:4px}.entry .layout-key{height:18px}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
.entry{grid-template-rows:auto minmax(0,1fr);max-width:none}
#menu>.close{width:48px;min-height:48px;padding:10px;font-size:0;outline:none}
#menu>.close::before{width:26px;height:26px;flex-basis:26px}
#menu>.close:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
@media(max-width:500px){#menu h2{padding-right:56px;font-size:28px}}
#menu,.community-dialog{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.community-dialog input,.community-dialog textarea{-webkit-user-select:text;user-select:text}
/* Native ad placement can shorten a landscape WebView below the browser profiles. */
@media(orientation:landscape) and (max-height:350px){.entry,.native-ads .entry{padding:8px 16px 70px;gap:0}.entry-header,.native-ads .entry-header{display:none}.entry-console,.native-ads .entry-console{padding:6px 12px;gap:4px}.entry .layout-key,.native-ads .entry .layout-key{height:14px;font-size:9px}.entry .layout-key-row{margin:1px 0}.entry-caption{padding-bottom:4px}#entry-word{font-size:18px}}

/* A reserved global top strip keeps music accessible without covering page controls. */
.entry-header{min-height:52px;padding-right:0}
.list-view{padding-top:82px}
.galaxy-title{top:76px}
#galaxy-shared-controls{top:112px}
dialog,#menu{max-height:calc(100dvh - 90px);margin-top:max(76px,env(safe-area-inset-top));margin-bottom:14px}
#sky-view>.style-toggle{top:76px}
@media(max-width:600px){.entry-header{padding-right:0;position:relative}.entry-brand{font-size:20px;gap:10px}.entry-brand img{width:36px;height:36px}}
@media(orientation:landscape) and (max-height:600px){.entry-header{min-height:52px;padding-right:0}.entry{padding-top:8px}.entry-brand{font-size:19px}}
@media(orientation:landscape) and (max-height:350px){.entry,.native-ads .entry{padding-top:64px}.entry-header,.native-ads .entry-header{display:none}.entry-console,.native-ads .entry-console{padding:4px 10px}.entry .entry-field-heading{margin:0}.entry #entry-keyboard{position:absolute;left:16px;bottom:72px;width:calc((100vw - 32px)*.535);padding:8px;background:var(--panel);z-index:5;border-radius:14px}.entry #entry-keyboard[hidden]{display:none}}
@media(orientation:landscape) and (max-height:350px){.entry-caption{flex-direction:row;justify-content:center;gap:6px}}
dialog:has(> #mood-player-embed){max-height:calc(100dvh - 90px);margin-top:max(76px,env(safe-area-inset-top));margin-bottom:14px}

/* Keep input actions in one aligned group with identical touch targets. */
.entry .entry-field-heading{justify-content:flex-start;min-height:30px;gap:12px;margin-bottom:8px}
.entry #entry-keyboard-toggle{margin-left:auto;min-height:30px;padding:3px 6px}
.entry .entry-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}
.entry-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.entry .entry-tools>.btn{flex:0 0 52px;width:52px;height:52px;min-width:52px;min-height:52px;margin:0;padding:10px;border-radius:15px;font-size:0}
.entry .entry-tools>.btn::before{width:30px;height:30px;flex-basis:30px}
.entry .entry-tools>.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.entry .entry-tools>.primary:disabled{opacity:1;background:#202b3d;border-color:#35445b;box-shadow:none}
.entry .entry-tools>.primary:disabled::before{opacity:.5}
.entry .entry-input-row input{height:52px;min-height:52px}
@media(max-width:600px),(orientation:landscape) and (max-height:600px){.entry .entry-input-row{grid-template-columns:minmax(0,1fr);gap:8px}.entry-tools{gap:8px}.entry .entry-tools>.btn{flex-basis:48px;width:48px;height:48px;min-width:48px;min-height:48px}.entry .entry-input-row input{height:48px;min-height:48px}.entry .entry-tools>.btn::before{width:28px;height:28px;flex-basis:28px}.entry-console{gap:6px}}
@media(orientation:landscape) and (max-height:600px){.entry .entry-input-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}.entry-tools{gap:4px}}

/* One compact dock leaves the remaining height to the word and constellation. */
.entry .observatory{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
.entry .entry-console{grid-template-columns:minmax(0,1fr);padding:10px 14px;gap:8px;border-left:0}
.entry .entry-input-row{grid-template-columns:minmax(0,1fr);gap:8px}
.entry .entry-tools{justify-content:center;gap:8px}
.entry .entry-tools>.btn{position:static;flex:1 1 44px;width:auto;max-width:64px;min-width:44px;height:44px;min-height:44px;padding:6px;margin:0}
.entry .entry-tools>.layout-toggle{font-size:14px;color:var(--gold)}
.entry .entry-tools>.style-toggle img{width:32px;height:32px}
.entry .entry-field-heading{min-height:40px;margin-bottom:4px;gap:6px}
.entry #entry-keyboard-toggle{min-height:40px;width:auto;margin:0;padding:4px 8px;font-size:11px;color:var(--muted);white-space:nowrap}
.entry #entry-keyboard-toggle{margin-left:auto}
.entry #entry-history-toggle{margin:0}
.entry #entry-keyboard{grid-column:auto}
.entry #entry-keyboard .layout-toolbar{min-height:0;padding:0}
.entry #entry-keyboard .layout-keyboard{max-width:520px;margin:auto}
.entry .entry-caption{flex-direction:column;gap:3px;padding:6px 16px 14px}
.entry #entry-word{font-size:clamp(26px,3vw,44px)}
.entry .entry-input-row input{height:46px;min-height:46px}
.entry .entry-tools>.layout-toggle::before{display:none}
@media(min-width:900px),(orientation:landscape) and (max-height:600px){
 .entry .entry-console{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:center}
 .entry #entry-keyboard{grid-column:2}
 .entry.keyboard-collapsed .entry-console{grid-template-columns:minmax(0,1fr)}
 .entry.keyboard-collapsed #word-form{max-width:760px;margin:auto}
}
@media(orientation:landscape) and (max-height:600px){
 .entry .entry-console{padding:4px 12px;column-gap:18px}
 .entry .entry-field-heading{min-height:32px;margin:0}
 .entry #entry-keyboard-toggle{min-height:32px;font-size:10px;padding:2px 6px}
 .entry .entry-input-row{grid-template-columns:minmax(0,1fr);gap:4px}
 .entry .entry-tools{gap:4px}
 .entry .entry-tools>.btn{flex:0 0 40px;min-width:40px;width:40px;height:40px;min-height:40px;padding:4px}
 .entry .entry-input-row input{height:40px;min-height:40px;padding:6px}
 .entry .entry-caption{padding:2px 10px 4px;flex-direction:row}
 .entry #entry-word{font-size:22px}
 .entry #entry-history{left:0;right:0;bottom:calc(100% + 6px);top:auto;width:auto}
}

.entry #entry-word.long-word{font-size:clamp(15px,1.5vw,26px)}
/* A fixed square prevents the atlas from stretching when flex sizing changes. */
.btn[data-icon]::before{aspect-ratio:1;flex-shrink:0}
.entry .entry-tools>.btn::before{width:30px;height:30px;flex:0 0 30px}

/* Share the input row with folding, so the keyboard gets full width in a half-height dock. */
.entry #word-form{position:relative}
.entry .entry-field-heading{display:contents}
.entry .entry-field-heading>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.entry .entry-input-row{grid-template-columns:minmax(0,1fr) 76px;gap:6px}
.entry .entry-tools{grid-column:1/-1;gap:5px}
.entry .entry-tools>.btn{flex:1 1 44px;max-width:56px;border-radius:12px}
.entry #entry-keyboard-toggle{height:44px;min-height:44px;white-space:normal;font-size:10px;line-height:1.25;margin:0;padding:4px}
.entry #entry-keyboard .layout-key{height:24px;font-size:11px}
.entry .entry-console{padding:8px 12px;gap:6px}
@media(orientation:landscape) and (max-height:600px){
 .entry .entry-console{padding:4px 12px}
 .entry #entry-keyboard .layout-key{height:22px}
 .entry .entry-input-row{grid-template-columns:minmax(0,1fr) 70px}
 .entry .entry-tools>.btn{height:40px;min-height:40px;min-width:40px;flex-basis:40px}
 .entry #entry-keyboard-toggle{height:40px;min-height:40px}
}

.entry .entry-sky{grid-template-rows:minmax(0,1fr) auto}
.entry .entry-brand{background:transparent;border:0;box-shadow:none;padding:0;min-height:44px;justify-content:flex-start;font-family:Georgia,serif}
.entry .entry-input-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.entry #word{padding-left:50px}
.entry #entry-random{position:absolute;top:1px;left:1px;width:44px;height:44px;min-height:44px;margin:0;padding:5px;background:transparent;border-color:transparent}
.entry #entry-random img{width:32px;height:32px;object-fit:contain}
.entry .keyboard-shelf{display:flex;align-items:flex-end;gap:8px;min-width:0}
.entry #entry-keyboard{flex:1;min-width:0}
.entry #entry-keyboard-toggle{flex:0 0 40px;width:40px;height:40px;min-height:40px;border:0;background:transparent;box-shadow:none;backdrop-filter:none}
.entry #entry-keyboard-toggle:hover,.entry #entry-keyboard-toggle:active{background:transparent;box-shadow:none;filter:none}
.entry{height:var(--entry-viewport-height,100dvh)}
.entry.software-keyboard-open{padding-bottom:8px;gap:4px}
.entry.software-keyboard-open .entry-console{padding-block:4px;gap:4px}
.entry.software-keyboard-open #entry-keyboard .layout-key{height:16px;font-size:10px}
.entry.software-keyboard-open .layout-key-row{margin:1px 0}
.entry #entry-keyboard-toggle[aria-expanded=false]{margin-left:auto}
.entry .keyboard-collapsed .keyboard-shelf{justify-content:flex-end}
.entry #entry-history{z-index:8}
#download-dialog{width:min(540px,calc(100% - 24px));padding:24px;background:radial-gradient(circle at 50% 4%,#edcf9618,transparent 42%),var(--panel)}
.download-sheet{display:flex;flex-direction:column;gap:22px;padding-top:40px}
.download-hero{display:grid;justify-items:center;gap:10px;text-align:center}
.download-hero>img{border-radius:26px;object-fit:contain}
#download-dialog h2{padding:0;font:28px Georgia,serif}
.download-hero p{font-size:14px;color:var(--muted)}
.download-btns{display:flex;flex-direction:column;gap:10px}
.download-btn{gap:10px;min-height:54px;padding:13px 18px;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff0d}
.download-btn svg{flex:0 0 22px;width:22px;height:22px}
.download-btn--soon{opacity:.6;cursor:default}
.download-btn__name{flex:1}
.download-btn__soon{font-size:11px;color:var(--muted);background:#ffffff12;border-radius:6px;padding:2px 7px}
@media(orientation:landscape) and (max-height:600px){
 .entry #entry-random{width:38px;height:38px;min-height:38px}
 .entry #word{padding-left:44px}
 #download-dialog{width:min(740px,calc(100% - 24px));padding:16px}
 .download-sheet{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding-top:36px}
 .download-hero>img{width:70px;height:70px}
 #download-dialog h2{font-size:22px}
}

#style-dialog{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border:0;border-radius:0;overflow:hidden;background:var(--bg)}
#style-dialog[open]{display:flex;flex-direction:column;gap:12px}
#style-dialog>.close{top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));font-size:0;width:48px;height:48px;padding:10px;z-index:2}
#style-dialog h2{padding:4px 60px 8px 0;min-height:44px;font-size:24px}
.style-workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;flex:1;min-height:0}
.style-preview{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;min-width:0;border:1px solid var(--entry-border);border-radius:20px;background:radial-gradient(ellipse,#14223b,var(--bg));overflow:hidden}
#style-preview-label{margin:0;padding:16px;font-size:14px;color:var(--muted);font-weight:400}
#style-preview-sky{width:100%;height:100%;min-height:0}
#style-preview-word{font:clamp(18px,2.5vw,36px)/1.2 Georgia,serif;text-align:center;overflow-wrap:anywhere;padding:12px 18px}
#style-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px;min-height:0}
#style-options>.style-option{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;height:auto;padding:0 0 8px;margin:0;gap:4px}
#style-options canvas{width:100%;height:100%;min-height:0}
#style-options span{font-size:clamp(11px,1.1vw,16px);padding:0 3px}
@media(max-width:700px) and (orientation:portrait){
 #style-dialog h2{font-size:20px}
 .style-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(240px,.9fr);gap:12px}
 #style-options{gap:6px}
 #style-options>.style-option{padding-bottom:5px;border-radius:10px}
 #style-preview-label{padding:10px}
 #style-preview-word{padding:8px;font-size:22px}
}
@media(orientation:landscape) and (max-height:600px){
 #style-dialog{padding:8px 12px}
 #style-dialog[open]{gap:6px}
 #style-dialog h2{font-size:18px;padding:4px 60px 0 0}
 #style-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 #style-preview-label{padding:8px;font-size:12px}
 #style-preview-word{font-size:18px;padding:6px}
}
@media(min-width:900px),(orientation:landscape) and (max-height:600px){
 .entry.keyboard-collapsed .entry-console{grid-template-columns:minmax(0,1fr) 44px}
 .entry.keyboard-collapsed #word-form{max-width:none}
}
.entry .entry-tools>#entry-history-toggle{min-height:44px;height:44px;min-width:44px;width:auto}
@media(orientation:landscape) and (max-height:600px){.entry .entry-tools>#entry-history-toggle{min-height:40px;height:40px;min-width:40px}}
#style-dialog:has(>#mood-player-embed){margin:0;max-height:100dvh;padding-top:max(76px,env(safe-area-inset-top))}
#style-dialog:has(>#mood-player-embed)>.close{top:max(84px,env(safe-area-inset-top))}
#download-dialog>.close{top:16px;right:16px;width:44px;min-height:44px;height:44px;padding:0;font-size:0;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle,#ffffff20 0 18%,#101827 62%);border-color:#dfeeff88;box-shadow:inset 0 0 0 1px #ffffff36,0 0 14px #dfeeff66}
#download-dialog>.close::before{width:26px;height:26px;flex:0 0 26px;margin:0;transform:translateY(2px);background:#fff;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #dfeeff)}
#download-dialog>.close:hover{background:radial-gradient(circle,#fff 0 8%,#dfeeff35 24%,#172743 70%);border-color:#fff;box-shadow:inset 0 0 0 1px #fff,0 0 22px #fff}
.download-btn--soon{user-select:none;pointer-events:none}
.entry .entry-caption{justify-content:center}
/* App shell: the sky remains one uninterrupted surface, while controls live
   in a restrained dock and native-style sheets instead of web-card blocks. */
body{background:radial-gradient(ellipse at 50% -20%,#1b2b463d,transparent 52%),var(--bg)}
.observatory{border-color:transparent;background:linear-gradient(180deg,#14213a2e,transparent 46%);box-shadow:none}
.entry-console{background:linear-gradient(180deg,#111a2af2,#0c1424f2);border-top-color:#8eadd018}
dialog:not(#style-dialog){border-color:#a9c0df2b;background:radial-gradient(ellipse at 50% 0%,#30486562,transparent 46%),#101a2bf7;box-shadow:0 28px 88px #000a}
#menu{background:linear-gradient(180deg,#17243af7,#0e1727fa)}
#menu nav{gap:2px;padding:10px 0}
#menu nav .btn,#menu>#community-moderator>.btn{justify-content:flex-start;background:transparent;border-color:transparent;box-shadow:none}
#menu nav .btn:hover,#menu>#community-moderator>.btn:hover:hover{background:#8eadd018;border-color:transparent;box-shadow:none}
#menu .settings-language{border-bottom-color:#8eadd024}
.settings-legal{border-top-color:#8eadd024}
/* Status changes must not move the input, keyboard or constellation.
   Reserve the longest localized microphone message before permission resolves. */
.entry-status{min-height:4.2em;margin-top:4px;font-size:12px;line-height:1.4}
.entry .entry-status #voice-status,.entry .entry-status #input-feedback{margin:0;font-size:inherit;line-height:inherit}
@media(min-width:900px),(orientation:landscape) and (max-height:600px){.entry-status{min-height:2.8em;font-size:11px}}
#style-dialog h2{min-height:56px}
/* Secondary dialogs respect the same reserved player strip on compact screens. */
dialog.community-dialog{max-height:calc(100dvh - 90px)}
@media(max-width:650px){#actions-sky{height:clamp(80px,16vh,128px)}}
@media(orientation:landscape) and (max-height:600px){
 #actions-sky{height:110px}
 #actions #add-form{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:4px 8px}
 #actions #add-form>label{grid-column:1/-1;margin:0}
 #actions #add-word{grid-row:2;grid-column:1}
 #actions #add-form>.primary{grid-row:2;grid-column:2;margin:0;font-size:12px;padding:6px}
 #actions #actions-keyboard{grid-column:1/-1;margin:0}
 #actions #actions-keyboard .layout-key{height:18px}
 #actions #add-feedback:empty{display:none}
 #actions #add-feedback{grid-column:1/-1}
}

.style-random img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;padding:6px;box-sizing:border-box}

.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px}.collection-heading h1{margin:0;min-width:0}.collection-heading #share-collection{margin:0;flex-shrink:0}@media(max-width:600px){.collection-heading{gap:12px}.collection-heading h1{font-size:24px}.collection-heading #share-collection{width:48px;height:48px;padding:8px;font-size:0;gap:0}.collection-heading #share-collection::before{margin:0;width:28px;height:28px}}

/* Keep the collection share action below the persistent app header. */
.list-view.personal-collection{padding-top:max(76px,calc(env(safe-area-inset-top) + 64px))}

/* The input and its actions share a left edge; the keyboard has its own shelf. */
.entry .entry-tools{justify-content:flex-start}
.entry .entry-tools>.btn{flex:0 1 48px}
.entry .keyboard-shelf{padding:8px;border:1px solid var(--entry-border);border-radius:14px;background:#080f1f80;align-items:center}
.entry .keyboard-shelf #entry-keyboard-toggle{align-self:flex-end}
.entry.keyboard-collapsed .keyboard-shelf{padding:0;border-color:transparent;background:transparent;justify-content:flex-end}
.entry #entry-keyboard-toggle .keyboard-fold-art{display:block;width:18px;height:18px;background:var(--muted);mask:url('/assets/star-arrow-controls.png') 100% 50%/200% 100% no-repeat;mask-mode:luminance}
.entry #entry-keyboard-toggle[aria-expanded=false] .keyboard-fold-art{transform:rotate(180deg)}
.btn[data-icon="close"]::before{background:#fff;mask:url('/assets/star-arrow-controls.png') 0 50%/200% 100% no-repeat;mask-mode:luminance}
@media(min-width:900px) and (min-height:601px){
 .entry .entry-console,.entry.keyboard-collapsed .entry-console{grid-template-columns:minmax(0,1fr)}
 .entry #entry-keyboard{grid-column:auto}
 .entry.keyboard-collapsed #word-form{max-width:none;margin:0}
}

/* Separate grid tracks guarantee that even an 80-character caption stays outside
   the canvas. The input owns its save action; icon-only controls have no text gap. */
.entry .observatory{grid-template-rows:minmax(0,1fr) auto auto}
.entry .entry-sky{display:block;position:relative;min-height:0}
.entry .entry-sky #entry-sky{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.entry .entry-caption{min-width:0;padding:8px 16px;border-top:1px solid var(--entry-border);background:var(--panel);overflow:hidden}
.entry #entry-word{display:block;width:100%;white-space:normal;overflow-wrap:anywhere}
.entry .entry-input-row{grid-template-columns:minmax(0,1fr) 48px;gap:6px}
.entry .entry-input-row>.entry-save{grid-column:2;grid-row:1;width:48px;height:46px;min-height:46px;margin:0;padding:7px;gap:0;font-size:0}
.entry .entry-input-row>.entry-save::before{width:30px;height:30px;flex:0 0 30px}
.entry .entry-tools{grid-row:2;grid-column:1/-1}
.entry .entry-tools>.btn,.entry #entry-random,.entry #entry-keyboard-toggle{display:inline-flex;align-items:center;justify-content:center;gap:0}
.entry .entry-tools>.btn::before{margin:0}
.entry .entry-input-row>.layout-toggle{grid-column:2;grid-row:1;width:48px;height:46px;min-width:48px;min-height:46px;margin:0;padding:6px;color:var(--gold);font-size:14px}
.entry .entry-input-row>.entry-save{grid-column:3}
.entry .entry-input-row{grid-template-columns:minmax(0,1fr) 48px 48px}
.entry .entry-input-row>.entry-tools{grid-row:2;grid-column:1/-1}
.black-hole-active::before{animation:black-hole-spin .28s ease-in both}.black-hole-input{animation:black-hole-input .28s ease-in both}.card.black-hole-delete{pointer-events:none;animation:black-hole-delete .36s cubic-bezier(.65,0,1,1) both}@keyframes black-hole-spin{to{transform:rotate(310deg) scale(1.34)}}@keyframes black-hole-input{to{transform:scale(.78);opacity:0;filter:blur(5px)}}@keyframes black-hole-delete{to{transform:scale(.06) rotate(220deg);opacity:0;filter:blur(8px)}}
@media(prefers-reduced-motion:reduce){.black-hole-active::before,.black-hole-input,.card.black-hole-delete{animation:none}}
/* Status feedback is a stable overlay like the existing global save feedback,
   so an idle microphone no longer reserves an empty block above the keyboard. */
.entry-status{position:fixed;top:max(78px,calc(env(safe-area-inset-top) + 60px));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);min-height:0;margin:0;z-index:9;pointer-events:none;border-radius:12px;background:var(--panel)}
.entry-status:has(p:not(:empty)){padding:8px 12px;border:1px solid var(--entry-border)}
@media(orientation:landscape) and (max-height:600px){
 .entry .entry-input-row>.entry-save{height:40px;min-height:40px}
 .entry .entry-caption{padding:4px 12px}
 .entry #entry-word.long-word{font-size:15px}
}

/* Filter the wrapper after masking its child so the added white rays are not clipped by the mask. */
.btn[data-icon="close"]:has(.close-star-art)::before{display:none}
.close-star-art{display:block;width:28px;height:28px;flex:0 0 28px;filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff) drop-shadow(0 0 3px #c4dfff)}
.close-star-art::before{content:"";display:block;width:100%;height:100%;background:#fff;mask:url('/assets/star-arrow-controls.png') 0 50%/200% 100% no-repeat;mask-mode:luminance}

/* Preview controls stay outside the interactive sky and reuse the registered atlas. */
.entry .entry-preview-tools{position:absolute;top:4px;right:8px;display:flex;gap:4px;z-index:3}
.entry .entry-preview-tools>.btn{width:48px;height:48px;min-height:48px;padding:8px;margin:0;gap:0}
.entry .entry-preview-tools>.btn::before{width:26px;height:26px;flex:0 0 26px}
.entry .entry-sky #entry-sky{top:52px;height:calc(100% - 52px);touch-action:none;cursor:grab}
.entry .entry-sky #entry-sky:active{cursor:grabbing}
.entry #entry-letter-meter{height:48px;padding-left:8px;gap:4px}
.entry #entry-letter-meter canvas{width:40px;height:40px}
.entry #entry-letter-meter output{font-size:20px;min-width:2ch}
.entry #entry-preview-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:max(76px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border:0;border-radius:0;background:var(--bg);overflow:hidden}
.entry #entry-preview-dialog[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
.entry #entry-preview-dialog .entry-caption{border-radius:0 0 16px 16px}
.entry #entry-preview-dialog .entry-sky{border:1px solid var(--entry-border);border-radius:16px 16px 0 0}
.settings-premium .premium-note{font-size:12px;margin:10px 0;color:var(--muted)}
#premium-restore,#premium-retry{width:100%;min-height:48px;margin-top:8px}
#premium-status{font-size:13px;margin-top:10px}
[dir=rtl] .entry-console,[dir=rtl] .entry-field,[dir=rtl] .layout-key-row{direction:ltr}

/* One persistent brand row keeps music beside the logo on every view. */
body>.entry-header{display:flex!important;position:fixed;z-index:20;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));width:auto;top:max(12px,env(safe-area-inset-top));min-height:44px;padding:0}
body>.entry-header .entry-brand{min-height:44px;background:transparent;border:0;padding:0;box-shadow:none}
.entry{grid-template-rows:minmax(0,1fr);padding-top:max(76px,calc(env(safe-area-inset-top) + 64px))}
.list-view{padding-top:max(76px,calc(env(safe-area-inset-top) + 64px))}
.galaxy-title{top:max(76px,calc(env(safe-area-inset-top) + 64px))}
@media(max-width:600px){body>.entry-header .entry-brand{font-size:20px;gap:10px}}
@media(orientation:landscape) and (max-height:350px){.entry,.native-ads .entry{padding-top:64px}}

/* Mobile command deck: the phone's native input is the only text keyboard. */
.entry .entry-console{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px 12px;background:linear-gradient(145deg,#101a2be8,#080e1cf2)}
.entry .entry-field-heading{display:contents}
.entry .entry-input-row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:6px;align-items:center}
.entry .entry-input-row>#entry-random{grid-column:1;grid-row:1;width:48px;height:46px;min-height:46px;margin:0;padding:7px}
.entry .entry-input-row>#word{grid-column:2;grid-row:1;width:100%;height:46px;min-height:46px}
.entry .entry-input-row>.entry-save{grid-column:3;grid-row:1}
.entry .entry-input-row>.entry-tools{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px}
.entry .entry-input-row>.entry-tools>.btn{width:100%;min-width:44px;min-height:44px;height:44px}
.entry .studio-panel{grid-column:1}
@media(max-width:899px),(orientation:landscape) and (max-height:600px){.entry #entry-keyboard{display:none!important}}
@media(orientation:landscape) and (max-height:600px){
 .entry .entry-console{padding:6px 8px;gap:5px}
 .entry .entry-input-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:4px}
 .entry .entry-input-row>#entry-random,.entry .entry-input-row>.entry-save,.entry .entry-input-row>#word{height:40px;min-height:40px}
 .entry .entry-input-row>#entry-random,.entry .entry-input-row>.entry-save{width:40px}
 .entry .entry-input-row>.entry-tools{grid-template-columns:repeat(5,minmax(40px,1fr));gap:4px}
 .entry .entry-input-row>.entry-tools>.btn{min-width:40px;min-height:40px;height:40px}
}
@media(min-width:900px) and (min-height:601px){.entry .entry-console{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);align-items:center;column-gap:16px}.entry .entry-console>#word-form{grid-column:1}.entry .entry-console>#entry-keyboard{grid-column:2;grid-row:1/3;min-width:0;padding:10px;border:1px solid var(--entry-border);border-radius:16px;background:#080f1f80}.entry .entry-console>.studio-panel{grid-column:1}.entry .entry-console>#entry-keyboard .layout-key{height:24px}}

/* The star strip owns its compact controls even when the landscape entry rules apply. */
@media(orientation:landscape) and (max-height:600px){.entry .entry-tools>#entry-random{width:44px;min-width:44px;height:44px;min-height:44px}}

/* Large screens are a larger sky, not a phone-sized game floating in empty space. */
@media(min-width:1600px) and (min-height:700px){
 :root{--scene-edge:max(36px,calc((100vw - 3200px)/2))}
 body>.entry-header{left:max(var(--scene-edge),env(safe-area-inset-left))}
 .entry{padding-left:var(--scene-edge);padding-right:var(--scene-edge)}
 .list-view,.views-screen{padding-left:var(--scene-edge);padding-right:var(--scene-edge)}
 .entry .observatory{border-color:#8eadd03b;box-shadow:0 32px 120px #0007,inset 0 1px 0 #d9ebff0d}
 .entry .entry-sky{background:radial-gradient(ellipse at 50% 30%,#26466a22,transparent 63%)}
 #collection{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}
 .app-dock{width:min(720px,calc(100% - 48px));padding:9px;box-shadow:0 18px 64px #0009,inset 0 1px 0 #d9ebff14}
 .app-dock>.btn{min-height:70px;font-size:12px}
 .app-dock>.btn::before{width:32px;height:32px;flex-basis:32px}
 .galaxy-controls{padding:8px;border:1px solid #8eadd036;border-radius:22px;background:#101827dc;backdrop-filter:blur(18px);box-shadow:0 16px 56px #0008}
}
@media(min-width:2560px) and (min-height:900px){
 :root{--dock-height:92px}
 .entry{padding-top:32px;padding-bottom:120px;gap:20px}
 .entry-header{min-height:64px}.entry-brand{font-size:34px}.entry-brand img{width:46px;height:46px}
 .entry .entry-console{padding:22px 30px;border-radius:0 0 26px 26px}.entry .entry-input-row>#word,.entry .entry-input-row>.entry-save,.entry .entry-input-row>.layout-toggle{height:60px;min-height:60px}
 .entry .entry-input-row>.entry-save,.entry .entry-input-row>.layout-toggle{width:60px;min-width:60px}.entry .entry-tools>.btn{min-width:54px;min-height:54px;height:54px}
 .list-view h1{font-size:clamp(40px,2vw,58px)}.card{border-color:#8eadd036;box-shadow:0 18px 60px #0004}.card canvas{height:300px}.card-body{padding:24px}
 dialog:not(#style-dialog),#menu{width:min(860px,calc(100% - 64px));padding:38px;font-size:18px}
 #menu h2{font-size:38px}#menu nav>.btn{min-height:68px;font-size:15px}.language-options .btn{min-height:60px}
}
.galaxy-title{position:absolute;left:max(20px,env(safe-area-inset-left));z-index:2;margin:0;font:500 15px/1.2 Georgia,serif;letter-spacing:.03em}

/* The atlas stays primary on phones: all five galaxy actions share one short icon rail. */
@media(max-width:600px){
 .galaxy-controls{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px;width:calc(100% - 24px);padding:6px;border-radius:18px}
 .galaxy-controls .btn{min-width:44px;min-height:48px;height:48px;padding:0;font-size:0;border-radius:13px}
 .galaxy-controls .btn[data-icon]::before{width:28px;height:28px;flex-basis:28px}
}

/* The draft controls are one compact, single-surface rail: no tiny icon inside
   a second button tile, and no lone command competing with the text field. */
.entry .entry-console{padding:8px 12px;gap:6px}
.entry .entry-input-row{grid-template-columns:minmax(0,1fr) 48px 48px;grid-template-rows:46px 48px;gap:6px}
.entry .entry-input-row>#word{grid-column:1;grid-row:1;padding-left:12px}
.entry .entry-input-row>.layout-toggle{grid-column:2;grid-row:1}
.entry .entry-input-row>.entry-save{grid-column:3;grid-row:1}
.entry .entry-input-row>.entry-tools{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(6,48px);justify-content:start;gap:6px}
.entry .entry-tools>.btn{width:48px;min-width:48px;height:48px;min-height:48px;padding:2px;border:0;border-radius:10px;background:transparent;box-shadow:none;overflow:visible}
.entry .entry-tools>#entry-random,.entry .entry-tools>#entry-history-toggle{width:48px;min-width:48px;height:48px;min-height:48px}
.entry .entry-tools>.btn::after{display:none}
.entry .entry-tools>.btn::before{width:44px;height:44px;flex:0 0 44px;margin:0;filter:grayscale(1) brightness(2.8) contrast(1.35);mix-blend-mode:screen}
.entry .entry-tools>#entry-history-toggle::before,.entry .entry-tools>#entry-clear::before,.entry .entry-tools>#voice-input::before,.entry .entry-tools>#studio-actions::before{width:44px;height:44px;flex:0 0 44px}
.entry .entry-tools>#studio-style img,.entry .entry-tools>#entry-random img{display:block;width:44px;height:44px;object-fit:contain}
.entry .entry-tools>#entry-random{position:static;background:transparent;border-color:transparent}
.entry .entry-tools>#entry-random::before{display:none}
.entry .entry-tools>.btn:hover{background:#e6ebff18;box-shadow:0 0 14px #dfeeff4a}
.entry .entry-tools>.btn:focus-visible{box-shadow:inset 0 0 0 2px var(--accent),0 0 14px #dfeeff4a}
.entry .keyboard-shelf{padding:6px 8px;gap:6px;border-radius:12px}
.entry #entry-keyboard-toggle{flex:0 0 36px;width:36px;height:36px;min-height:36px;padding:4px}
.entry #entry-keyboard-toggle .keyboard-fold-art{width:20px;height:20px}
@media(min-width:900px) and (min-height:601px){
 .entry .entry-console{grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);align-items:center;max-height:248px}
 .entry .entry-console>#word-form{grid-column:1;grid-row:1}
 .entry .keyboard-shelf{grid-column:2;grid-row:1;max-height:180px;align-self:stretch}
 .entry #entry-keyboard .layout-key{height:22px}
}
@media(max-width:500px){
 .entry .entry-input-row>.entry-tools{grid-template-columns:repeat(6,44px);gap:4px}
 .entry .entry-input-row>.entry-tools>.btn,.entry .entry-input-row>.entry-tools>#entry-random,.entry .entry-input-row>.entry-tools>#entry-history-toggle{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
 .entry .entry-tools>.btn::before,.entry .entry-tools>#entry-history-toggle::before,.entry .entry-tools>#entry-clear::before,.entry .entry-tools>#voice-input::before,.entry .entry-tools>#studio-actions::before,.entry .entry-tools>#studio-style img,.entry .entry-tools>#entry-random img{width:40px;height:40px;flex-basis:40px}
}
@media(orientation:landscape) and (max-height:600px){
 .entry .entry-console{padding:4px 8px;gap:4px}
 .entry .entry-input-row{grid-template-columns:minmax(0,1fr) 40px 40px;grid-template-rows:40px 40px;gap:4px}
 .entry .entry-input-row>.layout-toggle,.entry .entry-input-row>.entry-save{width:40px;height:40px;min-height:40px}
 .entry .entry-input-row>.entry-tools{grid-template-columns:repeat(6,40px);gap:4px}
 .entry .entry-tools>.btn,.entry .entry-tools>#entry-random,.entry .entry-tools>#entry-history-toggle{width:40px;min-width:40px;height:40px;min-height:40px}
 .entry .entry-tools>.btn::before,.entry .entry-tools>#entry-history-toggle::before,.entry .entry-tools>#entry-clear::before,.entry .entry-tools>#voice-input::before,.entry .entry-tools>#studio-actions::before,.entry .entry-tools>#studio-style img,.entry .entry-tools>#entry-random img{width:36px;height:36px;flex-basis:36px}
 .entry .keyboard-shelf{padding:4px 6px}
 .entry #entry-keyboard .layout-key{height:18px}
}

/* Keep the reduced settings menu on-screen in a short landscape viewport. */
@media(orientation:landscape) and (max-height:520px){
 #menu{width:min(700px,calc(100% - 24px));padding:12px}
 #menu[open]{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
 #menu>.close{position:absolute;top:10px;right:10px}
 #menu h2{grid-column:1/-1;font-size:26px;line-height:36px;margin:0;padding:0 56px 4px 0}
 #menu h3{margin-bottom:6px}
 #menu .settings-language{border:0;padding:0}
 #menu nav{padding:0;align-self:end}
 #menu nav>.btn{min-height:48px}
 #menu #settings-support,#menu>.settings-privacy{grid-column:1/-1}
 #menu #feedback-footer{padding:0}
}

/* Visible action labels share the existing controls and registered artwork. */
.settings-select{display:block;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);font:inherit;color-scheme:dark}
.settings-select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.settings-language label{display:block;margin:16px 0 8px;color:var(--muted)}
#menu>.close{width:auto;padding:10px;min-height:48px}
#menu h2{padding-right:130px}
#menu nav{grid-template-columns:1fr}
html body .app-dock>.btn.icon-only{font-size:0!important;gap:0}
html body .entry .entry-tools>.btn{flex:1 1 80px;width:auto;max-width:none;min-width:0;height:auto;min-height:48px;padding:6px;flex-direction:column}
html body .entry .entry-tools>.btn.icon-only{font-size:0!important}
html body .entry form .primary{width:auto;padding:8px 12px}
html body .style-toggle{width:auto;max-width:180px;height:auto;min-height:48px;padding:8px}
html body .entry .style-toggle{width:auto;max-width:180px}
html body .layout-toolbar>.btn.layout-toggle{width:auto;padding:6px 10px;gap:6px}
html body .actions-footer{flex-wrap:wrap}
html body .actions-footer>.btn{min-width:0;flex:1 1 140px}
@media(orientation:landscape) and (max-height:600px){#menu{padding:16px}#menu h2{padding-bottom:8px;font-size:24px}.settings-language{padding-bottom:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.settings-language h3,.settings-language label{margin:0;grid-row:1}.settings-language select{grid-row:2}#menu nav{padding-top:8px}}
html body #new-view .entry-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:8px}
html body #new-view .entry-input-row>input{grid-column:1;grid-row:1;padding-right:12px}
html body #new-view .entry-input-row>.entry-save{position:static;grid-column:2;grid-row:1;width:48px;min-width:48px;height:48px;min-height:48px;padding:8px;gap:6px;background:var(--panel);border:1px solid var(--line)}
html body #new-view .entry-tools{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:6px}
html body #new-view .entry-tools>.btn{width:100%;height:48px;min-width:48px;min-height:48px;flex-direction:row;padding:6px;gap:5px;border:1px solid var(--line);background:var(--panel);overflow-wrap:normal}
html body #new-view .entry-tools>.btn::before,html body #new-view .entry-tools>.btn img{width:24px;height:24px;flex-basis:24px;filter:none;mix-blend-mode:normal}
html body #new-view .entry-console{max-height:none}
@media(min-width:900px) and (min-height:601px){html body #new-view .entry-tools{grid-template-columns:repeat(auto-fit,minmax(48px,1fr))}}
@media(orientation:landscape) and (max-height:600px){html body #new-view .entry-tools>.btn{min-height:48px;font-size:0!important}html body #new-view .entry-tools>.btn::before{display:block}html body #new-view .entry-tools>.btn img{width:20px;height:20px}html body #new-view .entry-input-row{gap:4px}}

html body #new-view .entry-control-strip{height:auto;min-height:0;display:block;padding:4px;margin-top:6px}
html body #new-view .entry-tools{width:100%}

html body #new-view .entry-tools{grid-template-columns:repeat(auto-fit,minmax(48px,1fr))}
html body #new-view .entry-tools>.btn{max-width:none!important;width:100%!important;height:48px!important;min-width:48px!important;min-height:48px!important;flex-direction:column;overflow-wrap:normal}
html body #new-view .entry-preview-tools{top:8px;left:auto;right:8px;display:flex;gap:4px}
html body #new-view .entry-preview-tools>.btn{width:auto;height:48px;min-width:48px;min-height:48px;flex-direction:column;padding:5px;gap:3px;overflow-wrap:normal;font-size:0!important}
@media(orientation:landscape) and (max-height:600px){html body #new-view .entry-tools>.btn{min-height:48px!important;flex-direction:row;font-size:0!important}html body #new-view .entry-tools>.btn img{display:block}}

html body #new-view .entry-tools{align-items:stretch}
html body #new-view .entry-tools>.btn{align-self:stretch}

/* Reserve a separate strip for preview controls, including expanded preview. */
html body #new-view .entry-sky #entry-sky{top:64px;height:calc(100% - 64px)}

@media(max-width:500px){html body #new-view .entry-tools{grid-template-columns:repeat(4,minmax(48px,1fr))}}

/* House strip: the same top slot as the native ad, shown only when no ad can be displayed. */
:root{--promo-h:0px;--scene-top:max(12px,env(safe-area-inset-top))}
html.promo-strip-on{--promo-h:72px;--scene-top:calc(72px + env(safe-area-inset-top) + 12px)}
.promo-strip{position:fixed;top:0;left:0;right:0;z-index:25;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;height:calc(var(--promo-h) + env(safe-area-inset-top));padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));padding-top:env(safe-area-inset-top);background:#0b1120f2;border-bottom:1px solid #8eadd030;color:var(--text);text-decoration:none;backdrop-filter:blur(12px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.promo-strip[hidden]{display:none}
.promo-strip-icon{width:48px;height:48px;border-radius:12px;pointer-events:none;-webkit-user-drag:none}
.promo-strip-art{display:block;width:auto;max-width:100%;height:44px;object-fit:contain;object-position:left center;pointer-events:none;-webkit-user-drag:none}
.promo-strip-cta{min-height:40px;height:40px;padding:0 16px;font-size:14px;border-radius:12px;background:var(--accent);color:#101827;border-color:var(--accent);white-space:nowrap}
.promo-strip:hover .promo-strip-cta{background:#f0f3ff}
@media(max-width:360px){.promo-strip{gap:8px}.promo-strip-art{height:36px}.promo-strip-cta{padding:0 12px}}
html.promo-strip-on body>.entry-header{top:var(--scene-top)}
html.promo-strip-on .view{height:calc(100dvh - var(--promo-h) - env(safe-area-inset-top));margin-top:calc(var(--promo-h) + env(safe-area-inset-top))}
html.promo-strip-on #feedback{top:calc(var(--scene-top) + 60px)}
html.promo-strip-on dialog,html.promo-strip-on #menu{margin-top:calc(var(--scene-top) + 64px);max-height:calc(100dvh - var(--scene-top) - 90px)}

/* Scene rails: one pill of equal icon actions, shared by the constellation viewer and the galaxy. */
:root{--rail-h:60px}
.scene-rail{position:absolute;left:50%;transform:translateX(-50%);z-index:3;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);gap:6px;width:min(480px,calc(100% - 24px));height:var(--rail-h);padding:6px;border:1px solid #8eadd036;border-radius:18px;background:#101827dc;backdrop-filter:blur(18px);box-shadow:0 16px 56px #0008}
.scene-rail>.btn,#sky-view #sky-rail>.btn,#sky-view #sky-rail>.style-toggle{position:static;top:auto;right:auto;bottom:auto;left:auto;width:auto;min-width:44px;height:48px;min-height:48px;margin:0;padding:0;font-size:0;gap:0;opacity:1;border-radius:13px;display:flex;align-items:center;justify-content:center}
.scene-rail>.btn[data-icon]::before{width:28px;height:28px;flex-basis:28px;margin:0}
html body .scene-rail>.style-toggle{width:auto;max-width:none;height:48px;min-height:48px;padding:0}
.scene-rail>.style-toggle img{width:36px;height:36px}
#sky-view #sky-rail{top:calc(var(--scene-top) + 60px)}
html #galaxy-view .galaxy-title{top:calc(var(--scene-top) + 66px);left:0;right:0;text-align:center}
.galaxy-controls{bottom:calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 12px)}
#galaxy-field{inset:calc(var(--scene-top) + 96px) 0 calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + var(--rail-h) + 20px)}
@media(min-width:900px){.scene-rail{width:auto;grid-auto-columns:minmax(56px,auto);height:auto;padding:8px;border-radius:22px}.scene-rail>.btn{width:56px;height:56px;min-height:56px}.scene-rail>.btn[data-icon]::before{width:32px;height:32px;flex-basis:32px}.scene-rail>.style-toggle{height:56px;min-height:56px}.scene-rail>.style-toggle img{width:40px;height:40px}#galaxy-field{inset:calc(var(--scene-top) + 110px) 0 calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 100px)}}
@media(orientation:landscape) and (max-height:600px){#sky-view #sky-rail{top:calc(var(--scene-top) + 48px)}.scene-rail{height:52px;padding:4px}.scene-rail>.btn,#sky-view #sky-rail>.btn{height:44px;min-height:44px}html body .scene-rail>.style-toggle{height:44px;min-height:44px}html #galaxy-view .galaxy-title{top:calc(var(--scene-top) + 14px);left:max(216px,calc(env(safe-area-inset-left) + 200px));right:auto;text-align:left;line-height:24px}html body #sky-view #word-label{bottom:calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 6px);font-size:22px}}

/* Save: centred artwork, a visible press, and a golden state once the phrase is already in the collection. */
html body #new-view .entry-input-row>.entry-save{display:grid;place-items:center;padding:0;gap:0;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s}
html body #new-view .entry-input-row>.entry-save::before{width:34px;height:34px;flex-basis:34px;margin:0;grid-area:1/1}
html body #new-view .entry-input-row>.entry-save>span{grid-area:1/1}
html body #new-view .entry-input-row>.entry-save:active{transform:scale(.9);background:#e6ebff2c}
/* Saved: the button keeps its dark surface with a golden rim; the check itself lights up in the centre. */
html body #new-view .entry-input-row>.entry-save.is-saved{background:#f0d68a1f;border-color:#f0d68a;box-shadow:inset 0 0 0 1px #f0d68a55,0 0 14px #f0d68a55}
html body #new-view .entry-input-row>.entry-save.is-saved::before{filter:brightness(1.2) saturate(1.25) drop-shadow(0 0 4px #f8e3a0) drop-shadow(0 0 10px #f0d68aaa);mix-blend-mode:normal}
html body #new-view .entry-input-row>.entry-save::before{mix-blend-mode:normal;filter:grayscale(1) brightness(2.6) contrast(1.3) drop-shadow(0 0 3px #dfeeff66)}
html body #new-view .entry-input-row>.entry-save.just-saved{animation:save-pop .55s ease-out}
@keyframes save-pop{0%{transform:scale(1)}35%{transform:scale(1.16);box-shadow:0 0 0 6px #f0d68a44,0 0 26px #f0d68a99}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){html body #new-view .entry-input-row>.entry-save.just-saved{animation:none}}

/* The word caption always clears the dock, whatever share of the screen it was given. */
html #sky-view #word-label{bottom:max(12%,calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 8px))}
@media(max-width:500px){html #sky-view #word-label{bottom:max(20%,calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 8px))}}
@media(max-width:500px) and (orientation:portrait){html #sky-view #word-label{bottom:max(clamp(160px,24vh,240px),calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 8px))}}
@media(max-height:500px) and (orientation:portrait){html #sky-view #word-label{bottom:max(15%,calc(var(--dock-height) + max(16px,env(safe-area-inset-bottom)) + 8px))}}
/* Desktop keyboard: the layout switch sits beside the short last row, never over a full first row. */
@media(min-width:900px) and (min-height:601px){html body .entry #entry-keyboard .layout-toolbar{padding-right:56px}html body #entry-keyboard .layout-toolbar>.btn.layout-toggle{top:auto;bottom:0}}
/* The sky window and the command deck are two separate rounded cards: the deck sits outside the sky frame. */
html body #new-view .observatory{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
html body #new-view .observatory>.entry-sky{border:1px solid #8eadd02e;border-bottom:0;border-radius:24px 24px 0 0;background-color:#0b1222}
html body #new-view .observatory>.entry-caption{border:1px solid #8eadd02e;border-top:0;border-radius:0 0 24px 24px;background:#0b1222;box-shadow:0 18px 48px #0206124d}
html body #new-view .observatory>.entry-console{margin:8px 0 0;border:1px solid #8eadd02e;border-radius:22px;background:linear-gradient(160deg,#16223af2,#0a1122f7);box-shadow:inset 0 1px #ffffff17,0 12px 32px #02071466}
@media(orientation:landscape) and (max-height:600px){html body #new-view .observatory>.entry-console{margin:0 0 0 8px}html body #new-view .entry-tools{grid-template-columns:repeat(auto-fit,minmax(40px,1fr))}}

/* The app never zooms as a web page: double taps and pinches stay app gestures. Canvas gestures keep their own rules. */
html,body{touch-action:manipulation}