[hidden]{display:none!important}
.web-loading{visibility:hidden}
.login-page{padding:0;min-height:100dvh;background:radial-gradient(ellipse at 5% 0%,#253446,transparent 60%),#12151d}
.login-layout{max-width:1120px;min-height:100dvh;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:72px;padding:48px 32px}
.login-intro h1{font-size:clamp(32px,4vw,48px);line-height:1.35;margin:24px 0;color:#f4eedc}
.login-intro p{line-height:1.8;color:#bcc4d3}.login-intro .eyebrow{color:#dbbd84;margin-top:28px;font-size:12px;letter-spacing:.16em}
.login-notes{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}.login-notes span{border:1px solid #3d4556;border-radius:20px;padding:8px 14px;font-size:13px;color:#c5cbd6}
.login-card{padding:30px!important}.login-card h2{font-size:25px}.login-card label{margin-top:18px}.login-card .row{margin-top:20px}.login-card input{font-size:16px}
.enter-studio{display:block;padding:14px;color:#f4d59a;text-decoration:none;text-align:center}
#syncBanner{position:sticky;top:0;z-index:100;background:#632d31;color:#fff;padding:16px;line-height:1.6}#syncBanner button{margin:8px}
.web-account{display:flex;gap:12px;align-items:center;justify-content:space-between}.web-account span{overflow-wrap:anywhere}
#webSaved{font-size:12px;color:var(--muted,#b9c1cd);padding:0 8px}
#webVersion{display:inline-block;font-size:10px;letter-spacing:0;font-weight:400;color:var(--muted);white-space:nowrap}
.studio-brand{min-width:0;flex:1}.studio-header-actions{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin-left:auto;flex-shrink:0}.studio-main-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:5px 10px;border:1px solid var(--line);border-radius:9px;font-size:12px;color:var(--gold);text-decoration:none;white-space:nowrap}.studio-main-link:hover{background:var(--field)}.studio-main-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.studio-header-actions #newProject{margin:0;min-height:30px;padding:3px 8px;font-size:12px}
@media(min-width:1100px){.studio-header-actions{flex-direction:row;align-items:center;gap:8px}.studio-header-actions #newProject,.studio-main-link{min-height:36px}}
@media(max-width:380px){header>.studio-brand strong{font-size:14px}header>.studio-brand small{font-size:9px;letter-spacing:0}header>img{width:30px;height:30px}.studio-main-link{font-size:11px;padding:5px 7px}}
@media(min-width:1000px){body:not(.login-page) footer{width:min(100%,1380px);right:auto;padding:10px 36px 12px}#promptFields>.creative-tools{grid-column:1/-1;align-items:center}#promptFields>.creative-tools button{flex:0 1 auto}#promptFields{align-items:start}}
@media(min-width:1000px){body:not(.login-page){max-width:1380px;margin:auto;padding-bottom:150px}body:not(.login-page)>header,.projectbar{max-width:1380px;margin:auto}main{max-width:1180px;margin:auto}footer{max-width:1380px;left:50%;transform:translateX(-50%)}.page.active{padding:28px 36px}.page h1{font-size:30px}#promptFields{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}#promptFields>p,#promptFields>.wide{grid-column:1/-1}#characters{display:grid;grid-template-columns:1fr 1fr;gap:18px}#characters>.empty{grid-column:1/-1}.preview{min-height:420px}.preview img{max-height:65vh}#page-settings{max-width:980px;margin:auto}}
@media(max-width:760px){.login-layout{display:block;padding:36px 20px}.login-intro{margin-bottom:32px}.login-intro h1{font-size:30px}.login-intro img{width:48px;height:48px}.login-notes{display:none}.login-card{padding:22px!important}footer{padding-bottom:max(env(safe-area-inset-bottom),12px)}}

/* Shared readability and persistent dialog close actions. */
button,summary,.hint,h1,h2{word-break:keep-all;overflow-wrap:anywhere}
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>*,.row>*,.web-account>*{min-width:0}
input[type=checkbox]{flex-shrink:0}
html:has(dialog[open]){overflow:hidden}
dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
dialog>.dialog-heading{position:sticky;top:-20px;z-index:3;gap:12px;display:flex;align-items:center;justify-content:space-between;background:var(--panel);margin:-20px -20px 16px;padding:12px 20px;border-bottom:1px solid var(--line);box-shadow:0 3px 8px #00000012}
dialog>.dialog-heading>button{flex-shrink:0;min-height:40px;padding:6px 10px;margin:0;white-space:nowrap}
#galleryDetail>.row>button{flex:1 1 120px}
#webSaved{display:inline-block;letter-spacing:0;word-break:keep-all}
html[data-theme=astral] .studio-main-link{color:#f1ddb2;border-color:#ae9872;background:#ffffff08}
html[data-theme=astral] .studio-main-link:hover{background:#ffffff18}
html[data-theme=astral] #webVersion,html[data-theme=astral] #webSaved{color:#e0d7c4}
html[data-theme=astral] .page::before{pointer-events:none}
@media(max-width:1099px){
  .studio-brand strong{line-height:1.4}
  .studio-brand small #webSaved{display:block;padding:0}
}
@media(max-width:480px){
  header>.studio-brand strong{font-size:14px;letter-spacing:0}
  header>.studio-brand small{font-size:10px;letter-spacing:0}
  #webSaved{font-size:10px}
  .studio-header-actions{gap:5px}
  .studio-main-link,.studio-header-actions #newProject{min-height:36px}
  .history-pagination{gap:6px}
  .history-pagination button{padding:8px}
}
@media(max-width:1099px) and (max-height:500px){
  body:not(.login-page)>footer{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding-top:4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
  footer>.usage-bar,footer>#status,footer>nav{grid-column:1/-1}
  footer>.usage-bar{padding:0}
  footer>#status{max-height:20px;padding:0}
  footer>#generate{margin:0;padding:6px 12px;min-height:38px}
  footer>nav button{min-height:34px;padding:4px 1px}
}