:root{color-scheme:dark;--bg:#07090d;--panel:#0d1118;--panel2:#111722;--text:#edf4ff;--muted:#8996aa;--line:#202938;--glow:#8ce8ff;--glow2:#b9ffde;--warn:#ffc875}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#132031 0,#07090d 38%);font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text)}button,select,input,textarea{font:inherit}.app-shell{max-width:1460px;margin:auto;padding:24px}.topbar,.section-head,.transport,.course-nav,.wizard-nav{display:flex;align-items:center;gap:16px;justify-content:space-between}.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--glow);font-weight:800}.topbar h1,.section-head h2{margin:.15rem 0;font-weight:800;letter-spacing:-.035em}.topbar h1{font-size:34px}.section-head h2{font-size:28px}.section-head p,.wizard-copy p,.hint{color:var(--muted)}.compact-head{margin-bottom:14px}.top-controls{display:flex;gap:12px}.top-controls label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:12px}.tabs{display:flex;gap:8px;margin:22px 0}.tab,button,select,input,textarea{background:#111722;border:1px solid var(--line);color:var(--text);border-radius:10px}.tab,button{padding:10px 14px;cursor:pointer}.tab.active,.primary,.choice.selected,.duration-choice.selected{background:linear-gradient(180deg,#173344,#112430);border-color:#2e6077;box-shadow:0 0 22px #0c637044}.ghost{background:transparent}.panel{display:none}.panel.active{display:block}.course-meta{font-size:12px;color:var(--muted)}.course-progress{height:5px;background:#101723;border-radius:999px;overflow:hidden;margin:0 0 16px}.course-progress>div{height:100%;background:linear-gradient(90deg,#62d9ff,#b9ffde);width:0;transition:.25s}.lesson-grid,.bonus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.lesson,.bonus{background:linear-gradient(180deg,#0f151f,#0b1017);border:1px solid var(--line);border-radius:14px;padding:16px}.lesson{cursor:pointer;transition:.16s;position:relative}.lesson:hover,.bonus:hover,.lesson.current{transform:translateY(-2px);border-color:#35546c}.lesson.completed{border-color:#315646}.lesson-top{display:flex;justify-content:space-between;align-items:center}.lesson .n{font-size:11px;color:var(--glow);font-weight:800}.lesson-check{color:var(--glow2);font-weight:900}.lesson h3,.bonus h3{margin:6px 0}.lesson p,.bonus p{color:var(--muted);font-size:13px}.course-nav{justify-content:center;margin:16px 0}.course-nav #currentLessonLabel{min-width:100px;text-align:center;font-weight:700}.course-nav button:disabled{opacity:.35;cursor:not-allowed}.wizard{background:linear-gradient(180deg,#0c121b,#090e15);border:1px solid var(--line);border-radius:18px;overflow:hidden}.wizard-steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.wizard-step{border:0;border-radius:0;background:transparent;color:var(--muted);padding:14px}.wizard-step span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#172231;margin-right:7px}.wizard-step.active{color:var(--text);background:#101924}.wizard-step.active span{background:#1c5369;color:#fff}.wizard-panel{display:none;padding:24px}.wizard-panel.active{display:block}.wizard-copy h3{font-size:25px;margin:4px 0}.choice-grid{display:grid;gap:12px;margin-top:18px}.mode-grid{grid-template-columns:repeat(3,1fr)}.content-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.choice{text-align:left;padding:18px;min-height:110px;display:flex;flex-direction:column;gap:7px}.choice.compact{min-height:62px}.choice span{color:var(--muted);font-size:13px}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.slider-card{background:#0d141e;border:1px solid var(--line);padding:18px;border-radius:14px}.slider-card label,.advanced-options label,.seed-row label{display:flex;flex-direction:column;gap:8px;color:var(--muted)}input[type=range]{width:100%}.advanced-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;padding:18px;border:1px solid var(--line);border-radius:14px}.inline-check{flex-direction:row!important;align-items:center}.duration-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:18px 0}.duration-choice{padding:18px 10px}.seed-row{max-width:360px}.seed-row input,textarea{padding:10px;width:100%}.custom-wrap{margin-top:14px}.custom-wrap textarea{min-height:120px}.wizard-nav{padding:16px 24px;border-top:1px solid var(--line)}.hidden{display:none!important}.player-section{margin-top:22px}.visual-wrap{position:relative;aspect-ratio:16/9;background:#030508;border:1px solid #192231;border-radius:16px;overflow:hidden;box-shadow:0 20px 80px #0008}canvas{width:100%;height:100%;display:block}.visual-overlay{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;color:#7d8da2;font-size:12px;pointer-events:none}.transport{margin-top:12px;justify-content:flex-start;flex-wrap:wrap}.grow{flex:1}.asset-status{margin-top:10px;font-size:12px;color:#87c9a8}.asset-status.warning{color:var(--warn)}@media(max-width:820px){.topbar,.section-head{align-items:flex-start;flex-direction:column}.top-controls{width:100%}.top-controls label{flex:1}.mode-grid,.sound-grid{grid-template-columns:1fr}.duration-grid{grid-template-columns:repeat(3,1fr)}.advanced-options{grid-template-columns:1fr}.wizard-steps{grid-template-columns:repeat(2,1fr)}.transport .grow{display:none}}

.version-badge{display:inline-block;vertical-align:middle;margin-left:.55rem;padding:.18rem .5rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#9fb0c7;background:rgba(255,255,255,.04)}

/* v1.3 — player-first course layout + horizontal lesson carousel */
.player-section{margin:8px 0 24px}
#coursePanel{margin-top:8px}
.lesson-carousel-shell{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:stretch}
.lesson-carousel{display:flex!important;grid-template-columns:none!important;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:4px 2px 12px;overscroll-behavior-x:contain}
.lesson-carousel .lesson{flex:0 0 235px;scroll-snap-align:center;min-height:138px}
.carousel-arrow{padding:0;font-size:36px;border-radius:14px;display:grid;place-items:center;background:#0d141e}
.carousel-arrow:hover{border-color:#35546c;background:#111c28}
.course-selected-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0 4px}
.course-selected-row #currentLessonLabel{min-width:110px;text-align:center;font-weight:750}
.visual-wrap{max-height:min(68vh,760px)}
.visual-overlay{z-index:2}
button:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:820px){
  .lesson-carousel-shell{grid-template-columns:36px minmax(0,1fr) 36px}
  .lesson-carousel .lesson{flex-basis:205px}
  .course-selected-row{gap:7px}
  .course-selected-row button{padding:8px 9px;font-size:12px}
}

.loading-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,rgba(13,35,50,.88),rgba(3,6,10,.96));backdrop-filter:blur(7px)}
.loading-kicker{font-size:12px;font-weight:850;letter-spacing:.22em;color:var(--glow);margin-bottom:10px}
.loading-percent{font-size:74px;line-height:1;font-weight:900;letter-spacing:-.05em;color:#f3f8ff}
.loading-message{max-width:72%;text-align:center;color:#92a2b7;font-size:16px;margin-top:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loading-track{width:min(560px,58%);height:7px;background:#172333;border-radius:999px;overflow:hidden;margin-top:24px}
.loading-track>div{height:100%;width:0;background:linear-gradient(90deg,#62d9ff,#b9ffde);transition:width .18s ease}


/* =========================================================
   CW Studio v1.5 — stable player-first layout
   ========================================================= */
.app-shell{max-width:1720px;width:100%;padding:22px 28px 40px}
main{width:100%;display:block}
.player-section{width:100%;max-width:none;margin:6px 0 26px}
.visual-wrap{width:100%;max-width:none;max-height:none;aspect-ratio:16/9;border-radius:18px}
.visual-wrap canvas{width:100%!important;height:100%!important}

.transport-main{display:flex;align-items:center;width:100%;gap:10px;margin-top:12px}
.transport-main .grow{flex:1}
.export-row{display:flex;align-items:center;gap:8px;width:100%;padding:10px 0 0;margin-top:4px;border-top:1px solid rgba(255,255,255,.06)}
.export-label{font-size:10px;font-weight:850;letter-spacing:.18em;color:#65778d;margin-right:5px}
.export-row button{min-width:66px;padding:8px 13px;font-size:11px}
.lesson-end-actions{display:flex;gap:8px}

.course-selected-row,.course-nav{display:none!important}
.lesson-carousel-shell{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:stretch;gap:7px}
.lesson-carousel{display:flex!important;gap:12px;overflow-x:auto;overflow-y:hidden;padding:5px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none!important;-ms-overflow-style:none!important}
.lesson-carousel::-webkit-scrollbar{display:none!important}
.lesson-carousel .lesson,.bonus-carousel .bonus-card{flex:0 0 230px;scroll-snap-align:center}
.lesson{min-height:134px;opacity:.7;transition:.2s}
.lesson.current{opacity:1;border-color:rgba(121,229,255,.58);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 24px rgba(121,229,255,.05)}
.lesson:hover{opacity:1}
.carousel-arrow{border:0!important;background:transparent!important;padding:0!important;font-size:42px!important;color:#65778d!important;opacity:.75}
.carousel-arrow:hover{color:#79e5ff!important;opacity:1;transform:scale(1.06)}

.bonus-carousel-shell{margin-top:8px}
.bonus-card{background:linear-gradient(180deg,#0f151f,#0b1017);border:1px solid var(--line);border-radius:14px;padding:18px;min-height:110px;cursor:pointer}
.bonus-card .n{font-size:10px;color:var(--glow);font-weight:800;letter-spacing:.08em}
.bonus-card h3{margin:9px 0 0;font-size:16px}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.voice-console{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.language-pills,.voice-pills{display:flex;gap:7px}
.lang-pill{min-width:44px;border-radius:999px;padding:9px 12px;font-weight:850;letter-spacing:.08em}
.voice-pill{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;min-width:158px;text-align:left}
.lang-pill.active,.voice-pill.active{border-color:rgba(121,229,255,.72);box-shadow:0 0 0 1px rgba(121,229,255,.15),0 0 26px rgba(121,229,255,.08);background:linear-gradient(180deg,rgba(121,229,255,.10),rgba(121,229,255,.025))}
.voice-pill strong{display:block;font-size:12px;letter-spacing:.1em}
.voice-pill small{display:block;font-size:9px;opacity:.55;margin-top:2px;letter-spacing:.04em}
.voice-orb{width:30px;height:30px;border:1px solid rgba(121,229,255,.28);border-radius:50%;position:relative;flex:0 0 30px}
.voice-orb i{position:absolute;width:2px;border-radius:4px;background:var(--glow);box-shadow:0 0 8px var(--glow);top:50%;transform:translateY(-50%)}
.voice-orb i:nth-child(1){height:8px;left:8px}.voice-orb i:nth-child(2){height:15px;left:13px}.voice-orb i:nth-child(3){height:10px;left:18px}
.voice-pill.active .voice-orb i{animation:vbar 1.1s ease-in-out infinite alternate}
.voice-pill.active .voice-orb i:nth-child(2){animation-delay:-.3s}.voice-pill.active .voice-orb i:nth-child(3){animation-delay:-.65s}
@keyframes vbar{from{transform:translateY(-50%) scaleY(.5);opacity:.5}to{transform:translateY(-50%) scaleY(1.2);opacity:1}}

.workspace-hidden{display:none!important}
.session-built-actions{display:flex;justify-content:flex-end;margin-top:12px}
.loading-overlay{background:radial-gradient(circle at 50% 45%,rgba(8,30,42,.91),rgba(2,5,8,.98))!important}
.loading-percent{color:#79e5ff!important;text-shadow:0 0 34px rgba(121,229,255,.14)}

@media(max-width:980px){
  .topbar{align-items:flex-start;flex-direction:column}
  .voice-console{width:100%;justify-content:flex-start}
  .voice-pills{flex-wrap:wrap}
}
@media(max-width:720px){
  .app-shell{padding:14px}
  .lesson-carousel-shell{grid-template-columns:32px minmax(0,1fr) 32px}
  .lesson-carousel .lesson,.bonus-carousel .bonus-card{flex-basis:200px}
  .voice-pill{min-width:145px}
  .export-row{flex-wrap:wrap}
}

/* v1.6 layout/timing polish */
.app-shell{max-width:none!important;width:100%!important;margin:0!important;padding:20px clamp(14px,2vw,34px) 42px!important}
.player-section{width:100%!important;max-width:none!important;margin:8px 0 28px!important}
.visual-wrap{width:100%!important;max-width:none!important;aspect-ratio:16/9!important;min-height:0!important}
.visual-overlay{top:14px!important;bottom:auto!important;left:18px!important;right:18px!important;z-index:3!important}
.transport-main{padding-top:2px!important}
.export-row{justify-content:flex-start!important;gap:10px!important;padding:12px 0 4px!important}
.export-row .export-label{min-width:72px}
.icon-btn{min-width:42px;padding:9px 11px;font-size:17px}
.bonus-card.current{border-color:rgba(121,229,255,.58);box-shadow:0 10px 30px rgba(0,0,0,.3),0 0 24px rgba(121,229,255,.05)}
.visual-wrap:fullscreen{background:#020406;border-radius:0}
.visual-wrap:fullscreen canvas{width:100vw!important;height:100vh!important;object-fit:contain}
@media(min-width:1200px){
  .visual-wrap{height:min(78vh,900px)!important;aspect-ratio:auto!important}
  .visual-wrap canvas{object-fit:contain;background:#020406}
}

/* v1.7 visual polish */
.asset-status{display:none!important}
.asset-status.active{display:block!important;margin-top:8px;opacity:.75;font-size:11px}
.visual-wrap canvas{width:100%!important;height:100%!important}
.visual-wrap{overflow:hidden}
@media(min-width:1200px){
  .visual-wrap{height:min(80vh,980px)!important}
}

/* v1.8 — lock the actual player to the same 16:9 geometry used while loading */
.visual-wrap{
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  max-height:none!important;
}
.visual-wrap canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
}
@media(min-width:1200px){
  .visual-wrap{
    height:auto!important;
    aspect-ratio:16/9!important;
  }
}

/* v1.9 — player geometry + seek */
html,body{width:100%;overflow-x:hidden}
.app-shell{width:100vw!important;max-width:none!important;margin:0!important}
main{width:100%!important;max-width:none!important}
.player-section{width:100%!important;max-width:none!important}
.visual-wrap{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  min-height:0!important;
  max-height:none!important;
}
.visual-wrap canvas{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:fill!important;
  cursor:default;
}
.visual-wrap canvas:hover{cursor:default}
.visual-wrap::after{
  content:'';
  position:absolute;
  left:3.5%;
  right:3.5%;
  bottom:0;
  height:12%;
  cursor:pointer;
  pointer-events:none;
}
@media(min-width:1200px){
  .visual-wrap{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }
}

/* v2.1 — unified transport/export strip */
.transport-main{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  width:100%!important;
  padding:11px 0 3px!important;
}
.transport-main .export-label{
  margin-left:8px;
  font-size:10px;
  letter-spacing:.17em;
  color:#65778d;
  font-weight:850;
}
.transport-main #wavBtn,
.transport-main #mp3Btn,
.transport-main #videoBtn{
  min-width:62px;
  padding:8px 12px;
  font-size:11px;
}
.export-row{display:none!important}
@media(max-width:760px){
  .transport-main .grow{display:none!important}
  .transport-main .export-label{width:100%;margin:4px 0 0}
}

/* v2.3 — voice selector: names only, subtle gender accents inside each control */
.voice-pill small{display:none!important}
.voice-pill[data-gender="female"]{
  background:linear-gradient(135deg,rgba(130,78,210,.17),rgba(130,78,210,.055))!important;
  border-color:rgba(164,116,238,.32)!important;
}
.voice-pill[data-gender="female"].active{
  background:linear-gradient(135deg,rgba(145,83,230,.28),rgba(145,83,230,.09))!important;
  border-color:rgba(183,137,255,.62)!important;
  box-shadow:inset 0 0 24px rgba(142,78,220,.10)!important;
}
.voice-pill[data-gender="male"]{
  background:linear-gradient(135deg,rgba(31,190,187,.15),rgba(31,190,187,.045))!important;
  border-color:rgba(62,215,208,.28)!important;
}
.voice-pill[data-gender="male"].active{
  background:linear-gradient(135deg,rgba(26,201,195,.24),rgba(26,201,195,.075))!important;
  border-color:rgba(83,231,222,.58)!important;
  box-shadow:inset 0 0 24px rgba(28,199,192,.09)!important;
}
.voice-pill strong{letter-spacing:.09em}


/* v2.7 — clean project footer */
.site-footer{
  width:100%;
  margin:34px 0 0;
  padding:20px 2px 2px;
  border-top:1px solid rgba(121,229,255,.13);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer-brand{display:flex;flex-direction:column;gap:4px;min-width:0}
.footer-brand strong{font-size:15px;letter-spacing:-.01em}
.footer-brand span{font-size:12px;color:var(--muted);max-width:760px}
.footer-links{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.footer-link{
  height:40px;
  min-width:108px;
  padding:0 14px;
  border:1px solid rgba(121,229,255,.18);
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--text);
  background:rgba(121,229,255,.035);
  text-decoration:none!important;
  font-size:11px;
  letter-spacing:.08em;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.footer-link:hover{
  transform:translateY(-1px);
  border-color:rgba(121,229,255,.55);
  background:rgba(121,229,255,.07);
}
.footer-link-call{border-color:rgba(185,255,222,.18);background:rgba(185,255,222,.03)}
.footer-link-call:hover{border-color:rgba(185,255,222,.5);background:rgba(185,255,222,.06)}
.footer-symbol{color:var(--glow);font-weight:900;letter-spacing:0}
.footer-link-call .footer-symbol{color:var(--glow2)}
@media(max-width:720px){
  .site-footer{align-items:flex-start;flex-direction:column}
  .footer-links{width:100%}
  .footer-link{flex:1}
}

/* v3.5.1 — compact video render telemetry */
.render-telemetry{
  width:min(680px,88%);
  margin:14px auto 16px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.render-telemetry.hidden{display:none}
.render-metric{
  min-width:0;
  padding:9px 10px 10px;
  border:1px solid rgba(121,229,255,.10);
  border-radius:10px;
  background:rgba(5,13,19,.32);
  text-align:center;
}
.render-metric small{
  display:block;
  min-height:12px;
  margin:0 0 5px;
  color:#68808e;
  font-size:7px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.render-metric span{
  display:block;
  color:#e9f8fd;
  font-size:12px;
  line-height:1.25;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media(max-width:640px){
  .render-telemetry{
    width:min(92%,430px);
    grid-template-columns:1fr 1fr;
  }
}