/* site.css : Le Royaume sous l'Ombre. Grammaire : chaptered editorial.
   Deux fonds, coupés net (jamais interpolés) : le papier (annales) et la mer.
   Un seul accent, en deux valeurs de clarté selon le fond (même teinte). */

:root {
  --sc-canvas:     #E7EBE8;
  --sc-surface:    #DCE3E0;
  --sc-ink:        #0F171B;
  --sc-ink-soft:   #43525A;
  --sc-accent:     #0B6660;
  --sc-accent-ink: #F2F7F5;

  --sea:        #071216;
  --sea-land:   #0F2229;
  --sea-ink:    #E3ECE9;
  --sea-soft:   #9CB1B0;
  --sea-accent: #6EC5B8;

  --sc-font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sc-font-text:    "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gauge-w: 5.5rem;
  --title-left: var(--sc-gutter);
  --sc-shadow-color: 200 30% 6%;
}
@media (min-width: 1100px) {
  :root { --title-left: calc(var(--gauge-w) + clamp(2rem, 6vw, 7rem)); }
}

[hidden] { display: none !important; }

/* Deux fonds. On restate `color` : le jeton seul ne recolore pas un héritage déjà résolu. */
[data-ground="paper"] {
  --sc-canvas: #E7EBE8; --sc-ink: #0F171B; --sc-ink-soft: #43525A; --sc-accent: #0B6660; --sc-accent-ink: #F2F7F5;
  --sc-hairline: color-mix(in oklab, #0F171B 16%, transparent);
  background: var(--sc-canvas); color: var(--sc-ink);
}
[data-ground="sea"] {
  --sc-canvas: #071216; --sc-ink: #E3ECE9; --sc-ink-soft: #9CB1B0; --sc-accent: #6EC5B8; --sc-accent-ink: #071216;
  --sc-hairline: color-mix(in oklab, #E3ECE9 18%, transparent);
  background: var(--sc-canvas); color: var(--sc-ink);
}

html { scroll-padding-top: 0; }
body {
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  font-optical-sizing: auto;
  font-kerning: normal;
  hyphenate-limit-chars: 6 3 3;
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* ----------------------------------------------------------- petites pièces */
.mono, .title__status, .page__folio, .intertitle__n, .intertitle__meta, .teaser__count, .close__count,
.week time, .gauge, .folio-strip {
  font-family: var(--sc-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.cta {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.95rem 1.6rem;
  background: var(--sc-ink); color: var(--sc-canvas);
  font: 500 0.8rem/1 var(--sc-font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border-radius: 0; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.cta::after { content: "→"; transition: transform 160ms var(--sc-ease-out); }
.cta:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
  .cta:hover::after { transform: translateX(3px); }
}

/* --------------------------------------------------------- 1 · page de titre */
.title {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  padding: clamp(3rem, 11vh, 7.5rem) var(--sc-gutter) 0 var(--title-left);
}
.title__copy { position: relative; z-index: 3; max-width: 64rem; }
.title__h {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 380;
  font-size: clamp(3.3rem, 1.6rem + 6.4vw, 7.5rem);
  line-height: 0.94; letter-spacing: -0.035em;
  text-wrap: balance;
}
.title__h span { display: block; }
.title__h span + span { font-style: italic; font-weight: 340; margin-left: 0.06em; }
.title__sub {
  margin: clamp(1.4rem, 3.4vh, 2.2rem) 0 0; max-width: 30ch;
  font-size: var(--sc-t-lg); line-height: 1.38; letter-spacing: -0.01em; color: var(--sc-ink); text-wrap: pretty;
}
.title__act { margin: clamp(1.4rem, 3.6vh, 2.2rem) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; }
.title__status { color: var(--sc-ink-soft); max-width: 30ch; line-height: 1.5; }

.title__planes, .plane--front {
  position: absolute; inset: auto 0 0 0; height: 80vh; height: 80svh; pointer-events: none;
}
.title__planes { z-index: 1; }
.plane--front { z-index: 2; }
.title__planes .plane { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.plane--front { width: 100%; will-change: transform; }
.plane { color: var(--sc-ink); overflow: hidden; }
.plane .ink { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.plane .paper { fill: var(--sc-canvas); }
.plane .ink--bold { stroke-width: 1.9; }
.plane .ink--soft { opacity: 0.55; }
.plane .ink--sea { opacity: 0.5; stroke-width: 1; }
.plane .ink--faint { opacity: 0.32; stroke-width: 1; }
.plane .ink--dash { stroke-dasharray: 2 5; }
.plane .hatch { opacity: 0.55; stroke: none; }
.plane .hatch-line { stroke: currentColor; stroke-width: 0.9; opacity: 0.8; }
.plane .svg-text { font: 500 22px var(--sc-font-mono); fill: currentColor; stroke: none; letter-spacing: 0.1em; }
.plane .paper.ink { fill: var(--sc-canvas); stroke: currentColor; }

@media (max-width: 699px) {
  .title { padding-top: clamp(2.2rem, 7vh, 4rem); }
  .title__h { font-size: clamp(3.1rem, 15vw, 4.2rem); }
  .title__sub { font-size: 1.15rem; }
  .title__planes, .plane--front { height: 56vh; height: 56svh; }
}

/* ------------------------------------------------------------ avant l'épisode 1 */
.teaser { padding: var(--sc-section) var(--sc-gutter) var(--sc-section) var(--title-left); min-height: 70vh; display: grid; align-content: center; }
.teaser__inner { max-width: 44rem; }
.teaser__h { margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.teaser__lede { margin: 1.6rem 0 0; font-size: var(--sc-t-xl); line-height: 1.32; letter-spacing: -0.015em; color: var(--sc-ink); text-wrap: pretty; max-width: 30ch; }
.teaser__count { margin: 2rem 0 0; color: var(--sc-ink-soft); }

/* --------------------------------------------------------- 2 · l'intertitre */
.intertitle {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: end; justify-items: start;
  padding: 0 var(--sc-gutter) clamp(5.5rem, 16vh, 10rem) var(--title-left);
}
.intertitle__inner { max-width: 60rem; }
.intertitle__n { margin: 0; color: var(--sc-accent); text-transform: uppercase; letter-spacing: 0.14em; }
.intertitle__t {
  margin: 1.1rem 0 0; max-width: 15ch;
  font-family: var(--sc-font-display); font-weight: 360; font-style: italic;
  font-size: clamp(2.9rem, 1.3rem + 6vw, 6rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance;
}
.intertitle__meta { margin: 1.6rem 0 0; color: var(--sc-ink-soft); max-width: 46ch; line-height: 1.6; }
.intertitle__water { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64px; color: var(--sc-accent); }
.intertitle__water .wl { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------------------- 3 · les pages */
.page {
  padding: clamp(4rem, 9vw, 8rem) var(--sc-gutter) clamp(4rem, 9vw, 8rem) var(--title-left);
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 38rem);
  column-gap: clamp(2rem, 4vw, 4rem); justify-content: start;
}
.page + .page { border-top: 1px solid var(--sc-hairline); }
.page__margin { position: sticky; top: 2.2rem; align-self: start; padding-top: 0.5rem; }
.page__lieu { margin: 0 0 0.7rem; font-style: italic; font-size: 1.05rem; line-height: 1.35; color: var(--sc-ink-soft); text-wrap: balance; }
.page__folio { margin: 0; color: var(--sc-accent); text-transform: uppercase; letter-spacing: 0.12em; }
.page__text p {
  margin: 0 0 1.05em;
  font-size: clamp(1.15rem, 1.08rem + 0.36vw, 1.34rem);
  line-height: 1.66; letter-spacing: -0.003em; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto;
  color: var(--sc-ink);
}
.page__text p:first-child::first-line { font-variant-caps: all-small-caps; letter-spacing: 0.06em; }
.page__text p:last-child { margin-bottom: 0; }
.page__text em { font-style: italic; }

@media (max-width: 899px) {
  .page { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; padding-block: 3.6rem; }
  .page__margin { position: static; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; }
  .page__lieu { margin: 0; }
}

/* --------------------------------------- la gravure d'ouverture de l'épisode */
.plate {
  margin: 0; background: var(--sc-canvas);
  padding: clamp(3rem, 7vw, 6rem) var(--sc-gutter) 0 var(--title-left);
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 38rem); column-gap: clamp(2rem, 4vw, 4rem); justify-content: start;
}
.plate img {
  grid-column: 2; width: 100%; height: auto; max-height: 82vh; max-height: 82svh; object-fit: contain; object-position: left top;
  /* les bords se dissolvent dans le papier, comme une vignette gravée */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
@media (max-width: 899px) { .plate { grid-template-columns: minmax(0, 1fr); padding-top: 2.4rem; } .plate img { grid-column: 1; } }

/* ----------------------------------------------------------------- silence */
.silence { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding: 0 var(--sc-gutter) 0 var(--title-left); }
.silence__p { margin: 0; font-style: italic; font-size: var(--sc-t-xl); letter-spacing: -0.015em; color: var(--sc-ink-soft); }

/* ------------------------------------------------ 4 · le pic : la marée */
.tide { position: relative; height: 340vh; background: var(--sea); }
.tide__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: 0 var(--sc-gutter) 0 var(--title-left);
}
.tide__map { justify-self: center; width: min(100%, 92svh); }
.tide__map svg { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.tide__copy { max-width: 26rem; }
.tide__h { margin: 0 0 clamp(1.4rem, 4vh, 2.6rem); font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); }
.tide__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.9rem, 2.6vh, 1.6rem); }
.tide__lines li {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem); line-height: 1.24; letter-spacing: -0.012em; text-wrap: pretty;
  opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity 520ms var(--sc-ease-out), transform 520ms var(--sc-ease-out);
}
.tide__lines li.is-on { opacity: 1; transform: none; }
.tide__lines li.is-past { opacity: 0.62; transform: none; }

.map-sea { fill: transparent; }
.map-waves .map-wave, .map-wave { fill: none; stroke: var(--sea-accent); stroke-width: 1; opacity: 0.2; }
.map-land { fill: var(--sea-land); }
.map-contour { fill: none; stroke: var(--sea-soft); stroke-width: 1; opacity: 0.5; }
.map-ghost { fill: none; stroke: var(--sea-accent); stroke-width: 1; stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.map-ghost.is-under { opacity: 0.6; }
.map-coast { fill: none; stroke: var(--sea-accent); stroke-width: 2.4; stroke-linejoin: round; }
.map-oldcoast { fill: none; stroke: var(--sea-ink); stroke-width: 1.4; stroke-dasharray: 0.5 7; stroke-linecap: round; opacity: 0.85; }
.map-river { fill: none; stroke: var(--sea-accent); stroke-width: 1.7; stroke-linecap: round; opacity: 0.9; }
.map-village__dot { fill: var(--sea-ink); transition: fill 300ms; }
.map-village__ring { fill: none; stroke: var(--sea-accent); stroke-width: 1.2; opacity: 0; transition: opacity 300ms; }
.map-village.is-under .map-village__dot { fill: none; stroke: var(--sea-accent); stroke-width: 1.2; opacity: 0.7; }
.map-village.is-under .map-village__ring { opacity: 0.55; }
.map-city__mark { fill: var(--sea-ink); }
.map-label { font: italic 500 19px var(--sc-font-display); fill: var(--sea-ink); }
.map-label--city { font-style: normal; font-weight: 600; font-size: 20px; letter-spacing: 0.02em; }
.map-label--river { fill: var(--sea-accent); font-size: 17px; }
.map-label--sea { fill: var(--sea-soft); font: 500 14px var(--sc-font-mono); letter-spacing: 0.24em; text-transform: uppercase; }

@media (max-width: 899px) {
  .tide__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; padding: 1.4rem var(--sc-gutter) 1.2rem; gap: 0.6rem; }
  .tide__map { width: min(100%, 52svh); align-self: center; }
  .tide__copy { max-width: none; }
  .tide__h { margin-bottom: 0.7rem; }
  .tide__lines { display: grid; }
  .tide__lines li { font-size: 1.02rem; line-height: 1.28; grid-area: 1 / 1; }
  .tide__lines li.is-past { opacity: 0; }
}

/* ------------------------------------------------------ 5 · les samedis */
.weeks { padding: var(--sc-section) var(--sc-gutter) var(--sc-section) var(--title-left); }
.weeks__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 7rem); max-width: 84rem; }
.weeks__h { margin: 0; font-family: var(--sc-font-display); font-weight: 380; font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: -0.028em; }
.weeks__p { margin: 1.3rem 0 0; color: var(--sc-ink-soft); max-width: 32ch; text-wrap: pretty; }
.weeks__list { list-style: none; margin: 0; padding: 0; }
.week {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; column-gap: 1.6rem; align-items: baseline;
  padding: 1.45rem 0; border-top: 1px solid var(--sc-hairline);
}
.week time { color: var(--sc-ink-soft); text-transform: uppercase; }
.week__t { margin: 0; font: 400 1.45rem/1.2 var(--sc-font-display); letter-spacing: -0.015em; text-wrap: balance; }
.week__p { margin: 0.5rem 0 0; color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.5; max-width: 52ch; text-wrap: pretty; }
.week__a { font: 500 0.75rem/1 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); text-underline-offset: 0.3em; }
.week--next .week__t { font-style: italic; color: var(--sc-ink-soft); }
.week--sea { color: var(--sc-ink-soft); }
.week--sea .week__t { color: var(--sc-ink-soft); font-style: italic; }
.week--sea {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='12'><path d='M0 8q7-6 14 0t14 0' fill='none' stroke='%230B6660' stroke-opacity='0.22' stroke-width='1'/></svg>");
  background-size: 28px 12px;
}
.weeks__line { list-style: none; position: relative; padding: 1.7rem 0 1.2rem; border-top: 1.5px solid var(--sc-accent); color: var(--sc-accent); }
.weeks__line span { font: 500 0.72rem/1.4 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.weeks__line svg { position: absolute; left: 0; right: 0; top: -9px; width: 100%; height: 16px; overflow: visible; }
.weeks__line path { fill: none; stroke: currentColor; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
@media (max-width: 899px) {
  .weeks__wrap { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; }
  .week time { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ 6 · la fin */
.close {
  min-height: 84vh; min-height: 84svh; display: grid; align-content: end;
  padding: var(--sc-section) var(--sc-gutter) clamp(3rem, 8vh, 5rem) var(--title-left);
}
.close__inner { max-width: 40rem; }
.close__h { margin: 0 0 1.4rem; font-family: var(--sc-font-display); font-weight: 380; font-size: var(--sc-t-xl); letter-spacing: -0.02em; line-height: 1.1; }
.close__p { margin: 0 0 1rem; font-size: 1.18rem; line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.close__p a { color: var(--sc-ink); text-decoration-color: var(--sc-accent); text-decoration-thickness: 1.5px; text-underline-offset: 0.28em; }
@media (hover: hover) and (pointer: fine) { .close__p a:hover { color: var(--sc-accent); } }
.close__count { margin: 2.4rem 0 0; color: var(--sc-accent); }
.close__fine { margin: 3.6rem 0 0; font: 400 0.75rem/1.6 var(--sc-font-mono); letter-spacing: 0.05em; color: var(--sc-ink-soft); }

/* ------------------------------ le geste signature : la jauge de marée (folio de marge) */
.gauge {
  --g-ink: #0F171B; --g-soft: #43525A; --g-accent: #0B6660;
  position: fixed; left: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 60;
  width: 4.4rem; color: var(--g-ink); display: none; pointer-events: none;
}
.gauge[data-ground="sea"] { --g-ink: #E3ECE9; --g-soft: #9CB1B0; --g-accent: #6EC5B8; }
@media (min-width: 1100px) { .gauge:not([hidden]) { display: block; } }
.gauge ol { list-style: none; margin: 0; padding: 0 0 1.6rem; position: relative; }
.gauge ol::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: color-mix(in oklab, var(--g-ink) 30%, transparent); }
.gauge li { position: relative; }
.gauge a, .gauge .gauge__i {
  display: flex; align-items: center; gap: 0.6rem; height: 2.2rem; padding-left: 0;
  color: var(--g-ink); text-decoration: none; pointer-events: auto; border-radius: 0;
}
.gauge a::before, .gauge .gauge__i::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; background: transparent; flex: none;
  transition: background-color 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.gauge a:hover::before { transform: scale(1.25); }
.gauge a:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.gauge li.is-current a::before { background: var(--g-accent); border-color: var(--g-accent); }
.gauge li.is-next .gauge__i { color: var(--g-soft); }
.gauge li.is-next .gauge__i::before { border-style: dashed; }
.gauge li.is-sea .gauge__i { color: var(--g-soft); opacity: 0.85; }
.gauge li.is-sea .gauge__i::before { border-color: var(--g-accent); opacity: 0.7; }
.gauge__line { height: 0; }
.gauge__sea {
  position: absolute; left: -6px; right: -8px; bottom: 0; pointer-events: none;
  border-top: 1.5px solid var(--g-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='10'><path d='M0 6q5.5-5 11 0t11 0' fill='none' stroke='%236EC5B8' stroke-opacity='0.5' stroke-width='1'/></svg>");
  background-size: 22px 10px;
  transition: top 300ms var(--sc-ease-out);
}
.gauge[data-ground="paper"] .gauge__sea {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='10'><path d='M0 6q5.5-5 11 0t11 0' fill='none' stroke='%230B6660' stroke-opacity='0.45' stroke-width='1'/></svg>");
}
.gauge__folio { margin: 0.7rem 0 0 1.05rem; color: var(--g-soft); white-space: nowrap; font-size: 0.68rem; line-height: 1.2; }

.folio-strip {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0;
  padding: 0.5rem var(--sc-gutter) calc(0.5rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--sc-canvas) 92%, transparent);
  border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft);
  --sc-canvas: #E7EBE8; --sc-ink-soft: #43525A; --sc-hairline: color-mix(in oklab, #0F171B 16%, transparent);
}
.folio-strip[data-ground="sea"] { --sc-canvas: #071216; --sc-ink-soft: #9CB1B0; --sc-hairline: color-mix(in oklab, #E3ECE9 18%, transparent); }
@media (min-width: 1100px) { .folio-strip { display: none !important; } }

/* --------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .tide { height: auto; }
  .tide__stage { position: relative; height: auto; min-height: 100vh; padding-block: 3rem; }
  .tide__lines li, .tide__lines li.is-past { opacity: 1; transform: none; }
  .title__planes .plane, .plane--front { transform: none !important; }
}

/* ------------------------------------------------ impression : l'épisode en A4 */
@page { size: A4; margin: 22mm 20mm; }
@media print {
  body, [data-ground] { background: #fff !important; color: #000 !important; }
  .title, .teaser, .silence, .tide, .plate, .weeks, .close, .gauge, .folio-strip, .intertitle__water, .sc-grain, [data-sc-progress] { display: none !important; }
  .intertitle { min-height: 0; display: block; padding: 0 0 10mm; }
  .intertitle__t { font-size: 24pt; }
  .page { display: block; padding: 0; break-after: page; border: 0; }
  .page__margin { position: static; margin-bottom: 6mm; }
  .page__text p { font-size: 11pt; line-height: 1.5; color: #000; }
}

.preview-flag { position: fixed; top: 0.6rem; right: 0.6rem; z-index: 80; margin: 0; padding: 0.35rem 0.6rem; background: #0F171B; color: #F2F7F5; font: 500 0.68rem/1.3 var(--sc-font-mono); max-width: 22rem; }