@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/bebas-neue-latin.woff2') format('woff2')}
/* Text style faces (theme.font, shared/story-palettes.js styleVars): only fetched when a story picks them. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/inter-tight-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/bricolage-grotesque-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('../fonts/jetbrains-mono-latin.woff2') format('woff2')}
.ig-story{--story-lead:var(--accent-primary);--story-punch:var(--state-live);--story-punch-ink:var(--state-error);--story-ink:var(--text-primary);--story-paper:var(--surface-paper);--story-body:var(--text-secondary);--story-muted:var(--text-muted);--story-rule:var(--border-default);--story-grey:var(--surface-subtle);--story-display:'Bebas Neue','Arial Narrow',sans-serif;--story-text:var(--font-sans);}
.ig-story{--story-tint-0:color-mix(in srgb,var(--story-lead) 100%,var(--story-paper));--story-wall-0:color-mix(in srgb,var(--story-tint-0) 74%,var(--story-ink));}
.ig-story{--story-tint-1:color-mix(in srgb,var(--story-lead) 85%,var(--story-paper));--story-wall-1:color-mix(in srgb,var(--story-tint-1) 74%,var(--story-ink));}
.ig-story{--story-tint-2:color-mix(in srgb,var(--story-lead) 70%,var(--story-paper));--story-wall-2:color-mix(in srgb,var(--story-tint-2) 74%,var(--story-ink));}
.ig-story{--story-tint-3:color-mix(in srgb,var(--story-lead) 55%,var(--story-paper));--story-wall-3:color-mix(in srgb,var(--story-tint-3) 74%,var(--story-ink));}
.ig-story{--story-tint-4:color-mix(in srgb,var(--story-lead) 40%,var(--story-paper));--story-wall-4:color-mix(in srgb,var(--story-tint-4) 74%,var(--story-ink));}
.ig-story{--story-tint-5:color-mix(in srgb,var(--story-lead) 25%,var(--story-paper));--story-wall-5:color-mix(in srgb,var(--story-tint-5) 74%,var(--story-ink));}
 .ig-story, .ig-story * { box-sizing: border-box; }




.ig-story { position: relative; background: var(--story-paper); color: var(--story-ink); font-family: var(--story-text); overflow-x: clip; }
.scroller { position: relative; }
.sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; display: grid; grid-template-rows: 60px 1fr; overflow: hidden;
}
.progress { position: absolute; left: 0; right: 0; top: 60px; height: 3px; background: var(--story-rule); z-index: 5; pointer-events: none; }
.progress span { display: block; width: 0; height: 100%; background: var(--story-lead); }
.scroll-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 18px; border-radius: 999px; background: var(--story-ink); color: var(--story-paper); z-index: 5; pointer-events: none;
  font-weight: 900; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; visibility: hidden;
}
.scroll-hint svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.end-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; z-index: 5;
  background: var(--story-paper); color: var(--story-ink); box-shadow: 0 0 0 2px var(--story-ink); font-weight: 800; font-size: 14px; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.colophon {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px; border-top: 2px solid var(--story-rule);
  font-weight: 800; font-size: 14px; color: var(--story-muted);
}
.top-btn {
  border: 2px solid var(--story-ink); background: var(--story-paper); color: var(--story-ink); font: 800 14px/1 var(--story-text); padding: 9px 14px;
  border-radius: 999px; cursor: pointer;
}
.top-btn:hover { background: var(--story-ink); color: var(--story-paper); }

/* top bar */
.topbar { display: flex; align-items: center; gap: 24px; padding: 0 28px; z-index: 5; }
.brand { font-weight: 900; font-size: 22px; letter-spacing: -0.03em; white-space: nowrap; }
.brand-tag { margin-left: 12px; font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--story-lead); }
.chips { display: flex; gap: 4px; margin-left: auto; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--story-muted);
  font: 800 14px/1 var(--story-text); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.chip-btn:hover { color: var(--story-ink); background: var(--story-grey); }
.chip-btn[aria-current="step"] { background: var(--story-ink); color: var(--story-paper); }
.chip-n { font-family: var(--story-display); font-size: 18px; letter-spacing: 0.02em; color: var(--story-lead); transform: translateY(1px); }
.chip-btn[aria-current="step"] .chip-n { color: var(--story-tint-4); }
.fs-btn {
  border: 2px solid var(--story-ink); background: var(--story-paper); color: var(--story-ink); font: 800 14px/1 var(--story-text); letter-spacing: 0.04em;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
}
.fs-btn:hover { background: var(--story-ink); color: var(--story-paper); }
button:focus-visible, input:focus-visible, .split-label:focus-visible { outline: 3px solid var(--story-lead); outline-offset: 3px; }
.station .hit:focus-visible, .cup-hit:focus-visible { outline: 3px solid var(--story-lead); outline-offset: 8px; }

/* stage */
.viewport { position: relative; overflow: hidden; touch-action: manipulation; }
.stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; perspective: 2400px; }
.tilt { position: absolute; inset: 0; }
.camera { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.hud { position: absolute; inset: 0; pointer-events: none; }

/* route */
.route { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.route path { fill: none; stroke-linecap: round; }
.route .road { stroke: var(--story-lead); stroke-opacity: 0.1; stroke-width: 34; }
.route .line { stroke: var(--story-lead); stroke-width: 7; }

/* stations */
.station { position: absolute; width: 0; height: 0; }
.station .gshadow {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--story-ink) 26%, transparent), color-mix(in srgb, var(--story-ink) 8%, transparent) 62%, color-mix(in srgb, var(--story-ink) 0%, transparent));
}
.station .obj {
  position: absolute; max-width: none; user-select: none; pointer-events: none; transform-origin: 50% 100%;
  will-change: transform, opacity;
}
/* static hit area: it never moves with the bob or the hover lift, so hovering can't flicker */
.station .hit {
  position: absolute; margin: 0; padding: 0; border: 0; border-radius: 32px; background: transparent; cursor: zoom-in;
  visibility: hidden; pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.zoom-pill {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px 9px 12px; border-radius: 999px;
  background: var(--story-ink); color: var(--story-paper); font-weight: 900; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; pointer-events: none; opacity: 0;
}
.step-note {
  position: absolute; left: -225px; top: 128px; width: 450px; margin: 0; text-align: center; text-wrap: balance;
  font-weight: 700; font-size: calc(var(--story-scale, 1) * 19px); line-height: 1.42; color: var(--story-body); opacity: 0; visibility: hidden; pointer-events: none;
}
.step-label {
  position: absolute; left: -170px; top: 44px; width: 340px; display: flex; align-items: center; justify-content: center; gap: 14px;
  pointer-events: none; white-space: nowrap;
}
.step-n { font-family: var(--story-display); font-size: 76px; line-height: 0.8; color: var(--story-lead); }
.step-txt { display: flex; flex-direction: column; gap: 4px; }
.step-name { font-family: var(--story-display); font-size: 46px; line-height: 0.86; letter-spacing: 0.01em; }
.step-time { font-weight: 800; font-size: 20px; color: var(--story-muted); }
/* Portrait loop legend: replaces in-world step labels that would read under 12px. The journey sets its size and position. */
.journey-legend {
  position: absolute; left: 60px; right: 60px; top: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.12em 0.55em;
  font-family: var(--story-text); font-weight: 800; font-size: 35px; line-height: 1.15; color: var(--story-ink); text-align: center;
  pointer-events: none; visibility: hidden; opacity: 0;
}
.journey-legend-item { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; }
.journey-legend-n { color: var(--story-lead); font-variant-numeric: tabular-nums; }
.journey-legend-sep { margin-left: 0.25em; color: var(--story-muted); }
.journey-legend-item.is-active .journey-legend-name { color: var(--story-punch-ink); text-decoration: underline 0.12em var(--story-punch); text-underline-offset: 0.16em; }

/* token */
.token { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.token img { position: absolute; width: 60px; max-width: none; height: auto; left: -30px; top: -30px; }

/* cup scene */
.scene { position: absolute; top: 0; width: 1600px; height: 900px; }
.scene .mring, .scene .leaders, .scene .steam { position: absolute; left: 0; top: 0; overflow: visible; }
.scene .mring { pointer-events: none; }
.scene .mring .seg path { pointer-events: none; stroke: var(--story-paper); stroke-width: 2.2; stroke-linejoin: round; }
/* the slices' hover targets keep their resting shape while the visible slice lifts */
.scene .seg-hits { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.seg-hits path { fill: transparent; stroke: none; pointer-events: none; cursor: pointer; }
.cup-hit {
  position: absolute; margin: 0; padding: 0; border: 0; border-radius: 48px; background: transparent; cursor: zoom-in;
  visibility: hidden; pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.track .top { fill: var(--story-grey); }
.track .wall { fill: var(--story-rule); }
.ghost { fill: none; stroke: var(--story-punch); stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linejoin: round; }
.cup { position: absolute; max-width: none; pointer-events: none; transform-origin: 50% 100%; will-change: transform; }
.cup-shadow {
  position: absolute; width: 350px; height: 62px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--story-ink) 30%, transparent), color-mix(in srgb, var(--story-ink) 8%, transparent) 65%, color-mix(in srgb, var(--story-ink) 0%, transparent));
}
.steam path { fill: none; stroke: var(--story-rule); stroke-width: 7; stroke-linecap: round; opacity: 0; animation: steam 3.6s ease-in-out infinite; filter: blur(2.2px); }
.steam path:nth-child(2) { animation-delay: 1.2s; }
.steam path:nth-child(3) { animation-delay: 2.4s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(26px) scaleY(0.8); }
  30% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-34px) scaleY(1.08); }
}
.leaders { pointer-events: none; }
.leaders polyline { fill: none; stroke: var(--story-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.split-label {
  position: absolute; display: flex; flex-direction: column; gap: 4px; pointer-events: auto; cursor: default; outline: none;
  transform: translate(var(--dx, 0), calc(-50% + var(--dy, 0px)));
}
.split-label.bottom { align-items: center; text-align: center; transform: translate(var(--dx, 0), var(--dy, 0)); }
.split-label.left { align-items: flex-end; text-align: right; }
.split-label .vline { display: flex; align-items: baseline; gap: 10px; }
.split-label.left .vline { flex-direction: row-reverse; }
.split-label.bottom .vline { justify-content: center; }
.split-label .v { font-family: var(--story-display); font-size: 58px; line-height: 0.82; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; transition: transform 0.25s; transform-origin: 0 100%; }
.split-label .pc { font-weight: 900; font-size: 18px; color: var(--story-lead); font-variant-numeric: tabular-nums; }
.split-label.left .v { transform-origin: 100% 100%; }
.split-label.bottom .v { transform-origin: 50% 100%; }
.split-label .t { font-weight: 800; font-size: 18px; line-height: 1.2; max-width: 300px; white-space: nowrap; }
.split-label.is-hover .v { transform: scale(1.06); }
.split-label.is-highlight .v { color: var(--story-punch); }
.split-label.is-highlight .t { color: var(--story-punch-ink); }
.split-label.is-highlight .pc { color: var(--story-punch-ink); }

.punch {
  position: absolute; left: 76px; top: 286px; font-family: var(--story-display); font-size: 300px; line-height: 0.9; color: var(--story-punch);
  transform-origin: 40% 60%; opacity: 0; letter-spacing: -0.01em; pointer-events: none;
}
.hl.punch-cap { left: 84px; top: 572px; font-family: var(--story-text) !important; text-transform: none !important; font-weight: 900; font-size: calc(var(--story-scale, 1) * 30px); line-height: 1.18; letter-spacing: -0.01em; color: var(--story-ink); }
.hl.punch-cap .hl-line { gap: 0.26em; }
.chip {
  position: absolute; left: 0; top: 0; padding: 10px 18px 6px; border-radius: 999px; background: var(--story-punch); color: var(--story-paper);
  font-family: var(--story-display); font-size: 40px; line-height: 1; opacity: 0; pointer-events: none; white-space: nowrap;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--story-punch) 35%, transparent);
}
.cherry-rest { max-width: none; position: absolute; left: 372px; top: 452px; width: 64px; opacity: 0; pointer-events: none; }

/* decks: one short sentence under each headline */
.deck {
  position: absolute; margin: 0; font-weight: 700; color: var(--story-body); text-wrap: pretty; opacity: 0; visibility: hidden; pointer-events: none;
}
.deck.d1 { left: 86px; top: 514px; width: 620px; font-size: calc(var(--story-scale, 1) * 28px); line-height: 1.34; }
.deck.d2 { left: 86px; top: 570px; width: 980px; font-size: calc(var(--story-scale, 1) * 24px); line-height: 1.3; }
.deck.d3 { left: 86px; top: 334px; width: 300px; font-size: calc(var(--story-scale, 1) * 21px); line-height: 1.42; }
.deck.dcap { left: 86px; top: 664px; width: 520px; font-size: calc(var(--story-scale, 1) * 22px); line-height: 1.35; color: var(--story-punch-ink); font-weight: 800; }

/* headlines */
.hl {
  position: absolute; margin: 0; font-family: var(--story-display); font-weight: var(--story-display-weight, 400); line-height: 0.88; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--story-heading, var(--story-ink)); visibility: hidden;
}
.hl-line { display: flex; gap: 0.2em; }
.hl-word { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.h1 { left: 80px; top: 230px; font-size: calc(var(--story-scale, 1) * 150px); transform-origin: 0 0; }
.h2 { left: 80px; top: 472px; font-size: calc(var(--story-scale, 1) * 100px); }
.h3 { left: 80px; top: 104px; font-size: calc(var(--story-scale, 1) * 118px); }

/* time bar */
.timebar { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.timebar svg { position: absolute; left: 0; top: 0; }
.tb-label { position: absolute; top: 670px; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; white-space: nowrap; opacity: 0; }
.tb-name { font-family: var(--story-display); font-size: 36px; line-height: 0.9; }
.tb-time { font-weight: 800; font-size: 18px; color: var(--story-muted); }
.tb-label.is-highlight { text-align: right; align-items: flex-end; }
.tb-label.is-highlight .tb-name { color: var(--story-punch); }
.callout { position: absolute; right: 80px; top: 568px; font-weight: 900; font-size: 18px; color: var(--story-punch-ink); opacity: 0; letter-spacing: 0.01em; }
.callout span { font-size: 22px; margin-left: 4px; }
.zoom { position: absolute; right: 80px; top: 468px; display: flex; align-items: baseline; gap: 8px; opacity: 0; }
.zoom-k { font-weight: 900; font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--story-muted); }
.zoom-x { font-family: var(--story-display); font-size: 64px; color: var(--story-lead); }
.zoom-n { font-family: var(--story-display); font-size: 92px; line-height: 0.9; color: var(--story-lead); font-variant-numeric: tabular-nums; min-width: 3.2ch; text-align: right; }

/* detail card */
.card {
  position: absolute; left: 0; top: 0; width: 330px; padding: 18px 20px 20px; background: var(--story-paper); border-radius: 20px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--story-ink) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--story-ink) 5%, transparent);
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.card.is-on { opacity: 1; }
.card-head { display: flex; align-items: baseline; gap: 10px; }
.card-n { font-family: var(--story-display); font-size: 40px; line-height: 0.9; color: var(--story-lead); }
.card-name { font-family: var(--story-display); font-size: 40px; line-height: 0.9; }
.card-time { margin-left: auto; font-weight: 900; font-size: 16px; color: var(--story-muted); }
.card-note { margin: 10px 0 0; font-weight: 700; font-size: calc(var(--story-scale, 1) * 18px); line-height: 1.4; }
.card-hint {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-weight: 900; font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--story-lead);
}

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rotate-hint { display: none; }
@media (max-width: 860px) {
  .brand-tag, .fs-btn { display: none; }
  .chip-btn { padding: 8px 10px; }
  .chip-btn .chip-l { display: none; }
  .chip-btn .chip-n { font-size: 20px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .colophon { padding: 22px 14px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 860px) and (orientation: portrait) {
  .rotate-hint {
    display: block; position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); margin: 0; padding: 10px 16px;
    border-radius: 999px; background: var(--story-ink); color: var(--story-paper); font-weight: 800; font-size: 14px; white-space: nowrap; z-index: 6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .steam path, .scroll-hint svg { animation: none; }
}

/* zoom view */
.zv {
  position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  background: var(--story-paper); animation: zvIn 0.22s ease-out;
}
@keyframes zvIn { from { opacity: 0; } to { opacity: 1; } }
.zv-stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; }
.zv-stage.is-zoomed { cursor: grab; }
.zv-stage.is-dragging { cursor: grabbing; }
.zv-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.zv-media.is-anim { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.zv-img { display: block; max-width: 80%; max-height: 82%; object-fit: contain; -webkit-user-drag: none; animation: zvImg 0.3s ease-out; }
@keyframes zvImg { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.zv-nav {
  position: absolute; top: 50%; width: 56px; height: 56px; margin-top: -28px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--story-ink); background: var(--story-paper); color: var(--story-ink); cursor: pointer; z-index: 2;
}
.zv-nav:hover { background: var(--story-ink); color: var(--story-paper); }
.zv-prev { left: 24px; }
.zv-next { right: 24px; }
.zv-side {
  display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 56px 48px; background: var(--story-paper);
  border-left: 2px solid var(--story-rule);
}
.zv-count { font-weight: 900; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--story-muted); }
.zv-kicker { font-family: var(--story-display); font-size: 72px; line-height: 0.82; color: var(--story-lead); }
.zv-title { margin: 0; font-family: var(--story-display); font-weight: 400; font-size: 76px; line-height: 0.86; text-transform: uppercase; letter-spacing: 0.005em; }
.zv-meta { font-weight: 900; font-size: 18px; color: var(--story-muted); }
.zv-note { margin: 6px 0 0; font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--story-ink); max-width: 34ch; }
.zv-tools { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.zv-btn {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--story-ink); background: var(--story-paper);
  color: var(--story-ink); cursor: pointer;
}
.zv-btn:hover:not(:disabled), .zv-fit:hover:not(:disabled) { background: var(--story-ink); color: var(--story-paper); }
.zv-btn:disabled, .zv-fit:disabled { opacity: 0.35; cursor: default; }
.zv-level { min-width: 64px; text-align: center; font-weight: 900; font-size: 18px; font-variant-numeric: tabular-nums; }
.zv-fit {
  height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--story-ink); background: var(--story-paper); color: var(--story-ink);
  font: 900 14px/1 var(--story-text); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.zv-hint { margin: 6px 0 0; font-weight: 700; font-size: 14px; line-height: 1.45; color: var(--story-muted); }
.zv-close {
  position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 0; background: var(--story-ink); color: var(--story-paper); cursor: pointer; z-index: 3;
}
.zv-close:hover { background: var(--story-lead); }
@media (max-width: 860px) {
  .zv { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .zv-side { border-left: 0; border-top: 2px solid var(--story-rule); padding: 18px 20px 22px; gap: 8px; }
  .zv-kicker { font-size: 40px; }
  .zv-title { font-size: 46px; }
  .zv-note { font-size: 16px; }
  .zv-tools { margin-top: 8px; }
  .zv-nav { width: 46px; height: 46px; margin-top: -23px; }
  .zv-prev { left: 12px; }
  .zv-next { right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .zv, .zv-img { animation: none; }
  .zv-media.is-anim { transition: none; }
}

.ig-story{isolation:isolate;-webkit-font-smoothing:antialiased}
.ig-story button{font-family:var(--story-text)}
.story-world{position:absolute;top:0}
.story-block-hud{position:absolute;inset:0;pointer-events:none}
.story-object{pointer-events:none}
.split-world:not(.has-photo) .cup-shadow,.split-world:not(.has-photo) .steam{visibility:hidden}
.is-zoom-open .steam path,.is-zoom-open .story-placeholder{animation-play-state:paused}
.story-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.story-hit{position:absolute;margin:0;padding:0;border:0;border-radius:32px;background:transparent;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.story-hit:focus-visible{outline:3px solid var(--story-lead);outline-offset:8px}
.story-hit-path{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.story-hit-path path{fill:transparent;stroke:none;cursor:zoom-in}
.story-hit-path path:focus-visible{outline:none;stroke:var(--story-lead);stroke-width:4px}
.ring-hit-layer{position:absolute;inset:0;pointer-events:none}
.token-slot{position:absolute;left:-30px;top:-30px;width:60px;height:60px}
.token .token-slot img{position:static;width:100%;height:100%;object-fit:contain}
.story-standin{position:relative;width:100%;height:100%;pointer-events:none;user-select:none}
.standin-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;flex-shrink:0}
.standin-icon>.ig-el-icon{display:block;width:100%;height:100%}
.ig-story :is(.ig-el-value,.v,.zoom-n,.punch,.standin-face){font-variant-numeric:tabular-nums}
.ig-look-diorama .standin-station::before{box-shadow:0 22px 0 var(--object-wall),0 36px 20px -8px color-mix(in srgb,var(--story-ink) 22%,transparent)}
.ig-look-diorama .standin-station .standin-face{display:flex;align-items:center;justify-content:center;gap:18px;box-shadow:inset 0 5px 3px color-mix(in srgb,var(--story-paper) 35%,transparent),inset 0 -5px 4px color-mix(in srgb,var(--object-wall) 25%,transparent);overflow:hidden}
.ig-look-diorama .standin-station .standin-face::after{content:'';position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 40%,color-mix(in srgb,var(--story-paper) 32%,transparent) 50%,transparent 60%);transform:translateX(calc((var(--look-p,1) - .5)*220%));pointer-events:none}
.ig-look-diorama .standin-token .standin-face{display:flex;align-items:center;justify-content:center;height:100%}
.ig-look-diorama .standin-token .standin-icon{width:55%;height:55%}
.ig-look-diorama :is(.standin-total,.standin-plate,.standin-slab) .standin-icon{display:flex;margin:12px auto 0}
.ig-look-diorama :is(.ig-el-bar,.ig-el-area,.ig-el-unit,.ig-el-land){fill:var(--el-fill);stroke:var(--el-stroke);stroke-width:var(--el-stroke-width)}
.ig-look-diorama :is(.ig-el-axis,.ig-el-grid,.ig-el-border,.ig-el-line,.ig-el-route){fill:none;stroke:var(--el-stroke);stroke-width:var(--el-stroke-width)}
.ig-look-diorama .ig-el-grid{stroke-opacity:.12}
.ig-look-diorama :is(.ig-el-point,.ig-el-pin){fill:var(--story-punch);stroke:var(--el-stroke);stroke-width:var(--el-stroke-width)}
.ig-look-diorama .timebar .ig-el-bar{stroke:none}
.ig-look-diorama .ig-el-tile{border:1px solid var(--story-rule);border-radius:var(--el-radius);background:var(--story-tint-5);box-shadow:0 12px 0 var(--story-wall-5),0 24px 24px -12px color-mix(in srgb,var(--story-ink) 20%,transparent)}
.ig-look-diorama .ig-el-label{color:var(--story-ink)}
.ig-look-diorama .ig-el-value{font-family:var(--story-display)}
.ig-look-diorama :where(.ig-data-chart,.ig-data-units,.ig-data-stats,.ig-map) .ig-el-value{color:var(--story-lead)}
.ig-look-diorama .ig-el-icon{color:inherit}
.ig-look-diorama .ig-el-quote{border-left:6px solid var(--story-punch);padding-left:28px;color:var(--story-ink)}
/* Stroke width stays numeric for SVG and map cards; CSS borders need a length. */
.ig-story .ig-data-stats .ig-el-tile{border:calc(var(--el-stroke-width,2) * 1px) solid var(--el-stroke,var(--story-ink));border-top:12px solid var(--el-fill)}
.ig-story .ig-data-units .ig-el-unit{border:calc(var(--el-stroke-width,2) * 1px) solid var(--el-stroke,var(--story-ink))}
.ig-story .sticky .steam path,.ig-story .sticky .scroll-hint svg{animation-play-state:var(--story-animation-state,running)}
@media(prefers-reduced-motion:reduce){.ig-look-diorama .standin-face::after{display:none}}
.standin-station::before{content:'';position:absolute;left:8%;right:8%;bottom:9%;height:30%;border-radius:50%;background:var(--object-wall);box-shadow:0 22px 0 var(--object-wall)}
.standin-station .standin-face{position:absolute;left:8%;right:8%;bottom:14%;height:30%;display:grid;place-items:center;border-radius:50%;background:var(--object-tint);color:var(--object-ink);font:400 100px/.8 var(--story-display);transform:rotateX(12deg);border:2px solid color-mix(in srgb,var(--story-paper) 30%,transparent)}
.standin-token{border-radius:50%;background:var(--story-punch);border:6px solid var(--story-lead);box-shadow:inset 0 0 0 7px var(--story-paper)}
.standin-token[data-form=ring]{background:var(--story-paper);box-shadow:inset 0 0 0 5px var(--story-punch)}
.standin-token[data-form=filled]{border-radius:24% 60% 30% 60%;background:var(--story-lead);box-shadow:inset 0 0 0 7px var(--story-punch)}
.standin-total{display:grid;place-items:center}
.standin-total .standin-face{font:400 126px/.9 var(--story-display);white-space:nowrap;color:var(--story-lead);transform:translateY(5px)}
.standin-plate{display:grid;place-items:center;background:var(--object-tint);border-radius:22px;border-bottom:16px solid var(--story-lead);padding:8%}
.standin-plate .standin-face{font:400 70px/1 var(--story-display);color:var(--story-ink);text-align:center}
.standin-slab{display:grid;place-items:center;transform:rotate(-10deg) skewY(9deg) scale(.8,.65);background:var(--object-tint);box-shadow:20px 24px 0 var(--object-wall);border-radius:16px}
.standin-slab .standin-face{font:400 62px/1 var(--story-display);text-align:center;color:var(--story-ink);padding:10%}
.story-placeholder{width:100%;height:100%;border-radius:25%;background:linear-gradient(110deg,var(--story-grey) 20%,var(--story-rule) 45%,var(--story-grey) 65%);background-size:250% 100%;animation:story-shimmer 3s linear infinite}
@keyframes story-shimmer{to{background-position:-200% 0}}
.story-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-block-error{position:absolute;left:100px;top:200px;max-width:1000px;padding:32px;border:2px solid var(--story-punch-ink);background:var(--story-paper);color:var(--story-ink);font:24px/1.5 var(--story-text)}
.story-block-error h2{font:72px/1 var(--story-display);margin:0 0 20px}
.split-label .vline{white-space:nowrap;gap:10px}
.split-label.left .vline{flex-direction:row}
.split-label .v{font-size:54px;white-space:nowrap;transition:none}
.split-label .t{max-width:300px;white-space:normal;text-wrap:balance}
.split-label .pc{font-size:20px;white-space:nowrap}
.split-label.is-hover .v{transform:scale(1.02)}
.punch{white-space:nowrap;font-size:280px;letter-spacing:-.035em}
.cherry-rest.story-object{width:64px;height:64px}
/* Numbers and card names use the display face at its chosen weight (a bold sans stays bold, Bebas stays 400). */
.ig-story :is(.punch,.step-n,.card-n,.card-name,.zoom-n,.tb-name),.ig-story .split-label .v,.ig-story .ig-data-stats .ig-el-value{font-weight:var(--story-display-weight,400)}
.ig-story .card[hidden]{display:none}
.zv[hidden]{display:none}
.zv{color:var(--story-ink);font-family:var(--story-text)}
.zv-object{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.zv-img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;animation:none}
.zv-shadow{position:absolute;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--story-ink) 26%,transparent),transparent);pointer-events:none}
.zv-object .standin-station .standin-face{font-size:clamp(90px,14vw,220px)}
.zv-object .standin-total .standin-face{font-size:clamp(90px,16vw,230px)}
.zv-nav{font-size:30px;line-height:1}
.zv-close{font-size:34px;line-height:1}
.zv-btn{font:28px/1 var(--story-text)}
.zv-side{overflow-y:auto;overscroll-behavior:contain}
.zv-note{overflow-wrap:anywhere}
.ig-story button:focus-visible{outline:3px solid var(--story-lead);outline-offset:4px}
@media(max-width:860px){.zv{height:100dvh}.zv-side{max-height:53dvh}.end-hint{max-width:90%;white-space:normal;text-align:center;font-size:12px}.brand{font-size:20px}.chip-btn{min-width:44px;min-height:44px}.zv-title{font-size:42px}.zv-note{font-size:15px;line-height:1.35}.zv-hint{font-size:12px}.zv-stage{min-height:220px}}
@media(prefers-reduced-motion:reduce){.ig-story *{animation:none!important;transition:none!important}}