:root {
  color-scheme: dark;
  --ink: #f7f3ec;
  --muted: #aaa39a;
  --red: #e51f32;
  --red-bright: #ff5360;
  --gold: #f0bd30;
  --blue: #12b9f3;
  --green: #62d489;
  --line: #302d29;
  --paper: #0b0a09;
  --panel: #141210;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, serif;
}

* { box-sizing: border-box; }
html { background: #070706; scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 50% -20%, #201b18 0, #0b0a09 34%, #070706 72%); color: var(--ink); font: 18px/1.75 var(--serif); }
a { color: var(--red-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #ff858d; }
.mast { border-bottom: 1px solid var(--line); padding: 20px 28px; font: 900 13px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.mast a { color: var(--ink); text-decoration: none; }
.mast b { color: var(--red-bright); }
main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 104px; }
article > header { width: min(920px, 100%); margin: 0 auto; }
.kicker { color: var(--red-bright); font: 900 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 900px; margin: 18px 0 24px; font: 950 clamp(44px, 8vw, 82px)/.96 var(--sans); letter-spacing: -.065em; text-wrap: balance; }
.dek { max-width: 850px; margin: 0 0 28px; color: #d6d0c8; font: 450 clamp(20px, 2.5vw, 27px)/1.42 var(--sans); letter-spacing: -.015em; text-wrap: pretty; }
.meta { border-top: 1px solid var(--line); padding: 18px 0 0; color: var(--muted); font: 800 10px/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.hero, .story-art { margin: 48px 0 64px; }
.hero img { display: block; width: 100%; max-height: 630px; border-radius: 18px; object-fit: cover; }

.story-art { position: relative; min-height: 440px; overflow: hidden; border: 1px solid #3b3630; border-radius: 20px; background-color: #11100e; box-shadow: 0 36px 90px rgba(0,0,0,.42); font-family: var(--sans); isolation: isolate; }
.story-art::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.story-art::after { content: ""; position: absolute; z-index: -1; width: 500px; height: 500px; border-radius: 50%; filter: blur(90px); opacity: .28; }
.art-coordinate { position: absolute; top: 24px; left: 27px; color: rgba(255,255,255,.65); font: 800 10px/1 var(--sans); letter-spacing: .15em; }
.story-art figcaption { position: absolute; right: 28px; bottom: 25px; left: 28px; border-top: 1px solid rgba(255,255,255,.17); padding-top: 15px; color: rgba(255,255,255,.76); font: 700 12px/1.45 var(--sans); letter-spacing: .015em; }
.story-art-demand { background-image: linear-gradient(120deg, rgba(229,31,50,.16), transparent 48%), radial-gradient(circle at 80% 28%, rgba(18,185,243,.15), transparent 32%); }
.story-art-demand::after { left: -160px; bottom: -260px; background: var(--red); }
.art-matchup { min-height: 360px; display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; gap: 24px; padding: 72px 54px 82px; }
.art-stat { display: grid; gap: 5px; }
.art-stat span, .art-stat small { color: #bdb6ad; font: 850 10px/1.2 var(--sans); letter-spacing: .1em; }
.art-stat strong { font: 950 clamp(58px, 10vw, 112px)/.82 var(--sans); letter-spacing: -.075em; }
.art-stat-rb { text-align: right; }
.art-stat-rb strong { color: var(--red-bright); }
.art-stat-qb strong { color: var(--blue); }
.art-gap { display: grid; place-items: center; align-content: center; width: 124px; height: 124px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(7,7,6,.75); box-shadow: inset 0 0 30px rgba(255,255,255,.04), 0 18px 45px rgba(0,0,0,.4); }
.art-gap b { font: 950 30px/1 var(--sans); letter-spacing: -.04em; }
.art-gap span { margin-top: 7px; color: var(--gold); font: 900 8px/1 var(--sans); letter-spacing: .14em; }
.story-art-formats { background-image: radial-gradient(circle at 48% 30%, rgba(240,189,48,.19), transparent 34%), linear-gradient(130deg, rgba(229,31,50,.12), transparent 48%); }
.story-art-formats::after { right: -180px; top: -240px; background: var(--gold); }
.art-format-grid { min-height: 360px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; padding: 68px 28px 82px; }
.art-format-grid > div { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255,255,255,.15); padding: 26px; }
.art-format-grid > div:first-child { border-left: 0; }
.art-format-grid span, .art-format-grid small { color: #bdb6ad; font: 850 9px/1.25 var(--sans); letter-spacing: .12em; }
.art-format-grid strong { margin: 12px 0 7px; color: var(--ink); font: 950 clamp(56px, 9vw, 100px)/.8 var(--sans); letter-spacing: -.07em; }
.art-format-grid > div:nth-child(1) strong { color: #ff7138; }
.art-format-grid > div:nth-child(2) strong { color: var(--red-bright); }
.art-format-grid > div:nth-child(3) strong { color: #73b7e8; }
.art-format-grid > div:nth-child(4) strong { color: var(--gold); }
.story-art-snake { background-image: linear-gradient(135deg, rgba(229,31,50,.12), transparent 48%); }
.story-art-snake::after { right: -190px; bottom: -300px; background: var(--red); opacity: .18; }
.art-snake-track { min-height: 360px; display: grid; grid-template-columns: 150px 1fr 150px; align-items: center; gap: 20px; padding: 75px 50px 86px; }
.art-pick { display: grid; place-items: center; align-content: center; aspect-ratio: 1; border: 1px solid #514943; border-radius: 9px; background: #0a0908; }
.art-pick.start { border-color: var(--red-bright); }
.art-pick.end { border-color: #777069; }
.art-pick span { font: 950 32px/1 var(--sans); letter-spacing: -.05em; }
.art-pick small { margin-top: 8px; color: #9f9890; font: 850 8px/1 var(--sans); letter-spacing: .12em; }
.art-pick-path { position: relative; display: grid; grid-template-columns: repeat(10,1fr); align-items: center; gap: 8px; }
.art-pick-path::before { content: ""; position: absolute; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--red), #65605a); }
.art-pick-path i { z-index: 1; aspect-ratio: 1; border: 1px solid #4b4640; border-radius: 2px; background: #171512; }
.art-pick-path b { position: absolute; right: 0; bottom: -32px; left: 0; color: #bcb5ad; font: 900 9px/1 var(--sans); letter-spacing: .12em; text-align: center; }
.story-art-standard { display: grid; place-items: center; align-content: center; padding: 80px 32px; text-align: center; }
.story-art-standard::after { left: calc(50% - 250px); bottom: -300px; background: var(--red); }
.story-art-standard > strong { font: 950 clamp(58px, 10vw, 110px)/.86 var(--sans); letter-spacing: -.07em; text-transform: uppercase; }

.body, .footer { width: min(760px, 100%); margin-right: auto; margin-left: auto; }
.body h1, .body h2, .body h3 { margin: 2.15em 0 .65em; font-family: var(--sans); letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.body h1 { font-size: 42px; }
.body h2 { font-size: clamp(29px, 5vw, 38px); }
.body h3 { font-size: 25px; }
.body p { margin: 0 0 1.4em; text-wrap: pretty; }
.body > p:first-child { color: #e4ded6; font-size: 21px; line-height: 1.65; }
.body ul, .body ol { margin: 1.2em 0 1.8em; padding-left: 1.25em; }
.body li { margin: .55em 0; padding-left: .3em; }
.body blockquote { border: 1px solid #38332e; border-left: 4px solid var(--gold); border-radius: 0 9px 9px 0; margin: 2em 0; background: #12110f; padding: 16px 19px; color: #bbb4ac; font: 750 12px/1.55 var(--sans); letter-spacing: .02em; }
.body code { border: 1px solid var(--line); border-radius: 4px; background: #1a1816; padding: .15em .4em; color: #f2d98f; font-size: .84em; }
.footer { border-top: 1px solid var(--line); margin-top: 72px; padding-top: 25px; color: var(--muted); font: 12px/1.55 var(--sans); }

.sns-verdict, .sns-data-block, .sns-decision-board, .sns-slot-plan { width: min(1040px, calc(100vw - 40px)); position: relative; left: 50%; transform: translateX(-50%); margin: 48px 0; font-family: var(--sans); }
.sns-verdict { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(330px,.9fr); overflow: hidden; border: 1px solid #563038; border-radius: 16px; background: linear-gradient(125deg, #2a1015, #14110f 60%); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.sns-verdict > div { padding: 30px; }
.sns-verdict > div > span, .sns-data-block > header > span, .sns-decision-board header span, .sns-slot-plan header span { color: var(--red-bright); font: 900 9px/1 var(--sans); letter-spacing: .16em; }
.sns-verdict h2 { margin: 9px 0 10px; font-size: clamp(26px, 4vw, 38px); }
.sns-verdict p { margin: 0; color: #bcb5ad; font: 14px/1.55 var(--sans); }
.sns-verdict dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-left: 1px solid #4a292f; background: rgba(0,0,0,.18); }
.sns-verdict dl div { display: flex; flex-direction: column-reverse; justify-content: center; border-left: 1px solid #3b2529; padding: 22px 15px; text-align: center; }
.sns-verdict dl div:first-child { border-left: 0; }
.sns-verdict dt { margin-top: 8px; color: #a9a199; font: 800 8px/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.sns-verdict dd { margin: 0; color: #fff; font: 950 clamp(28px, 5vw, 48px)/1 var(--sans); letter-spacing: -.055em; }
.sns-verdict dl div:first-child dd { color: var(--red-bright); }

.sns-data-block { overflow: hidden; border: 1px solid #3b3732; border-radius: 16px; background: linear-gradient(145deg, #171411, #0b0a09 72%); box-shadow: 0 26px 66px rgba(0,0,0,.34); }
.sns-data-block > header { border-bottom: 1px solid var(--line); padding: 28px 30px 23px; }
.sns-data-block > header h3 { margin: 9px 0 8px; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.04em; }
.sns-data-block > header p { max-width: 700px; margin: 0; color: var(--muted); font: 14px/1.55 var(--sans); }
.sns-viz-controls { display: flex; flex-wrap: wrap; gap: 7px; padding: 20px 30px 5px; }
.sns-viz-controls button, .sns-slot-grid button { min-height: 40px; border: 1px solid #423d37; border-radius: 999px; background: #171512; padding: 0 15px; color: #c8c1b8; cursor: pointer; font: 850 11px/1 var(--sans); letter-spacing: .025em; }
.sns-viz-controls button:hover, .sns-slot-grid button:hover { border-color: #756c62; color: #fff; }
.sns-viz-controls button:focus-visible, .sns-slot-grid button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sns-viz-controls button[aria-pressed="true"], .sns-slot-grid button[aria-pressed="true"] { border-color: var(--red-bright); background: var(--red); color: #fff; }
.sns-demand-settings { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.sns-demand-settings > div { display: grid; gap: 10px; background: #11100e; padding: 18px 30px; }
.sns-demand-settings > div > strong { color: #807970; font: 850 8px/1 var(--sans); letter-spacing: .12em; }
.sns-demand-settings .sns-viz-controls { border: 0; padding: 0; }
.sns-demand-bars { display: grid; gap: 18px; padding: 25px 30px 14px; }
.sns-demand-row { display: grid; grid-template-columns: minmax(160px, 1.25fr) minmax(100px, 3fr) 72px; align-items: center; gap: 14px; }
.sns-demand-row span { color: #ded8d0; font: 800 12px/1.3 var(--sans); }
.sns-demand-row i { display: block; height: 24px; border-radius: 4px; transform-origin: left; transition: width .22s ease; }
.sns-demand-row-rb i { width: 97%; background: linear-gradient(90deg, #a60e1d, #ff5360); }
.sns-demand-row-qb i { width: 47%; background: linear-gradient(90deg, #007bab, var(--blue)); }
.sns-demand-row-rb[data-bar="rb-10"] i { width: 95%; }
.sns-demand-row-rb[data-bar="rb-12"] i { width: 97%; }
.sns-demand-row-rb[data-bar="rb-14"] i { width: 100%; }
.sns-demand-row-qb[data-bar="qb-10"] i { width: 45%; }
.sns-demand-row-qb[data-bar="qb-12"] i { width: 47%; }
.sns-demand-row-qb[data-bar="qb-14"] i { width: 48%; }
.sns-demand-row strong { color: #fff; font: 950 20px/1 var(--sans); text-align: right; }
.sns-demand-board-shell { border-top: 1px solid var(--line); background: #0c0b0a; }
.sns-demand-board-shell > header { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.8fr); align-items: end; gap: 24px; border-bottom: 1px solid var(--line); padding: 22px 30px; }
.sns-demand-board-shell > header span { color: var(--red-bright); font: 850 8px/1 var(--sans); letter-spacing: .12em; }
.sns-demand-board-shell > header h4 { margin: 7px 0 0; color: #f1ece4; font: 900 clamp(19px,3vw,27px)/1.08 var(--sans); letter-spacing: -.025em; }
.sns-demand-board-shell > header p { margin: 0; color: #847d75; font: 11px/1.5 var(--sans); }
.sns-demand-top16 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; border-bottom: 1px solid var(--line); background: var(--line); }
.sns-demand-rank { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 62px; background: #12110f; padding: 10px 15px; animation: sns-rank-enter .34s both; animation-delay: var(--rank-delay); }
.sns-demand-rank > b { color: #777069; font: 900 9px/1 var(--sans); }
.sns-demand-rank > span { display: grid; gap: 5px; min-width: 0; }
.sns-demand-rank > span strong { overflow: hidden; color: #ded8d0; font: 850 12px/1.1 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sns-demand-rank small { color: #776f68; font: 800 7px/1 var(--sans); letter-spacing: .09em; }
.sns-demand-rank > em { color: #f2ede6; font: normal 900 12px/1 var(--sans); }
.sns-demand-rank[data-pos="RB"] { box-shadow: inset 3px 0 0 #ff6a00; }
.sns-demand-rank[data-pos="WR"] { box-shadow: inset 3px 0 0 #6aa9d7; }
.sns-demand-rank[data-pos="QB"] { box-shadow: inset 3px 0 0 #ff3b4c; }
.sns-demand-rank[data-pos="TE"] { box-shadow: inset 3px 0 0 #7fc89a; }
.sns-demand-rank.is-round-two { background: #0d0c0b; opacity: .76; }
.sns-demand-round-break { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; background: #261316; padding: 10px 15px; color: var(--red-bright); font: 850 8px/1 var(--sans); letter-spacing: .1em; }
.sns-demand-round-break strong { color: #a78588; font-size: 7px; }
.sns-demand-takeaway { margin: 0; border-left: 3px solid var(--red); background: #171011; padding: 17px 27px; color: #c2b9af; font: 750 12px/1.55 var(--sans); }
@keyframes sns-rank-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sns-format-bar { display: flex; min-height: 135px; gap: 4px; padding: 25px 30px 14px; }
.sns-format-bar span { display: flex; min-width: 49px; flex: 1 1 0; align-items: flex-end; justify-content: space-between; border-radius: 6px; padding: 14px 10px; color: #080808; font: 950 11px/1 var(--sans); transition: flex-grow .22s ease; }
.sns-format-bar span[data-pos="RB"] { background: #ff6a00; }
.sns-format-bar span[data-pos="WR"] { background: #6aa9d7; }
.sns-format-bar span[data-pos="QB"] { background: #ff3b4c; }
.sns-format-bar span[data-pos="TE"] { background: #7fc89a; }
.sns-format-bar span[data-count="2"] { flex-grow: 2; }
.sns-format-bar span[data-count="3"] { flex-grow: 3; }
.sns-format-bar span[data-count="6"] { flex-grow: 6; }
.sns-format-bar span[data-count="8"] { flex-grow: 8; }
.sns-format-bar span[data-count="12"] { flex-grow: 12; }
.sns-format-bar span[data-count="13"] { flex-grow: 13; }
.sns-format-bar span[data-count="14"] { flex-grow: 14; }
.sns-format-bar span[data-count="15"] { flex-grow: 15; }
.sns-format-bar span[data-count="20"] { flex-grow: 20; }
.sns-slot-grid { display: grid; grid-template-columns: repeat(10, minmax(36px,1fr)); gap: 6px; padding: 23px 30px 9px; }
.sns-slot-grid button { min-width: 0; border-radius: 6px; padding: 0; }
.sns-slot-result { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 16px; padding: 17px 30px 21px; }
.sns-slot-result strong { grid-row: span 2; color: var(--gold); font: 950 clamp(58px, 9vw, 88px)/.86 var(--sans); letter-spacing: -.055em; }
.sns-slot-result span { align-self: end; color: #d7d0c8; font: 850 14px/1.25 var(--sans); text-transform: uppercase; }
.sns-slot-result p { align-self: start; margin: 6px 0 0; color: var(--muted); font: 750 13px/1.2 var(--sans); }
.sns-viz-note { margin: 0; padding: 0 30px 18px; color: var(--muted); font: 12px/1.4 var(--sans); }
.sns-viz-link { display: block; border-top: 1px solid var(--line); padding: 17px 30px; color: #fff; font: 850 12px/1.35 var(--sans); text-decoration: none; }
.sns-viz-link:hover { background: #1a1714; color: var(--red-bright); }

/* The snake-draft story uses one restrained system: black panels, red state and compact type. */
[data-sns-viz="snake-slot"] { border-radius: 10px; background: #0d0c0b; box-shadow: 0 22px 54px rgba(0,0,0,.28); }
[data-sns-viz="snake-slot"] .sns-draft-head { border-bottom-color: #38332f; padding: 26px 28px 22px; }
[data-sns-viz="snake-slot"] .sns-draft-head span { color: var(--red-bright); font: 900 9px/1 var(--sans); letter-spacing: .16em; }
[data-sns-viz="snake-slot"] .sns-draft-head h3 { margin: 8px 0 7px; font-size: clamp(25px, 4vw, 35px); }
[data-sns-viz="snake-slot"] .sns-draft-head p { margin: 0; color: var(--muted); font: 14px/1.5 var(--sans); }
[data-sns-viz="snake-slot"] .sns-pool-controls { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); padding: 15px 28px; background: #15110f; }
.sns-pool-controls > div:first-child { display: grid; gap: 5px; }
.sns-pool-controls strong { color: var(--red-bright); font: 900 8px/1 var(--sans); letter-spacing: .14em; }
.sns-pool-controls p { margin: 0; color: #aaa39a; font: 12px/1.4 var(--sans); }
.sns-pool-controls > div:last-child { display: flex; gap: 6px; }
.sns-pool-controls button { min-height: 34px; border: 1px solid #49423c; border-radius: 4px; padding: 0 11px; color: #aaa39a; background: #0d0c0b; font: 850 8px/1 var(--sans); letter-spacing: .06em; cursor: pointer; }
.sns-pool-controls button:hover { border-color: var(--red-bright); color: #fff; }
.sns-pool-controls button[aria-pressed="true"] { border-color: var(--red); color: #fff; background: var(--red); }
.sns-pool-controls button:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
[data-sns-viz="snake-slot"] .sns-slot-grid { gap: 5px; padding: 18px 28px; border-bottom: 1px solid var(--line); }
[data-sns-viz="snake-slot"] .sns-slot-grid button { min-height: 36px; border-radius: 4px; background: #151311; font-size: 10px; }

.sns-exact-pick { display: grid; grid-template-columns: 135px minmax(0,1fr) 220px; border-bottom: 1px solid var(--line); background: #13110f; }
.sns-exact-pick > div { min-width: 0; border-right: 1px solid var(--line); padding: 22px 24px; }
.sns-exact-pick small { color: #8f8880; font: 850 8px/1 var(--sans); letter-spacing: .13em; }
.sns-exact-number { display: flex; flex-direction: column; justify-content: center; }
.sns-exact-number strong { margin-top: 9px; color: var(--red-bright); font: 950 36px/.9 var(--sans); letter-spacing: -.055em; }
.sns-exact-player { display: flex; align-items: center; gap: 16px; }
.sns-exact-player > span { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 1px solid var(--red); border-radius: 4px; color: #fff; font: 950 12px/1 var(--sans); }
.sns-exact-player h4 { overflow: hidden; margin: 5px 0 0; font: 950 clamp(21px, 3.2vw, 30px)/1 var(--sans); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.sns-exact-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-right: 0 !important; }
.sns-exact-stats div { display: flex; flex-direction: column; justify-content: center; }
.sns-exact-stats strong { margin-top: 7px; font: 950 25px/1 var(--sans); letter-spacing: -.04em; }
.sns-exact-pick > p { grid-column: 1 / -1; margin: 0; padding: 15px 24px 17px; color: #c4bdb5; font: 13px/1.5 var(--sans); }

.sns-round-sim { border-bottom: 1px solid var(--line); }
.sns-round-sim > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 17px 28px; }
.sns-round-sim > header > div:first-child { display: grid; gap: 5px; }
.sns-round-sim > header span { color: #eee8e0; font: 900 10px/1 var(--sans); letter-spacing: .1em; }
.sns-round-sim > header small { color: #77716a; font: 800 8px/1 var(--sans); letter-spacing: .1em; }
.sns-round-sim > header small[data-live="live"] { color: var(--green); }
.sns-round-sim > header small[data-live="fallback"] { color: var(--gold); }
.sns-round-sim > header > div:last-child { display: flex; gap: 6px; }
.sns-round-sim button { min-height: 31px; border: 1px solid #403b36; border-radius: 4px; background: #151311; padding: 0 11px; color: #aaa39a; cursor: pointer; font: 850 8px/1 var(--sans); letter-spacing: .08em; }
.sns-round-sim button:hover { border-color: #6a625b; color: #fff; }
.sns-round-sim button:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }
.sns-now-picking { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 15px; min-height: 76px; margin: 20px 28px 14px; border: 1px solid #4a282b; border-left: 3px solid var(--red); border-radius: 5px; background: #171011; padding: 12px 16px; }
.sns-now-picking > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 3px; background: var(--red); color: #fff; font: 950 11px/1 var(--sans); }
.sns-now-picking div { display: grid; gap: 5px; min-width: 0; }
.sns-now-picking small { color: #918982; font: 850 8px/1 var(--sans); letter-spacing: .1em; }
.sns-now-picking strong { overflow: hidden; font: 950 18px/1 var(--sans); letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.sns-now-picking b { color: var(--red-bright); font: 900 9px/1 var(--sans); letter-spacing: .1em; }

.sns-round-board { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin: 0 28px 20px !important; border: 1px solid var(--line); background: var(--line); padding: 0 !important; list-style: none; }
.sns-round-board li { display: grid; grid-template-columns: 37px minmax(0,1fr); align-items: center; gap: 10px; min-width: 0; min-height: 60px; margin: 0 !important; background: #11100e; padding: 9px 11px !important; opacity: .48; transition: background .16s ease, opacity .16s ease; }
.sns-round-board li > b { color: #8e8780; font: 900 9px/1 var(--sans); }
.sns-round-board li > span { display: grid; gap: 4px; min-width: 0; }
.sns-round-board li strong { overflow: hidden; color: #d8d2ca; font: 850 11px/1.1 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sns-round-board li small { color: #7f7871; font: 800 8px/1 var(--sans); letter-spacing: .04em; }
.sns-round-board li.is-picked { opacity: .78; }
.sns-round-board li.is-current { background: #251316; opacity: 1; }
.sns-round-board li.is-current > b, .sns-round-board li.is-current small { color: var(--red-bright); }
.sns-round-board li.is-yours { box-shadow: inset 0 0 0 1px #8e2630; opacity: 1; }
.sns-round-sim > footer { display: grid; grid-template-columns: 135px 135px minmax(0,1fr); border-top: 1px solid var(--line); }
.sns-round-sim > footer > div { display: flex; flex-direction: column; border-right: 1px solid var(--line); padding: 17px 22px; }
.sns-round-sim > footer strong { color: var(--red-bright); font: 950 26px/1 var(--sans); }
.sns-round-sim > footer small { margin-top: 6px; color: #847d75; font: 850 7px/1.2 var(--sans); letter-spacing: .09em; }
.sns-round-sim > footer p { align-self: center; margin: 0; padding: 17px 22px; color: #aaa39a; font: 12px/1.45 var(--sans); }

.sns-draft-actions { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,auto); align-items: center; gap: 10px; padding: 22px 28px; }
.sns-draft-actions > div { display: grid; gap: 5px; padding-right: 18px; }
.sns-draft-actions strong { font: 900 13px/1.2 var(--sans); }
.sns-draft-actions span { max-width: 480px; color: #8f8880; font: 11px/1.45 var(--sans); }
.sns-draft-actions a { border: 1px solid #514b45; border-radius: 4px; padding: 12px 14px; color: #eee8e0; font: 900 9px/1 var(--sans); letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.sns-draft-actions a:first-of-type { border-color: var(--red); background: var(--red); color: #fff; }
.sns-draft-actions a:hover { border-color: var(--red-bright); color: #fff; }

.sns-decision-board, .sns-slot-plan { overflow: hidden; border: 1px solid #3b3732; border-radius: 16px; background: #11100e; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.sns-decision-board header, .sns-slot-plan header { padding: 28px 30px 24px; background: linear-gradient(110deg, #241f12, #12100e); }
.sns-decision-board h2, .sns-slot-plan h2 { margin: 9px 0 0; font-size: clamp(26px, 4vw, 38px); }
.sns-decision-row { display: grid; grid-template-columns: 150px minmax(170px,.9fr) minmax(250px,1.4fr); gap: 22px; border-top: 1px solid var(--line); padding: 17px 30px; color: #c8c1b9; font: 13px/1.45 var(--sans); }
.sns-decision-row strong { color: var(--gold); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.sns-decision-head { background: #0b0a09; color: #706a63; font: 850 8px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.sns-slot-band { display: grid; grid-template-columns: 90px minmax(0,1fr) 110px; align-items: center; gap: 22px; border-top: 1px solid var(--line); padding: 20px 30px; }
.sns-slot-band > strong { color: var(--red-bright); font: 950 38px/1 var(--sans); letter-spacing: -.055em; }
.sns-slot-band b { font: 850 14px/1.3 var(--sans); }
.sns-slot-band p { margin: 6px 0 0; color: var(--muted); font: 13px/1.45 var(--sans); }
.sns-slot-band em { color: var(--gold); font: 850 9px/1.3 var(--sans); letter-spacing: .08em; text-align: right; text-transform: uppercase; }

/* Hype check snapshot. Both article tokens share this one reviewed visual
   system so the correction and value cases remain directly comparable. */
.sns-hype-zero { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 18px; border-bottom: 1px solid var(--line); background: #15100f; padding: 22px 30px; }
.sns-hype-zero strong { color: var(--red-bright); font: 950 clamp(58px, 9vw, 88px)/.8 var(--sans); letter-spacing: -.06em; }
.sns-hype-zero span { max-width: 280px; color: #d8d1c9; font: 850 13px/1.35 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.sns-hype-list, .sns-hype-team ol { margin: 0 !important; padding: 0 !important; list-style: none; }
.sns-hype-player { display: grid; grid-template-columns: minmax(180px,1fr) minmax(360px,1.25fr); align-items: center; gap: 22px; min-height: 78px; margin: 0 !important; border-top: 1px solid var(--line); padding: 14px 30px !important; }
.sns-hype-list .sns-hype-player:first-child, .sns-hype-team .sns-hype-player:first-child { border-top: 0; }
.sns-hype-player > div { display: grid; gap: 5px; min-width: 0; }
.sns-hype-player > div strong { overflow: hidden; color: #f3ede5; font: 900 15px/1.15 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sns-hype-player > div span { color: #8e867d; font: 850 9px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.sns-hype-player dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0; }
.sns-hype-player dl div { display: grid; gap: 5px; border-left: 1px solid #38332e; padding-left: 12px; }
.sns-hype-player dt { color: #777069; font: 800 8px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.sns-hype-player dd { margin: 0; color: #d9d2ca; font: 900 12px/1.2 var(--sans); }
.sns-hype-teams { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); }
.sns-hype-team { min-width: 0; background: #11100e; }
.sns-hype-team:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sns-hype-team > header { display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); padding: 18px 22px; }
.sns-hype-team > header b { color: var(--red-bright); font: 900 10px/1 var(--sans); }
.sns-hype-team > header h4 { margin: 0; color: #f3ede5; font: 950 21px/1 var(--sans); letter-spacing: -.025em; }
.sns-hype-team .sns-hype-player { grid-template-columns: 1fr; gap: 11px; min-height: 0; padding: 15px 22px !important; }
.sns-hype-team .sns-hype-player dl { gap: 7px; }
.sns-hype .sns-viz-note { border-top: 1px solid var(--line); padding-top: 17px; }

/* Top-five data block (TOP5-MODULE-SPEC.md). Reuses .sns-data-block, >
   header, .sns-viz-note, .sns-viz-link as-is. `--team` is the one themed
   property, applied client side via setProperty, never inline (C1). */
.sns-top5-list { margin: 0; padding: 0; list-style: none; }
.sns-top5-row { --team: var(--red); position: relative; border-top: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--team); animation: sns-top5-enter .3s both; }
.sns-top5-row:first-child { border-top: 0; }
.sns-top5-row:nth-child(2) { animation-delay: .04s; }
.sns-top5-row:nth-child(3) { animation-delay: .08s; }
.sns-top5-row:nth-child(4) { animation-delay: .12s; }
.sns-top5-row:nth-child(5) { animation-delay: .16s; }
@keyframes sns-top5-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sns-top5-head { display: grid; width: 100%; min-height: 64px; grid-template-columns: 26px 52px minmax(0,1fr) auto auto 18px; align-items: center; column-gap: 14px; border: 0; background: transparent; margin: 0; padding: 14px 30px; color: inherit; text-align: left; cursor: pointer; font-family: var(--sans); }
.sns-top5-head > * { min-width: 0; }
.sns-top5-head:hover { background: #14110f; }
.sns-top5-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sns-top5-rank { color: #776f68; font: 900 12px/1 var(--sans); }
.sns-top5-face { position: relative; display: block; overflow: hidden; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 2px var(--team); background: #1a1714; flex: 0 0 auto; }
.sns-top5-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.sns-top5-face.is-initials { display: grid; place-items: center; background: var(--team); }
.sns-top5-face.is-initials i { color: #fff; font: 900 16px/1 var(--sans); font-style: normal; letter-spacing: .01em; }
.sns-top5-id { display: grid; gap: 4px; min-width: 0; }
.sns-top5-id strong { overflow: hidden; color: #f1ece4; font: 850 15px/1.2 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sns-top5-id small { overflow: hidden; color: #948c83; font: 800 10px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
.sns-top5-proj { display: grid; justify-items: end; gap: 2px; text-align: right; }
.sns-top5-proj strong { color: #fff; font: 950 20px/1 var(--sans); letter-spacing: -.02em; }
.sns-top5-proj small { color: #776f68; font: 800 8px/1 var(--sans); letter-spacing: .08em; }
.sns-top5-tier { border: 1px solid #423d37; border-radius: 999px; padding: 5px 10px; color: #c8c1b8; font: 850 9px/1 var(--sans); letter-spacing: .05em; white-space: nowrap; }
.sns-top5-chevron { justify-self: end; width: 9px; height: 9px; border-right: 2px solid #776f68; border-bottom: 2px solid #776f68; transform: rotate(-45deg); transition: transform .18s ease; }
.sns-top5-head[aria-expanded="true"] .sns-top5-chevron { transform: rotate(45deg); }
.sns-top5-2025 { margin: 0; padding: 0 30px 16px 136px; color: #948c83; font: 750 11px/1.5 var(--sans); }
.sns-top5-detail { border-top: 1px solid var(--line); background: #0e0d0b; padding: 20px 30px 24px 136px; }
.sns-top5-range b { display: block; margin: 0 0 10px; color: #776f68; font: 850 8px/1 var(--sans); letter-spacing: .1em; }
.sns-top5-band { position: relative; height: 6px; border-radius: 3px; background: #211d19; }
.sns-top5-band i { position: absolute; top: 0; bottom: 0; left: var(--band-lo, 0%); right: calc(100% - var(--band-hi, 100%)); border-radius: 3px; background: var(--team); }
.sns-top5-band u { position: absolute; top: -3px; bottom: -3px; left: var(--band-mid, 50%); width: 2px; background: #fff; text-decoration: none; }
.sns-top5-range dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0 0; }
.sns-top5-range dt { color: #776f68; font: 850 8px/1.3 var(--sans); letter-spacing: .07em; }
.sns-top5-range dd { margin: 4px 0 0; color: #ded8d0; font: 900 15px/1 var(--sans); }
.sns-top5-signal { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.sns-top5-signal span { display: inline-block; border: 1px solid #423d37; border-radius: 999px; padding: 6px 11px; color: #c8c1b8; font: 850 9px/1 var(--sans); letter-spacing: .05em; }
.sns-top5-signal [data-top5-chip] { border-color: var(--team); color: #fff; }
.sns-top5-note { margin: 12px 0 0; color: #bbb4ac; font: 750 12px/1.55 var(--sans); }

@media (max-width: 760px) {
  main { width: min(100% - 28px, 1120px); padding-top: 44px; }
  h1 { font-size: clamp(42px, 13vw, 62px); }
  .dek { font-size: 20px; }
  .story-art { min-height: 500px; margin: 35px 0 50px; border-radius: 14px; }
  .art-matchup { grid-template-columns: 1fr; gap: 16px; padding: 68px 25px 100px; }
  .art-stat, .art-stat-rb { text-align: left; }
  .art-stat strong { font-size: 64px; }
  .art-gap { position: absolute; top: 175px; right: 25px; width: 96px; height: 96px; }
  .art-gap b { font-size: 24px; }
  .art-format-grid { grid-template-columns: repeat(2,1fr); padding: 65px 16px 95px; }
  .art-format-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.15); }
  .art-format-grid > div:nth-child(4) { border-top: 1px solid rgba(255,255,255,.15); }
  .art-format-grid strong { font-size: 56px; }
  .art-snake-track { grid-template-columns: 105px 1fr 105px; gap: 12px; padding: 80px 18px 110px; }
  .art-pick span { font-size: 23px; }
  .art-pick-path { grid-template-columns: repeat(5,1fr); }
  .art-pick-path i:nth-of-type(n+6) { display: none; }
  .body h2 { font-size: 30px; }
  .sns-verdict, .sns-data-block, .sns-decision-board, .sns-slot-plan { width: calc(100vw - 28px); margin: 38px 0; }
  .sns-verdict { grid-template-columns: 1fr; }
  .sns-verdict dl { border-top: 1px solid #4a292f; border-left: 0; }
  .sns-data-block > header, .sns-viz-controls, .sns-demand-bars, .sns-format-bar, .sns-slot-grid, .sns-slot-result, .sns-decision-board header, .sns-slot-plan header, .sns-top5-head, .sns-top5-detail { padding-left: 18px; padding-right: 18px; }
  .sns-demand-row { grid-template-columns: 1fr 58px; }
  .sns-demand-row i { grid-column: 1 / -1; grid-row: 2; }
  .sns-demand-row strong { grid-column: 2; grid-row: 1; }
  .sns-demand-settings, .sns-demand-top16 { grid-template-columns: 1fr; }
  .sns-demand-settings > div { padding-right: 18px; padding-left: 18px; }
  .sns-demand-board-shell > header { grid-template-columns: 1fr; padding-right: 18px; padding-left: 18px; }
  .sns-demand-round-break { grid-column: 1; }
  .sns-slot-grid { grid-template-columns: repeat(5,1fr); }
  [data-sns-viz="snake-slot"] .sns-draft-head, [data-sns-viz="snake-slot"] .sns-pool-controls, [data-sns-viz="snake-slot"] .sns-slot-grid { padding-left: 18px; padding-right: 18px; }
  [data-sns-viz="snake-slot"] .sns-pool-controls { grid-template-columns: 1fr; }
  .sns-pool-controls > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  .sns-exact-pick { grid-template-columns: 105px minmax(0,1fr); }
  .sns-exact-pick > div { padding: 18px; }
  .sns-exact-player { border-right: 0 !important; }
  .sns-exact-player h4 { font-size: 19px; }
  .sns-exact-player > span { width: 39px; height: 39px; }
  .sns-exact-stats { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .sns-exact-pick > p { padding-right: 18px; padding-left: 18px; }
  .sns-round-sim > header { align-items: flex-start; padding-right: 18px; padding-left: 18px; }
  .sns-now-picking { grid-template-columns: 42px minmax(0,1fr); margin-right: 18px; margin-left: 18px; }
  .sns-now-picking b { grid-column: 2; }
  .sns-round-board { grid-template-columns: 1fr; margin-right: 18px !important; margin-left: 18px !important; }
  .sns-round-board li { min-height: 53px; }
  .sns-round-sim > footer { grid-template-columns: 1fr 1fr; }
  .sns-round-sim > footer p { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .sns-draft-actions { grid-template-columns: 1fr; padding-right: 18px; padding-left: 18px; }
  .sns-draft-actions > div { padding: 0 0 6px; }
  .sns-draft-actions a { text-align: center; }
  .sns-format-bar { min-height: 150px; overflow-x: auto; }
  .sns-decision-row { grid-template-columns: 90px 1fr; gap: 10px 16px; padding: 16px 18px; }
  .sns-decision-row > :last-child { grid-column: 2; color: var(--muted); }
  .sns-decision-head { display: none; }
  .sns-slot-band { grid-template-columns: 70px 1fr; gap: 14px; padding: 18px; }
  .sns-slot-band em { grid-column: 2; text-align: left; }
  .sns-hype-zero { padding-right: 18px; padding-left: 18px; }
  .sns-hype-player { grid-template-columns: 1fr; gap: 12px; padding: 15px 18px !important; }
  .sns-hype-player dl { gap: 6px; }
  .sns-hype-player dl div { padding-left: 8px; }
  .sns-hype-teams { grid-template-columns: 1fr; }
  .sns-hype-team:last-child:nth-child(odd) { grid-column: auto; }
  .sns-hype-team .sns-hype-player { padding-right: 18px !important; padding-left: 18px !important; }
  .sns-top5-head { grid-template-columns: 26px 44px minmax(0,1fr) auto; grid-template-rows: auto auto; row-gap: 6px; column-gap: 10px; }
  .sns-top5-rank { grid-row: 1; grid-column: 1; }
  .sns-top5-face { grid-row: 1 / span 2; grid-column: 2; width: 44px; height: 44px; }
  .sns-top5-id { grid-row: 1; grid-column: 3; min-width: 0; }
  .sns-top5-proj { grid-row: 1; grid-column: 4; }
  .sns-top5-tier { grid-row: 2; grid-column: 3; justify-self: start; }
  .sns-top5-chevron { grid-row: 2; grid-column: 4; justify-self: end; }
  .sns-top5-2025 { margin: 0; padding: 0 18px 14px 108px; font-size: 10px; line-height: 1.4; white-space: normal; }
  .sns-top5-range dt { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sns-top5-row { animation: none; }
  .sns-top5-chevron { transition: none; }
  .sns-demand-row i, .sns-format-bar span, .sns-round-board li { transition: none; }
  .sns-demand-rank { animation: none; }
}