/* Swing Trading Playbook: sober palette (warm paper, slate ink, muted green / brick, bronze accent); light by default, dark with the OS setting. */
:root {--bg: #f3f1ec; --panel: #fbfaf7; --panel-2: #efece4; --ink: #1d262d; --ink-2: #4a565e; --muted: #5b666d;
  --line: #dcd7cc; --line-2: #e7e3d9; --grid: #e6e2d8;
  --accent: #2e4a5f; --accent-soft: #e2e9ee; --gold: #765b2b; --gold-soft: #f1ebdc;
  --win: #2f6a4c; --win-soft: #e1eee6; --loss: #963f2b; --loss-soft: #f3e2dc; --flat: #8a8f86;
  --candle-up: #5a8a70; --candle-down: #b56b58;
  --shadow: 0 1px 2px rgba(29, 38, 45, .05), 0 6px 18px rgba(29, 38, 45, .05);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {--bg: #12171b; --panel: #192025; --panel-2: #1f272d; --ink: #e4e1da; --ink-2: #b4bbc0; --muted: #8a949a;
      --line: #2b353c; --line-2: #242d33; --grid: #263037; --accent: #8db0c6; --accent-soft: #22313b;
      --gold: #c3a56f; --gold-soft: #2f2a1e; --win: #74b592; --win-soft: #1c2f27; --loss: #d58e7b; --loss-soft: #3a2622;
      --flat: #8a8f86; --candle-up: #6aa586; --candle-down: #c9806c; --shadow: 0 1px 2px rgba(0, 0, 0, .3);}
}
:root[data-theme="dark"] {--bg: #12171b; --panel: #192025; --panel-2: #1f272d; --ink: #e4e1da; --ink-2: #b4bbc0; --muted: #8a949a;
  --line: #2b353c; --line-2: #242d33; --grid: #263037; --accent: #8db0c6; --accent-soft: #22313b;
  --gold: #c3a56f; --gold-soft: #2f2a1e; --win: #74b592; --win-soft: #1c2f27; --loss: #d58e7b; --loss-soft: #3a2622;
  --flat: #8a8f86; --candle-up: #6aa586; --candle-down: #c9806c; --shadow: 0 1px 2px rgba(0, 0, 0, .3);}
* {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%;}
body {margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; font-family: var(--sans); background-color: var(--bg);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  font-variant-numeric: tabular-nums;}
a {color: var(--accent); text-decoration: none;}
a:hover {text-decoration: underline;}
button {font: inherit; color: inherit; cursor: pointer;}
.wrap {max-width: 1320px; margin: 0 auto; padding: 0 20px;}
h1, h2, h3 {font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0;}
h3 {font-size: 13px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650;}
.top {background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;}
.top .wrap {display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px;}
.brand {display: flex; align-items: baseline; gap: 12px; color: var(--ink);}
.brand:hover {text-decoration: none;}
.brand .mark {width: 10px; height: 10px; background: var(--gold); border-radius: 2px; align-self: center; transform: rotate(45deg);}
.brand .name {font-family: var(--serif); font-size: 21px; font-weight: 650;}
.brand .tag {color: var(--muted); font-size: 13px;}
nav {display: flex; gap: 4px;}
nav a {padding: 8px 14px; border-radius: 6px; color: var(--ink-2); font-weight: 560; font-size: 14px;}
nav a:hover {background: var(--panel-2); text-decoration: none;}
nav a.active {color: var(--accent); background: var(--accent-soft);}
.pill {border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 13px; font-size: 13.5px; color: var(--ink-2);}
.pill small {color: var(--muted); margin-left: 5px; font-size: 11.5px;}
.pill:hover {border-color: var(--accent);}
.pill.on {background: var(--accent); border-color: var(--accent); color: #fff;}
.pill.on small {color: rgba(255, 255, 255, .75);}
.playbook {display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 18px; margin: 14px 0 40px; align-items: start;}
.filters {padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; background: var(--panel-2);}
.filters input, .filters select {width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px;}
.filters .two {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.count {font-size: 12.5px; color: var(--muted); padding: 8px 14px; border-bottom: 1px solid var(--line-2);}
.rows {max-height: calc(100vh - 290px); min-height: 280px; overflow: auto;}
.row {display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; padding: 10px 14px; border-left: 3px solid transparent;}
.row:hover {background: var(--panel-2);}
.row.sel {background: var(--accent-soft); border-left-color: var(--accent);}
.row .sym {font-weight: 650; font-size: 15px;}
.row .meta {color: var(--muted); font-size: 12.5px; grid-column: 1;}
.detail {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 20px 22px 24px; min-width: 0;}
.chips {display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px;}
.chip {font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);}
.chip.ok {background: var(--win-soft); border-color: transparent; color: var(--win);}
.chip.warn {background: var(--gold-soft); border-color: transparent; color: var(--gold);}
.chart {width: 100%; height: auto; display: block;}
.chart .hit:hover {fill: rgba(127, 127, 127, .12);}
.facts {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; margin: 16px 0 6px;}
.section {margin-top: 22px;}
.section h3 {margin-bottom: 10px;}
.why {background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px; color: var(--ink-2); font-size: 14px;}
.tweet {border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: var(--panel);}
.tweet .tbody {white-space: pre-wrap; word-break: break-word; font-size: 14.5px;}
.tweet.exit {border-left: 3px solid var(--accent);}
.tweet.mgmt {border-left: 3px solid var(--gold);}
.back {display: none; margin-bottom: 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 6px 12px; font-size: 14px;}
.page {margin: 16px 0 44px;}
.page-head {display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;}
.page-head h1 {font-size: 30px;}
.page-head p {margin: 0; color: var(--muted); font-size: 14px;}
.card {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 16px 18px 12px; min-width: 0;}
.card h3 {margin-bottom: 4px;}
.card .hint {color: var(--muted); font-size: 12.5px; margin: 0 0 6px;}
table {width: 100%; border-collapse: collapse; font-size: 14px;}
th {text-align: right; font-weight: 600; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line);}
td {text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line-2);}
th:first-child, td:first-child {text-align: left;}
tr.clickable {cursor: pointer;}
tr.clickable:hover td {background: var(--panel-2);}
tr.sel td {background: var(--accent-soft); font-weight: 600;}
td.win {color: var(--win);}
td.loss {color: var(--loss);}
.scroll-x {overflow-x: auto;}
footer {border-top: 1px solid var(--line); padding: 20px 0 40px; color: var(--muted); font-size: 12.5px;}
footer p {margin: 4px 0; max-width: 900px;}
@media (max-width: 1100px) {
  .facts {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 900px) {
  .playbook {grid-template-columns: 1fr;}
  .rows {max-height: 60vh;}
  .detail {display: none;}
  .playbook.show-detail .detail {display: block;}
  .back {display: inline-flex;}
  .brand .tag {display: none;}
}
@media (max-width: 560px) {
  .wrap {padding: 0 12px;}
  .detail {padding: 14px 12px 18px;}
  nav a {padding: 7px 9px;}
}
.drop {border: 2px dashed var(--line); border-radius: 14px; background: var(--panel); padding: 44px 24px; text-align: center; margin: 26px 0 18px; transition: border-color .15s, background .15s;}
.drop.over {border-color: var(--accent); background: var(--accent-soft);}
.drop h2 {font-size: 26px; margin-bottom: 8px;}
.drop p {color: var(--ink-2); margin: 6px auto; max-width: 620px;}
.btn {border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 7px; padding: 9px 18px; font-weight: 600; font-size: 14.5px; line-height: 1.3; display: inline-block; text-decoration: none; }
.btn:hover {filter: brightness(1.08);}
.btn.ghost {background: transparent; color: var(--accent);}
.btn.small {padding: 5px 12px; font-size: 13px;}
.btn.danger {border-color: var(--loss); color: var(--loss); background: transparent;}
.steps {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 10px 0 30px;}
.steps div {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 14px; color: var(--ink-2);}
.steps b {display: block; color: var(--ink); margin-bottom: 4px; font-family: var(--serif); font-size: 16px;}
.form {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 14px;}
.form label {font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: grid; gap: 4px;}
.form input, .form select {padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px; width: 100%;}
@media (max-width: 900px) {
  .steps {grid-template-columns: 1fr;}
}
.arch {display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; margin: 16px 0 50px; align-items: start;}
.side {position: sticky; top: 72px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 14px; max-height: calc(100vh - 90px); overflow: auto;}
.side h4 {margin: 14px 0 6px; font-weight: 650; font-size: 11.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);}
.side h4:first-child {margin-top: 0;}
.side input[type=search], .side input[type=date], .side select {width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14px;}
.side .row2 {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.ylist {display: flex; flex-wrap: wrap; gap: 6px;}
.mgrid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;}
.mgrid .pill {padding: 4px 0; text-align: center; font-size: 12.5px; border-radius: 6px;}
.pill[disabled] {opacity: .35; cursor: default;}
.side .btn {width: 100%; margin-top: 8px;}
.filter-toggle {display: none;}
.feed-head {display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;}
.feed-head h1 {font-size: 26px;}
.feed-head .sub {color: var(--muted); font-size: 13.5px;}
.achips {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;}
.achips .chip {cursor: pointer;}
.achips .chip:after {content: ' \00d7'; color: var(--muted);}
.tl {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 4px; margin-bottom: 14px;}
.tl .hint {font-size: 12px; color: var(--muted); margin: 0 0 2px 2px;}
.tl rect.bar {cursor: pointer;}
.tl rect.bar:hover {opacity: .75;}
.day {position: sticky; top: 58px; z-index: 3; margin: 18px 0 8px; padding: 5px 2px; background: var(--bg); font-weight: 650; font-size: 12.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); border-bottom: 1px solid var(--line-2);}
.tw {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 10px; margin-bottom: 10px; box-shadow: var(--shadow);}
.tw .hd {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-bottom: 6px;}
.tw .hd a.when {color: var(--muted);}
.tw .hd a.when:hover {color: var(--accent);}
.tw .body {white-space: pre-wrap; word-break: break-word; font-size: 15.5px; line-height: 1.55;}
.tw .body.clamp {max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent);}
.tw .more {border: 0; background: none; color: var(--accent); font-size: 13px; padding: 4px 0;}
.tw .body a {color: var(--accent); word-break: break-all;}
.tw .body a.tag {word-break: normal;}
.tw .body .at {color: var(--ink-2); font-weight: 560;}
.media {display: grid; gap: 6px; margin: 10px 0 4px;}
.media.m1 {grid-template-columns: 1fr;}
.media.m2, .media.m4 {grid-template-columns: 1fr 1fr;}
.media.m3 {grid-template-columns: 1fr 1fr;}
.media.m3 .med:first-child {grid-column: 1 / -1;}
.media.mn {grid-template-columns: repeat(3, 1fr);}
.med {position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; padding: 0; background: var(--panel-2); cursor: zoom-in; min-height: 60px;}
.med img {width: 100%; display: block; max-height: 520px; object-fit: contain; background: var(--panel-2);}
.media.m2 .med img, .media.m4 .med img, .media.m3 .med:not(:first-child) img, .media.mn .med img {aspect-ratio: 4 / 3; object-fit: cover;}
.med .badge-k {position: absolute; left: 8px; bottom: 8px; background: rgba(20, 25, 30, .78); color: #fff; font-size: 11.5px; padding: 2px 8px; border-radius: 4px;}
.med.broken {display: grid; place-items: center; min-height: 90px; color: var(--muted); font-size: 12.5px; padding: 8px; text-align: center; cursor: default;}
.tw .ft {display: flex; flex-wrap: wrap; gap: 14px; align-items: center; color: var(--muted); font-size: 12.5px; padding-top: 6px;}
.tw .ft a, .tw .ft button {color: var(--muted); border: 0; background: none; padding: 0; font-size: 12.5px;}
.tw .ft a:hover, .tw .ft button:hover {color: var(--accent);}
.tw .ft .sp {flex: 1;}
.sentinel {height: 40px; text-align: center; color: var(--muted); font-size: 13px; padding: 14px 0;}
.lb {position: fixed; inset: 0; background: rgba(12, 16, 19, .92); z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px;}
.lb.on {display: flex;}
.lb img {max-width: min(96vw, 1400px); max-height: 78vh; object-fit: contain; border-radius: 6px; background: #1d262d;}
.lb .cap {color: #d9dde0; font-size: 13.5px; max-width: 900px; margin-top: 12px; text-align: center;}
.lb .cap a {color: #9fc1d6;}
.lb .nav {position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 46px; height: 64px; font-size: 26px; border-radius: 8px;}
.lb .prev {left: 12px;}
.lb .next {right: 12px;}
.lb .close {position: absolute; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 32px; line-height: 1;}
.lb .count {color: #aab3b9; font-size: 12.5px; margin-top: 4px;}
.chapter {min-width: 0;}
.chapter h1 {font-size: 34px; line-height: 1.15; margin: 4px 0 10px;}
.chapter .lead {font-size: 17px; color: var(--ink-2); max-width: 760px; margin: 0 0 18px;}
.lesson {margin: 26px 0; padding-top: 6px;}
.lesson h2 {font-size: 21px; margin-bottom: 6px;}
.lesson h2 span {color: var(--gold); font-family: var(--sans); font-size: 14px; margin-right: 8px;}
.lesson p {max-width: 760px; font-size: 16px; color: var(--ink-2); margin: 0 0 10px;}
.exwrap {margin: 10px 0 0; display: grid; gap: 4px;}
.exwhy {font-size: 12.5px; color: var(--gold); font-weight: 600; margin: 8px 0 -4px 2px;}
.tw.ex {border-left: 3px solid var(--gold);}
.tw.ex.missing .body {color: var(--ink-2); font-style: italic;}
.dd {display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0 14px;}
.dd > div {border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; background: var(--panel);}
.dd h3 {margin-bottom: 6px;}
.dd .do h3 {color: var(--win);}
.dd ul {margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14.5px;}
.dd li {margin: 4px 0;}
.practice {background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 10px; padding: 12px 16px; margin: 14px 0; color: var(--ink);}
.practice b {display: block; font-weight: 650; font-size: 12px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 3px;}
.numbers {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 16px 0; box-shadow: var(--shadow);}
.numbers h3 {margin-bottom: 8px;}
.numbers .kp {display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;}
.numbers .kp div {flex: 1 1 130px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px;}
.numbers .kp span {display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;}
.numbers .kp b {font-weight: 650; font-size: 24px; font-family: var(--serif);}
.numbers .note {font-size: 13px; color: var(--muted); margin: 6px 0 0;}
.numbers .two {display: grid; grid-template-columns: 1fr 1fr; gap: 14px;}
.chapnav {display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line);}
.gloss {display: grid; grid-template-columns: 1fr 2fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; margin: 10px 0;}
.gloss div {background: var(--panel); padding: 8px 12px; font-size: 14.5px;}
.gloss div.t {font-weight: 650;}
.sizer, .plan {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 16px 0; box-shadow: var(--shadow);}
.sizer .grid, .plan .grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;}
.sizer label, .plan label {font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: grid; gap: 4px;}
.sizer input, .sizer select, .plan textarea {padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14.5px; width: 100%;}
.plan textarea {min-height: 78px; resize: vertical;}
.sizer .out {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px;}
.sizer .out div {background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px;}
.sizer .out span {display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em;}
.sizer .out b {font-weight: 650; font-size: 20px; font-family: var(--serif);}
.sizer .warn {color: var(--loss); font-size: 13.5px; margin-top: 8px;}
@media (max-width: 960px) {
  .arch {grid-template-columns: 1fr;}
  .side {position: static; max-height: none;}
  .side {display: none;}
  .side.open {display: block;}
  .filter-toggle {display: inline-block; margin-bottom: 10px;}
  .dd, .numbers .two {grid-template-columns: 1fr;}
  .chapter h1 {font-size: 28px;}
  .day {top: 56px;}
}
@media print {
  body * {visibility: hidden;}
  .printable, .printable * {visibility: visible;}
  .printable {position: absolute; inset: 0; margin: 0; padding: 16px; border: 0; box-shadow: none;}
  .plan textarea {border: 1px solid #999; min-height: 90px;}
  .noprint {display: none !important;}
}
.course {display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: 26px; margin: 16px 0 50px; align-items: start; text-align: left;}
.rail {display: block; position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; overflow-x: hidden; min-width: 0; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 14px 12px 16px; text-align: left;}
.rail .rail-h {font-weight: 650; font-size: 11.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 0 6px 6px;}
.rail .prog {font-size: 12.5px; color: var(--muted); margin: 0 6px 4px;}
.rail .bar {height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 6px 10px; overflow: hidden;}
.rail .bar i {display: block; height: 100%; background: var(--gold);}
.rail a {display: block; color: var(--ink-2); text-decoration: none; border-radius: 6px; text-align: left;}
.rail a.top {padding: 8px 10px; font-weight: 600; font-size: 14.5px;}
.rail a.top small {display: block; font-weight: 400; color: var(--muted); font-size: 12px;}
.rail a:hover {background: var(--panel-2);}
.rail a.on {background: var(--accent-soft); color: var(--accent);}
.rail .rm {margin-top: 12px; border-top: 1px solid var(--line-2); padding-top: 8px;}
.rail .rmh {display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 4px 10px 4px 6px; font-weight: 650; font-size: 14.5px; font-family: var(--serif); color: var(--ink); text-align: left;}
.rail .rmh b {font-weight: 700; font-size: 12px; font-family: var(--sans); color: var(--gold); letter-spacing: .04em; text-transform: uppercase; flex: 0 0 100%;}
.rail .rmh small {font-weight: 400; font-size: 12px; font-family: var(--sans); color: var(--muted); flex: 0 0 100%;}
.rail a.rl {display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: baseline; gap: 2px 6px; padding: 7px 8px 7px 10px; font-size: 13.8px; line-height: 1.35;}
.rail a.rl .rt {min-width: 0; overflow-wrap: anywhere;}
.rail a.rl .rt small {display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted);}
.rail a.rl .rt small .tb {margin-right: 6px;}
.rail .rmh {overflow-wrap: anywhere;}
.rail a.rl .rn {color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums;}
.rail a.rl .ck {color: var(--win); font-size: 12.5px;}
.tb {flex: none; align-self: center; display: inline-block; font-weight: 600; font-size: 10.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-2); background: var(--panel-2); white-space: nowrap;}
.tb.t-case {background: var(--accent-soft); color: var(--accent); border-color: transparent;}
.tb.t-practice {background: var(--gold-soft); color: var(--gold); border-color: transparent;}
.tb.t-market {background: var(--win-soft); color: var(--win); border-color: transparent;}
.tb.t-chart {background: var(--loss-soft); color: var(--loss); border-color: transparent;}
.tb.t-formats {background: var(--ink); color: var(--panel); border-color: transparent;}
.cmain {min-width: 0; text-align: left;}
.cmain h1 {font-size: 34px; line-height: 1.15; margin: 4px 0 8px;}
.cmain .lead {font-size: 17px; color: var(--ink-2); max-width: 780px; margin: 0 0 16px;}
.strip {display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0;}
.strip div {flex: 1 1 130px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 14px;}
.strip span {display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;}
.strip b {font-weight: 650; font-size: 26px; font-family: var(--serif);}
.legend2 {display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 18px; font-size: 13px; color: var(--muted);}
.legend2 span {display: inline-flex; align-items: center; gap: 6px;}
.mod {margin: 0 0 26px; padding: 16px 18px 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);}
.mod h2 {font-size: 23px; margin: 0;}
.mod h2 span {display: block; font-weight: 700; font-size: 12px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--gold); margin-bottom: 2px;}
.mod .sum {margin: 6px 0 8px; color: var(--ink-2); max-width: 780px;}
.mod .meta {display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--muted); align-items: center; margin-bottom: 8px;}
.fchip {white-space: nowrap; flex: none; font-size: 11.5px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px;}
.fchip i {width: 8px; height: 8px; border-radius: 50%; display: inline-block;}
.mod ol {list-style: none; margin: 0; padding: 0;}
.mod li {border-top: 1px solid var(--line-2); padding: 10px 0;}
.mod li a.lt {display: grid; grid-template-columns: 44px 1fr auto 62px; gap: 8px; align-items: baseline; color: var(--ink); text-decoration: none; font-size: 16.5px; font-weight: 600;}
.mod li a.lt:hover {color: var(--accent);}
.mod li .n {color: var(--muted); font-variant-numeric: tabular-nums;}
.mod li .mn {color: var(--muted); font-weight: 400; font-size: 13px; text-align: right;}
.mod li p.o {margin: 3px 0 0 52px; color: var(--ink-2); font-size: 14.5px;}
.crumb {font-weight: 650; font-size: 12px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--gold);}
.lmeta {display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; font-size: 13px; color: var(--muted);}
.objective {background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin: 12px 0 18px; color: var(--ink); font-size: 16px;}
.objective b {display: block; font-weight: 650; font-size: 11.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 2px;}
.idea {margin: 18px 0;}
.idea h3 {font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--ink); font-family: var(--serif); margin-bottom: 4px;}
.idea p {margin: 0; max-width: 780px; font-size: 16px; color: var(--ink-2);}
.cmain h2.sec {font-size: 13px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 26px 0 8px;}
.activity {background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 10px; padding: 12px 16px; margin: 18px 0;}
.activity b {display: block; font-weight: 650; font-size: 12px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); margin-bottom: 3px;}
.ftable {width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0;}
.ftable th, .ftable td {text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top;}
.ftable th {font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);}
.ftable td.r, .ftable th.r {text-align: right;}
.anat {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 10px 0;}
.anat > div {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;}
.anat h3 {margin-bottom: 6px;}
.anat ul {margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 14px;}
.anat li {margin: 3px 0;}
.fbar {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;}
.fbar .pill {font-size: 13px;}
.fbar .pill i {width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px;}
.tw .hd .fm {font-size: 11px; padding: 1px 8px; border-radius: 999px; color: #fff;}
.tw .hd .sb {font-size: 11px; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2);}
@media (max-width: 960px) {
  .course {grid-template-columns: 1fr;}
  .rail {position: static; max-height: 320px;}
  .cmain h1 {font-size: 28px;}
  .mod li a.lt {grid-template-columns: 38px 1fr 50px;}
  .mod li a.lt .tb {display: none;}
  .mod li p.o {margin-left: 46px;}
}
@media print {
  .rail, .top, .noprint, footer {display: none !important;}
  .course {display: block;}
  .mod {box-shadow: none; break-inside: avoid;}
  body {background: #fff;}
}
.relnote {margin: 0 0 8px; color: var(--muted); font-size: 13.5px;}
.relbar {margin: 0 0 10px; font-size: 13px; color: var(--muted);}
.relbar select {margin-left: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit;}
.mod li p.o .cnt {color: var(--muted); font-size: 12.5px; white-space: nowrap;}
.caveat {background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 8px; padding: 10px 14px; margin: 4px 0 14px; color: var(--ink-2); font-size: 14.5px; max-width: 860px;}
.caveat b {color: var(--ink);}
.mod {border-left: 4px solid var(--accent);}
.mod h2 span {display: inline-block; background: var(--accent-soft); color: var(--accent); padding: 1px 8px; border-radius: 4px; margin-bottom: 6px;}
.kfs {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;}
.kf {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); display: block;}
.kf > * {margin: 0 0 8px !important;}
.kf > *:last-child {margin-bottom: 0 !important;}
.kf > b {font-weight: 650; font-size: 34px; font-family: var(--serif); color: var(--accent); line-height: 1;}
.kf h3 {margin: 0; font-weight: 650; font-size: 14px; font-family: var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink);}
.kf p {margin: 0; color: var(--ink-2); font-size: 14px; flex: 1;}
.exq {display: block; font-size: 13px; color: var(--ink-2); background: var(--panel-2); border-left: 3px solid var(--gold); border-radius: 4px; padding: 6px 9px; text-decoration: none; font-style: italic;}
.exq span {display: block; font-style: normal; color: var(--muted); font-size: 11.5px; margin-top: 2px;}
.exq:hover {color: var(--accent); text-decoration: none;}
.kfl, .fc-all {font-size: 13px; font-weight: 600;}
.fcard {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin: 0 0 14px; box-shadow: var(--shadow);}
.fcard h3 {display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 650; font-size: 19px; font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink);}
.fcard h3 i {width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none;}
.fcard h4 {margin: 12px 0 3px; font-weight: 650; font-size: 11.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);}
.fcard p {margin: 0; color: var(--ink-2); font-size: 14.5px;}
.fc-blurb {color: var(--ink) !important;}
.fc-stats {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0 2px;}
.fc-stats div {background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 6px 8px;}
.fc-stats b {display: block; font-weight: 650; font-size: 18px; font-family: var(--serif);}
.fc-stats span {font-size: 11px; color: var(--muted);}
.lchips {display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px;}
.lchip {font-size: 12.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); text-decoration: none;}
.lchip b {color: var(--accent);}
.lchip:hover {border-color: var(--accent); text-decoration: none;}
.fc-ex .tw {margin: 4px 0 0;}
.fc-ex .exwhy {margin-top: 0;}
.tpls {display: grid; gap: 14px;}
.tpl {display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; box-shadow: var(--shadow);}
.tpl h3 {margin: 0 0 8px; font-weight: 650; font-size: 18px; font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink);}
.anno {white-space: pre-wrap; word-break: break-word; font-size: 15.5px; line-height: 2.1; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 14px;}
mark.fld {background: transparent; color: var(--ink); border-bottom: 3px solid; padding: 0 1px;}
mark.fld sup {font-weight: 700; font-size: 9.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .04em; margin-left: 3px; padding: 0 4px; border-radius: 3px; color: #fff; vertical-align: super;}
mark.fld.k0 {border-color: #2e4a5f;}
mark.fld.k0 sup {background: #2e4a5f;}
mark.fld.k1 {border-color: #8b6f3d;}
mark.fld.k1 sup {background: #8b6f3d;}
mark.fld.k2 {border-color: #3b7a5a;}
mark.fld.k2 sup {background: #3b7a5a;}
mark.fld.k3 {border-color: #a4503c;}
mark.fld.k3 sup {background: #a4503c;}
mark.fld.k4 {border-color: #6b7f8e;}
mark.fld.k4 sup {background: #6b7f8e;}
mark.fld.k5 {border-color: #b79a63;}
mark.fld.k5 sup {background: #b79a63;}
.exq-l {display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--muted);}
.tpl-facts h4 {margin: 0 0 6px; font-weight: 650; font-size: 11.5px; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);}
.tpl-facts table {width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px;}
.tpl-facts td {padding: 6px 4px; border-bottom: 1px solid var(--line-2); text-align: left;}
.tpl-facts td.r {text-align: right; font-weight: 600;}
.imps {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px;}
.imp {background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow); display: block;}
.imp > * {margin: 0 0 8px !important;}
.imp > *:last-child {margin-bottom: 0 !important;}
.imp h3 {margin: 0; font-weight: 650; font-size: 16.5px; font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--ink);}
.imp p {margin: 0; color: var(--ink-2); font-size: 14px; flex: 1;}
.imp .lchips {margin: 0;}
@media (max-width: 1100px) {
  .fcard, .tpl {grid-template-columns: 1fr;}
}
@media (max-width: 560px) {
  .fc-stats {grid-template-columns: repeat(2, 1fr);}
}
.fc-ex, .fc-info, .tpl-text, .tpl-facts {min-width: 0;}
.med {min-width: 0;}