/* The editorial setup is isolated from the approved class player and its dialogs. */
.site-header nav[hidden]{display:none!important}
body[data-screen=create]{background:#222c24;color:#fff9ec;isolation:isolate}
/* Solid page-color bar over the photo, then an eased 100% to 0% overlay.
   The solid region covers the inset image edge completely. */
body[data-screen=create]::before{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#222c24 18%,#222c24f8 24%,#222c24e4 30%,#222c24c8 36%,#222c24a5 42%,#222c2480 48%,#222c245a 54%,#222c2437 60%,#222c241b 66%,#222c2407 72%,#222c2400 78%),url('/images/nagi-practice-11.png') left 12vw center/auto 100% no-repeat}
body[data-screen=create]>.site-header{position:relative;inset:auto;display:flex;width:100%;height:82px;padding:0 5vw;background:transparent;border:0;box-shadow:none}
body[data-screen=create] .site-header .brand{color:#fff9ec;font-size:27px}
body[data-screen=create] .site-header .brand img{filter:brightness(0) invert(1)}
body[data-screen=create]>main{padding:0 5vw 20px;height:calc(100dvh - 82px);overflow:auto}
body[data-screen=create] #setup-screen{max-width:540px;margin:0;gap:20px;height:auto;min-height:0}
body[data-screen=create] .web-welcome{padding:5px 0 0}
body[data-screen=create] .web-welcome>p{font-size:10px;letter-spacing:2px;color:#d2d8b6;margin:0 0 14px}
body[data-screen=create] .web-welcome h1{font:400 clamp(38px,3.8vw,54px)/1.04 Georgia,serif;letter-spacing:-1.6px;margin:0 0 14px;color:#fff9ec}
body[data-screen=create] .web-welcome>div{font-size:16px;color:#d6d8ca}
body[data-screen=create] #setup-screen .workspace{display:block;min-height:0;flex:none}
body[data-screen=create] #setup-screen .class-space{display:none}
body[data-screen=create] #continue-practice{display:none!important}
body[data-screen=create] #class-settings.settings{padding:0;background:none;border:0;box-shadow:none;border-radius:0;gap:14px;min-height:0;height:auto}
body[data-screen=create] #class-settings::before,body[data-screen=create] #class-settings::after{display:none}
body[data-screen=create] #class-settings #settings-fields{gap:12px}
body[data-screen=create] #class-settings .field>label,body[data-screen=create] #class-settings .field-label{color:#d3d7c8;font-size:13px;font-weight:400}
body[data-screen=create] #class-settings .setting-choice{background:#18241e80;border:1px solid #eef0d930;border-radius:4px;color:#fff9ec;min-height:56px;padding:9px 12px}
body[data-screen=create] #class-settings .setting-choice strong{font-size:25px;font-weight:400;white-space:nowrap}
body[data-screen=create] #class-settings .setting-choice small{display:none}
body[data-screen=create] #class-settings .setting-choice .choice-chevron{color:#dce7c8}
body[data-screen=create] #class-settings .duration-presets{background:none;padding:0;gap:5px;border-radius:4px}
body[data-screen=create] #class-settings .duration-presets button{border:1px solid #eef0d930;background:#18241e70;color:#fff9ec;border-radius:4px;font-size:27px;font-weight:400;padding:9px;min-height:48px}
body[data-screen=create] #class-settings .duration-presets button[aria-pressed=true]{background:#e3e9cd;color:#26362b}
body[data-screen=create] #class-settings .additions>.field-label{display:none}
body[data-screen=create] #class-settings .check-row{border:1px solid #eef0d930;background:#18241e70;border-radius:4px;color:#fff9ec;min-height:56px;padding:8px 12px}
body[data-screen=create] #class-settings .check-row strong{font-size:23px;font-weight:400}
body[data-screen=create] #class-settings .check-row small{display:none}
body[data-screen=create] #class-settings #peak-card{padding:0 10px 0 0}
body[data-screen=create] #class-settings #peak-card .setting-choice{background:none;border:0}
body[data-screen=create] #class-settings .refinements-open{border-color:#ffffff30;color:#d3d7c8;font-size:16px;font-weight:400;padding:8px 0}
body[data-screen=create] #class-settings>.field-note,body[data-screen=create] #class-settings>.field-note a{color:#d6d8ca;font-size:15px}
body[data-screen=create] #class-settings #generate{background:#e4edb8;color:#26362b;border-radius:4px;font-weight:400;font-size:25px;min-height:54px;padding:12px 17px;margin:3px 0 0;box-shadow:none}
body[data-screen=create] #class-settings #status{font-size:12px;margin:0;line-height:1.4}
@media(max-width:800px){
 body[data-screen=create]>.site-header{height:62px;padding:0 22px}
 body[data-screen=create]>main{height:calc(100dvh - 62px);padding:0 22px 16px}
 body[data-screen=create]::before{height:48svh;background:url('/images/nagi-practice-11.png') center top/auto 100% no-repeat;mask-image:linear-gradient(#000 30%,transparent 100%)}
 body[data-screen=create] #setup-screen{padding-top:clamp(105px,20svh,200px);max-width:560px;margin:0 auto;gap:14px}
 body[data-screen=create] .web-welcome h1{font-size:35px;letter-spacing:-1px}
 body[data-screen=create] .web-welcome>p{display:none}
 body[data-screen=create] .web-welcome>div{font-size:13px}
 body[data-screen=create] #class-settings .setting-choice strong,body[data-screen=create] #class-settings .check-row strong{font-size:19px}
 body[data-screen=create] #class-settings .duration-presets button,body[data-screen=create] #class-settings #generate{font-size:22px}
 body[data-screen=create] #class-settings #settings-fields{gap:9px}
 body[data-screen=create] #class-settings.settings{gap:10px}
}
@media(min-width:801px) and (max-height:800px){body[data-screen=create]>.site-header{height:64px}body[data-screen=create]>main{height:calc(100dvh - 64px)}body[data-screen=create] #setup-screen{gap:12px}body[data-screen=create] .web-welcome h1{font-size:40px}body[data-screen=create] #class-settings.settings{gap:9px}}
body[data-screen=create]>main{margin:0;width:100%;max-width:none}
body[data-screen=create] #class-settings .choice-chevron{background:none;border:0;width:22px;height:22px;box-shadow:none;border-radius:0}
@media(max-width:800px){body[data-screen=create]::before{background-size:auto 100%;background-position:center top}}
/* Both addition boxes keep identical dimensions, independent of the pose name. */
body[data-screen=create] #class-settings .additions{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
body[data-screen=create] #class-settings .additions>.check-row{height:56px;min-height:56px;min-width:0;box-sizing:border-box}
body[data-screen=create] #class-settings #peak-card{padding:0;position:relative}
body[data-screen=create] #class-settings #peak-card .setting-choice{height:54px;min-height:0;width:100%;padding:8px 42px 8px 12px;box-sizing:border-box}
body[data-screen=create] #class-settings #peak-card .setting-choice>span:first-child{flex:1;min-width:0;display:block}
body[data-screen=create] #class-settings #peak-card .setting-choice strong{display:block;white-space:nowrap;overflow-wrap:normal}

/* Voice stays visible beside pace without adding another setup row. */
body[data-screen=create] .pace-voice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body[data-screen=create] .pace-voice-row>.field{min-width:0}