/* Up or Down? GOLD — site pages (top page, reading pages, about, terms, privacy). Same tokens as the app. */
:root {
  --bg: #E9ECEF; --surface: #FAFBFC; --raised: #FFFFFF; --line: #D2D8DF; --grid: rgba(23, 32, 43, .07);
  --fg: #17202B; --muted: #586271; --faint: #8A939F;
  --gold: #946609; --gold-2: #C8961F; --gold-soft: rgba(200, 150, 31, .14);
  --cd-up: #2560C6; --cd-down: #D1394B; --ma: #C8961F;
  --c1: #B07D12; --c2: #008F82;
  --btn: #17202B; --btn-fg: #FFFFFF; --cta: #C8961F; --cta-fg: #17202B;
  --hatch: rgba(23, 32, 43, .055);
  --shadow: 0 1px 0 rgba(23, 32, 43, .04), 0 10px 30px -14px rgba(23, 32, 43, .22);
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --f-display: 'Big Shoulders Display', 'IBM Plex Sans', 'Arial Narrow', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --f-brand: 'Big Shoulders Display', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0C1115; --surface: #121920; --raised: #182129; --line: #25303A; --grid: rgba(228, 234, 240, .06);
    --fg: #E3E8ED; --muted: #94A1AE; --faint: #67737F;
    --gold: #E3B34C; --gold-2: #E3B34C; --gold-soft: rgba(227, 179, 76, .13);
    --cd-up: #4C8EF5; --cd-down: #F0566A; --ma: #E3B34C;
    --c1: #B88716; --c2: #0A9E90;
    --btn: #E3E8ED; --btn-fg: #0C1115; --cta: #E3B34C; --cta-fg: #0C1115;
    --hatch: rgba(228, 234, 240, .05);
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .75);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0C1115; --surface: #121920; --raised: #182129; --line: #25303A; --grid: rgba(228, 234, 240, .06);
  --fg: #E3E8ED; --muted: #94A1AE; --faint: #67737F;
  --gold: #E3B34C; --gold-2: #E3B34C; --gold-soft: rgba(227, 179, 76, .13);
  --cd-up: #4C8EF5; --cd-down: #F0566A; --ma: #E3B34C;
  --c1: #B88716; --c2: #0A9E90;
  --btn: #E3E8ED; --btn-fg: #0C1115; --cta: #E3B34C; --cta-fg: #0C1115;
  --hatch: rgba(228, 234, 240, .05);
  --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .75);
  color-scheme: dark;
}
:root.l-ja {
  --f-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
  --f-display: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}
:root.l-ko {
  --f-body: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --f-display: 'Nanum Myeongjo', 'AppleMyungjo', serif;
}
:root.l-zh {
  --f-body: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif;
  --f-display: 'Songti SC', 'STSong', 'Noto Serif SC', 'Noto Serif CJK SC', 'SimSun', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--fg); font-family: var(--f-body); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
:root.l-zh body, :root.l-ja body, :root.l-ko body { line-height: 1.85; }
:root.l-ja :is(h1, h2, h3, .lead, .tagline, .sub, .dlead, .tile .s, .acard p, .card p) { word-break: auto-phrase; }
:root.l-ko body { word-break: keep-all; }
img, svg, canvas { max-width: 100%; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--raised); padding: 6px 12px; border-radius: 8px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- header ---------- */
.sh { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); }
.sh .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 60px; flex-wrap: wrap; padding-block: 8px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); text-decoration: none; min-width: 0; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo .wm { font-family: var(--f-brand); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .005em; white-space: nowrap; }
.logo .wm em { font-style: normal; color: var(--gold-2); }
.logo .tg { font-family: var(--f-mono); font-weight: 600; font-size: 10px; letter-spacing: .22em; color: var(--gold); border: 1.5px solid var(--gold-2); border-radius: 3px; padding: 3px 4px 2px 7px; line-height: 1; }
.nav { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.nav a.nl { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 6px 10px; border-radius: 999px; }
.nav a.nl:hover, .nav a.nl[aria-current="page"] { color: var(--fg); background: var(--surface); }
.nav a.play { background: var(--btn); color: var(--btn-fg); text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 7px 16px; border-radius: 999px; }
.nav a.play:hover { opacity: .9; }
.lang { position: relative; display: inline-flex; align-items: center; margin-left: 4px; }
.lang select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 13px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 28px 5px 30px; cursor: pointer; max-width: 150px; }
.lang svg { position: absolute; width: 14px; height: 14px; pointer-events: none; color: var(--muted); }
.lang .globe { left: 10px; } .lang .caret { right: 10px; }
@media (max-width: 560px) {
  .sh { position: static; }
  .logo .wm { font-size: 22px; }
  .nav { width: 100%; justify-content: space-between; }
  .nav a.nl { padding: 5px 8px; }
}

/* ---------- top page ---------- */
.hero { padding-block: 44px 40px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 36px 48px; align-items: center; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } .hero { padding-top: 28px; } }
.eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); margin: 0 0 10px; text-transform: uppercase; }
.eyebrow b { color: var(--gold); font-weight: 600; }
.hero h1 { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.hero h1 .bn { font-family: var(--f-brand); font-weight: 800; font-size: clamp(60px, 9vw, 104px); line-height: .86; letter-spacing: .003em; }
.hero h1 .bn em { font-style: normal; color: var(--gold-2); }
.hero h1 .ed { font-family: var(--f-mono); font-weight: 600; font-size: clamp(13px, 1.4vw, 16px); letter-spacing: .26em; color: var(--gold); border: 2px solid var(--gold-2); border-radius: 5px; padding: 6px 7px 5px 11px; line-height: 1; }
.tagline { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; margin: 18px 0 10px; letter-spacing: .01em; }
:root:not(.l-ja):not(.l-ko):not(.l-zh) .tagline { text-transform: uppercase; letter-spacing: .03em; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.lead { font-size: 17px; color: var(--muted); margin: 0 0 22px; max-width: 34em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cta { display: inline-flex; align-items: center; gap: 10px; background: var(--cta); color: var(--cta-fg); text-decoration: none; font-weight: 700; font-size: 18px; padding: 14px 28px; border-radius: 999px; box-shadow: var(--shadow); transition: transform .15s ease; }
.cta:hover { transform: translateY(-1px); }
.cta svg { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.chips a { text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: 13.5px; }
.chips a:hover { border-color: var(--gold-2); }
.note { font-size: 13px; color: var(--faint); margin: 14px 0 0; }
.stage { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 14px 12px; }
.stage-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); margin: 0 2px 8px; }
.stage-top b { color: var(--fg); font-weight: 600; }
.stage canvas { display: block; width: 100%; height: clamp(250px, 34vw, 380px); }
@media (max-width: 920px) { .stage canvas { height: clamp(230px, 62vw, 360px); } }

.sec { padding-block: 56px; border-top: 1px solid var(--line); }
.sec h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; margin: 0 0 8px; }
:root:not(.l-ja):not(.l-ko):not(.l-zh) .sec h2 { text-transform: uppercase; letter-spacing: .03em; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; }
.sec .sub { color: var(--muted); margin: 0 0 28px; max-width: 46em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 20px 18px; }
.card h3 { margin: 10px 0 6px; font-size: 18px; line-height: 1.35; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card .ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.card .ic svg { width: 20px; height: 20px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: st; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.steps li { counter-increment: st; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.steps li::before { content: counter(st, decimal-leading-zero); font-family: var(--f-mono); font-weight: 600; color: var(--gold); font-size: 13px; letter-spacing: .1em; }
.steps h3 { margin: 4px 0 4px; font-size: 18px; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none; color: var(--fg); }
.tile:hover { border-color: var(--gold-2); }
.tile .v { font-family: var(--f-mono); font-weight: 600; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tile .k { font-weight: 700; font-size: 15px; }
.tile .s { color: var(--muted); font-size: 14px; }
.tile .go { margin-top: auto; padding-top: 8px; color: var(--gold); font-size: 14px; font-weight: 600; }
.alist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.alist > .acard:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .alist { grid-template-columns: minmax(0, 1fr); } }
.acard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; text-decoration: none; color: var(--fg); }
.acard:hover { border-color: var(--gold-2); }
.acard .ak { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.acard h3 { margin: 0; font-size: 18px; line-height: 1.4; }
.acard p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.more { margin-top: 20px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; }
@media (max-width: 760px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.faq div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.faq h3 { margin: 0 0 4px; font-size: 16.5px; }
.faq p { margin: 0; color: var(--muted); font-size: 15px; }
.band { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.band h2 { margin: 0; }
.band p { margin: 4px 0 0; color: var(--muted); }

/* ---------- reading pages ---------- */
.page { padding-block: 28px 56px; }
.crumb { font-size: 13.5px; color: var(--muted); margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.crumb a { color: var(--muted); }
.crumb span[aria-hidden] { color: var(--faint); }
.doc { max-width: 760px; }
.doc h1 { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.2; margin: 0 0 10px; letter-spacing: .005em; }
:root:not(.l-ja):not(.l-ko):not(.l-zh) .doc h1 { font-family: var(--f-body); font-weight: 700; letter-spacing: -.01em; }
.doc .dmeta { color: var(--faint); font-size: 13.5px; margin: 0 0 26px; font-family: var(--f-mono); }
.doc .dlead { font-size: 18px; color: var(--muted); margin: 0 0 28px; }
.doc h2 { font-size: 23px; line-height: 1.35; margin: 44px 0 10px; padding-top: 6px; }
.doc h3 { font-size: 18px; margin: 28px 0 6px; }
.doc p, .doc li { font-size: 16.5px; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li { margin: 4px 0; }
.doc li::marker { color: var(--gold); }
.doc strong { font-weight: 700; }
.doc blockquote { margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--gold-2); background: var(--surface); border-radius: 0 8px 8px 0; color: var(--fg); }
.doc blockquote p { margin: 0; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
.doc code { font-family: var(--f-mono); font-size: .9em; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.kbd { font-family: var(--f-mono); font-size: .85em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--raised); }
.fig { margin: 24px 0 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 12px; position: relative; }
.fig figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.fig .ft { font-weight: 700; font-size: 15px; margin: 0 0 2px; }
.fig .fs { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .ax { font-family: var(--f-mono); font-size: 11px; fill: var(--faint); }
.chart .gl { stroke: var(--grid); stroke-width: 1; }
.chart .base { stroke: var(--line); stroke-width: 1; }
.chart .xh { stroke: var(--faint); stroke-width: 1; opacity: 0; }
.chart.on .xh { opacity: 1; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart .dot { stroke: var(--surface); stroke-width: 2; opacity: 0; }
.chart.on .dot { opacity: 1; }
.tip { position: absolute; pointer-events: none; z-index: 3; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px 10px; font-size: 12.5px; line-height: 1.5; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transition: opacity .1s; }
.chart.on .tip { opacity: 1; }
.tip b { font-family: var(--f-mono); font-weight: 600; }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.tbl { overflow-x: auto; margin: 20px 0 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.tbl table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.tbl caption { text-align: left; padding: 12px 14px 4px; font-weight: 700; font-size: 15px; }
.tbl th, .tbl td { padding: 8px 14px; text-align: right; white-space: nowrap; border-top: 1px solid var(--line); }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; border-top: 0; vertical-align: bottom; white-space: normal; min-width: 92px; }
.tbl td { font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: 13.5px; }
.tbl td:first-child { font-family: var(--f-body); font-size: 14.5px; }
.tbl .pos { color: var(--fg); } .tbl .neg { color: var(--fg); }
.tbl .hl td { background: var(--gold-soft); }
.tbl .barcell { width: 42%; min-width: 120px; }
.tbl .bar { display: block; height: 10px; border-radius: 0 3px 3px 0; background: var(--c1); }
.tbl .tnote { font-size: 12.5px; color: var(--muted); padding: 8px 14px 12px; border-top: 1px solid var(--line); white-space: normal; }
.playbox { margin: 36px 0 8px; padding: 22px 22px 20px; border-radius: var(--r); border: 1px solid var(--gold-2); background: linear-gradient(180deg, var(--gold-soft), transparent 85%); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.playbox h2, .playbox .pbh { margin: 0; font-size: 19px; font-weight: 700; padding: 0; }
.playbox p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.playbox .cta { font-size: 16px; padding: 11px 22px; }
.rel { margin-top: 44px; }
.rel h2 { font-size: 20px; margin: 0 0 14px; }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin: 0 0 28px; font-size: 15px; }
.toc b { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc a { color: var(--fg); text-decoration: none; }
.toc a:hover { color: var(--gold); text-decoration: underline; }

/* ---------- footer ---------- */
.sf { border-top: 1px solid var(--line); padding-block: 36px 48px; color: var(--muted); font-size: 13.5px; }
.sf .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px 40px; }
@media (max-width: 760px) { .sf .cols { grid-template-columns: minmax(0, 1fr); } }
.sf h2 { font-size: 13px; color: var(--fg); margin: 0 0 8px; letter-spacing: .04em; }
.sf ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sf a { color: var(--muted); }
.sf a:hover { color: var(--fg); }
.sf .disc { margin: 0 0 8px; color: var(--muted); }
.sf .data { margin: 0; color: var(--faint); font-size: 12.5px; }
.sf .data a { color: var(--faint); }
.sf .copy { margin-top: 28px; color: var(--faint); font-size: 12.5px; }
.sf .langs { display: flex; flex-wrap: wrap; gap: 4px 12px; }

@media (max-width: 560px) {
  .chart .ax { font-size: 19px; }
  .fig { padding: 14px 12px 10px; }
  .tbl th, .tbl td { padding: 8px 10px; }
  .tbl td:first-child { white-space: normal; min-width: 116px; }
  .tbl .barcell { width: 18%; min-width: 44px; }
  .tbl thead th { min-width: 58px; font-size: 11.5px; }
  .tbl td { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }