/* The Spinozan Trader course: a steel atelier, not a gold workshop. */
#page-trader {
  --tr-ink: #080d13;
  --tr-surface: #101821;
  --tr-raise: #172230;
  --tr-line: #3a4d63;
  --tr-steel: #9bb4cc;
  --tr-paper: #e6edf4;
  --tr-muted: #9aabbc;
  --tr-ok: #9ec9b4;
  --tr-bad: #e0b29a;
  --tr-hair: rgb(155 180 204 / .28);
  color: var(--tr-paper);
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(90deg, transparent 3.25rem, var(--tr-hair) 3.25rem, var(--tr-hair) calc(3.25rem + 1px), transparent calc(3.25rem + 1px)),
    var(--tr-ink);
}
#page-trader *, #tr-reset-dialog * { box-sizing: border-box; }
#page-trader p, #page-trader li, #page-trader dd { font-size: 1.14rem; line-height: 1.72; text-wrap: pretty; }
#page-trader h1, #page-trader h2, #page-trader h3 { color: var(--tr-paper); font-weight: 400; line-height: 1.12; text-wrap: balance; }
#page-trader h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); margin: 0 0 1rem; letter-spacing: -.02em; }
#page-trader h3 { font-size: 1.18rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .75rem; color: var(--tr-steel); }
#page-trader p { margin: 0 0 1.2rem; }
#page-trader a { color: var(--tr-paper); }
#page-trader a:hover { color: var(--tr-steel); }
#page-trader .eyebrow { color: var(--tr-steel); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
#page-trader :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--tr-steel); outline-offset: 4px; }
#page-trader :is(article,section,[id]) { scroll-margin-top: 1.5rem; }
.tr-interactive { display: none; }
.tr-ready .tr-interactive { display: block; }
.tr-ready .tr-nojs { display: none; }
.tr-skip { position: fixed; top: -100px; left: 1rem; z-index: 150; padding: 1rem; background: var(--tr-surface); }
.tr-skip:focus { top: 80px; }
.tr-hero { max-width: 1220px; margin: auto; padding: 4.5rem 2.25rem 3rem; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: end; }
#page-trader .tr-hero h1 { font-size: clamp(3rem, 6vw, 5.4rem); letter-spacing: -.035em; margin: .6rem 0 1.4rem; }
#page-trader .tr-hero h1 em { color: var(--tr-steel); font-style: italic; font-weight: 400; }
.tr-deck { font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.28; max-width: 28ch; }
.tr-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0; }
#page-trader .button { white-space: normal; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; border-radius: 0; min-height: 48px; padding: .85rem 1.15rem; transition: transform 160ms cubic-bezier(.2,0,0,1), border-color 160ms cubic-bezier(.2,0,0,1), background-color 160ms cubic-bezier(.2,0,0,1); }
#page-trader .button:active { transform: scale(.96); }
#page-trader .button.primary, #page-trader .button.primary:hover { color: #0b1118; background: var(--tr-steel); border-color: var(--tr-steel); }
#page-trader .tr-facts { font-size: .92rem; color: var(--tr-muted); margin-top: 1.4rem; font-variant-numeric: tabular-nums; }
.tr-frontispiece { border: 1px solid var(--tr-hair); padding: 1.75rem 1.5rem 1.25rem; background: var(--tr-surface); }
#page-trader .tr-frontispiece p { text-align: center; margin: 1rem 0 0; font-size: .95rem; color: var(--tr-muted); font-style: italic; }
#page-trader svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--tr-steel); stroke-width: 1.4; }
#page-trader svg text { stroke: none; fill: var(--tr-paper); font: 15px var(--serif-body); text-anchor: middle; }
#page-trader svg .tr-aux { stroke-dasharray: 3 5; stroke: var(--tr-muted); stroke-width: 1.1; }
#page-trader svg .tr-second { stroke: var(--tr-ok); }
#page-trader svg .tr-fill { fill: rgb(155 180 204 / .08); stroke: var(--tr-steel); }
#page-trader svg .tr-point { fill: var(--tr-paper); stroke: none; }
.tr-docket { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tr-hair); }
.tr-docket li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--tr-hair); font-size: .95rem; color: var(--tr-muted); }
.tr-docket strong { color: var(--tr-steel); font-weight: 400; letter-spacing: .08em; font-size: .72rem; text-transform: uppercase; padding-top: .2rem; }
.tr-orientation { max-width: 1140px; margin: 0 auto 3rem; padding: 1.6rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; border-top: 1px solid var(--tr-line); border-bottom: 1px solid var(--tr-line); }
#page-trader .tr-orientation p { font-size: 1rem; color: var(--tr-muted); margin: 0; }
.tr-orientation strong { color: var(--tr-paper); display: block; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; margin-bottom: .4rem; }
.tr-layout { max-width: 1220px; margin: auto; padding: 0 2.25rem 4.5rem; display: grid; grid-template-columns: 272px minmax(0,1fr); gap: 3.75rem; align-items: start; }
.tr-sidebar { position: sticky; top: calc(var(--header-height) + 1.5rem); max-height: calc(100vh - var(--header-height) - 3rem); overflow: auto; scrollbar-color: var(--tr-line) var(--tr-surface); padding: 0 .75rem 1rem 0; }
#page-trader .tr-sidebar h2 { font-size: 1.35rem; letter-spacing: -.01em; }
#page-trader .tr-sidebar p { font-size: .88rem; line-height: 1.5; color: var(--tr-muted); margin: .45rem 0; }
.tr-progress-panel { margin: 0 0 1.5rem; }
.tr-progress-panel label { font-size: .9rem; font-variant-numeric: tabular-nums; }
.tr-progress-panel progress { display: block; width: 100%; height: 3px; accent-color: var(--tr-steel); margin: .75rem 0; background: var(--tr-surface); border: 0; }
.tr-progress-panel progress::-webkit-progress-bar { background: var(--tr-surface); }
.tr-progress-panel progress::-webkit-progress-value { background: var(--tr-steel); }
.tr-text-button { min-height: 44px; padding: .25rem 0; background: none; border: 0; color: var(--tr-muted); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
#page-trader summary { cursor: pointer; min-height: 44px; padding: .7rem 0; line-height: 1.45; }
.tr-sidebar details { border-top: 1px solid var(--tr-hair); }
.tr-sidebar summary { font-size: .92rem; color: var(--tr-steel); letter-spacing: .04em; }
.tr-sidebar ol { list-style: none; padding: 0; margin: 0 0 .65rem; }
.tr-sidebar a[data-lesson-link] { display: grid; grid-template-columns: 1.5rem 1fr 1rem; align-items: start; gap: .4rem; padding: .6rem .45rem; font-size: .95rem; line-height: 1.35; text-decoration: none; border-left: 1px solid transparent; }
.tr-sidebar a[data-lesson-link] > span:first-child { color: var(--tr-muted); font-variant-numeric: tabular-nums; font-size: .75rem; padding-top: .15rem; letter-spacing: .04em; }
.tr-sidebar a[aria-current="step"] { background: var(--tr-surface); border-left-color: var(--tr-steel); }
.tr-lesson-mark { color: var(--tr-ok); }
.tr-tools { display: grid; border-top: 1px solid var(--tr-hair); padding-top: .75rem; }
.tr-tools a { padding: .45rem; min-height: 44px; font-size: .95rem; }
.tr-lesson { border-bottom: 1px solid var(--tr-hair); margin-bottom: 4rem; padding-bottom: 2rem; min-width: 0; }
.tr-ready .tr-lesson { margin-bottom: 0; }
#page-trader .tr-objective { font-size: 1.08rem; color: var(--tr-muted); font-style: italic; }
#page-trader .tr-mastery { font-size: .86rem; color: var(--tr-steel); border-top: 1px solid var(--tr-hair); padding-top: .75rem; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.tr-prose { margin: 1.8rem 0; max-width: 66ch; }
.tr-example { background: var(--tr-surface); border: 1px solid var(--tr-hair); padding: 1.5rem 1.6rem; margin: 1.75rem 0; }
.tr-example p:last-child, .tr-pitfall p:last-child, .tr-application p:last-child { margin-bottom: 0 !important; }
.tr-pitfall { border-left: 1px solid var(--tr-steel); padding: .2rem 0 .2rem 1.2rem; margin: 1.75rem 0; }
.tr-application { padding: 1.15rem 0; }
.tr-diagram { border: 1px solid var(--tr-hair); background: var(--tr-surface); margin: 1.5rem 0; padding: 1.1rem 1.4rem 1.4rem; }
.tr-diagram svg { max-width: 560px; margin: auto; }
.tr-diagram figcaption { font-size: .98rem; line-height: 1.5; }
.tr-diagram figcaption strong { color: var(--tr-steel); letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; margin-right: .5rem; }
.tr-diagram ol { padding-left: 1.2rem; margin: 1rem 0; }
#page-trader .tr-diagram li { font-size: .98rem; }
.tr-ready .tr-diagram-steps { display: none; }
.tr-ready .tr-diagram-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.tr-diagram small { color: var(--tr-muted); display: block; line-height: 1.5; }
#page-trader .tr-step-status { font-size: .98rem; min-height: 2.6rem; }
.tr-practice { margin: 2rem 0; padding-top: 1.5rem; border-top: 1px solid var(--tr-hair); }
.tr-hearing { margin: 2.2rem 0; padding: 1.5rem 1.6rem 1.7rem; border: 1px solid var(--tr-hair); background: var(--tr-raise); }
.tr-hearing h3 { margin-bottom: .4rem; }
.tr-hearing-claim { display: grid; gap: .55rem; margin: 1.15rem 0; }
.tr-hearing-claim span { line-height: 1.5; }
.tr-question { border: 0; border-bottom: 1px solid var(--tr-hair); padding: 0 0 1.4rem; margin: 1.4rem 0; min-width: 0; }
.tr-question legend { float: none; width: 100%; font-size: 1.12rem; line-height: 1.5; padding: 0 0 .7rem; color: var(--tr-paper); }
.tr-option { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem 1rem; margin: .45rem 0; border: 1px solid var(--tr-hair); background: var(--tr-surface); cursor: pointer; line-height: 1.5; transition: border-color 160ms cubic-bezier(.2,0,0,1), background-color 160ms cubic-bezier(.2,0,0,1); }
.tr-option:has(input:checked) { border-color: var(--tr-steel); background: #1a2734; }
.tr-option:has(input:focus-visible) { outline: 2px solid var(--tr-steel); outline-offset: 3px; }
.tr-option input { flex: none; margin-top: .35rem; accent-color: var(--tr-steel); width: 1rem; height: 1rem; }
.tr-option:has(input:disabled) { cursor: default; }
#page-trader .tr-feedback { font-size: .98rem; margin: .7rem 0 .2rem; color: var(--tr-bad); }
#page-trader .tr-feedback[data-correct="true"] { color: var(--tr-ok); }
#page-trader .tr-explanation { font-size: .98rem; color: var(--tr-muted); margin: .2rem 0; }
#page-trader select, #page-trader textarea { display: block; width: 100%; min-width: 0; padding: .8rem; background: var(--tr-ink); color: var(--tr-paper); border: 1px solid var(--tr-line); border-radius: 0; font: 1rem/1.6 var(--serif-body); }
#page-trader select { min-height: 48px; }
#page-trader textarea { resize: vertical; margin: .5rem 0 1.2rem; }
#page-trader textarea::placeholder { color: var(--tr-muted); opacity: 1; }
#page-trader select[aria-invalid="true"] { border-color: var(--tr-bad); }
#page-trader button:disabled { cursor: default; opacity: .5; }
.tr-lesson-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1rem; }
#page-trader .tr-source { font-size: .92rem; overflow-wrap: anywhere; }
.tr-supplement { max-width: 840px; margin: 0 auto; padding: 3.2rem 2rem; border-top: 1px solid var(--tr-hair); }
.tr-supplement details { border-bottom: 1px solid var(--tr-hair); padding: .5rem 0; }
.tr-supplement ol { padding-left: 1.4rem; }
.tr-rubric { border: 1px solid var(--tr-hair); margin: 1.5rem 0; padding: 1rem; }
.tr-rubric legend { padding: 0 .5rem; color: var(--tr-steel); letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
.tr-rubric label { display: block; padding: .5rem 0; line-height: 1.55; }
.tr-rubric input { accent-color: var(--tr-steel); }
.tr-glossary { display: grid; grid-template-columns: 190px 1fr; gap: 1rem 1.5rem; margin-bottom: 2rem; }
.tr-glossary dt { color: var(--tr-steel); line-height: 1.7; }
.tr-glossary dd { margin: 0; }
.tr-notice { max-width: 800px; padding: 1.5rem; margin: 1rem auto !important; border: 1px solid var(--tr-hair); }
#tr-reset-dialog { position: fixed; inset: 0; width: min(90vw, 540px); max-height: 85vh; overflow: auto; margin: auto; padding: 2rem; border: 1px solid var(--tr-line); color: var(--tr-paper); background: var(--tr-surface); }
#tr-reset-dialog::backdrop { background: rgb(0 0 0 / .82); }
@media (prefers-reduced-motion: reduce) {
  #page-trader .button { transition: none; }
  #page-trader .button:active { transform: none; }
}
@media (max-width: 1100px) {
  .tr-orientation { margin-left: 2rem; margin-right: 2rem; }
  .tr-layout { grid-template-columns: 230px minmax(0,1fr); gap: 2rem; }
}
@media (max-width: 800px) {
  #page-trader { background: var(--tr-ink); }
  .tr-hero { grid-template-columns: 1fr; padding: 2.6rem 1.4rem 2rem; gap: 1.4rem; }
  .tr-frontispiece { display: none; }
  .tr-orientation { grid-template-columns: 1fr; gap: 1rem; margin: 0 1.4rem 2rem; }
  .tr-layout { display: block; padding: 0 1.4rem 2rem; }
  .tr-sidebar { position: static; max-height: none; padding: 0; margin-bottom: 2rem; }
  .tr-ready .tr-sidebar nav { max-height: 300px; overflow: auto; border-bottom: 1px solid var(--tr-hair); padding-right: .5rem; }
  .tr-tools { display: flex; flex-wrap: wrap; gap: 0 .5rem; }
  .tr-supplement { padding: 2rem 1.4rem; }
  .tr-glossary { grid-template-columns: 1fr; gap: .25rem; }
  .tr-glossary dd { margin-bottom: 1rem; }
}
@media print {
  .topnav, footer, .tr-sidebar, .tr-interactive, .tr-lesson-nav, .tr-skip, #tr-reset-dialog { display: none !important; }
  .tr-layout { display: block; }
  .tr-lesson[hidden], .tr-ready .tr-nojs, .tr-ready .tr-diagram-steps { display: block !important; }
  #page-trader { --tr-paper: #111; --tr-muted: #333; --tr-steel: #444; --tr-surface: #fff; background: #fff; }
  #page-trader svg g { visibility: visible !important; }
  .tr-lesson { break-before: page; }
}