/* shell.css — o que é igual em todas as páginas: tokens do tema, base,
   cursor, cabeçalho (marca, tema, relógio), rodapé e a janela de data/hora.
   Cada página guarda no próprio <style> só o que é dela. */

/* ── Cursor: mãozinha pixel (estilo Mac clássico). Branca no geral,
   preta com contorno branco sobre o que é clicável. Ponta do dedo = 10 0; 24 px de largura = 3 px de tela por pixel do desenho em Retina. ── */
*, *::before, *::after { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='27' viewBox='0 0 16 18' shape-rendering='crispEdges'%3E%3Crect x='6' y='0' width='2' height='1' fill='%23000'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%23fff'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23000'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='2' width='2' height='1' fill='%23fff'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%23000'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%23fff'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%23000'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%23fff'/%3E%3Crect x='8' y='4' width='3' height='1' fill='%23000'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='5' width='2' height='1' fill='%23fff'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23000'/%3E%3Crect x='9' y='5' width='2' height='1' fill='%23fff'/%3E%3Crect x='11' y='5' width='2' height='1' fill='%23000'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='6' width='2' height='1' fill='%23fff'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23000'/%3E%3Crect x='9' y='6' width='2' height='1' fill='%23fff'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%23000'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%23fff'/%3E%3Crect x='13' y='6' width='2' height='1' fill='%23000'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23000'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='7' width='2' height='1' fill='%23fff'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='9' y='7' width='2' height='1' fill='%23fff'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23fff'/%3E%3Crect x='4' y='8' width='2' height='1' fill='%23000'/%3E%3Crect x='6' y='8' width='7' height='1' fill='%23fff'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%23000'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%23fff'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='9' width='3' height='1' fill='%23fff'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='9' width='9' height='1' fill='%23fff'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='10' width='12' height='1' fill='%23fff'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%23000'/%3E%3Crect x='4' y='11' width='11' height='1' fill='%23fff'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%23000'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%23000'/%3E%3Crect x='4' y='12' width='10' height='1' fill='%23fff'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%23000'/%3E%3Crect x='4' y='13' width='1' height='1' fill='%23000'/%3E%3Crect x='5' y='13' width='9' height='1' fill='%23fff'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%23000'/%3E%3Crect x='5' y='14' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='14' width='7' height='1' fill='%23fff'/%3E%3Crect x='13' y='14' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='15' width='1' height='1' fill='%23000'/%3E%3Crect x='7' y='15' width='6' height='1' fill='%23fff'/%3E%3Crect x='13' y='15' width='1' height='1' fill='%23000'/%3E%3Crect x='6' y='16' width='8' height='1' fill='%23000'/%3E%3C/svg%3E") 10 0, auto !important; }
/* O que fica DENTRO de link/botão (um <strong>, um ícone) herda a mão preta. */
a, a *, button, button *, .gloss, .gloss *, [onclick], [onclick] *, label, label *, select, [role="button"], [role="button"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='27' viewBox='0 0 16 18' shape-rendering='crispEdges'%3E%3Crect x='6' y='0' width='2' height='1' fill='%23fff'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='1' width='2' height='1' fill='%23000'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23fff'/%3E%3Crect x='5' y='2' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='2' width='2' height='1' fill='%23000'/%3E%3Crect x='8' y='2' width='1' height='1' fill='%23fff'/%3E%3Crect x='5' y='3' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='3' width='2' height='1' fill='%23000'/%3E%3Crect x='8' y='3' width='1' height='1' fill='%23fff'/%3E%3Crect x='5' y='4' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%23000'/%3E%3Crect x='8' y='4' width='3' height='1' fill='%23fff'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='5' width='2' height='1' fill='%23000'/%3E%3Crect x='8' y='5' width='1' height='1' fill='%23fff'/%3E%3Crect x='9' y='5' width='2' height='1' fill='%23000'/%3E%3Crect x='11' y='5' width='2' height='1' fill='%23fff'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='6' width='2' height='1' fill='%23000'/%3E%3Crect x='8' y='6' width='1' height='1' fill='%23fff'/%3E%3Crect x='9' y='6' width='2' height='1' fill='%23000'/%3E%3Crect x='11' y='6' width='1' height='1' fill='%23fff'/%3E%3Crect x='12' y='6' width='1' height='1' fill='%23000'/%3E%3Crect x='13' y='6' width='2' height='1' fill='%23fff'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23fff'/%3E%3Crect x='5' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='7' width='2' height='1' fill='%23000'/%3E%3Crect x='8' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='9' y='7' width='2' height='1' fill='%23000'/%3E%3Crect x='11' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='12' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='13' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='14' y='7' width='1' height='1' fill='%23000'/%3E%3Crect x='15' y='7' width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23000'/%3E%3Crect x='4' y='8' width='2' height='1' fill='%23fff'/%3E%3Crect x='6' y='8' width='7' height='1' fill='%23000'/%3E%3Crect x='13' y='8' width='1' height='1' fill='%23fff'/%3E%3Crect x='14' y='8' width='1' height='1' fill='%23000'/%3E%3Crect x='15' y='8' width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='9' width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='9' width='3' height='1' fill='%23000'/%3E%3Crect x='5' y='9' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='9' width='9' height='1' fill='%23000'/%3E%3Crect x='15' y='9' width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='10' width='1' height='1' fill='%23fff'/%3E%3Crect x='3' y='10' width='12' height='1' fill='%23000'/%3E%3Crect x='15' y='10' width='1' height='1' fill='%23fff'/%3E%3Crect x='3' y='11' width='1' height='1' fill='%23fff'/%3E%3Crect x='4' y='11' width='11' height='1' fill='%23000'/%3E%3Crect x='15' y='11' width='1' height='1' fill='%23fff'/%3E%3Crect x='3' y='12' width='1' height='1' fill='%23fff'/%3E%3Crect x='4' y='12' width='10' height='1' fill='%23000'/%3E%3Crect x='14' y='12' width='1' height='1' fill='%23fff'/%3E%3Crect x='4' y='13' width='1' height='1' fill='%23fff'/%3E%3Crect x='5' y='13' width='9' height='1' fill='%23000'/%3E%3Crect x='14' y='13' width='1' height='1' fill='%23fff'/%3E%3Crect x='5' y='14' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='14' width='7' height='1' fill='%23000'/%3E%3Crect x='13' y='14' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='15' width='1' height='1' fill='%23fff'/%3E%3Crect x='7' y='15' width='6' height='1' fill='%23000'/%3E%3Crect x='13' y='15' width='1' height='1' fill='%23fff'/%3E%3Crect x='6' y='16' width='8' height='1' fill='%23fff'/%3E%3C/svg%3E") 10 0, pointer !important; }



/* ── Tema ── */
:root {
  --header-bg:      #c8bfa8;
  --link:           #0000EE;
  --link-visited:   #551A8B;
  --gloss:          #8e24aa;
  --header-text:    #1a1208;
  --header-border:  #7a7065;
  --header-hi:      #ede5d0;
  --body-bg:        #e85c00;
  --card-bg:        #f5e9d0;
  --card-text:      #1a0a00;
  --card-border-lt: #fff8ec;
  --card-border-dk: #7a3800;
  --titlebar-from:  #3d1400;
  --titlebar-text:  #f5e9d0;
  --btn-bg:         #dfd0b0;
  --btn-lt:         #f5ead0;
  --btn-dk:         #7a5030;
  --footer-bg:      #1a0a00;
  --footer-text:    #c8aa80;
  --sun-color:      #1a0a00;
}

[data-theme="dark"] {
  --header-bg:      #1a0030;
  --link:           #F97316;
  --link-visited:   #fdba74;
  --gloss:          #d8b4fe;
  --header-text:    #e0ccff;
  --header-border:  #6b3d8a;
  --header-hi:      #ede5d0;
  --body-bg:        #2d004d;
  --card-bg:        #1a0030;
  --card-text:      #e8d0ff;
  --card-border-lt: #7a4d9a;
  --card-border-dk: #080010;
  --titlebar-from:  #080010;
  --titlebar-text:  #e8d0ff;
  --btn-bg:         #2a0044;
  --btn-lt:         #7a4d9a;
  --btn-dk:         #080010;
  --footer-bg:      #080010;
  --footer-text:    #b080d0;
  --sun-color:      #e8d0ff;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  background-color: var(--body-bg);
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s;
}

/* ── Cabeçalho (barra Win98) ── */
header {
  position: relative;
  background-color: var(--header-bg);
  border-top:    2px solid var(--header-hi);
  border-left:   2px solid var(--header-hi);
  border-bottom: 2px solid var(--header-border);
  border-right:  2px solid var(--header-border);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  color: var(--header-text);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
  text-decoration: none;
  user-select: none;
}
.brand:hover { text-decoration: none; }

.header-right { display: flex; align-items: center; gap: 10px; }

/* Botões da barra: relevo Win98, afundam ao clicar */
.bar-btn {
  background: var(--header-bg);
  color: var(--header-text);
  border-top:    2px solid var(--header-hi);
  border-left:   2px solid var(--header-hi);
  border-bottom: 2px solid var(--header-border);
  border-right:  2px solid var(--header-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bar-btn:active,
.bar-btn[aria-expanded="true"] {
  border-top:    2px solid var(--header-border);
  border-left:   2px solid var(--header-border);
  border-bottom: 2px solid var(--header-hi);
  border-right:  2px solid var(--header-hi);
}

#theme-toggle { padding: 3px 6px; }
#sun-icon { width: 22px; height: 22px; fill: var(--sun-color); display: block; }
#sun-icon line { stroke: var(--sun-color); }

#clock {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 3px 8px;
  min-height: 32px;
}

/* ── Rodapé ── */
footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  text-align: center;
  padding: 10px 20px;
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.03em;
  border-top: 2px solid rgba(255,255,255,0.05);
}

/* ── Janela "Data/Hora" ── */
.dt-window {
  position: absolute;
  top: calc(100% + 6px);
  right: 10px;
  z-index: 1000;
  width: 380px;
  max-width: calc(100vw - 20px);
  background: var(--card-bg);
  color: var(--card-text);
  border-top:    3px solid var(--card-border-lt);
  border-left:   3px solid var(--card-border-lt);
  border-bottom: 3px solid var(--card-border-dk);
  border-right:  3px solid var(--card-border-dk);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
}
.dt-window[hidden] { display: none; }

.dt-titlebar {
  background: var(--titlebar-from);
  color: var(--titlebar-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.dt-x {
  width: 16px; height: 14px;
  background: var(--btn-bg);
  color: var(--card-text);
  border-top:    2px solid var(--btn-lt);
  border-left:   2px solid var(--btn-lt);
  border-bottom: 2px solid var(--btn-dk);
  border-right:  2px solid var(--btn-dk);
  font: 0.6rem/1 Arial, sans-serif;
  display: flex; align-items: center; justify-content: center;
}

.dt-body { padding: 14px; display: flex; gap: 14px; align-items: flex-start; }

/* Moldura afundada, como os campos do Win98 */
.dt-sunken {
  border-top:    2px solid var(--card-border-dk);
  border-left:   2px solid var(--card-border-dk);
  border-bottom: 2px solid var(--card-border-lt);
  border-right:  2px solid var(--card-border-lt);
}

.dt-cal { flex: 1; min-width: 0; }
.dt-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dt-nav button {
  width: 22px; height: 20px;
  background: var(--btn-bg);
  color: var(--card-text);
  border-top:    2px solid var(--btn-lt);
  border-left:   2px solid var(--btn-lt);
  border-bottom: 2px solid var(--btn-dk);
  border-right:  2px solid var(--btn-dk);
  font: 0.7rem/1 Arial, sans-serif;
}
.dt-nav button:active {
  border-top:    2px solid var(--btn-dk);
  border-left:   2px solid var(--btn-dk);
  border-bottom: 2px solid var(--btn-lt);
  border-right:  2px solid var(--btn-lt);
}
.dt-month { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 600; }

.dt-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.8rem;
  padding: 4px;
  background: var(--card-bg);
}
.dt-grid .dow { font-weight: 600; opacity: 0.7; padding-bottom: 2px; }
.dt-grid .day { padding: 2px 0; }
.dt-grid .today { background: var(--titlebar-from); color: var(--titlebar-text); }
[data-theme="dark"] .dt-grid .today { background: var(--card-border-lt); color: #fff; }

.dt-clock { width: 130px; flex-shrink: 0; text-align: center; }
.dt-clock svg { display: block; width: 100%; height: auto; background: var(--card-bg); }
.dt-face  { fill: none; stroke: var(--card-border-dk); stroke-width: 2; }
.dt-tick  { stroke: var(--card-text); stroke-width: 2; }
.dt-tick.min { stroke-width: 0.8; opacity: 0.5; }
.dt-hand  { stroke: var(--card-text); stroke-linecap: round; }
.dt-hand.s { stroke: #c00000; }
[data-theme="dark"] .dt-hand.s { stroke: #F97316; }
.dt-digital { margin-top: 6px; font-size: 0.9rem; letter-spacing: 0.06em; padding: 2px 0; background: var(--card-bg); }

.dt-foot { display: flex; justify-content: flex-end; padding: 0 14px 12px; }
.dt-ok {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.9rem;
  width: 72px;
  padding: 2px 0;
  background: var(--btn-bg);
  color: var(--card-text);
  border-top:    2px solid var(--btn-lt);
  border-left:   2px solid var(--btn-lt);
  border-bottom: 2px solid var(--btn-dk);
  border-right:  2px solid var(--btn-dk);
}
.dt-ok:active {
  border-top:    2px solid var(--btn-dk);
  border-left:   2px solid var(--btn-dk);
  border-bottom: 2px solid var(--btn-lt);
  border-right:  2px solid var(--btn-lt);
}

@media (max-width: 420px) {
  .dt-window { right: 10px; left: 10px; width: auto; }
  .dt-body { flex-direction: column; align-items: stretch; }
  .dt-clock { width: 130px; margin: 0 auto; }
}

/* ── Links de texto: web 1.0 ──
   Link de verdade = azul, sublinhado contínuo (roxo depois de visitado);
   o que sai do site ganha ↗. Vale para o texto corrido das páginas. */
.post-body a, .intro-text a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-body a:visited, .intro-text a:visited { color: var(--link-visited); }
.post-body a[href^="http"]:not([href^="https://zeroia.org"])::after {
  content: "↗";
  display: inline-block;
  font: 0.75em/1 Arial, sans-serif;
  margin-left: 2px;
  text-decoration: none;
}

/* ── Palavra com explicação (glossário) ──
   Cor do texto, sublinhado pontilhado e um "?" miúdo, como a ajuda do
   Windows 98. Clicar abre a janelinha .gloss-pop. */
.gloss {
  color: var(--gloss);
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.gloss::after {
  content: "?";
  font: bold 0.6em/1 Arial, sans-serif;
  vertical-align: super;
  margin-left: 1px;
  opacity: 0.75;
}
.gloss:hover, .gloss:focus-visible { background: var(--btn-bg); outline: none; }

.gloss-pop {
  position: fixed;
  z-index: 1100;
  width: 260px;
  max-width: calc(100vw - 16px);
  background: var(--card-bg);
  color: var(--card-text);
  border-top:    3px solid var(--card-border-lt);
  border-left:   3px solid var(--card-border-lt);
  border-bottom: 3px solid var(--card-border-dk);
  border-right:  3px solid var(--card-border-dk);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
  font-family: 'EB Garamond', Georgia, serif;
}
.gloss-pop[hidden] { display: none; }
.gloss-pop-bar {
  background: var(--titlebar-from);
  color: var(--titlebar-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
  touch-action: none;
}
.gloss-pop-x {
  width: 16px; height: 14px; flex-shrink: 0;
  background: var(--btn-bg);
  color: var(--card-text);
  border-top:    2px solid var(--btn-lt);
  border-left:   2px solid var(--btn-lt);
  border-bottom: 2px solid var(--btn-dk);
  border-right:  2px solid var(--btn-dk);
  font: 0.6rem/1 Arial, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.gloss-pop-body { padding: 10px 12px 12px; font-size: 0.92rem; line-height: 1.55; }
.gloss-pop-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--link);
  text-decoration: underline;
}
.gloss-pop-link::after { content: " ↗"; font-family: Arial, sans-serif; font-size: 0.8em; }
.gloss-pop-link[hidden] { display: none; }

/* ── Link do YouTube: ▶ no lugar do ↗ e janela de vídeo (shell.js) ── */
.post-body a[href^="http"]:is([href*="youtube.com/"], [href*="youtu.be/"])::after,
.intro-text a[href^="http"]:is([href*="youtube.com/"], [href*="youtu.be/"])::after {
  content: "▶";
  display: inline-block;
  font: 0.7em/1 Arial, sans-serif;
  margin-left: 3px;
  text-decoration: none;
}

.yt-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}
.yt-overlay[hidden] { display: none; }
.yt-win {
  width: min(860px, 100%);
  background: var(--card-bg);
  color: var(--card-text);
  border-top:    3px solid var(--card-border-lt);
  border-left:   3px solid var(--card-border-lt);
  border-bottom: 3px solid var(--card-border-dk);
  border-right:  3px solid var(--card-border-dk);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
}
.yt-win.vertical { width: min(380px, 100%); }
.yt-bar {
  background: var(--titlebar-from);
  color: var(--titlebar-text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  display: flex; align-items: center; justify-content: space-between;
  user-select: none;
}
.yt-x {
  width: 18px; height: 16px;
  background: var(--btn-bg);
  color: var(--card-text);
  border-top:    2px solid var(--btn-lt);
  border-left:   2px solid var(--btn-lt);
  border-bottom: 2px solid var(--btn-dk);
  border-right:  2px solid var(--btn-dk);
  font: 0.7rem/1 Arial, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.yt-frame {
  margin: 8px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-top:    2px solid var(--card-border-dk);
  border-left:   2px solid var(--card-border-dk);
  border-bottom: 2px solid var(--card-border-lt);
  border-right:  2px solid var(--card-border-lt);
}
.yt-win.vertical .yt-frame { aspect-ratio: 9 / 16; width: min(calc(100% - 16px), calc(75vh * 9 / 16)); margin: 8px auto; }
.yt-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.yt-foot { padding: 0 10px 8px; text-align: right; font-size: 0.85rem; }
.yt-out { color: var(--link); text-decoration: underline; }
.yt-out::after { content: " ↗"; font-family: Arial, sans-serif; font-size: 0.8em; }