@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("./assets/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Design tokens: 4px spacing grid, 5 font sizes, radii pill/card/sm, colour and glass roles. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;

  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-sm: 8px;

  --c-bg: #143844;
  --c-ink: #0e2a30;
  --c-ink-muted: #3d6468;
  --c-on-dark: #f4f8f6;
  --c-white: #fff;
  --c-link: #0c5554;
  --c-disabled: #8e989c;
  --c-line: rgba(20, 60, 64, .16);
  --c-gold: #e7b43f;
  --c-gold-strong: #ffb03a;
  --c-gold-light: #fff6c4;
  --c-gold-ink: #3d3116;
  --c-focus: #12343a;
  --c-focus-ring: #ffe08a;
  --ink-rgb: 8, 24, 30;
  --gold-rgb: 255, 196, 80;

  --glass-light: rgba(255, 252, 247, .42);
  --glass-light-strong: rgba(255, 252, 247, .72);
  --glass-bar: rgba(255, 252, 247, .48);
  --glass-dark: rgba(12, 34, 42, .5);
  --glass-dark-mid: rgba(16, 52, 58, .66);
  --glass-dark-strong: rgba(16, 52, 58, .9);
  --glass-chip: rgba(255, 255, 255, .1);
  --glass-chip-edge: rgba(255, 255, 255, .32);
  --glass-edge: rgba(255, 255, 255, .42);
  --glass-edge-strong: rgba(255, 255, 255, .78);
  --glass-blur: blur(18px) saturate(1.35);
  --glass-blur-soft: blur(7px) saturate(1.2);
  --halo: 0 0 5px rgba(255, 252, 247, .7);
  --shadow-1: 0 4px 16px rgba(var(--ink-rgb), .12);
  --shadow-2: 0 8px 24px rgba(var(--ink-rgb), .25);
  --shadow-3: 0 24px 56px rgba(var(--ink-rgb), .28);

  --btn-h: 40px;
  --pill-pad: var(--space-2) var(--space-3);
  --zoom-ms: 1100ms;
  --zoom-ease: cubic-bezier(.45, .05, .25, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;

  /* Set from JS: --dock-h, --extra, --extra-x. */
  --dock-h: 72px;
  --extra: 0px;
  --extra-x: 0px;
  --top-h: calc(90px + env(safe-area-inset-top));
  color-scheme: dark;
  font-family: var(--sans);
  background: var(--c-bg);
  color: var(--c-on-dark);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: var(--c-bg); }
button, a { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; }
img { max-width: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--c-focus-ring);
}

.app { height: 100%; }

/* Viewport cover in the source image ratio. Portrait phones pan sideways. */
.stage {
  position: fixed;
  inset: 0;
  overflow: auto;
  background: var(--c-bg);
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-chip-edge) transparent;
}
.stage:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--c-focus-ring); }
.world { position: relative; overflow: hidden; }
.pad-top { height: var(--top-h); }
.map {
  position: relative;
  width: max(100%, calc(100dvh * 2048 / 1373));
  aspect-ratio: 2048 / 1373;
  margin-top: var(--extra);
  margin-left: var(--extra-x);
}
.map-zoom {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  transition: transform var(--zoom-ms) var(--zoom-ease);
}
.scroll-pad { height: calc(var(--dock-h) + var(--extra)); }
/* Vertically mirrored strips continue the image edge behind the glass bars. */
.mirror {
  position: absolute;
  left: 0;
  width: 100%;
  height: 30%;
  overflow: hidden;
  pointer-events: none;
  transform: scaleY(-1);
}
.mirror-top { bottom: calc(100% - 1px); }
.mirror-bottom { top: calc(100% - 1px); }
.mirror::after { content: ""; position: absolute; inset: 0; background: rgba(var(--ink-rgb), .12); }
.map-zoom .mirror img { inset: auto; left: 0; width: 100%; height: calc(100% / .3); }
.map-zoom .mirror-top img { top: 0; }
.map-zoom .mirror-bottom img { bottom: 0; }
.map-zoom img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
#points { position: absolute; inset: 0; }

/* Bottom bar and pill buttons: one height (--btn-h) and one padding for all. */
.pathbar {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) max(var(--space-3), env(safe-area-inset-right)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  background: var(--glass-dark);
  color: var(--c-on-dark);
  border-top: 1px solid var(--glass-chip-edge);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.mode, .language, .a11y-toggle, .oval, .more, .close {
  min-height: var(--btn-h);
  border: 1px solid transparent;
  font-family: var(--sans);
}
.mode, .language, .a11y-toggle {
  padding: var(--pill-pad);
  border-radius: var(--radius-pill);
  border-color: var(--glass-chip-edge);
  background: var(--glass-chip);
  color: var(--c-on-dark);
}
.mode { font-size: var(--fs-sm); }
.mode[aria-pressed="true"] { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.mode.is-soon, .mode.is-soon:hover, .mode.is-soon:focus-visible {
  opacity: .4;
  color: var(--c-disabled);
  background: transparent;
  border-color: var(--c-disabled);
  cursor: not-allowed;
}
.mode.path-invite { position: relative; overflow: hidden; isolation: isolate; }
.mode.path-invite::after {
  content: "";
  position: absolute;
  inset: -45% -10%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 239, 190, .1) 40%, rgba(255, 249, 222, .52) 50%, rgba(255, 239, 190, .1) 60%, transparent 70%);
  transform: translateX(-120%);
  opacity: 0;
  animation: path-invite-shimmer 1.5s ease-in-out .4s 1;
}
@keyframes path-invite-shimmer {
  0% { transform: translateX(-120%); opacity: 0; }
  20%, 75% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
.path-choices {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-2);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  /* One row: the path list scrolls sideways and fades out at the right edge. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  padding-right: var(--space-6);
}
.path-choices::-webkit-scrollbar { display: none; }
.path-choices .mode { flex: 0 0 auto; }
.path-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
.language {
  min-width: var(--btn-h);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
}
.fullscreen { display: grid; place-items: center; }
.fullscreen[hidden] { display: none; }
.fullscreen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fullscreen .fs-close { display: none; }
.fullscreen[aria-pressed="true"] .fs-open { display: none; }
.fullscreen[aria-pressed="true"] .fs-close { display: inline; }
.a11y-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  text-align: left;
}
.a11y-label { font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; }
/* The label shows only on wide screens; below that only the switch remains. */
@media (max-width: 1599px), (max-height: 520px) and (orientation: landscape) {
  .a11y-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .a11y-toggle { padding: var(--space-1) var(--space-2); }
}
.a11y-switch {
  width: 34px;
  height: 20px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-chip-edge);
  background: var(--glass-chip);
  position: relative;
}
.a11y-switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-white);
  transition: transform .2s var(--ease);
}
.a11y-toggle[aria-pressed="true"] .a11y-switch { background: #d7f3c8; border-color: #d7f3c8; }
.a11y-toggle[aria-pressed="true"] .a11y-switch::after { transform: translateX(14px); background: #0e3a32; }

.soon-tip {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--glass-light-strong);
  color: var(--c-ink);
  border: 1px solid var(--glass-edge-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-xs);
  line-height: 1.35;
  pointer-events: none;
}
.soon-tip[hidden] { display: none !important; }

/* Golden pins keep their on-screen size while the picture zooms (--inv = 1 / zoom). */
.point {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) scale(var(--inv, 1));
  transition: transform .15s ease;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid var(--c-white);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--c-gold-light), var(--c-gold) 72%);
  box-shadow: 0 0 0 4px rgba(var(--ink-rgb), .28), 0 2px 8px rgba(0, 0, 0, .28);
  color: var(--c-gold-ink);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: grid;
  place-items: center;
  z-index: 1;
}
.point::after { content: ""; position: absolute; inset: -8px; }
/* While the picture zooms, pins counter-scale at the same pace; otherwise hover stays quick. */
.map-zoom.zooming .point { transition-duration: var(--zoom-ms); transition-timing-function: var(--zoom-ease); }
.point:hover, .point:focus-visible { transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * 1.12)); z-index: 4; }
.point.active {
  z-index: 5;
  background: radial-gradient(circle at 35% 30%, var(--c-white), var(--c-gold-strong) 70%);
  box-shadow: 0 0 0 6px rgba(var(--gold-rgb), .7), 0 2px 10px rgba(0, 0, 0, .3);
}
.point.pulse { animation: pin-pulse 1s ease-in-out 2; }
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 12px rgba(var(--gold-rgb), .15), 0 2px 10px rgba(0, 0, 0, .25); } }
/* Blink while the matching step in the fan is hovered or focused. */
.point.flash {
  z-index: 6;
  transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * 1.2));
  background: radial-gradient(circle at 35% 30%, var(--c-white), var(--c-gold-strong) 70%);
  animation: pin-flash .55s ease-in-out infinite alternate;
}
@keyframes pin-flash {
  from { box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .9), 0 0 0 0 rgba(var(--gold-rgb), .5), 0 2px 10px rgba(0, 0, 0, .3); }
  to { box-shadow: 0 0 0 6px rgba(var(--gold-rgb), .95), 0 0 0 18px rgba(var(--gold-rgb), 0), 0 2px 10px rgba(0, 0, 0, .3); }
}

/* Arrow at the free edge when the active or hovered point is out of view. */
.edge-arrow {
  position: fixed;
  z-index: 42;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1px solid var(--glass-edge-strong);
  background: var(--c-gold-strong);
  color: var(--c-gold-ink);
  box-shadow: var(--shadow-2);
  display: grid;
  place-items: center;
}
.edge-arrow[hidden] { display: none; }
.edge-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(var(--angle, 0deg));
}

/* Steps of the path fan upwards from the path button: light glass, the picture stays visible. */
.fan {
  position: fixed;
  z-index: 39;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--space-1);
  max-width: min(440px, calc(100vw - 16px));
  pointer-events: none;
}
.fan.open { pointer-events: auto; }
.oval {
  flex: 0 0 auto;
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border-color: var(--glass-edge-strong);
  background: var(--glass-light);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  text-align: left;
  text-shadow: var(--halo);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translateY(var(--space-3)) scale(.96);
  transform-origin: left bottom;
  transition: opacity .22s ease, transform .3s var(--ease);
  transition-delay: calc(var(--i) * 28ms);
}
.fan.open .oval { opacity: 1; transform: none; transition-delay: calc(var(--i) * 40ms); }
.oval:hover { background: var(--glass-light-strong); }
.oval[aria-pressed="true"] { background: var(--glass-dark-mid); color: var(--c-on-dark); border-color: var(--glass-chip-edge); text-shadow: 0 1px 3px rgba(var(--ink-rgb), .5); }
.oval[aria-pressed="true"]:hover { background: var(--glass-dark-strong); }
.fan.is-row { flex-direction: row; max-width: none; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); }
.fan.is-row::-webkit-scrollbar { display: none; }

/* Top glass bar, fixed height (--top-h): title and subtitle when idle; title, teaser, fading
   preview, study count, More and close for a point. The detail opens as a sheet below the bar,
   or as a side panel on low landscape screens. */
.card {
  position: fixed;
  z-index: 41;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-h);
  display: flex;
  flex-direction: column;
  padding: calc(var(--space-2) + env(safe-area-inset-top)) max(var(--space-3), env(safe-area-inset-right)) var(--space-1) max(var(--space-4), env(safe-area-inset-left));
  color: var(--c-ink);
  cursor: pointer;
}
/* The glass sits on a pseudo-element so the detail sheet can blur the picture itself. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glass-bar);
  border-bottom: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2);
}
.card.is-idle { cursor: auto; }
.card-row { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-height: 0; }
.card-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.card.is-idle .card-main { justify-content: center; }
.card .kicker, .card h2, .teaser, .card .preview { margin: 0; flex: none; }
.card .kicker { line-height: 1.2; }
.card h2 + .teaser { margin-top: var(--space-1); }
.kicker, .source-title {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.card h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.teaser {
  font-size: var(--fs-sm);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Fading preview of the full text under the teaser: fills the rest of the fixed bar. */
.card .preview {
  max-width: 68ch;
  flex: 1 1 0;
  min-height: 0;
  font-size: var(--fs-sm);
  line-height: 1.3;
  opacity: .75;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 10%, transparent 100%);
}
.card.is-expanded .preview, .card .preview[hidden], html.a11y .card .preview,
.card.is-idle .preview, .card.is-idle .kicker, .card.is-idle .card-actions { display: none; }
.card-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.count {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  white-space: nowrap;
}
.count[hidden], .more[hidden] { display: none; }
.more {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border-color: var(--c-line);
  background: var(--glass-dark-strong);
  color: var(--c-on-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.more[aria-expanded="true"] { background: var(--glass-light-strong); color: var(--c-ink); }
.close {
  width: var(--btn-h);
  padding: 0;
  flex: none;
  border-radius: 50%;
  border-color: var(--c-line);
  background: var(--glass-light-strong);
  color: var(--c-ink);
  font-size: var(--fs-lg);
  line-height: 1;
}

/* Expanded text: same light glass as the fan steps, with a soft halo for readability. */
.detail {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: min(52dvh, 560px);
  overflow: auto;
  padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right)) var(--space-4) max(var(--space-4), env(safe-area-inset-left));
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--glass-light);
  border: 1px solid var(--glass-edge);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink);
  text-shadow: var(--halo);
  cursor: auto;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--shadow-3);
}
.detail[hidden] { display: none; }
.detail:focus { outline: none; }
.body { margin: 0; font-family: var(--sans); font-size: var(--fs-md); line-height: 1.55; }
.detail .body { max-width: 68ch; }
.source-group { border-top: 1px solid var(--c-line); margin-top: var(--space-4); padding-top: var(--space-2); }
.links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.links a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: var(--glass-light);
  color: var(--c-link);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-decoration: none;
  text-shadow: none;
}
.links a:hover { background: var(--glass-light-strong); }

.card.is-side {
  top: calc(var(--space-2) + env(safe-area-inset-top));
  bottom: calc(var(--dock-h) + var(--space-2));
  left: auto;
  right: max(var(--space-2), env(safe-area-inset-right));
  width: min(440px, 48vw);
  height: auto;
  padding: var(--space-3) var(--space-4);
  text-shadow: var(--halo);
  animation: side-in .3s var(--ease);
}
.card.is-side::before {
  background: var(--glass-light);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-3);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
}
@keyframes side-in { from { opacity: 0; transform: translateX(16px); } }
.card.is-side.is-left { right: auto; left: max(var(--space-2), env(safe-area-inset-left)); animation-name: side-in-left; }
@keyframes side-in-left { from { opacity: 0; transform: translateX(-16px); } }
.card.is-side .card-row { flex-wrap: wrap; flex: none; }
.card.is-side .card-main { height: auto; }
.card.is-side .card-actions { width: 100%; justify-content: flex-end; }
.card.is-side .count { margin-right: auto; }
.card.is-side .detail {
  position: static;
  flex: 1;
  max-height: none;
  min-height: 0;
  margin: var(--space-2) calc(-1 * var(--space-1)) 0 0;
  padding: var(--space-2) var(--space-1) var(--space-1) 0;
  border: 0;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* One-time portrait hint, adapted from the Elbstrand orientation treatment. */
.orientation-hint {
  display: none;
  position: fixed;
  z-index: 36;
  top: calc(var(--top-h) + var(--space-3));
  right: max(var(--space-4), env(safe-area-inset-right));
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border-radius: var(--radius-card);
  border: 1px solid var(--glass-chip-edge);
  background: var(--glass-dark);
  color: var(--c-on-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.15;
  pointer-events: none;
  opacity: 0;
}
.orientation-hint[hidden] { display: none !important; }
.orientation-symbol {
  width: 42px;
  height: 42px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.orientation-device rect { fill: var(--glass-chip); }
.orientation-arc { opacity: .75; }
.orientation-device { transform-box: view-box; transform-origin: 32px 32px; }
@media (max-width: 900px) and (orientation: portrait) {
  .orientation-hint:not([hidden]) { display: flex; }
  .orientation-hint.is-playing {
    animation: orientation-in 1.6s var(--ease) both, orientation-out 1.8s ease-in-out 5.6s forwards;
  }
  .orientation-hint.is-playing .orientation-device { animation: orientation-rotate 4s var(--ease) 1.6s both; }
}
@keyframes orientation-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes orientation-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes orientation-rotate {
  0%, 12% { transform: rotate(0); }
  78%, 100% { transform: rotate(90deg); }
}

/* First-visit welcome */
.welcome-scrim { position: fixed; inset: 0; z-index: 38; background: rgba(var(--ink-rgb), .35); animation: welcome-fade .35s ease-out; }
.welcome {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 45;
  width: min(440px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  color: var(--c-ink);
  background: var(--glass-bar);
  border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-3);
  animation: welcome-in .35s var(--ease);
}
.welcome[hidden], .welcome-scrim[hidden], .welcome-pins[hidden] { display: none; }
.welcome h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(var(--fs-lg), 3vw, var(--fs-xl));
  line-height: 1.15;
  letter-spacing: -.02em;
}
.welcome-body { margin: 0 0 var(--space-2); font-size: var(--fs-md); line-height: 1.55; }
.welcome-sign { margin: 0 0 var(--space-3); font-family: var(--serif); font-style: italic; font-size: var(--fs-sm); color: var(--c-ink-muted); }
.welcome-go {
  display: block;
  margin-left: auto;
  min-height: var(--btn-h);
  padding: var(--space-2) var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--c-ink);
  color: var(--c-white);
  font-weight: 600;
}
.welcome-pins { position: fixed; inset: 0; z-index: 44; pointer-events: none; }
.welcome-ring {
  position: fixed;
  border-radius: var(--radius-pill);
  border: 2px solid var(--c-focus-ring);
  box-shadow: 0 0 14px 3px rgba(255, 224, 138, .7);
  animation: welcome-pulse 1.3s ease-in-out 2;
}
.welcome-label {
  position: fixed;
  max-width: calc(100vw - 16px);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-card);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--c-ink);
  background: var(--glass-light-strong);
  border: 1px solid var(--glass-edge-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2);
  animation: welcome-fade .35s ease-out;
}
.welcome-label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--tx, 50%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  transform: rotate(45deg);
  background: var(--glass-light-strong);
  border-right: 1px solid var(--glass-edge-strong);
  border-bottom: 1px solid var(--glass-edge-strong);
}
@keyframes welcome-in { from { opacity: 0; transform: scale(.94); } }
@keyframes welcome-fade { from { opacity: 0; } }
@keyframes welcome-pulse { 50% { box-shadow: 0 0 22px 7px rgba(255, 224, 138, .95); } }

/* Narrow screens */
@media (max-width: 760px) {
  :root { --pill-pad: var(--space-2); }
}
@media (max-width: 760px) and (min-height: 521px) {
  :root { --top-h: calc(96px + env(safe-area-inset-top)); }
  .card .kicker { display: none; }
  .card-row { align-items: flex-start; }
  /* Count above, More and close side by side: stays inside the fixed bar with 44 px targets. */
  .card-actions { display: grid; grid-template-columns: auto auto; justify-items: end; align-items: center; gap: var(--space-1); }
  .card-actions .count { grid-column: 1 / -1; grid-row: 1; }
  .card-actions .more { grid-column: 1; grid-row: 2; }
  .card-actions .close { grid-column: 2; grid-row: 2; }
  .teaser { font-size: var(--fs-sm); line-height: 1.25; }
  .card .detail { max-height: 55dvh; }
  .card h2 {
    font-size: var(--fs-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* Low landscape (phones turned sideways): slim bars, most of the screen for the picture. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --top-h: calc(46px + env(safe-area-inset-top)); --btn-h: 36px; }
  .pathbar { padding-top: var(--space-1); padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom)); }
  .path-choices { flex: 1; }
  .card:not(.is-side) { padding-top: calc(1px + env(safe-area-inset-top)); padding-bottom: 1px; }
  .card:not(.is-side) .teaser { -webkit-line-clamp: 1; }
  .card .preview, .card .kicker { display: none; }
  .card:not(.is-side) h2 { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .detail { max-height: calc(100dvh - var(--top-h) - var(--dock-h) - var(--space-4)); }
  .welcome { padding: var(--space-3) var(--space-4); max-height: calc(100vh - 150px); inset: var(--space-2) 0 auto; }
  .welcome h2 { font-size: var(--fs-md); margin-bottom: var(--space-1); }
  .welcome-body { font-size: var(--fs-sm); line-height: 1.4; margin-bottom: var(--space-1); }
  .welcome-sign { margin-bottom: var(--space-1); }
  .welcome-go { padding: var(--space-1) var(--space-4); }
}
/* Touch: every control at least 44 px tall. */
@media (pointer: coarse) {
  :root { --btn-h: 44px; }
}

/* Accessibility mode: high contrast, opaque glass, no blur. Only the tokens change. */
html.a11y {
  --glass-bar: rgba(255, 252, 247, .98);
  --glass-light: rgba(255, 252, 247, .98);
  --glass-light-strong: var(--c-white);
  --glass-dark: rgba(6, 16, 20, .96);
  --glass-dark-mid: #071418;
  --glass-dark-strong: #071418;
  --glass-chip-edge: var(--c-white);
  --glass-edge: #071418;
  --glass-edge-strong: #071418;
  --c-ink: #071418;
  --c-ink-muted: #0b3a38;
  --c-on-dark: var(--c-white);
  --c-link: #042e2d;
  --c-focus: #ffd000;
  --c-focus-ring: #000;
  --glass-blur: none;
  --glass-blur-soft: none;
  --halo: none;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
}
html.a11y :focus-visible { outline-width: 3px; box-shadow: 0 0 0 6px #000; }
html.a11y .card::before { border-bottom: 2px solid var(--c-ink); }
html.a11y .detail { border: 2px solid var(--c-ink); }
html.a11y .pathbar { border-top: 2px solid var(--c-white); }
html.a11y .mode, html.a11y .language, html.a11y .a11y-toggle, html.a11y .oval,
html.a11y .more, html.a11y .close, html.a11y .orientation-hint, html.a11y .welcome-label { border-width: 2px; }
html.a11y .more { border-color: var(--c-ink); background: var(--c-white); color: var(--c-ink); }
html.a11y .close { border-color: var(--c-ink); }
html.a11y .oval, html.a11y .oval:hover { background: var(--c-white); }
html.a11y .oval[aria-pressed="true"], html.a11y .oval[aria-pressed="true"]:hover { background: var(--c-ink); color: var(--c-white); text-shadow: none; }
html.a11y .a11y-label { font-size: var(--fs-sm); }
html.a11y .point { width: 32px; height: 32px; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-white); animation: none; }
html.a11y .point.active, html.a11y .point.pulse { animation: none; box-shadow: 0 0 0 4px var(--c-ink), 0 0 0 7px #ffd000; }
html.a11y .point.flash { box-shadow: 0 0 0 4px var(--c-ink), 0 0 0 8px #ffd000; }
html.a11y .edge-arrow { background: var(--c-white); color: var(--c-ink); border: 2px solid var(--c-ink); }
html.a11y .links a { text-decoration: underline; background: var(--c-white); border-color: var(--c-link); }
html.a11y .welcome { border: 2px solid var(--c-ink); }
html.a11y .welcome-go { border: 2px solid var(--c-ink); }
html.a11y .welcome-ring { border: 3px solid #ffd000; box-shadow: 0 0 0 2px #000; }
html.a11y .welcome-label::after { border-width: 0 2px 2px 0; }
html.a11y .orientation-hint.is-playing { opacity: 1; transform: none; }

/* No motion: reduced-motion preference or accessibility mode. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mode.path-invite::after, .point, .point.active, .point.pulse, .point.flash,
  .fan, .oval, .card, .card.is-side, .pathbar,
  .welcome, .welcome-scrim, .welcome-ring, .welcome-label { animation: none !important; transition: none !important; }
  .fan, .oval, .card, .card.is-side, .pathbar { transform: none !important; }
  .point.flash { box-shadow: 0 0 0 4px var(--c-ink), 0 0 0 8px #ffd000; }
  .map-zoom { transition: none; }
  .orientation-hint.is-playing { animation: none; opacity: 1; transform: none; }
  .orientation-hint.is-playing .orientation-device { animation: none; transform: rotate(90deg); }
}
html.a11y .mode.path-invite::after, html.a11y .welcome, html.a11y .welcome-scrim,
html.a11y .welcome-ring, html.a11y .welcome-label, html.a11y .orientation-hint.is-playing,
html.a11y .orientation-hint.is-playing .orientation-device { animation: none; }
html.a11y .orientation-hint.is-playing .orientation-device { transform: rotate(90deg); }
html.a11y .map-zoom, html.a11y .point, html.a11y .a11y-switch::after,
html.a11y .fan, html.a11y .oval, html.a11y .card { transition: none; }