/* Apolo answer kit: the landing's night look. Flat colours, hairlines, serif titles, no gradients.
   Greys are the ink at an alpha so they stack on any surface. Three spacing tiers: inner, group, section. */
:root {
  --ui-canvas: #0a0f24;
  --ui-ink: #eef1fb;
  --ui-muted: #aab3cf;
  --ui-faint: #7e88a8;
  --ui-surface: rgb(255 255 255 / .04);
  --ui-surface-strong: rgb(255 255 255 / .08);
  --ui-line: rgb(255 255 255 / .09);
  --ui-gusto: #f5b860;
  --ui-habilidad: #8fb3ff;
  --ui-forma: #c9a6ff;
  --ui-success: #7fd1a8;
  --ui-warning: #f5b860;
  --ui-danger: #f08f86;
  --ui-serif: Georgia, "Times New Roman", serif;
  --ui-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui-inner: 6px;
  --ui-group: 14px;
  --ui-section: 24px;
  --ui-radius: 18px;
}

.ui-col, .ui-row { display: flex; min-width: 0; }
.ui-col { flex-direction: column; }
.ui-row { align-items: center; }
.ui-wrap { flex-wrap: wrap; }
.ui-gap-inner { gap: var(--ui-inner); }
.ui-gap-group { gap: var(--ui-group); }
.ui-gap-section { gap: var(--ui-section); }
.ui-spacer { flex: 1; }
.ui-grid { display: grid; gap: var(--ui-group); grid-template-columns: repeat(auto-fill, minmax(min(var(--ui-min), 100%), 1fr)); }
.ui-box { border-radius: 14px; }
.ui-tone-surface { background: var(--ui-surface); }
.ui-tone-strong { background: var(--ui-surface-strong); }
.ui-tone-gusto { background: rgb(245 184 96 / .12); }
.ui-tone-habilidad { background: rgb(143 179 255 / .12); }
.ui-tone-forma { background: rgb(201 166 255 / .12); }
.ui-pad-sm { padding: 10px 12px; }
.ui-pad-md { padding: 16px 18px; }
.ui-card { display: flex; flex-direction: column; gap: var(--ui-group); min-width: 0; padding: 20px; border-radius: var(--ui-radius); }
.ui-card-plain { box-shadow: inset 0 0 0 1px var(--ui-line); }
.ui-card-soft { background: var(--ui-surface); }
.ui-card .ui-card { padding: 16px; border-radius: 14px; }
.ui-divider { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--ui-line); }

.ui-carousel { display: grid; gap: var(--ui-inner); }
.ui-carousel-track { display: flex; gap: var(--ui-group); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.ui-carousel-track::-webkit-scrollbar { display: none; }
.ui-carousel-track > * { flex: 0 0 min(260px, 78%); scroll-snap-align: start; }
.ui-carousel-nav { display: flex; justify-content: flex-end; gap: var(--ui-inner); }

.ui-popover { display: inline; }
.ui-link-button { padding: 0; border: 0; background: none; color: var(--ui-habilidad); font: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.ui-popover-panel { max-width: 300px; margin: 0; padding: 14px 16px; border: 0; border-radius: 14px; background: #151d3d; color: var(--ui-ink); box-shadow: inset 0 0 0 1px var(--ui-line), 0 12px 32px rgb(0 0 0 / .4); }

/* Text */
.ui-title { margin: 0; color: var(--ui-ink); font-family: var(--ui-serif); font-weight: 400; line-height: 1.15; }
.ui-title-sm { font-size: 18px; }
.ui-title-md { font-size: 22px; }
.ui-title-lg { font-size: clamp(26px, 4vw, 32px); }
.ui-title-xl { font-size: clamp(36px, 6vw, 48px); line-height: 1; }
.ui-card .ui-title-lg, .ui-card .ui-title-xl { font-size: 28px; }
.ui-text { margin: 0; color: var(--ui-ink); line-height: 1.55; }
.ui-text-sm { font-size: 14.5px; color: var(--ui-muted); }
.ui-text code, .ui-markdown code { padding: 1px 6px; border-radius: 6px; background: var(--ui-surface-strong); font-size: .9em; }
.ui-caption { margin: 0; color: var(--ui-faint); font-size: 13px; line-height: 1.4; }
.ui-label { margin: 0; color: var(--ui-faint); font: 650 11px/1.2 var(--ui-sans); letter-spacing: .08em; text-transform: uppercase; }
.ui-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: 600 13px/1.2 var(--ui-sans); white-space: nowrap; }
.ui-badge-neutral { background: var(--ui-surface-strong); color: var(--ui-muted); }
.ui-badge-gusto { background: rgb(245 184 96 / .16); color: var(--ui-gusto); }
.ui-badge-habilidad { background: rgb(143 179 255 / .16); color: var(--ui-habilidad); }
.ui-badge-forma { background: rgb(201 166 255 / .16); color: var(--ui-forma); }
.ui-badge-success { background: rgb(127 209 168 / .14); color: var(--ui-success); }
.ui-badge-danger { background: rgb(240 143 134 / .14); color: var(--ui-danger); }
.ui-link, .ui-markdown a { color: var(--ui-habilidad); text-underline-offset: 3px; }
.ui-list { display: grid; gap: 10px; margin: 0; padding-left: 1.2em; color: var(--ui-ink); }
.ui-list-item { line-height: 1.45; }
.ui-list-item > span { display: block; }
.ui-list-title { font-weight: 600; }
.ui-list-body { color: var(--ui-muted); font-size: 14.5px; }
.ui-list-meta { color: var(--ui-faint); font-size: 13px; }
.ui-list-timeline { padding: 0; list-style: none; gap: 0; }
.ui-list-timeline .ui-list-item { position: relative; padding: 0 0 18px 26px; }
.ui-list-timeline .ui-list-item::before { content: ""; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ui-habilidad); }
.ui-list-timeline .ui-list-item:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 2px; width: 1px; background: var(--ui-line); }
.ui-markdown { display: grid; gap: 10px; color: var(--ui-ink); line-height: 1.55; }
.ui-markdown :is(p, ul, ol) { margin: 0; }
.ui-quote { margin: 0; padding-left: 16px; border-left: 2px solid var(--ui-gusto); }
.ui-quote blockquote { margin: 0; font: 400 20px/1.4 var(--ui-serif); color: var(--ui-ink); }
.ui-quote figcaption { margin-top: 6px; color: var(--ui-faint); font-size: 13px; }
.ui-code { margin: 0; border-radius: 14px; background: rgb(0 0 0 / .3); box-shadow: inset 0 0 0 1px var(--ui-line); overflow: hidden; }
.ui-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 14px; color: var(--ui-faint); font-size: 12px; border-bottom: 1px solid var(--ui-line); }
.ui-code pre { margin: 0; padding: 14px; overflow-x: auto; color: #dfe6ff; font: 13px/1.6 ui-monospace, Consolas, monospace; }
.ui-math { color: var(--ui-ink); font-size: 20px; }

/* Inputs */
.ui-field { display: grid; gap: var(--ui-inner); min-width: 0; }
.ui-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--ui-surface-strong); color: var(--ui-ink); font: 15px var(--ui-sans); box-shadow: inset 0 0 0 1px var(--ui-line); color-scheme: dark; }
textarea.ui-input { resize: vertical; }
.ui-input:focus-visible, .ui-button:focus-visible, .ui-icon-button:focus-visible, .ui-pressable:focus-visible, .ui-slider:focus-visible { outline: 2px solid var(--ui-habilidad); outline-offset: 2px; }
.ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: 600 15px var(--ui-sans); cursor: pointer; }
.ui-button-solid { background: var(--ui-ink); color: var(--ui-canvas); }
.ui-button-solid:hover { background: #fff; }
.ui-button-outline { background: none; color: var(--ui-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.ui-button-soft { background: var(--ui-surface-strong); color: var(--ui-ink); }
.ui-button-ghost { min-height: 36px; padding: 0 10px; background: none; color: var(--ui-muted); }
.ui-button:hover:not(.ui-button-solid) { background: var(--ui-surface-strong); }
.ui-button:disabled { opacity: .45; cursor: not-allowed; }
.ui-icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ui-surface); color: var(--ui-ink); cursor: pointer; }
.ui-icon-button:hover { background: var(--ui-surface-strong); }
.ui-pressable { display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ui-pressable:hover > * { background: var(--ui-surface-strong); }
.ui-slider { width: 100%; accent-color: var(--ui-habilidad); min-height: 28px; }
.ui-slider-value { font: 400 18px var(--ui-serif); color: var(--ui-ink); }
.ui-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ui-ink); cursor: pointer; }
.ui-check input, .ui-radio input { width: 18px; height: 18px; accent-color: var(--ui-habilidad); }
.ui-radio { display: grid; gap: 2px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ui-radio legend { margin-bottom: 6px; }
.ui-radio label { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ui-ink); cursor: pointer; }
.ui-radio-pills, .ui-radio-segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-radio-pills legend, .ui-radio-segmented legend { width: 100%; }
.ui-radio-pills label, .ui-radio-segmented label { position: relative; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ui-surface-strong); color: var(--ui-muted); font-weight: 600; }
.ui-radio-pills input, .ui-radio-segmented input { position: absolute; opacity: 0; }
.ui-radio-pills label:has(input:checked) { background: var(--ui-ink); color: var(--ui-canvas); }
.ui-radio-pills label:has(input:focus-visible), .ui-radio-segmented label:has(input:focus-visible) { outline: 2px solid var(--ui-habilidad); outline-offset: 2px; }
.ui-radio-segmented { gap: 0; padding: 3px; border-radius: 999px; background: var(--ui-surface-strong); flex-wrap: nowrap; }
.ui-radio-segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ui-radio-segmented label { flex: 1; justify-content: center; background: none; }
.ui-radio-segmented label:has(input:checked) { background: rgb(255 255 255 / .14); color: var(--ui-ink); }
.ui-form { display: grid; gap: var(--ui-group); }
.ui-form > .ui-button { justify-self: start; margin-top: 4px; }
.ui-timer { display: flex; align-items: center; gap: var(--ui-group); flex-wrap: wrap; }
.ui-timer-face { font: 400 40px/1 var(--ui-serif); color: var(--ui-ink); font-variant-numeric: tabular-nums; }

/* Media and data */
.ui-image { position: relative; overflow: hidden; border-radius: 14px; background: var(--ui-surface); }
.ui-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-image.is-loading { animation: ui-pulse 1.4s ease-in-out infinite; }
.ui-image-missing { display: grid; place-items: center; height: 100%; padding: 12px; color: var(--ui-faint); font-size: 13px; text-align: center; }
@keyframes ui-pulse { 50% { background: var(--ui-surface-strong); } }
.ui-icon { flex: none; }
:is(.ui-col, .ui-card) > :is(.ui-badge, .ui-icon) { align-self: flex-start; }
.ui-map .leaflet-tile-pane { filter: invert(1) hue-rotate(200deg) brightness(.75) contrast(.9) saturate(.4); }
.ui-table-wrap { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; color: var(--ui-ink); font-size: 14.5px; }
.ui-table caption { margin-bottom: 8px; color: var(--ui-faint); font-size: 13px; text-align: left; }
.ui-table :is(th, td) { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ui-line); text-align: left; vertical-align: top; }
.ui-table thead th { color: var(--ui-faint); font: 650 11px/1.2 var(--ui-sans); letter-spacing: .08em; text-transform: uppercase; }
.ui-table tbody th { font-weight: 600; }
.ui-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table tbody tr:last-child > * { border-bottom: 0; }
.ui-chart { margin: 0; display: grid; gap: 10px; }
.ui-chart-svg { display: block; width: 100%; max-width: 420px; height: auto; overflow: visible; }
.ui-chart-round { max-width: 200px; justify-self: center; }
.ui-chart-grid { stroke: var(--ui-line); }
.ui-chart-tick { fill: var(--ui-faint); font: 10px var(--ui-sans); }
.ui-chart-center { fill: var(--ui-ink); font: 400 22px var(--ui-serif); }
.ui-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ui-muted); font-size: 13px; }
.ui-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ui-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ui-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ui-map { position: relative; z-index: 0; overflow: hidden; border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-map .leaflet-container, .ui-map.leaflet-container { background: #0d1430; font: 13px var(--ui-sans); }
.ui-map .leaflet-popup-content-wrapper, .ui-map .leaflet-popup-tip { background: #151d3d; color: var(--ui-ink); box-shadow: 0 8px 24px rgb(0 0 0 / .4); }
.ui-map .leaflet-control-zoom a { background: #151d3d; color: var(--ui-ink); border-color: var(--ui-line); }
.ui-map .leaflet-control-attribution { background: rgb(10 15 36 / .7); color: var(--ui-faint); }
.ui-map .leaflet-control-attribution a { color: var(--ui-muted); }
.ui-pin { display: block; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ui-canvas); box-shadow: 0 0 0 1px rgb(255 255 255 / .4); }
.ui-pin-gusto { background: var(--ui-gusto); }
.ui-pin-habilidad { background: var(--ui-habilidad); }
.ui-pin-forma { background: var(--ui-forma); }
.ui-map-fallback { margin: 0; padding: 16px 16px 16px 34px; color: var(--ui-ink); }
.ui-video { overflow: hidden; border-radius: var(--ui-radius); aspect-ratio: 16 / 9; background: var(--ui-surface); }
.ui-video .ui-pressable { display: grid; place-items: center; align-content: center; gap: 10px; height: 100%; color: var(--ui-ink); text-align: center; }
.ui-video iframe { width: 100%; height: 100%; border: 0; }
.ui-htmlview { width: 100%; border: 0; border-radius: var(--ui-radius); background: var(--ui-surface); }

/* Play */
.ui-flashcard { display: grid; min-height: 150px; perspective: 900px; }
.ui-flash-face { grid-area: 1 / 1; display: grid; place-items: center; padding: 20px; border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: inset 0 0 0 1px var(--ui-line); text-align: center; backface-visibility: hidden; transition: transform .5s ease; }
.ui-flash-front { font: 400 22px/1.3 var(--ui-serif); color: var(--ui-ink); }
.ui-flash-back { color: var(--ui-muted); line-height: 1.5; transform: rotateY(180deg); }
.ui-flashcard.is-flipped .ui-flash-front { transform: rotateY(180deg); }
.ui-flashcard.is-flipped .ui-flash-back { transform: rotateY(360deg); }
.ui-pressable.ui-flashcard:hover > * { background: var(--ui-surface-strong); }
.ui-celebration { position: relative; min-height: 0; }
.ui-celebration-text { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: rgb(127 209 168 / .14); color: var(--ui-success); font-weight: 600; }
.ui-celebration i { position: absolute; top: 0; left: var(--x); width: 6px; height: 6px; border-radius: 1px; background: var(--c); animation: ui-fall 1.2s var(--d) ease-in both; }
@keyframes ui-fall { from { transform: translateY(-20px) rotate(0); opacity: 1; } to { transform: translateY(60px) rotate(240deg); opacity: 0; } }

/* Drawing */
.ui-svg { display: block; width: 100%; max-width: 360px; height: auto; color: var(--ui-ink); }
.ui-svg text { fill: var(--ui-muted); font: 11px var(--ui-sans); }

@media (prefers-reduced-motion: reduce) {
  .ui-flash-face { transition: none; }
  .ui-image.is-loading { animation: none; }
}