/* per-slide components */
.small { font-size: 18px; }
.inline-ic { width: 26px; height: 26px; vertical-align: -6px; margin: 0 4px; }
.inline-ic.lg { width: 36px; height: 36px; vertical-align: -9px; margin: 0 10px 0 0; }
.x { font: 700 18px/1 var(--mono); color: var(--dust); }
ul.plain { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
a { color: var(--arcane); }

/* cover */
.cover { justify-content: center; gap: 34px; }
.cover .cover-art { position: absolute; right: -120px; top: 0; height: 100%; width: auto; max-width: none; object-fit: cover; opacity: .9;
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); }
.enter .cover-art { animation: kenburns 18s ease-out both; }
@keyframes kenburns { from { transform: scale(1.08) translateX(30px); } to { transform: scale(1) translateX(0); } }
.cover-veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 30%, rgba(10,15,28,.55) 60%, rgba(10,15,28,.15)), linear-gradient(0deg, var(--void) 0%, transparent 35%); }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover h1 { font-size: 150px; letter-spacing: .02em; }
.cover h1 .hl { text-shadow: 0 0 40px rgba(86,200,245,.45); }
.cover-sub { font: 700 34px/1.3 var(--serif); color: var(--bone); margin-top: 10px; }
.cover-stats { display: grid; grid-template-columns: repeat(4, max-content); gap: 56px; margin-top: 12px; }
.cover-stats .l { max-width: 12em; }
.cover-hint { color: var(--dust); font-size: 15px; }

/* sources */
.pipeline { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr 44px 1fr; align-items: stretch; }
.pipe-node { border: 1px solid var(--line); background: var(--slate); padding: 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.pipe-node b { font-size: 21px; color: var(--sand); }
.pipe-node span { font-size: 16px; color: var(--dust); line-height: 1.45; }
.pipe-arrow { align-self: center; height: 2px; background: var(--sand-dim); position: relative; margin: 0 6px; }
.pipe-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--sand-dim); }
.src-cards h3 { margin-bottom: 10px; }
.src-cards p { font-size: 19px; }

/* accounts */
.acct { display: flex; flex-direction: column; gap: 18px; padding: 28px 30px; }
.acct header { display: flex; align-items: center; gap: 14px; }
.acct code { font: 700 26px/1.2 var(--mono); color: #fff; }
.acct-tag { font-size: 15px; padding: 4px 10px; background: var(--sand); color: var(--void); font-weight: 700; }
.acct-tag.hlbg { background: var(--arcane); }
.acct.alt { border-color: var(--arcane-dim); box-shadow: 0 0 0 1px rgba(86,200,245,.15) inset; }
.acct-rank { display: flex; align-items: center; gap: 18px; }
.acct-rank .n { font-size: 64px; color: var(--bone); line-height: 1; }
.acct-dl { margin: 0; display: grid; gap: 10px; }
.acct-dl div { display: grid; grid-template-columns: 9em 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.acct-dl dt { color: var(--dust); }
.acct-dl dd { margin: 0; }
.evidence { font-size: 17px; max-width: 70em; }

/* roles */
.bars { display: flex; flex-direction: column; gap: 16px; }
.bar-row { display: grid; grid-template-columns: 3em 1fr 6em; gap: 16px; align-items: center; }
.bar-l { font-weight: 700; }
.bar-track { height: 26px; background: var(--slate); border: 1px solid var(--line); }
.bar-track i { display: block; height: 100%; width: var(--w); background: var(--arcane); }
.bar-track i.gold-fill { background: var(--sand); }
.bar-track i.dim-fill { background: var(--dust); }
.enter .bar-track i { animation: barfill 1.1s cubic-bezier(.2,.7,.2,1) both .2s; }
@keyframes barfill { from { width: 0; } }
.bar-v { text-align: right; color: var(--dust); }
.wr-table { margin-top: 18px; }
.mini-tl { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.mini-tl li { display: grid; gap: 4px; border-left: 2px solid var(--sand-dim); padding-left: 14px; font-size: 19px; }
.mini-tl .mono { color: var(--sand); font-size: 15px; }

/* kit */
.kit { display: grid; grid-template-columns: 560px 1fr; gap: 36px; align-items: start; }
.kit-list { display: flex; flex-direction: column; gap: 10px; }
.kit-btn { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; text-align: left; padding: 12px 16px; background: var(--slate); border: 1px solid var(--line); color: var(--bone); font: inherit; cursor: pointer; }
.kit-btn b { display: block; font-size: 22px; }
.kit-btn small { display: block; font-size: 16px; color: var(--dust); line-height: 1.45; margin-top: 2px; }
.kit-btn:hover, .kit-btn:focus-visible { border-color: var(--sand-dim); outline: none; }
.kit-btn.on { border-color: var(--arcane); background: linear-gradient(90deg, rgba(86,200,245,.12), transparent 70%), var(--slate); }
.kit-player video { aspect-ratio: 1056 / 720; object-fit: cover; }

/* demos */
.demo { width: 100%; height: auto; display: block; }
.demo text { font-family: var(--sans); font-size: 18px; fill: var(--dust); }
.demo .demo-label { font-size: 17px; font-weight: 700; }
.demo .demo-cap { font-size: 18px; }
.demo .mono, .demo .q-timer, .demo .e-read, .demo .r-hits, .demo .w-dmg { font-family: var(--mono); font-size: 22px; }
.demo-wrap { background: #0d1424; border: 1px solid var(--line); padding: 10px 0; }
.q-demo .q-state { font-size: 22px; }
.w-demo { max-width: 560px; }
.r-split { grid-template-columns: 1fr 1fr; }
.r-stage { display: flex; flex-direction: column; gap: 8px; }
.demo-note { font-size: 15px; }
.shot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.shot-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.shot-list b { font-size: 22px; }
.shot-list p { color: var(--dust); font-size: 18px; }
.shot-n { width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--arcane); color: var(--arcane); font: 700 20px/1 var(--mono); }
.shot-n.warn { border-color: var(--ember); color: var(--ember); }

/* combos */
.combos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.combo { background: var(--slate); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.combo-name { font: 700 24px/1.2 var(--serif); color: var(--sand); }
.combo .keys { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.combo .keys i { font-style: normal; color: var(--dust); font-size: 16px; }
.combo .keys img + img { position: relative; }
.combo p.muted { font-size: 18px; }

/* skill order */
.order-grid { display: flex; flex-direction: column; gap: 8px; }
.order-row { display: grid; grid-template-columns: 70px repeat(18, 1fr); gap: 6px; align-items: center; }
.order-row .cell { height: 44px; border: 1px solid var(--line); background: var(--slate); display: grid; place-items: center; font: 700 17px/1 var(--mono); color: transparent; }
.order-row .cell.on { color: var(--void); }
.order-row[data-k="Q"] .cell.on { background: var(--arcane); }
.order-row[data-k="W"] .cell.on { background: #8fb7d6; }
.order-row[data-k="E"] .cell.on { background: var(--dust); }
.order-row[data-k="R"] .cell.on { background: var(--sand); }
.enter .order-row .cell.on { animation: pop .35s ease both; animation-delay: calc(var(--i) * 70ms + .2s); }
@keyframes pop { from { transform: scale(.4); opacity: .001; } }

/* runes */
.keystones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ks { background: var(--slate); border: 1px solid var(--line); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.ks-icon { width: 110px; height: 110px; margin: -6px 0 4px -8px; filter: drop-shadow(0 0 18px rgba(86,200,245,.25)); }
.ks-rec { font-size: 19px; }
.ks p.muted { font-size: 18px; }
.runepages .rp { background: var(--slate); border: 1px solid var(--line); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.rp header { display: flex; gap: 14px; align-items: center; }
.rp header img { width: 84px; height: 84px; }
.rp header b { font: 900 30px/1.2 var(--serif); display: block; }
.rp header small { color: var(--dust); font-size: 16px; }
.rp-tree { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.rp-tree img { width: 54px; height: 54px; border-radius: 50%; background: #0a0f1c; border: 1px solid var(--sand-dim); }
.rp-label { width: 3em; color: var(--sand); font-size: 17px; }
.rp-names { font-size: 17px; color: var(--dust); }
.rp.dh { border-color: #6b2a2a; }

/* build path */
.buildpath { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1.1fr 34px 1.1fr 34px 1fr; align-items: stretch; }
.bp-stage { background: var(--slate); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bp-stage.core { border-color: var(--arcane-dim); }
.bp-t { color: var(--sand); font-size: 16px; }
.bp-items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 92px; }
.bp-items .or { color: var(--dust); font-size: 16px; }
.bp-n { font-size: 17px; line-height: 1.45; }
.bp-arrow { align-self: center; height: 2px; background: var(--sand-dim); margin: 0 4px; position: relative; }
.bp-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--sand-dim); }

/* spells */
.spell-row { display: grid; grid-template-columns: 64px 64px 1fr; gap: 12px; align-items: center; background: var(--slate); border: 1px solid var(--line); padding: 14px 18px; }
.spell-row b { font-size: 22px; }
.spell-row p { font-size: 17px; }
.support-card h3 { margin-bottom: 14px; }

/* talk slides */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.clip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.clip-main { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: start; }
.clip .ts { color: var(--sand); }
.tip-list { display: flex; flex-direction: column; gap: 16px; }
.tip { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.tip .icon { width: 52px; height: 52px; }
.tip b { font-size: 22px; display: block; }
.tip p { color: var(--dust); font-size: 18px; }
.tip cite { display: block; font: 500 14px/1.4 var(--mono); color: var(--sand-dim); font-style: normal; margin-top: 4px; }
.check .panel h3 { margin-bottom: 12px; }
.check li { font-size: 19px; }
.credits p { margin-bottom: 6px; }

body.scroll-mode .pipeline, body.scroll-mode .buildpath { grid-template-columns: 1fr; gap: 8px; }
body.scroll-mode .pipe-arrow, body.scroll-mode .bp-arrow { display: none; }
body.scroll-mode .kit, body.scroll-mode .combos, body.scroll-mode .keystones, body.scroll-mode .quotes, body.scroll-mode .clip-grid, body.scroll-mode .clip-main { grid-template-columns: 1fr; }
body.scroll-mode .cover h1 { font-size: 64px; }
body.scroll-mode .cover-stats { grid-template-columns: 1fr 1fr; gap: 18px; }
body.scroll-mode .cover .cover-art { right: -40%; opacity: .45; }
body.scroll-mode .order-row { grid-template-columns: 44px repeat(18, 1fr); gap: 2px; }
body.scroll-mode .order-row .cell { height: 26px; font-size: 11px; }
body.scroll-mode .acct-dl div { grid-template-columns: 1fr; }
body.scroll-mode .acct-rank .n { font-size: 40px; }
body.scroll-mode .kit-btn { grid-template-columns: 56px 1fr; }

/* density pass: fill the 900px stage */
.slide { gap: 30px; }
.slide h2 { font-size: 60px; }
.panel { padding: 26px 30px; }
.panel p, .panel li { font-size: 21px; }
.src-cards p { font-size: 21px; }
.pipe-node { padding: 24px 20px; min-height: 170px; }
.pipe-node b { font-size: 23px; }
.pipe-node span { font-size: 18px; }
.q-demo, .e-demo { margin-block: 18px; }
.ks { padding: 30px 26px; gap: 14px; }
.ks-icon { width: 150px; height: 150px; }
.ks h3 { font-size: 34px; }
.ks-rec { font-size: 22px; }
.ks p.muted { font-size: 20px; }
.order-row { grid-template-columns: 84px repeat(18, 1fr); gap: 8px; }
.order-row .cell { height: 64px; font-size: 20px; }
.order-grid .icon.sm { width: 56px; height: 56px; }
.order-grid { margin-block: 10px 16px; }
.rp { gap: 16px; padding: 28px 28px; }
.rp header img { width: 104px; height: 104px; }
.rp-tree img { width: 70px; height: 70px; }
.rp-names { font-size: 19px; }
.bp-items .icon { width: 76px; height: 76px; }
.bp-items .icon.lg { width: 112px; height: 112px; }
.bp-items { min-height: 124px; }
.bp-stage { padding: 20px 18px; gap: 12px; }
.bp-n { font-size: 19px; }
.combos .icon.sm { width: 64px; height: 64px; }
.combo { padding: 28px 24px; gap: 18px; }
.combo-name { font-size: 28px; }
.combo p.muted { font-size: 20px; }
.combos { margin-top: 20px; }
.spell-row { grid-template-columns: 76px 76px 1fr; padding: 20px 22px; }
.spell-row .icon { width: 72px; height: 72px; }
.spell-row p { font-size: 19px; }
.acct { gap: 22px; padding: 34px 36px; }
.acct-dl dd, .acct-dl dt { font-size: 22px; }
.bar-track { height: 36px; }
.bar-row { font-size: 24px; }
.wr-table { font-size: 22px; }
.kit-btn { padding: 16px 18px; }
.kit-btn small { font-size: 18px; }
.shot-list b { font-size: 25px; }
.shot-list p { font-size: 20px; }
table.nums { font-size: 21px; }
.rule-list li { font-size: 22px; }
.check li { font-size: 21px; }

/* ---------- talk slides ---------- */
.quotes { grid-template-columns: 1fr 1fr; gap: 26px 36px; margin-top: 6px; }
.quote-card { background: var(--slate); border: 1px solid var(--line); padding: 26px 30px; display: flex; flex-direction: column; gap: 14px; }
.quote-card .quote { font-size: 32px; }
.quote-card .so { font-size: 21px; color: var(--bone); padding-left: 25px; }
.quote-card .so::before { content: "→ "; color: var(--sand); margin-left: -25px; }

.pick { grid-template-columns: 1.15fr .85fr; }
.threat { display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.threat-h { font: 700 22px/1.3 var(--serif); color: var(--ember); grid-row: span 2; }
.faces { display: flex; gap: 12px; flex-wrap: wrap; }
.faces figure { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.faces img { width: 64px; height: 64px; border: 2px solid #6b2a2a; filter: saturate(.85); }
.faces figcaption { font-size: 14px; color: var(--dust); white-space: nowrap; }
.threat-q { font-size: 17px; color: var(--dust); }
.threat-q cite { font: 500 13px/1 var(--mono); color: var(--sand-dim); font-style: normal; }
.go-card { border-color: #2d5b43; }
.go-card h3 { margin-bottom: 16px; }
.go-card li { font-size: 20px; }

.rules-num { list-style: none; counter-reset: r; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rules-num li { counter-increment: r; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; }
.rules-num li::before { content: counter(r); grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--arcane); color: var(--arcane); font: 700 18px/1 var(--mono); }
.rules-num b { font-size: 22px; }
.rules-num span { font-size: 18px; color: var(--dust); }
.clip-main .clip video { aspect-ratio: 16 / 9; }

.postmortem { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.postmortem li { display: grid; grid-template-columns: 90px 1fr; gap: 14px; font-size: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.pm-t { color: var(--sand); font-size: 15px; padding-top: 4px; }

.hl-panel { border-color: var(--sand-dim); background: linear-gradient(180deg, rgba(201,164,92,.10), transparent 70%), var(--slate); }
.streak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.streak .g { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--slate); border: 1px solid var(--line); padding: 12px 16px; }
.streak .g img { width: 56px; height: 56px; grid-row: span 2; }
.streak .g span { font-size: 22px; font-weight: 700; }
.streak .g small { color: var(--dust); font-size: 15px; }
.streak .w { border-left: 4px solid var(--ok); }
.streak .w span { color: var(--ok); }
.streak .l { border-left: 4px solid var(--ember); }
.streak .l span { color: var(--ember); }

.clip-grid .clip video, .hl-grid .clip video { aspect-ratio: 16 / 9; }
.clip-grid { gap: 28px; }
.tips-row { gap: 24px; }
.tip { display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: start; }
.tip .icon { width: 56px; height: 56px; }
.tip b { font-size: 21px; }
.tip p { font-size: 17px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 36px; }
.two-col li { font-size: 19px; }

.stack-meter { margin-top: 10px; }
.sm-track { position: relative; height: 12px; background: var(--slate); border: 1px solid var(--line); margin: 34px 8px 30px; }
.sm-track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 92%; background: linear-gradient(90deg, #4a1d24, #b8434f); }
.enter .sm-track::before { animation: barfill 1.4s ease both .3s; }
.sm-track i { position: absolute; left: var(--x); top: -6px; width: 2px; height: 24px; background: var(--bone); }
.sm-track i::before { content: attr(data-n) " 层"; position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font: 700 16px/1 var(--mono); color: var(--bone); white-space: nowrap; }
.sm-track i::after { content: attr(data-t); position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font: 500 14px/1 var(--mono); color: var(--dust); }

.hl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hl-grid figcaption { flex-direction: column; gap: 2px; padding: 8px 12px; font-size: 14px; }
.hl-grid figcaption b { font-size: 16px; }

.late-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.late { display: flex; gap: 16px; align-items: flex-start; background: var(--slate); border: 1px solid var(--line); padding: 22px; }
.late b { font-size: 24px; display: block; margin-bottom: 6px; }
.late p { font-size: 18px; }
.late .warn-line { color: var(--ember); font-size: 16px; margin-top: 8px; }

body.scroll-mode .pick, body.scroll-mode .streak, body.scroll-mode .hl-grid, body.scroll-mode .late-grid, body.scroll-mode .two-col, body.scroll-mode .tips-row { grid-template-columns: 1fr; }
body.scroll-mode .threat { grid-template-columns: 1fr; }
body.scroll-mode .quote-card .quote { font-size: 20px; }

/* ---------- phase structure ---------- */
/* centre the body of each slide in the space under the heading */
.slide:not(.cover):not(.divider) > h2 + * { margin-top: auto; }
.slide:not(.cover):not(.divider) > :last-child { margin-bottom: auto; }

.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.phase { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 30px 28px; background: var(--slate); border: 1px solid var(--line); color: var(--bone); text-decoration: none; min-height: 300px; }
.phase:hover, .phase:focus-visible { border-color: var(--sand); outline: none; }
.ph-n { font: 900 110px/0.9 var(--serif); color: transparent; -webkit-text-stroke: 2px var(--sand); }
.phase b { font: 900 38px/1.2 var(--serif); display: block; margin-bottom: 10px; }
.phase p { color: var(--dust); font-size: 20px; }
.ph-sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 20px; color: var(--dust); }
.ph-sub i { font: 700 15px/1 var(--mono); font-style: normal; color: var(--void); background: var(--arcane); padding: 3px 7px; margin-right: 10px; }

.divider { justify-content: center; gap: 22px; }
.div-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.enter .div-art { animation: kenburns 14s ease-out both; }
.div-veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 25%, rgba(10,15,28,.6) 60%, rgba(10,15,28,.3)); }
.div-n { font: 900 260px/0.8 var(--serif); color: transparent; -webkit-text-stroke: 3px var(--sand); margin: 0 0 -10px; }
.div-t { font-size: 110px; }
.divider .lede { font-size: 32px; color: var(--bone); max-width: 30em; }
.div-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.div-links a { color: var(--bone); text-decoration: none; border: 1px solid var(--sand-dim); padding: 10px 18px; font-size: 20px; background: rgba(10,15,28,.6); }
.div-links a:hover, .div-links a:focus-visible { background: var(--sand); color: var(--void); outline: none; }

.pre { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: start; }
.pre-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pc { display: grid; grid-template-columns: 72px 1fr; gap: 14px; background: var(--slate); border: 1px solid var(--line); padding: 18px; }
.pc > img { width: 72px; height: 72px; }
.pc b { font-size: 22px; display: block; margin-bottom: 4px; }
.pc p { font-size: 17px; color: var(--dust); }
.pc-spell { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--bone) !important; }
.pc-spell img { width: 34px; height: 34px; }
.rp.big { padding: 26px 30px; }
.rp.big .rp-tree img { width: 64px; height: 64px; }
.rp-foot { font-size: 17px; color: var(--dust); border-top: 1px solid var(--line); padding-top: 10px; }
.pre-mini .panel h3 { font-size: 22px; margin-bottom: 8px; }
.pre-mini .panel p { font-size: 18px; }
.pre .col .panel h3 { margin-bottom: 12px; }

.basics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bcard { display: grid; grid-template-columns: 64px 1fr; gap: 16px; background: var(--slate); border: 1px solid var(--line); padding: 24px 22px; }
.bcard .icon { width: 64px; height: 64px; }
.bcard b { font-size: 23px; display: block; margin-bottom: 6px; }
.bcard p { font-size: 19px; color: var(--dust); }
.bcard cite { display: block; margin-top: 8px; font: 500 13px/1.3 var(--mono); color: var(--sand-dim); font-style: normal; }

.adapt { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.ad { background: var(--slate); border: 1px solid var(--line); padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; }
.ad.ahead { border-top: 4px solid var(--ok); }
.ad.behind { border-top: 4px solid var(--ember); }
.ad-h { font: 900 30px/1 var(--serif); }
.ad .quote { font-size: 24px; }
.ad-items { display: flex; align-items: center; gap: 14px; }
.ad-items .plus { font: 700 30px/1 var(--mono); color: var(--dust); }
.ad li { font-size: 19px; }

.late-grid { grid-template-columns: repeat(3, 1fr); }
.late b { font-size: 21px; }
.check4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.check4 .panel h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.check4 li { font-size: 18px; }
.ph-chip { font: 700 16px/1 var(--mono); background: var(--sand); color: var(--void); padding: 5px 8px; }
.clip-main.flip { grid-template-columns: 1fr 1.3fr; }

body.scroll-mode .roadmap, body.scroll-mode .pre, body.scroll-mode .pre-choose, body.scroll-mode .basics, body.scroll-mode .adapt, body.scroll-mode .check4 { grid-template-columns: 1fr; }
body.scroll-mode .div-n { font-size: 120px; }
body.scroll-mode .div-t { font-size: 48px; }
body.scroll-mode .divider .lede { font-size: 20px; }
body.scroll-mode .slide > h2 + *, body.scroll-mode .slide > :last-child { margin-top: 0; margin-bottom: 0; }
.roadmap { gap: 28px; }
.phase { min-height: 420px; padding: 38px 34px; grid-template-columns: 1fr; align-content: start; gap: 8px; }
.ph-n { font-size: 150px; }
.phase b { font-size: 48px; }
.phase p, .ph-sub { font-size: 23px; line-height: 1.5; }
.ph-sub { gap: 14px; }
.clip-grid.three { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.clip-grid.three figcaption { flex-direction: column; gap: 2px; font-size: 14px; padding: 8px 12px; }
.clip-grid.three figcaption b { font-size: 16px; }
.runes-q { font-size: 26px; }
#s-lane-new .tip-list { gap: 12px; }
#s-lane-new .tip p { font-size: 17px; }
body.scroll-mode .clip-grid.three { grid-template-columns: 1fr; }

/* skill slides: numbers panel wide enough that labels never wrap */
.numrow { grid-template-columns: 1.35fr 1fr 1fr; gap: 24px; }
table.nums td:first-child, table.nums th:first-child { white-space: nowrap; }
.numrow table.nums { font-size: 19px; }
.numrow table.nums td { padding: 6px 10px; }
.numrow .panel { padding: 22px 26px; }
.numrow .panel h3 { margin-bottom: 8px; }
#s-q .demo-wrap, #s-e .demo-wrap { padding: 0; }
body.scroll-mode .numrow { grid-template-columns: 1fr; }

/* hotkey badge sits on the lower-left corner, like the in-game ability bar */
.icon-wrap { display: inline-block; position: relative; line-height: 0; }
.icon-wrap .key { left: -7px; right: auto; bottom: -7px; min-width: 26px; height: 26px; font-size: 15px; box-shadow: 0 0 0 2px var(--void); line-height: 1; }
.icon-wrap .icon.lg + .key { min-width: 32px; height: 32px; font-size: 18px; }
.combo .keys { gap: 10px; }
.combo .keys .arr { font-style: normal; color: var(--sand); font: 700 22px/1 var(--mono); }
.tip .icon-wrap, .bcard .icon-wrap { align-self: start; }

/* combos: four icons + arrows must fit one card */
.combos .icon.sm { width: 50px; height: 50px; }
.combo .keys { gap: 6px; flex-wrap: nowrap; }
.combo .keys .arr { font-size: 18px; }
.combo .keys .icon-wrap .key { min-width: 22px; height: 22px; font-size: 13px; left: -5px; bottom: -5px; }
#s-w .lede { font-size: 24px; margin-top: -10px; }

/* hover tooltips (rune / item / spell / summoner) */
img.has-tip { cursor: help; transition: filter .15s, transform .15s; }
img.has-tip:hover, img.has-tip:focus-visible { filter: brightness(1.18) drop-shadow(0 0 10px rgba(201,164,92,.55)); outline: none; }
.tip-pop {
  position: fixed; z-index: 50; max-width: 380px; padding: 14px 16px 16px; pointer-events: none;
  background: #070b15; border: 1px solid var(--sand-dim); box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px #000 inset;
  font: 400 15px/1.6 var(--sans); color: var(--bone);
}
.tip-pop .tp-name { font: 700 19px/1.3 var(--serif); color: var(--sand); }
.tip-pop .tp-sub { font: 500 13px/1.4 var(--mono); color: var(--dust); margin: 2px 0 8px; }
.tip-pop .tp-sub:empty { display: none; }
.tip-pop .tp-desc { border-top: 1px solid var(--line); padding-top: 8px; }

/* ---------- clip theater ---------- */
figure.clip { cursor: zoom-in; position: relative; }
figure.clip video { pointer-events: none; }
.clip-play { position: absolute; left: 12px; top: 12px; z-index: 2; border: 1px solid rgba(201,164,92,.7); background: rgba(7,11,21,.78);
  color: var(--bone); font: 600 14px/1 var(--sans); padding: 7px 10px; cursor: pointer; }
.clip-play span { color: var(--sand); margin-right: 4px; }
figure.clip.played .clip-play { opacity: .7; }
figure.clip.played .clip-play::after { content: "（看过）"; color: var(--dust); }
figure.clip.in-theater { outline: 2px solid var(--sand); }
.nav-sound { font-family: var(--sans) !important; padding: 0 10px; }
.nav-sound[aria-pressed="true"] { border-color: var(--sand) !important; color: var(--sand) !important; }

.theater { position: fixed; inset: 0; z-index: 40; }
.theater .th-back { position: absolute; inset: 0; background: rgba(4,6,12,.0); transition: background .45s; }
.theater.show .th-back { background: rgba(4,6,12,.82); backdrop-filter: blur(2px); }
.th-panel { position: absolute; transition: left .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1);
  background: #000; border: 1px solid var(--sand-dim); box-shadow: 0 30px 80px rgba(0,0,0,.7); }
.th-panel video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.th-cap, .th-strip { opacity: 0; transition: opacity .3s .25s; }
.theater.show .th-cap, .theater.show .th-strip { opacity: 1; }
.th-cap { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; background: var(--slate); font: 500 15px/1.4 var(--mono); color: var(--dust); }
.th-cap b { color: var(--bone); font: 700 18px/1.4 var(--sans); }
.th-strip { background: #070b15; padding: 30px 22px 12px; border-top: 1px solid var(--line); }
.th-track { position: relative; height: 4px; background: var(--line); margin: 14px 0 34px; }
.th-head { position: absolute; top: -8px; width: 2px; height: 20px; background: var(--bone); transform: translateX(-1px); }
.th-track .tk { position: absolute; top: -40px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  opacity: .35; filter: grayscale(.8); transition: opacity .2s, filter .2s, transform .2s; }
.th-track .tk img { width: 34px; height: 34px; border: 2px solid var(--sand-dim); }
.th-track .tk b { font: 700 13px/1 var(--mono); color: var(--bone); }
.th-track .tk.lit { opacity: 1; filter: none; transform: translateX(-50%) scale(1.12); }
.th-track .tk.lit img { border-color: var(--sand); box-shadow: 0 0 14px rgba(201,164,92,.6); }
.th-track .tkill { position: absolute; top: 12px; transform: translateX(-50%); font: 700 13px/1 var(--sans); color: var(--dust); white-space: nowrap; }
.th-track .tkill::before { content: "✦ "; }
.th-track .tkill.lit { color: var(--ember); }
.th-seq { font: 700 20px/1.2 var(--mono); color: var(--dust); min-height: 24px; }
.th-seq b { color: var(--sand); }

/* static cast order under a clip */
.cast-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 5px; padding: 8px 10px; background: #0b111f; border-top: 1px solid var(--line); }
.cast-row i { font-style: normal; color: var(--sand-dim); font: 700 12px/1 var(--mono); }
.cast-row .ck { position: relative; line-height: 0; }
.cast-row .ck img { width: 26px; height: 26px; border: 1px solid var(--sand-dim); }
.cast-row .ck b { position: absolute; left: -3px; bottom: -4px; font: 700 10px/1 var(--mono); background: var(--sand); color: var(--void); padding: 2px 3px; }

/* ---------- combo / clip layouts ---------- */
.combo-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.cc { display: flex; flex-direction: column; gap: 12px; }
.cc > p { font-size: 18px; color: var(--dust); }
.cc > p b { color: var(--bone); }
.cc figcaption { flex-direction: column; gap: 2px; font-size: 13px; padding: 8px 12px; }
.cc figcaption b { font-size: 16px; }
.mid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.mid-grid .rule-list li { font-size: 19px; }
.hl-grid figure[data-step]:not(.shown) { opacity: .25; filter: saturate(.3); transform: none; }

/* ---------- stacks glossary ---------- */
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sk { background: var(--slate); border: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.sk header { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.sk header img { width: 52px; height: 52px; }
.sk header b { display: block; font: 700 21px/1.3 var(--serif); }
.sk p { font-size: 16px; color: var(--dust); line-height: 1.5; }
.sk p b { color: var(--bone); }
.sk .sk-why { color: var(--sand); }
.chip-keep, .chip-reset, .chip-lose { display: inline-block; margin-top: 4px; font: 600 12px/1 var(--sans); padding: 4px 7px; }
.chip-keep { background: rgba(91,201,138,.15); color: var(--ok); }
.chip-reset { background: rgba(86,200,245,.15); color: var(--arcane); }
.chip-lose { background: rgba(229,83,61,.15); color: var(--ember); }
.pips { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; height: 8px; margin-top: auto; }
.sk-sum { justify-content: center; border-color: var(--sand-dim); }
.sk-sum b { font: 700 22px/1.3 var(--serif); color: var(--sand); }
.sk-sum li { font-size: 18px; }

/* ---------- names and terms in text ---------- */
.term { border-bottom: 1px dotted rgba(201,164,92,.65); cursor: help; }
.term:hover, .term:focus-visible { color: var(--sand); outline: none; background: rgba(201,164,92,.10); }
.term-glossary { border-bottom-color: rgba(86,200,245,.8); }
.tip-pop .tp-head { display: flex; gap: 12px; align-items: center; }
.tip-pop .tp-head img { width: 48px; height: 48px; border: 1px solid var(--sand-dim); flex: none; }
.tip-pop .tp-sub { margin-bottom: 0; }
.tip-pop .tp-desc { margin-top: 10px; }

body.scroll-mode .combo-cols, body.scroll-mode .mid-grid, body.scroll-mode .stack-grid { grid-template-columns: 1fr; }

.pips i { display: block; background: var(--slate-2); border: 1px solid var(--line); }
.sk.shown .pips i { background: var(--sand); border-color: var(--sand); transition: background .2s calc(var(--i) * 90ms + .2s), border-color .2s calc(var(--i) * 90ms + .2s); }
.sk.shown .pips.lose i:nth-last-child(-n+5) { animation: pipdrop 2.6s ease calc(1.6s) infinite; }
@keyframes pipdrop { 0%, 55% { background: var(--sand); } 65%, 90% { background: var(--ember); opacity: .25; } 100% { background: var(--sand); opacity: 1; } }
body.scroll-mode .sk .pips i { background: var(--sand); }

/* overflow fixes: midgame and highlights */
.mid-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.mid-grid .clip { max-width: 520px; }
.mid-grid .cc { gap: 10px; }
.mid-grid .rule-list li { font-size: 17px; }
#s-midgame .two-col li { font-size: 17px; }
#s-midgame { gap: 20px; }
.hl-grid .cast-row { display: none; }
.hl-grid { gap: 14px 18px; }

/* ---------- front: cover buttons ---------- */
.cover-cred { font-size: 24px; color: var(--bone); max-width: 34em; }
.cover-cred b { color: var(--arcane); font-family: var(--mono); }
.cover-go { display: flex; gap: 14px; flex-wrap: wrap; }
.cover-go .go { text-decoration: none; color: var(--bone); border: 1px solid var(--sand-dim); background: rgba(10,15,28,.7); padding: 16px 24px; font: 700 22px/1 var(--sans); }
.cover-go .go.primary { background: var(--sand); color: var(--void); border-color: var(--sand); }
.cover-go .go:hover, .cover-go .go:focus-visible { border-color: var(--arcane); outline: none; transform: translateY(-2px); }
.nav-toc { font-family: var(--sans) !important; padding: 0 12px; }

/* ---------- table of contents ---------- */
.toc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.toc-card { background: var(--slate); border: 1px solid var(--line); padding: 16px 18px; display: grid; grid-template-columns: 54px 1fr; gap: 4px 12px; align-content: start; }
.toc-card .tc-n { font: 900 40px/1 var(--serif); color: transparent; -webkit-text-stroke: 1.5px var(--sand); grid-row: span 1; }
.toc-card b { font: 700 24px/1.2 var(--serif); display: block; }
.toc-card small { color: var(--dust); font-size: 15px; }
.toc-card nav { grid-column: 1 / -1; display: flex; flex-direction: column; margin: 6px 0 8px; }
.toc-card nav a { display: flex; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--bone); font-size: 17px; padding: 5px 8px; border-top: 1px solid #1e2940; }
.toc-card nav a:hover, .toc-card nav a:focus-visible { background: rgba(201,164,92,.14); color: var(--sand); outline: none; }
.toc-card nav a .pg { font: 500 14px/1.6 var(--mono); color: var(--dust); }
.toc-card.appendix { border-style: dashed; }
.toc-card.appendix .tc-n { -webkit-text-stroke-color: var(--dust); }

/* ---------- 30-second build card ---------- */
.tldr { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bc { background: var(--slate); border: 1px solid var(--arcane-dim); padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.bc.bot { border-color: #6b2a2a; }
.bc header { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bc header img { width: 64px; height: 64px; }
.bc header b { font: 900 32px/1.1 var(--serif); display: block; }
.bc header small { color: var(--dust); font-size: 16px; }
.bc header a { margin-left: auto; color: var(--sand); text-decoration: none; font-size: 17px; border: 1px solid var(--sand-dim); padding: 6px 12px; }
.bc header a:hover { background: var(--sand); color: var(--void); }
.bc-row { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.bc-l { font: 600 15px/1 var(--mono); color: var(--sand); letter-spacing: .1em; }
.bc-ic { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bc-ic > img { width: 48px; height: 48px; border: 1px solid var(--line); background: #0a0f1c; }
.bc-ic > img[src*="rune/"] { border-radius: 50%; }
.bc-ic > img.core { width: 58px; height: 58px; border: 2px solid var(--sand); }
.bc-ic > i:not(.arr) { width: 10px; }
.bc-ic .arr { font-style: normal; color: var(--sand-dim); font: 700 20px/1 var(--mono); }
.bc-ic .icon.sm { width: 44px; height: 44px; }
.bc-note { font-size: 15px; color: var(--dust); margin: 0 6px; }
.tldr-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tldr-rules a { text-decoration: none; color: var(--bone); background: var(--slate-2); border: 1px solid var(--line); padding: 14px 18px; font-size: 19px; display: flex; gap: 12px; align-items: baseline; }
.tldr-rules a b { font: 700 15px/1 var(--mono); color: var(--void); background: var(--arcane); padding: 4px 8px; flex: none; }
.tldr-rules a:hover { border-color: var(--sand); }

/* ---------- profile: pros / cons ---------- */
.proscons { gap: 28px; }
.pc-col { background: var(--slate); border: 1px solid var(--line); padding: 24px 28px; }
.pc-col.pros { border-top: 4px solid var(--ok); }
.pc-col.cons { border-top: 4px solid var(--ember); }
.pc-h { font: 900 28px/1 var(--serif); margin-bottom: 16px; }
.pc-col li { font-size: 20px; }
.core-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.core-quotes .quote { font-size: 22px; }
.core-quotes cite { font-size: 14px; }

body.scroll-mode .toc-grid, body.scroll-mode .tldr, body.scroll-mode .tldr-rules, body.scroll-mode .core-quotes { grid-template-columns: 1fr; }
body.scroll-mode .cover-go .go { font-size: 17px; padding: 12px 16px; }

.toc-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.toc-card { padding: 14px 16px; grid-template-columns: 46px 1fr; }
.toc-card .tc-n { font-size: 34px; }
.toc-card b { font-size: 22px; }
.toc-card small { font-size: 14px; }
.toc-card nav a { font-size: 16px; padding: 5px 6px; }
.toc-card.quick { border-color: var(--sand-dim); }
.toc-card.quick .tc-n { -webkit-text-stroke: 0; color: var(--sand); }
.bc-ic > img { width: 54px; height: 54px; }
.bc-ic > img.core { width: 64px; height: 64px; }

/* theater screen: local video or Bilibili embed */
.th-screen { position: relative; background: #000; }
.th-screen video, .th-screen iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.th-panel > video { display: none; }
img.clip-poster { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bili-link { font: 600 13px/1.4 var(--sans); color: var(--arcane); text-decoration: none; white-space: nowrap; align-self: flex-start; }
.bili-link:hover { text-decoration: underline; }
.th-cap .bili-link { font-size: 16px; }

.nav-home { color: var(--sand); text-decoration: none; font-family: var(--sans); font-size: 14px; border: 1px solid var(--line); padding: 8px 10px; white-space: nowrap; }
.nav-home:hover, .nav-home:focus-visible { border-color: var(--sand); outline: none; }
body.scroll-mode .nav-home { font-size: 12px; padding: 6px 8px; }