:root{color-scheme:dark;--bg:#070b17;--panel:#101727;--text:#e9eafa;--muted:#a6b1ce;--line:#344058;--accent:#bdd6fa;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,sans-serif;overflow:hidden}#space{position:fixed;inset:0;pointer-events:none}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}.btn:hover{background:#202d47;border-color:#7186ac}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.primary{background:var(--accent);color:#101827;border-color:var(--accent)}.primary:hover{background:#e0eaff}input{min-width:0;width:100%;height:54px;border:1px solid var(--line);border-radius:14px;background:#0b1120;color:var(--text);padding:12px 16px}label{display:block;color:var(--muted);margin-bottom:10px}h1,h2,p{margin:0}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,52px)}h2{font-weight:500;font-size:20px}.view{position:relative;width:100%;height:100dvh}.view[hidden]{display:none}.menu-toggle{position:fixed;left:max(20px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top));z-index:10;padding:5px;border-radius:50%;width:60px;height:60px;background:#0b1120c9}.menu-toggle img{border-radius:50%}.entry{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:90px 24px 30px;gap:20px}.entry>img{border-radius:28px}.entry form{width:min(460px,100%)}form .btn{width:100%;margin-top:16px}#input-feedback{font-size:14px;margin-top:12px;color:var(--muted)}#sky{display:block;width:100%;height:100%}#word-label{position:absolute;bottom:12%;left:10%;right:10%;text-align:center;font:clamp(24px,4vw,54px)/1.2 Georgia,serif;color:var(--accent);overflow-wrap:anywhere;pointer-events:none}dialog{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);color:var(--text);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#020611b8;backdrop-filter:blur(12px)}dialog h2{padding:64px 0 22px;overflow-wrap:anywhere}dialog nav{display:grid;gap:10px}dialog>.btn:not(.close),dialog>a{width:100%;margin-top:12px}.close{position:absolute;right:18px;top:18px}.list-view{padding:110px max(24px,calc((100vw - 1440px)/2)) 30px;overflow-y:auto}.list-view h1{margin-bottom:28px}#collection{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}.card{min-width:0;border:1px solid #243048;border-radius:var(--radius);background:#0b1222c4;overflow:hidden}.card canvas{display:block;width:100%;height:210px}.card-body{padding:18px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}.card h2{flex:1 1 100%;overflow-wrap:anywhere}.card-body .btn{font-size:14px;padding:10px 16px}#empty{margin-top:22px;color:var(--muted)}#more{margin-top:22px}#feedback{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--panel);border-radius:12px;z-index:30;text-align:center;font-size:14px}#feedback:not(:empty){padding:10px 16px;border:1px solid var(--line)}#galaxy-field{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}.galaxy-controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap}.galaxy-title{top:32px;left:100px;color:var(--muted);pointer-events:none}@media(max-width:500px){.menu-toggle{top:16px;left:16px}.galaxy-controls .btn{padding:10px;font-size:13px}.entry{gap:16px}.entry>img{width:84px;height:84px}.list-view{padding:100px 18px 24px}#word-label{bottom:20%}.card canvas{height:185px}}@media(max-height:500px){.entry{padding-top:26px;gap:10px}.entry>img{display:none}.entry h1{font-size:28px}.entry form{display:grid;grid-template-columns:1fr 190px;gap:10px}.entry label{grid-column:1/-1;margin:0}.entry form .btn{margin:0}.entry #input-feedback{grid-column:1/-1;margin:0}#word-label{bottom:15%;font-size:24px}dialog h2{padding-top:45px}dialog nav{grid-template-columns:1fr 1fr}dialog{padding:20px}.list-view{padding-top:90px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.intro{text-align:center;color:var(--muted);max-width:500px}.entry h1{text-align:center;font-size:clamp(28px,3.5vw,46px)}.btn{background:#ffffff08;border-color:#ffffff24;backdrop-filter:blur(10px)}.btn:hover{background:#e6ebff22;border-color:#e2eaffaa;box-shadow:0 0 18px #e6ebff12}.primary{background:#d6e3f0;color:#101827}.primary:hover{background:#f0f3ff}.entry #entry-keyboard .layout-keyboard{display:none}#history-open{position:absolute;left:24px;bottom:24px}@media(max-height:500px){.intro{display:none}#entry-keyboard{grid-column:1/-1}.entry form{max-width:550px}.entry #entry-keyboard{display:none}}

/* Game controls keep their focus inside the frame instead of showing a browser ring. */
#sky-actions{position:absolute;right:24px;bottom:max(24px,env(safe-area-inset-bottom));opacity:.85}





.btn[data-icon]::before,.btn>img:only-child{align-self:center}

#feedback{bottom:auto;top:90px;pointer-events:none}

.galaxy-title{top:96px;left:24px}@media(max-width:500px){.entry{padding-top:110px}}

.btn[hidden]{display:none}

#share-collection{margin:0 0 24px;max-width:100%}.btn[hidden]{display:none}

/* Reference observatory: stacked on phones, split controls on wide screens. */
:root{--gold:#edcf96;--entry-border:#ffffff18}
.entry{display:grid;grid-template-rows:auto auto minmax(0,1fr);align-items:stretch;justify-content:stretch;gap:18px;max-width:1600px;margin:auto;padding:88px max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));height:100dvh}
.entry-header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--entry-border);padding-bottom:16px;min-width:0}
.entry-brand{font:bold clamp(20px,2.4vw,30px) Georgia,serif;color:var(--text);text-decoration:none;white-space:nowrap}
.observatory{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;border:1px solid var(--entry-border);border-radius:20px;overflow:hidden;background:#090e1aeb;box-shadow:0 20px 65px #0003}
.entry-sky{position:relative;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#17203a55,transparent 75%)}
#entry-sky{display:block;width:100%;height:calc(100% - 74px);min-height:90px}
.entry-caption{position:absolute;left:22px;right:22px;bottom:22px;display:flex;align-items:end;gap:16px;justify-content:space-between}
#entry-word{font:clamp(25px,3vw,38px)/1.15 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.entry-console{display:grid;gap:12px;padding:20px 16px;background:var(--panel);border-top:1px solid var(--entry-border);min-width:0}
.entry form{display:block;width:100%;max-width:none;min-width:0}
.entry label{font-size:12px;margin-bottom:8px}
.entry-input-row{display:flex;gap:10px;align-items:center}
.entry input{font-size:16px;height:50px;padding:12px;text-transform:uppercase}
.entry form .primary{width:auto;flex-shrink:0;min-height:50px;margin:0;background:var(--gold);border-color:var(--gold);color:#1b1920;padding:10px 15px;font-size:13px}
.entry form .primary:hover{background:#ffe1ab}
.entry #input-feedback{margin:0;font-size:12px}
.entry #input-feedback:not(:empty){margin-top:8px}
.entry #entry-keyboard{display:block;min-width:0}
.entry #entry-keyboard .layout-keyboard{display:block}
.entry .layout-toolbar{gap:12px}
.entry .layout-key{height:24px;flex-basis:29px}
.entry .layout-key-row{margin:3px 0}
.entry .layout-toggle{margin:0}
@media(min-width:900px) and (min-height:601px){.entry{padding:88px 40px 34px;gap:26px}.entry-header{padding-bottom:24px}.entry-console{grid-template-columns:1.1fr 1fr;gap:38px;padding:24px 28px}.entry-caption{left:28px;right:28px}.entry .layout-key{height:26px}.entry-brand{font-size:30px}}
@media(max-width:420px){.entry-header{gap:8px}.entry-brand{font-size:19px}.entry-console{padding:16px 12px}.entry .layout-toolbar{gap:8px}.entry-caption{left:16px;right:16px}}
@media(orientation:landscape) and (max-height:600px){.entry{padding:76px max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));gap:8px;grid-template-rows:auto minmax(0,1fr)}.entry-header{border:0;padding:0;min-height:36px}.entry-brand{font-size:23px}.observatory{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);grid-template-rows:minmax(0,1fr);border-radius:16px}.entry-console{border-top:0;border-left:1px solid var(--entry-border);padding:12px 16px;gap:8px;align-content:center}.entry .layout-key{height:19px}.entry label{margin-bottom:5px}.entry input{height:46px}.entry form .primary{min-height:46px;padding:8px 12px}.entry-caption{bottom:14px;left:18px;right:18px}#entry-word{font-size:25px}#entry-sky{height:calc(100% - 48px)}}
@media(min-width:2000px){.entry{max-width:2100px;padding-top:110px;padding-bottom:60px;gap:36px}.entry-console{padding:36px 44px}.entry .layout-key{height:32px;flex-basis:38px}}

.entry-field-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.entry .entry-field-heading label{margin:0}
.entry form .voice-input{margin:0;width:auto;min-height:44px;padding:7px 14px;font-size:13px;color:var(--gold)}
.entry form .voice-input[aria-pressed="true"]{border-color:var(--gold);background:#edcf9620}
#voice-status{font-size:12px;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
#voice-status:not(:empty){margin-top:8px}
@media(orientation:landscape) and (max-height:600px){.entry-field-heading{margin-bottom:4px}.entry-console{padding-top:8px;padding-bottom:8px;gap:4px}.entry #voice-status{font-size:11px}.entry #voice-status:not(:empty){margin-top:4px}}

/* Keep navigation outside the camera viewport, including compact touch screens. */
#galaxy-field{inset:130px 0 96px} .galaxy-controls{flex-wrap:wrap;justify-content:center;width:calc(100% - 32px);max-width:960px}.galaxy-controls .btn{min-height:48px}#galaxy-empty{position:absolute;top:45%;left:24px;right:24px;text-align:center;color:var(--muted);pointer-events:none}@media(max-width:600px){#galaxy-field{bottom:152px}.galaxy-controls{bottom:max(16px,env(safe-area-inset-bottom))}.galaxy-controls .btn{flex:1 0 28%;padding:10px;font-size:13px}}@media(max-height:500px) and (min-width:601px){#galaxy-field{top:120px;bottom:84px}.galaxy-controls{bottom:16px}.galaxy-controls .btn{padding:10px 14px}}

/* The editor prioritizes a live draft; collection actions remain in a separate footer. */
#actions{width:min(920px,calc(100% - 32px));padding:24px;overflow:hidden}
.actions-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
#actions .actions-header h2{padding:0;font:400 27px/1.2 Georgia,serif}
.actions-header>.btn{flex-shrink:0}
.actions-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px}
.actions-preview{min-width:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border:1px solid var(--entry-border);border-radius:16px;background:radial-gradient(ellipse at 50% 35%,#24314a66,#090e1a)}
#actions-sky{display:block;width:100%;height:220px}
#actions-title{margin:0;padding:0 18px 22px;text-align:center;font:400 24px/1.25 Georgia,serif;color:var(--gold);overflow-wrap:anywhere}
#add-form{min-width:0;align-self:center}
#add-form label{font-size:13px;margin-bottom:8px}
#add-form .primary{background:var(--gold);border-color:var(--gold);margin-top:12px}
#add-form .primary:hover{background:#ffe1ab}
#add-feedback{font-size:12px;color:var(--muted)}
#actions-keyboard{margin-top:14px}
#actions-keyboard .layout-toolbar{flex-direction:row;align-items:center;gap:10px}
#actions-keyboard .layout-toggle{align-self:center;flex:0 0 48px;width:48px;min-height:48px;padding:6px}
#actions-keyboard .layout-key{flex-basis:40px;height:34px;font-size:13px}
.actions-footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--entry-border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.actions-secondary{display:flex;gap:8px}
.actions-footer .btn{font-size:13px;padding:10px 12px}
@media(max-width:650px){#actions{padding:16px}.actions-header{margin-bottom:12px;gap:8px}#actions .actions-header h2{font-size:22px}.actions-header>.btn{padding:8px 10px;font-size:13px}.actions-body{grid-template-columns:1fr;gap:14px}#actions-sky{height:150px}#actions-title{font-size:20px;padding:0 12px 12px}#actions-keyboard{margin-top:10px}#actions-keyboard .layout-toolbar{flex-direction:row;align-items:center;gap:8px}#actions-keyboard .layout-toggle{align-self:center;min-width:40px;padding:6px}#actions-keyboard .layout-key{height:29px;font-size:11px}.actions-footer{margin-top:14px;padding-top:12px;display:grid;gap:8px}.actions-secondary{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.actions-footer .btn{padding:8px;font-size:12px}}
@media(orientation:landscape) and (max-height:600px){#actions{width:min(920px,calc(100% - 24px));padding:12px 16px}.actions-header{margin-bottom:8px}#actions .actions-header h2{font-size:22px}.actions-header .btn{min-height:40px;padding:6px 12px}.actions-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px}#actions-sky{height:140px}#actions-title{font-size:19px;padding:0 12px 12px}#add-form label{margin:0}#add-word{height:40px}#actions-keyboard{margin-top:4px}#actions-keyboard .layout-toolbar{flex-direction:row;align-items:center;gap:8px}#actions-keyboard .layout-toggle{align-self:center;min-width:40px;padding:6px}#actions-keyboard .layout-key{height:21px;font-size:11px}.layout-key-row{margin:2px 0}#add-form .primary{min-height:40px;padding:6px 12px;margin-top:6px}.actions-footer{margin-top:8px;padding-top:8px}.actions-footer .btn{min-height:40px;padding:6px 10px}}

/* The same picker is anchored to both constellation canvases. */
.style-toggle{position:absolute;top:12px;right:12px;width:52px;height:52px;padding:5px;border-radius:16px;z-index:2}
.style-toggle img{display:block;width:40px;height:40px;object-fit:contain}
#sky-view>.style-toggle{top:100px;right:24px}
#style-dialog{width:min(780px,calc(100% - 24px));padding:20px}
#style-dialog h2{font-size:24px;padding:56px 0 18px}
#style-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.style-option{display:flex;flex-direction:column;min-width:0;min-height:100px;gap:4px;padding:0 0 10px;border-radius:14px;overflow:hidden}
.style-option canvas{display:block;width:100%;height:110px;pointer-events:none}
.style-option span{font-size:12px;line-height:1.3;padding:0 4px;white-space:normal}
.style-option[aria-pressed="true"]{border-color:var(--gold);background:#edcf9614;box-shadow:inset 0 0 0 1px var(--gold)}
.btn:active:not(:disabled){filter:brightness(1.15)}
@media(max-width:600px){#style-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#style-dialog{padding:16px}#style-dialog h2{font-size:22px;padding-bottom:12px}.style-option{min-height:80px;padding-bottom:6px}.style-option canvas{height:74px}}
@media(orientation:landscape) and (max-height:600px){#style-options{grid-template-columns:repeat(5,minmax(0,1fr))}.style-option{min-height:80px;padding-bottom:6px}.style-option canvas{height:65px}#style-dialog h2{padding-top:0;padding-right:120px;font-size:22px}.style-toggle{top:8px;right:8px}}
#actions-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:82px;overflow:hidden}


/* History opens into the sky while the input and keyboard stay still. */
.entry-field-heading{position:relative}
#entry-history-toggle{min-height:48px;padding:8px 12px;font-size:13px;margin:0 0 0 auto;width:auto}
#entry-history{position:absolute;bottom:calc(100% + 12px);left:0;right:0;z-index:6;background:var(--panel);border:1px solid var(--entry-border);border-radius:16px;padding:8px;box-shadow:0 12px 32px #0008}
#history-items{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.history-card{position:relative;flex:0 0 132px;min-width:0;scroll-snap-align:start}
#history-items .history-preview{display:flex;flex-direction:column;gap:0;width:100%;padding:0 0 8px;overflow:hidden;background:#090e1a}
.history-preview canvas{display:block;width:100%;height:76px}
.history-preview span{display:block;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
#history-items .history-save{position:absolute;top:4px;right:4px;min-height:40px;width:40px;padding:6px}
#history-empty{font-size:13px;color:var(--muted);margin:8px}
/* iOS uses the empty input font at focus to decide whether to zoom the page. */
.entry input:placeholder-shown{text-transform:none;font-size:16px}
.entry .entry-field-heading{gap:8px;margin-bottom:8px}
.entry form .voice-input{width:48px;min-width:48px;min-height:48px;padding:8px;flex:none}
.entry form .voice-input::before{width:30px;height:30px;flex-basis:30px}
.entry form .voice-input[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold),0 0 20px #edcf9640}
.entry .layout-toolbar>.layout-toggle,#actions-keyboard .layout-toolbar>.layout-toggle{flex:0 0 48px;width:48px;min-width:48px;min-height:48px;padding:6px;align-self:center}
.layout-toggle[data-icon]::before{display:none}
.entry-console{gap:16px;padding:16px}
.entry-input-row{gap:8px}
.entry input{flex:1;min-width:0}
.entry form .primary{min-height:50px}
#galaxy-shared-controls{position:absolute;top:82px;right:20px;max-width:calc(100% - 130px);z-index:2}
#shared-controls:empty,#galaxy-shared-controls:empty,#community-moderator:empty{display:none}
#community-moderator{display:contents}
@media(min-width:900px) and (min-height:601px){.entry-console{gap:28px;padding:20px 24px;align-items:center}}
@media(max-width:500px){.entry-input-row{flex-wrap:wrap}.entry-input-row input{flex-basis:calc(100% - 74px)}.entry form .primary{width:54px;font-size:0;padding:10px}.entry form .primary::before{width:28px;height:28px;flex-basis:28px}.entry .entry-field-heading label{font-size:12px}.entry-console{padding:12px;gap:12px}.entry .layout-key{height:24px}}
@media(orientation:landscape) and (max-height:600px){
 .entry-console{padding:8px 12px;gap:8px}.entry .entry-field-heading{margin-bottom:6px}.entry .layout-key{height:18px}.entry .layout-key-row{margin:2px 0}
 #entry-history{bottom:auto;top:0;left:auto;right:calc(100% + 24px);width:calc((100vw - 72px)*.5);max-width:480px}
 .history-preview canvas{height:66px}.history-card{flex-basis:120px}
 #actions-keyboard .layout-toolbar>.layout-toggle{min-height:48px}.entry form .primary{min-height:48px}.entry input{height:48px}
}
.layout-toolbar>.btn.layout-toggle::before{display:none}
#actions #add-form label{margin-bottom:8px}
.entry input:focus-visible,#actions input:focus-visible{outline-width:2px;outline-offset:2px}

/* Keep dynamically mounted community dialogs consistent with the project close control. */
.community-dialog>button:first-child{position:absolute;right:16px;top:16px;width:auto;margin:0;min-height:44px}
.community-dialog h2{padding:52px 0 16px}
.community-dialog label:has(select){display:grid;gap:8px}

@media(max-height:500px) and (min-width:601px){.galaxy-title{top:32px;left:100px}}

/* Keep the constellation and its complete word together above the folding keyboard. */
.entry{gap:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.entry-header{padding-bottom:8px}
.entry-sky{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.entry #entry-sky{height:100%;min-height:0}
.entry-caption{position:static;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 14px 12px;text-align:center}
#entry-word{font-size:clamp(22px,3vw,38px);white-space:normal;overflow-wrap:anywhere;text-overflow:clip;max-width:100%;line-height:1.15}
.entry-console{gap:6px;padding:8px 12px}
#entry-keyboard-toggle{width:auto;margin:0;min-height:44px;padding:6px 8px;font-size:11px;color:var(--muted)}
.entry #entry-history-toggle{width:44px;min-height:44px;padding:8px;font-size:0}
.entry #entry-history-toggle::before{width:26px;flex-basis:26px}
.entry #entry-keyboard[hidden]{display:none}
.entry.keyboard-collapsed .entry-console{grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:900px) and (min-height:601px){.entry-console{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:24px}.entry #entry-keyboard{grid-column:2}}
@media(max-width:500px){.entry-header{min-height:40px}.entry.keyboard-collapsed .entry-console{grid-template-columns:minmax(0,1fr)}#entry-word{font-size:clamp(20px,6vw,28px)}}
@media(orientation:landscape) and (max-height:600px){.entry-caption{padding-bottom:6px}.entry.keyboard-collapsed .entry-console{grid-template-columns:minmax(0,1fr)}#entry-word{font-size:22px}.entry-console{align-content:center}#entry-keyboard-toggle{min-height:40px}.entry .entry-field-heading{margin-bottom:4px}}
@media(max-width:500px){.entry-caption{flex-direction:row;align-items:center;justify-content:center;gap:8px}.entry .entry-field-heading{gap:6px}.entry .entry-field-heading label{font-size:11px}.entry #entry-history-toggle{margin-left:auto}.entry .style-toggle{width:40px;height:40px;top:6px;right:8px;padding:3px}.entry .style-toggle img{width:32px;height:32px}}
#entry-word.long-word{font-size:clamp(15px,1.5vw,26px)}

/* The reference layout gives writing the first line and places commands below it. */
#new-view .entry-input-row{display:block;position:relative}
#new-view .entry-input-row>#word{display:block;width:100%;height:56px;min-height:56px;padding-right:64px}
#new-view .entry-control-strip{display:flex;align-items:center;gap:8px;min-height:56px;margin:8px 0 0;padding:4px 8px;border:1px solid #eaf2ff4a;border-radius:16px;background:linear-gradient(110deg,#0b1634ed,#17264ced 52%,#0b1634ed),url('/assets/loading-sky.png') center/cover;box-shadow:inset 0 1px #ffffff38,0 8px 24px #02071455}
#new-view .entry-tools{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;min-width:0;width:auto;flex:1}
.entry-tools>.btn{position:relative;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;border-color:#d9ad598a;background:radial-gradient(circle at 35% 22%,#ffffff27,transparent 28%),linear-gradient(145deg,#1d315c,#091126 64%,#030713);box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 0 0 3px #070d1c,0 4px 14px #0009;overflow:hidden}
.entry-tools>.btn::after{content:"";position:absolute;inset:1px;border:1px solid #f3cd8145;border-radius:inherit;pointer-events:none}
.entry-tools>.btn:hover{background:radial-gradient(circle at 35% 22%,#fff2bd40,transparent 30%),linear-gradient(145deg,#28477d,#0f1d43 64%,#060b18);border-color:#f2cd83;box-shadow:inset 0 0 0 1px #fff1c475,0 0 20px #d7a85666}
.entry-tools>.btn:active{transform:scale(.96);background:#1b315f}
.entry-tools>.btn::before{position:relative;z-index:1;width:44px;height:44px;flex-basis:44px}
.entry-tools>.style-toggle{position:relative;top:auto;right:auto;display:flex;align-items:center;justify-content:center}
.entry-tools>.style-toggle img{position:relative;z-index:1;width:44px;height:44px}
.entry-tools>#studio-style{font-size:0}
.entry-tools>#entry-random::before{display:none}
.entry-tools>#entry-random img{display:block;position:relative;z-index:1;width:44px;height:44px;object-fit:contain}
.entry-tools>#entry-history-toggle{font-size:0}
.entry-tools>#entry-history-toggle::before{background-position:33.333333% 33.333333%}
.entry-tools>#entry-clear::before{background-image:url('/assets/trash.png');background-size:contain;background-position:center;filter:grayscale(1) brightness(3.5) contrast(1.2)}
.entry-tools>#voice-input::before{background-position:100% 66.666667%}
.entry-tools>.studio-actions::before{background-position:66.666667% 0}
/* Keep the registered save mark centered inside the field, matching the rail's starlight art. */
#new-view .entry-input-row>.entry-save{position:absolute;right:4px;top:4px;display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;height:48px;min-height:48px;margin:0;padding:0;gap:0;font-size:0;border:0;border-radius:12px;background:transparent;color:var(--text);box-shadow:none}
#new-view .entry-input-row>.entry-save::before{width:40px;height:40px;flex:0 0 40px;margin:0;filter:grayscale(1) brightness(2.8) contrast(1.35);mix-blend-mode:screen}
#new-view .entry-input-row>.entry-save:hover{background:#e6ebff18;box-shadow:0 0 14px #dfeeff4a}
#new-view .entry-input-row>.entry-save:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent),0 0 14px #dfeeff4a}
#new-view .entry-input-row>.entry-save:active{transform:scale(.96)}
#new-view .entry-input-row>.entry-save:disabled{opacity:.45;transform:none;background:transparent;box-shadow:none}
#new-view .keyboard-shelf{display:flex;align-items:flex-end;gap:8px;min-width:0;padding:8px;border:1px solid var(--entry-border);border-radius:16px;background:#080f1f80}#new-view #entry-keyboard{min-width:0;flex:1}
#new-view #entry-keyboard-toggle{flex:0 0 44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none}#new-view #entry-keyboard-toggle:hover,#new-view #entry-keyboard-toggle:active{background:transparent;box-shadow:none;filter:none}#new-view #entry-keyboard-toggle .keyboard-fold-art{display:block;width:20px;height:20px;margin:auto;background:var(--muted);mask:url('/assets/star-arrow-controls.png') 100% 50%/200% 100% no-repeat;mask-mode:luminance}#new-view #entry-keyboard-toggle[aria-expanded=false] .keyboard-fold-art{transform:rotate(180deg)}
@media(min-width:900px) and (min-height:601px){#new-view .entry-console{grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);column-gap:24px;align-items:center}#new-view #word-form{grid-column:1;grid-row:1}#new-view .keyboard-shelf{grid-column:2;grid-row:1}}@media(max-width:899px){#new-view .entry-console{grid-template-columns:minmax(0,1fr)}#new-view .keyboard-shelf{display:none}}@media(max-width:500px){#new-view .entry-control-strip{min-height:52px;margin-top:6px;padding:4px;gap:4px;flex-wrap:nowrap}#new-view .entry-tools{gap:4px;justify-content:space-between;flex:1 1 auto}#new-view .entry-tools>.btn{width:44px;min-width:44px;height:44px;min-height:44px}.entry-tools>.btn::before{width:40px;height:40px;flex-basis:40px}#new-view .entry-tools>#entry-random img{width:40px;height:40px}#new-view .entry-save{flex:0 0 48px;width:48px;min-height:44px}}
@media(orientation:landscape) and (max-height:600px){.entry-tools>.btn::before{width:36px;height:36px;flex-basis:36px}.entry-tools>#entry-random img{width:36px;height:36px}}

/* Reserve a header above the absolutely positioned sky; the diagram is live data, not an art icon. */
.entry .entry-sky canvas#entry-sky{top:60px;height:calc(100% - 60px)}
#entry-letter-meter{display:flex;align-items:center;gap:6px;justify-self:start;margin-left:-8px;padding:4px 8px;height:60px;pointer-events:none;color:var(--text)}
#entry-letter-meter canvas{display:block;width:52px;height:52px}
#entry-letter-meter output{font:24px/1 Georgia,serif;font-variant-numeric:tabular-nums;min-width:3ch}
@media(max-height:600px){.entry .entry-sky canvas#entry-sky{top:40px;height:calc(100% - 40px)}#entry-letter-meter{height:40px;padding:0 10px;gap:6px}#entry-letter-meter canvas{width:38px;height:38px}#entry-letter-meter output{font-size:20px}}

/* Result actions refer only to the displayed saved phrase; editing has its own commit. */
#actions [hidden]{display:none!important}
#actions:not(.complementing){width:min(680px,calc(100% - 32px))}
#actions:not(.complementing) .actions-body{grid-template-columns:1fr}
#actions .actions-footer{flex-wrap:wrap}
#actions-original{color:var(--muted);font-size:13px;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cancel-complement{margin-top:8px}
@media(max-height:600px){#actions-original{margin-bottom:4px}#cancel-complement{min-height:36px;padding:4px;margin-top:4px}}
@media(orientation:landscape) and (max-height:600px){
 #actions.complementing #add-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:8px}
 #actions-original,#actions #add-form label,#add-word,#actions-keyboard,#add-feedback{grid-column:1/-1}
 #actions #add-form .primary,#actions #cancel-complement{width:auto;min-height:40px;margin-top:6px;padding:6px 10px;font-size:13px}
}
@media(orientation:landscape) and (max-height:600px){
 #actions #actions-original{font-size:12px;line-height:14px;margin:0 0 2px}
 #actions #add-form label{font-size:13px;line-height:16px;margin-bottom:2px}
 #actions-keyboard .layout-key{height:19px}
}

/* Theme the existing starfield without changing constellation data or node colors. */
.constellation-sky{background:var(--sky-background,none)}
html[data-sky-background]:not([data-sky-background="classic"]) .entry-sky{background:var(--sky-background)}
html[data-sky-background]:not([data-sky-background="classic"]) .entry-sky .constellation-sky{background:none}
html.store-screenshot-mode #mood-player-embed{display:none!important}
#mood-player-embed{display:none!important}
html:not(.store-screenshot-mode) body:has(#new-view:not([hidden])):not(:has(dialog[open])):not(:has(#app-loading)) #mood-player-embed{display:block!important}
.download-sheet{display:flex;flex-direction:column}.download-gamefirst{align-self:center;margin-top:22px;color:var(--muted);font-size:12px;letter-spacing:.12em;text-decoration:none}.download-gamefirst:hover,.download-gamefirst:focus-visible{color:var(--gold);text-decoration:underline}
@media(max-width:500px){#new-view .entry-control-strip{flex-wrap:nowrap}#new-view .entry-tools{flex:1 1 auto}}
@media(max-width:500px) and (orientation:portrait){#word-label{bottom:clamp(160px,24vh,240px)}}
.sky-style-tabs{display:flex;gap:8px;flex-shrink:0;padding:0 0 12px}
.sky-style-tabs .btn{min-height:44px;padding:8px 14px;font-size:14px}
.sky-style-tabs .btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
@media(max-height:500px){.sky-style-tabs{padding-bottom:6px}.sky-style-tabs .btn{min-height:40px;padding:6px 12px}}