:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #071018; color: #e8f0f6; --panel:#0d1822; --panel2:#111f2b; --line:#223443; --muted:#8fa4b5; --accent:#27e0a3; --accent2:#65a7ff; --danger:#ff6b75; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100vh; background: radial-gradient(circle at 70% -10%, #153a3d 0, transparent 34%), #071018; }
button, input, select { font:inherit; }
button { color:inherit; }
a { color:inherit; }
.app { display:grid; grid-template-columns: 310px minmax(0,1fr); height:100vh; overflow:hidden; }
.course-sidebar { background:#09131c; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.course-sidebar__top { padding:20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.course-sidebar__top div { display:flex; flex-direction:column; gap:4px; }.course-sidebar small,.brand-compact small { color:var(--muted); }
.search-box { margin:14px; display:flex; align-items:center; gap:8px; background:#101e29; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:white; }
.module-list { overflow:auto; padding:0 10px 30px; }.module { border-bottom:1px solid #182733; }
.module__heading { width:100%; border:0; background:transparent; display:flex; justify-content:space-between; padding:14px 6px; text-align:left; cursor:pointer; }
.module__heading>span { display:flex; gap:10px; }.module__heading b { color:var(--accent); }.module__heading span span { display:flex; flex-direction:column; gap:3px; }.module__heading small { color:var(--muted); font-weight:400; }
.episode-list { display:grid; gap:4px; padding-bottom:12px; }.episode-link { border:0; background:transparent; display:grid; grid-template-columns:34px 1fr; gap:8px; padding:8px; border-radius:9px; text-align:left; cursor:pointer; }
.episode-link:hover { background:#122230; }.episode-link--active { background:#17362f; box-shadow:inset 3px 0 var(--accent); }.episode-link>span { color:var(--muted); font-size:12px; padding-top:2px; }.episode-link--done>span { color:var(--accent); }.episode-link div { min-width:0; display:flex; flex-direction:column; gap:3px; }.episode-link strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }.episode-link small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:11px; }
.workspace { min-width:0; display:grid; grid-template-rows:auto 3px minmax(0,1fr) auto auto; }
.topbar { min-height:66px; padding:10px 18px; display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--line); background:rgba(7,16,24,.88); backdrop-filter:blur(18px); z-index:3; }.brand-cluster { display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; }.brand-compact { display:flex; align-items:center; gap:10px; min-width:0; }.brand-compact>b,.splash__logo { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),#159071); color:#03261c; font-weight:900; flex:0 0 auto; }.brand-compact span { display:flex; flex-direction:column; }.media-tools-button { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; color:#c9d7e1; background:#13222d; text-decoration:none; transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s ease; }.media-tools-button:hover { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); background:#173129; transform:translateY(-1px); }.media-tools-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }.media-tools-button .icon,.media-tools-button svg { width:20px; height:20px; display:block; }
.view-tabs { display:flex; background:#0b1720; border:1px solid var(--line); padding:4px; border-radius:12px; }.view-tabs button { border:0; background:transparent; padding:9px 13px; border-radius:8px; display:flex; gap:7px; cursor:pointer; }.view-tabs button.active { background:#1b2c38; color:var(--accent); }.top-actions { display:flex; gap:8px; }.top-actions button { border:1px solid var(--line); background:#13222d; border-radius:9px; padding:9px 12px; display:flex; align-items:center; gap:7px; cursor:pointer; }
.global-progress { position:relative; background:#14222d; }.global-progress i { display:block; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); }.global-progress span { position:absolute; right:8px; top:5px; font-size:10px; color:var(--muted); }
.content-area { min-height:0; overflow:auto; padding:18px; }.cinema-panel,.lab-panel,.project-panel { max-width:1600px; margin:auto; }.cinema-panel__header,.lab-header,.project-panel>header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:16px; }.eyebrow { text-transform:uppercase; letter-spacing:.12em; color:var(--accent); font-size:11px; font-weight:800; }.cinema-panel h1,.lab-panel h1,.project-panel h1 { margin:5px 0 6px; font-size:clamp(22px,2.4vw,36px); }.cinema-panel p,.lab-panel p,.project-panel p { color:var(--muted); margin:0; }.episode-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:45%; }.episode-badges span { background:#13232e; border:1px solid var(--line); border-radius:999px; padding:6px 9px; font-size:11px; color:#bdd0dc; }
.cinema-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr); min-height:0; gap:14px; }.code-stage,.explanation-panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }.code-stage { min-height:520px; display:flex; flex-direction:column; }.code-stage__toolbar { padding:11px 14px; display:flex; align-items:center; justify-content:space-between; background:#101e28; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }.traffic { display:flex; gap:5px; }.traffic i { width:9px; height:9px; border-radius:50%; background:#ff646f; }.traffic i:nth-child(2){background:#ffc857}.traffic i:nth-child(3){background:#28d17c}.code-lines { overflow:auto; padding:12px 0; flex:1; font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }.code-line { width:100%; border:0; background:transparent; display:grid; grid-template-columns:54px 1fr; text-align:left; padding:3px 15px 3px 0; cursor:pointer; min-height:26px; }.code-line:hover { background:#132631; }.code-line--active { background:linear-gradient(90deg,rgba(39,224,163,.16),rgba(39,224,163,.03)); box-shadow:inset 3px 0 var(--accent); }.code-line__number { color:#597184; text-align:right; padding-right:14px; user-select:none; }.code-line code { white-space:pre-wrap; word-break:break-word; color:#dceaf3; }.code-line--hidden { opacity:.19; cursor:default; }.explanation-panel { padding:22px; overflow:auto; }.explanation-panel h2 { margin:6px 0 12px; }.explanation-lead { color:#d7e4ed!important; font-size:16px; line-height:1.6; }.explanation-panel dl { display:grid; gap:10px; }.explanation-panel dl div { background:#11212c; border:1px solid #203541; padding:12px; border-radius:10px; }.explanation-panel dt { color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }.explanation-panel dd { margin:5px 0 0; color:#c0d0db; font-size:13px; line-height:1.5; }.scene-story { border-top:1px solid var(--line); margin-top:18px; padding-top:15px; }.scene-story h3 { margin:0 0 7px; }.scene-story p { line-height:1.55; }
.playback-bar { display:grid; grid-template-columns:auto auto auto minmax(120px,1fr) auto; gap:10px; align-items:center; margin-top:13px; background:#0d1922; border:1px solid var(--line); border-radius:12px; padding:10px; }.play-button,.primary-button { border:0; background:var(--accent); color:#04241a; border-radius:9px; padding:10px 14px; font-weight:800; cursor:pointer; }.icon-button { width:38px; height:38px; border:1px solid var(--line); background:#13232e; border-radius:9px; cursor:pointer; }.playback-bar input { accent-color:var(--accent); }.playback-bar label,.lab-header label { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:7px; }.playback-bar select,.lab-header select { background:#13232e; color:white; border:1px solid var(--line); padding:7px; border-radius:7px; }
.media-dock { display:flex; justify-content:center; gap:8px; padding:8px 18px; border-top:1px solid var(--line); background:#09141d; overflow:auto; }.media-dock button { min-width:105px; border:1px solid var(--line); background:#11212c; border-radius:10px; padding:8px 12px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }.media-dock button:hover { border-color:var(--accent); }.media-dock .is-pending { opacity:.67; }.episode-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:9px 18px; border-top:1px solid var(--line); background:#08121a; }.episode-footer button { border:0; background:transparent; color:var(--accent); cursor:pointer; }.episode-footer button:disabled { color:#47606f; }.episode-footer div { text-align:center; display:flex; flex-direction:column; }.episode-footer span { color:var(--muted); font-size:11px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.75); display:grid; place-items:center; padding:18px; z-index:20; }.modal { width:min(720px,100%); max-height:90vh; overflow:hidden; background:#0d1922; border:1px solid #29404f; border-radius:16px; box-shadow:0 30px 90px #000; }.modal--wide { width:min(1000px,100%); }.modal__header { display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); }.modal__header h2 { margin:0; }.modal__body { padding:20px; overflow:auto; max-height:calc(90vh - 70px); }.resource-placeholder { text-align:center; padding:50px 20px; background:#101f2a; border:1px dashed #365161; border-radius:12px; }.resource-placeholder p { color:var(--muted); }.embed-frame iframe { width:100%; aspect-ratio:16/9; border:0; }.audio-player { width:100%; }.slides-panel article { min-height:340px; border-radius:13px; padding:40px; background:radial-gradient(circle at 90% 0,#1f6155,transparent 40%),#101d27; display:flex; flex-direction:column; justify-content:center; }.slides-panel article h3 { font-size:32px; margin:10px 0; }.slides-panel article p { color:#bfd0db; font-size:18px; line-height:1.6; }.slides-panel footer { display:flex; justify-content:space-between; margin-top:12px; }.slides-panel button,.quiz-panel button { padding:10px 16px; border-radius:8px; border:1px solid var(--line); background:#172936; color:white; }.quiz-panel { display:grid; gap:16px; }.quiz-panel fieldset { border:1px solid var(--line); border-radius:11px; padding:16px; }.quiz-panel label { display:block; padding:7px; }.quiz-panel input { margin-right:8px; accent-color:var(--accent); }.answer-good { color:var(--accent); }.answer-bad { color:#ff9ba3; }.flashcard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }.flashcard { min-height:180px; border:1px solid var(--line); background:#12232e; border-radius:12px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; }.flashcard--flipped { background:#16382f; }.flashcard span { font-size:18px; line-height:1.5; }.flashcard small { color:var(--muted); }.source-list { display:grid; gap:10px; }.source-list a { text-decoration:none; border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:5px; }.source-list a:hover { border-color:var(--accent); }.source-list span,.source-list small { color:var(--muted); }.campaign-card img { width:100%; max-height:240px; object-fit:cover; border-radius:12px; background:#0b2b24; }.campaign-card p,.campaign-card small { color:var(--muted); line-height:1.6; }.donate-button { display:flex; justify-content:center; align-items:center; gap:8px; background:#ffc439; color:#172b4d; text-decoration:none; padding:13px; border-radius:10px; font-weight:900; margin:15px 0; }
.lab-header label { flex-direction:column; align-items:flex-start; }.sp-stack { min-height:0; }.project-panel { max-width:1200px; }.file-map { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }.file-map button { text-align:left; border:1px solid var(--line); background:#0f1d27; border-radius:11px; padding:13px; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:8px; }.file-map button:hover { border-color:var(--accent); }.file-map div { min-width:0; display:flex; flex-direction:column; gap:4px; }.file-map strong { overflow:hidden; text-overflow:ellipsis; }.file-map small { color:var(--muted); }.file-map>button>span { color:var(--accent); }.file-map i { grid-column:1/-1; height:4px; background:#22343f; border-radius:4px; overflow:hidden; }.file-map i b { display:block; height:100%; background:var(--accent); }.splash,.fatal { min-height:100vh; display:grid; place-content:center; text-align:center; padding:30px; }.splash__logo { margin:auto; width:70px; height:70px; font-size:30px; }.splash p,.fatal p { color:var(--muted); }.mobile-only { display:none; }
@media (max-width:1050px) { .app { grid-template-columns:1fr; }.course-sidebar { position:fixed; z-index:15; inset:0 auto 0 0; width:min(340px,88vw); transform:translateX(-105%); transition:.2s; box-shadow:20px 0 50px #000; }.course-sidebar--open { transform:translateX(0); }.mobile-only { display:inline-grid; place-items:center; }.brand-compact span { display:none; }.topbar { gap:10px; }.top-actions span { display:none; }.cinema-grid { grid-template-columns:1fr; }.explanation-panel { max-height:none; }.episode-badges { max-width:100%; }.cinema-panel__header,.lab-header { flex-direction:column; }.view-tabs button { padding:9px; }.view-tabs button .icon+* { display:none; } }
@media (max-width:650px) { .topbar { padding:8px; }.view-tabs { margin-left:auto; }.view-tabs button { font-size:0; }.view-tabs .icon { font-size:15px; }.content-area { padding:10px; }.cinema-panel__header { margin-bottom:10px; }.episode-badges { justify-content:flex-start; }.code-stage { min-height:380px; }.playback-bar { grid-template-columns:auto 1fr auto; }.playback-bar input { grid-column:1/-1; }.playback-bar label { grid-column:1/-1; justify-content:center; }.media-dock { justify-content:flex-start; }.media-dock button { min-width:56px; }.media-dock button span { display:none; }.episode-footer div { max-width:55%; }.episode-footer span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.slides-panel article { padding:22px; }.slides-panel article h3 { font-size:24px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

.hidden{display:none!important}.top-actions a{border:1px solid var(--line);background:#13222d;border-radius:9px;padding:9px 12px;display:flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none}.lab-runtime-tabs{display:flex;gap:8px;margin-bottom:10px}.lab-runtime-tabs button{border:1px solid var(--line);background:#13232e;border-radius:9px;padding:9px 13px;cursor:pointer}.lab-runtime-tabs button.active{border-color:var(--accent);color:var(--accent)}.notes-area{width:100%;min-height:110px;background:#0b1720;border:1px solid var(--line);color:white;border-radius:9px;padding:10px}.course-sidebar__overlay{display:none}@media(max-width:1050px){.course-sidebar__overlay{display:block;position:fixed;inset:0;background:#0009;z-index:14}.course-sidebar__overlay.hidden{display:none}}

/* MAOBITS_CHANGE_02_SCROLL_VISIBLE_START */
/*
 * Mantiene el panel lateral dentro del alto real de la ventana.
 * El listado es el único bloque que crece y se desplaza; la cabecera y el
 * buscador permanecen visibles sin depender del zoom del navegador.
 */
html,
body,
#root {
  width: 100%;
  height: 100%;
  min-height: 0;
}

html,
body {
  overflow: hidden;
}

body {
  min-height: 0;
}

.app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
}

.workspace {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.course-sidebar {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.course-sidebar__top,
.search-box {
  flex: 0 0 auto;
}

.module-list {
  flex: 1 1 0;
  min-height: 0;
  height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #71808b #243039;
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}

.module-list::-webkit-scrollbar {
  width: 12px;
}

.module-list::-webkit-scrollbar-track {
  background: #243039;
}

.module-list::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 3px solid #243039;
  border-radius: 999px;
  background: #71808b;
}

.module-list::-webkit-scrollbar-thumb:hover {
  background: #91a0aa;
}

@media (max-width: 1050px) {
  .course-sidebar {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }
}

@supports not (height: 100dvh) {
  .app,
  .course-sidebar {
    height: 100vh;
    max-height: 100vh;
  }
}
/* MAOBITS_CHANGE_02_SCROLL_VISIBLE_END */

/* MAOBITS_CHANGE_03_DOCKABLE_SIDEBAR_START */
/* Desktop: collapse the navigation rail and give all available width to content. */
.app {
  transition: grid-template-columns .22s ease;
}

.course-sidebar {
  min-width: 0;
  transition: transform .22s ease, opacity .16s ease, border-color .22s ease;
}

.course-sidebar__top {
  gap: 12px;
}

.course-sidebar__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.sidebar-dock-button,
.sidebar-reopen-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #13222d;
  color: #c9d7e1;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

.sidebar-dock-button:hover,
.sidebar-reopen-button:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: #173129;
}

.sidebar-dock-button:focus-visible,
.sidebar-reopen-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sidebar-dock-button .icon,
.sidebar-dock-button svg,
.sidebar-reopen-button .icon,
.sidebar-reopen-button svg {
  width: 20px;
  height: 20px;
  display: block;
}

.sidebar-reopen-button {
  display: none;
}

@media (min-width: 1051px) {
  .app--sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .app--sidebar-collapsed .course-sidebar {
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-right-color: transparent;
  }

  .app--sidebar-collapsed .sidebar-reopen-button {
    display: inline-grid;
  }
}

@media (max-width: 1050px) {
  .sidebar-dock-button,
  .sidebar-reopen-button {
    display: none !important;
  }
}
/* MAOBITS_CHANGE_03_DOCKABLE_SIDEBAR_END */

/* MAOBITS_CHANGE_04_TOOLS_MULTIMEDIA_START */
.media-tools-button {
  padding: 0;
  cursor: pointer;
}

.media-tools-button.is-active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: #173129;
  box-shadow: inset 0 0 0 1px rgba(39, 224, 163, .12);
}

.media-tools-button[aria-expanded="false"] {
  color: #9cb0bf;
  background: #101d27;
}

.media-tools-button[aria-expanded="false"]:hover {
  color: var(--accent);
}
/* MAOBITS_CHANGE_04_TOOLS_MULTIMEDIA_END */

/* MAOBITS_CHANGE_05_MEDIA_ICON_TOGGLE_START */
/* Estado cerrado: comunica que la barra inferior puede restaurarse. */
.media-tools-button.is-collapsed {
  color: #c7d6df;
  border-color: #314756;
  background: #101d27;
  box-shadow: none;
}

.media-tools-button.is-collapsed:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: #173129;
}

.media-tools-button.is-collapsed .icon {
  transform: translateY(-1px);
}

/* Al no renderizarse #media-dock no queda borde, hueco ni contenedor residual. */
.workspace:not(:has(#media-dock)) .content-area {
  border-bottom: 0;
}
/* MAOBITS_CHANGE_05_MEDIA_ICON_TOGGLE_END */

/* MAOBITS_CHANGE_06_MEDIA_TOGGLE_DEFINITIVE_START */
.brand-cluster {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
}

.brand-cluster .brand-compact {
  margin-right: 0;
  min-width: 0;
}

.media-tools-button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #c9d7e1;
  background: #13222d;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

.media-tools-button:hover,
.media-tools-button:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: #173129;
}

.media-tools-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.media-tools-button.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: #173129;
  box-shadow: inset 0 0 0 1px rgba(39, 224, 163, .12);
}

.media-tools-button.is-collapsed {
  color: #c7d6df;
  border-color: #314756;
  background: #101d27;
  box-shadow: none;
}

.media-tools-button .icon,
.media-tools-button svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* La barra no usa visibility, opacity ni altura cero: cuando se oculta no existe en el DOM. */
/* MAOBITS_CHANGE_06_MEDIA_TOGGLE_DEFINITIVE_END */


/* MAOBITS_CHANGE_06_PLAYBACK_FOOTER_START */
.episode-footer--playback { padding: 12px 18px; border-top: 1px solid var(--line); background: #08121a; }
.episode-footer--playback .playback-bar { margin-top: 0; }
.episode-footer--playback button.icon-button { width: 56px; height: 56px; border: 1px solid var(--line); background: #13232e; color: #f3f7fb; border-radius: 14px; cursor: pointer; }
.episode-footer--playback button.play-button { border: 0; background: var(--accent); color: #04241a; border-radius: 16px; padding: 16px 24px; font-weight: 800; cursor: pointer; font-size: clamp(15px, 1.35vw, 20px); }
.episode-footer--playback button:disabled { opacity: .45; cursor: not-allowed; }
.episode-footer--playback label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; }
.episode-footer--playback select { background: #13232e; color: white; border: 1px solid var(--line); padding: 7px 12px; border-radius: 10px; }
@media (max-width: 1100px) {
  .episode-footer--playback .playback-bar { grid-template-columns: auto 1fr auto; }
  .episode-footer--playback .playback-bar input { grid-column: 1 / -1; }
  .episode-footer--playback .playback-bar label { justify-self: end; }
}
@media (max-width: 720px) {
  .episode-footer--playback { padding: 10px 12px; }
  .episode-footer--playback .playback-bar { grid-template-columns: 1fr; }
  .episode-footer--playback button.icon-button,
  .episode-footer--playback button.play-button,
  .episode-footer--playback label,
  .episode-footer--playback input { width: 100%; }
  .episode-footer--playback label { justify-content: space-between; }
}
/* MAOBITS_CHANGE_06_PLAYBACK_FOOTER_END */


/* MAOBITS_CHANGE_07_THIN_PLAYBACK_BAR_START */
.episode-footer--thin {
  padding: 6px 12px;
  border-top: 1px solid var(--line);
  background: #08121a;
}
.episode-footer--thin .playback-bar--thin {
  display: grid;
  grid-template-columns: auto auto auto minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 0;
  padding: 6px 8px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d1922;
}
.episode-footer--thin .icon-button--thin {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #13232e;
  color: #f3f7fb;
  cursor: pointer;
}
.episode-footer--thin .play-button--thin {
  border: 0;
  background: var(--accent);
  color: #04241a;
  border-radius: 12px;
  padding: 10px 16px;
  min-height: 40px;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.episode-footer--thin input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: var(--accent);
}
.episode-footer--thin .speed-control--thin {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.episode-footer--thin .speed-control--thin select {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #13232e;
  color: #fff;
}
.episode-footer--thin button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 980px) {
  .episode-footer--thin .playback-bar--thin {
    grid-template-columns: auto auto auto minmax(100px, 1fr);
  }
  .episode-footer--thin .speed-control--thin {
    grid-column: 1 / -1;
    justify-self: end;
  }
}
@media (max-width: 720px) {
  .episode-footer--thin {
    padding: 6px 8px;
  }
  .episode-footer--thin .playback-bar--thin {
    grid-template-columns: auto auto auto;
    gap: 6px;
  }
  .episode-footer--thin .play-button--thin {
    padding: 10px 12px;
    font-size: 13px;
  }
  .episode-footer--thin input[type="range"] {
    grid-column: 1 / -1;
  }
  .episode-footer--thin .speed-control--thin {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: space-between;
  }
}
/* MAOBITS_CHANGE_07_THIN_PLAYBACK_BAR_END */

/* MAOBITS_CHANGE_11_MEDIA_RIGHT_DEFINITIVE_START */
.workspace {
  grid-template-rows: auto 3px minmax(0, 1fr) auto;
}

.episode-footer--dock-right {
  display: block;
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: #08121a;
}

.episode-footer--dock-right > .bottom-toolbar {
  display: grid !important;
  flex-direction: row !important;
  grid-template-columns: minmax(560px, 56%) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: none !important;
  text-align: left;
}

.episode-footer--dock-right > .bottom-toolbar--media-hidden {
  grid-template-columns: minmax(0, 900px);
}

.episode-footer--dock-right .playback-bar--thin {
  display: grid !important;
  flex-direction: row !important;
  grid-template-columns: auto auto auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: none !important;
  margin: 0;
  padding: 6px 8px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0d1922;
  text-align: left;
}

.episode-footer--dock-right .media-panel-right {
  display: block !important;
  flex: none !important;
  flex-direction: row !important;
  width: 100%;
  min-width: 0;
  max-width: none !important;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0d1922;
  text-align: left;
}

.episode-footer--dock-right .media-panel-right__scroller {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: none !important;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: #3d5566 #0d1922;
  overscroll-behavior-inline: contain;
}

.episode-footer--dock-right .media-panel-right__scroller::-webkit-scrollbar {
  height: 8px;
}

.episode-footer--dock-right .media-panel-right__scroller::-webkit-scrollbar-track {
  background: #0d1922;
}

.episode-footer--dock-right .media-panel-right__scroller::-webkit-scrollbar-thumb {
  background: #3d5566;
  border-radius: 999px;
}

.episode-footer--dock-right .media-panel-right__scroller button {
  flex: 0 0 auto;
  min-width: 148px;
  border: 1px solid var(--line);
  background: #11212c;
  border-radius: 14px;
  padding: 11px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
}

.episode-footer--dock-right .media-panel-right__scroller button:hover {
  border-color: var(--accent);
}

.episode-footer--dock-right .media-panel-right__scroller .is-pending {
  opacity: .67;
}

.episode-footer--dock-right .icon-button--thin {
  width: 52px;
  min-width: 52px;
  height: 42px;
  min-height: 42px;
}

.episode-footer--dock-right .icon-button--thin .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px) scaleX(1.12);
}

.episode-footer--dock-right .play-button--thin {
  min-height: 42px;
  padding: 10px 16px;
  white-space: nowrap;
}

.episode-footer--dock-right input[type="range"] {
  width: 100%;
  min-width: 0;
}

.episode-footer--dock-right .speed-control--thin {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  max-width: none !important;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .episode-footer--dock-right > .bottom-toolbar {
    grid-template-columns: minmax(520px, 60%) minmax(0, 1fr);
  }

  .episode-footer--dock-right .media-panel-right__scroller button {
    min-width: 138px;
  }
}

@media (max-width: 900px) {
  .episode-footer--dock-right > .bottom-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .episode-footer--dock-right {
    padding: 6px 8px;
  }

  .episode-footer--dock-right .playback-bar--thin {
    grid-template-columns: auto auto auto;
  }

  .episode-footer--dock-right input[type="range"] {
    grid-column: 1 / -1;
  }

  .episode-footer--dock-right .speed-control--thin {
    grid-column: 1 / -1;
    justify-content: space-between;
  }
}
/* MAOBITS_CHANGE_11_MEDIA_RIGHT_DEFINITIVE_END */

/* MAOBITS_CHANGE_12_PANELS_SCROLL_DOCK_START */
.content-area--cinema {
  overflow: hidden;
}

.cinema-panel {
  max-width: 1600px;
  margin: 0 auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cinema-panel__header {
  flex: 0 0 auto;
}

.cinema-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .78fr);
  gap: 14px;
  align-items: stretch;
}

.cinema-grid--code {
  grid-template-columns: minmax(0, 1fr);
}

.cinema-grid--code .explanation-panel {
  display: none;
}

.cinema-grid--comment {
  grid-template-columns: minmax(0, 1fr);
}

.cinema-grid--comment .code-stage {
  display: none;
}

.code-stage,
.explanation-panel {
  min-height: 0;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.code-stage {
  display: flex;
  flex-direction: column;
}

.code-stage__toolbar {
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #101e28;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.code-stage__toolbar-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.panel-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.panel-toolbar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.panel-dock-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #13222d;
  color: #c9d7e1;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}

.panel-dock-toggle:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: #173129;
  transform: translateY(-1px);
}

.panel-dock-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.panel-dock-toggle .icon,
.panel-dock-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.code-lines {
  overflow: auto;
  min-height: 0;
  padding: 12px 0;
  flex: 1 1 auto;
  overscroll-behavior: contain;
}

.explanation-panel {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.explanation-panel__toolbar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #101e28;
}

.explanation-panel__toolbar-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.explanation-panel__toolbar-copy strong {
  font-size: 12px;
  color: #dbe7ef;
}

.explanation-panel__body {
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding: 22px;
  overscroll-behavior: contain;
}

.explanation-panel__body h2 {
  margin: 6px 0 12px;
}

.cinema-grid--code .code-stage,
.cinema-grid--comment .explanation-panel {
  box-shadow: 0 0 0 1px rgba(39,224,163,.08), 0 14px 30px rgba(0,0,0,.18);
}

@media (max-width: 980px) {
  .cinema-grid {
    grid-template-columns: 1fr;
  }

  .code-stage,
  .explanation-panel {
    min-height: 320px;
  }
}

@media (max-width: 720px) {
  .code-stage__toolbar,
  .explanation-panel__toolbar {
    padding: 11px 12px;
  }

  .code-stage__toolbar {
    flex-wrap: wrap;
  }

  .code-stage__toolbar-main {
    width: 100%;
    justify-content: space-between;
  }

  .panel-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .explanation-panel__body {
    padding: 16px;
  }
}
/* MAOBITS_CHANGE_12_PANELS_SCROLL_DOCK_END */

/* MAOBITS_CHANGE_13_DETAIL_MODAL_START */
.detail-trigger {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #13222d;
  color: #c9d7e1;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.detail-trigger:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: #173129;
  transform: translateY(-1px);
}
.detail-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.detail-trigger .icon,
.detail-trigger svg {
  width: 18px;
  height: 18px;
  display: block;
}
.modal__body--details {
  padding: 24px;
}
.episode-detail-sheet {
  display: grid;
  gap: 16px;
}
.episode-detail-sheet__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px;
  background: radial-gradient(circle at top right, rgba(39,224,163,.13), transparent 34%), #0f1b24;
  border: 1px solid #1f3440;
  border-radius: 14px;
}
.episode-detail-sheet__hero h3 {
  margin: 6px 0 8px;
  font-size: clamp(24px, 2.3vw, 42px);
}
.episode-detail-sheet__hero p {
  margin: 0;
  color: #d2dde5;
  line-height: 1.55;
  font-size: 16px;
}
.episode-detail-badges {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 8px;
  max-width: 240px;
}
.episode-detail-badges span {
  background: #13232e;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  color: #bdd0dc;
}
.episode-detail-section {
  padding: 18px;
  background: #101d27;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.episode-detail-section h4 {
  margin: 0 0 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.episode-detail-section p {
  margin: 0;
  color: #d5e1ea;
  line-height: 1.68;
}
@media (max-width: 820px) {
  .episode-detail-sheet__hero {
    grid-template-columns: 1fr;
  }
  .episode-detail-badges {
    justify-content: flex-start;
    max-width: none;
  }
}
/* MAOBITS_CHANGE_13_DETAIL_MODAL_END */

/* MAOBITS_CHANGE_14_CUMULATIVE_CODE_START */
.code-lines {
  scroll-behavior: smooth;
}

.code-line[data-absolute-line] {
  position: relative;
}

.code-line[data-absolute-line]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.code-line--active {
  scroll-margin-block: 45%;
}
/* MAOBITS_CHANGE_14_CUMULATIVE_CODE_END */

/* MAOBITS_CHANGE_15_SYNTAX_HIGHLIGHT_START */
.code-line code {
  color: #dceaf3;
  tab-size: 2;
}

.syntax-token {
  font: inherit;
}

.syntax-comment {
  color: #7d8c98;
  font-style: italic;
}

.syntax-doctype,
.syntax-keyword {
  color: #ff7b9c;
}

.syntax-tag,
.syntax-heading {
  color: #ff8f70;
}

.syntax-attribute,
.syntax-property,
.syntax-key {
  color: #79c0ff;
}

.syntax-string,
.syntax-link {
  color: #a5d6a7;
}

.syntax-number,
.syntax-color,
.syntax-literal {
  color: #d2a8ff;
}

.syntax-operator,
.syntax-punctuation {
  color: #b9c7d3;
}

.syntax-entity,
.syntax-variable,
.syntax-decorator {
  color: #f2cc60;
}

.syntax-code,
.syntax-strong,
.syntax-quote {
  color: #56d4b3;
}

.code-line--active .syntax-token {
  filter: saturate(1.08) brightness(1.08);
}

@media (prefers-contrast: more) {
  .syntax-comment {
    color: #a8b3bd;
  }

  .syntax-string,
  .syntax-link {
    color: #b8f1bb;
  }

  .syntax-keyword,
  .syntax-doctype {
    color: #ff9cb5;
  }
}
/* MAOBITS_CHANGE_15_SYNTAX_HIGHLIGHT_END */

.sandpack-frame {
  width: 100%;
  height: 76vh;
  min-height: 680px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0a131b;
}

/* MAOBITS_CHANGE_16_SANDPACK_IDE_START */
.sandpack-frame {
  width: 100%;
  height: 76vh;
  min-height: 680px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #0a131b;
}

.local-preview {
  width: 100%;
  height: 76vh;
  min-height: 680px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
}
/* MAOBITS_CHANGE_16_SANDPACK_IDE_END */


/* MAOBITS_CHANGE_17_SYNCED_LAB_START */
.lab-panel--synced {
  max-width: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.lab-panel--synced .lab-header {
  margin-bottom: 10px;
}
.lab-panel--synced .lab-header code {
  color: var(--accent);
}
.synced-lab-frame {
  width: 100%;
  height: 100%;
  min-height: 700px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #071018;
}
@media (max-width: 900px) {
  .synced-lab-frame { min-height: 900px; }
}
/* MAOBITS_CHANGE_17_SYNCED_LAB_END */

/* MAOBITS_CHANGE_19_LAB_FULLSCREEN_DOCK_START */
.content-area:has(.lab-panel--synced) {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.lab-panel--synced {
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.lab-runtime-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.lab-runtime-tabs__views,
.lab-runtime-tabs__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lab-runtime-tabs__views {
  overflow-x: auto;
  scrollbar-width: thin;
}

.lab-runtime-tabs button {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #11232e;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.lab-runtime-tabs button:hover,
.lab-runtime-tabs button.active {
  border-color: var(--accent);
  color: var(--accent);
}

.lab-presentation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lab-presentation-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.app--lab-focus {
  grid-template-columns: minmax(0, 1fr) !important;
}

.app--lab-focus > .course-sidebar,
.app--lab-focus > .course-sidebar__overlay,
.app--lab-focus .topbar,
.app--lab-focus .global-progress {
  display: none !important;
}

.app--lab-focus .workspace {
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.app--lab-focus .content-area {
  padding: 8px;
  overflow: hidden;
}

.lab-panel--focused {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  grid-template-rows: auto minmax(0, 1fr);
}

.lab-panel--focused .lab-header {
  display: none;
}

.lab-panel--focused .lab-runtime-tabs {
  margin: 0 0 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d1922;
}

.lab-panel--focused .synced-lab-frame,
.lab-panel--focused .local-preview {
  height: 100%;
  min-height: 0;
  border-radius: 12px;
}

.lab-panel--synced:fullscreen,
.lab-panel--synced.lab-panel--fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0;
  padding: 8px;
  grid-template-rows: auto minmax(0, 1fr);
  background: #071018;
}

.lab-panel--synced:fullscreen .lab-header,
.lab-panel--synced.lab-panel--fullscreen .lab-header {
  display: none;
}

.lab-panel--synced:fullscreen .lab-runtime-tabs,
.lab-panel--synced.lab-panel--fullscreen .lab-runtime-tabs {
  margin: 0 0 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0d1922;
}

.lab-panel--synced:fullscreen .synced-lab-frame,
.lab-panel--synced:fullscreen .local-preview,
.lab-panel--synced.lab-panel--fullscreen .synced-lab-frame,
.lab-panel--synced.lab-panel--fullscreen .local-preview {
  height: 100%;
  min-height: 0;
  border-radius: 12px;
}

@media (max-width: 850px) {
  .lab-runtime-tabs {
    align-items: stretch;
    flex-direction: column;
  }

  .lab-runtime-tabs__views,
  .lab-runtime-tabs__actions {
    width: 100%;
    overflow-x: auto;
  }

  .lab-runtime-tabs__actions {
    justify-content: flex-end;
  }

  .lab-presentation-button span {
    display: none;
  }
}
/* MAOBITS_CHANGE_19_LAB_FULLSCREEN_DOCK_END */

/* MAOBITS_CHANGE_22_CINEMA_CODE_ZOOM_START */
.code-stage {
  --cinema-code-zoom: 1;
}

.cinema-code-zoom {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #13222d;
}

.cinema-code-zoom button {
  min-width: 34px;
  height: 36px;
  padding: 0 9px;
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #c9d7e1;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    color .16s ease,
    background .16s ease;
}

.cinema-code-zoom button:last-child {
  border-right: 0;
}

.cinema-code-zoom button:hover:not(:disabled),
.cinema-code-zoom button:focus-visible {
  color: var(--accent);
  background: #173129;
}

.cinema-code-zoom button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.cinema-code-zoom button:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.cinema-code-zoom__value {
  min-width: 56px !important;
  color: var(--accent) !important;
  font-size: 11px !important;
}

.code-stage .code-lines {
  font-size: calc(14px * var(--cinema-code-zoom));
}

.code-stage .code-line {
  grid-template-columns:
    calc(54px * var(--cinema-code-zoom))
    minmax(0, 1fr);
  min-height: calc(26px * var(--cinema-code-zoom));
  padding-top: calc(3px * var(--cinema-code-zoom));
  padding-bottom: calc(3px * var(--cinema-code-zoom));
}

.code-stage .code-line__number,
.code-stage .code-line code,
.code-stage .syntax-token {
  font-size: inherit;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .panel-toolbar-actions {
    gap: 7px;
  }

  .cinema-code-zoom button {
    min-width: 31px;
    height: 34px;
    padding: 0 7px;
  }

  .cinema-code-zoom__value {
    min-width: 50px !important;
  }

  .panel-toolbar-label {
    display: none;
  }
}
/* MAOBITS_CHANGE_22_CINEMA_CODE_ZOOM_END */

/* MAOBITS_CHANGE_23_COPY_CODE_START */
.code-copy-button,
.editor-copy-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #13222d;
  color: #c9d7e1;
  cursor: pointer;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.code-copy-button:hover,
.code-copy-button:focus-visible,
.editor-copy-button:hover,
.editor-copy-button:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  background: #173129;
  transform: translateY(-1px);
}

.code-copy-button:focus-visible,
.editor-copy-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.code-copy-button.is-copied,
.editor-copy-button.is-copied {
  color: #062a20;
  border-color: var(--accent);
  background: var(--accent);
}

.code-copy-button.is-error,
.editor-copy-button.is-error {
  color: #fff;
  border-color: #ff8e9a;
  background: #6d2631;
}

.code-copy-button .icon,
.code-copy-button svg,
.editor-copy-button .icon,
.editor-copy-button svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* MAOBITS_CHANGE_23_COPY_CODE_END */