@miliastry/quasar 1.1.0 → 1.2.0

package/src/Visuals/lyne.css

@@ -31,10 +31,17 @@
   --color-accent: #2EE6E2;
   --color-accent-bright: #68FFF8;
   --color-warning: #FFC34D;
+  --color-danger: #FF3B5C;
   --color-text-primary: #FFFFFF;
   --color-text-mid: #9EACD4;
   --color-text-dim: #606C8F;
   --color-hairline: rgba(255, 255, 255, 0.12);
+  --color-hairline-bright: rgba(142, 155, 196, 0.35);
+  --color-surface: #0B1024;
+  --color-surface-bright: #141C3C;
+  --color-inset-well: #080D20;
+  --color-on-accent: #05060F;
+  --cut-control: 10px;
   --font-display: var(--font-syne-display, "Saira Condensed"), "Saira Condensed", sans-serif;
   --font-body: var(--font-syne-body, "Saira"), "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-numeric: var(--font-syne-mono, "IBM Plex Mono"), "IBM Plex Mono", monospace;
@@ -914,9 +921,256 @@
   margin: 4px 0 !important;
 }
 
-/* Audio: replica el .bbAudio original de Lyne (bloque centrado, ancho máx). */
-.bb-audio {
-  display: block !important;
+/* ─── Audio: LINE chrome redesign (spec docs/design-spec/bbcode-audio-player) ── */
+.bbcode-preview-lyne .lx-audio,
+.bbcode-preview.theme-lyne .lx-audio,
+[data-theme='syne'] .lx-audio,
+[data-dialect='lyne'] .lx-audio,
+.lx-audio {
+  --c: var(--cut-control, 10px);
+  display: inline-block !important;
+  width: 100% !important;
+  max-width: 560px !important;
+  margin: 14px 0 !important;
+  background:
+    linear-gradient(180deg, var(--color-surface-bright, #141C3C) 0%, var(--color-surface, #0B1024) 38%, var(--color-inset-well, #080D20) 100%) !important;
+  border: 1px solid var(--color-hairline-bright, rgba(142, 155, 196, 0.35)) !important;
+  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)) !important;
+  position: relative;
+  font-family: var(--font-body, "Saira", sans-serif);
+  transition: border-color 120ms cubic-bezier(0.16, 1.0, 0.3, 1.0);
+  text-align: left;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+.lx-audio audio {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+.lx-audio:hover {
+  border-color: rgba(46, 230, 226, 0.45) !important;
+}
+.lx-audio.is-playing {
+  border-color: rgba(46, 230, 226, 0.6) !important;
+}
+
+/* thin accent baseline — the "catch line" motif; fills with progress */
+.lx-audio .lx-track {
+  position: relative;
+  height: 12px;
+  cursor: pointer;
+  background:
+    repeating-linear-gradient(-45deg, rgba(142,155,196,0.10) 0 2px, transparent 2px 9px),
+    var(--color-inset-well, #080D20);
+}
+.lx-audio .lx-track .fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0%;
+  background: linear-gradient(90deg, rgba(46,230,226,0.10), rgba(46,230,226,0.22));
+  border-right: 2px solid var(--color-accent, #2EE6E2);
+  box-shadow: 0 0 12px rgba(46, 230, 226, 0.55);
+}
+.lx-audio .lx-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 10px 16px 12px;
+}
+.lx-audio .lx-btn {
+  flex: none;
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  background: var(--color-accent, #2EE6E2);
+  color: var(--color-on-accent, #05060F);
+  cursor: pointer;
+  border: none;
+  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
+  transition: background 120ms cubic-bezier(0.16, 1.0, 0.3, 1.0), transform 120ms cubic-bezier(0.16, 1.0, 0.3, 1.0);
+}
+.lx-audio .lx-btn:hover {
+  background: var(--color-accent-bright, #7FF5F0);
+}
+.lx-audio .lx-btn:active {
+  transform: scale(0.94);
+}
+.lx-audio .lx-btn svg {
+  width: 16px;
+  height: 16px;
+  fill: var(--color-on-accent, #05060F);
+}
+
+.lx-audio .lx-title {
+  flex: 1;
+  min-width: 0;
+}
+.lx-audio .lx-title .name {
+  font-family: var(--font-display, "Saira Condensed", sans-serif);
+  font-weight: 600;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-text-primary, #F2F5FF);
+}
+.lx-audio .lx-title .label {
+  font-family: var(--font-numeric, "IBM Plex Mono", monospace);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--color-text-dim, #8E9BC4);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 1px;
+}
+.lx-audio .lx-title .label .dot {
+  width: 5px;
+  height: 5px;
+  background: var(--color-text-dim, #8E9BC4);
+  flex: none;
+  transition: background 120ms;
+}
+.lx-audio.is-playing .lx-title .label .dot {
+  background: var(--color-accent, #2EE6E2);
+  box-shadow: 0 0 6px rgba(46,230,226,0.9);
+  animation: lx-beat 606ms infinite;
+}
+@keyframes lx-beat {
+  0% { transform: scale(1.25); }
+  100% { transform: scale(1); }
+}
+
+.lx-audio .lx-vol {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+}
+.lx-audio .lx-vol-btn {
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  color: var(--color-text-dim, #8E9BC4);
+  transition: color 120ms cubic-bezier(0.16, 1.0, 0.3, 1.0);
+}
+.lx-audio .lx-vol-btn:hover {
+  color: var(--color-accent, #2EE6E2);
+}
+.lx-audio .lx-vol-btn svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+.lx-audio .lx-vol-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 56px;
+  height: 4px;
+  background: var(--color-inset-well, #080D20);
+  border: 1px solid var(--color-hairline, rgba(142, 155, 196, 0.25));
+  outline: none;
+  cursor: pointer;
+  border-radius: 0;
+  vertical-align: middle;
+}
+.lx-audio .lx-vol-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 8px;
+  height: 12px;
+  background: var(--color-accent, #2EE6E2);
+  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
+  cursor: pointer;
+  transition: transform 120ms, background 120ms;
+}
+.lx-audio .lx-vol-slider::-moz-range-thumb {
+  width: 8px;
+  height: 12px;
+  border: none;
+  border-radius: 0;
+  background: var(--color-accent, #2EE6E2);
+  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
+  cursor: pointer;
+}
+.lx-audio .lx-vol-slider:hover::-webkit-slider-thumb {
+  background: var(--color-accent-bright, #7FF5F0);
+  transform: scaleY(1.15);
+}
+.lx-audio .lx-vol-slider:hover::-moz-range-thumb {
+  background: var(--color-accent-bright, #7FF5F0);
+}
+
+.lx-audio .lx-time {
+  flex: none;
+  font-family: var(--font-numeric, "IBM Plex Mono", monospace);
+  font-weight: 500;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  color: var(--color-text-mid, #AAB6DE);
+  font-variant-numeric: tabular-nums;
+}
+.lx-audio .lx-time .cur {
+  color: var(--color-text-primary, #F2F5FF);
+}
+
+.lx-audio .lx-speed {
+  flex: none;
+  font-family: var(--font-numeric, "IBM Plex Mono", monospace);
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-text-dim, #8E9BC4);
+  background: none;
+  border: 1px solid var(--color-hairline, rgba(142, 155, 196, 0.18));
+  padding: 3px 8px;
+  cursor: pointer;
+  letter-spacing: 1px;
+  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
+  transition: color 120ms, border-color 120ms;
+}
+.lx-audio .lx-speed:hover {
+  color: var(--color-accent, #2EE6E2);
+  border-color: rgba(46,230,226,0.4);
+}
+.lx-audio .lx-speed.active {
+  color: var(--color-accent, #2EE6E2);
+  border-color: rgba(46,230,226,0.5);
+}
+
+/* states */
+.lx-audio.is-loading .lx-btn svg {
+  opacity: 0.3;
+}
+.lx-audio.is-loading .fill {
+  border-right-color: var(--color-text-dim, #8E9BC4);
+  box-shadow: none;
+}
+.lx-audio.is-error {
+  border-color: rgba(255, 59, 92, 0.5) !important;
+}
+.lx-audio.is-error .fill {
+  border-right-color: var(--color-danger, #FF3B5C);
+  box-shadow: 0 0 12px rgba(255,59,92,0.5);
+}
+.lx-audio.is-error .lx-title .label {
+  color: var(--color-danger, #FF3B5C);
+}
+
+/* Fallback si se usa audio nativo directo */
+audio.bb-audio {
+  display: inline-block !important;
   width: 100% !important;
   max-width: 420px !important;
   margin: 10px 0 !important;

package/src/Visuals/osu.css

@@ -73,7 +73,7 @@
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) blockquote {
   padding: 0 0 0 20px;
   margin: 0 0 20px 0;
-  border-left: 2px solid #D194B3;
+  border-left: 2px solid var(--osu-accent);
   color: #ffffff;
   font-style: normal;
   background: none;
@@ -83,8 +83,8 @@
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) pre {
   padding: 10px;
   margin-bottom: 10px;
-  background: #1C1719;
-  border: 1px solid #43383A;
+  background: var(--osu-code-bg);
+  border: 1px solid var(--osu-code-border);
   border-radius: 8px;
   overflow-x: auto;
 }
@@ -150,7 +150,7 @@
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) details summary {
   cursor: pointer;
   font-weight: 600;
-  color: #D194B3;
+  color: var(--osu-accent);
   font-size: 13px;
   user-select: none;
 }
@@ -176,7 +176,7 @@
   display: list-item;
 }
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) li::marker {
-  color: #D194B3;
+  color: var(--osu-accent);
 }
 
 /* ─── Media ──────────────────────────────────────────── */
@@ -195,7 +195,11 @@
   border-radius: 8px;
 }
 .bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) audio {
+  /* inline-block: el preflight de Tailwind fuerza `audio{display:block}`
+   * y eso rompe el centrado por `text-align:center` de [centre]. */
+  display: inline-block;
   width: 100%;
+  max-width: 420px;
 }
 
 /* ─── Image Map ──────────────────────────────────────── */
@@ -268,7 +272,106 @@
   display: inline-block;
   transform: rotate(-5deg) scale(0.95);
   font-style: italic;
-  color: #F0A0C0;
+  color: var(--osu-bloom);
+}
+
+/* ─── Semantic Spacing ───────────────────────────────── */
+
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-sp {
+  display: block;
+  height: 0;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-para {
+  display: block;
+  height: 1em;
+  min-height: 12px;
+  padding: 0;
+}
+
+/* ─── Vocabulario de clases del dialecto osu ──────────────────────────────
+ *
+ * Con `dialect: 'osu'` el renderer emite los nombres de clase reales de osu!
+ * (`well`, `js-spoilerbox`, `imagemap__link`, …) en vez de los de Miliastry
+ * (`notice`, `imagemap-container`, …). Sobre osu.ppy.sh eso basta: su propia
+ * hoja los pinta. Fuera de ahí —el preview de la app, el HTML autónomo de
+ * `scripts/osu-inject.ts`— no hay nadie, y estas reglas son ese nadie.
+ *
+ * ── Un solo parámetro, como osu ──────────────────────────────────────
+ *
+ * osu! no hardcodea sus colores: define `--base-hue` y deriva todo con
+ * `hsl()`, porque el usuario elige el tono de su tema. Medirlos y copiar el
+ * resultado congelaría UN tema concreto. Así que aquí se reproduce la
+ * mecánica, no la foto: los pares saturación/luminosidad son fijos por rol
+ * (la familia `b` es fondo al 10%, la `l` enlaces al 40%) y el tono entra por
+ * variable.
+ *
+ * `var(--base-hue, 338)` consume el tono del documento cuando existe —en la
+ * página real de osu existe, y ahí gana el del usuario— y si no cae a 338.
+ *
+ * Ese respaldo NO es el tono de osu (253), y es deliberado: esta hoja se
+ * consume sobre todo DENTRO de Miliastry, cuyo modo osu tiene fondo rosado
+ * (`#2a1f23`, tono 338) y acento `--accent-pink` (~332). Cayendo al 253 se
+ * mezclaban morados de osu sobre un fondo rosa nuestro, que se veía «casi
+ * bien» y por eso no saltaba. Un host puede fijar `--base-hue` para forzar
+ * otro.
+ *
+ * Las reglas de arriba (`.notice`, `.imagemap-container`, `.imagemap-area`)
+ * siguen vivas: son los nombres que emiten los dialectos miliastry y lyne.
+ * Esta sección añade, no reemplaza.
+ */
+
+/* Qué sigue al tono y qué no: EL CONTENIDO SIGUE, LAS SEÑALES NO.
+ *
+ * Lo que el BBCode pinta —citas, listas, código, cajas, enlaces— se deriva de
+ * `--osu-hue`, porque su color no significa nada por sí mismo: es la piel del
+ * documento. Lo que comunica un estado conserva su color fijo, porque ahí el
+ * color ES el mensaje: el rojo de `.media-error`, el negro sobre negro de
+ * `.spoiler` (que en osu es literalmente eso), el rosa de selección de las
+ * áreas de imagemap —una ayuda de edición, no contenido— y el degradado
+ * deliberadamente multicolor de `.sparkle`. Los blancos y los `rgba()`
+ * neutros tampoco: son veladuras, no color.
+ *
+ * Si vienes a "terminar el trabajo" convirtiendo los que quedan, esto es el
+ * porqué de que sigan ahí.
+ */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) {
+  --osu-hue: var(--base-hue, 338);
+  --osu-bg-deep: hsl(var(--osu-hue), 10%, 15%);   /* fondo hundido */
+  --osu-border:  hsl(var(--osu-hue), 10%, 40%);   /* borde sobre ese fondo */
+  --osu-link:    hsl(var(--osu-hue), 40%, 75%);   /* enlaces, perfiles, cajas */
+  --osu-link-hi: hsl(var(--osu-hue), 40%, 80%);   /* el mismo, al pasar */
+  --osu-text:    hsl(var(--osu-hue), 40%, 100%);  /* texto sobre fondo hundido */
+
+  /* ── La escalera real de osu ──────────────────────────────────────────
+   * Leída de su página en vivo (`--hsl-*` sobre `.bbcode`), no deducida:
+   * osu define --base-hue y estos pares de saturación/luminosidad, y su
+   * `bbcode.less` asigna un rol a cada elemento. Los cinco alias de arriba
+   * son estos mismos: bg-deep = b5, border = b1, link = l2, link-hi = l1,
+   * text = c1. Se nombran los roles aparte para poder citar la hoja de osu
+   * por su nombre cuando se ajusta un elemento concreto. */
+  --osu-b1: hsl(var(--osu-hue), 10%, 40%);
+  --osu-b5: hsl(var(--osu-hue), 10%, 15%);
+  --osu-b6: hsl(var(--osu-hue), 10%, 10%);
+  --osu-c2: hsl(var(--osu-hue), 40%, 90%);
+  --osu-l1: hsl(var(--osu-hue), 40%, 80%);
+  --osu-l3: hsl(var(--osu-hue), 40%, 70%);
+
+  /* El acento del cuerpo en el look de MILIASTRY: filo de las citas,
+   * marcador de lista, título de `details`. Era el literal `#D194B3`, que es
+   * exactamente hsl(330,40%,70%) — o sea `l3`. osu usa otros roles en esos
+   * mismos elementos; ver el bloque `[data-dialect="osu"]` más abajo. */
+  --osu-accent:      var(--osu-l3);
+  /* Superficie del bloque de código y su filo, look de Miliastry. Eran
+   * `#1C1719` —hsl(336,10%,10%), que es `b6`— y `#43383A`. Este último
+   * estaba en el tono 349, fuera de la familia; al derivarlo se corrige. */
+  --osu-code-bg:     var(--osu-b6);
+  --osu-code-border: hsl(var(--osu-hue),  9%, 24%);
+  /* Adorno `.flower`: era `#F0A0C0`, hsl(336,73%,78%). Es de Miliastry, osu
+   * no tiene nada parecido. */
+  --osu-bloom:       hsl(var(--osu-hue), 73%, 78%);
 }
 
 /* ─── Semantic Spacing ───────────────────────────────── */
@@ -286,3 +389,251 @@
   min-height: 12px;
   padding: 0;
 }
+
+/* ─── Vocabulario de clases del dialecto osu ──────────────────────────────
+ *
+ * Con `dialect: 'osu'` el renderer emite los nombres de clase reales de osu!
+ * (`well`, `js-spoilerbox`, `imagemap__link`, …) en vez de los de Miliastry
+ * (`notice`, `imagemap-container`, …). Sobre osu.ppy.sh eso basta: su propia
+ * hoja los pinta. Fuera de ahí —el preview de la app, el HTML autónomo de
+ * `scripts/osu-inject.ts`— no hay nadie, y estas reglas son ese nadie.
+ *
+ * ── Un solo parámetro, como osu ──────────────────────────────────────
+ *
+ * osu! no hardcodea sus colores: define `--base-hue` y deriva todo con
+ * `hsl()`, porque el usuario elige el tono de su tema. Medirlos y copiar el
+ * resultado congelaría UN tema concreto. Así que aquí se reproduce la
+ * mecánica, no la foto: los pares saturación/luminosidad son fijos por rol
+ * (la familia `b` es fondo al 10%, la `l` enlaces al 40%) y el tono entra por
+ * variable.
+ *
+ * `var(--base-hue, 338)` consume el tono del documento cuando existe —en la
+ * página real de osu existe, y ahí gana el del usuario— y si no cae a 338.
+ *
+ * Ese respaldo NO es el tono de osu (253), y es deliberado: esta hoja se
+ * consume sobre todo DENTRO de Miliastry, cuyo modo osu tiene fondo rosado
+ * (`#2a1f23`, tono 338) y acento `--accent-pink` (~332). Cayendo al 253 se
+ * mezclaban morados de osu sobre un fondo rosa nuestro, que se veía «casi
+ * bien» y por eso no saltaba. Un host puede fijar `--base-hue` para forzar
+ * otro.
+ *
+ * Las reglas de arriba (`.notice`, `.imagemap-container`, `.imagemap-area`)
+ * siguen vivas: son los nombres que emiten los dialectos miliastry y lyne.
+ * Esta sección añade, no reemplaza.
+ */
+
+/* Qué sigue al tono y qué no: EL CONTENIDO SIGUE, LAS SEÑALES NO.
+ *
+ * Lo que el BBCode pinta —citas, listas, código, cajas, enlaces— se deriva de
+ * `--osu-hue`, porque su color no significa nada por sí mismo: es la piel del
+ * documento. Lo que comunica un estado conserva su color fijo, porque ahí el
+ * color ES el mensaje: el rojo de `.media-error`, el negro sobre negro de
+ * `.spoiler` (que en osu es literalmente eso), el rosa de selección de las
+ * áreas de imagemap —una ayuda de edición, no contenido— y el degradado
+ * deliberadamente multicolor de `.sparkle`. Los blancos y los `rgba()`
+ * neutros tampoco: son veladuras, no color.
+ *
+ * Si vienes a "terminar el trabajo" convirtiendo los que quedan, esto es el
+ * porqué de que sigan ahí.
+ */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) {
+  --osu-hue: var(--base-hue, 338);
+  --osu-bg-deep: hsl(var(--osu-hue), 10%, 15%);   /* fondo hundido */
+  --osu-border:  hsl(var(--osu-hue), 10%, 40%);   /* borde sobre ese fondo */
+  --osu-link:    hsl(var(--osu-hue), 40%, 75%);   /* enlaces, perfiles, cajas */
+  --osu-link-hi: hsl(var(--osu-hue), 40%, 80%);   /* el mismo, al pasar */
+  --osu-text:    hsl(var(--osu-hue), 40%, 100%);  /* texto sobre fondo hundido */
+
+  /* El acento del cuerpo: filo de las citas, marcador de lista, título de
+   * `details`. Era el literal `#D194B3`, que es exactamente hsl(330,40%,70%). */
+  --osu-accent:      hsl(var(--osu-hue), 40%, 70%);
+  /* Superficie del bloque de código y su filo. Eran `#1C1719` —hsl(336,10%,10%)—
+   * y `#43383A`. Este último estaba en el tono 349, fuera de la familia; al
+   * derivarlo del tono se corrige de paso. */
+  --osu-code-bg:     hsl(var(--osu-hue), 10%, 10%);
+  --osu-code-border: hsl(var(--osu-hue),  9%, 24%);
+  /* Adorno `.flower`: era `#F0A0C0`, hsl(336,73%,78%). */
+  --osu-bloom:       hsl(var(--osu-hue), 73%, 78%);
+}
+
+/* Los enlaces de osu son del mismo morado que los perfiles, no azules. El
+ * azul de la sección base es el look de Miliastry, así que sólo se pisa
+ * cuando el preview declara el dialecto osu. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] a { color: var(--osu-link); }
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] a:hover { color: var(--osu-link-hi); border-bottom-color: var(--osu-link-hi); }
+
+/* ── Roles de osu para el cuerpo del documento ────────────────────────────
+ * Fuente: `resources/css/bbcode.less` de osu-web, cruzada con la escalera
+ * medida en su página. Estos elementos tienen en Miliastry el acento rosa
+ * (`--osu-accent`), que es el look de la casa; bajo el dialecto osu mandan
+ * los roles de osu, igual que ya pasa arriba con los enlaces.
+ */
+
+/* La cita no lleva acento: el texto Y la barra son `c2`, y la barra la pinta
+ * osu con un ::before de 2px redondeado. El borde izquierdo da el mismo
+ * resultado a esta anchura. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] blockquote {
+  color: var(--osu-c2);
+  border-left-color: var(--osu-c2);
+}
+
+/* El bloque de código es `b5` y NO lleva borde. El nuestro usaba `b6` con un
+ * filo, que es más oscuro y más marcado que el de osu. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] pre {
+  background: var(--osu-b5);
+  border: none;
+}
+
+/* El código en línea también es `b5`, plano: ni veladura blanca ni filo. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] code.inline {
+  background: var(--osu-b5);
+  border: none;
+  padding: 1px 4px;
+}
+
+/* `[heading]` no es blanco en osu, es `l1`. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] h2 {
+  color: var(--osu-l1);
+}
+
+/* osu no le da color al marcador de lista: hereda el del texto. El rosa es
+ * cosa nuestra. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] li::marker {
+  color: inherit;
+}
+
+/* El spoiler de osu es negro puro sobre negro puro, no un gris. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne)[data-dialect="osu"] .spoiler {
+  background: #000;
+  color: #000;
+}
+
+/* Notice — osu lo llama `well` */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .well {
+  padding: 19px;
+  border: 2px solid var(--osu-border);
+  border-radius: 4px;
+  background: var(--osu-bg-deep);
+  color: var(--osu-text);
+  text-align: center;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+/* Spoilerbox — estructura div > a(icono + texto) + div(cuerpo) */
+/* osu no le pone caja propia al contenedor: el `margin: 8px 0` que trae
+ * `features/BBCode/styles.css` para el look de Miliastry sumaba 16px por
+ * caja (19 en una userpage real). Se declara a cero en vez de confiar en
+ * la especificidad, que aquí sólo ganaba en `display`. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-spoilerbox { display: block; margin: 0; padding: 0; }
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-spoilerbox__link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--osu-link);
+  font-weight: 700;
+  text-decoration: none;
+  cursor: pointer;
+  /* osu lo deja al 100%; `features/BBCode/styles.css` lo baja a 0.85em para el
+   * look de Miliastry. Bajo este dialecto manda el de osu. */
+  font-size: 1em;
+  line-height: inherit;
+  /* Un `inline-flex` se alinea sobre la línea base del texto, así que el
+   * navegador reserva hueco para los descendentes DEBAJO y la caja crece de
+   * 21px a 26px. osu no lo sufre porque su icono es un glifo de fuente, que
+   * aporta una línea base real; el nuestro es un triángulo CSS sin texto y la
+   * base se sintetiza desde el borde inferior. Alinear arriba elimina el
+   * hueco: el enlace es el único contenido de su línea, así que `top` no
+   * cambia nada más. Medido: 26px -> 21px, que es lo que mide en osu. */
+  vertical-align: top;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-spoilerbox__link:hover { color: var(--osu-link-hi); border-bottom: none; }
+
+/* El icono de osu es un glifo de Font Awesome 5, que no distribuimos. Este es
+ * un triángulo CSS equivalente: apunta a la derecha cerrado y rota al abrir.
+ * osu cambia de glifo en vez de rotar; el efecto leído es el mismo. Hereda
+ * `currentColor`, así que sigue al tono sin declarar nada. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-spoilerbox__link-icon {
+  display: block;
+  position: relative;
+  flex: none;
+  width: 20px;
+  height: 21px;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-spoilerbox__link-icon::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 5px;
+  width: 0;
+  height: 0;
+  border-left: 5px solid currentColor;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transform: translateY(-50%);
+  transform-origin: 2px 50%;
+  transition: transform 0.12s ease;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .js-spoilerbox--open .bbcode-spoilerbox__link-icon::before {
+  transform: translateY(-50%) rotate(90deg);
+}
+
+/* El cuerpo arranca oculto. Lo abre la clase `js-spoilerbox--open` en el
+ * CONTENEDOR, que pone `bindBoxDrawer`. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode-spoilerbox__body {
+  display: none;
+  margin: 10px 0 0;
+  padding: 0 0 0 20px;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .js-spoilerbox--open > .bbcode-spoilerbox__body { display: block; }
+
+/* Imagemap — el contenedor ancla; los enlaces van absolutos con el
+ * left/top/width/height en % que el renderer escribe en el style inline.
+ * Sin el `position: relative` los enlaces caen al flujo. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .imagemap {
+  display: inline-block;
+  position: relative;
+  max-width: max-content;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .imagemap__image {
+  display: inline;
+  max-width: 100%;
+  vertical-align: middle;
+}
+/* Transparentes en reposo, como en osu. El realce al pasar por encima es
+ * nuestro: en un editor conviene ver dónde están las áreas, y no altera la
+ * apariencia estática. */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .imagemap__link {
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  border-radius: 4px;
+  text-decoration: none;
+  transition: background-color 0.08s linear, box-shadow 0.08s linear;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .imagemap__link:hover {
+  background: hsl(var(--osu-hue), 40%, 75%, 0.22);
+  box-shadow: inset 0 0 0 1.5px var(--osu-link);
+  border-bottom: none;
+}
+
+/* Alineación */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode__align-centre { display: block; text-align: center; }
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode__align-left   { display: block; text-align: left; }
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .bbcode__align-right  { display: block; text-align: right; }
+
+/* Perfil */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .user-name {
+  display: inline;
+  color: var(--osu-link);
+  font-weight: 700;
+  text-decoration: none;
+}
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .user-name:hover { color: var(--osu-link-hi); border-bottom: none; }
+
+/* YouTube */
+.bbcode-preview:not(.bbcode-preview-lyne):not(.theme-lyne) .u-embed-wide--bbcode {
+  display: inline-block;
+  width: 100%;
+  max-width: 425px;
+  aspect-ratio: 16 / 9;
+  border: 0;
+}