:root {
  color-scheme: dark;
  --bg: #02150f;
  --bg-deep: #010a07;
  --sidebar: #041d15;
  --surface: #072a1e;
  --surface-2: #0b3a28;
  --surface-3: #105239;
  --surface-hover: #176644;
  --text: #f4f8ff;
  --text-soft: #d8e5f7;
  --muted: #92b8a3;
  --muted-2: #729581;
  --line: rgba(117, 211, 159, .18);
  --line-strong: rgba(111, 235, 166, .32);
  --blue: #22c96f;
  --blue-deep: #138b4a;
  --cyan: #55e6a1;
  --cyan-soft: #9af3c3;
  --green: #75e66d;
  --yellow: #ffc857;
  --danger: #ff5f78;
  --sidebar-width: 252px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 24px 70px rgba(0, 4, 18, .34);
  --focus: 0 0 0 3px rgba(85, 230, 161, .34);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Aceite obrigatório das regras da comunidade. */
html.community-rules-open,
html.community-rules-open body { overflow: hidden; }
.community-rules-dialog {
  width: min(440px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border: 1px solid rgba(197, 164, 255, .22);
  border-radius: 28px;
  color: #f8f5ff;
  background: #151020;
  box-shadow: 0 32px 100px rgba(0, 0, 0, .72), 0 0 60px rgba(119, 53, 255, .1);
}
.community-rules-dialog::backdrop {
  background: rgba(2, 1, 6, .92);
  backdrop-filter: blur(7px);
}
.community-rules-card { padding: 27px 24px 25px; }
.community-rules-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 50%;
  color: #9d65ff;
  background: rgba(118, 48, 255, .2);
}
.community-rules-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.community-rules-card h2 { margin: 0; font-size: 21px; font-weight: 820; line-height: 1.16; letter-spacing: -.025em; }
.community-rules-intro { margin: 8px 0 18px; color: #aaa2b7; font-size: 13px; line-height: 1.55; }
.community-rules-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.community-rules-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; }
.community-rules-list li > span { color: #ffb21c; font-size: 18px; font-weight: 900; line-height: 1.15; }
.community-rules-list p { margin: 0; color: #d1cad9; font-size: 12.5px; font-weight: 580; line-height: 1.48; }
.community-rules-consent {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 21px;
  padding: 14px;
  border: 1px solid rgba(204, 188, 226, .18);
  border-radius: 13px;
  color: #cec5d9;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.45;
}
.community-rules-consent:has(input:focus-visible) { border-color: rgba(157, 101, 255, .7); box-shadow: 0 0 0 3px rgba(126, 57, 255, .18); }
.community-rules-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #7d37ff; cursor: pointer; }
.community-rules-consent a { color: #eee7f7; font-weight: 700; text-underline-offset: 2px; }
.community-legal-documents { display: grid; gap: 7px; }
.community-legal-documents details:not([open]) { display: none; }
.community-legal-documents details {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(204, 188, 226, .16);
  border-radius: 11px;
  background: rgba(6, 4, 10, .32);
}
.community-legal-documents summary { color: #eee7f7; cursor: pointer; font-size: 11px; font-weight: 800; }
.community-legal-documents p { margin: 8px 0 0; color: #aaa2b7; font-size: 10.5px; line-height: 1.55; }
.community-rules-status { min-height: 18px; margin: 6px 0 0; color: #ff9baa; font-size: 11px; text-align: center; }
.community-rules-accept {
  width: 100%;
  min-height: 49px;
  margin-top: 7px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: linear-gradient(90deg, #6e2aff, #893cff);
  box-shadow: 0 13px 30px rgba(110, 42, 255, .28);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.community-rules-accept:hover:not(:disabled) { background: linear-gradient(90deg, #7a38ff, #9950ff); transform: translateY(-1px); }
.community-rules-accept:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
@media (max-width: 520px) {
  .community-rules-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 23px; }
  .community-rules-card { padding: 22px 19px 20px; }
  .community-rules-icon { width: 43px; height: 43px; margin-bottom: 17px; }
  .community-rules-card h2 { font-size: 19px; }
  .community-rules-intro { font-size: 12px; }
  .community-rules-list { gap: 11px; }
  .community-rules-list p { font-size: 11.5px; }
  .community-rules-consent { margin-top: 17px; padding: 12px; font-size: 11.5px; }
}

/* Biblioteca em carrosséis: a capa inteira é a ação da cena. */
#library-screen .library-page {
  width: min(100%, 1380px);
}
#library-screen .library-header {
  margin-bottom: 24px;
}
#library-screen .catalog-subhead {
  min-height: 28px;
  margin: 8px 0 12px;
}
#library-screen #catalog-status[hidden] {
  display: none;
}
#library-screen .catalog-subhead-actions {
  margin-left: auto;
}
#library-screen #library-count {
  color: #aaa4ae;
  font-size: 12px;
  font-weight: 800;
}
.library-shelves {
  display: grid;
  min-width: 0;
  gap: 30px;
  padding-bottom: 28px;
}
.library-shelf {
  display: grid;
  min-width: 0;
  gap: 12px;
}
.library-shelf__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.library-shelf__title {
  margin: 0;
  color: #f7f3f8;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 850;
  letter-spacing: -.025em;
}
.library-shelf__count {
  flex: none;
  color: #938d99;
  font-size: 11px;
  font-weight: 700;
}
.library-shelf__track {
  display: grid;
  grid-auto-columns: clamp(210px, 23vw, 282px);
  grid-auto-flow: column;
  gap: 13px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 2px;
  scroll-snap-type: inline mandatory;
  scrollbar-color: #45404a transparent;
  scrollbar-width: thin;
}
.library-poster-card {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9.7;
  padding: 0;
  overflow: hidden;
  border: 1px solid #36323b;
  border-radius: 17px;
  color: #fff;
  background: #111114;
  box-shadow: 0 12px 28px rgba(0,0,0,.3);
  cursor: pointer;
  scroll-snap-align: start;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.library-poster-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(to top,rgba(5,5,8,.95),rgba(5,5,8,.13) 62%,rgba(5,5,8,.25));
  pointer-events: none;
}
.library-poster-card:hover {
  border-color: #c7a7df;
  box-shadow: 0 17px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(212,174,231,.18);
  transform: translateY(-3px);
}
.library-poster-card:focus-visible {
  outline: 3px solid #f0a8cb;
  outline-offset: 3px;
}
.library-poster-card:disabled {
  cursor: default;
  filter: grayscale(.25);
  opacity: .7;
}
.library-poster-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.library-poster-card:hover .library-poster-card__image {
  transform: scale(1.035);
}
.library-poster-card__top {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  left: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}
.library-poster-card__status,
.library-poster-card__language,
.library-poster-card__duration {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 5px 13px rgba(0,0,0,.28);
  backdrop-filter: blur(9px);
}
.library-poster-card__status {
  max-width: 62%;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg,#8d4cff,#6931d3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-poster-card__status.is-progress {
  color: #201720;
  background: linear-gradient(135deg,#f2bfd6,#cbb8e5);
}
.library-poster-card__language {
  flex: none;
  background: rgba(15,14,18,.72);
}
.library-poster-card__duration {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  min-height: 19px;
  padding: 3px 6px;
  background: rgba(10,9,12,.78);
  pointer-events: none;
}
.library-poster-card__copy {
  position: absolute;
  z-index: 2;
  right: 46px;
  bottom: 9px;
  left: 10px;
  display: grid;
  gap: 3px;
  min-width: 0;
  pointer-events: none;
}
.library-poster-card__title,
.library-poster-card__meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-poster-card__title {
  font-size: clamp(13px, 1.25vw, 16px);
  font-weight: 850;
  letter-spacing: -.025em;
  text-shadow: 0 2px 8px #000;
}
.library-poster-card__meta {
  color: #c3bdc7;
  font-size: 9px;
  font-weight: 700;
}
.library-shelves > .scene-grid-empty {
  width: 100%;
}

@media (max-width:650px) {
  body[data-screen="library"] #library-screen .library-page {
    padding-inline: 12px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  body[data-screen="library"] #library-screen .library-header {
    margin-bottom: 16px;
  }
  body[data-screen="library"] #library-screen .library-header .eyebrow {
    display: none;
  }
  body[data-screen="library"] #library-screen .library-header h1 {
    margin: 0 0 5px;
    font-size: 27px;
  }
  body[data-screen="library"] #library-screen .library-header p {
    font-size: 12px;
  }
  body[data-screen="library"] #library-screen .catalog-toolbar {
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  body[data-screen="library"] #library-screen .filter-chips {
    display: flex;
    gap: 6px;
    width: calc(100vw - 24px);
    padding: 2px 0 5px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
  }
  body[data-screen="library"] #library-screen .filter-chips::-webkit-scrollbar {
    display: none;
  }
  body[data-screen="library"] #library-screen .filter-chip {
    flex: none;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #39353e;
    border-radius: 999px;
    background: #19181c;
    font-size: 9px;
  }
  body[data-screen="library"] #library-screen .sort-field select {
    min-height: 39px;
    border-radius: 11px;
  }
  body[data-screen="library"] #library-screen .catalog-subhead {
    min-height: 24px;
    margin: 4px 0 6px;
  }
  body[data-screen="library"] #library-screen #library-count {
    padding: 0;
    border: 0;
    color: #8f8994;
    background: transparent;
    font-size: 9px;
  }
  .library-shelves {
    gap: 27px;
    padding-bottom: 10px;
  }
  .library-shelf {
    gap: 10px;
  }
  .library-shelf__title {
    font-size: 16px;
  }
  .library-shelf__count {
    font-size: 9px;
  }
  .library-shelf__track {
    grid-auto-columns: clamp(150px, 44vw, 190px);
    gap: 10px;
    margin-inline: -12px;
    padding: 2px 12px 7px;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
  }
  .library-shelf__track::-webkit-scrollbar {
    display: none;
  }
  .library-poster-card {
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
  }
  .library-poster-card:hover {
    transform: none;
  }
  .library-poster-card__top {
    top: 7px;
    right: 7px;
    left: 7px;
  }
  .library-poster-card__status,
  .library-poster-card__language {
    min-height: 19px;
    padding: 3px 6px;
    font-size: 7px;
  }
  .library-poster-card__duration {
    right: 6px;
    bottom: 6px;
    min-height: 17px;
    font-size: 7px;
  }
  .library-poster-card__copy {
    right: 38px;
    bottom: 7px;
    left: 8px;
    gap: 2px;
  }
  .library-poster-card__title {
    font-size: 13px;
  }
  .library-poster-card__meta {
    font-size: 8px;
  }
}

/* Painel de afiliados */
.affiliate-nav-item .nav-icon{background:linear-gradient(135deg,rgba(242,167,200,.25),rgba(185,166,232,.22))}.affiliate-dialog{width:min(820px,calc(100vw - 28px))}.affiliate-dialog header p{margin:5px 0 0;color:var(--muted);font-size:10px}.affiliate-dialog-body{gap:18px}.affiliate-link-field{display:grid;gap:8px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#111114}.affiliate-link-field>span{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.12em}.affiliate-link-field>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.affiliate-link-field input{min-width:0;height:43px;padding:0 12px;color:var(--text);background:#09090b;border:1px solid #44434b;border-radius:9px;font:11px/1.4 Consolas,monospace}.affiliate-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.affiliate-stats article{padding:14px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,#19191d,#111114)}.affiliate-stats small,.affiliate-stats strong,.affiliate-stats span{display:block}.affiliate-stats small{color:var(--muted);font-size:7px;font-weight:900;letter-spacing:.09em}.affiliate-stats strong{margin:7px 0 3px;color:#efb2cf;font-size:23px}.affiliate-stats span{color:var(--muted);font-size:8px}.affiliate-sales-section{display:grid;gap:9px}.affiliate-sales-section>div:first-child{display:flex;align-items:center;justify-content:space-between}.affiliate-sales-list{display:grid;gap:7px}.affiliate-sale-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#121215}.affiliate-sale-item strong{font-size:11px}.affiliate-sale-item b{grid-row:1/3;grid-column:2;align-self:center;color:#efb2cf;font-size:13px}.affiliate-sale-item small,.affiliate-sales-list>span{color:var(--muted);font-size:9px}@media(max-width:650px){.affiliate-dialog{width:calc(100vw - 12px)}.affiliate-stats{grid-template-columns:1fr 1fr}.affiliate-link-field>div{grid-template-columns:1fr}.affiliate-link-field .button{width:100%}}

/* Emerald product identity */
body::before { background: radial-gradient(circle at 88% 4%, rgba(34, 201, 111, .18), transparent 30rem), radial-gradient(circle at 32% 96%, rgba(85, 230, 161, .1), transparent 34rem), linear-gradient(150deg, var(--bg-deep), var(--bg) 48%, #032016); }
.app-sidebar { background: linear-gradient(180deg, rgba(4, 29, 21, .99), rgba(2, 20, 13, .99)); box-shadow: 18px 0 60px rgba(0, 16, 8, .2); }
.nav-item:hover { background: rgba(21, 92, 58, .48); }
.nav-item.active, .nav-item[aria-current="page"] { border-color: rgba(78, 226, 143, .25); background: linear-gradient(100deg, rgba(32, 174, 94, .3), rgba(17, 91, 56, .3)); }
.account-entry, .tool-button { background: rgba(8, 54, 35, .72); }
.account-avatar { background: linear-gradient(145deg, var(--blue), #137a41); }
.button-primary, .desktop-button.primary { border-color: rgba(106, 239, 165, .3); background: linear-gradient(135deg, #27d879, #158f4d); box-shadow: 0 12px 28px rgba(22, 163, 83, .3), inset 0 1px rgba(255,255,255,.16); }
.button-primary:hover:not(:disabled), .desktop-button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #42e990, #1aaa5d); box-shadow: 0 16px 34px rgba(22, 163, 83, .38); }
.button-secondary { background: rgba(14, 70, 45, .86); }
.button-ghost { background: rgba(7, 43, 28, .58); }
.button-ghost:hover:not(:disabled) { background: rgba(13, 64, 41, .76); }
.login-shell { background: rgba(5, 31, 21, .97); }
.login-visual { background: radial-gradient(circle at 56% 42%, rgba(35, 211, 113, .34), transparent 19rem), linear-gradient(145deg, #073923, #020f09 70%); }
.login-card { background: linear-gradient(180deg, rgba(9, 48, 31, .9), rgba(5, 28, 18, .97)); }
.featured-loading { background: linear-gradient(125deg, var(--surface), #0b462d); }
.scene-card { background: linear-gradient(180deg, rgba(10, 52, 34, .94), rgba(5, 31, 20, .98)); }
.scene-card:hover { border-color: rgba(89, 232, 152, .45); }
.scene-card__media { background: #071f15; }
.scene-card__badge--owned { background: #187847; }
.scene-card--featured { background: #072a1e; }
.scene-card--featured .scene-card__media::after { background: linear-gradient(90deg, #062619 1%, rgba(6, 38, 25, .93) 15%, rgba(6, 38, 25, .3) 68%, rgba(4, 25, 16, .18)), linear-gradient(to top, rgba(3, 23, 14, .72), transparent 50%); }
.catalog-toolbar, .store-toolbar, .setup-tabs { background: rgba(6, 39, 25, .74); }
.store-hero { border-color: rgba(80, 225, 145, .28); background: radial-gradient(circle at 78% 25%, rgba(85, 230, 161, .15), transparent 18rem), linear-gradient(120deg, #0a482f, #061f15); }
.settings-card, .diagnostics-panel, .character-box { background: linear-gradient(180deg, rgba(9, 50, 33, .92), rgba(5, 31, 20, .97)); }
.settings-icon { border-color: rgba(82, 222, 143, .26); background: rgba(36, 159, 88, .22); }
.setup-tab.active, .character-option:has(input:checked) { border-color: rgba(85, 230, 161, .32); background: rgba(28, 151, 81, .3); }
.setup-preview-card { background: #061f15; }
.character-option, .session-explainer > div { background: rgba(5, 35, 22, .8); }
.setup-footer { background: rgba(3, 27, 17, .9); }
.studio-screen { background: radial-gradient(circle at 50% -15%, rgba(39, 201, 108, .2), transparent 32rem), #010d08; }
.studio-progress-copy, .studio-layout-switch { background: rgba(7, 43, 28, .78); }
.studio-player { background: #03170e; }
.record-panel { background: linear-gradient(180deg, rgba(9, 50, 32, .98), rgba(4, 28, 18, .99)); }
.record-button:not(.recording) { border-color: rgba(91, 231, 153, .34); background: linear-gradient(135deg, #22c96f, #117c40); box-shadow: 0 16px 36px rgba(17, 139, 67, .3); }
.waveform-dock { background: rgba(5, 35, 22, .94); }
.waveform-panel { background: rgba(1, 17, 10, .86); }
.review-screen { background: radial-gradient(circle at 75% 4%, rgba(39, 201, 108, .2), transparent 30rem), #02150e; }
.final-player, .performance-panel { background: rgba(6, 39, 25, .96); }
.video-play-button { background: rgba(31, 184, 91, .9); box-shadow: 0 0 0 12px rgba(55, 215, 119, .12), 0 18px 50px rgba(0,0,0,.4); }
.app-dialog { background: #072a1e; }
.app-dialog footer { background: rgba(3, 30, 19, .5); }
.onboarding-dialog { background: radial-gradient(circle at 50% 55%, rgba(30, 196, 101, .25), transparent 26rem), radial-gradient(circle at 82% 95%, rgba(53, 111, 67, .24), transparent 25rem), linear-gradient(145deg, #062719, #020f09 68%, #071a10); }
.onboarding-dialog::backdrop { background: #020f09; }
.onboarding-shell { border-color: rgba(77, 224, 142, .4); background: linear-gradient(155deg, #083a25, #041f14 72%); box-shadow: 0 45px 130px rgba(0, 16, 7, .82), 0 0 70px rgba(30, 190, 96, .16); }
.onboarding-intro::before { background: radial-gradient(circle at 50% 56%, rgba(35, 205, 111, .26), transparent 27rem), linear-gradient(145deg, rgba(7, 50, 31, .36), rgba(1, 18, 10, .3)); }
.onboarding-intro::after { background: rgba(23, 184, 87, .12); }
.onboarding-intro-logo { filter: drop-shadow(0 10px 30px rgba(27, 194, 96, .28)); }
.onboarding-intro-wave i { background: linear-gradient(#62edaa, #20a95e); box-shadow: 0 0 18px rgba(46, 216, 120, .36); }
.onboarding-stage { border-color: rgba(73, 224, 143, .56); background: radial-gradient(circle at 30% 0, rgba(28, 176, 90, .2), transparent 28rem), rgba(2, 25, 15, .56); }

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]),
#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) {
  --classic-paper: #07271a;
  --classic-paper-deep: #02120c;
  --classic-panel: #082f20;
  --classic-blue: #24c96f;
  --classic-teal: #58e7a3;
  --classic-yellow: #88ec68;
  background: radial-gradient(circle at 84% 2%, rgba(31, 157, 81, .2), transparent 30%), #02120c;
}

/* First-run product tour */
.onboarding-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: var(--text);
  background: radial-gradient(circle at 50% 55%, rgba(0, 139, 233, .24), transparent 26rem), radial-gradient(circle at 82% 95%, rgba(65, 54, 105, .25), transparent 25rem), linear-gradient(145deg, #06182f, #020b20 68%, #070b21);
}
.onboarding-dialog[open] { animation: onboarding-fade-in .3s ease both; }
.onboarding-dialog::backdrop { background: #020b20; }
.onboarding-shell { width: min(790px, calc(100vw - 30px)); min-width: 0; max-height: calc(100dvh - 30px); margin: max(15px, calc((100dvh - 675px) / 2)) auto 15px; overflow: hidden auto; border: 1px solid rgba(69, 151, 255, .38); border-radius: 24px; background: linear-gradient(155deg, #081f45, #04132d 72%); box-shadow: 0 45px 130px rgba(0, 3, 16, .82), 0 0 70px rgba(24, 112, 255, .14); animation: onboarding-in .25s ease both; }

.onboarding-intro { position: relative; display: grid; min-height: 100dvh; place-items: center; overflow: hidden; isolation: isolate; }
.onboarding-intro::before { position: absolute; z-index: -2; inset: 0; content: ""; background: radial-gradient(circle at 50% 56%, rgba(0, 155, 255, .25), transparent 27rem), linear-gradient(145deg, rgba(7, 29, 57, .35), rgba(1, 9, 28, .3)); }
.onboarding-intro::after { position: absolute; z-index: -1; top: 34%; left: 50%; width: min(760px, 65vw); height: min(620px, 68vh); content: ""; border-radius: 50%; background: rgba(0, 142, 244, .11); filter: blur(60px); transform: translateX(-50%); }
.onboarding-intro-content { position: relative; z-index: 2; display: flex; align-items: center; flex-direction: column; justify-content: center; width: min(920px, 92vw); min-height: 100dvh; padding: 38px 20px 24px; text-align: center; }
.onboarding-intro-logo { width: clamp(146px, 13vw, 205px); margin-bottom: clamp(24px, 4vh, 48px); filter: drop-shadow(0 10px 30px rgba(20, 125, 255, .26)); }
.onboarding-intro-copy { position: relative; z-index: 4; }
.onboarding-intro-copy h2 { margin: 0; font-size: clamp(30px, 3.8vw, 54px); font-weight: 850; line-height: 1; letter-spacing: -.045em; }
.onboarding-intro-copy p { max-width: 570px; margin: 13px auto 0; color: #9db2cb; font-size: clamp(14px, 1.35vw, 18px); font-weight: 650; line-height: 1.4; }
.onboarding-intro-visual { position: relative; z-index: 2; width: min(600px, 54vw); height: min(430px, 47vh); margin-top: clamp(8px, 1.6vh, 18px); }
.onboarding-intro-visual > img { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 45px rgba(0, 2, 15, .5)); }
.onboarding-intro-wave { position: absolute; z-index: 1; right: 4%; bottom: 11%; left: 4%; display: flex; align-items: center; justify-content: center; gap: clamp(5px, .65vw, 11px); height: 48%; }
.onboarding-intro-wave i { width: clamp(5px, .58vw, 10px); height: 25%; border-radius: 8px; background: linear-gradient(#19c9ff, #1760ef); box-shadow: 0 0 18px rgba(0, 165, 255, .34); animation: onboarding-wave 1.2s ease-in-out infinite alternate; }
.onboarding-intro-wave i:nth-child(2n) { height: 55%; animation-delay: -.4s; }.onboarding-intro-wave i:nth-child(3n) { height: 82%; animation-delay: -.7s; }.onboarding-intro-wave i:nth-child(5n) { height: 100%; animation-delay: -.2s; }
.onboarding-intro-start { position: relative; z-index: 4; min-width: 142px; min-height: 48px; margin-top: -4px; border-radius: 12px; font-size: 15px; }
.onboarding-intro-start img { width: 18px; height: 18px; }
.onboarding-intro-note { position: relative; z-index: 4; display: flex; align-items: center; gap: 7px; margin-top: 17px; color: #94a8c1; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.onboarding-intro-note img { width: 14px; height: 14px; opacity: .82; filter: brightness(0) invert(1); }
.onboarding-float-scene { position: absolute; z-index: 1; width: clamp(105px, 9.4vw, 165px); aspect-ratio: 16 / 9; border: 2px solid rgba(25, 124, 241, .26); border-radius: 17px; object-fit: cover; opacity: .43; box-shadow: 0 20px 55px rgba(0,0,0,.35); }
.onboarding-float-scene.scene-a { top: -2.2%; left: 36%; transform: rotate(2deg); }.onboarding-float-scene.scene-b { top: 9%; left: -1.5%; transform: rotate(-6deg); }.onboarding-float-scene.scene-c { top: 13%; right: 1.2%; transform: rotate(5deg); }.onboarding-float-scene.scene-d { right: 11%; bottom: 8%; transform: rotate(7deg); }
.onboarding-header { display: grid; grid-template-columns: 42px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 24px 24px 18px; }
.onboarding-header h2 { margin: 3px 0 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.05; letter-spacing: -.035em; }
.onboarding-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, var(--cyan), var(--blue)); box-shadow: 0 10px 28px rgba(31, 135, 255, .3); }
.onboarding-icon img, .onboarding-close img, .tour-scene-play img, .tour-control img, .tour-play-ring img { width: 19px; height: 19px; filter: brightness(0) invert(1); }
.onboarding-close { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 11px; background: transparent; cursor: pointer; opacity: .68; }
.onboarding-close:hover { background: rgba(255,255,255,.07); opacity: 1; }
.onboarding-stage { min-height: 418px; margin: 0 24px; padding: 12px; border: 1px solid rgba(39, 182, 255, .55); border-radius: 22px; background: radial-gradient(circle at 30% 0, rgba(18, 130, 255, .18), transparent 28rem), rgba(2, 12, 31, .52); box-shadow: inset 0 0 42px rgba(10, 91, 196, .08); }
.onboarding-panel { min-height: 392px; animation: onboarding-panel-in .25s ease both; }

.tour-scene-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; padding: 24px; overflow: hidden; border: 1px solid rgba(91, 173, 255, .28); border-radius: 16px; background: radial-gradient(circle at 72% 35%, rgba(43, 142, 255, .46), transparent 12rem), linear-gradient(125deg, #143e77, #071933 68%); }
.tour-scene-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(135deg, transparent 0 48%, rgba(81, 196, 255, .09) 48% 51%, transparent 51% 100%), repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 48px); }
.tour-badge { position: absolute; z-index: 1; top: 18px; left: 18px; padding: 6px 10px; border-radius: 999px; color: #04152e; background: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.tour-scene-copy { position: relative; z-index: 1; max-width: 72%; }
.tour-scene-copy small { color: var(--cyan-soft); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.tour-scene-copy strong { display: block; max-width: 470px; margin-top: 6px; font-size: clamp(22px, 3.4vw, 34px); line-height: 1.02; letter-spacing: -.04em; }
.tour-scene-copy p { margin: 8px 0 0; color: var(--text-soft); font-size: 11px; }
.tour-scene-play { position: absolute; z-index: 1; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 12px; background: linear-gradient(135deg, var(--blue), var(--blue-deep)); font-size: 11px; font-weight: 800; }
.tour-role-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin-top: 12px; }
.tour-role-row > span { padding-left: 7px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.tour-role-row > div { display: flex; align-items: center; gap: 8px; min-width: 122px; padding: 11px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(10, 35, 74, .82); }
.tour-role-row i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #03142d; background: var(--cyan); font-style: normal; font-size: 11px; font-weight: 900; }
.tour-role-row b { font-size: 11px; }

.tour-studio { display: grid; grid-template-columns: minmax(0, 1fr) 178px; gap: 12px; min-height: 270px; padding: 10px; border-radius: 16px; background: rgba(3, 14, 34, .72); }
.tour-video, .tour-result-preview { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: radial-gradient(circle at 50% 42%, rgba(36, 130, 255, .34), transparent 10rem), linear-gradient(135deg, #173a6a, #07162f 66%); }
.tour-video::before, .tour-result-preview::before { position: absolute; inset: 0; content: ""; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 30px 30px; }
.tour-video > span, .tour-result-preview > span { position: absolute; z-index: 1; top: 13px; left: 13px; color: var(--cyan-soft); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.tour-video > strong { position: absolute; z-index: 1; right: 15px; bottom: 15px; left: 15px; text-align: center; font-size: 15px; }
.tour-play-ring { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(82, 192, 255, .6); border-radius: 50%; background: rgba(26, 112, 229, .5); box-shadow: 0 0 0 9px rgba(35, 136, 255, .1); }
.tour-studio aside { display: grid; align-content: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: #092147; }
.tour-control { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); background: rgba(4, 18, 42, .65); font-size: 10px; font-weight: 700; }
.tour-control.active { color: white; border-color: rgba(80, 189, 255, .45); background: linear-gradient(135deg, #2585ff, #164fc7); }
.tour-waveform { display: flex; align-items: center; justify-content: center; gap: 5px; height: 62px; margin: 12px 5px 0; padding: 0 13px; overflow: hidden; border: 1px solid rgba(40, 207, 255, .42); border-radius: 13px; background: #020812; }
.tour-waveform i { flex: 1; max-width: 8px; height: 24%; border-radius: 5px; background: linear-gradient(var(--cyan-soft), var(--blue)); }
.tour-waveform i:nth-child(3n) { height: 74%; }.tour-waveform i:nth-child(4n) { height: 46%; }.tour-waveform i:nth-child(5n) { height: 92%; }.tour-waveform i:nth-child(7n) { height: 34%; }
.tour-caption { margin: 10px 8px 0; color: var(--muted); font-size: 11px; text-align: center; }.tour-caption strong { color: var(--text); }

.tour-result { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(190px, .7fr); gap: 12px; min-height: 285px; }
.tour-score { display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 20px; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(145deg, rgba(14, 51, 103, .94), rgba(5, 23, 51, .96)); text-align: center; }
.tour-score small { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; }.tour-score strong { margin: 4px 0; color: var(--cyan-soft); font-size: 64px; line-height: 1; }.tour-score span { color: var(--green); font-size: 10px; font-weight: 900; }.tour-score p { margin: 11px 0 0; color: var(--muted); font-size: 10px; }
.tour-download { display: flex; align-items: center; gap: 13px; margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(40, 207, 255, .28); border-radius: 15px; background: rgba(10, 39, 82, .75); }
.tour-download strong, .tour-download small { display: block; }.tour-download strong { font-size: 13px; }.tour-download small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.onboarding-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px 22px; }
.onboarding-dots { display: flex; gap: 7px; }
.onboarding-dots button { width: 12px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: #164476; cursor: pointer; transition: width .2s ease, background .2s ease; }
.onboarding-dots button.active { width: 29px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.onboarding-actions { display: flex; align-items: center; gap: 8px; }
.onboarding-actions .text-button { margin-right: 6px; color: var(--text-soft); }
.onboarding-actions .button img { width: 16px; height: 16px; }
.onboarding-back[disabled] { visibility: hidden; }
@keyframes onboarding-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes onboarding-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes onboarding-panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes onboarding-wave { from { transform: scaleY(.58); opacity: .58; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 650px) {
  .onboarding-dialog { width: 100vw; max-height: none; border-radius: 0; }
  .onboarding-shell { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); margin: 8px auto; border-radius: 19px; }
  .onboarding-intro-content { justify-content: flex-start; padding-top: max(28px, 5vh); }
  .onboarding-intro-logo { width: 146px; margin-bottom: 25px; }.onboarding-intro-copy h2 { max-width: 360px; font-size: 32px; }.onboarding-intro-copy p { max-width: 340px; font-size: 13px; }
  .onboarding-intro-visual { width: min(520px, 96vw); height: min(390px, 46vh); margin-top: 5px; }.onboarding-intro-start { margin-top: -2px; }
  .onboarding-float-scene { width: 92px; opacity: .28; }.onboarding-float-scene.scene-a { left: 7%; }.onboarding-float-scene.scene-b { top: 24%; }.onboarding-float-scene.scene-c { top: 25%; }.onboarding-float-scene.scene-d { right: 3%; bottom: 5%; }
  .onboarding-header { grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 9px; padding: 17px 16px 13px; }
  .onboarding-header h2 { font-size: 21px; }.onboarding-icon { width: 38px; height: 38px; border-radius: 12px; }
  .onboarding-stage { min-height: 386px; margin: 0 12px; padding: 9px; border-radius: 17px; }.onboarding-panel { min-height: 366px; }
  .tour-scene-card { min-height: 250px; padding: 18px; }.tour-scene-copy { max-width: 100%; padding-bottom: 46px; }.tour-scene-copy strong { font-size: 25px; }.tour-scene-play { right: 16px; bottom: 15px; }
  .tour-role-row { grid-template-columns: 1fr 1fr; }.tour-role-row > span { grid-column: 1 / -1; }.tour-role-row > div { min-width: 0; }
  .tour-studio { grid-template-columns: 1fr; min-height: 265px; }.tour-video { min-height: 176px; }.tour-studio aside { grid-template-columns: repeat(3, 1fr); }.tour-control { justify-content: center; padding: 8px; font-size: 0; }.tour-control img { width: 18px; height: 18px; }
  .tour-waveform { gap: 3px; height: 54px; }.tour-caption { margin-top: 7px; }
  .tour-result { grid-template-columns: 1fr; min-height: 280px; }.tour-result-preview { min-height: 170px; }.tour-score { min-height: 105px; padding: 12px; }.tour-score strong { font-size: 44px; }.tour-score p { display: none; }
  .tour-download { padding: 11px 13px; }
  .onboarding-footer { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px 16px 17px; }.onboarding-dots { justify-content: center; }.onboarding-actions { display: grid; grid-template-columns: 1fr 1fr; }.onboarding-actions .text-button { grid-column: 1 / -1; margin: 0; padding: 2px; }.onboarding-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-dialog[open], .onboarding-panel, .onboarding-shell, .onboarding-intro-wave i { animation: none; }
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font: 400 16px/1.5 var(--font, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif); -webkit-font-smoothing: antialiased; }
body::before { position: fixed; z-index: -2; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 88% 4%, rgba(22, 111, 255, .17), transparent 30rem), radial-gradient(circle at 32% 96%, rgba(19, 198, 255, .09), transparent 34rem), linear-gradient(150deg, var(--bg-deep), var(--bg) 48%, #03102a); }
body::after { position: fixed; z-index: -1; inset: 0; content: ""; opacity: .16; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus); }
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 500; top: 10px; left: 10px; padding: 10px 14px; border-radius: 10px; color: var(--text); background: var(--blue); transform: translateY(-150%); transition: transform .18s ease; }
.skip-link:focus { transform: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 10px; background: rgba(129, 164, 211, .36); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Product shell */
.app-sidebar { position: fixed; z-index: 80; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar-width); padding: 22px 16px 18px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 21, 48, .98), rgba(3, 15, 36, .98)); box-shadow: 18px 0 60px rgba(0, 5, 18, .18); transition: transform .26s ease, width .26s ease; }
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 0 7px 20px; border-bottom: 1px solid var(--line); }
.sidebar-brand { width: 162px; padding: 0; border: 0; background: none; cursor: pointer; }
.sidebar-brand img { width: 100%; height: auto; }
.sidebar-close { display: none; width: 40px; height: 40px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.sidebar-close img, .nav-icon img, .tool-button img, .mobile-tabbar img, .button img, .desktop-button img, .icon-button img, .round-button img, .record-button img, .video-play-button img, .settings-icon img, .search-field img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.sidebar-nav { display: grid; gap: 6px; padding: 22px 0; }
.nav-section-label { margin: 15px 12px 6px; color: var(--muted-2); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.nav-section-label:first-child { margin-top: 0; }
.nav-item { position: relative; display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 8px 12px; overflow: hidden; border: 1px solid transparent; border-radius: 13px; color: var(--muted); background: transparent; cursor: pointer; text-align: left; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.nav-item::before { position: absolute; inset: 9px auto 9px 0; width: 3px; border-radius: 4px; content: ""; background: var(--cyan); opacity: 0; transform: scaleY(.4); transition: .18s ease; }
.nav-item:hover { color: var(--text); background: rgba(21, 57, 103, .52); transform: translateX(2px); }
.nav-item.active, .nav-item[aria-current="page"] { color: var(--text); border-color: rgba(59, 140, 255, .2); background: linear-gradient(100deg, rgba(31, 111, 244, .26), rgba(21, 66, 126, .26)); }
.nav-item.active::before, .nav-item[aria-current="page"]::before { opacity: 1; transform: scaleY(1); }
.nav-icon { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(117, 164, 222, .09); }
.nav-label { font-size: 14px; font-weight: 650; white-space: nowrap; }
.sidebar-spacer { flex: 1; min-height: 12px; }
.sidebar-account { display: grid; gap: 10px; padding-top: 15px; border-top: 1px solid var(--line); }
.account-entry { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 58px; padding: 9px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: rgba(10, 32, 68, .7); cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease; }
.account-entry:hover { border-color: var(--line-strong); background: var(--surface-2); }
.account-entry > i { width: 9px; height: 9px; margin-left: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(62, 214, 160, .11), 0 0 16px rgba(62, 214, 160, .45); }
.account-avatar { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 11px; background: linear-gradient(145deg, var(--blue), #174ec7); }
.account-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; filter: none; }
#login-access .account-avatar img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 12px; }
.account-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.sidebar-tools { display: flex; gap: 7px; }
.tool-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: rgba(8, 27, 58, .72); cursor: pointer; }
.tool-button:hover { border-color: var(--line-strong); background: var(--surface-2); }
.tool-button span { display: none; }
.app-content { min-height: 100vh; margin-left: var(--sidebar-width); transition: margin-left .26s ease; }
.screen { display: none; min-height: 100dvh; }
.screen.active { display: block; animation: screen-in .28s ease both; }
.page-shell { width: min(100%, 1510px); min-height: 100dvh; margin: 0 auto; padding: 42px clamp(28px, 4vw, 68px) 72px; }
.mobile-menu-button, .mobile-tabbar { display: none; }
.nav-scrim { position: fixed; z-index: 70; inset: 0; padding: 0; border: 0; background: rgba(0, 5, 19, .72); backdrop-filter: blur(4px); }
body[data-screen="license"] .app-sidebar, body[data-screen="studio"] .app-sidebar, body[data-screen="review"] .app-sidebar,
body[data-screen="license"] .mobile-menu-button, body[data-screen="studio"] .mobile-menu-button, body[data-screen="review"] .mobile-menu-button,
body[data-screen="license"] .mobile-tabbar, body[data-screen="studio"] .mobile-tabbar, body[data-screen="review"] .mobile-tabbar { display: none !important; }
body[data-screen="license"] .app-content, body[data-screen="studio"] .app-content, body[data-screen="review"] .app-content { margin-left: 0; }

/* Shared type and controls */
.eyebrow { display: inline-block; color: var(--cyan-soft); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow.success { color: var(--green); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 32px; }
.page-header h1 { max-width: 820px; margin: 7px 0 8px; color: var(--text); font-size: clamp(30px, 3.2vw, 52px); font-weight: 780; line-height: 1.04; letter-spacing: -.04em; }
.page-header p { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: 15px; }
.page-header-actions { align-items: flex-end; }
.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.connection-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(7, 27, 58, .7); font-size: 11px; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.connection-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(62, 214, 160, .7); }
.connection-status .offline, #connection-pill.offline { color: var(--danger); }
.connection-status:has(.offline) i { background: var(--danger); }
.button, .desktop-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: 12px; color: var(--text); background: var(--surface-2); cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease; }
.button:hover:not(:disabled), .desktop-button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled, .desktop-button:disabled { cursor: not-allowed; opacity: .46; }
.button-primary, .desktop-button.primary { border-color: rgba(93, 187, 255, .25); background: linear-gradient(135deg, #2785ff, #1452d3); box-shadow: 0 12px 28px rgba(25, 105, 244, .26), inset 0 1px rgba(255,255,255,.14); }
.button-primary:hover:not(:disabled), .desktop-button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #3998ff, #1b63e5); box-shadow: 0 16px 34px rgba(25, 105, 244, .34); }
.button-secondary { border-color: var(--line-strong); background: rgba(14, 46, 91, .85); }
.button-secondary:hover:not(:disabled) { border-color: rgba(71, 186, 255, .55); background: var(--surface-3); }
.button-ghost { border-color: var(--line); color: var(--text-soft); background: rgba(7, 25, 53, .52); }
.button-ghost:hover:not(:disabled) { border-color: var(--line-strong); background: rgba(13, 40, 79, .72); }
.button-danger, .desktop-button.danger { border-color: rgba(255, 95, 120, .36); background: rgba(134, 34, 56, .58); }
.button-danger:hover:not(:disabled) { background: rgba(175, 43, 69, .7); }
.button-large { min-height: 52px; padding-inline: 22px; font-size: 14px; }
.button-compact { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.link-button, .text-button { padding: 7px 0; border: 0; color: var(--cyan-soft); background: none; cursor: pointer; font-size: 13px; font-weight: 700; }
.link-button:hover, .text-button:hover { color: white; }
.link-button span { margin-left: 5px; }
.round-button, .icon-button { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgba(10, 33, 69, .86); cursor: pointer; transition: .18s ease; }
.round-button:hover, .icon-button:hover { border-color: var(--line-strong); background: var(--surface-3); transform: translateY(-1px); }

/* Login */
.license-screen { position: relative; overflow: hidden; padding: clamp(18px, 4vw, 52px); background: radial-gradient(circle at 15% 35%, rgba(26, 118, 255, .17), transparent 32rem), #02091b; }
.login-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); width: min(1180px, 100%); min-height: min(760px, calc(100dvh - 80px)); margin: 0 auto; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 28px; background: rgba(5, 19, 43, .96); box-shadow: 0 40px 120px rgba(0, 3, 16, .64); }
.login-brand { position: absolute; z-index: 4; top: 30px; left: 34px; width: 172px; }
.login-brand img { width: 100%; }
.login-visual { position: relative; min-height: 610px; overflow: hidden; border-right: 1px solid var(--line); background: radial-gradient(circle at 56% 42%, rgba(28, 118, 255, .38), transparent 19rem), linear-gradient(145deg, #071a3c, #02091a 70%); }
.login-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgba(1, 7, 21, .95), transparent 50%); }
.login-stage-mark { position: absolute; z-index: 2; top: 42%; left: 52%; width: 158px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 45px rgba(35, 156, 255, .46)); }
.login-stage-mark img { width: 100%; }
.login-orbit { position: absolute; top: 42%; left: 52%; border: 1px solid rgba(75, 185, 255, .18); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 330px; height: 330px; animation: orbit-spin 18s linear infinite; }
.orbit-two { width: 470px; height: 470px; border-style: dashed; opacity: .55; animation: orbit-spin 26s linear infinite reverse; }
.login-wave { position: absolute; z-index: 3; top: 42%; left: 52%; display: flex; align-items: center; gap: 9px; height: 210px; transform: translate(-50%, -50%); }
.login-wave i { width: 5px; height: 24%; border-radius: 9px; background: linear-gradient(var(--cyan-soft), var(--blue)); box-shadow: 0 0 20px rgba(40, 207, 255, .42); animation: audio-wave 1.15s ease-in-out infinite alternate; }
.login-wave i:nth-child(2n) { height: 48%; animation-delay: -.45s; }.login-wave i:nth-child(3n) { height: 72%; animation-delay: -.72s; }.login-wave i:nth-child(5n) { height: 100%; animation-delay: -.2s; }
.login-visual-copy { position: absolute; z-index: 3; right: 42px; bottom: 46px; left: 42px; }
.login-visual-copy span { color: var(--cyan-soft); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.login-visual-copy strong { display: block; margin-top: 10px; font-size: clamp(36px, 4vw, 60px); line-height: .98; letter-spacing: -.05em; }
.login-card { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(34px, 5vw, 70px); background: linear-gradient(180deg, rgba(9, 30, 63, .86), rgba(5, 18, 41, .96)); }
.login-card.registering { justify-content: flex-start; overflow-y: auto; padding-top: 32px; padding-bottom: 32px; }
.login-card-head { margin-bottom: 8px; }
.login-card-head h1 { margin: 8px 0 10px; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.04em; }
.login-card-head p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.google-auth-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 11px 18px; border: 1px solid #dadce0; border-radius: 11px; color: #202124; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.google-auth-button:hover { border-color: #b8bcc2; box-shadow: 0 3px 10px rgba(0, 0, 0, .24); transform: translateY(-1px); }
.google-auth-button:focus-visible { outline: 3px solid rgba(66, 133, 244, .4); outline-offset: 2px; }
.google-auth-button:disabled { opacity: .65; cursor: wait; transform: none; }
.google-auth-button svg { flex: 0 0 auto; width: 20px; height: 20px; }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted-2); font-size: 11px; }
.or-divider::before, .or-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.form-status { min-height: 20px; margin: -4px 0 0; color: var(--danger); font-size: 12px; text-align: center; }
.name-field { gap: 7px; }
.name-availability { display: block; min-height: 18px; color: var(--muted-2); font-size: 11px; font-weight: 600; line-height: 1.45; }
.name-availability[data-state="checking"] { color: var(--cyan-soft); }
.name-availability[data-state="available"] { color: var(--green); }
.name-availability[data-state="unavailable"] { color: #ff9aac; }
.name-field:has(.name-availability[data-state="available"]) input { border-color: rgba(80, 218, 154, .75); box-shadow: 0 0 0 3px rgba(80, 218, 154, .1); }
.name-field:has(.name-availability[data-state="unavailable"]) input { border-color: rgba(255, 95, 120, .65); }
.name-suggestions { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; color: var(--muted); }
.name-suggestions button { padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: var(--surface-3); cursor: pointer; font: inherit; font-size: 10px; font-weight: 750; }
.name-suggestions button:hover { border-color: var(--cyan); transform: translateY(-1px); }
.profile-avatar-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.profile-avatar-picker legend { margin-bottom: 8px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.profile-avatar-picker > small { display: block; margin: 9px 50px 0; color: var(--muted-2); font-size: 10px; text-align: center; }
.profile-avatar-browser { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 9px; align-items: center; min-width: 0; }
.profile-avatar-nav { display: grid; place-items: center; width: 42px; height: 58px; padding: 0; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); background: #242329; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.profile-avatar-nav:hover { border-color: #f2a7c8; background: #332a32; transform: translateY(-1px); }
.profile-avatar-nav:active { transform: translateY(1px); }
.profile-avatar-nav:focus-visible { outline: 3px solid rgba(242,167,200,.35); outline-offset: 2px; }
.profile-avatar-nav img { width: 19px; height: 19px; }
.profile-avatar-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 82px; gap: 11px; max-width: 100%; padding: 4px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: inline mandatory; scrollbar-width: none; }
.profile-avatar-grid::-webkit-scrollbar { display: none; }
.profile-avatar-grid label { position: relative; display: block; min-width: 0; padding: 5px; border: 2px solid transparent; border-radius: 15px; background: #111113; cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease; }
.profile-avatar-grid label { scroll-snap-align: start; }
.profile-avatar-grid label:hover { border-color: #6c617c; background: #222126; transform: translateY(-1px); }
.profile-avatar-grid input[type="radio"] { position: absolute; width: 1px !important; min-height: 1px !important; margin: -1px; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.profile-avatar-grid img { display: block; width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; }
.profile-avatar-selected-mark { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 25px; height: 25px; border: 3px solid #17171a; border-radius: 50%; color: #171411; background: #f2a7c8; opacity: 0; transform: scale(.6); transition: opacity .18s ease, transform .18s ease; font-size: 13px; font-weight: 900; }
.profile-avatar-grid label:has(input:checked) { border-color: #f2a7c8; background: #2a2229; box-shadow: 0 0 0 3px rgba(242,167,200,.18); transform: translateY(-2px); }
.profile-avatar-grid label:has(input:checked) .profile-avatar-selected-mark { opacity: 1; transform: scale(1); }
.profile-avatar-grid label:has(input:focus-visible) { outline: 3px solid rgba(242,167,200,.35); outline-offset: 2px; }
.profile-dialog { width: min(720px, calc(100vw - 28px)); }
.profile-dialog .dialog-body { display: grid; gap: 20px; }
.profile-avatar-grid-large { grid-auto-columns: 104px; gap: 14px; }
.profile-avatar-grid-large label { padding: 6px; }
@media (max-width: 600px) {
  .profile-avatar-browser { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 6px; }
  .profile-avatar-nav { width: 36px; height: 52px; border-radius: 10px; }
  .profile-avatar-grid, .profile-avatar-grid-large { grid-auto-columns: 78px; gap: 9px; }
  .profile-avatar-picker > small { margin-right: 42px; margin-left: 42px; }
}
.privacy-note { display: block; color: var(--muted-2); font-size: 11px; text-align: center; }.privacy-note span { color: var(--green); }
.license-screen.checking .login-card { opacity: .72; pointer-events: none; }
.license-screen.error .login-shell { border-color: rgba(255, 95, 120, .42); }

/* Inputs */
.field, .range-field { display: grid; gap: 7px; color: var(--text-soft); font-size: 12px; font-weight: 650; }
.field input, .field select, .field textarea, dialog input:not([type="range"]), dialog select, dialog textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 11px; outline: 0; color: var(--text); background: rgba(2, 13, 34, .75); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.field textarea, dialog textarea { min-height: 106px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus, dialog input:focus, dialog select:focus, dialog textarea:focus { border-color: var(--cyan); background: rgba(4, 19, 45, .96); box-shadow: 0 0 0 3px rgba(40, 207, 255, .12); }
select { color-scheme: dark; }
.range-field > span { display: flex; justify-content: space-between; }.range-field output { color: var(--cyan-soft); font-weight: 800; }
input[type="range"] { width: 100%; accent-color: var(--blue); }
.toggle-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--text-soft); background: rgba(7, 26, 55, .62); cursor: pointer; }
.toggle-row:hover { border-color: var(--line-strong); background: rgba(11, 35, 73, .75); }
.toggle-row input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--blue); }
.toggle-row strong, .toggle-row small { display: block; }.toggle-row strong { font-size: 13px; }.toggle-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }

/* Home */
.home-page { padding-bottom: 90px; }
.featured-stage { min-height: 450px; margin-bottom: 44px; }
.featured-loading { display: flex; flex-direction: column; justify-content: flex-end; gap: 13px; min-height: 450px; padding: 50px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(125deg, var(--surface), #0b2858); }
.featured-loading span { display: block; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 200% 100%; animation: shimmer 1.5s infinite; }.loading-pill { width: 90px; height: 22px; }.loading-title { width: min(420px, 70%); height: 52px; }.loading-copy { width: min(520px, 85%); height: 18px; }
.content-section { margin-top: 42px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.section-heading h2 { margin: 5px 0 0; font-size: clamp(24px, 2.5vw, 34px); letter-spacing: -.035em; }
.scene-rail { display: grid; grid-auto-columns: minmax(250px, 290px); grid-auto-flow: column; gap: 15px; padding: 2px 2px 16px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; }
.scene-rail > * { scroll-snap-align: start; }
.home-value-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 54px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.home-value-strip article { display: flex; gap: 14px; align-items: center; min-height: 110px; padding: 22px; background: rgba(7, 26, 56, .94); }
.home-value-strip article > span { display: grid; flex: 0 0 38px; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(40, 207, 255, .25); border-radius: 50%; color: var(--cyan-soft); font-size: 10px; font-weight: 800; }
.home-value-strip strong, .home-value-strip small { display: block; }.home-value-strip strong { font-size: 14px; }.home-value-strip small { margin-top: 3px; color: var(--muted); font-size: 11px; }

/* Dynamic scene cards */
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.scene-card { position: relative; display: flex; min-width: 0; min-height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(10, 33, 70, .92), rgba(5, 21, 47, .98)); box-shadow: 0 18px 44px rgba(0, 5, 20, .18); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.scene-grid .scene-card, .scene-rail .scene-card { flex-direction: column; }
.scene-card:hover { z-index: 1; border-color: rgba(79, 173, 255, .42); box-shadow: 0 24px 54px rgba(0, 6, 24, .34); transform: translateY(-4px); }
.scene-card__media { position: relative; flex: 0 0 auto; aspect-ratio: 16/9; overflow: hidden; background: #07142c; }
.scene-card__image { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, filter .3s ease; }
.scene-card:hover .scene-card__image { transform: scale(1.035); }
.scene-card__media::after { position: absolute; inset: auto 0 0; height: 45%; content: ""; pointer-events: none; background: linear-gradient(transparent, rgba(3, 13, 32, .78)); }
.scene-card__badges { position: absolute; z-index: 2; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.scene-card__badge { padding: 6px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: white; background: rgba(3, 15, 35, .78); backdrop-filter: blur(10px); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.scene-card__badge--free, .scene-card__badge--success { color: #061b17; background: var(--green); }.scene-card__badge--price { color: #061625; background: var(--cyan); }.scene-card__badge--progress { background: var(--blue); }.scene-card__badge--owned { background: #164a85; }.scene-card__badge--soon { color: #2c1e00; background: var(--yellow); }
.scene-card__duration { position: absolute; z-index: 2; right: 11px; bottom: 10px; padding: 4px 7px; border-radius: 7px; color: white; background: rgba(1, 8, 22, .82); font-size: 10px; font-weight: 700; }
.scene-card__body { display: flex; flex: 1; flex-direction: column; padding: 17px; }
.scene-card__eyebrow { margin-bottom: 6px; color: var(--cyan-soft); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.scene-card__title { margin: 0; color: var(--text); font-size: 19px; line-height: 1.15; letter-spacing: -.025em; }
.scene-card__description { display: -webkit-box; min-height: 39px; margin: 8px 0 12px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.scene-card__meta, .metadata { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted-2); font-size: 10px; }
.scene-card__meta span { position: relative; }.scene-card__meta span + span::before { position: absolute; left: -7px; content: "·"; }
.scene-card__progress { margin-top: auto; padding-top: 14px; }
.scene-card__progress-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.scene-card__progress-track { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(135, 172, 221, .13); }
.scene-card__progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px rgba(40, 207, 255, .35); }
.scene-card__actions { display: flex; gap: 8px; margin-top: 14px; }
.scene-card__button { flex: 1; min-width: 0; min-height: 40px; padding: 8px 10px; font-size: 11px; }
.scene-card--coming-soon .scene-card__image { filter: saturate(.5) brightness(.62); }.scene-card--coming-soon:hover { transform: none; }
.scene-card--featured { position: relative; display: block; min-height: 450px; border-radius: var(--radius-lg); background: #071a38; }
.scene-card--featured .scene-card__media { position: absolute; inset: 0 0 0 auto; width: 69%; height: 100%; aspect-ratio: auto; }
.scene-card--featured .scene-card__media::after { inset: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #061733 1%, rgba(6, 23, 51, .92) 15%, rgba(6, 23, 51, .3) 68%, rgba(4, 15, 34, .18)), linear-gradient(to top, rgba(3, 13, 31, .7), transparent 50%); }
.scene-card--featured .scene-card__body { position: relative; z-index: 3; justify-content: center; width: 56%; min-height: 450px; padding: clamp(34px, 5vw, 64px); }
.scene-card--featured .scene-card__eyebrow { font-size: 10px; }.scene-card--featured .scene-card__title { font-size: clamp(37px, 4.2vw, 64px); line-height: .98; letter-spacing: -.05em; }.scene-card--featured .scene-card__description { display: block; max-width: 540px; min-height: 0; margin: 16px 0; color: var(--text-soft); font-size: 15px; -webkit-line-clamp: unset; }.scene-card--featured .scene-card__meta { color: #b9c9df; font-size: 11px; }.scene-card--featured .scene-card__progress { max-width: 430px; margin-top: 22px; }.scene-card--featured .scene-card__actions { max-width: 460px; margin-top: 22px; }.scene-card--featured .scene-card__button { min-height: 50px; font-size: 13px; }
.scene-grid-empty { display: grid; place-items: center; min-height: 250px; padding: 38px; border: 1px dashed var(--line-strong); border-radius: 18px; color: var(--muted); background: rgba(7, 26, 55, .5); text-align: center; }
.scene-grid-empty__title { margin-bottom: 5px; color: var(--text); font-size: 20px; }.scene-grid-empty__copy { max-width: 420px; margin: 0; font-size: 13px; }.scene-grid-empty__action { margin-top: 16px; }
.scene-rail .scene-grid-empty { grid-column: span 2; min-width: 520px; }

/* Catalog and store */
.catalog-toolbar, .store-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: rgba(6, 24, 52, .7); }
.search-field { display: flex; flex: 1 1 320px; align-items: center; gap: 10px; min-width: 210px; min-height: 43px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(2, 13, 34, .65); }
.search-field img { width: 17px; height: 17px; opacity: .6; }
.search-field input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.search-field input::placeholder { color: var(--muted-2); }
.filter-chips { display: flex; gap: 6px; overflow-x: auto; }
.filter-chip { min-height: 38px; padding: 7px 12px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.filter-chip:hover { color: var(--text); background: var(--surface-2); }.filter-chip.active { color: white; border-color: rgba(78, 179, 255, .22); background: rgba(32, 112, 235, .3); }
.sort-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }.sort-field select { min-height: 38px; padding: 7px 30px 7px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); font-size: 11px; }
.catalog-subhead { display: flex; justify-content: space-between; gap: 15px; align-items: center; min-height: 32px; margin-bottom: 12px; }.catalog-subhead-actions { display:flex; align-items:center; gap:10px; }.catalog-subhead-actions .button img { width:16px; height:16px; }.notice { margin: 0; color: var(--muted); font-size: 12px; }.catalog-subhead strong, .store-toolbar > strong { color: var(--muted); font-size: 11px; white-space: nowrap; }
.library-utility { display: flex; justify-content: flex-end; margin-top: 22px; }
.store-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: clamp(24px, 4vw, 42px); overflow: hidden; border: 1px solid rgba(65, 161, 255, .24); border-radius: 20px; background: radial-gradient(circle at 78% 25%, rgba(40, 207, 255, .13), transparent 18rem), linear-gradient(120deg, #0a2a5a, #06162f); }
.store-hero::before { position: absolute; top: -120px; right: 18%; width: 280px; height: 280px; border: 1px solid rgba(77, 186, 255, .15); border-radius: 50%; content: ""; box-shadow: 0 0 0 60px rgba(49, 145, 255, .035), 0 0 0 120px rgba(49, 145, 255, .02); }
.store-hero > * { position: relative; z-index: 1; }.store-hero h2 { max-width: 650px; margin: 7px 0 8px; font-size: clamp(25px, 3vw, 42px); line-height: 1.06; letter-spacing: -.04em; }.store-hero p { margin: 0; color: var(--muted); font-size: 13px; }.store-hero-actions { display: flex; gap: 8px; }
.store-toolbar { justify-content: space-between; }.store-toolbar .search-field { max-width: 520px; }

/* Settings */
.privacy-banner { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; padding: 10px 13px; border: 1px solid rgba(62, 214, 160, .18); border-radius: 11px; color: #a9cfca; background: rgba(24, 93, 78, .17); }.privacy-banner span { color: var(--green); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-card, .diagnostics-panel, .character-box { padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(180deg, rgba(9, 32, 68, .9), rgba(5, 21, 46, .96)); box-shadow: 0 18px 44px rgba(0, 4, 18, .13); }
.settings-card-featured { border-color: rgba(40, 207, 255, .25); box-shadow: 0 20px 56px rgba(15, 126, 211, .1); }
.settings-card > header { display: flex; gap: 13px; align-items: center; margin-bottom: 21px; }.settings-card header h2 { margin: 0; font-size: 19px; }.settings-card header p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.settings-card > .field, .settings-card > .range-field, .settings-card > .toggle-row { margin-top: 13px; }.settings-card > .button { margin-top: 17px; }
.settings-icon { display: grid; flex: 0 0 43px; place-items: center; width: 43px; height: 43px; border: 1px solid rgba(75, 154, 255, .22); border-radius: 12px; background: rgba(36, 104, 210, .2); }.settings-icon.cyan { background: rgba(40, 207, 255, .13); }
.input-meter { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: rgba(129, 169, 221, .12); }.input-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green)); transition: width .08s linear; }.settings-card > small { display: block; margin-top: 6px; color: var(--muted-2); font-size: 10px; }
.diagnostics-panel { margin-top: 17px; }.diagnostics-panel > header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 18px; }.diagnostics-panel h2 { margin: 4px 0 0; font-size: 20px; }.diagnostics-panel > header > span { color: var(--muted); font-size: 11px; }.diagnostics-panel dl, #settings-diagnostics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }.diagnostics-panel dt, .diagnostics-panel dd { margin: 0; padding: 10px; border-radius: 9px; background: rgba(2, 13, 32, .46); font-size: 11px; }

/* Scene setup */
.setup-page { padding-bottom: 126px; }
.scene-header { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 20px; }.scene-header-cover { width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 12px; object-fit: cover; }.scene-header h1 { margin: 2px 0 0; overflow: hidden; font-size: 25px; text-overflow: ellipsis; white-space: nowrap; }.scene-header p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }.local-pack-badge { padding: 8px 11px; border: 1px solid rgba(62, 214, 160, .18); border-radius: 99px; color: #a5d8ca; background: rgba(32, 114, 91, .16); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.setup-tabs { display: flex; gap: 7px; margin-bottom: 17px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(5, 22, 48, .7); }
.setup-tab { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 13px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }.setup-tab > span { color: var(--muted-2); font-size: 9px; }.setup-tab:hover { color: var(--text); background: var(--surface); }.setup-tab.active { color: white; border-color: rgba(52, 151, 255, .22); background: rgba(28, 105, 222, .28); }.setup-tab.active > span { color: var(--cyan-soft); }
.setup-content { display: none; }.setup-content.active { display: block; animation: screen-in .22s ease both; }
.setup-primary-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr); gap: 17px; min-height: 560px; }
.setup-preview-card { position: relative; min-height: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #06162f; }.scene-preview { position: absolute; inset: 0; }.scene-preview img { width: 100%; height: 100%; object-fit: cover; }
.character-box { display: flex; flex-direction: column; padding: 28px; }.character-box h2 { margin: 8px 0 8px; font-size: clamp(25px, 2.7vw, 38px); line-height: 1.05; letter-spacing: -.04em; }.setup-description { margin-bottom: 19px; color: var(--muted); font-size: 12px; }
.character-list { display: grid; gap: 8px; }.character-option { position: relative; display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--text-soft); background: rgba(5, 22, 49, .78); cursor: pointer; transition: .18s ease; }.character-option:hover { border-color: var(--line-strong); background: var(--surface-2); }.character-option:has(input:checked) { border-color: rgba(40, 207, 255, .44); color: white; background: rgba(22, 99, 186, .25); box-shadow: inset 3px 0 var(--cyan); }.character-option input { width: 18px; height: 18px; accent-color: var(--blue); }.character-option span { font-size: 13px; font-weight: 700; }
.session-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; padding-top: 24px; }.session-explainer > div { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(4, 18, 41, .7); }.session-explainer > div > span { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: var(--cyan-soft); background: rgba(40, 207, 255, .1); font-size: 9px; font-weight: 800; }.session-explainer p { margin: 0; }.session-explainer strong, .session-explainer small { display: block; }.session-explainer strong { font-size: 10px; }.session-explainer small { color: var(--muted-2); font-size: 8px; }
.options-panel, .details-panel, .validation-panel { max-width: 960px; min-height: 460px; margin: 0 auto; padding: clamp(24px, 4vw, 42px); }.options-panel > h2, .details-panel > h2, .validation-panel > h2 { margin: 7px 0 24px; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.04em; }.option-selects, .option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.option-grid { margin-top: 18px; }.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; padding: 17px; border: 1px solid rgba(255, 95, 120, .2); border-radius: 13px; background: rgba(111, 27, 47, .18); }.danger-zone strong, .danger-zone small { display: block; }.danger-zone small { margin-top: 3px; color: #c59ba5; font-size: 11px; }
.details-panel dl { display: grid; grid-template-columns: minmax(140px, .4fr) 1fr; margin: 0; }.details-panel dt, .details-panel dd { margin: 0; padding: 13px; border-bottom: 1px solid var(--line); }.details-panel dt { color: var(--muted); font-size: 11px; }.details-panel dd { color: var(--text-soft); font-size: 12px; }.saved-dub-row { margin-top: 22px; }
.validation-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text-soft); font-size: 12px; }.validation-summary { margin-top: 20px; color: var(--cyan-soft); }
.setup-footer { position: fixed; z-index: 42; right: 0; bottom: 0; left: var(--sidebar-width); display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-height: 84px; padding: 14px clamp(28px, 4vw, 68px); border-top: 1px solid var(--line); background: rgba(3, 15, 35, .88); box-shadow: 0 -15px 45px rgba(0, 5, 20, .25); backdrop-filter: blur(18px); transition: left .26s ease; }.setup-footer p { margin: 0 auto 0 0; color: var(--muted); font-size: 12px; }.setup-footer .button { min-width: 220px; }

/* Recording studio */
.studio-screen { background: radial-gradient(circle at 50% -15%, rgba(37, 113, 225, .19), transparent 32rem), #010817; }
.studio-shell { display: flex; flex-direction: column; min-height: 100dvh; padding: 18px clamp(18px, 2.5vw, 38px) 20px; }
.studio-topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; gap: 12px; align-items: center; min-height: 62px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.studio-scene-title > span { color: var(--cyan-soft); font-size: 8px; font-weight: 800; letter-spacing: .14em; }.studio-scene-title h1 { margin: 1px 0 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.studio-progress-copy { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; background: rgba(7, 27, 58, .74); }.studio-progress-copy strong { color: var(--text-soft); font-size: 10px; text-transform: uppercase; }.studio-progress-copy span { color: var(--cyan-soft); font-size: 10px; }
.studio-layout-switch { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(3, 15, 35, .72); }.studio-layout-button { min-height: 31px; padding: 6px 9px; border: 0; font-size: 9px; white-space: nowrap; }.studio-layout-button:hover { color: white; background: rgba(38, 112, 222, .2); }.studio-layout-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }.studio-layout-button.active, .studio-layout-button[aria-pressed="true"] { color: white; background: var(--blue); box-shadow: 0 5px 13px rgba(18, 91, 218, .22); }
.studio-main { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; min-height: 0; padding: 18px 0 14px; }
.studio-player { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #030d20; box-shadow: var(--shadow); }.video-frame { position: relative; flex: 1; min-height: min(55vh, 620px); overflow: hidden; background: black; }.video-frame video { width: 100%; height: 100%; object-fit: contain; }.video-status { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(1, 8, 21, .7); backdrop-filter: blur(8px); }.video-status span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .11em; }.video-status strong { color: white; font-size: 10px; }.countdown { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; color: white; background: rgba(1, 7, 18, .65); font-size: clamp(76px, 12vw, 170px); font-weight: 800; text-shadow: 0 0 50px var(--blue); backdrop-filter: blur(4px); }
.line-copy { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; min-height: 92px; padding: 18px 22px; border-top: 1px solid var(--line); background: linear-gradient(90deg, rgba(9, 34, 72, .96), rgba(5, 22, 48, .96)); }.line-copy > span { color: var(--cyan-soft); font-size: 8px; font-weight: 800; letter-spacing: .14em; }.line-copy p { margin: 0; color: white; font-size: clamp(17px, 2vw, 25px); font-weight: 650; line-height: 1.25; text-align: center; }.line-speaker-classic { display: none; }.studio-layout-immersive .line-speaker-classic { display: none; }.studio-layout-immersive .line-copy-label { display: inline; }.studio-layout-immersive .video-status { display: flex; }
.record-panel { display: flex; flex-direction: column; gap: 13px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(9, 32, 67, .97), rgba(4, 18, 40, .98)); }.record-panel-head { display: flex; gap: 10px; align-items: center; min-height: 48px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.record-dot { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.18); border-radius: 50%; background: var(--green); box-shadow: 0 0 15px rgba(62,214,160,.5); }.record-panel-head span:not(.record-dot) { color: var(--muted-2); font-size: 8px; font-weight: 800; letter-spacing: .13em; }.record-panel-head p { margin: 1px 0 0; color: var(--text); font-size: 12px; font-weight: 700; }
.record-primary-action { display: grid; place-items: center; padding: 8px 0 4px; }.record-button { display: flex; width: 100%; min-height: 102px; align-items: center; gap: 15px; padding: 17px; border: 1px solid rgba(72, 180, 255, .3); border-radius: 16px; color: white; background: linear-gradient(135deg, #1877f2, #0b43bd); box-shadow: 0 16px 36px rgba(18, 89, 218, .28); cursor: pointer; text-align: left; transition: .2s ease; }.record-button:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(18, 89, 218, .36); }.record-button.recording { border-color: rgba(255, 96, 121, .55); background: linear-gradient(135deg, #f04d6a, #a9183b); box-shadow: 0 0 0 7px rgba(255, 95, 120, .1), 0 20px 40px rgba(175, 22, 54, .35); animation: recording-pulse 1.2s ease-in-out infinite alternate; }.record-button-icon { display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.12); }.record-button-icon img { width: 25px; height: 25px; }.record-button strong, .record-button small { display: block; }.record-button strong { font-size: 15px; }.record-button small { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 10px; }
.record-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.record-secondary .button { padding-inline: 9px; font-size: 10px; }.navigation-buttons { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: auto; }.navigation-buttons .button { justify-content: space-between; }.mobile-studio-guide { margin: 0; color: var(--muted-2); font-size: 10px; text-align: center; }
.waveform-dock { display: grid; grid-template-columns: 64px minmax(0, 1fr) 190px; gap: 12px; align-items: center; min-height: 108px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(5, 22, 48, .92); }.waveform-labels { display: grid; align-content: center; gap: 21px; color: var(--muted-2); font-size: 7px; font-weight: 800; letter-spacing: .1em; }.waveform-panel { position: relative; height: 78px; min-width: 0; overflow: hidden; border-radius: 10px; background: rgba(1, 9, 24, .8); }.waveform-panel canvas { width: 100%; height: 100%; }.studio-hint { position: relative; margin: 0; padding-bottom: 10px; color: var(--muted); font-size: 10px; text-align: right; }.studio-hint i { position: absolute; right: 0; bottom: 0; left: 0; height: 4px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, var(--cyan) var(--progress, 0%), rgba(127,164,214,.12) 0); }

/* Review */
.review-screen { background: radial-gradient(circle at 75% 4%, rgba(36, 124, 255, .18), transparent 30rem), #02091c; }
.review-page { width: min(1390px, 100%); min-height: 100dvh; margin: 0 auto; padding: 38px clamp(20px, 4vw, 58px) 60px; }.review-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 24px; }.review-header h1 { margin: 6px 0 4px; font-size: clamp(31px, 4vw, 54px); line-height: 1; letter-spacing: -.045em; }.review-header p { margin: 0; color: var(--muted); }.review-header small { color: var(--muted-2); }
.review-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 17px; }.final-player, .performance-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgba(6, 24, 52, .95); box-shadow: var(--shadow); }.final-video-shell { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }.final-video-shell video { width: 100%; height: 100%; object-fit: contain; }.final-video-label { position: absolute; top: 14px; left: 14px; padding: 6px 9px; border-radius: 99px; color: var(--cyan-soft); background: rgba(2, 12, 29, .78); font-size: 8px; font-weight: 800; letter-spacing: .13em; }.video-play-button { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 72px; height: 72px; padding: 0 0 0 4px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: white; background: rgba(31, 119, 246, .88); box-shadow: 0 0 0 12px rgba(41, 129, 255, .1), 0 18px 50px rgba(0,0,0,.4); cursor: pointer; transform: translate(-50%, -50%); }.video-play-button:hover { background: var(--blue); }.video-play-button img { width: 25px; height: 25px; }.review-scrubber { display: grid; grid-template-columns: 1fr auto; gap: 13px; align-items: center; padding: 17px 18px; }.review-scrubber output { color: var(--muted); font-size: 10px; }.final-status { min-height: 20px; margin: -8px 18px 12px; color: var(--muted); font-size: 11px; }
.performance-panel { padding: 22px; }.score-summary { display: grid; place-items: center; padding: 23px; border: 1px solid rgba(45, 166, 255, .22); border-radius: 15px; background: radial-gradient(circle at 50% 25%, rgba(40, 207, 255, .15), transparent 12rem), rgba(6, 31, 67, .8); text-align: center; }.score-summary small { color: var(--cyan-soft); font-size: 9px; font-weight: 800; letter-spacing: .14em; }.score-summary strong { margin: 7px 0 2px; font-size: 47px; line-height: 1; letter-spacing: -.055em; }.score-summary b { color: var(--green); font-size: 10px; text-transform: uppercase; }.score-summary p { max-width: 260px; margin: 10px 0 0; color: var(--muted); font-size: 10px; }.review-metrics { display: grid; gap: 1px; margin: 14px 0 21px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--line); }.metric-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 12px; color: var(--muted); background: rgba(4, 18, 40, .94); font-size: 11px; }.metric-row strong { color: var(--text); }.performance-panel > h2 { margin: 0 0 10px; font-size: 15px; }.takes-list { display: grid; gap: 7px; max-height: 255px; overflow-y: auto; }.take-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); background: rgba(3, 15, 34, .56); font-size: 10px; }
.review-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; }.export-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }.final-player.is-exporting { position: relative; pointer-events: none; }.final-player.is-exporting::after { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; content: "Preparando seu vídeo…"; color: white; background: rgba(2, 10, 25, .78); backdrop-filter: blur(6px); }

/* Dialogs and notifications */
.app-dialog { width: min(620px, calc(100vw - 28px)); max-height: calc(100dvh - 30px); padding: 0; overflow: hidden auto; border: 1px solid var(--line-strong); border-radius: 20px; color: var(--text); background: #071a38; box-shadow: 0 40px 120px rgba(0, 3, 16, .72); }.app-dialog::backdrop { background: rgba(0, 5, 18, .78); backdrop-filter: blur(8px); }.app-dialog form { margin: 0; }.app-dialog header { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 21px 22px; border-bottom: 1px solid var(--line); }.app-dialog h2 { margin: 2px 0 0; font-size: 21px; letter-spacing: -.025em; }.dialog-body { display: grid; gap: 13px; padding: 20px 22px; }.dialog-body > p { margin: 0; color: var(--muted); font-size: 12px; }.app-dialog footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px; border-top: 1px solid var(--line); background: rgba(3, 15, 35, .46); }.dialog-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.preview-dialog { width: min(840px, calc(100vw - 28px)); }.preview-dialog video { width: 100%; max-height: 60vh; border-radius: 12px; background: black; }.technical-dialog dl, #technical-details { display: grid; grid-template-columns: .45fr 1fr; margin: 0; }.technical-dialog dt, .technical-dialog dd { margin: 0; padding: 10px; border-bottom: 1px solid var(--line); font-size: 11px; }.technical-dialog dt { color: var(--muted); }

/* Diagnóstico visual: os dados brutos continuam disponíveis, mas os gráficos
   tornam ritmo, intensidade e diferença de duração legíveis de relance. */
.technical-dialog{width:min(780px,calc(100vw - 28px))}.technical-dialog-body{gap:12px}.technical-chart-card{padding:15px;border:1px solid var(--line);border-radius:14px;background:#111114}.technical-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.technical-section-heading span{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.technical-section-heading h3{margin:3px 0 0;font-size:15px;letter-spacing:-.015em}.technical-section-heading>strong{font-size:17px;color:#efb2cf}.technical-section-heading>span{padding:5px 8px;border:1px solid var(--line);border-radius:999px;letter-spacing:0;text-transform:none}#technical-waveform{display:block;width:100%;height:168px;border:1px solid #33333b;border-radius:10px;background:#0b0b0d}.technical-legend{display:flex;gap:18px;margin-top:9px;color:var(--muted);font-size:10px}.technical-legend span{display:flex;align-items:center;gap:6px}.technical-legend i{width:18px;height:3px;border-radius:99px}.technical-legend .reference{background:#efb2cf}.technical-legend .recording{background:#c8afe9}.duration-chart{display:grid;gap:10px}.duration-chart>div{display:grid;grid-template-columns:78px minmax(0,1fr) 68px;align-items:center;gap:9px;font-size:10px}.duration-chart>div>span{color:var(--muted)}.duration-chart i{height:10px;overflow:hidden;border-radius:999px;background:#29292f}.duration-chart b{display:block;height:100%;min-width:2px;border-radius:inherit;background:linear-gradient(90deg,#eaa9cb,#c8afe9)}.duration-chart>div:nth-child(2) b{background:linear-gradient(90deg,#a98bd4,#d7b9ed)}.duration-chart output{text-align:right;font-weight:800}.technical-timing-note{margin:10px 0 0;color:var(--muted);font-size:10px}.technical-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}.technical-score-row{display:grid;grid-template-columns:112px minmax(50px,1fr) 28px;align-items:center;gap:8px;font-size:10px}.technical-score-row>span{color:var(--muted)}.technical-score-row>i{height:7px;overflow:hidden;border-radius:99px;background:#29292f}.technical-score-row b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a98bd4,#efb2cf);transition:width .35s ease}.technical-score-row output{text-align:right;font-weight:900}.technical-raw-details{border:1px solid var(--line);border-radius:12px;background:#141417}.technical-raw-details summary{padding:12px 14px;cursor:pointer;color:var(--muted);font-size:11px;font-weight:800}.technical-raw-details[open] summary{border-bottom:1px solid var(--line)}.technical-raw-details #technical-details{padding:4px 10px 10px}.technical-dialog footer{position:sticky;z-index:3;bottom:0}

@media(max-width:650px){.technical-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px)}.technical-dialog header{padding:15px}.technical-dialog-body{padding:13px}.technical-chart-card{padding:12px}.technical-section-heading{align-items:flex-start}.technical-section-heading h3{font-size:14px}#technical-waveform{height:140px}.technical-score-grid{grid-template-columns:1fr;gap:10px}.technical-score-row{grid-template-columns:104px minmax(45px,1fr) 27px}.duration-chart>div{grid-template-columns:68px minmax(0,1fr) 63px}.technical-raw-details #technical-details{grid-template-columns:1fr}.technical-raw-details #technical-details dt{padding-bottom:2px;border-bottom:0}.technical-raw-details #technical-details dd{padding-top:2px;overflow-wrap:anywhere}.technical-dialog footer{padding:11px 13px}}

.creator-market-dialog{width:min(760px,calc(100vw - 28px))}.creator-market-rules{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px;border:1px solid #4a3d4a;border-radius:13px;background:linear-gradient(135deg,rgba(242,167,200,.12),rgba(185,166,232,.1))}.creator-market-rules strong{font-size:16px}.creator-market-rules>span{color:#efb2cf;font-size:11px;font-weight:900}.creator-market-rules small{grid-column:1/-1;color:var(--muted);line-height:1.5}.creator-earnings{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#111114}.creator-earnings span,.creator-earnings small{color:var(--muted);font-size:10px}.creator-earnings strong{grid-row:1/3;grid-column:2;font-size:22px;color:#efb2cf}.creator-package-drop{display:grid;gap:7px;padding:16px;border:1px dashed #75647c;border-radius:13px;background:#121215;font-size:11px;font-weight:800}.creator-package-drop input{width:100%;padding:8px;border-radius:8px;background:#202024}.creator-package-drop small{color:var(--muted);font-weight:400}.creator-rights-confirm{display:flex;align-items:flex-start;gap:10px;font-size:11px;line-height:1.45}.creator-rights-confirm input{flex:0 0 auto;width:19px;height:19px;accent-color:#efb2cf}.creator-submission-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.creator-submission-list{display:grid;gap:7px}.creator-submission-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:11px;border:1px solid var(--line);border-radius:10px;background:#121215}.creator-submission-item strong{font-size:11px}.creator-submission-item span{align-self:start;padding:4px 7px;border-radius:999px;background:#29232d;color:#efb2cf;font-size:8px;font-weight:900;text-transform:uppercase}.creator-submission-item small{grid-column:1/-1;color:var(--muted);font-size:9px}.creator-submission-item p{grid-column:1/-1;margin:0;color:#efb2cf;font-size:10px}.creator-market-dialog #creator-submit-status{min-height:18px;margin:0;color:#efb2cf;font-size:10px}@media(max-width:650px){.creator-market-dialog{width:calc(100vw - 12px)}.creator-market-rules{grid-template-columns:1fr}.creator-market-rules small{grid-column:auto}.creator-earnings strong{font-size:18px}.creator-market-dialog .dialog-columns{grid-template-columns:1fr}}
.nav-label small{display:inline-flex;margin-left:6px;padding:3px 6px;border:1px solid rgba(242,167,200,.35);border-radius:999px;color:#f3b2d1;background:rgba(242,167,200,.1);font-size:7px;font-weight:900;letter-spacing:.08em;vertical-align:middle}
.creator-coming-soon-trigger{border-style:dashed!important}.creator-coming-soon-trigger small{margin-left:4px;padding:3px 6px;border-radius:999px;color:#171411;background:#efb2cf;font-size:7px;font-weight:900;letter-spacing:.08em}
.creator-coming-soon-dialog{width:min(720px,calc(100vw - 28px))}.creator-coming-soon-dialog>div{display:grid}.creator-coming-soon-hero{display:grid;grid-template-columns:88px minmax(0,1fr);gap:20px;align-items:center;padding:22px;border:1px solid rgba(242,167,200,.35);border-radius:18px;background:radial-gradient(circle at 12% 20%,rgba(242,167,200,.2),transparent 38%),linear-gradient(135deg,rgba(23,30,57,.96),rgba(25,17,30,.96))}.creator-coming-soon-icon{display:grid;place-items:center;width:82px;height:82px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(135deg,#efb2cf,#b9a6e8);box-shadow:0 18px 45px rgba(0,0,0,.25)}.creator-coming-soon-icon img{width:38px;height:38px;filter:brightness(0) saturate(100%)}.creator-coming-soon-hero>div>strong{color:#efb2cf;font-size:9px;letter-spacing:.14em}.creator-coming-soon-hero h3{margin:7px 0 8px;font-size:22px;line-height:1.12}.creator-coming-soon-hero p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.creator-coming-soon-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}.creator-coming-soon-steps li{display:flex;gap:10px;min-height:112px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#111114}.creator-coming-soon-steps li>span{display:grid;flex:0 0 auto;place-items:center;width:28px;height:28px;border-radius:50%;color:#171411;background:#efb2cf;font-size:11px;font-weight:900}.creator-coming-soon-steps div{display:grid;align-content:start;gap:6px}.creator-coming-soon-steps strong{font-size:11px}.creator-coming-soon-steps small{color:var(--muted);font-size:10px;line-height:1.45}.creator-coming-soon-note{display:grid;gap:4px;padding:14px 16px;border-left:3px solid #efb2cf;border-radius:4px 12px 12px 4px;background:rgba(242,167,200,.08)}.creator-coming-soon-note strong{font-size:11px}.creator-coming-soon-note span{color:var(--muted);font-size:10px}.creator-coming-soon-dialog footer{justify-content:flex-end}.creator-coming-soon-dialog footer .button{min-width:150px}@media(max-width:650px){.creator-coming-soon-hero{grid-template-columns:1fr;padding:17px}.creator-coming-soon-icon{width:64px;height:64px;border-radius:18px}.creator-coming-soon-icon img{width:30px;height:30px}.creator-coming-soon-hero h3{font-size:19px}.creator-coming-soon-steps{grid-template-columns:1fr}.creator-coming-soon-steps li{min-height:0}.creator-coming-soon-dialog footer .button{width:100%}}
.toast { position: fixed; z-index: 600; right: 22px; bottom: 22px; max-width: min(420px, calc(100vw - 44px)); padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; color: white; background: rgba(8, 30, 64, .96); box-shadow: 0 18px 50px rgba(0,0,0,.45); font-size: 12px; backdrop-filter: blur(12px); }

@keyframes screen-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes audio-wave { from { transform: scaleY(.56); opacity: .65; } to { transform: scaleY(1.06); opacity: 1; } }
@keyframes orbit-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes recording-pulse { to { box-shadow: 0 0 0 12px rgba(255, 95, 120, .04), 0 20px 45px rgba(175, 22, 54, .42); } }

@media (max-width: 1180px) and (min-width: 861px) {
  :root { --sidebar-width: 88px; }
  .app-sidebar { padding-inline: 12px; }.sidebar-brand-row { justify-content: center; padding-inline: 0; }.sidebar-brand { width: 52px; overflow: hidden; }.sidebar-brand img { width: 188px; max-width: none; }.nav-item { justify-content: center; padding-inline: 8px; }.nav-label, .nav-section-label, .account-copy, .account-entry > span:last-child { display: none; }.account-entry { display: grid; grid-template-columns: 1fr; place-items: center; padding: 8px; }.account-entry > i { margin: 0; }.sidebar-tools { flex-direction: column; align-items: center; }.tool-button { width: 44px; height: 42px; }.setup-footer { left: var(--sidebar-width); }.page-shell { padding-inline: 34px; }
  .setup-primary-grid { grid-template-columns: 1fr 360px; }
}

@media (max-width: 980px) {
  .page-header-actions { align-items: flex-start; flex-direction: column; }.header-actions { justify-content: flex-start; }.catalog-toolbar { flex-wrap: wrap; }.search-field { flex-basis: 100%; }.filter-chips { flex: 1; }.sort-field { margin-left: auto; }.settings-grid { grid-template-columns: 1fr; }.setup-primary-grid { grid-template-columns: 1fr; min-height: 0; }.setup-preview-card { min-height: 460px; }.character-box { min-height: 420px; }.studio-main { grid-template-columns: minmax(0, 1fr) 300px; }.review-layout { grid-template-columns: 1fr; }.performance-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }.performance-panel > h2, .takes-list { grid-column: 1/-1; }.review-metrics { margin: 0; }
}

@media (max-width: 860px) {
  .app-sidebar { width: min(286px, 86vw); transform: translateX(-102%); }.sidebar-close { display: grid; }.app-nav-open .app-sidebar { transform: translateX(0); }.app-content { margin-left: 0; }.mobile-menu-button { position: fixed; z-index: 60; top: max(15px, env(safe-area-inset-top)); left: 16px; display: grid; place-content: center; gap: 4px; width: 43px; height: 43px; padding: 0; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(5, 22, 48, .9); box-shadow: 0 10px 30px rgba(0,0,0,.22); backdrop-filter: blur(12px); }.mobile-menu-button span { display: block; width: 17px; height: 2px; border-radius: 3px; background: white; }.mobile-tabbar { position: fixed; z-index: 55; right: 10px; bottom: max(9px, env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 62px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(4, 19, 43, .91); box-shadow: 0 18px 55px rgba(0,0,0,.42); backdrop-filter: blur(18px); }.mobile-tabbar button { position: relative; display: grid; place-items: center; gap: 2px; padding: 4px; border: 0; border-radius: 12px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; }.mobile-tabbar button.active { color: white; background: rgba(32, 112, 235, .24); }.mobile-tabbar img { width: 17px; height: 17px; opacity: .8; }.mobile-tabbar .mobile-create { width: 54px; height: 54px; margin: -17px auto 0; border: 5px solid #04132c; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--blue), #1449c7); box-shadow: 0 10px 25px rgba(24, 100, 229, .4); }.mobile-tabbar .mobile-create img { width: 21px; height: 21px; }.workspace-screen .page-shell { padding: 78px 18px 96px; }.page-header { margin-bottom: 24px; }.page-header h1 { font-size: clamp(30px, 8vw, 44px); }.connection-status { margin-top: 0; }.setup-footer { left: 0; bottom: 76px; }.setup-page { padding-bottom: 174px !important; }.home-value-strip { grid-template-columns: 1fr; }.studio-shell { padding: 12px; }.studio-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }.studio-progress-copy { display: none; }.studio-topbar #studio-technical { display: none; }.studio-main { grid-template-columns: 1fr; }.record-panel { min-height: 0; }.video-frame { min-height: auto; aspect-ratio: 16/9; }.waveform-dock { grid-template-columns: 1fr; }.waveform-labels { display: none; }.studio-hint { text-align: left; }.review-page { padding: 24px 16px 86px; }
}

@media (max-width: 650px) {
  .page-header { display: block; }.page-header .connection-status { position: absolute; top: 20px; right: 17px; }.header-actions { margin-top: 17px; }.header-actions .button { flex: 1; }.featured-stage, .featured-loading { min-height: 470px; }.featured-loading { padding: 26px; }.scene-card--featured { min-height: 470px; }.scene-card--featured .scene-card__media { inset: 0; width: 100%; height: 100%; }.scene-card--featured .scene-card__media::after { background: linear-gradient(to top, rgba(3, 14, 33, .99) 8%, rgba(3, 14, 33, .75) 48%, rgba(3, 14, 33, .05) 78%); }.scene-card--featured .scene-card__body { justify-content: flex-end; width: 100%; min-height: 470px; padding: 24px; }.scene-card--featured .scene-card__title { font-size: 37px; }.scene-card--featured .scene-card__description { margin: 10px 0; font-size: 12px; }.scene-card--featured .scene-card__progress { margin-top: 10px; }.scene-card--featured .scene-card__actions { margin-top: 14px; }.scene-rail { grid-auto-columns: 80vw; }.scene-rail .scene-grid-empty { min-width: 80vw; }.section-heading { align-items: center; }.section-heading h2 { font-size: 24px; }.section-heading .link-button { font-size: 11px; }.catalog-toolbar { padding: 8px; }.filter-chips { order: 3; flex-basis: 100%; }.sort-field > span { display: none; }.scene-grid { grid-template-columns: 1fr; }.store-hero { align-items: flex-start; flex-direction: column; }.store-hero-actions { width: 100%; }.store-hero-actions .button { flex: 1; }.scene-header { grid-template-columns: auto auto minmax(0,1fr); }.scene-header .local-pack-badge { display: none; }.setup-preview-card { min-height: 420px; }.preview-copy { right: 20px; bottom: 20px; left: 20px; }.preview-copy > p { font-size: 15px; }.character-box { min-height: 0; padding: 22px; }.session-explainer { grid-template-columns: 1fr; }.option-selects, .option-grid { grid-template-columns: 1fr; }.danger-zone { align-items: flex-start; flex-direction: column; }.setup-footer { align-items: stretch; flex-direction: column; gap: 9px; min-height: auto; padding: 11px 16px; }.setup-footer p { margin: 0; text-align: center; }.setup-footer .button { width: 100%; min-width: 0; }.studio-topbar { gap: 8px; }.studio-scene-title h1 { font-size: 14px; }.studio-main { gap: 10px; padding: 10px 0; }.studio-player { border-radius: 13px; }.line-copy { grid-template-columns: 1fr; gap: 5px; min-height: 78px; padding: 12px; }.line-copy > span { text-align: center; }.line-copy p { font-size: 16px; }.record-panel { gap: 9px; padding: 13px; border-radius: 13px; }.record-primary-action { padding: 0; }.record-button { min-height: 74px; }.record-button-icon { width: 45px; height: 45px; }.record-secondary .button { min-height: 40px; }.waveform-dock { min-height: 85px; padding: 8px; }.waveform-panel { height: 58px; }.review-header h1 { font-size: 34px; }.performance-panel { display: block; }.review-metrics { margin: 14px 0; }.review-actions { display: grid; }.review-actions .button { width: 100%; }.dialog-columns { grid-template-columns: 1fr; }.app-dialog footer { align-items: stretch; flex-direction: column-reverse; }.app-dialog footer .button { width: 100%; }.login-shell { display: block; min-height: auto; }.license-screen { padding: 0; }.login-brand { top: 22px; left: 22px; width: 145px; }.login-visual { min-height: 250px; border-right: 0; border-bottom: 1px solid var(--line); }.login-stage-mark { width: 82px; }.login-wave { height: 110px; gap: 5px; }.login-wave i { width: 3px; }.login-orbit { display: none; }.login-visual-copy { right: 22px; bottom: 22px; left: 22px; }.login-visual-copy span { font-size: 8px; }.login-visual-copy strong { margin-top: 5px; font-size: 29px; }.login-card { padding: 30px 22px 38px; }.login-card-head h1 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Classic recording studio
   Activate with `.studio-layout-classic` / `[data-layout="classic"]` on
   #studio-screen. Legacy class/data aliases remain supported. */

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) {
  --classic-ink: #eaf4ff;
  --classic-paper: #081a32;
  --classic-paper-deep: #020817;
  --classic-panel: #091f3c;
  --classic-blue: #2f80ed;
  --classic-teal: #35d6f4;
  --classic-yellow: #42d9a0;
  --classic-red: #ff5d7d;
  --classic-shadow: 0 20px 52px rgba(0, 0, 0, .28);
  color: #eaf4ff;
  color-scheme: dark;
  background: radial-gradient(circle at 84% 2%, rgba(20, 87, 164, .18), transparent 30%), #020817;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-shell,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 900px) 270px;
  grid-template-rows: auto auto 137px;
  gap: 18px 34px;
  align-content: start;
  justify-content: center;
  width: 100%;
  min-height: auto;
  margin-inline: auto;
  padding: 0 clamp(16px, 2.8vw, 34px) 28px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-topbar,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  justify-self: center;
  width: 100vw;
  min-height: 58px;
  margin-bottom: 14px;
  padding: 6px clamp(16px, 2.8vw, 34px);
  border: 0;
  border-bottom: 3px solid var(--classic-ink);
  border-radius: 0;
  color: var(--classic-paper);
  background: var(--classic-ink);
  box-shadow: none;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-scene-title > span,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-scene-title > span {
  color: var(--classic-yellow);
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .09em;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-scene-title h1,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-scene-title h1 {
  color: var(--classic-paper);
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.05;
  letter-spacing: .035em;
  text-transform: uppercase;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-progress-copy,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-progress-copy {
  padding: 7px 4px;
  border: 0;
  border-radius: 0;
  color: var(--classic-paper);
  background: transparent;
  box-shadow: none;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-progress-copy strong,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-progress-copy strong {
  color: var(--classic-red);
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 10px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-progress-copy span,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-progress-copy span {
  color: var(--classic-paper);
  font-weight: 700;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-topbar .round-button,
body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-topbar .button,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-topbar .round-button,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-topbar .button {
  min-height: 40px;
  border: 2px solid var(--classic-ink);
  border-radius: 0;
  color: var(--classic-ink);
  background: var(--classic-paper);
  box-shadow: 2px 2px 0 var(--classic-paper);
  font-family: "Segoe Print", "Comic Sans MS", Arial, sans-serif;
  font-weight: 900;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen :is(#studio-exit, #studio-technical),
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) :is(#studio-exit, #studio-technical) {
  width: auto;
  padding-inline: 13px;
  background: var(--classic-teal);
  box-shadow: none;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #studio-exit,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-exit {
  display: inline-flex;
  gap: 7px;
  min-width: 88px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #studio-exit::after,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-exit::after {
  content: "Sair";
  font-weight: 700;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-layout-switch,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-layout-switch {
  border: 1px solid rgba(255, 248, 236, .45);
  border-radius: 0;
  background: #27231f;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-layout-button,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-layout-button {
  min-height: 30px;
  padding: 5px 8px;
  border: 0;
  color: var(--classic-paper);
  background: transparent;
  box-shadow: none;
  font-family: "Segoe Print", "Comic Sans MS", Arial, sans-serif;
  font-size: 10px;
  font-weight: 900;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-layout-button:is(.active, [aria-pressed="true"]),
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-layout-button:is(.active, [aria-pressed="true"]) {
  color: var(--classic-ink);
  background: var(--classic-yellow);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-topbar img,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-topbar img {
  filter: brightness(0);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-main,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-main {
  display: contents;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-player,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-player {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  overflow: hidden;
  border: 3px solid var(--classic-ink);
  border-radius: 0;
  background: #d8c6a8;
  box-shadow: var(--classic-shadow);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .video-frame,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .video-frame {
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 10px;
  overflow: hidden;
  border: 5px solid var(--classic-ink);
  background: #08060a;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .video-frame video,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .video-frame video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #050306;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .video-status,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .video-status {
  top: 12px;
  left: 12px;
  padding: 7px 9px;
  border: 2px solid var(--classic-ink);
  border-radius: 0;
  color: var(--classic-ink);
  background: var(--classic-yellow);
  box-shadow: 3px 3px 0 var(--classic-ink);
  backdrop-filter: none;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .video-status span,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .video-status span {
  color: #5c4800;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 9px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .video-status strong,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .video-status strong {
  color: var(--classic-ink);
  font-size: 12px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .countdown,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .countdown {
  color: var(--classic-yellow);
  background: rgba(23, 20, 17, .88);
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: clamp(72px, 11vw, 140px);
  text-shadow: 7px 7px 0 var(--classic-red);
  backdrop-filter: none;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .line-copy,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .line-copy {
  display: block;
  min-height: 74px;
  padding: 10px 18px 12px;
  border-top: 3px solid var(--classic-ink);
  color: var(--classic-ink);
  background: var(--classic-paper);
  text-align: center;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .line-copy > span,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .line-copy > span {
  color: var(--classic-red);
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .line-speaker-classic,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .line-speaker-classic {
  display: inline-block;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen :is(.line-copy-label, .video-status),
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) :is(.line-copy-label, .video-status) {
  display: none;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .line-copy p,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .line-copy p {
  margin: 7px auto 0;
  color: var(--classic-ink);
  font-family: Arial, "Trebuchet MS", sans-serif;
  font-size: clamp(22px, 2.3vw, 31px);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: start;
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 3px solid var(--classic-ink);
  border-radius: 0;
  color: var(--classic-ink);
  background: var(--classic-panel);
  box-shadow: 6px 7px 0 var(--classic-ink);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel-head,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel-head {
  min-height: 54px;
  padding: 8px 10px;
  border: 2px solid var(--classic-ink);
  color: var(--classic-ink);
  background: var(--classic-paper);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel-head span:not(.record-dot),
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel-head span:not(.record-dot) {
  color: #7d3028;
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-size: 9px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel-head p,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel-head p {
  color: var(--classic-ink);
  font-size: 14px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-dot,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-dot {
  border-color: var(--classic-ink);
  background: var(--classic-teal);
  box-shadow: 0 0 0 3px rgba(85, 189, 180, .2);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-primary-action,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-primary-action {
  padding: 2px 0;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button {
  min-height: 82px;
  padding: 12px;
  border: 3px solid var(--classic-ink);
  border-radius: 0;
  color: var(--classic-ink);
  background: var(--classic-yellow);
  box-shadow: 5px 6px 0 var(--classic-ink);
  font-family: "Segoe Print", "Comic Sans MS", Arial, sans-serif;
  font-weight: 900;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button:hover,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button:hover {
  filter: brightness(1.04);
  box-shadow: 3px 4px 0 var(--classic-ink);
  transform: translate(2px, 2px);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button.recording,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button.recording {
  color: var(--classic-paper);
  border-color: var(--classic-ink);
  background: var(--classic-red);
  box-shadow: 5px 6px 0 var(--classic-ink);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button-icon,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button-icon {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border: 2px solid var(--classic-ink);
  border-radius: 50%;
  background: var(--classic-paper);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button img,
body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel .button img,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button img,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel .button img {
  filter: brightness(0);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button.recording img,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button.recording img {
  filter: brightness(0) invert(1);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button strong,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button strong {
  font-size: 17px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button small,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button small {
  color: currentColor;
  opacity: .68;
  font-size: 11px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-secondary,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-secondary {
  gap: 7px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel .button,
body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel .round-button,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel .button,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel .round-button {
  min-height: 45px;
  border: 2px solid var(--classic-ink);
  border-radius: 0;
  color: var(--classic-ink);
  background: #e8e0d3;
  box-shadow: 3px 4px 0 var(--classic-ink);
  font-family: "Segoe Print", "Comic Sans MS", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-secondary .button:first-child,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-secondary .button:first-child {
  background: var(--classic-teal);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-secondary .button:last-child,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-secondary .button:last-child {
  background: var(--classic-teal);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .navigation-buttons,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .navigation-buttons {
  grid-template-columns: 48px 1fr;
  gap: 8px;
  margin-top: 5px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .navigation-buttons #next-line,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .navigation-buttons #next-line {
  background: var(--classic-teal);
  font-weight: 800;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #reset-microphone,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #reset-microphone {
  min-height: 38px;
  padding: 6px;
  border: 2px solid #8e3126;
  color: var(--classic-paper);
  background: var(--classic-red);
  box-shadow: 3px 4px 0 var(--classic-ink);
  font-family: "Segoe Print", "Comic Sans MS", Arial, sans-serif;
  font-weight: 900;
  font-size: 12px;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .mobile-studio-guide,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .mobile-studio-guide {
  color: #5b5146;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-dock,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-dock {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 94px auto;
  gap: 10px;
  align-content: start;
  align-items: start;
  align-self: start;
  height: 137px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-labels,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-labels {
  display: none;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-panel,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-panel {
  height: 94px;
  border: 4px solid var(--classic-blue);
  border-radius: 10px;
  background: #101820;
  box-shadow: 6px 7px 0 var(--classic-ink);
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-hint,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-hint {
  grid-column: 1 / -1;
  min-height: 26px;
  margin: 5px 0 0;
  padding: 0 0 8px;
  color: var(--classic-ink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-hint i,
#studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-hint i {
  display: none;
}

@media (max-width: 1050px) {
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-shell,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-shell {
    grid-template-columns: minmax(0, 1fr) 265px;
    gap: 15px 18px;
    padding-inline: 16px;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel { padding: 10px; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button { min-height: 74px; }
}

@media (max-width: 780px) {
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-shell,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 12px;
    padding: 10px max(8px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-topbar,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-topbar {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 7px;
    min-height: 58px;
    padding: 5px 7px;
    box-shadow: 4px 5px 0 var(--classic-blue);
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-progress-copy,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #studio-technical,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-progress-copy,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-technical { display: none; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-player,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-player {
    grid-column: 1;
    grid-row: 2;
    box-shadow: 4px 5px 0 var(--classic-ink);
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .video-frame,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .video-frame {
    margin: 6px;
    border-width: 3px;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .line-copy,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .line-copy {
    min-height: 84px;
    padding: 10px 12px 12px;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .line-copy p,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .line-copy p {
    margin-top: 5px;
    font-size: clamp(18px, 5.5vw, 24px);
    line-height: 1.15;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-dock,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-dock {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 76px auto;
    gap: 7px;
    height: auto;
    padding: 7px;
    border: 2px solid var(--classic-ink);
    background: var(--classic-paper);
    box-shadow: 3px 4px 0 var(--classic-ink);
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-labels,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-labels { display: none; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-panel,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-panel {
    height: 76px;
    border-width: 3px;
    box-shadow: none;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel {
    grid-column: 1;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 9px;
    box-shadow: 3px 4px 0 var(--classic-ink);
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel-head,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-primary-action,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-secondary,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .navigation-buttons,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #reset-microphone,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .mobile-studio-guide,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel-head,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-primary-action,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-secondary,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .navigation-buttons,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #reset-microphone,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .mobile-studio-guide { grid-column: 1 / -1; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .mobile-studio-guide,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .mobile-studio-guide {
    display: block;
    padding: 7px 9px;
    border-left: 5px solid var(--classic-blue);
    background: #eee2cf;
    color: var(--classic-ink);
    text-align: left;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button { min-height: 68px; }
}

@media (max-width: 420px) {
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-scene-title > span,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-scene-title > span { display: none; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-scene-title h1,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-scene-title h1 { font-size: 13px; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-secondary,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-secondary { grid-template-columns: 1fr; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button strong,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button strong { font-size: 15px; }
}

@media (max-width: 950px) and (orientation: landscape) and (max-height: 600px) {
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-shell,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-shell {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: auto auto 90px;
    gap: 9px 14px;
    padding: 7px;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .studio-player,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .studio-player {
    grid-column: 1;
    grid-row: 2;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel {
    grid-column: 2;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-panel-head,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-primary-action,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .navigation-buttons,
  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #reset-microphone,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-panel-head,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-primary-action,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .navigation-buttons,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #reset-microphone { grid-column: 1 / -1; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-secondary,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-secondary {
    grid-column: 1 / -1;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .mobile-studio-guide,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .mobile-studio-guide { display: none; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .record-button,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .record-button { min-height: 58px; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-dock,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-dock {
    grid-column: 1;
    grid-row: 3;
    grid-template-rows: 58px auto;
    height: 90px;
    padding: 4px;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen .waveform-panel,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) .waveform-panel { height: 58px; }
}

/* The compact topbar retains exit, title, layout selector and settings after
   progress/technical controls are intentionally hidden at this breakpoint. */
@media (max-width: 860px) {
  .studio-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 7px;
  }

  .studio-scene-title { min-width: 0; }
  .studio-layout-switch { flex: 0 0 auto; gap: 2px; padding: 2px; }
  .studio-layout-button { min-height: 30px; padding: 5px 7px; font-size: 8px; }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #studio-exit,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-exit {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  body:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-screen #studio-exit::after,
  #studio-screen:is(.studio-layout--classic, .studio-layout-classic, [data-layout="classic"], [data-studio-layout="classic"]) #studio-exit::after {
    display: none;
  }
}

/* Automatic user-scene generation: video upload only, with no manual editor. */
.creator-video-dialog{width:min(760px,calc(100vw - 28px))}.creator-video-intro{display:grid;grid-template-columns:72px minmax(0,1fr);gap:17px;align-items:center;padding:18px;border:1px solid rgba(242,167,200,.32);border-radius:16px;background:linear-gradient(135deg,rgba(242,167,200,.12),rgba(185,166,232,.08))}.creator-video-intro>span{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,#efb2cf,#b9a6e8)}.creator-video-intro img{width:32px;height:32px;filter:brightness(0)}.creator-video-intro strong{color:#efb2cf;font-size:8px;letter-spacing:.14em}.creator-video-intro h3{margin:5px 0;font-size:18px}.creator-video-intro p{margin:0;color:var(--muted);font-size:10px;line-height:1.5}.creator-upload-progress{display:grid;gap:7px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#111114}.creator-upload-progress>div{display:flex;justify-content:space-between;font-size:10px}.creator-upload-progress progress{width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;accent-color:#efb2cf}.creator-submission-heading>div{display:grid;gap:3px}.creator-submission-heading small{color:var(--muted);font-size:9px}.creator-generation-progress{grid-column:1/-1;height:5px;overflow:hidden;border-radius:99px;background:#29292f}.creator-generation-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#efb2cf,#b9a6e8)}.creator-generation-open{grid-column:1/-1;justify-self:start;margin-top:3px}.creator-generation--ready>span{color:#111;background:#9fe0b5}.creator-generation--failed>span{color:#fff;background:#713544}@media(max-width:650px){.creator-video-dialog{width:calc(100vw - 12px)}.creator-video-intro{grid-template-columns:1fr}.creator-video-dialog footer .button{flex:1}}

@media (max-width: 420px) {
  .studio-topbar { gap: 5px; }
  .studio-layout-button { padding-inline: 5px; font-size: 7.5px; }
}

/* Classic Studio v2 — classic information architecture with the current
   gustin product language. The layout remains familiar without switching
   to the retired paper/collage identity. */
#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) {
  --classic-ink: #eaf4ff;
  --classic-paper: #081a32;
  --classic-paper-deep: #020817;
  --classic-panel: #091f3c;
  --classic-blue: #2f80ed;
  --classic-teal: #35d6f4;
  --classic-yellow: #42d9a0;
  --classic-red: #ff5d7d;
  --classic-shadow: 0 20px 52px rgba(0, 0, 0, .28);
  color: #eaf4ff;
  color-scheme: dark;
  background: radial-gradient(circle at 84% 2%, rgba(20, 87, 164, .18), transparent 30%), #020817;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 350px);
  grid-template-rows: auto minmax(0, 1fr) 108px;
  gap: 14px 16px;
  width: min(100%, 1680px);
  height: 100dvh;
  min-height: 720px;
  margin-inline: auto;
  padding: 14px clamp(16px, 2vw, 30px) 18px;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  justify-self: stretch;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid #183d69;
  border-radius: 15px;
  color: #eaf4ff;
  background: linear-gradient(180deg, rgba(9, 31, 61, .98), rgba(5, 21, 45, .98));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-scene-title > span {
  color: #44d9f4;
  font-family: inherit;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .14em;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-scene-title h1 {
  color: #f4f8ff;
  font-family: inherit;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: none;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-progress-copy {
  padding: 7px 11px;
  border: 1px solid #1c4777;
  border-radius: 999px;
  color: #d7e8fa;
  background: rgba(7, 27, 58, .8);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-progress-copy strong {
  color: #42d9a0;
  font-family: inherit;
  font-size: 9px;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-progress-copy span {
  color: #b8cde4;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-topbar :is(.round-button, .button) {
  min-height: 40px;
  border: 1px solid #24558a;
  border-radius: 11px;
  color: #eaf4ff;
  background: #0b2547;
  box-shadow: none;
  font-family: inherit;
  font-weight: 750;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) :is(#studio-exit, #studio-technical) {
  width: auto;
  padding-inline: 12px;
  color: #dcecff;
  background: #0b2547;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) #studio-exit {
  min-width: 88px;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-layout-switch {
  padding: 3px;
  border: 1px solid #1b4778;
  border-radius: 11px;
  background: #06162d;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-layout-button {
  min-height: 31px;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  color: #91aac5;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-layout-button:is(.active, [aria-pressed="true"]) {
  color: white;
  background: #236fdf;
  box-shadow: 0 6px 18px rgba(26, 99, 220, .28);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-topbar img,
#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-panel img {
  filter: none;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-main {
  display: contents;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-player {
  grid-column: 1;
  grid-row: 2;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #1b4778;
  border-radius: 17px;
  background: #030d20;
  box-shadow: var(--classic-shadow);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .video-frame {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #010713;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .video-frame video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: #010713;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .countdown {
  color: white;
  background: rgba(1, 8, 21, .72);
  font-family: inherit;
  text-shadow: 0 0 50px #2f80ed;
  backdrop-filter: blur(4px);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .line-copy {
  display: block;
  min-height: 86px;
  padding: 13px 20px 15px;
  border-top: 1px solid #1b4778;
  color: #eaf4ff;
  background: linear-gradient(90deg, rgba(9, 34, 72, .98), rgba(5, 22, 48, .98));
  text-align: center;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .line-copy > span {
  color: #44d9f4;
  font-family: inherit;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .line-copy p {
  margin: 7px auto 0;
  color: white;
  font-family: inherit;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 720;
  line-height: 1.2;
  text-wrap: balance;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-panel {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  display: flex;
  min-height: 0;
  gap: 12px;
  padding: 18px;
  border: 1px solid #1b4778;
  border-radius: 17px;
  color: #eaf4ff;
  background: linear-gradient(180deg, rgba(9, 32, 67, .98), rgba(4, 18, 40, .99));
  box-shadow: var(--classic-shadow);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-panel-head {
  min-height: 54px;
  padding: 0 0 13px;
  border: 0;
  border-bottom: 1px solid #183d69;
  color: #dcecff;
  background: transparent;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-panel-head span:not(.record-dot) {
  color: #7f9ab9;
  font-family: inherit;
  font-size: 8px;
  font-weight: 850;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-panel-head p {
  color: #eaf4ff;
  font-size: 12px;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-dot {
  border-color: rgba(255, 255, 255, .16);
  background: #42d9a0;
  box-shadow: 0 0 15px rgba(66, 217, 160, .48);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-primary-action {
  padding: 0;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-button {
  min-height: 96px;
  padding: 14px;
  border: 1px solid #3b8dff;
  border-radius: 14px;
  color: white;
  background: linear-gradient(145deg, #2f80ed, #175bd4);
  box-shadow: 0 12px 28px rgba(19, 90, 215, .3);
  font-family: inherit;
  font-weight: 800;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-button:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 32px rgba(19, 90, 215, .38);
  transform: translateY(-1px);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-button.recording {
  color: white;
  border-color: #ff7793;
  background: linear-gradient(145deg, #ff5d7d, #cf3154);
  box-shadow: 0 12px 28px rgba(213, 48, 85, .3);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-button-icon {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-button strong {
  font-size: 16px;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-button small {
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-panel :is(.button, .round-button) {
  min-height: 43px;
  border: 1px solid #28568a;
  border-radius: 11px;
  color: #dcecff;
  background: #0b294e;
  box-shadow: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-secondary :is(.button:first-child, .button:last-child) {
  background: #0b294e;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .navigation-buttons {
  grid-template-columns: 48px 1fr;
  gap: 8px;
  margin-top: auto;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .navigation-buttons #next-line {
  border-color: #3b8dff;
  color: white;
  background: #236fdf;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) #reset-microphone {
  min-height: 34px;
  padding: 5px;
  border: 0;
  color: #52dff5;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .mobile-studio-guide {
  color: #718baa;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .waveform-dock {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 185px;
  grid-template-rows: 1fr;
  gap: 13px;
  align-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 108px;
  min-height: 0;
  padding: 11px 14px;
  border: 1px solid #1b4778;
  border-radius: 15px;
  background: rgba(5, 22, 48, .95);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .waveform-panel {
  height: 78px;
  border: 0;
  border-radius: 10px;
  background: #041329;
  box-shadow: none;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-hint {
  grid-column: 2;
  min-height: 26px;
  margin: 0;
  padding: 0 0 11px;
  color: #8ca4bf;
  font-size: 10px;
  font-weight: 650;
  text-align: right;
}

#studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-hint i {
  display: block;
}

@media (max-width: 860px) {
  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    height: auto;
    min-height: 100dvh;
    gap: 10px;
    padding: 10px;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-topbar {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    width: 100%;
    padding: 7px;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-player {
    grid-column: 1;
    grid-row: 2;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .video-frame {
    aspect-ratio: 16 / 9;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .waveform-dock {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 68px auto;
    height: auto;
    padding: 8px;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .waveform-panel {
    height: 68px;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .studio-hint {
    grid-column: 1;
    text-align: left;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic, [data-layout="classic"]) .record-panel {
    grid-column: 1;
    grid-row: 4;
    min-height: 0;
  }
}

/* Immersive Studio — constrained, clean desktop composition.
   Every region fits inside the viewport instead of growing from the video. */
@media (min-width: 861px) {
  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-shell {
    display: grid;
    grid-template-rows: 58px minmax(0, 1fr) 88px;
    gap: 11px;
    width: min(100%, 1540px);
    height: 100dvh;
    min-height: 0;
    margin-inline: auto;
    padding: 11px clamp(14px, 1.8vw, 26px) 13px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-topbar {
    min-height: 0;
    padding: 0 2px 9px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-topbar :is(.round-button, .button) {
    min-height: 38px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-main {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 315px);
    gap: 11px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-player,
  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-panel {
    min-height: 0;
    border-radius: 15px;
    box-shadow: 0 16px 38px rgba(0, 4, 18, .22);
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .video-frame {
    flex: 1 1 0;
    min-height: 0;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .video-status {
    top: 12px;
    left: 12px;
    padding: 6px 9px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .line-copy {
    flex: 0 0 auto;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 11px;
    min-height: 72px;
    padding: 11px 16px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .line-copy p {
    font-size: clamp(16px, 1.35vw, 21px);
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-panel {
    gap: 9px;
    padding: 14px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-panel-head {
    min-height: 41px;
    padding-bottom: 9px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-primary-action {
    padding: 3px 0 1px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-button {
    min-height: 82px;
    gap: 11px;
    padding: 12px;
    border-radius: 13px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-button-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-button-icon img {
    width: 21px;
    height: 21px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-secondary .button,
  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .navigation-buttons :is(.button, .round-button) {
    min-height: 39px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .waveform-dock {
    grid-template-columns: 54px minmax(0, 1fr) 155px;
    gap: 9px;
    min-height: 0;
    height: 88px;
    padding: 8px 11px;
    border-radius: 14px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .waveform-labels {
    gap: 16px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .waveform-panel {
    height: 64px;
  }
}

@media (min-width: 861px) and (max-height: 760px) {
  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-shell {
    grid-template-rows: 50px minmax(0, 1fr) 72px;
    gap: 8px;
    padding-block: 8px 9px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-topbar {
    padding-bottom: 6px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .studio-main {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 8px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .line-copy {
    min-height: 62px;
    padding-block: 8px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-panel {
    gap: 7px;
    padding: 11px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-button {
    min-height: 70px;
    padding: 9px 11px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .record-button-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .waveform-dock {
    height: 72px;
    padding-block: 6px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive, [data-layout="immersive"]) .waveform-panel {
    height: 54px;
  }
}

/* gustin — graphite surfaces, with gradients reserved for brand accents. */
:root {
  --bg: #0c0c0e;
  --surface: #121214;
  --surface-2: #17171a;
  --surface-3: #1b1b1f;
  --surface-hover: #25252b;
  --text: #f4f1f6;
  --text-soft: #ddd9e2;
  --muted: #a7a5ae;
  --muted-2: #7f7d86;
  --line: rgba(185,166,232,.16);
  --line-strong: rgba(130,188,235,.30);
  --blue: #b9a6e8;
  --blue-deep: #927fd0;
  --cyan: #82bceb;
  --cyan-soft: #b7d8f2;
  --green: #f2a7c8;
  --yellow: #e9b5ce;
  --danger: #ef91a9;
  --focus: 0 0 0 3px rgba(130,188,235,.26);
}

html,
body,
.app-content,
.workspace-screen,
.license-screen,
.studio-screen,
.review-screen {
  background-color: #0c0c0e !important;
  background-image: none !important;
}

body::before,
.store-hero::before,
.onboarding-intro::before,
.onboarding-intro::after {
  display: none !important;
  background: none !important;
}

.app-sidebar,
.login-shell,
.login-visual,
.login-card,
.featured-loading,
.scene-card,
.scene-card--featured,
.store-hero,
.settings-card,
.diagnostics-panel,
.character-box,
.setup-preview-card,
.setup-footer,
.studio-player,
.record-panel,
.waveform-dock,
.waveform-panel,
.final-player,
.performance-panel,
.app-dialog,
.onboarding-dialog,
.onboarding-shell,
.onboarding-stage,
.tour-scene-card,
.tour-role-row > div,
.tour-studio,
.tour-control,
.tour-download,
.tour-video,
.tour-result-preview,
.tour-score,
.catalog-toolbar,
.store-toolbar,
.setup-tabs,
.home-catalog-toolbar {
  background-image: none !important;
}

.app-sidebar { background-color: #101012 !important; }
.login-shell,.onboarding-shell,.app-dialog { background-color: #17171a !important; }
.login-visual,.onboarding-stage,.store-hero { background-color: #1b1b1f !important; }
.login-card,.settings-card,.diagnostics-panel,.character-box,.record-panel,.performance-panel,.tour-score { background-color: #17171a !important; }
.scene-card,.scene-card--featured,.featured-loading,.setup-preview-card,.final-player,.tour-scene-card,.tour-studio,.tour-control,.tour-download { background-color: #141416 !important; }
.studio-player,.waveform-panel,.tour-video,.tour-result-preview { background-color: #09090b !important; }
.waveform-dock,.catalog-toolbar,.store-toolbar,.setup-tabs,.home-catalog-toolbar { background-color: #18181c !important; }

.sidebar-brand { width: 150px; }
.login-brand { width: 158px; }
.sidebar-brand img,.login-brand img { display: block; }
.onboarding-intro-logo { width: clamp(150px,14vw,220px); filter: none; }

.button-primary,
.desktop-button.primary,
.record-button:not(.recording),
.account-avatar,
.mobile-tabbar .mobile-create {
  color: #111216;
  border-color: rgba(255,255,255,.2);
  background: linear-gradient(135deg,#f2a7c8 0%,#b9a6e8 58%,#82bceb 100%);
}

.button-primary:hover:not(:disabled),
.desktop-button.primary:hover:not(:disabled),
.record-button:not(.recording):hover:not(:disabled) {
  background: linear-gradient(135deg,#f6bbd4 0%,#c9b9ee 58%,#9cccf0 100%);
}

.button-primary img,
.desktop-button.primary img,
.record-button:not(.recording) img { filter: brightness(0); }
.eyebrow,.link-button,.text-button,.privacy-note span { color: #82bceb; }
.nav-item.active,.nav-item[aria-current="page"] { border-color: rgba(185,166,232,.34); background: rgba(185,166,232,.12); }
.connection-status i,.account-entry.is-active > i { background: #f2a7c8; }

/* Keep emerald overrides last so legacy layout blocks cannot restore blue. */
body::before { background: radial-gradient(circle at 88% 4%, rgba(34,201,111,.18), transparent 30rem), radial-gradient(circle at 32% 96%, rgba(85,230,161,.1), transparent 34rem), linear-gradient(150deg,var(--bg-deep),var(--bg) 48%,#032016); }
.app-sidebar { background: linear-gradient(180deg,rgba(4,29,21,.99),rgba(2,20,13,.99)); }
.nav-item:hover { background: rgba(21,92,58,.48); }
.nav-item.active,.nav-item[aria-current="page"] { border-color: rgba(78,226,143,.25); background: linear-gradient(100deg,rgba(32,174,94,.3),rgba(17,91,56,.3)); }
.account-entry,.tool-button { background: rgba(8,54,35,.72); }
.account-avatar { background: linear-gradient(145deg,var(--blue),#137a41); }
.button-primary,.desktop-button.primary { border-color: rgba(106,239,165,.3); background: linear-gradient(135deg,#27d879,#158f4d); box-shadow: 0 12px 28px rgba(22,163,83,.3),inset 0 1px rgba(255,255,255,.16); }
.button-primary:hover:not(:disabled),.desktop-button.primary:hover:not(:disabled) { background: linear-gradient(135deg,#42e990,#1aaa5d); box-shadow: 0 16px 34px rgba(22,163,83,.38); }
.button-secondary { background: rgba(14,70,45,.86); }.button-ghost { background: rgba(7,43,28,.58); }.button-ghost:hover:not(:disabled) { background: rgba(13,64,41,.76); }
.login-shell { background: rgba(5,31,21,.97); }.login-visual { background: radial-gradient(circle at 56% 42%,rgba(35,211,113,.34),transparent 19rem),linear-gradient(145deg,#073923,#020f09 70%); }.login-card { background: linear-gradient(180deg,rgba(9,48,31,.9),rgba(5,28,18,.97)); }
.featured-loading { background: linear-gradient(125deg,var(--surface),#0b462d); }
.scene-card { background: linear-gradient(180deg,rgba(10,52,34,.94),rgba(5,31,20,.98)); }.scene-card:hover { border-color: rgba(89,232,152,.45); }.scene-card__media { background:#071f15; }.scene-card__badge--owned { background:#187847; }.scene-card--featured { background:#072a1e; }
.scene-card--featured .scene-card__media::after { background: linear-gradient(90deg,#062619 1%,rgba(6,38,25,.93) 15%,rgba(6,38,25,.3) 68%,rgba(4,25,16,.18)),linear-gradient(to top,rgba(3,23,14,.72),transparent 50%); }
.catalog-toolbar,.store-toolbar,.setup-tabs { background:rgba(6,39,25,.74); }.store-hero { border-color:rgba(80,225,145,.28); background:radial-gradient(circle at 78% 25%,rgba(85,230,161,.15),transparent 18rem),linear-gradient(120deg,#0a482f,#061f15); }
.settings-card,.diagnostics-panel,.character-box { background:linear-gradient(180deg,rgba(9,50,33,.92),rgba(5,31,20,.97)); }.settings-icon { border-color:rgba(82,222,143,.26); background:rgba(36,159,88,.22); }
.setup-tab.active,.character-option:has(input:checked) { border-color:rgba(85,230,161,.32); background:rgba(28,151,81,.3); }.setup-preview-card { background:#061f15; }.character-option,.session-explainer>div { background:rgba(5,35,22,.8); }.setup-footer { background:rgba(3,27,17,.9); }
.studio-screen { background:radial-gradient(circle at 50% -15%,rgba(39,201,108,.2),transparent 32rem),#010d08; }.studio-progress-copy,.studio-layout-switch { background:rgba(7,43,28,.78); }.studio-player { background:#03170e; }.record-panel { background:linear-gradient(180deg,rgba(9,50,32,.98),rgba(4,28,18,.99)); }
.record-button:not(.recording) { border-color:rgba(91,231,153,.34); background:linear-gradient(135deg,#22c96f,#117c40); box-shadow:0 16px 36px rgba(17,139,67,.3); }.waveform-dock { background:rgba(5,35,22,.94); }.waveform-panel { background:rgba(1,17,10,.86); }
.review-screen { background:radial-gradient(circle at 75% 4%,rgba(39,201,108,.2),transparent 30rem),#02150e; }.final-player,.performance-panel { background:rgba(6,39,25,.96); }.video-play-button { background:rgba(31,184,91,.9); box-shadow:0 0 0 12px rgba(55,215,119,.12),0 18px 50px rgba(0,0,0,.4); }.app-dialog { background:#072a1e; }.app-dialog footer { background:rgba(3,30,19,.5); }
.onboarding-dialog { background:radial-gradient(circle at 50% 55%,rgba(30,196,101,.25),transparent 26rem),radial-gradient(circle at 82% 95%,rgba(53,111,67,.24),transparent 25rem),linear-gradient(145deg,#062719,#020f09 68%,#071a10); }.onboarding-dialog::backdrop { background:#020f09; }
.onboarding-shell { border-color:rgba(77,224,142,.4); background:linear-gradient(155deg,#083a25,#041f14 72%); box-shadow:0 45px 130px rgba(0,16,7,.82),0 0 70px rgba(30,190,96,.16); }.onboarding-intro::before { background:radial-gradient(circle at 50% 56%,rgba(35,205,111,.26),transparent 27rem),linear-gradient(145deg,rgba(7,50,31,.36),rgba(1,18,10,.3)); }.onboarding-intro::after { background:rgba(23,184,87,.12); }.onboarding-intro-logo { filter:drop-shadow(0 10px 30px rgba(27,194,96,.28)); }.onboarding-intro-wave i { background:linear-gradient(#62edaa,#20a95e); box-shadow:0 0 18px rgba(46,216,120,.36); }
.onboarding-stage { border-color:rgba(73,224,143,.56); background:radial-gradient(circle at 30% 0,rgba(28,176,90,.2),transparent 28rem),rgba(2,25,15,.56); }.tour-scene-card { border-color:rgba(91,232,157,.3); background:radial-gradient(circle at 72% 35%,rgba(43,205,111,.42),transparent 12rem),linear-gradient(125deg,#145b38,#072619 68%); }.tour-role-row>div,.tour-studio,.tour-control,.tour-download { background:rgba(5,43,27,.82); }.tour-video,.tour-result-preview { background:radial-gradient(circle at 50% 42%,rgba(36,196,100,.34),transparent 10rem),linear-gradient(135deg,#175538,#071f15 66%); }.tour-studio aside { background:#093a26; }.tour-control.active { background:linear-gradient(135deg,#27d879,#158f4d); }.tour-waveform { background:#020f09; }.tour-score { background:linear-gradient(145deg,rgba(14,73,45,.94),rgba(5,34,21,.96)); }.onboarding-dots button { background:#17613e; }
body:is(.studio-layout--classic,.studio-layout-classic,[data-layout="classic"],[data-studio-layout="classic"]) #studio-screen,#studio-screen:is(.studio-layout--classic,.studio-layout-classic,[data-layout="classic"],[data-studio-layout="classic"]),#studio-screen#studio-screen:is(.studio-layout-classic,[data-layout="classic"]) { --classic-paper:#07271a; --classic-paper-deep:#02120c; --classic-panel:#082f20; --classic-blue:#24c96f; --classic-teal:#58e7a3; --classic-yellow:#88ec68; background:radial-gradient(circle at 84% 2%,rgba(31,157,81,.2),transparent 30%),#02120c; }

/* Home storefront: the free scene is the hero and every paid scene stays visible below. */
.home-catalog-section { margin-top: 54px; }
.home-catalog-section .section-heading { align-items: flex-end; }
.home-catalog-section .section-heading p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.home-catalog-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: rgba(6,39,25,.74); }
.home-catalog-toolbar > strong { margin-left: auto; padding-right: 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.home-catalog-grid { grid-template-columns: repeat(4,minmax(0,1fr)); align-items: stretch; }
.home-catalog-grid .scene-card { min-height: 390px; }
.home-catalog-grid .scene-card__body { padding: 17px 16px 16px; }
.home-catalog-grid .scene-card__actions { margin-top: auto; padding-top: 15px; }

@media (max-width: 1450px) {
  .home-catalog-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .home-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .home-catalog-section { margin-top: 38px; }
  .home-catalog-section .section-heading { align-items: flex-start; flex-direction: column; }
  .home-catalog-toolbar { align-items: stretch; flex-direction: column; }
  .home-catalog-toolbar > strong { margin-left: 0; padding: 0 4px; }
  .home-catalog-grid { grid-template-columns: 1fr; }
}

/* Pastel noir identity: black surfaces with soft sage, lavender and peach accents. */
:root {
  --bg: #0a0a0c;
  --bg-deep: #050506;
  --sidebar: #101014;
  --surface: #17171c;
  --surface-2: #202027;
  --surface-3: #292832;
  --surface-hover: #32313a;
  --text: #f6f2eb;
  --text-soft: #ded9e2;
  --muted: #aaa6b2;
  --muted-2: #85818d;
  --line: rgba(201,184,232,.16);
  --line-strong: rgba(168,213,186,.34);
  --blue: #a8d5ba;
  --blue-deep: #779d86;
  --cyan: #c9b8e8;
  --cyan-soft: #ded2f1;
  --green: #bfd8a9;
  --yellow: #e6d7a8;
  --danger: #e5a8b5;
  --shadow: 0 24px 70px rgba(0,0,0,.46);
  --focus: 0 0 0 3px rgba(201,184,232,.3);
}

body::before { background: radial-gradient(circle at 88% 4%,rgba(201,184,232,.12),transparent 30rem),radial-gradient(circle at 28% 96%,rgba(168,213,186,.09),transparent 34rem),linear-gradient(150deg,#050506,#0a0a0c 52%,#121117); }
.app-sidebar { background:linear-gradient(180deg,rgba(16,16,20,.995),rgba(8,8,10,.995)); box-shadow:18px 0 60px rgba(0,0,0,.32); }
.nav-item:hover { background:rgba(48,47,56,.72); }
.nav-item.active,.nav-item[aria-current="page"] { border-color:rgba(168,213,186,.3); background:linear-gradient(100deg,rgba(168,213,186,.16),rgba(201,184,232,.1)); }
.account-entry,.tool-button { background:rgba(30,30,36,.86); }
.account-avatar { color:#111315; background:linear-gradient(145deg,#a8d5ba,#c9b8e8); }
.button-primary,.desktop-button.primary { color:#111315; border-color:rgba(255,255,255,.22); background:linear-gradient(135deg,#a8d5ba,#c9b8e8); box-shadow:0 12px 28px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.35); }
.button-primary img,.desktop-button.primary img { filter:brightness(0); }
.button-primary:hover:not(:disabled),.desktop-button.primary:hover:not(:disabled) { background:linear-gradient(135deg,#c0e2cd,#d8cbec); box-shadow:0 16px 34px rgba(0,0,0,.38); }
.button-secondary { background:rgba(45,43,52,.92); }.button-ghost { background:rgba(29,29,35,.72); }.button-ghost:hover:not(:disabled) { background:rgba(48,46,57,.86); }
.login-shell { background:rgba(13,13,16,.98); }.login-visual { background:radial-gradient(circle at 56% 42%,rgba(201,184,232,.2),transparent 19rem),linear-gradient(145deg,#211f28,#09090b 70%); }.login-card { background:linear-gradient(180deg,rgba(29,29,35,.94),rgba(15,15,18,.98)); }
.featured-loading { background:linear-gradient(125deg,#1b1b21,#282630); }
.scene-card { background:linear-gradient(180deg,rgba(28,28,34,.98),rgba(17,17,21,.99)); }.scene-card:hover { border-color:rgba(201,184,232,.45); }.scene-card__media { background:#101014; }.scene-card__badge--owned { color:#111315; background:#a8d5ba; }.scene-card--featured { background:#1a1a20; }
.scene-card--featured .scene-card__media::after { background:linear-gradient(90deg,#1a1a20 1%,rgba(26,26,32,.94) 15%,rgba(26,26,32,.34) 68%,rgba(10,10,12,.2)),linear-gradient(to top,rgba(10,10,12,.78),transparent 50%); }
.catalog-toolbar,.store-toolbar,.setup-tabs,.home-catalog-toolbar { background:rgba(27,27,33,.88); }
.store-hero { border-color:rgba(201,184,232,.3); background:radial-gradient(circle at 78% 25%,rgba(232,191,167,.12),transparent 18rem),linear-gradient(120deg,#27252d,#151519); }
.settings-card,.diagnostics-panel,.character-box { background:linear-gradient(180deg,rgba(31,31,38,.96),rgba(18,18,22,.98)); }.settings-icon { border-color:rgba(201,184,232,.3); background:rgba(201,184,232,.12); }
.setup-tab.active,.character-option:has(input:checked) { border-color:rgba(168,213,186,.36); background:rgba(168,213,186,.13); }.setup-preview-card { background:#101014; }.character-option,.session-explainer>div { background:rgba(25,25,31,.88); }.setup-footer { background:rgba(12,12,15,.94); }
.studio-screen { background:radial-gradient(circle at 50% -15%,rgba(201,184,232,.12),transparent 32rem),#08080a; }.studio-progress-copy,.studio-layout-switch { background:rgba(30,29,36,.88); }.studio-player { background:#09090b; }.record-panel { background:linear-gradient(180deg,rgba(31,30,37,.99),rgba(16,16,20,.99)); }
.record-button:not(.recording) { color:#111315; border-color:rgba(255,255,255,.22); background:linear-gradient(135deg,#a8d5ba,#c9b8e8); box-shadow:0 16px 36px rgba(0,0,0,.34); }.record-button:not(.recording) img { filter:brightness(0); }.waveform-dock { background:rgba(22,22,27,.97); }.waveform-panel { background:rgba(7,7,9,.9); }
.review-screen { background:radial-gradient(circle at 75% 4%,rgba(232,191,167,.11),transparent 30rem),#0a0a0c; }.final-player,.performance-panel { background:rgba(25,25,31,.97); }.video-play-button { color:#111315; background:rgba(168,213,186,.94); box-shadow:0 0 0 12px rgba(168,213,186,.1),0 18px 50px rgba(0,0,0,.5); }.app-dialog { background:#1a1a20; }.app-dialog footer { background:rgba(10,10,12,.56); }
.onboarding-dialog { background:radial-gradient(circle at 50% 55%,rgba(201,184,232,.15),transparent 26rem),radial-gradient(circle at 82% 95%,rgba(232,191,167,.1),transparent 25rem),linear-gradient(145deg,#18171d,#08080a 68%,#111015); }.onboarding-dialog::backdrop { background:#070709; }
.onboarding-shell { border-color:rgba(201,184,232,.38); background:linear-gradient(155deg,#24222b,#151519 72%); box-shadow:0 45px 130px rgba(0,0,0,.84),0 0 70px rgba(201,184,232,.1); }.onboarding-intro::before { background:radial-gradient(circle at 50% 56%,rgba(201,184,232,.16),transparent 27rem),linear-gradient(145deg,rgba(31,29,37,.38),rgba(8,8,10,.32)); }.onboarding-intro::after { background:rgba(168,213,186,.08); }.onboarding-intro-logo { filter:drop-shadow(0 10px 30px rgba(0,0,0,.32)); }.onboarding-intro-wave i { background:linear-gradient(#c9b8e8,#a8d5ba); box-shadow:0 0 18px rgba(201,184,232,.22); }
.onboarding-stage { border-color:rgba(201,184,232,.48); background:radial-gradient(circle at 30% 0,rgba(168,213,186,.1),transparent 28rem),rgba(15,15,19,.68); }.tour-scene-card { border-color:rgba(201,184,232,.3); background:radial-gradient(circle at 72% 35%,rgba(232,191,167,.18),transparent 12rem),linear-gradient(125deg,#292731,#151519 68%); }.tour-role-row>div,.tour-studio,.tour-control,.tour-download { background:rgba(28,28,34,.9); }.tour-video,.tour-result-preview { background:radial-gradient(circle at 50% 42%,rgba(201,184,232,.16),transparent 10rem),linear-gradient(135deg,#292731,#111115 66%); }.tour-studio aside { background:#24232b; }.tour-control.active { color:#111315; background:linear-gradient(135deg,#a8d5ba,#c9b8e8); }.tour-waveform { background:#09090b; }.tour-score { background:linear-gradient(145deg,rgba(42,40,49,.96),rgba(20,20,25,.98)); }.onboarding-dots button { background:#44414d; }
body:is(.studio-layout--classic,.studio-layout-classic,[data-layout="classic"],[data-studio-layout="classic"]) #studio-screen,#studio-screen:is(.studio-layout--classic,.studio-layout-classic,[data-layout="classic"],[data-studio-layout="classic"]),#studio-screen#studio-screen:is(.studio-layout-classic,[data-layout="classic"]) { --classic-paper:#1a1a20; --classic-paper-deep:#0a0a0c; --classic-panel:#222127; --classic-blue:#a8d5ba; --classic-teal:#c9b8e8; --classic-yellow:#e6d7a8; background:radial-gradient(circle at 84% 2%,rgba(201,184,232,.12),transparent 30%),#0a0a0c; }

/* Compact immersive studio: smaller video, timeline and right controls. */
@media (min-width: 861px) {
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-shell {
    grid-template-rows: 52px auto 62px;
    align-content: start;
    width: min(calc(100% - 20px),1280px);
    height: 100dvh;
    padding: 10px 10px 12px;
    gap: 10px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-main {
    grid-template-columns: minmax(0,1fr) minmax(230px,250px);
    gap: 10px;
    width: 100%;
    height: clamp(470px,62vh,610px);
    min-height: 0;
    overflow: visible;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-player {
    align-self: start;
    width: 100%;
    height: 100%;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .video-frame {
    min-height: 0;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .line-copy {
    min-height: 60px;
    padding: 8px 14px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .line-copy p {
    font-size: clamp(15px,1.15vw,19px);
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .record-panel {
    align-self: start;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 100%;
    gap: 7px;
    padding: 11px;
    border-radius: 14px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .record-panel-head {
    min-height: 36px;
    padding-bottom: 7px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .record-button {
    min-height: 68px;
    gap: 8px;
    padding: 8px 10px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .record-button-icon {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .record-secondary .button,
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .navigation-buttons :is(.button,.round-button) {
    min-height: 35px;
    padding-inline: 7px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .navigation-buttons {
    grid-template-columns: 40px minmax(0,1fr);
    margin-top: 9px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) #reset-microphone {
    min-height: 30px;
    padding-block: 3px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .mobile-studio-guide {
    font-size: 9px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-dock {
    grid-template-columns: 46px minmax(0,1fr) 125px;
    gap: 7px;
    width: 100%;
    height: 62px;
    min-height: 0;
    padding: 6px 9px;
    border-radius: 12px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-labels {
    gap: 9px;
    font-size: 6px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-panel {
    height: 44px;
    border-radius: 8px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-hint {
    padding-bottom: 7px;
    font-size: 9px;
  }
}

@media (min-width: 861px) and (max-height: 760px) {
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-shell {
    grid-template-rows: 46px auto 54px;
    width: min(calc(100% - 16px),1080px);
    gap: 7px;
    padding-block: 7px 9px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-main {
    grid-template-columns: minmax(0,1fr) 230px;
    height: clamp(400px,58vh,450px);
    gap: 7px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-dock {
    height: 54px;
    padding-block: 5px;
  }

  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-panel {
    height: 38px;
  }
}

/* gustin final — neutral studio inspired by the original dubbing console. */
:root {
  --bg:#0b0b0d;
  --bg-deep:#08080a;
  --sidebar:#101012;
  --surface:#151517;
  --surface-2:#1b1b1e;
  --surface-3:#242428;
  --surface-hover:#2d2d32;
  --text:#f4f1f6;
  --text-soft:#ded9e2;
  --muted:#a7a3ad;
  --muted-2:#7c7882;
  --line:rgba(185,166,232,.16);
  --line-strong:rgba(185,166,232,.32);
  --blue:#b9a6e8;
  --blue-deep:#927fc8;
  --cyan:#f2a7c8;
  --cyan-soft:#e9b5ce;
  --green:#d7c4e8;
  --yellow:#e9b5ce;
  --danger:#ee8eaa;
  --focus:0 0 0 3px rgba(242,167,200,.25);
}

html,body,.app-content,.workspace-screen,.license-screen,.studio-screen,.review-screen {
  background:#0b0b0d !important;
  background-image:none !important;
}
body::before,.store-hero::before,.onboarding-intro::before,.onboarding-intro::after { display:none !important; background:none !important; }
.app-sidebar,.login-shell,.login-visual,.login-card,.featured-loading,.scene-card,.scene-card--featured,.store-hero,.settings-card,.diagnostics-panel,.character-box,.setup-preview-card,.setup-footer,.studio-player,.record-panel,.waveform-dock,.waveform-panel,.final-player,.performance-panel,.app-dialog,.onboarding-dialog,.onboarding-shell,.onboarding-stage,.tour-scene-card,.tour-role-row>div,.tour-studio,.tour-control,.tour-download,.tour-video,.tour-result-preview,.tour-score,.catalog-toolbar,.store-toolbar,.setup-tabs,.home-catalog-toolbar {
  background-image:none !important;
}
.app-sidebar{background-color:#101012 !important}.login-shell,.onboarding-shell,.app-dialog{background-color:#17171a !important}.login-visual,.onboarding-stage,.store-hero{background-color:#1b1b1e !important}.login-card,.settings-card,.diagnostics-panel,.character-box,.record-panel,.performance-panel,.tour-score{background-color:#17171a !important}.scene-card,.scene-card--featured,.featured-loading,.setup-preview-card,.final-player,.tour-scene-card,.tour-studio,.tour-control,.tour-download{background-color:#141416 !important}.studio-player,.waveform-panel,.tour-video,.tour-result-preview{background-color:#09090a !important}.waveform-dock,.catalog-toolbar,.store-toolbar,.setup-tabs,.home-catalog-toolbar{background-color:#18181b !important}
.button,.desktop-button,.round-button,.icon-button,.button-secondary,.button-ghost,.account-entry,.tool-button{border-color:#3c3a41;background-color:#242428;background-image:none;color:#f4f1f6}
.button:hover:not(:disabled),.desktop-button:hover:not(:disabled),.round-button:hover:not(:disabled),.icon-button:hover:not(:disabled){border-color:#6c617c;background-color:#2d2d32}
.button-primary,.desktop-button.primary,.record-button:not(.recording),.account-avatar,.mobile-tabbar .mobile-create{color:#151317;border-color:#d8c9e8;background:#cbb9e4;background-image:none;box-shadow:0 10px 24px rgba(0,0,0,.32)}
.button-primary:hover:not(:disabled),.desktop-button.primary:hover:not(:disabled),.record-button:not(.recording):hover:not(:disabled){background:#dbcde9;background-image:none}
.button-primary img,.desktop-button.primary img,.record-button:not(.recording) img{filter:brightness(0)}
.eyebrow,.link-button,.text-button,.privacy-note span{color:#f2a7c8}.nav-item.active,.nav-item[aria-current="page"]{border-color:rgba(242,167,200,.3);background:#28222a}.connection-status i,.account-entry.is-active>i{background:#f2a7c8}
.sidebar-brand{width:150px}.login-brand{width:158px}.onboarding-intro-logo{width:clamp(150px,14vw,220px);filter:none}
.connection-status{border-color:#3c3941;background:#19191c;color:#d5cfd9;box-shadow:none}
.connection-status i{box-shadow:0 0 10px rgba(242,167,200,.34)}
.home-header .connection-status{display:none!important}
.scene-card--featured .scene-card__badges{
  top:16px;
  right:16px;
  left:auto;
}
.scene-card--featured .scene-card__badge--free{
  padding:8px 13px;
  border-color:rgba(255,255,255,.34);
  color:#171419;
  background:#f2a7c8;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
}
.scene-card--featured .scene-card__image{
  transform-origin:center;
  will-change:transform;
  animation:featured-scene-drift 12s ease-in-out infinite alternate;
}
.scene-card--featured:hover .scene-card__image{
  animation-duration:8s;
}
@keyframes featured-scene-drift{
  0%{transform:scale(1.035) translate3d(-.7%,-.35%,0)}
  50%{transform:scale(1.075) translate3d(1.1%,.35%,0)}
  100%{transform:scale(1.05) translate3d(-.15%,.8%,0)}
}
@media (prefers-reduced-motion:reduce){
  .scene-card--featured .scene-card__image{
    animation:none!important;
    transform:none!important;
  }
}
.search-field{border-color:#3a3740;background:#111113;background-image:none}
.home-value-strip{border-color:#3a3740;background:#3a3740}
.home-value-strip article{background:#17171a;background-image:none}
.home-value-strip article>span{border-color:rgba(242,167,200,.38);color:#f2a7c8;background:#242126}
.setup-footer{background:#17171a!important;background-image:none!important}
.mobile-menu-button,.mobile-tabbar{border-color:#3c3941;background:#17171a;background-image:none}
.mobile-tabbar button.active{color:#f4f1f6;background:#2b252d}
.mobile-tabbar .mobile-create{border-color:#0b0b0d;background:#cbb9e4;background-image:none;box-shadow:0 10px 25px rgba(0,0,0,.38)}
.waveform-panel{
  justify-self:stretch;
  width:100%;
  min-width:0;
  max-width:none;
}

#studio-screen#studio-screen {
  --classic-paper:#151517;
  --classic-paper-deep:#0b0b0d;
  --classic-panel:#1b1b1e;
  --classic-blue:#f2a7c8;
  --classic-teal:#b9a6e8;
  --classic-yellow:#e9b5ce;
  background:#0b0b0d !important;
  background-image:none !important;
}
#studio-screen#studio-screen .studio-topbar{border-color:#343238}
#studio-screen#studio-screen .studio-progress-copy,#studio-screen#studio-screen .studio-layout-switch{border-color:#3c3941;background:#19191c;background-image:none}
#studio-screen#studio-screen .studio-layout-button.active{color:#171419;border-color:#d8c9e8;background:#cbb9e4;background-image:none}
#studio-screen#studio-screen .studio-player{overflow:visible;border:0;background:transparent !important;box-shadow:none}
#studio-screen#studio-screen .video-frame{overflow:hidden;border:10px solid #2b2b2f;border-radius:25px 25px 5px 5px;background:#050506;box-shadow:0 18px 42px rgba(0,0,0,.42),inset 0 0 0 1px #45454b}
#studio-screen#studio-screen .video-status{border-color:#4a4650;background:#17171a;color:#f4f1f6}
#studio-screen#studio-screen .line-copy{min-height:62px;border:1px solid #3b3940;border-top:0;border-radius:0 0 18px 18px;background:#17171a !important;background-image:none !important;box-shadow:0 12px 28px rgba(0,0,0,.28)}
#studio-screen#studio-screen .line-copy-label,#studio-screen#studio-screen .line-copy>span{color:#f2a7c8}
#studio-screen#studio-screen .line-copy p{color:#f4f1f6;font-size:clamp(16px,1.25vw,20px)}
#studio-screen#studio-screen .record-panel{align-self:start;height:auto;min-height:0;padding:13px;border:1px solid #403d45;border-radius:20px;background:#1a1a1d !important;background-image:none !important;box-shadow:0 18px 42px rgba(0,0,0,.32)}
#studio-screen#studio-screen .record-panel-head{border-color:#3c3940}
#studio-screen#studio-screen .record-dot{background:#f2a7c8;box-shadow:0 0 0 4px rgba(242,167,200,.10)}
#studio-screen#studio-screen .record-button:not(.recording){border-color:#ded1eb;background:#cbb9e4;background-image:none;color:#151317;box-shadow:none}
#studio-screen#studio-screen .record-button.recording{border-color:#ef87bd;background:#d92f91;background-image:none;color:#fff}
#studio-screen#studio-screen .record-secondary .button,#studio-screen#studio-screen .navigation-buttons .round-button{border-color:#4b4850;background:#2b2b2f;background-image:none}
#studio-screen#studio-screen .navigation-buttons .button-primary{border-color:#ded1eb;background:#cbb9e4;background-image:none;color:#151317}
#studio-screen#studio-screen #reset-microphone{color:#e9b5ce}
#studio-screen#studio-screen .waveform-dock{height:82px;padding:8px 10px;border:1px solid #46424b;border-radius:17px;background:#171719 !important;background-image:none !important;box-shadow:0 14px 34px rgba(0,0,0,.26)}
#studio-screen#studio-screen .waveform-panel{height:62px;overflow:hidden;border:2px solid #d95aa4;border-radius:12px;background:#09090a !important;background-image:none !important;box-shadow:0 0 0 3px rgba(217,90,164,.08)}
#studio-screen#studio-screen .waveform-labels{color:#e9b5ce}
#studio-screen#studio-screen .studio-hint{color:#d5c6df}
#studio-screen#studio-screen .studio-hint i{background:#f2a7c8}

@media (min-width:861px){
  #studio-screen#studio-screen .studio-shell{grid-template-rows:52px auto 82px;align-content:start;width:min(calc(100% - 24px),1320px);height:100dvh;padding:10px 12px 14px;gap:12px}
  #studio-screen#studio-screen .studio-main{grid-template-columns:minmax(0,1fr) 252px;gap:14px;width:100%;height:clamp(470px,62vh,610px);min-height:0;overflow:visible}
  #studio-screen#studio-screen .record-button{min-height:70px}
  #studio-screen#studio-screen .navigation-buttons{grid-template-columns:42px minmax(0,1fr);margin-top:10px}
  #studio-screen#studio-screen .waveform-dock{grid-template-columns:50px minmax(0,1fr) 126px;gap:8px}
}
@media (min-width:861px) and (max-height:760px){
  #studio-screen#studio-screen .studio-shell{grid-template-rows:46px auto 70px;width:min(calc(100% - 18px),1120px);gap:8px;padding-block:7px 9px}
  #studio-screen#studio-screen .studio-main{grid-template-columns:minmax(0,1fr) 232px;height:clamp(400px,58vh,450px);gap:8px}
  #studio-screen#studio-screen .waveform-dock{height:70px;padding-block:6px}
  #studio-screen#studio-screen .waveform-panel{height:52px}
}

/* Larger web audio timeline for clearer recording feedback. */
@media (min-width:861px){
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-shell{
    grid-template-rows:52px auto 110px;
  }
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-dock{
    height:110px;
    padding:10px 12px;
  }
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-panel{
    height:86px;
  }
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-labels{
    gap:23px;
    font-size:7px;
  }
}

/* Rebuilt quick settings dialog for the web studio. */
#quick-settings-dialog.quick-settings-dialog{
  width:min(780px,calc(100vw - 32px));
  max-height:min(880px,calc(100dvh - 32px));
  overflow:hidden;
  border-color:#46414b;
  border-radius:24px;
  background:#121214 !important;
  box-shadow:0 34px 100px rgba(0,0,0,.62);
}
#quick-settings-dialog.quick-settings-dialog form{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  max-height:min(878px,calc(100dvh - 34px));
}
#quick-settings-dialog.quick-settings-dialog header{
  padding:22px 26px 20px;
  border-color:#343138;
  background:#17171a;
}
#quick-settings-dialog.quick-settings-dialog header>div{
  min-width:0;
}
#quick-settings-dialog.quick-settings-dialog header h2{
  margin-top:4px;
  font-size:24px;
}
#quick-settings-dialog.quick-settings-dialog header p{
  margin:7px 0 0;
  color:#9f9aa5;
  font-size:12px;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-body{
  display:grid;
  gap:14px;
  padding:18px;
  overflow:auto;
  overscroll-behavior:contain;
  background:#0e0e10;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-section{
  padding:17px;
  border:1px solid #343138;
  border-radius:17px;
  background:#18181b;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-section-heading{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:15px;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-section-heading>span{
  display:grid;
  flex:0 0 32px;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid rgba(242,167,200,.34);
  border-radius:10px;
  color:#f2a7c8;
  background:#242126;
  font-size:9px;
  font-weight:900;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-section-heading strong,
#quick-settings-dialog.quick-settings-dialog .quick-settings-section-heading small{
  display:block;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-section-heading strong{
  color:#f4f1f6;
  font-size:14px;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-section-heading small{
  margin-top:2px;
  color:#8f8a95;
  font-size:10px;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-devices{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#quick-settings-dialog.quick-settings-dialog .field,
#quick-settings-dialog.quick-settings-dialog .range-field{
  gap:8px;
  color:#d8d3dd;
  font-size:11px;
}
#quick-settings-dialog.quick-settings-dialog .field select{
  min-height:46px;
  border-color:#403b46;
  color:#f4f1f6;
  background:#101012;
  box-shadow:none;
}
#quick-settings-dialog.quick-settings-dialog .field select:focus{
  border-color:#b9a6e8;
  background:#101012;
  box-shadow:0 0 0 3px rgba(185,166,232,.14);
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-ranges{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
#quick-settings-dialog.quick-settings-dialog .range-field{
  padding:13px;
  border:1px solid #343138;
  border-radius:13px;
  background:#121214;
}
#quick-settings-dialog.quick-settings-dialog .range-field>span{
  gap:8px;
  align-items:center;
}
#quick-settings-dialog.quick-settings-dialog .range-field output{
  padding:3px 7px;
  border-radius:999px;
  color:#f2a7c8;
  background:#28222a;
  font-size:10px;
}
#quick-settings-dialog.quick-settings-dialog input[type="range"]{
  width:100%;
  height:5px;
  margin:8px 0 2px;
  padding:0;
  border:0;
  border-radius:999px;
  outline:0;
  accent-color:#b9a6e8;
  background:#39363e;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-preroll{
  margin-bottom:12px;
}
#quick-settings-dialog.quick-settings-dialog .quick-settings-toggles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  min-height:76px;
  padding:13px;
  border-color:#343138;
  color:#f4f1f6;
  background:#121214;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row:hover{
  border-color:#554d60;
  background:#1d1b20;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row>span{
  min-width:0;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row strong{
  font-size:11px;
  line-height:1.3;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row small{
  color:#8f8a95;
  font-size:9px;
  line-height:1.35;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row input[type="checkbox"]{
  position:relative;
  flex:0 0 42px;
  appearance:none;
  width:42px !important;
  min-width:42px;
  height:24px !important;
  min-height:24px !important;
  margin:0;
  padding:0 !important;
  border:1px solid #514d57;
  border-radius:999px;
  background:#2b2b30;
  box-shadow:none;
  cursor:pointer;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row input[type="checkbox"]::before{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#a8a3ad;
  transition:transform .18s ease,background .18s ease;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row input[type="checkbox"]:checked{
  border-color:#cbb9e4;
  background:#cbb9e4;
}
#quick-settings-dialog.quick-settings-dialog .toggle-row input[type="checkbox"]:checked::before{
  background:#171419;
  transform:translateX(18px);
}
#quick-settings-dialog.quick-settings-dialog .toggle-row input[type="checkbox"]:focus-visible{
  outline:3px solid rgba(242,167,200,.28);
  outline-offset:2px;
}
#quick-settings-dialog.quick-settings-dialog footer{
  justify-content:space-between;
  padding:16px 22px;
  border-color:#343138;
  background:#17171a;
}
#quick-settings-dialog.quick-settings-dialog footer .button{
  min-width:132px;
}

@media (max-width:700px){
  #quick-settings-dialog.quick-settings-dialog{
    width:min(100% - 18px,620px);
    max-height:calc(100dvh - 18px);
    border-radius:19px;
  }
  #quick-settings-dialog.quick-settings-dialog form{
    max-height:calc(100dvh - 20px);
  }
  #quick-settings-dialog.quick-settings-dialog header{
    padding:18px;
  }
  #quick-settings-dialog.quick-settings-dialog .quick-settings-body{
    padding:12px;
  }
  #quick-settings-dialog.quick-settings-dialog .quick-settings-devices,
  #quick-settings-dialog.quick-settings-dialog .quick-settings-ranges,
  #quick-settings-dialog.quick-settings-dialog .quick-settings-toggles{
    grid-template-columns:1fr;
  }
  #quick-settings-dialog.quick-settings-dialog footer{
    flex-direction:column-reverse;
    padding:13px;
  }
  #quick-settings-dialog.quick-settings-dialog footer .button{
    width:100%;
  }
}

/* Airier web topbar with distinct title and control groups. */
#studio-screen#studio-screen .studio-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(40px,8vw,130px);
  min-height:70px;
  padding:6px 4px 14px;
}
#studio-screen#studio-screen .studio-title-group,
#studio-screen#studio-screen .studio-control-group{
  display:flex;
  align-items:center;
}
#studio-screen#studio-screen .studio-title-group{
  flex:1 1 auto;
  min-width:0;
  gap:16px;
}
#studio-screen#studio-screen .studio-scene-title{
  min-width:0;
}
#studio-screen#studio-screen .studio-control-group{
  flex:0 0 auto;
  gap:11px;
}
#studio-screen#studio-screen .studio-layout-switch{
  margin-left:7px;
}
#studio-screen#studio-screen #studio-technical{
  margin-left:3px;
}
#studio-screen#studio-screen #studio-settings{
  margin-left:2px;
}

@media (min-width:861px){
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-shell{
    grid-template-rows:78px auto 110px;
    gap:14px;
  }
}

@media (min-width:861px) and (max-height:760px){
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-shell{
    grid-template-rows:64px auto 92px;
    gap:10px;
  }
  #studio-screen#studio-screen .studio-topbar{
    min-height:60px;
    padding-block:3px 10px;
  }
}

/* Animated Gustin glow reserved for primary web actions. */
:is(.button-primary,.desktop-button.primary,.scene-card__button--primary,.record-button:not(.recording)):not(:disabled){
  color:#171419;
  border-color:rgba(255,255,255,.42);
  background-color:#cbb9e4;
  background-image:linear-gradient(110deg,#f2a7c8 0%,#e9b5ce 28%,#b9a6e8 55%,#f4bfd6 76%,#f2a7c8 100%);
  background-size:260% 100%;
  box-shadow:0 9px 24px rgba(185,166,232,.22),0 0 0 rgba(242,167,200,0);
  animation:gustin-button-flow 5s ease-in-out infinite,gustin-button-glow 2.8s ease-in-out infinite;
}
:is(.button-primary,.desktop-button.primary,.scene-card__button--primary,.record-button:not(.recording)):not(:disabled):hover{
  background-image:linear-gradient(110deg,#f7b5d2 0%,#f1c7d8 28%,#cbb9ee 55%,#f8cadc 76%,#f7b5d2 100%);
  background-size:260% 100%;
  box-shadow:0 13px 34px rgba(185,166,232,.32),0 0 24px rgba(242,167,200,.32);
  animation-duration:2.8s,1.8s;
  transform:translateY(-1px);
}
@keyframes gustin-button-flow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes gustin-button-glow{
  0%,100%{box-shadow:0 9px 24px rgba(185,166,232,.2),0 0 0 rgba(242,167,200,0)}
  50%{box-shadow:0 12px 30px rgba(185,166,232,.34),0 0 20px rgba(242,167,200,.28)}
}
#studio-screen#studio-screen :is(.button-primary,.record-button:not(.recording)):not(:disabled){
  background-color:#cbb9e4;
  background-image:linear-gradient(110deg,#f2a7c8 0%,#e9b5ce 28%,#b9a6e8 55%,#f4bfd6 76%,#f2a7c8 100%);
  background-size:260% 100%;
  box-shadow:0 9px 24px rgba(185,166,232,.22),0 0 0 rgba(242,167,200,0);
  animation:gustin-button-flow 5s ease-in-out infinite,gustin-button-glow 2.8s ease-in-out infinite;
}
#studio-screen#studio-screen :is(.button-primary,.record-button:not(.recording)):not(:disabled):hover{
  background-image:linear-gradient(110deg,#f7b5d2 0%,#f1c7d8 28%,#cbb9ee 55%,#f8cadc 76%,#f7b5d2 100%);
  background-size:260% 100%;
  box-shadow:0 13px 34px rgba(185,166,232,.32),0 0 24px rgba(242,167,200,.32);
}
@media (prefers-reduced-motion:reduce){
  :is(.button-primary,.desktop-button.primary,.scene-card__button--primary,.record-button:not(.recording)):not(:disabled){
    animation:none!important;
    background-position:50% 50%;
  }
  #studio-screen#studio-screen :is(.button-primary,.record-button:not(.recording)):not(:disabled){
    animation:none!important;
  }
}

@media (max-width:860px){
  #studio-screen#studio-screen .studio-topbar{
    gap:10px;
    min-height:62px;
    padding-bottom:10px;
  }
  #studio-screen#studio-screen .studio-title-group{
    gap:8px;
  }
  #studio-screen#studio-screen .studio-control-group{
    gap:6px;
  }
  #studio-screen#studio-screen .studio-layout-switch,
  #studio-screen#studio-screen #studio-settings{
    margin-left:0;
  }
}

/* Smaller web video preview while preserving the full-height control column. */
@media (min-width:861px){
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-main{
    height:clamp(410px,52vh,520px);
  }
}

@media (min-width:861px) and (max-height:760px){
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-main{
    height:clamp(350px,50vh,410px);
  }
}

/* The web control console spans the full studio column down to the timeline. */
@media (min-width:861px){
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .record-panel{
    align-self:stretch !important;
    height:100% !important;
    max-height:none;
  }
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .navigation-buttons{
    margin-top:auto !important;
  }
}

@media (min-width:861px) and (max-height:760px){
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .studio-shell{
    grid-template-rows:64px auto 92px;
    gap:10px;
  }
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-dock{
    height:92px;
    padding-block:8px;
  }
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-panel{
    height:70px;
  }
  #studio-screen#studio-screen:is(.studio-layout-immersive,[data-layout="immersive"]) .waveform-labels{
    gap:16px;
  }
}

/* Rebuilt web scene preparation: compact preview and clear role cards. */
#setup-screen .setup-page{
  width:min(100%,1280px);
  padding:26px 24px 30px;
}
#setup-screen .scene-header{
  grid-template-columns:auto 48px minmax(0,1fr) auto;
  gap:13px;
  margin-bottom:14px;
  padding-inline:2px;
}
#setup-screen .scene-header-cover{
  width:48px;
  height:48px;
  border-color:#3a383f;
  border-radius:14px;
  background:#17171a;
}
#setup-screen .scene-header h1{
  margin-top:1px;
  font-size:24px;
}
#setup-screen .scene-header p{
  color:#9d98a2;
}
#setup-screen .local-pack-badge{
  border-color:rgba(242,167,200,.3);
  color:#efc2d5;
  background:#211d22;
}
#setup-screen .setup-tabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  margin-bottom:14px;
  padding:5px;
  border-color:#343238;
  border-radius:15px;
  background:#17171a;
}
#setup-screen .setup-tab{
  justify-content:center;
  min-height:43px;
  border:1px solid transparent;
  border-radius:11px;
  color:#99939e;
}
#setup-screen .setup-tab:hover{
  color:#f7f3f8;
  background:#201f23;
}
#setup-screen .setup-tab.active{
  border-color:rgba(242,167,200,.28);
  color:#181519;
  background:#d9c3df;
  box-shadow:none;
}
#setup-screen .setup-primary-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);
  gap:14px;
  min-height:0;
  height:500px;
}
#setup-screen .setup-preview-card{
  height:500px;
  min-height:0;
  border-color:#35333a;
  border-radius:22px;
  background:#121214;
  box-shadow:0 20px 54px rgba(0,0,0,.22);
}
#setup-screen .scene-preview img{
  object-fit:cover;
  object-position:center;
  transform:scale(1.015);
  animation:setup-scene-drift 15s ease-in-out infinite alternate;
}
#setup-screen .character-box{
  height:500px;
  min-height:0;
  padding:22px;
  border-color:#35333a;
  border-radius:22px;
  background:#17171a;
  box-shadow:0 20px 54px rgba(0,0,0,.18);
}
#setup-screen .character-box h2{
  margin:6px 0 6px;
  font-size:clamp(27px,2.25vw,34px);
}
#setup-screen .setup-description{
  margin:0 0 15px;
  color:#9d98a2;
}
#setup-screen .character-list{
  gap:10px;
}
#setup-screen .character-option{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 28px;
  gap:12px;
  align-items:center;
  min-height:66px;
  padding:10px 12px;
  overflow:hidden;
  border:1px solid #3b3940;
  border-radius:16px;
  color:#f5f1f6;
  background:#121214;
  box-shadow:none;
  transition:border-color .18s ease,background-color .18s ease,transform .18s ease;
}
#setup-screen .character-option:hover{
  border-color:#66606a;
  background:#1d1c20;
  transform:translateY(-1px);
}
#setup-screen .character-option input{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}
#setup-screen .character-option__avatar{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid #403c43;
  border-radius:14px;
  color:#f2a7c8;
  background:#28242a;
  font-size:15px;
  font-weight:900;
}
#setup-screen .character-option__copy{
  display:block;
  min-width:0;
}
#setup-screen .character-option__copy strong,
#setup-screen .character-option__copy small{
  display:block;
}
#setup-screen .character-option__copy strong{
  overflow:hidden;
  color:#f8f5f8;
  font-size:14px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#setup-screen .character-option__copy small{
  margin-top:3px;
  color:#908a94;
  font-size:10px;
  font-weight:650;
}
#setup-screen .character-option__state{
  position:relative;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid #55515a;
  border-radius:50%;
  background:#1c1b1e;
}
#setup-screen .character-option__state::after{
  width:6px;
  height:11px;
  border-right:2px solid #171419;
  border-bottom:2px solid #171419;
  content:"";
  opacity:0;
  transform:translateY(-1px) rotate(45deg);
}
#setup-screen .character-option:has(input:checked){
  border-color:#e5a6c3;
  color:#fff;
  background:#242126;
  box-shadow:inset 3px 0 #f2a7c8;
}
#setup-screen .character-option:has(input:checked) .character-option__avatar{
  border-color:rgba(242,167,200,.38);
  color:#171419;
  background:#efb1cc;
}
#setup-screen .character-option:has(input:checked) .character-option__state{
  border-color:#cbb9e4;
  background:#cbb9e4;
  box-shadow:0 0 0 4px rgba(203,185,228,.09);
}
#setup-screen .character-option:has(input:checked) .character-option__state::after{
  opacity:1;
}
#setup-screen .character-option:has(input:focus-visible){
  outline:2px solid #f2a7c8;
  outline-offset:3px;
}
#setup-screen .session-explainer{
  gap:7px;
  margin-top:auto;
  padding-top:16px;
}
#setup-screen .session-explainer > div{
  min-width:0;
  padding:9px;
  border:1px solid #302e33;
  border-radius:12px;
  background:#121214;
}
#setup-screen .session-explainer > div > span{
  color:#e9acc8;
  background:#28222a;
}
#setup-screen .setup-footer{
  position:sticky;
  z-index:25;
  right:auto;
  bottom:12px;
  left:auto;
  min-height:72px;
  margin-top:14px;
  padding:12px 14px 12px 18px;
  border:1px solid #37343a;
  border-radius:17px;
  background:#17171a;
  box-shadow:0 18px 50px rgba(0,0,0,.34);
  backdrop-filter:blur(16px);
}
#setup-screen .setup-footer p{
  color:#aaa4ae;
}
#setup-screen .setup-footer .button{
  min-width:240px;
}
@keyframes setup-scene-drift{
  from{transform:scale(1.015) translate3d(-.5%,0,0)}
  to{transform:scale(1.055) translate3d(.5%,-.5%,0)}
}

@media (max-width:1050px) and (min-width:861px){
  #setup-screen .setup-page{padding-inline:24px}
  #setup-screen .setup-primary-grid{grid-template-columns:minmax(0,1fr) 350px;height:470px}
  #setup-screen .setup-preview-card,
  #setup-screen .character-box{height:470px}
  #setup-screen .session-explainer{grid-template-columns:1fr}
  #setup-screen .session-explainer > div{padding:7px 9px}
}

@media (max-width:860px){
  #setup-screen .setup-page{padding:78px 18px 96px}
  #setup-screen .setup-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #setup-screen .setup-primary-grid{grid-template-columns:1fr;height:auto}
  #setup-screen .setup-preview-card{height:380px;min-height:0}
  #setup-screen .character-box{height:auto;min-height:390px}
  #setup-screen .setup-footer{bottom:78px;margin-top:12px}
}

@media (max-width:600px){
  #setup-screen .scene-header{grid-template-columns:auto 42px minmax(0,1fr)}
  #setup-screen .scene-header-cover{width:42px;height:42px}
  #setup-screen .scene-header h1{font-size:19px}
  #setup-screen .setup-preview-card{height:310px}
  #setup-screen .character-box{min-height:0;padding:18px}
  #setup-screen .session-explainer{grid-template-columns:1fr}
  #setup-screen .setup-footer{align-items:stretch;flex-direction:column;gap:9px}
  #setup-screen .setup-footer .button{width:100%;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  #setup-screen .scene-preview img{animation:none}
}

/* Polished phone layout for the web app. */
@media (max-width:650px){
  html,
  body,
  .app-content,
  .workspace-screen{
    width:100%;
    max-width:100%;
  }
  body{
    min-width:0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .workspace-screen .page-shell,
  #setup-screen .setup-page{
    width:100%;
    min-height:100dvh;
    padding:76px 16px calc(106px + env(safe-area-inset-bottom));
  }
  .mobile-menu-button{
    top:max(14px,env(safe-area-inset-top));
    left:16px;
    width:46px;
    height:46px;
    border-radius:15px;
    background:#1a191c;
    box-shadow:0 12px 30px rgba(0,0,0,.34);
  }
  .mobile-menu-button span{
    width:18px;
    background:#f4eff5;
  }
  .page-header,
  .page-header-actions{
    gap:0;
    margin-bottom:22px;
  }
  .page-header .eyebrow{
    font-size:9px;
    letter-spacing:.17em;
  }
  .page-header h1{
    margin:8px 0 7px;
    font-size:clamp(29px,8.5vw,36px);
    line-height:1.02;
  }
  .page-header p{
    max-width:34ch;
    margin:0;
    color:#aaa4ae;
    font-size:14px;
    line-height:1.55;
  }

  body[data-screen="library"] #library-screen .header-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:17px;
  }
  body[data-screen="library"] #library-screen .header-actions .button{
    width:100%;
    min-width:0;
    min-height:46px;
    margin:0;
  }
  body[data-screen="library"] #create-scene-button{
    grid-column:1/-1;
    min-height:49px;
  }

  body[data-screen="library"] #library-screen .catalog-toolbar{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-bottom:14px;
    padding:9px;
    border-color:#37343b;
    border-radius:18px;
    background:#17171a !important;
    box-shadow:0 12px 30px rgba(0,0,0,.16);
  }
  body[data-screen="library"] #library-screen .search-field{
    width:100%;
    min-width:0;
    min-height:45px;
    border-radius:12px;
  }
  body[data-screen="library"] #library-screen .filter-chips{
    display:grid;
    grid-template-columns:auto minmax(86px,1.35fr) minmax(72px,1.1fr) auto;
    gap:4px;
    order:2;
    width:100%;
    padding:4px;
    overflow:visible;
    border:1px solid #302e33;
    border-radius:13px;
    background:#111113;
  }
  body[data-screen="library"] #library-screen .filter-chip{
    min-width:0;
    min-height:35px;
    padding:6px 7px;
    overflow:hidden;
    border-radius:9px;
    font-size:9px;
    text-overflow:ellipsis;
  }
  body[data-screen="library"] #library-screen .filter-chip.active{
    border-color:rgba(242,167,200,.3);
    color:#171419;
    background:#e4b0c8;
    box-shadow:none;
  }
  body[data-screen="library"] #library-screen .sort-field{
    order:3;
    width:100%;
  }
  body[data-screen="library"] #library-screen .sort-field select{
    width:100%;
    min-height:42px;
    padding-inline:13px 34px;
    border-color:#39363e;
    border-radius:11px;
    background:#202024;
  }
  body[data-screen="library"] #library-screen .catalog-subhead{
    min-height:34px;
    margin-bottom:10px;
    padding-inline:3px;
    flex-wrap:wrap;
  }
  body[data-screen="library"] #catalog-status{
    max-width:100%;
    color:#9f99a4;
    font-size:10px;
  }
  body[data-screen="library"] #library-screen .catalog-subhead-actions{
    justify-content:space-between;
    width:100%;
  }
  body[data-screen="library"] #add-more-scenes{
    min-height:40px;
    padding:8px 11px;
    font-size:11px;
  }
  body[data-screen="library"] #library-count{
    padding:5px 8px;
    border:1px solid #343139;
    border-radius:999px;
    color:#d7d0da;
    background:#18171a;
    font-size:9px;
  }

  .scene-grid{
    gap:14px;
  }
  .scene-grid .scene-card{
    border-color:#37343b;
    border-radius:20px;
    box-shadow:0 18px 42px rgba(0,0,0,.28);
  }
  .scene-grid .scene-card__media{
    aspect-ratio:16/9;
  }
  .scene-grid .scene-card__body{
    padding:16px;
  }
  .scene-grid .scene-card__eyebrow{
    margin-bottom:5px;
    color:#edaac8;
  }
  .scene-grid .scene-card__title{
    font-size:20px;
  }
  .scene-grid .scene-card__description{
    min-height:0;
    margin:7px 0 10px;
    font-size:11px;
    line-height:1.5;
  }
  .scene-grid .scene-card__progress{
    padding-top:11px;
  }
  .scene-grid .scene-card__actions{
    margin-top:12px;
  }
  .scene-grid .scene-card__button{
    min-height:44px;
    border-radius:11px;
  }
  .library-utility{
    justify-content:stretch;
    margin-top:16px;
  }
  .library-utility .button{
    width:100%;
  }

  .mobile-tabbar{
    right:14px;
    bottom:max(11px,env(safe-area-inset-bottom));
    left:14px;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:68px;
    padding:7px;
    border-color:#403c44;
    border-radius:22px;
    background:rgba(24,23,26,.96);
    box-shadow:0 20px 45px rgba(0,0,0,.5);
  }
  .mobile-tabbar button{
    min-width:0;
    border-radius:14px;
    color:#928d97;
    font-size:9px;
  }
  .mobile-tabbar button.active{
    color:#f7f2f7;
    background:#29252b;
  }
  .mobile-tabbar .mobile-create{
    width:56px;
    height:56px;
    margin:-18px auto 0;
    border:5px solid #0b0b0d;
    color:#171419;
    background:#d5bde2;
    box-shadow:0 10px 28px rgba(0,0,0,.48),0 0 0 1px rgba(242,167,200,.2);
  }
  .mobile-tabbar .mobile-dub span{
    font-weight:850;
    letter-spacing:-.02em;
  }
  .mobile-tabbar button[data-nav-action="library"] span{
    font-size:8px;
    letter-spacing:-.025em;
  }

  .home-page{
    padding-bottom:calc(112px + env(safe-area-inset-bottom)) !important;
  }
  .home-header{
    margin-bottom:20px;
  }
  .featured-stage,
  .featured-loading,
  .scene-card--featured,
  .scene-card--featured .scene-card__body{
    min-height:430px;
  }
  .scene-card--featured .scene-card__body{
    padding:22px;
  }
  .scene-card--featured .scene-card__title{
    font-size:34px;
  }
  .content-section{
    margin-top:34px;
  }
  .section-heading{
    align-items:flex-start;
  }
  .section-heading > div{
    min-width:0;
  }
  .section-heading h2{
    font-size:25px;
  }
  .section-heading p{
    margin:6px 0 0;
    color:#9f99a4;
    font-size:12px;
  }
  .section-heading .link-button{
    flex:0 0 auto;
    font-size:10px;
  }
  .home-catalog-toolbar,
  .store-toolbar{
    padding:9px;
    border-radius:16px;
  }
  .home-value-strip{
    margin-top:34px;
    border-radius:16px;
  }
  .home-value-strip article{
    min-height:90px;
    padding:17px;
  }
  #setup-screen .setup-footer{
    position:relative;
    right:auto;
    bottom:auto;
    left:auto;
    margin-top:14px;
    box-shadow:0 16px 34px rgba(0,0,0,.24);
  }
}

@media (max-width:370px){
  .workspace-screen .page-shell,
  #setup-screen .setup-page{
    padding-inline:13px;
  }
  body[data-screen="library"] #library-screen .filter-chips{
    grid-template-columns:auto minmax(78px,1.3fr) minmax(66px,1fr) auto;
  }
  body[data-screen="library"] #library-screen .filter-chip{
    padding-inline:5px;
    font-size:8px;
  }
  .mobile-tabbar{
    right:9px;
    left:9px;
  }
}

/* Login: marca animada e cabeçalho visual sem o antigo símbolo decorativo. */
.license-screen .login-visual {
  display: flex;
  align-items: flex-end;
  min-height: 610px;
  padding: 132px 44px 48px;
  background-color: #1b1b1e !important;
}

.license-screen .login-visual::after {
  display: none;
}

.license-screen .login-visual-copy {
  position: relative;
  inset: auto;
  width: min(100%, 560px);
  padding-top: 28px;
  border-top: 1px solid #343139;
}

.license-screen .login-brand img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width:650px) {
  .license-screen .login-visual {
    min-height: 208px;
    padding: 82px 22px 22px;
  }

  .license-screen .login-visual-copy {
    padding-top: 16px;
  }
}

/* Mobile app shell and swipe-first home experience. */
.mobile-header-surface,
.mobile-brand-button{
  display:none;
}

@media (max-width:650px){
  html{
    scrollbar-width:none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    display:none;
    width:0;
  }
  .mobile-header-surface{
    position:fixed;
    z-index:54;
    top:0;
    right:0;
    left:0;
    display:block;
    height:72px;
    border-bottom:1px solid rgba(255,255,255,.055);
    background:rgba(11,11,13,.92);
    box-shadow:0 8px 24px rgba(0,0,0,.14);
    backdrop-filter:blur(18px);
  }
  .mobile-brand-button{
    position:fixed;
    z-index:61;
    top:max(20px,calc(env(safe-area-inset-top) + 6px));
    left:50%;
    display:block;
    width:120px;
    height:32px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    transform:translateX(-50%);
  }
  .mobile-brand-button img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
  }
  body:is([data-screen="license"],[data-screen="studio"],[data-screen="review"]) :is(.mobile-header-surface,.mobile-brand-button){
    display:none!important;
  }
  .workspace-screen .page-shell,
  #setup-screen .setup-page{
    padding-top:94px;
  }
  .mobile-menu-button{
    z-index:62;
    top:max(13px,env(safe-area-inset-top));
    width:44px;
    height:44px;
    border-radius:14px;
    box-shadow:none;
  }

  .home-header{
    margin-bottom:17px;
  }
  .home-header .eyebrow{
    padding:5px 8px;
    border:1px solid rgba(242,167,200,.16);
    border-radius:999px;
    background:#1a171b;
  }
  .home-header h1{
    max-width:100%;
    margin-top:11px;
    font-size:clamp(29px,8.2vw,32px);
    line-height:.98;
    letter-spacing:-.047em;
  }
  .home-header p{
    max-width:31ch;
    font-size:13px;
    line-height:1.5;
  }
  .featured-stage{
    min-height:0;
    margin-bottom:27px;
  }
  .featured-loading,
  .scene-card--featured,
  .scene-card--featured .scene-card__body{
    min-height:344px;
  }
  .scene-card--featured{
    border-color:#403b43;
    border-radius:24px;
    box-shadow:0 20px 50px rgba(0,0,0,.38);
  }
  .scene-card--featured .scene-card__media::after{
    background:linear-gradient(to top,rgba(12,11,14,.98) 4%,rgba(12,11,14,.76) 48%,rgba(12,11,14,.06) 82%);
  }
  .scene-card--featured .scene-card__body{
    justify-content:flex-end;
    padding:19px;
  }
  .scene-card--featured .scene-card__eyebrow{
    margin-bottom:4px;
    font-size:8px;
  }
  .scene-card--featured .scene-card__title{
    max-width:10ch;
    font-size:30px;
    line-height:.96;
  }
  .scene-card--featured .scene-card__description{
    max-width:30ch;
    margin:9px 0 7px;
    font-size:10px;
    line-height:1.45;
  }
  .scene-card--featured .scene-card__meta{
    gap:4px 10px;
    font-size:8px;
  }
  .scene-card--featured .scene-card__progress{
    margin-top:9px;
    padding-top:0;
  }
  .scene-card--featured .scene-card__progress-label{
    margin-bottom:5px;
    font-size:8px;
  }
  .scene-card--featured .scene-card__actions{
    margin-top:11px;
  }
  .scene-card--featured .scene-card__button{
    min-height:46px;
    border-radius:12px;
    font-size:11px;
  }
  .scene-card--featured .scene-card__badges{
    top:13px;
    right:13px;
  }
  .scene-card--featured .scene-card__badge--free{
    padding:7px 11px;
    font-size:8px;
  }

  .home-catalog-section{
    margin-top:0;
  }
  .home-catalog-section .section-heading{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    margin-bottom:14px;
  }
  .home-catalog-section .section-heading h2{
    max-width:15ch;
    margin-top:6px;
    font-size:22px;
    line-height:1.02;
  }
  .home-catalog-section .section-heading p{
    display:none;
  }
  .home-catalog-section .section-heading .link-button{
    align-self:end;
    padding-bottom:2px;
    color:#eeb4cd;
  }
  .home-catalog-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-bottom:13px;
    padding:8px;
    border-color:#35323a;
    background:#17171a!important;
  }
  .home-catalog-toolbar .search-field{
    min-width:0;
    min-height:42px;
  }
  .home-catalog-toolbar > strong{
    align-self:center;
    margin:0;
    padding:6px 4px 6px 0;
    font-size:9px;
  }
  .home-catalog-grid{
    display:grid;
    grid-template-columns:none;
    grid-auto-columns:min(79vw,308px);
    grid-auto-flow:column;
    gap:12px;
    margin-inline:-16px;
    padding:2px 16px 18px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-padding-inline:16px;
    scroll-snap-type:inline mandatory;
    scrollbar-width:none;
  }
  .home-catalog-grid::-webkit-scrollbar{
    display:none;
  }
  .home-catalog-grid .scene-card{
    scroll-snap-align:start;
  }
  .home-catalog-grid .scene-card:hover{
    transform:none;
  }
  .home-catalog-grid .scene-card__body{
    padding:14px;
  }
  .home-catalog-grid .scene-card__title{
    font-size:18px;
  }
  .home-catalog-grid .scene-card__description{
    -webkit-line-clamp:2;
  }
  .home-catalog-grid .scene-card__button{
    min-height:42px;
  }

  .home-value-strip{
    display:grid;
    grid-template-columns:none;
    grid-auto-columns:78%;
    grid-auto-flow:column;
    gap:10px;
    margin:20px -16px 0;
    padding:0 16px 8px;
    overflow-x:auto;
    border:0;
    border-radius:0;
    background:transparent;
    scroll-padding-inline:16px;
    scroll-snap-type:inline mandatory;
    scrollbar-width:none;
  }
  .home-value-strip::-webkit-scrollbar{
    display:none;
  }
  .home-value-strip article{
    min-height:82px;
    padding:15px;
    border:1px solid #37343b;
    border-radius:16px;
    scroll-snap-align:start;
  }
  .home-value-strip article > span{
    width:34px;
    height:34px;
  }
  .home-value-strip strong{
    font-size:12px;
  }
  .home-value-strip small{
    font-size:9px;
  }
}

@media (max-width:370px){
  .home-catalog-grid,
  .home-value-strip{
    margin-inline:-13px;
    padding-inline:13px;
    scroll-padding-inline:13px;
  }
  .home-catalog-grid{
    grid-auto-columns:82vw;
  }
  .scene-card--featured .scene-card__title{
    font-size:28px;
  }
}

/* Two-column mobile storefront. */
@media (max-width:650px){
  body[data-screen="store"] #store-screen .page-shell{
    padding-inline:14px;
  }
  body[data-screen="store"] #store-screen .page-header{
    margin-bottom:18px;
  }
  body[data-screen="store"] #store-screen .header-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:16px;
  }
  body[data-screen="store"] #store-screen .header-actions .button{
    width:100%;
    min-width:0;
    min-height:44px;
    margin:0;
  }
  body[data-screen="store"] #store-screen .store-hero{
    gap:16px;
    margin-bottom:14px;
    padding:20px;
    border-color:#39363e;
    border-radius:20px;
    background:#17171a!important;
  }
  body[data-screen="store"] #store-screen .store-hero h2{
    margin:7px 0 6px;
    font-size:24px;
    line-height:1.04;
  }
  body[data-screen="store"] #store-screen .store-hero p{
    font-size:11px;
    line-height:1.5;
  }
  body[data-screen="store"] #store-screen .store-hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) 43px 43px;
    gap:7px;
    width:100%;
  }
  body[data-screen="store"] #store-screen .store-hero-actions .button{
    min-width:0;
    min-height:43px;
    padding-inline:10px;
    font-size:10px;
  }
  body[data-screen="store"] #store-screen .store-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    margin-bottom:14px;
    padding:8px;
    border-color:#37343b;
    background:#17171a!important;
  }
  body[data-screen="store"] #store-screen .store-toolbar .search-field{
    width:100%;
    min-width:0;
    min-height:42px;
  }
  body[data-screen="store"] #store-screen .store-toolbar > strong{
    align-self:center;
    padding-right:3px;
    font-size:9px;
  }
  body[data-screen="store"] #store-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  body[data-screen="store"] #store-list .scene-card{
    min-width:0;
    border-radius:17px;
    box-shadow:0 14px 32px rgba(0,0,0,.24);
  }
  body[data-screen="store"] #store-list .scene-card__media{
    aspect-ratio:4/3;
  }
  body[data-screen="store"] #store-list .scene-card__badges{
    top:8px;
    left:8px;
  }
  body[data-screen="store"] #store-list .scene-card__badge{
    padding:5px 7px;
    font-size:7px;
  }
  body[data-screen="store"] #store-list .scene-card__duration{
    right:7px;
    bottom:7px;
    padding:3px 5px;
    font-size:8px;
  }
  body[data-screen="store"] #store-list .scene-card__body{
    min-height:151px;
    padding:11px;
  }
  body[data-screen="store"] #store-list .scene-card__eyebrow{
    margin-bottom:4px;
    font-size:7px;
  }
  body[data-screen="store"] #store-list .scene-card__title{
    display:-webkit-box;
    min-height:31px;
    overflow:hidden;
    font-size:14px;
    line-height:1.1;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  body[data-screen="store"] #store-list .scene-card__description{
    display:-webkit-box;
    min-height:27px;
    margin:6px 0 7px;
    overflow:hidden;
    font-size:8px;
    line-height:1.45;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  body[data-screen="store"] #store-list .scene-card__meta{
    display:none;
  }
  body[data-screen="store"] #store-list .scene-card__actions{
    margin-top:auto;
  }
  body[data-screen="store"] #store-list .scene-card__button{
    min-height:39px;
    padding:7px 5px;
    border-radius:10px;
    font-size:8px;
    line-height:1.2;
    white-space:normal;
  }
}

@media (max-width:370px){
  body[data-screen="store"] #store-screen .page-shell{
    padding-inline:11px;
  }
  body[data-screen="store"] #store-list{
    gap:8px;
  }
  body[data-screen="store"] #store-list .scene-card__body{
    padding:10px;
  }
  body[data-screen="store"] #store-list .scene-card__title{
    font-size:13px;
  }
  body[data-screen="store"] #store-list .scene-card__button{
    font-size:7px;
  }
}

/* A linha do tempo acompanha a frase e permanece centralizada. */
#studio-screen#studio-screen .waveform-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  place-items: center;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

#studio-screen#studio-screen .waveform-frame {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 126px;
  gap: 8px;
  align-items: center;
  width: min(100%, max(420px, calc(var(--phrase-width, 100%) + 190px)));
  max-width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid #46424b;
  border-radius: 17px;
  background: #171719;
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  transition: width 220ms ease;
}

#studio-screen#studio-screen .waveform-frame > .waveform-labels {
  grid-column: 1;
}

#studio-screen#studio-screen .waveform-frame > .waveform-panel {
  grid-column: 2;
}

#studio-screen#studio-screen .waveform-frame > .studio-hint {
  grid-column: 3;
}

#studio-screen#studio-screen .waveform-panel {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
}

@media (max-width:860px) {
  #studio-screen#studio-screen .waveform-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    height: auto;
    min-height: 85px;
    padding: 8px;
    width: min(100%, max(240px, var(--phrase-width, 100%)));
  }

  #studio-screen#studio-screen .waveform-frame > .waveform-panel {
    grid-column: 1;
    grid-row: 1;
  }

  #studio-screen#studio-screen .waveform-frame > .studio-hint {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Mobile studio: a short, one-handed flow — listen, record, continue. */
.mobile-flow-label { display: none; }

@media (max-width: 600px) {
  #studio-screen#studio-screen .studio-shell {
    display: flex;
    width: 100%;
    min-height: 100dvh;
    gap: 9px;
    padding: max(7px, env(safe-area-inset-top)) 8px max(14px, env(safe-area-inset-bottom));
  }

  #studio-screen#studio-screen .studio-topbar {
    display: flex;
    min-height: 52px;
    gap: 8px;
    padding: 3px 0 8px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #studio-screen#studio-screen .studio-title-group { min-width: 0; gap: 9px; }
  #studio-screen#studio-screen .studio-scene-title > span { display: block; font-size: 7px; }
  #studio-screen#studio-screen .studio-scene-title h1 { max-width: 58vw; font-size: 14px; }
  #studio-screen#studio-screen #studio-exit,
  #studio-screen#studio-screen #studio-settings {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 13px;
  }
  #studio-screen#studio-screen .studio-control-group { margin-left: auto; }
  #studio-screen#studio-screen .studio-progress-copy,
  #studio-screen#studio-screen .studio-layout-switch,
  #studio-screen#studio-screen #studio-technical { display: none; }

  #studio-screen#studio-screen .studio-main {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 9px;
    padding: 0;
  }

  #studio-screen#studio-screen .studio-player {
    flex: none;
    overflow: visible;
    border-radius: 16px;
  }
  #studio-screen#studio-screen .video-frame {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-width: 4px;
    border-radius: 16px 16px 4px 4px;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
  }
  #studio-screen#studio-screen .video-status {
    top: 9px;
    left: 9px;
    padding: 5px 8px;
  }
  #studio-screen#studio-screen .line-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 56px;
    gap: 8px;
    padding: 9px 12px 10px;
    border-radius: 0 0 14px 14px;
  }
  #studio-screen#studio-screen .line-copy > span { align-self: start; padding-top: 3px; font-size: 7px; }
  #studio-screen#studio-screen .line-copy p {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    text-align: left;
  }

  #studio-screen#studio-screen .record-panel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 11px;
    border-radius: 16px;
    box-shadow: none;
  }
  #studio-screen#studio-screen .record-panel-head {
    order: 1;
    min-height: 36px;
    padding: 0 2px 8px;
  }
  #studio-screen#studio-screen .record-panel-head p { font-size: 11px; line-height: 1.25; }
  #studio-screen#studio-screen .record-secondary { order: 2; }
  #studio-screen#studio-screen .record-primary-action { order: 3; display: grid; gap: 6px; padding: 0; }
  #studio-screen#studio-screen .navigation-buttons { order: 4; margin-top: 2px; }
  #studio-screen#studio-screen #preview-progress { order: 5; }
  #studio-screen#studio-screen #reset-microphone { order: 6; min-height: 28px; padding: 2px; font-size: 10px; }
  #studio-screen#studio-screen .mobile-studio-guide { display: none; }

  #studio-screen#studio-screen .mobile-flow-label {
    display: block;
    grid-column: 1 / -1;
    color: #b9a6e8;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .12em;
  }
  #studio-screen#studio-screen .record-secondary,
  #studio-screen#studio-screen .navigation-buttons {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 8px;
  }
  #studio-screen#studio-screen .record-secondary #play-reference { grid-column: 1 / -1; }
  #studio-screen#studio-screen .record-secondary #play-take {
    grid-column: 1 / -1;
    min-height: 42px;
  }
  #studio-screen#studio-screen .record-button {
    min-height: 66px;
    gap: 12px;
    padding: 10px 13px;
    border-radius: 14px;
  }
  #studio-screen#studio-screen .record-button-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
  }
  #studio-screen#studio-screen .record-button strong { font-size: 15px; }
  #studio-screen#studio-screen .record-button small { margin-top: 2px; }
  #studio-screen#studio-screen .record-secondary .button,
  #studio-screen#studio-screen .navigation-buttons :is(.button, .round-button) { min-height: 46px; }
  #studio-screen#studio-screen .navigation-buttons #next-line { justify-content: center; gap: 9px; font-size: 13px; }

  #studio-screen#studio-screen .waveform-dock {
    order: 4;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
  }
  #studio-screen#studio-screen .waveform-frame {
    min-height: 0;
    grid-template-rows: 44px auto;
    padding: 6px;
    border-radius: 12px;
  }
  #studio-screen#studio-screen .waveform-panel { height: 44px; border-radius: 8px; }
  #studio-screen#studio-screen .studio-hint { min-height: 18px; padding: 4px 2px 0; font-size: 9px; }
  #studio-screen#studio-screen .studio-hint i { bottom: -2px; height: 3px; }
}

@media (max-width: 370px) {
  #studio-screen#studio-screen .studio-scene-title > span { display: none; }
  #studio-screen#studio-screen .studio-scene-title h1 { max-width: 55vw; font-size: 13px; }
  #studio-screen#studio-screen .line-copy { grid-template-columns: 1fr; gap: 3px; }
  #studio-screen#studio-screen .line-copy > span { padding-top: 0; }
}

/* Keep the mobile flow authoritative over the older per-layout themes. */
@media (max-width: 600px) {
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .studio-shell {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    gap: 9px;
    padding: max(7px, env(safe-area-inset-top)) 8px max(14px, env(safe-area-inset-bottom));
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .studio-topbar {
    display: flex;
    width: 100%;
    min-height: 52px;
    gap: 8px;
    padding: 3px 0 8px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .studio-main {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    height: auto;
    padding: 0;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .studio-player {
    flex: none;
    width: 100%;
    min-height: 0;
    overflow: visible;
    border-radius: 16px;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .video-frame {
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-width: 4px;
    border-radius: 16px 16px 4px 4px;
    box-shadow: 0 10px 24px rgba(0,0,0,.32);
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .line-copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 56px;
    gap: 8px;
    padding: 9px 12px 10px;
    border-radius: 0 0 14px 14px;
    text-align: left;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .line-copy p {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    text-align: left;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .record-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 9px;
    padding: 11px;
    border-radius: 16px;
    box-shadow: none;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .record-secondary {
    order: 2;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 8px;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .record-primary-action {
    order: 3;
    display: grid;
    gap: 6px;
    padding: 0;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .record-button {
    min-height: 66px;
    padding: 10px 13px;
    border-radius: 14px;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .navigation-buttons {
    order: 4;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 6px 8px;
    margin-top: 2px;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic, .studio-layout-immersive, [data-layout]) .waveform-dock {
    order: 4;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none;
  }
}

/* Studio mobile final: toda a dublagem ocupa exatamente uma tela, sem scroll. */
@media (max-width:600px) {
  body[data-screen="studio"] {
    width:100%;
    height:100svh;
    height:100dvh;
    overflow:hidden;
    overscroll-behavior:none;
  }
  body[data-screen="studio"] .app-content,
  body[data-screen="studio"] #studio-screen {
    width:100%;
    height:100svh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-shell {
    display:grid;
    grid-template-rows:42px minmax(0,1fr) 52px;
    width:100%;
    height:100svh;
    height:100dvh;
    min-height:0;
    gap:5px;
    padding:max(4px,env(safe-area-inset-top)) 7px max(5px,env(safe-area-inset-bottom));
    overflow:hidden;
  }
  #studio-screen#studio-screen .studio-topbar {
    display:flex;
    min-height:0;
    height:42px;
    gap:6px;
    padding:0 1px 5px;
  }
  #studio-screen#studio-screen .studio-title-group { min-width:0;gap:7px; }
  #studio-screen#studio-screen .studio-scene-title > span { display:none; }
  #studio-screen#studio-screen .studio-scene-title h1 { max-width:52vw;font-size:13px; }
  #studio-screen#studio-screen #studio-exit,
  #studio-screen#studio-screen #studio-settings {
    width:38px;
    min-width:38px;
    min-height:38px;
    height:38px;
    border-radius:12px;
  }
  #studio-screen#studio-screen .studio-control-group { gap:5px;margin-left:auto; }
  #studio-screen#studio-screen .studio-progress-copy {
    display:flex;
    min-height:30px;
    padding:5px 8px;
    border-radius:10px;
  }
  #studio-screen#studio-screen .studio-progress-copy strong { display:none; }
  #studio-screen#studio-screen .studio-progress-copy span { font-size:9px;white-space:nowrap; }
  #studio-screen#studio-screen .studio-layout-switch,
  #studio-screen#studio-screen #studio-technical { display:none; }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-main {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
    width:100%;
    height:auto;
    min-height:0;
    gap:5px;
    padding:0;
    overflow:hidden;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-player {
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    border-radius:13px;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .video-frame {
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:auto;
    border-width:3px;
    border-radius:13px 13px 3px 3px;
    box-shadow:0 7px 18px rgba(0,0,0,.3);
  }
  #studio-screen#studio-screen .video-frame video { display:block;width:100%;height:100%;object-fit:contain; }
  #studio-screen#studio-screen .video-status { top:6px;left:6px;padding:4px 7px; }
  #studio-screen#studio-screen .video-status span { display:none; }
  #studio-screen#studio-screen .video-status strong { font-size:8px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .line-copy {
    display:block;
    min-height:44px;
    max-height:58px;
    padding:7px 10px 8px;
    overflow:hidden;
    border-radius:0 0 12px 12px;
  }
  #studio-screen#studio-screen .line-copy > span { display:none; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .line-copy p {
    display:-webkit-box;
    margin:0;
    overflow:hidden;
    font-size:clamp(13px,4vw,16px);
    font-weight:700;
    line-height:1.22;
    text-align:center;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-panel {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    height:auto;
    min-height:0;
    gap:5px;
    padding:7px;
    border-radius:13px;
    overflow:hidden;
  }
  #studio-screen#studio-screen .record-panel-head {
    order:1;
    min-height:25px;
    gap:7px;
    padding:0 2px 4px;
  }
  #studio-screen#studio-screen .record-panel-head > div > span { display:none; }
  #studio-screen#studio-screen .record-panel-head p {
    margin:0;
    overflow:hidden;
    font-size:10px;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #studio-screen#studio-screen .record-dot { width:8px;height:8px; }
  #studio-screen#studio-screen .mobile-flow-label { display:none; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-secondary {
    order:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
  }
  #studio-screen#studio-screen .record-secondary #play-reference,
  #studio-screen#studio-screen .record-secondary #play-take { grid-column:auto;min-width:0; }
  #studio-screen#studio-screen .record-secondary .button {
    min-height:40px;
    gap:5px;
    padding:6px 7px;
    font-size:9px;
    white-space:nowrap;
    touch-action:manipulation;
  }
  #studio-screen#studio-screen .record-secondary .button img { width:16px;height:16px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-primary-action {
    order:3;
    display:block;
    padding:0;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-button {
    min-height:52px;
    gap:9px;
    padding:6px 10px;
    border-radius:12px;
    touch-action:manipulation;
  }
  #studio-screen#studio-screen .record-button-icon {
    flex-basis:36px;
    width:36px;
    height:36px;
  }
  #studio-screen#studio-screen .record-button-icon img { width:19px;height:19px; }
  #studio-screen#studio-screen .record-button strong { font-size:13px; }
  #studio-screen#studio-screen .record-button small { margin-top:1px;font-size:8px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .navigation-buttons {
    order:4;
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:5px;
    margin:0;
  }
  #studio-screen#studio-screen .navigation-buttons :is(.button,.round-button) {
    min-height:40px;
    height:40px;
    touch-action:manipulation;
  }
  #studio-screen#studio-screen .navigation-buttons #next-line { justify-content:center;gap:7px;font-size:11px; }
  #studio-screen#studio-screen #preview-progress,
  #studio-screen#studio-screen #reset-microphone,
  #studio-screen#studio-screen .mobile-studio-guide { display:none !important; }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .waveform-dock {
    display:block;
    width:100%;
    height:52px;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
  }
  #studio-screen#studio-screen .waveform-frame {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:31px 12px;
    width:100%;
    height:52px;
    min-height:0;
    gap:2px;
    padding:4px 5px 3px;
    border-radius:11px;
  }
  #studio-screen#studio-screen .waveform-frame > .waveform-labels { display:none; }
  #studio-screen#studio-screen .waveform-frame > .waveform-panel {
    grid-column:1;
    grid-row:1;
    height:31px;
    border-width:1px;
    border-radius:7px;
    box-shadow:none;
  }
  #studio-screen#studio-screen .waveform-frame > .studio-hint {
    grid-column:1;
    grid-row:2;
    min-height:0;
    padding:0 1px 2px;
    font-size:7px;
    line-height:10px;
    text-align:left;
  }
  #studio-screen#studio-screen .studio-hint i { bottom:0;height:2px; }
  #studio-screen#studio-screen .countdown { font-size:clamp(58px,20vw,92px); }
}

@media (max-width:600px) and (max-height:650px) {
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-shell {
    grid-template-rows:38px minmax(0,1fr) 44px;
    gap:4px;
    padding-block:max(3px,env(safe-area-inset-top)) max(3px,env(safe-area-inset-bottom));
  }
  #studio-screen#studio-screen .studio-topbar { height:38px;padding-bottom:3px; }
  #studio-screen#studio-screen #studio-exit,
  #studio-screen#studio-screen #studio-settings { width:34px;min-width:34px;min-height:34px;height:34px; }
  #studio-screen#studio-screen .studio-main { gap:4px; }
  #studio-screen#studio-screen .line-copy { min-height:38px;max-height:44px;padding-block:5px; }
  #studio-screen#studio-screen .record-panel { gap:4px;padding:5px 6px; }
  #studio-screen#studio-screen .record-panel-head { display:none; }
  #studio-screen#studio-screen .record-secondary .button,
  #studio-screen#studio-screen .navigation-buttons :is(.button,.round-button) { min-height:36px;height:36px; }
  #studio-screen#studio-screen .record-button { min-height:46px;padding-block:4px; }
  #studio-screen#studio-screen .record-button-icon { flex-basis:32px;width:32px;height:32px; }
  #studio-screen#studio-screen .waveform-dock,
  #studio-screen#studio-screen .waveform-frame { height:44px; }
  #studio-screen#studio-screen .waveform-frame { grid-template-rows:26px 10px;padding:3px 4px; }
  #studio-screen#studio-screen .waveform-frame > .waveform-panel { height:26px; }
}

@media (orientation:landscape) and (max-width:950px) and (max-height:600px) {
  body[data-screen="studio"],
  body[data-screen="studio"] .app-content,
  body[data-screen="studio"] #studio-screen { height:100dvh;overflow:hidden; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-shell {
    display:grid;
    grid-template-rows:36px minmax(0,1fr) 42px;
    width:100%;
    height:100dvh;
    min-height:0;
    gap:4px;
    padding:3px max(7px,env(safe-area-inset-right)) 4px max(7px,env(safe-area-inset-left));
    overflow:hidden;
  }
  #studio-screen#studio-screen .studio-topbar { height:36px;min-height:0;padding:0 0 3px; }
  #studio-screen#studio-screen #studio-exit,
  #studio-screen#studio-screen #studio-settings { width:32px;min-width:32px;min-height:32px;height:32px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-main {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(230px,260px);
    grid-template-rows:minmax(0,1fr);
    width:100%;
    height:auto;
    min-height:0;
    gap:6px;
    overflow:hidden;
  }
  #studio-screen#studio-screen .studio-player { height:100%;min-height:0; }
  #studio-screen#studio-screen .line-copy { min-height:36px;max-height:42px;padding:5px 8px; }
  #studio-screen#studio-screen .line-copy p { font-size:12px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-panel {
    align-self:stretch;
    height:100%;
    gap:4px;
    padding:5px;
  }
  #studio-screen#studio-screen .record-panel-head,
  #studio-screen#studio-screen #reset-microphone { display:none; }
  #studio-screen#studio-screen .record-secondary .button,
  #studio-screen#studio-screen .navigation-buttons :is(.button,.round-button) { min-height:36px;height:36px; }
  #studio-screen#studio-screen .record-button { min-height:48px; }
  #studio-screen#studio-screen .waveform-dock,
  #studio-screen#studio-screen .waveform-frame { height:42px; }
  #studio-screen#studio-screen .waveform-frame { grid-template-rows:25px 9px;padding:3px 5px; }
  #studio-screen#studio-screen .waveform-frame > .waveform-panel { height:25px; }
}

/* Estúdio móvel minimalista: uma única hierarquia visual e quatro ações. */
.line-progress { display: none; }

@media (max-width:600px) and (orientation:portrait) {
  body[data-screen="studio"],
  body[data-screen="studio"] .app-content,
  body[data-screen="studio"] #studio-screen {
    height: 100dvh;
    overflow: hidden;
    background: #09090d;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-shell {
    display: grid;
    grid-template-rows: 46px auto auto 50px;
    align-content: start;
    width: min(100%, 440px);
    height: 100dvh;
    margin: 0 auto;
    gap: 9px;
    padding: max(7px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));
    overflow: hidden;
    background: #09090d;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-main {
    display: contents;
  }

  #studio-screen#studio-screen .studio-topbar {
    grid-row: 1;
    display: flex;
    width: 100%;
    height: 46px;
    min-height: 0;
    gap: 9px;
    padding: 0 0 5px;
    border-bottom: 1px solid #25252d;
    background: transparent;
    box-shadow: none;
  }
  #studio-screen#studio-screen .studio-title-group { min-width: 0; gap: 9px; }
  #studio-screen#studio-screen .studio-scene-title > span { display: none; }
  #studio-screen#studio-screen .studio-scene-title h1 {
    max-width: 58vw;
    color: #f8f7fb;
    font-size: 14px;
    font-weight: 800;
  }
  #studio-screen#studio-screen #studio-exit {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border: 1px solid #34343e;
    border-radius: 11px;
    background: #17171d;
    box-shadow: none;
  }
  #studio-screen#studio-screen .studio-control-group { margin-left: auto; }
  #studio-screen#studio-screen .studio-progress-copy {
    display: flex;
    min-height: 31px;
    padding: 5px 10px;
    border: 1px solid rgba(143,81,255,.48);
    border-radius: 999px;
    background: rgba(72,27,130,.28);
  }
  #studio-screen#studio-screen .studio-progress-copy strong { display: none; }
  #studio-screen#studio-screen .studio-progress-copy span {
    color: #c9a8ff;
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
  }
  #studio-screen#studio-screen #studio-settings,
  #studio-screen#studio-screen #studio-technical,
  #studio-screen#studio-screen .studio-layout-switch { display: none; }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-player {
    grid-row: 2;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .video-frame {
    flex: none;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #282832;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 10px 28px rgba(0,0,0,.34);
  }
  #studio-screen#studio-screen .video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  #studio-screen#studio-screen .video-status {
    top: 10px;
    left: 10px;
    padding: 5px 9px;
    border-color: rgba(255,255,255,.09);
    background: rgba(9,9,13,.82);
  }
  #studio-screen#studio-screen .video-status span {
    display: block;
    color: #dedbe7;
    font-size: 8px;
    letter-spacing: .08em;
  }
  #studio-screen#studio-screen .video-status strong { display: none; }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .line-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 86px;
    max-height: none;
    gap: 3px;
    padding: 10px 8px 7px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
  }
  #studio-screen#studio-screen .line-copy .line-progress {
    display: block;
    order: 1;
    padding: 0;
    color: #a8a4b8;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .09em;
  }
  #studio-screen#studio-screen .line-copy .line-speaker-classic {
    display: block;
    order: 2;
    padding: 0;
    color: #ff4968;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0;
  }
  #studio-screen#studio-screen .line-copy .line-copy-label { display: none; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .line-copy p {
    display: -webkit-box;
    order: 3;
    max-width: 96%;
    margin: 1px auto 0;
    overflow: hidden;
    color: #d9d6e2;
    font-size: clamp(13px,3.7vw,16px);
    font-weight: 650;
    line-height: 1.24;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .waveform-dock {
    grid-row: 3;
    display: block;
    width: 100%;
    height: 112px;
    min-height: 112px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #30303a;
    border-radius: 14px;
    background: #111116 !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
  }
  #studio-screen#studio-screen .waveform-frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
  }
  #studio-screen#studio-screen .waveform-frame > .waveform-labels,
  #studio-screen#studio-screen .waveform-frame > .studio-hint { display: none; }
  #studio-screen#studio-screen .waveform-frame > .waveform-panel {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background: #111116;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  #studio-screen#studio-screen .waveform-panel:focus-visible {
    outline: 2px solid #ff4968;
    outline-offset: -3px;
  }

  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-panel {
    grid-row: 4;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px 44px;
    align-items: center;
    width: 100%;
    height: 50px;
    min-height: 0;
    gap: 7px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  #studio-screen#studio-screen .record-panel-head,
  #studio-screen#studio-screen .mobile-flow-label,
  #studio-screen#studio-screen #play-take,
  #studio-screen#studio-screen #preview-progress,
  #studio-screen#studio-screen #reset-microphone,
  #studio-screen#studio-screen .mobile-studio-guide { display: none !important; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-primary-action,
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-secondary,
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .navigation-buttons {
    display: contents;
  }
  #studio-screen#studio-screen #previous-line {
    grid-column: 1;
    grid-row: 1;
  }
  #studio-screen#studio-screen .record-button {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    height: 44px;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid #ff3157;
    border-radius: 999px;
    color: #ff607d;
    background: rgba(255,34,75,.04);
    background-image: none;
    box-shadow: none;
    animation: none;
    text-align: center;
  }
  #studio-screen#studio-screen .record-button:hover { transform: none; box-shadow: none; }
  #studio-screen#studio-screen .record-button.recording {
    color: white;
    background: #e9264d;
    box-shadow: 0 0 0 5px rgba(255,49,87,.1);
  }
  #studio-screen#studio-screen .record-button:not(.recording):not(:disabled),
  #studio-screen#studio-screen .record-button:not(.recording):not(:disabled):hover {
    color: #ff607d;
    border-color: #ff3157;
    background-color: rgba(255,34,75,.04);
    background-image: none;
    box-shadow: none;
    animation: none;
    transform: none;
  }
  #studio-screen#studio-screen .record-button-icon {
    display: block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
  }
  #studio-screen#studio-screen .record-button-icon img,
  #studio-screen#studio-screen .record-button small { display: none; }
  #studio-screen#studio-screen .record-button strong {
    color: inherit;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
  }
  #studio-screen#studio-screen #play-reference {
    grid-column: 3;
    grid-row: 1;
  }
  #studio-screen#studio-screen #next-line {
    grid-column: 4;
    grid-row: 1;
  }
  #studio-screen#studio-screen #previous-line,
  #studio-screen#studio-screen #play-reference,
  #studio-screen#studio-screen #next-line {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #30303a;
    border-radius: 11px;
    color: #e8e5ef;
    background: #17171d;
    box-shadow: none;
    font-size: 0 !important;
    touch-action: manipulation;
  }
  #studio-screen#studio-screen :is(#previous-line,#play-reference,#next-line) img {
    width: 18px;
    height: 18px;
  }
  #studio-screen#studio-screen :is(#previous-line,#play-reference,#next-line):disabled { opacity: .28; }
  #studio-screen#studio-screen .countdown { font-size: clamp(60px,22vw,100px); }
}

@media (max-width:600px) and (orientation:portrait) and (max-height:560px) {
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-shell {
    grid-template-rows: 42px auto auto 46px;
    gap: 6px;
    padding-block: 4px;
  }
  #studio-screen#studio-screen .studio-topbar { height: 42px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .line-copy { min-height: 68px; padding-block: 6px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .waveform-dock { height: 92px; min-height: 92px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-panel { height: 46px; }
}

/* Abas da preparação com aparência inequívoca de botões. */
#setup-screen .setup-tabs {
  gap: 8px;
  padding: 8px;
  border: 1px solid #35343c;
  border-radius: 16px;
  background: #111114 !important;
}
#setup-screen .setup-tab {
  justify-content: center;
  min-height: 52px;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid #3a3942;
  border-radius: 12px;
  color: #ded9e2;
  background: #222226;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 3px 9px rgba(0,0,0,.14);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
  touch-action: manipulation;
}
#setup-screen .setup-tab img {
  width: 17px;
  height: 17px;
  opacity: .74;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
#setup-screen .setup-tab:hover {
  border-color: #5a5763;
  color: white;
  background: #2b2a30;
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 6px 15px rgba(0,0,0,.2);
  transform: translateY(-1px);
}
#setup-screen .setup-tab:active { transform: translateY(1px); }
#setup-screen .setup-tab:focus-visible {
  outline: 2px solid #f2a7c8;
  outline-offset: 2px;
}
#setup-screen .setup-tab.active,
#setup-screen .setup-tab[aria-selected="true"] {
  border-color: #e9b2cf;
  color: #181519;
  background: linear-gradient(135deg,#f2bfd6,#cbb8e5);
  box-shadow: 0 7px 18px rgba(203,184,229,.22);
}
#setup-screen .setup-tab.active img,
#setup-screen .setup-tab[aria-selected="true"] img {
  opacity: .82;
  filter: brightness(0);
}

@media (max-width:860px) {
  #setup-screen .setup-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #setup-screen .setup-tab { min-height: 50px; padding-inline: 10px; }

  .mobile-tabbar {
    grid-template-columns: repeat(3,minmax(0,1fr));
    min-height: 64px;
  }
  .mobile-tabbar button {
    min-height: 50px;
    gap: 4px;
    font-size: 9px;
  }
  .mobile-tabbar button img {
    width: 19px;
    height: 19px;
  }
}

/* Overrides finais da Biblioteca móvel para manter a vitrine leve. */
@media (max-width:650px) {
  body[data-screen="library"] #library-screen .library-page {
    padding-inline: 12px;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  body[data-screen="library"] #library-screen .library-header {
    margin-bottom: 16px;
  }
  body[data-screen="library"] #library-screen .library-header .eyebrow { display: none; }
  body[data-screen="library"] #library-screen .library-header h1 {
    margin: 0 0 5px;
    font-size: 27px;
  }
  body[data-screen="library"] #library-screen .library-header p { font-size: 12px; }
  body[data-screen="library"] #library-screen .catalog-toolbar {
    gap: 8px;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  body[data-screen="library"] #library-screen .filter-chips {
    display: flex;
    grid-template-columns: none;
    gap: 6px;
    order: 2;
    width: calc(100vw - 24px);
    padding: 2px 0 5px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    scrollbar-width: none;
  }
  body[data-screen="library"] #library-screen .filter-chips::-webkit-scrollbar { display: none; }
  body[data-screen="library"] #library-screen .filter-chip {
    flex: none;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #39353e;
    border-radius: 999px;
    background: #19181c;
    font-size: 9px;
  }
  body[data-screen="library"] #library-screen .sort-field {
    order: 3;
    width: 100%;
  }
  body[data-screen="library"] #library-screen .sort-field select {
    min-height: 39px;
    border-radius: 11px;
  }
  body[data-screen="library"] #library-screen .catalog-subhead {
    min-height: 24px;
    margin: 4px 0 6px;
  }
  body[data-screen="library"] #library-screen #library-count {
    padding: 0;
    border: 0;
    color: #8f8994;
    background: transparent;
    font-size: 9px;
  }
}

/* Topo cinematográfico da Biblioteca. */
#library-screen .library-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
#library-screen .library-topbar h1 {
  margin: 5px 0 0;
  font-size: clamp(24px,3vw,38px);
  letter-spacing: -.045em;
}
#library-total-badge {
  flex: none;
  padding: 7px 10px;
  border: 1px solid #39343e;
  border-radius: 999px;
  color: #c8c1cc;
  background: #17161a;
  font-size: 10px;
}
.library-featured {
  position: relative;
  min-height: clamp(390px,48vw,570px);
  overflow: hidden;
  border: 1px solid #38333e;
  border-radius: 25px;
  background: #09090b;
  box-shadow: 0 24px 60px rgba(0,0,0,.42);
  isolation: isolate;
}
.library-featured::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(to top,#09080c 2%,rgba(9,8,12,.92) 24%,rgba(9,8,12,.34) 61%,rgba(9,8,12,.08) 82%);
  pointer-events: none;
}
.library-featured__loading {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,#111015 25%,#1c1920 42%,#111015 60%);
  background-size: 220% 100%;
  animation: featured-loading 1.5s linear infinite;
}
.library-featured__image {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
  transform: scale(1.015);
}
.library-featured__content {
  position: absolute;
  z-index: 2;
  right: clamp(18px,4vw,48px);
  bottom: clamp(18px,3vw,38px);
  left: clamp(18px,4vw,48px);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  max-width: 710px;
}
.library-featured__eyebrow {
  margin-bottom: 9px;
  color: #b878ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}
.library-featured__title {
  max-width: 17ch;
  margin: 0;
  color: #fff;
  font-size: clamp(34px,5.3vw,68px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
  text-shadow: 0 4px 22px rgba(0,0,0,.78);
}
.library-featured__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  color: #c4bdc8;
  font-size: 12px;
  font-weight: 700;
}
.library-featured__meta span:not(:last-child)::after {
  margin-left: 14px;
  color: #6f6874;
  content: "•";
}
.library-featured__dots {
  display: flex;
  gap: 7px;
  margin-top: 16px;
}
.library-featured__dots button {
  width: 13px;
  height: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #77717c;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.library-featured__dots button.active {
  width: 30px;
  background: #f3edf5;
}
.library-featured__actions {
  display: grid;
  grid-template-columns: minmax(160px,1.15fr) minmax(150px,1fr);
  gap: 10px;
  width: min(100%, 410px);
  margin-top: 18px;
}
.library-featured__button {
  min-height: 50px;
  padding: 11px 18px;
  border: 1px solid #4d4654;
  border-radius: 999px;
  color: #fff;
  background: rgba(22,20,25,.7);
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.library-featured__button--primary {
  border-color: transparent;
  background: linear-gradient(135deg,#8e45ff,#7131ed);
  box-shadow: 0 12px 30px rgba(126,54,241,.3);
}
.library-featured__button:hover {
  filter: brightness(1.09);
  transform: translateY(-1px);
}
.library-featured-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px;
  margin-top: 15px;
}
.library-feature-link {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 12px 15px;
  border: 1px solid #352e42;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg,#170a2a,#100818);
  cursor: pointer;
  text-align: left;
}
.library-feature-link:hover {
  border-color:#6d468e;
  background: linear-gradient(135deg,#211039,#140a20);
}
.library-feature-link__thumb {
  width: 74px;
  aspect-ratio: 16/10;
  border-radius: 9px;
  object-fit: cover;
}
.library-feature-link__flags {
  display: block;
  max-width: 138px;
  font-size: 19px;
  line-height: 1.35;
}
.library-feature-link__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.library-feature-link__copy strong,
.library-feature-link__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-feature-link__copy strong {
  font-size: 14px;
}
.library-feature-link__copy small {
  color: #afa7b4;
  font-size: 10px;
}
.library-feature-link__arrow {
  color: #8f8696;
  font-size: 23px;
}
.library-popular {
  display: grid;
  gap: 12px;
  margin-top: 32px;
}
.library-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.library-section-heading h2,
.library-explore-heading h2 {
  margin: 0;
  color: #f7f3f8;
  font-size: clamp(18px,2vw,24px);
  letter-spacing: -.03em;
}
.library-section-heading button {
  padding: 5px 0;
  border: 0;
  color: #a99eb1;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}
.library-section-heading button:hover { color: #e6bee1; }
.library-explore-heading {
  margin: 34px 0 13px;
}
.library-explore-heading .eyebrow {
  display: block;
  margin-bottom: 6px;
}

@media (max-width:650px) {
  body[data-screen="library"] #library-screen .library-topbar {
    display: none;
  }
  body[data-screen="library"] #library-screen .library-topbar .eyebrow { display: none; }
  body[data-screen="library"] #library-screen .library-topbar h1 {
    margin: 0;
    font-size: 22px;
  }
  #library-total-badge {
    padding: 5px 8px;
    font-size: 8px;
  }
  .library-featured {
    min-height: 410px;
    margin-inline: -12px;
    border-inline: 0;
    border-radius: 0;
  }
  .library-featured__image {
    object-position: center 28%;
  }
  .library-featured__content {
    right: 17px;
    bottom: 18px;
    left: 17px;
  }
  .library-featured__eyebrow {
    margin-bottom: 7px;
    font-size: 9px;
  }
  .library-featured__title {
    max-width: 16ch;
    font-size: clamp(28px,8.5vw,38px);
  }
  .library-featured__meta {
    gap: 5px 10px;
    margin-top: 10px;
    font-size: 10px;
  }
  .library-featured__meta span:not(:last-child)::after {
    margin-left: 9px;
  }
  .library-featured__dots {
    gap: 6px;
    margin-top: 13px;
  }
  .library-featured__dots button {
    width: 11px;
    height: 5px;
  }
  .library-featured__dots button.active { width: 28px; }
  .library-featured__actions {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    width: 100%;
    margin-top: 15px;
  }
  .library-featured__button {
    min-height: 47px;
    padding-inline: 10px;
    font-size: 12px;
  }
  .library-featured-links {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 13px;
  }
  .library-feature-link {
    min-height: 70px;
    padding: 10px 12px;
    border-radius: 13px;
  }
  .library-feature-link__thumb {
    width: 68px;
  }
  .library-feature-link__flags {
    max-width: 102px;
    font-size: 16px;
  }
  .library-feature-link__copy strong { font-size: 12px; }
  .library-feature-link__copy small { font-size: 9px; }
  .library-popular {
    margin-top: 28px;
  }
  .library-section-heading h2,
  .library-explore-heading h2 {
    font-size: 17px;
  }
  .library-explore-heading {
    margin: 31px 0 12px;
  }
}

/* Estúdio 2026: vídeo, fala, timeline e ações formam uma única console. */
.studio-transcript { display: none; }

@media (min-width: 901px) {
  body[data-screen="studio"],
  body[data-screen="studio"] .app-content,
  body[data-screen="studio"] #studio-screen { height: 100dvh; overflow: hidden; }
  #studio-screen#studio-screen .studio-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100dvh;
    min-height: 0;
    padding: 8px 18px 10px;
    overflow: hidden;
  }
  #studio-screen#studio-screen .studio-topbar {
    flex: 0 0 52px;
    min-height: 52px;
    padding: 0 4px 8px;
  }
  #studio-screen#studio-screen .studio-scene-title > span { display: none; }
  #studio-screen#studio-screen .studio-scene-title h1 { font-size: 15px; }
  #studio-screen#studio-screen .studio-main {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0,1fr) minmax(320px,360px);
    grid-template-rows: minmax(0,1fr) 136px 54px;
    width: 100%;
    height: auto !important;
    min-height: 0;
    gap: 10px 18px;
    padding: 14px 0 0;
    overflow: hidden;
  }
  #studio-screen#studio-screen .studio-player {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: min(100%,900px);
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  #studio-screen#studio-screen .video-frame {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16/9;
    border: 1px solid #2d2d35;
    border-radius: 14px;
    background: #050507;
    box-shadow: 0 18px 46px rgba(0,0,0,.42);
  }
  #studio-screen#studio-screen .video-frame video { object-fit: cover; }
  #studio-screen#studio-screen .video-status { display: none; }
  #studio-screen#studio-screen .line-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100px;
    gap: 5px;
    padding: 12px 16px 4px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
    text-align: center;
  }
  #studio-screen#studio-screen .line-copy .line-progress {
    display: block;
    order: 1;
    padding: 0;
    color: #aaa5b7;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .09em;
  }
  #studio-screen#studio-screen .line-copy .line-speaker-classic {
    display: block;
    order: 2;
    padding: 0;
    color: #ff657e;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0;
  }
  #studio-screen#studio-screen .line-copy .line-copy-label { display: none; }
  #studio-screen#studio-screen .line-copy p {
    order: 3;
    margin: 0;
    color: #f7f4fa;
    font-size: clamp(20px,1.65vw,28px);
    font-weight: 850;
    line-height: 1.15;
    text-align: center;
  }
  #studio-screen#studio-screen .waveform-dock {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    width: min(100%,760px);
    height: 136px;
    min-height: 0;
  }
  #studio-screen#studio-screen .waveform-frame {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid #2e2d36;
    border-radius: 15px;
    background: #0d0d12;
    box-shadow: none;
  }
  #studio-screen#studio-screen .waveform-labels,
  #studio-screen#studio-screen .studio-hint { display: none; }
  #studio-screen#studio-screen .waveform-panel {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    background: #0d0d12 !important;
    box-shadow: none;
  }
  #studio-screen#studio-screen .record-panel {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 52px minmax(170px,205px) 92px 92px;
    justify-content: center;
    align-self: stretch !important;
    justify-self: center;
    width: min(100%,760px);
    height: 54px !important;
    min-height: 0;
    gap: 8px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
  }
  #studio-screen#studio-screen .record-panel-head,
  #studio-screen#studio-screen .mobile-flow-label,
  #studio-screen#studio-screen #play-take,
  #studio-screen#studio-screen #preview-progress,
  #studio-screen#studio-screen #reset-microphone,
  #studio-screen#studio-screen .mobile-studio-guide { display: none !important; }
  #studio-screen#studio-screen .record-primary-action,
  #studio-screen#studio-screen .record-secondary,
  #studio-screen#studio-screen .navigation-buttons { display: contents; }
  #studio-screen#studio-screen #previous-line { grid-column: 1; grid-row: 1; }
  #studio-screen#studio-screen #record-button { grid-column: 2; grid-row: 1; }
  #studio-screen#studio-screen #play-reference { grid-column: 3; grid-row: 1; }
  #studio-screen#studio-screen #next-line { grid-column: 4; grid-row: 1; }
  #studio-screen#studio-screen :is(#previous-line,#play-reference,#next-line) {
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    padding: 0 11px;
    border: 1px solid #30303a;
    border-radius: 11px;
    color: #f2eef6;
    background: #15151a;
    box-shadow: none;
    font-size: 12px;
  }
  #studio-screen#studio-screen #previous-line { padding: 0; }
  #studio-screen#studio-screen #next-line { justify-content: center; gap: 7px; }
  #studio-screen#studio-screen .record-button,
  #studio-screen#studio-screen .record-button:not(.recording):not(:disabled) {
    justify-content: center;
    width: 100%;
    height: 48px;
    min-height: 48px;
    gap: 9px;
    padding: 8px 16px;
    border: 1px solid #ff3157;
    border-radius: 999px;
    color: #ff6681;
    background: rgba(255,34,75,.035) !important;
    background-image: none !important;
    box-shadow: none;
    animation: none !important;
    text-align: center;
  }
  #studio-screen#studio-screen .record-button.recording {
    color: #fff;
    background: #e92b52 !important;
    box-shadow: 0 0 0 5px rgba(255,49,87,.1);
  }
  #studio-screen#studio-screen .record-button-icon {
    display: block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
  }
  #studio-screen#studio-screen .record-button-icon img,
  #studio-screen#studio-screen .record-button small { display: none; }
  #studio-screen#studio-screen .record-button strong { color: inherit; font-size: 13px; }

  #studio-screen#studio-screen .studio-transcript {
    grid-column: 2;
    grid-row: 1 / 4;
    display: flex;
    min-height: 0;
    margin: -14px -18px -10px 0;
    padding: 13px 13px 10px;
    overflow: hidden;
    border-left: 1px solid #292832;
    background: #101016;
    flex-direction: column;
  }
  .studio-transcript > header { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 0 10px; }
  .studio-transcript > header strong { font-size: 12px; text-transform: lowercase; }
  .studio-transcript > header span { color: #9e96b1; font-size: 10px; }
  .studio-transcript-progress { flex: 0 0 5px; height: 5px; margin: 3px 3px 12px; overflow: hidden; border-radius: 99px; background: #292832; }
  .studio-transcript-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff607d,#b777ff); transition: width .25s ease; }
  .studio-transcript-list { display: grid; min-height: 0; gap: 5px; overflow: hidden auto; scrollbar-width: thin; }
  .studio-transcript-line {
    display: grid;
    grid-template-columns: 26px minmax(0,1fr);
    gap: 9px;
    align-items: start;
    width: 100%;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-left: 3px solid #a66b84;
    border-radius: 10px;
    color: #ded9e6;
    background: #18181f;
    cursor: pointer;
    text-align: left;
  }
  .studio-transcript-line:hover { background: #202028; }
  .studio-transcript-line.current { border-color: #ff6b82; border-left-color: #ff6b82; background: #232229; }
  .studio-transcript-line.recorded .studio-transcript-number { color: #151319; background: #e5c3ef; }
  .studio-transcript-line.speaker-tone-1 { border-left-color: #8f70b7; }
  .studio-transcript-line.speaker-tone-2 { border-left-color: #5d93b0; }
  .studio-transcript-line.speaker-tone-3 { border-left-color: #a48961; }
  .studio-transcript-number { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: #9d96ad; background: #292933; font-size: 9px; font-weight: 800; }
  .studio-transcript-copy { display: grid; min-width: 0; gap: 3px; }
  .studio-transcript-heading { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
  .studio-transcript-heading strong { overflow: hidden; color: #ff6981; font-size: 9px; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
  .speaker-tone-1 .studio-transcript-heading strong { color: #c18aff; }
  .speaker-tone-2 .studio-transcript-heading strong { color: #78c8ee; }
  .speaker-tone-3 .studio-transcript-heading strong { color: #e5bd7f; }
  .studio-transcript-heading small { flex: 0 0 auto; color: #9e96b1; font-size: 9px; }
  .studio-transcript-caption { display: block; overflow: hidden; color: #aaa3b7; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 901px) and (max-height: 760px) {
  #studio-screen#studio-screen .studio-main { grid-template-rows: minmax(0,1fr) 104px 48px; gap-block: 7px; padding-top: 8px; }
  #studio-screen#studio-screen .studio-player { width: min(100%,720px); }
  #studio-screen#studio-screen .line-copy { min-height: 70px; padding-top: 7px; }
  #studio-screen#studio-screen .line-copy p { font-size: 19px; }
  #studio-screen#studio-screen .waveform-dock { height: 104px; width: min(100%,650px); }
  #studio-screen#studio-screen .record-panel { height: 48px !important; }
  #studio-screen#studio-screen :is(#previous-line,#play-reference,#next-line),
  #studio-screen#studio-screen .record-button,
  #studio-screen#studio-screen .record-button:not(.recording):not(:disabled) { height: 44px; min-height: 44px; }
}

@media (max-width: 900px) {
  #studio-screen#studio-screen .studio-transcript { display: none !important; }
}

@media (max-width: 600px) and (orientation: portrait) {
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-shell {
    display: flex;
    flex-direction: column;
    width: min(100%,430px);
    height: 100dvh;
    min-height: 0;
    gap: 8px;
    padding: max(7px,env(safe-area-inset-top)) 12px max(8px,env(safe-area-inset-bottom));
  }
  #studio-screen#studio-screen .studio-topbar { flex: 0 0 46px; height: 46px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-main {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto clamp(112px,16dvh,145px) 52px;
    align-content: start;
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 9px;
    padding: 0;
    overflow: hidden;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .studio-player {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    width: 100%;
    height: auto;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .video-frame {
    border: 1px solid #2c2c35;
    border-radius: 14px 14px 5px 5px;
    box-shadow: 0 12px 30px rgba(0,0,0,.36);
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .line-copy {
    min-height: 102px;
    gap: 4px;
    padding: 11px 8px 8px;
    border: 0;
    background: transparent !important;
  }
  #studio-screen#studio-screen .line-copy .line-progress { font-size: 8px; }
  #studio-screen#studio-screen .line-copy .line-speaker-classic { font-size: 14px; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .line-copy p {
    max-width: 92%;
    font-size: clamp(16px,4.7vw,20px);
    font-weight: 850;
    line-height: 1.18;
  }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .waveform-dock {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 1px solid #2e2e38;
    border-radius: 15px;
    background: #101015 !important;
  }
  #studio-screen#studio-screen .waveform-frame,
  #studio-screen#studio-screen .waveform-frame > .waveform-panel { width: 100%; height: 100%; border-radius: inherit; }
  #studio-screen#studio-screen:is(.studio-layout-classic,.studio-layout-immersive,[data-layout]) .record-panel {
    grid-column: 1;
    grid-row: 3;
    height: 52px;
    margin: 0;
  }
}