/* Sciencemj design tokens, copied from sciencemj.github.io so this page has no build step.
   Only --short and --monthly are added: the two market colours, validated for colour-blind separation. */
:root {
  --accent: #E8682B; --accent-600: #CE551E; --accent-700: #A84417; --accent-soft: #FBEEE2;
  --grad: linear-gradient(150deg, #F2783A, #CE551E);
  --canvas: #FAF6F0; --surface: #FFFFFF; --surface-2: #F3ECE0;
  --ink: #221C16; --ink-2: #4A4036; --muted: #6E614D; --muted-2: #A89A85;
  --border: #E8DECE; --border-2: #D8CBB5;
  --viz-sand: #D9A441; --viz-olive: #7E8A4B; --viz-teal: #4E8A7E;
  --short: #E8682B; --monthly: #2C7FA8;
  --r-xs: 6px; --r-sm: 10px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --font-display: "Space Grotesk", "IBM Plex Sans KR", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "IBM Plex Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 30px;
  --rule: 1px solid var(--muted-2);
  --rule-strong: 2px solid var(--muted-2);
  --nav-height: 57px;
  --page: 1120px;
}
[data-theme="dark"] {
  --accent: #F2783A; --accent-600: #E8682B; --accent-700: #F19C5C; --accent-soft: #2E2017;
  --canvas: #1B1611; --surface: #251E18; --surface-2: #2F271F;
  --ink: #F3EBDD; --ink-2: #C9BCA8; --muted: #998A75; --muted-2: #7C6F5C;
  --border: #392F26; --border-2: #4A3E31;
  --short: #E8682B; --monthly: #3E9CC0;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--canvas);
  scroll-snap-type: y proximity;
  scroll-padding-top: 0;
}
body {
  margin: 0; color: var(--ink); background: transparent;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
:lang(ko) body, :lang(ko) h1, :lang(ko) h2, :lang(ko) p, :lang(ko) li { word-break: keep-all; }
a { color: inherit; }
figure { margin: 0; min-width: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent-600); color: #fff; padding: var(--s-2) var(--s-4);
}
.skip-link:focus { left: 0; }

/* ---------- Background: the same drifting orbs as the blog ---------- */
.bg-art { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bg-art .orb {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .18; mix-blend-mode: multiply;
}
[data-theme="dark"] .bg-art .orb { filter: blur(104px); opacity: .24; mix-blend-mode: screen; }
.bg-art .o1 { width: 48vw; height: 48vw; left: -10vw; top: -8vw; background: radial-gradient(circle at 32% 32%, var(--accent), transparent 70%); animation: drift1 68s ease-in-out infinite alternate; }
.bg-art .o2 { width: 42vw; height: 42vw; right: -12vw; top: 8vh; background: radial-gradient(circle, var(--viz-teal), transparent 70%); animation: drift2 86s ease-in-out infinite alternate; }
.bg-art .o3 { width: 40vw; height: 40vw; left: 16vw; bottom: -16vw; background: radial-gradient(circle, var(--viz-sand), transparent 71%); animation: drift1 76s ease-in-out infinite alternate-reverse; }
.bg-art .o4 { width: 34vw; height: 34vw; right: 4vw; bottom: -10vw; background: radial-gradient(circle, var(--viz-olive), transparent 72%); animation: drift2 94s ease-in-out infinite alternate-reverse; }
.bg-art .o5, .bg-art .grain { display: none; }
@keyframes drift1 { to { transform: translate(8vw, 6vh) scale(1.08); } }
@keyframes drift2 { to { transform: translate(-7vw, 8vh) scale(.94); } }

#dots { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--rule);
}
.nav-in {
  max-width: var(--page); margin: 0 auto; padding-inline: var(--s-5); min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
}
.brand-mk { width: 22px; height: 22px; border-radius: var(--r-xs); background: var(--grad); display: grid; place-items: center; }
.brand-mk svg { width: 16px; height: 16px; }
.brand-accent { color: var(--accent); }
.nav-right { display: flex; align-items: center; gap: var(--s-4); }
.nav-link { font-size: var(--text-sm); color: var(--muted); text-decoration: none; }
.nav-link:hover { color: var(--ink); }
.icon-btn {
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: none; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--ink-2);
}
.icon-btn:hover:not(:disabled) { border-color: var(--border-2); color: var(--ink); }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn--text { width: auto; padding: 0 8px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; }
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

.pager {
  position: fixed; right: var(--s-5); bottom: var(--s-4); z-index: 15;
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  padding: var(--s-1); border-radius: var(--r-sm); backdrop-filter: blur(8px);
}
.pager.on-break { color: #fff; background: color-mix(in srgb, #7E3413 70%, transparent); }
.pager.on-break .icon-btn { color: #fff; border-color: rgba(255,255,255,.5); }

/* ---------- Slides ---------- */
.slide {
  position: relative; z-index: 2; min-height: 100vh; min-height: 100svh;
  display: flex; scroll-snap-align: start;
  padding: calc(var(--nav-height) + var(--s-6)) var(--s-5) var(--s-7);
  --p: 1;
}
.slide-in {
  width: 100%; max-width: var(--page); margin: 0 auto; min-width: 0;
  display: flex; flex-direction: column;
  will-change: opacity, transform;
}
.measuring .slide-in { transform: none !important; }

.post-meta { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.6vw, 84px); line-height: 1.04; margin-top: var(--s-3); }
:lang(ko) h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.15; }
h2 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; margin-top: var(--s-2); }
.lead { color: var(--ink-2); font-size: var(--text-lg); max-width: 34em; margin: var(--s-5) 0 0; }
.hint { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin: var(--s-6) 0 0; }
.note { color: var(--muted); font-size: var(--text-sm); margin: var(--s-1) 0 0; }
.takeaway {
  flex: none; margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: var(--rule);
  color: var(--ink-2); max-width: 100%;
}
.stage { flex: 1 1 auto; min-height: 0; margin-top: var(--s-5); }
.chart { position: relative; min-height: 300px; min-width: 0; }
.chart svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart text, .map text { font-family: var(--font-body); font-size: 13px; fill: var(--ink-2); }
.chart text.value { font-family: var(--font-mono); font-size: 12px; fill: var(--ink); }
.chart text.tick { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.chart .grid { stroke: var(--border); stroke-width: 1; }
.chart .axis { stroke: var(--muted-2); stroke-width: 1; }
.chart [data-tip] { cursor: default; }

.grow-x { transform: scaleX(var(--p)); }
.grow-line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }

.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.two-up > figure, .four-up > figure { display: flex; flex-direction: column; min-height: 0; }
.two-up > figure .chart, .four-up > figure .chart { flex: 1 1 auto; }
.four-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-6); }
.four-up .chart { min-height: 170px; }

.market-name { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-2); display: flex; gap: var(--s-2); align-items: center; }
.market-name::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--short); }
.market-monthly::before { background: var(--monthly); border-radius: 2px; }

.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.figure-number {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(56px, 8vw, 104px); margin: var(--s-3) 0 0;
}

/* ---------- Cover and closing ---------- */
.cover-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.map-figure { position: relative; min-width: 0; }
.map-figure .legend { position: absolute; left: 0; top: 0; margin: 0; z-index: 1; flex-direction: column; }
.map { position: relative; aspect-ratio: 5 / 4; max-height: calc(100vh - 210px); width: 100%; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map .outline { fill: none; stroke: var(--muted-2); stroke-width: 1.2; }
.map .ring { fill: none; stroke: var(--muted-2); stroke-dasharray: 2 4; }
.map .tower { fill: var(--ink); stroke: var(--canvas); stroke-width: 2; }
.map text { font-size: 11px; fill: var(--muted); font-family: var(--font-mono); }
.map text.tower-label { fill: var(--ink); font-weight: 600; }

/* ---------- Two markets ---------- */
.market-panel { display: flex; flex-direction: column; min-width: 0; }
.dot-hist { flex: 1 1 auto; min-height: 170px; margin-top: var(--s-3); border-bottom: 1px solid var(--muted-2); }
.hist-note { margin: var(--s-1) 0 0; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.market-panel .axis-note { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: var(--s-1); }

/* ---------- Lists ---------- */
.predictors { display: flex; flex-direction: column; justify-content: center; }
.predictors li {
  flex: 1 1 0; max-height: 84px; display: grid; grid-template-columns: 7em 1fr minmax(0, 17em); gap: var(--s-4); align-items: center;
  border-bottom: 1px solid var(--border);
}
.predictors strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.predictors span.detail { color: var(--ink-2); }
.units { display: flex; gap: 6px; }
.units i { width: min(3vw, 36px); height: 26px; border-radius: 4px; background: var(--accent); }
.checks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); align-content: center; }
.checks li { border-top: var(--rule-strong); padding-top: var(--s-3); }
.checks .step { font-family: var(--font-display); font-size: clamp(48px, 6vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.checks strong { display: block; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; margin-top: var(--s-2); }
.checks p { margin: var(--s-2) 0 0; color: var(--ink-2); }

.slide-break { background: var(--accent-600); color: #fff; align-items: center; }
[data-theme="dark"] .slide-break { background: #A84417; }
.slide-break h2 { font-size: clamp(48px, 8vw, 104px); line-height: 1.02; }
.break-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-6); font-size: var(--text-lg); }
.break-list span { font-family: var(--font-mono); margin-right: var(--s-2); }

.moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-7); align-content: center; }
.moves li { border-top: var(--rule); padding-top: var(--s-4); display: grid; grid-template-columns: 2.6em 1fr; gap: var(--s-4); align-items: start; font-size: clamp(36px, 5vw, 68px); padding-block: var(--s-5); }
.moves .big { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.moves strong { display: block; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 26px); font-weight: 600; line-height: 1.25; }
.moves p { margin: var(--s-2) 0 0; font-size: var(--text-base); color: var(--ink-2); line-height: 1.5; }

.playbooks ul { margin-top: var(--s-3); border-top: var(--rule-strong); }
.playbooks li { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; padding-block: var(--s-3); border-bottom: 1px solid var(--border); }
.playbooks { align-content: center; }

.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); align-content: center; }
.limits li { border-top: var(--rule); padding-top: var(--s-3); }
.limits strong { display: block; font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 42px); font-weight: 600; line-height: 1.2; }
.limits p { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--text-lg); }
@media (max-height: 760px) and (min-width: 901px) {
  .slide { padding-top: calc(var(--nav-height) + var(--s-4)); padding-bottom: var(--s-5); }
  .equation td { padding-block: 2px; }
  .equation .lhs { margin-block: var(--s-1); }
  .map { max-height: calc(100vh - 150px); }
}

.equation { font-family: var(--font-mono); font-size: var(--text-sm); min-width: 0; }
.equation .lhs { font-size: var(--text-base); color: var(--ink); margin: var(--s-2) 0 var(--s-3); }
.equation table { width: 100%; border-collapse: collapse; }
.equation td { padding: 5px 0; border-bottom: 1px solid var(--border); color: var(--ink-2); }
.equation td:first-child { width: 5.6em; text-align: right; padding-right: var(--s-3); color: var(--ink); white-space: nowrap; }
.equation .more { margin: var(--s-2) 0 0; color: var(--muted); font-size: var(--text-xs); }
.equation .fit { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--text-xs); }

.why-share { margin-top: var(--s-4); height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.why-share span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p)); }
.why-claim { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin: var(--s-5) 0 0; }

.close-list { margin-top: var(--s-4); }
.close-list li { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); padding-block: var(--s-2); border-bottom: 1px solid var(--border); }
.close-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 var(--s-3); }
.close-links a { color: var(--accent-600); text-underline-offset: 3px; }
[data-theme="dark"] .close-links a { color: var(--accent); }

#tooltip {
  position: fixed; z-index: 30; pointer-events: none; opacity: 0; max-width: 240px;
  background: var(--ink); color: var(--canvas); padding: var(--s-1) var(--s-2);
  border-radius: var(--r-xs); font-size: var(--text-xs); line-height: 1.45;
}
#tooltip.show { opacity: 1; }
.noscript { position: relative; z-index: 3; text-align: center; padding: var(--s-5); }
.sx-footer { position: relative; z-index: 3; scroll-snap-align: end; }

@media (min-width: 901px) and (min-height: 700px) {
  html { scroll-snap-type: y mandatory; }
}

@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  .slide { min-height: 0; padding-block: var(--s-7); }
  .slide-cover, .slide-close, .slide-break { min-height: 100svh; }
  .slide-cover { padding-top: calc(var(--nav-height) + var(--s-5)); }
  .cover-grid, .two-up { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .four-up { grid-template-rows: none; gap: var(--s-4); }
  .four-up .chart { min-height: 220px; }
  .checks { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .moves, .limits { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .predictors li { flex: none; max-height: none; padding-block: var(--s-2); grid-template-columns: 6em 1fr; gap: 0 var(--s-3); }
  .predictors strong { font-size: var(--text-lg); }
  .predictors span.detail { grid-column: 1 / -1; }
  .units { gap: 3px; }
  .units i { width: 14px; height: 14px; }
  .chart { min-height: 340px; }
  .two-up .chart { min-height: 320px; }
  .dot-hist { height: 170px; flex: none; }
  .nav-link { display: none; }
  .pager { right: var(--s-3); bottom: var(--s-3); }
  .pager .icon-btn { display: none; }
  .slide:not(.slide-cover):not(.slide-close):not(.slide-break) { padding-top: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .bg-art .orb { animation: none; }
  .slide-in { will-change: auto; }
}