/* DNAinvent: el color pertenece a las bases. Todo lo demás es tinta y gris. */

:root {
  --bg: #E8EDEF;
  --surface: #F8FAFB;
  --ink: #16232D;
  --muted: #566874;
  --line: #C7D1D6;
  --focus: #2B62C2;
  --mark: #E6DDF6;           /* sustituciones y coincidencias resaltadas */

  /* Las bases: A, C, G y T con los mismos colores que en la consola; U (ARN) en morado. */
  --a: #A8730A;  --a-bg: #F5E6C3;
  --c: #2B62C2;  --c-bg: #DBE5F7;
  --g: #237D52;  --g-bg: #D5ECDF;
  --t: #BC3A30;  --t-bg: #F5D9D5;
  --u: #7B4CC0;  --u-bg: #E9DFF8;    /* uracilo: solo en el ARN */

  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --radius: 6px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131E26;
    --surface: #1A2833;
    --ink: #E2E9ED;
    --muted: #9AABB5;
    --line: #2F414D;
    --focus: #7EA6F0;
    --mark: #3E3459;
    --a: #E8B54C;  --a-bg: #3B311D;
    --c: #7EA6F0;  --c-bg: #1F3152;
    --g: #62C792;  --g-bg: #1B3A2B;
    --t: #F0827A;  --t-bg: #46241F;
    --u: #B99AF2;  --u-bg: #33284D;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- Cabecera ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 0.35rem; color: inherit; text-decoration: none; }
.wordmark { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; }
.logo { display: block; width: 44px; height: 44px; margin: -6px -8px -6px -10px; }

.tagline { margin: 0; color: var(--muted); }

.lang { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }

/* ---------- Distribución ---------- */

.layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  max-width: 78rem;
  margin: 0 auto;
}

.toolnav {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 1.75rem 1rem 2rem clamp(1rem, 3vw, 2rem);
}

.toolnav h2 {
  margin: 1.4rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
}
.toolnav h2:first-child { margin-top: 0; }

.toolnav ul { list-style: none; margin: 0; padding: 0; }

.toolnav button {
  display: block;
  width: 100%;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-left: 3px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.toolnav button:hover { border-left-color: var(--line); }
.toolnav button[aria-current="page"] { border-left-color: var(--ink); font-weight: 700; }

.panel {
  min-height: 100vh;
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
  background: var(--surface);
  border-left: 1px solid var(--line);
}
.panel:focus { outline: none; }

.panel > h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.about { margin: 0 0 1.75rem; max-width: 62ch; color: var(--muted); font-size: 1.05rem; }

/* ---------- Formularios ---------- */

form { display: grid; gap: 1rem; max-width: 46rem; }

.field { display: grid; gap: 0.3rem; }
.field > span { font-weight: 700; }
.row { display: flex; flex-wrap: wrap; gap: 1rem; }
.row .field { flex: 1 1 10rem; }
.row .field.num { flex: 0 1 13rem; }

textarea, input, select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
textarea { min-height: 5.5rem; resize: vertical; font-family: var(--mono); font-size: 0.95rem; line-height: 1.5; }
input.seq { font-family: var(--mono); }
.lang select { width: auto; padding: 0.3rem 0.5rem; }

fieldset { margin: 0; padding: 0.75rem 1rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
legend { padding: 0 0.3rem; font-weight: 700; }

.choice { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.35rem 0; cursor: pointer; }
.choice input { width: auto; margin-top: 0.3rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

button.primary, button.secondary {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
button.primary { border: 1px solid var(--ink); background: var(--ink); color: var(--surface); }
button.secondary { border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 400; }
button.secondary:hover { border-color: var(--muted); }
button:disabled { opacity: 0.55; cursor: progress; }

.error {
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--t);
  background: var(--t-bg);
  max-width: 46rem;
}
.note { margin: 0.75rem 0; color: var(--muted); max-width: 62ch; }
.warn { margin: 0.75rem 0; padding-left: 0.8rem; border-left: 3px solid var(--a); max-width: 62ch; }

/* ---------- Resultados ---------- */

.result { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.result:empty { display: none; }
.result h2, .result h3 { margin: 1.75rem 0 0.6rem; font-size: 1.15rem; }
.result > :first-child { margin-top: 0; }

.reveal { animation: reveal 0.35s ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

.stats { display: grid; grid-template-columns: max-content auto; gap: 0.2rem 1.25rem; margin: 1rem 0; }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; }

.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; color: var(--muted); font-size: 0.9rem; }
.legend li { display: flex; align-items: center; gap: 0.4rem; }
.swatch { display: inline-block; min-width: 1.3em; padding: 0 0.2em; text-align: center; font-family: var(--mono); border-radius: 2px; }

/* Bloques de secuencia: una columna de posiciones y las filas alineadas. */
.seq { font-family: var(--mono); font-size: 0.95rem; line-height: 1.65; overflow-x: auto; padding-bottom: 0.25rem; }
.chunk { display: grid; grid-template-columns: 4.5ch max-content; column-gap: 1.25ch; margin-bottom: 0.9rem; }
.pos { color: var(--muted); text-align: right; font-size: 0.8rem; padding-top: 0.15em; user-select: none; }
.rows { display: grid; }
.line { white-space: pre; }
.end { color: var(--muted); user-select: none; }

/* Una base: letra de su color. .tile añade el fondo tintado (la escalera de la hélice). */
.b { position: relative; }
.b-A { color: var(--a); } .b-C { color: var(--c); }
.b-G { color: var(--g); } .b-T { color: var(--t); } .b-U { color: var(--u); }
.tile.b-A { background: var(--a-bg); } .tile.b-C { background: var(--c-bg); }
.tile.b-G { background: var(--g-bg); } .tile.b-T { background: var(--t-bg); } .tile.b-U { background: var(--u-bg); }
.rung { color: var(--line); }

.dim { opacity: 0.38; }
.hit { background: var(--mark); font-weight: 600; }
.mis { background: var(--mark); }
.gap { color: var(--muted); }
.stop { background: var(--t-bg); font-weight: 600; }
.codon-alt { background: color-mix(in srgb, var(--line) 45%, transparent); }
.cut::before {
  content: "";
  position: absolute;
  left: -1px; top: -0.15em; bottom: -0.15em;
  width: 2px;
  background: var(--ink);
}
.protospacer { text-decoration: underline 2px var(--ink); text-underline-offset: 4px; }
.pam { background: var(--ink); color: var(--surface); font-weight: 600; }

/* La doble hélice: más grande y con peldaños, porque es lo primero que se ve. */
.helix { font-size: 1.15rem; line-height: 1.5; }
.helix .b, .helix .rung { display: inline-block; width: 1.45ch; text-align: center; }
.helix .tile { border-radius: 2px; }
.helix .chunk { margin-bottom: 1.4rem; }

/* Hélice 3D (helix3d.js dibuja en el canvas). */
.helix3d { margin-bottom: 2.5rem; }
.helix-stage { position: relative; margin: 0.25rem 0 0.75rem; }
.helix-stage canvas { display: block; width: 100%; cursor: grab; touch-action: pan-y; border-radius: var(--radius); }
.helix-stage canvas:active { cursor: grabbing; }
.helix-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
}
.helix-tip[hidden] { display: none; }
.helix-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; }
.helix-from { display: flex; align-items: center; gap: 0.6rem; }
.helix-from[hidden] { display: none; }
.helix-from input { width: 11rem; padding: 0; accent-color: var(--ink); }
.helix-window { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { display: inline-block; width: 1.6em; height: 0.5em; border-radius: 999px; background: var(--muted); }

/* Bits sobre bases (binario y ser a partir de bits). */
.pairs { display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; font-family: var(--mono); }
.pair { display: grid; justify-items: center; padding: 0.15rem 0.3rem; border-radius: 3px; line-height: 1.3; }
.pair b { font-weight: 600; letter-spacing: 0.05em; }
.pair i { font-style: normal; font-size: 0.8rem; opacity: 0.85; }

/* Proteína: una ficha por aminoácido. */
.protein { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 1rem; }
.aa {
  display: grid; justify-items: center;
  min-width: 2.6rem; padding: 0.2rem 0.3rem;
  border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--mono); line-height: 1.25;
}
.aa b { font-size: 1.05rem; }
.aa small { color: var(--muted); font-size: 0.72rem; }
.aa.changed { border-color: var(--ink); background: var(--mark); }

.counts { columns: 15rem auto; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.counts li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.1rem 0; break-inside: avoid; border-bottom: 1px dotted var(--line); }
.counts span:last-child { font-variant-numeric: tabular-nums; }

.perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(9ch, 1fr)); gap: 0.2rem 1rem; margin: 0.5rem 0 0; padding: 0; list-style: none; font-family: var(--mono); }

/* Tabla de dianas de CRISPR. */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 0.4rem 0.7rem 0.4rem 0; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { font-weight: 400; color: var(--muted); }
td.mono { font-family: var(--mono); }
tr.selected td { background: var(--mark); }
td input { width: auto; }

.compare { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.5rem 1rem; align-items: start; }
.compare > span { color: var(--muted); padding-top: 0.35rem; }

.donor { font-family: var(--mono); word-break: break-all; line-height: 1.6; }
.donor .arm, .swatch.arm { color: var(--muted); }
.donor .ins, .swatch.ins { background: var(--g-bg); color: var(--g); font-weight: 600; }

.being-ops { margin: 1.25rem 0 0.5rem; }

/* ---------- Página divulgativa ---------- */

.learn > h1 { margin: 0 0 0.4rem; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.015em; }
.learn .lead { font-size: 1.2rem; color: var(--ink); max-width: 58ch; }
.learn-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.learn-section h2 { margin: 0 0 1rem; font-size: 1.6rem; letter-spacing: -0.01em; }
.learn-section h3 { margin: 1.75rem 0 0.75rem; font-size: 1.1rem; }
.learn-section > p { max-width: 66ch; font-size: 1.05rem; line-height: 1.65; }
.learn-section > p.note { font-size: 0.95rem; }

.base-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.5rem 2rem; max-width: 50rem; }
.base-card { margin: 0; }
.base-card img { display: block; width: 100%; max-width: 15rem; height: auto; }
.base-card figcaption { color: var(--muted); max-width: 30ch; }
.base-name { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.2rem; color: var(--ink); font-weight: 700; font-size: 1.05rem; }

.pair-grid { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin: 1.5rem 0; }
.pair-fig { margin: 0; }
.pair-row { display: flex; align-items: center; }
.pair-row img { width: 9.5rem; height: auto; }
.pair-fig figcaption { margin-top: 0.25rem; font-weight: 700; }
/* Un guion por puente de hidrógeno: 2 en A–T, 3 en G–C. */
.bonds { display: grid; gap: 0.45rem; margin: 0 -0.5rem; }
.bonds i { display: block; width: 2.2rem; border-top: 3px dashed var(--muted); }

.try { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 1.25rem 0 0; }
.try span { color: var(--muted); }
.try ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.try a {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
}
.try a:hover { border-color: var(--ink); }
.learn .helix3d { margin: 1.5rem 0; }

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 52rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .tagline { display: none; }
  .toolnav {
    position: static;
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
  }
  .toolnav h2 { display: none; }
  .toolnav ul { display: contents; }
  .toolnav button {
    width: auto;
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
  }
  .toolnav button:hover { border-color: var(--muted); }
  .toolnav button[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
  .panel { border-left: 0; min-height: 0; padding-top: 1.5rem; }
  .seq { font-size: 0.85rem; }
  .helix { font-size: 0.95rem; }
  .helix-from { flex: 1 1 100%; }
  .helix-from span { white-space: nowrap; }
  .helix-from input { flex: 1; width: auto; }
  .base-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .pair-row img { width: 7rem; }
}

/* ---------- Microscopio 3D (microscope3d.js) ----------
   El lienzo es siempre oscuro (es el «espacio»), con el tema claro o con el oscuro. */

.chip {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
}
.chip:hover { border-color: var(--ink); }

.v3d { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 420px; max-height: 78vh;
  background: #010204; border-radius: var(--radius); overflow: hidden; color: #DCE6FF;
  font-family: var(--mono); font-size: clamp(0.62rem, 1.1vw, 0.8rem); line-height: 1.45; }
.v3d:fullscreen { max-height: none; aspect-ratio: auto; border-radius: 0; }
.v3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.v3d-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.v3d-hud { position: absolute; inset: 0; pointer-events: none; }
.v3d-box { background: rgba(5, 10, 25, 0.62); border-radius: 6px; padding: 0.45rem 0.65rem; }
.v3d-left { position: absolute; top: 0.6rem; left: 0.6rem; max-width: 50%; display: flex; flex-direction: column;
  gap: 0.5rem; align-items: flex-start; }
.v3d-box b { color: #fff; font-weight: 600; }
.v3d-box em { font-style: normal; color: #FFDC8C; }
.v3d-box small { color: #96AAC8; }
.v3d-did { color: #FFD278 !important; } .v3d-real { color: #8CE6C8 !important; }
.v3d-seq { position: absolute; top: 0.6rem; left: 52%; right: 4.5rem; text-align: center; color: #788CAA;
  letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3d-seq small { display: block; letter-spacing: 0; color: #96AAC8; }
.v3d-bases b { color: #FFE678; text-decoration: underline 2px; text-underline-offset: 3px; }
.v3d-depth { position: absolute; right: 1.6rem; top: 14%; bottom: 14%; width: 2px; background: rgba(120, 140, 170, 0.6); }
.v3d-mark { position: absolute; right: 0.6rem; transform: translateY(-50%); white-space: nowrap; color: #96AAC8; font-size: 0.9em; }
.v3d-mark::after { content: ""; position: absolute; right: -0.95rem; top: 50%; width: 0.75rem; height: 2px; background: #96AAC8; }
.v3d-here { position: absolute; left: 6px; width: 0; height: 0; transform: translateY(-50%);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #FFDC78; }
/* marcador del destino del piloto automático: cuatro esquinas amarillas */
.v3d-target { position: absolute; width: 2rem; height: 2rem; transform: translate(-50%, -50%);
  background:
    linear-gradient(#FFD76E 0 0) top left / 0.6rem 2px, linear-gradient(#FFD76E 0 0) top left / 2px 0.6rem,
    linear-gradient(#FFD76E 0 0) top right / 0.6rem 2px, linear-gradient(#FFD76E 0 0) top right / 2px 0.6rem,
    linear-gradient(#FFD76E 0 0) bottom left / 0.6rem 2px, linear-gradient(#FFD76E 0 0) bottom left / 2px 0.6rem,
    linear-gradient(#FFD76E 0 0) bottom right / 0.6rem 2px, linear-gradient(#FFD76E 0 0) bottom right / 2px 0.6rem;
  background-repeat: no-repeat; }
.v3d-autopilot { position: absolute; left: 50%; bottom: 4.2rem; transform: translateX(-50%); padding: 0.3rem 0.8rem;
  background: rgba(40, 30, 5, 0.7); border-radius: 6px; color: #FFD76E; white-space: nowrap; }
.v3d-msg { position: absolute; left: 0; right: 0; top: 70%; text-align: center; color: #fff; font-size: 1.35em;
  text-shadow: 0 0 6px #000; }
.v3d-help { position: absolute; left: 0.6rem; bottom: 0.5rem; right: 3rem; color: #A0AFC8; font-size: 0.9em; }
.v3d-nogl { position: absolute; inset: 1rem; margin: auto; height: fit-content; }
.v3d-bar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-top: 0.75rem; }
.v3d-buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.v3d-buttons button { font: inherit; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.v3d-buttons button:hover { border-color: var(--ink); }
.v3d-touch { display: none; }
@media (pointer: coarse) { .v3d-touch { display: block; } .v3d-help { display: none; } }
@media (max-width: 700px) {
  .v3d { aspect-ratio: 3 / 4; min-height: 360px; }
  .v3d-left { max-width: 92%; }
  .v3d-seq { top: auto; bottom: 0.5rem; left: 0.6rem; right: 0.6rem; }
  .v3d-focus, .v3d-depth, .v3d-help { display: none; }
  .v3d-autopilot { bottom: 3rem; }
}

/* ---------- Proteína 3D ---------- */
.category { margin: 1.5rem 0 1rem; padding: 0.7rem 1rem; border-left: 4px solid var(--muted); border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted) 8%, transparent); }
.category span { color: var(--muted); }
.category b { font-size: 1.1rem; }
.category p { margin: 0.3rem 0 0; color: var(--muted); max-width: 62ch; }
.cat-identical { border-left-color: #1f9d55; } .cat-very_similar { border-left-color: #2b8fc2; }
.cat-distant_relative { border-left-color: #c98a12; } .cat-invented { border-left-color: #b4429b; }
.conf-bar { display: flex; height: 0.9rem; margin: 0.5rem 0 0.6rem; border-radius: 3px; overflow: hidden; max-width: 40rem; }
.conf-bar span { min-width: 2px; }
.res { font-family: var(--mono); }
.res.mis { color: #c2185b; font-weight: 700; }
.res.gap { color: var(--muted); }
.aa.changed { outline: 2px solid #c2185b; outline-offset: -2px; }
.acc { font-family: var(--mono); }
ul.plain { padding-left: 1.2rem; max-width: 70ch; }
ul.plain li { margin: 0.25rem 0; }
.elapsed { font-variant-numeric: tabular-nums; }
.protein-actions { flex-wrap: wrap; margin: 1.5rem 0 0.75rem; }
.protein-from { margin-bottom: 0.75rem; }
#protein-microscope { margin-top: 0.75rem; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3d-panels { position: absolute; inset: 0; pointer-events: none; }
.v3d-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(120, 140, 170, 0.7); }
.v3d-panel { position: absolute; bottom: 4.2rem; transform: translateX(-50%); padding: 0.25rem 0.7rem; border-radius: 6px;
  background: rgba(5, 10, 25, 0.7); color: #AAB9D2; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.v3d-panel.active { color: #FFE678; }
.protein-from[hidden] { display: none; }
.protein-from input { max-width: 8rem; }
.v3d-split .v3d-left { max-width: 34%; font-size: 0.85em; }
.v3d-split .v3d-focus em, .v3d-split .v3d-focus br + em { display: none; }
.v3d-split .v3d-level small { display: none; }