:root {
  --s-paper: #EEF2F6; --s-card: #FFFFFF; --s-ink: #14203A; --s-muted: #556078; --s-line: #D3DAE4;
  --s-mari: #EFA43A; --s-mari-ink: #A35F0A; --s-mari-soft: #FCE7C4;
  --s-ok: #17806F; --s-ok-soft: #D5EEE9; --s-no: #C8413A; --s-no-soft: #F8DEDA; --s-info: #3552A8; --s-info-soft: #DFE5F7;
  --f-display: "Bricolage Grotesque", "Inter Display", "Segoe UI", sans-serif;
  --f-body: "IBM Plex Sans", "Inter", "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", "DejaVu Sans Mono", ui-monospace, monospace;
}
/* ===== Stage (1920×1080, its own fixed look) ===== */
.stage { width: 1920px; height: 1080px; overflow: hidden; background: var(--s-paper); color: var(--s-ink); font-family: var(--f-body);
  background-image: radial-gradient(circle at 1px 1px, rgba(20,32,58,.07) 1.4px, transparent 0); background-size: 40px 40px; }
.stage * { box-sizing: border-box; }
.st-top { position: absolute; left: 110px; right: 110px; top: 50px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.st-brand { display: flex; align-items: center; gap: 16px; font-family: var(--f-mono); font-weight: 500; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); }
.st-brand b { display: inline-block; width: 22px; height: 22px; background: var(--s-mari); border-radius: 5px; }
.st-brand em { font-style: normal; color: var(--s-ink); }
.scene { position: absolute; inset: 0; display: none; }
.st-ref { position: absolute; right: 110px; top: 42px; font-family: var(--f-mono); font-weight: 500; font-size: 22px; color: var(--s-mari-ink); border: 2px solid var(--s-mari); background: var(--s-card); border-radius: 999px; padding: 6px 20px; }
.body { position: absolute; left: 110px; right: 110px; top: 160px; bottom: 236px; display: flex; flex-direction: column; justify-content: center; }
.st-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 206px; background: var(--s-card); border-top: 2px solid var(--s-line); padding: 36px 110px 0; }
.st-cap p { margin: 0; font-size: 37px; line-height: 1.38; font-weight: 500; max-width: 1640px; color: var(--s-ink); }
.h { font-family: var(--f-display); font-weight: 800; font-size: 62px; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 40px; }
.ico { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 16px; background: var(--s-info-soft); color: var(--s-info); flex: none; }
.ico svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tone-accent .ico, .ico.accent { background: var(--s-mari-soft); color: var(--s-mari-ink); }
.tone-no .ico, .ico.no { background: var(--s-no-soft); color: var(--s-no); }
.tone-ok .ico { background: var(--s-ok-soft); color: var(--s-ok); }

/* title */
.ttl { position: absolute; left: 110px; right: 110px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.ttl .num { font-family: var(--f-display); font-weight: 800; font-size: 300px; line-height: .8; color: var(--s-mari); letter-spacing: -0.04em; margin-left: -12px; }
.ttl .of { font-family: var(--f-mono); font-size: 26px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-muted); margin: 40px 0 18px; }
.ttl h2 { font-family: var(--f-display); font-weight: 800; font-size: 112px; line-height: 1; letter-spacing: -0.025em; margin: 0; max-width: 1600px; text-wrap: balance; }
.ttl .sub { font-size: 40px; color: var(--s-muted); margin-top: 26px; }

/* cards */
.grid { display: grid; gap: 26px; }
.card { background: var(--s-card); border: 2px solid var(--s-line); border-radius: 18px; padding: 28px 30px; display: flex; gap: 22px; align-items: flex-start; }
.card.tone-accent { border-color: var(--s-mari); }
.card.tone-no { border-color: var(--s-no); }
.card .ct { font-weight: 600; font-size: 33px; line-height: 1.15; margin: 4px 0 8px; }
.card .cd { font-size: 26px; line-height: 1.35; color: var(--s-muted); margin: 0; }
.grid.c4 .card { flex-direction: column; gap: 16px; padding: 26px; }
.grid.c4 .card .ct { font-size: 30px; margin-top: 0; }
.grid.c4 .card .cd { font-size: 24px; }
.grid.c2 .card { padding: 36px 38px; }
.grid.c2 .card .ct { font-size: 40px; }
.grid.c2 .card .cd { font-size: 30px; }

/* checklist */
.chk { display: grid; gap: 18px 56px; }
.row { display: flex; gap: 22px; align-items: center; font-size: 33px; line-height: 1.25; }
.mk { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 24px; }
.mk svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mk.y { background: var(--s-ok); color: #fff; }
.mk.n { background: var(--s-no); color: #fff; }
.mk.i { background: var(--s-ink); width: 18px; height: 18px; margin: 0 15px; }
.mk.num { background: var(--s-mari); color: var(--s-ink); }
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.grp { background: var(--s-card); border: 2px solid var(--s-line); border-radius: 18px; padding: 30px 34px; display: grid; gap: 20px; align-content: start; }
.pill { justify-self: start; font-family: var(--f-mono); font-weight: 500; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; }
.pill.ok { background: var(--s-ok-soft); color: var(--s-ok); }
.pill.no { background: var(--s-no-soft); color: var(--s-no); }
.pill.info { background: var(--s-info-soft); color: var(--s-info); }
.grp .row { font-size: 31px; }

/* flow */
.flow { display: flex; align-items: stretch; }
.step { flex: 1 1 0; background: var(--s-card); border: 2px solid var(--s-line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.step.tone-accent { border-color: var(--s-mari); }
.step.tone-no { border-color: var(--s-no); }
.step .ct { font-weight: 600; font-size: 32px; line-height: 1.15; }
.step .cd { font-size: 25px; line-height: 1.35; color: var(--s-muted); }
.arw { flex: none; width: 70px; display: grid; place-items: center; transform-origin: left center; }
.arw svg { width: 54px; height: 30px; fill: none; stroke: var(--s-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tracks { display: grid; gap: 34px; }
.track { display: grid; grid-template-columns: 330px 1fr; align-items: center; gap: 24px; }
.track .tl { font-family: var(--f-display); font-weight: 700; font-size: 36px; line-height: 1.1; }
.track .flow { justify-content: flex-start; }
.track .step { flex: 0 0 400px; padding: 24px 26px; flex-direction: row; align-items: center; }
.track .step .ct { font-size: 30px; }
.track .step .cd { font-size: 25px; color: var(--s-mari-ink); font-weight: 600; }
.track .step.tone-no .cd { color: var(--s-no); }

/* timeline */
.tline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-top: 0; }
.tbar { position: absolute; left: 24px; right: 24px; top: 104px; height: 6px; background: var(--s-ink); border-radius: 3px; transform-origin: left center; }
.tp { position: relative; display: grid; gap: 14px; align-content: start; }
.tp .dt { font-family: var(--f-display); font-weight: 800; font-size: 52px; line-height: 1; height: 72px; display: flex; align-items: end; }
.tp .node { width: 46px; height: 46px; border-radius: 50%; border: 6px solid var(--s-ink); background: var(--s-paper); margin: 4px 0 8px; position: relative; z-index: 1; }
.tp.done .node { background: var(--s-ink); }
.tp.next .node { background: var(--s-mari-soft); border-color: var(--s-mari); }
.tp.main .node { background: var(--s-mari); border-color: var(--s-mari-ink); width: 58px; height: 58px; margin-top: -2px; }
.tp .tt { font-family: var(--f-mono); font-weight: 500; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.tp .td { font-size: 32px; line-height: 1.3; font-weight: 500; max-width: 500px; }
.tp.main .dt { color: var(--s-mari-ink); }

/* stat */
.stat .big { font-family: var(--f-display); font-weight: 800; font-size: 250px; line-height: .9; letter-spacing: -0.04em; color: var(--s-mari-ink); }
.stat .big.no { color: var(--s-no); }
.stat .lb { font-family: var(--f-display); font-weight: 700; font-size: 58px; line-height: 1.1; margin-top: 26px; }
.stat .sb { font-size: 32px; line-height: 1.4; color: var(--s-muted); margin-top: 26px; max-width: 1420px; }

/* bars */
.bars { display: grid; gap: 20px; }
.bar { display: grid; grid-template-columns: 620px 1fr; align-items: center; gap: 30px; }
.bar .bl { font-size: 31px; line-height: 1.2; font-weight: 500; text-align: right; }
.bar .tr { position: relative; height: 62px; }
.bar .fl { position: absolute; left: 0; top: 0; bottom: 0; background: var(--s-no); border-radius: 0 10px 10px 0; transform-origin: left center; display: flex; align-items: center; justify-content: flex-end; padding-right: 18px; }
.bar .fl span { font-family: var(--f-display); font-weight: 800; font-size: 34px; color: #fff; white-space: nowrap; }
.bar .fl.small span { position: absolute; left: calc(100% + 16px); color: var(--s-no); }
.bars .unit { font-family: var(--f-mono); font-size: 24px; color: var(--s-muted); margin: -24px 0 6px 650px; letter-spacing: .04em; }
.bars.two .bar .tr { height: 96px; }
.bars.two .bar .fl span { font-size: 48px; }
.bars.two { gap: 34px; }

/* hub */
.hub { position: relative; height: 390px; }
.hub svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub svg.lines path { fill: none; stroke: var(--s-ink); stroke-width: 3; stroke-dasharray: 1; stroke-linecap: round; }
.hub svg.lines path.no { stroke: var(--s-no); stroke-dasharray: 0.02 0.02; }
.node2 { position: absolute; background: var(--s-card); border: 2px solid var(--s-line); border-radius: 18px; display: flex; align-items: center; gap: 18px; padding: 18px 26px; font-weight: 600; font-size: 32px; }
.node2.ctr { border-color: var(--s-mari); border-width: 3px; padding: 26px 34px; font-size: 38px; }
.node2.r { padding: 16px 26px; font-size: 30px; }
.node2.r.tone-no { border-color: var(--s-no); color: var(--s-no); }
.facts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.fact { background: var(--s-card); border: 2px solid var(--s-line); border-radius: 999px; padding: 12px 26px; font-size: 27px; font-weight: 500; }

/* statement / takeaway */
.kick { font-family: var(--f-mono); font-weight: 500; font-size: 26px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-mari-ink); margin-bottom: 26px; }
.stmt .big { font-family: var(--f-display); font-weight: 800; font-size: 78px; line-height: 1.08; letter-spacing: -0.02em; max-width: 1560px; text-wrap: balance; }
.stmt .big em, .tk .big em { font-style: normal; background: linear-gradient(transparent 62%, var(--s-mari-soft) 62%); }
.stmt .sb { font-size: 33px; line-height: 1.4; color: var(--s-muted); margin-top: 34px; max-width: 1450px; }
.tk .big { font-family: var(--f-display); font-weight: 800; font-size: 72px; line-height: 1.1; letter-spacing: -0.02em; max-width: 1600px; text-wrap: balance; }
.tk .nx { display: inline-flex; align-items: center; gap: 16px; margin-top: 50px; font-family: var(--f-mono); font-weight: 500; font-size: 28px; color: var(--s-ink); border: 2px solid var(--s-ink); border-radius: 999px; padding: 12px 28px; }
.tk .nx svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }


/* cast diagram */
.cast { position: relative; height: 560px; }
.cast svg.lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cast svg.lines path { fill: none; stroke: var(--s-ink); stroke-width: 3; stroke-dasharray: 1; stroke-linecap: round; }
.cast svg.lines path.dash { stroke: var(--s-muted); stroke-dasharray: 0.03 0.03; }
.cnode { position: absolute; background: var(--s-card); border: 2px solid var(--s-line); border-radius: 18px; padding: 18px 22px; display: flex; gap: 16px; align-items: center; }
.cnode.main { border-color: var(--s-mari); border-width: 3px; }
.cnode .ct { font-weight: 600; font-size: 30px; line-height: 1.15; }
.cnode .cd { font-size: 22px; line-height: 1.3; color: var(--s-muted); margin-top: 4px; }
.cnode .ico { width: 60px; height: 60px; }
.clabel { position: absolute; font-family: var(--f-mono); font-weight: 500; font-size: 20px; letter-spacing: .04em; color: var(--s-mari-ink); background: var(--s-paper); padding: 2px 8px; white-space: nowrap; transform: translate(-50%, -50%); }

/* ===== Article mode: one scene, responsive, no caption bar ===== */
.astage-wrap { overflow: hidden; border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(20,32,58,.07) 1.4px, transparent 0); background-size: 16px 16px; }
.astage { width: 1920px; color: var(--s-ink); font-family: var(--f-body); }
.astage * { box-sizing: border-box; }
.astage .scene { position: static; display: block; }
.astage .st-ref, .astage .st-cap, .astage .h { display: none; }
.astage .body { position: static; padding: 70px 110px; display: block; }
.astage.narrow { width: 900px; }
.astage.narrow .body { padding: 44px 40px; }
.astage.narrow .grid { grid-template-columns: 1fr 1fr !important; gap: 18px; }
.astage.narrow .grid.c2 { grid-template-columns: 1fr !important; }
.astage.narrow .grid .card { flex-direction: column; gap: 12px; padding: 22px; }
.astage.narrow .groups { grid-template-columns: 1fr; }
.astage.narrow .chk { grid-template-columns: 1fr !important; grid-auto-flow: row !important; grid-template-rows: none !important; }
.astage.narrow .flow { flex-wrap: wrap; gap: 18px; }
.astage.narrow .flow .step { flex: 1 1 40%; }
.astage.narrow .arw { display: none; }
.astage.narrow .track { grid-template-columns: 1fr; }
.astage.narrow .track .step { flex: 1 1 40%; }
.astage.narrow .tline { grid-template-columns: 1fr; gap: 26px; }
.astage.narrow .tbar { display: none; }
.astage.narrow .tp .dt { height: auto; }
.astage.narrow .stat .big { font-size: 150px; }
.astage.narrow .stmt .big, .astage.narrow .tk .big { font-size: 56px; }
.astage.narrow .bar { grid-template-columns: 1fr; gap: 8px; }
.astage.narrow .bar .bl { text-align: left; }
.astage.narrow .bars .unit { margin: 0 0 6px; }
.astage.narrow .hub, .astage.narrow .cast { zoom: .48; }
.astage.narrow .facts { margin-top: 20px; }