:root{
  color-scheme:dark light;

  --page:#121214;
  --surface:#1B1B1E;
  --surface-sunken:#242427;
  --rule:#303034;
  --rule-strong:#45454B;
  --text:#F1F1F3;
  --text-soft:#A2A2A9;
  --text-faint:#707077;
  /* --accent is the brand dark blue: used only as a filled background behind
     white text (the toggle, Submit), so it stays this deep in both themes.
     --accent-text is blue used AS text or a thin line directly on the page; a
     dark blue would vanish on this background, so dark mode lifts it. */
  --accent:#1E40AF;
  --accent-text:#8AABF0;
  --positive:#5FA882;
  --caution:#D9A552;
  --negative:#D96A56;
  --on-accent:#FFFFFF;

  /* Translucent fills, kept as tokens so the chart and the alert box follow the
     theme rather than carrying their own literals. */
  --accent-faint:rgba(138,171,240,.42);
  --accent-underline:rgba(138,171,240,.5);
  --negative-edge:rgba(217,106,86,.45);
  --negative-wash:rgba(217,106,86,.11);
  --negative-wash-edge:rgba(217,106,86,.34);
  --negative-text:#EDB0A2;
  --zone-fill:rgba(217,106,86,.13);
  --zone-swatch:rgba(217,106,86,.35);
  --cone-outer:rgba(164,157,147,.09);
  --cone-inner:rgba(164,157,147,.15);
  --cone-swatch:rgba(164,157,147,.22);
  --tip-shadow:rgba(0,0,0,.45);

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme: light){
  :root{
    --page:#F5F5F7;
    --surface:#FFFFFF;
    --surface-sunken:#F0F0F2;
    --rule:#E3E3E6;
    --rule-strong:#C5C5CB;
    --text:#1C1C1E;
    --text-soft:#55555C;
    --text-faint:#6C6C73;
    /* --accent keeps the same dark blue as dark mode. Green and salmon need
       darker mixes for paper; blue used as text is already dark enough here,
       so --accent-text simply matches the fill. */
    --positive:#2E7D57;
    --caution:#8A5D0C;
    --negative:#B23C22;
    --accent-text:#1E40AF;

    --accent-faint:rgba(30,64,175,.38);
    --accent-underline:rgba(30,64,175,.45);
    --negative-edge:rgba(178,60,34,.42);
    --negative-wash:rgba(178,60,34,.08);
    --negative-wash-edge:rgba(178,60,34,.28);
    --negative-text:#8E2F1A;
    --zone-fill:rgba(178,60,34,.10);
    --zone-swatch:rgba(178,60,34,.30);
    --cone-outer:rgba(92,85,75,.08);
    --cone-inner:rgba(92,85,75,.14);
    --cone-swatch:rgba(92,85,75,.20);
    --tip-shadow:rgba(31,28,24,.18);
  }
}

*{box-sizing:border-box}
html,body{margin:0}
html{background:var(--page)}
body{
  background:var(--page); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.45;
  padding:48px 34px 56px; max-width:1120px; margin:0 auto;
}
@media(max-width:700px){ body{padding:32px 20px 44px} }

@keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
header,.position,.prompt{animation:rise .5s cubic-bezier(.22,.61,.36,1) backwards}
header{animation-delay:.02s}
.position{animation-delay:.08s}
.prompt{animation-delay:.14s}

/* The results appear only once there is something to calculate, so they ease in
   on reveal rather than on page load. */
.results[hidden]{display:none}
.results.revealed .tile,.results.revealed .card{animation:rise .45s cubic-bezier(.22,.61,.36,1) backwards}
.tiles>.tile:nth-child(1){animation-delay:.02s}
.tiles>.tile:nth-child(2){animation-delay:.07s}
.column-main .card{animation-delay:.20s}
@media(prefers-reduced-motion:reduce){ header,.position,.prompt,.results.revealed .tile,.results.revealed .card{animation:none} }

header{margin:2px 0 24px}
h1{font-size:28px; margin:0 0 6px; letter-spacing:-.025em; font-weight:700}
.lede{color:var(--text-soft); font-size:13.5px; max-width:78ch; letter-spacing:-.005em; line-height:1.6}
.lede strong{color:var(--text); font-weight:600}
.page-link{
  display:inline-block; margin:8px 0 14px; padding:7px 16px; border-radius:999px;
  background:var(--surface); border:1px solid var(--rule);
  font-size:12.5px; font-weight:500; color:var(--text); text-decoration:none;
  transition:border-color .15s ease,background .15s ease;
}
.page-link:hover{border-color:var(--rule-strong); background:var(--surface-sunken)}

/* About page: plain sections rather than boxed cards, in a narrower reading column. */
body.about{max-width:760px}
.about .card{
  background:none; border:none; border-radius:0; padding:0; margin-bottom:36px;
  font-size:13.5px; color:var(--text-soft); line-height:1.6;
}
.about .card-title{
  font-size:16px; letter-spacing:-.01em; text-transform:none; color:var(--text);
  font-weight:700; margin-bottom:12px;
}
.about .card b{color:var(--text); font-weight:600}
.about .card ol,.about .card ul{margin:0; padding:0; list-style:none}
.about .card ol{counter-reset:step}
.about .card ol li::before{counter-increment:step; content:counter(step) ". "; color:var(--text); font-weight:600}
.about .card li+li{margin-top:8px}
.about .card p{margin:14px 0 0}
.about-list{margin:0}
.about-list>div+div{margin-top:14px}
.about-list dt{color:var(--text); font-weight:600; margin-bottom:2px}
.about-list dd{margin:0}
.about .note{font-size:12.5px; margin-top:0}
.lede-glossary{max-width:78ch; margin-top:14px; border-top:1px solid var(--rule); padding-top:13px}
.lede-glossary dl{columns:2; column-gap:30px}
.lede-glossary dl>div{break-inside:avoid}
/* On the widest layout the header spans the full content column like the cards below it. */
@media(min-width:1060px){
  .lede,.lede-glossary{max-width:none}
  .lede-glossary dl{columns:3}
  /* The page link sits on the title's line, pushed to the right edge. */
  header{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:16px}
  header>*{grid-column:1/-1}
  header>h1{grid-column:1; margin-bottom:0}
  header>.page-link{grid-column:2; margin:0}
}
/* On a phone the explainer costs a screenful before the first input, so the
   header collapses to the title and the tool starts straight away. */
@media(max-width:700px){
  .lede,.lede-glossary{display:none}
  header{margin-bottom:18px}
}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:18px; margin-bottom:16px}
.card-title{
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint);
  font-weight:600; margin:0 0 16px; display:flex; justify-content:space-between; gap:12px; align-items:center;
}
.card-title .aside{color:var(--accent-text); letter-spacing:.04em; font-family:var(--mono); font-size:10.5px}

.field label{display:block; font-size:11.5px; color:var(--text-soft); margin-bottom:6px; font-weight:500}
.field .unit{color:var(--text-faint); font-size:10.5px; font-weight:400}
.field.highlight label{color:var(--accent-text)}
/* One fixed height for every control: browsers size a select, a date input and a
   text input differently from the same padding, so padding alone can't match them. */
input,select{
  width:100%; height:44px; background:var(--surface-sunken); border:1px solid var(--rule); color:var(--text);
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:16px; font-weight:500; line-height:20px;
  padding:11px; border-radius:9px; outline:none; transition:border-color .12s ease;
}
input:focus,select:focus{border-color:var(--accent-text)}
/* Selects draw their own chevron so they look the same in every browser. */
select{
  appearance:none; -webkit-appearance:none; font-family:var(--sans); cursor:pointer;
  padding-right:32px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-soft) 50%),linear-gradient(135deg,var(--text-soft) 50%,transparent 50%);
  background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;
  background-size:5px 5px; background-repeat:no-repeat;
}
/* Dims the text rather than the whole control, so a disabled select keeps the
   same outline and apparent size as the inputs beside it. */
select:disabled{color:var(--text-faint); cursor:default}

/* Where the browser supports a customisable select (Chrome and Edge), desktop gets
   a short scrolling list instead of the OS menu, which runs the full height of the
   screen for a long strike list. Touch screens and other browsers keep the native
   control. */
@supports (appearance:base-select){
  @media(pointer:fine){
    select,::picker(select){appearance:base-select}
    select{display:flex; align-items:center}
    select::picker-icon{display:none}
    select:open{border-color:var(--accent-text)}
    ::picker(select){
      max-height:264px; overflow-y:auto; overscroll-behavior:contain; margin-top:6px; padding:5px;
      background:var(--surface); color:var(--text); border:1px solid var(--rule-strong); border-radius:10px;
      box-shadow:0 12px 32px rgba(0,0,0,.28);
    }
    select option{padding:8px 10px; border-radius:6px; font-size:14px; font-variant-numeric:tabular-nums}
    select option[value=""]{display:none}
    select option::checkmark{display:none}
    select option:hover,select option:focus-visible{background:var(--surface-sunken); outline:none}
    select option:checked{color:var(--accent-text); font-weight:600}
  }
}
.field.highlight input{border-color:var(--accent-faint)}
input.invalid{border-color:var(--negative)}

.toggle{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; width:220px;
  background:var(--surface-sunken); border:1px solid var(--rule); border-radius:10px; padding:4px;
}
.toggle button{
  appearance:none; -webkit-appearance:none; border:0; background:transparent; color:var(--text-soft);
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:-.01em;
  padding:8px 0; border-radius:7px; cursor:pointer; transition:background .15s ease,color .15s ease;
}
.toggle button:hover{color:var(--text)}
.toggle button.selected{background:var(--accent); color:var(--on-accent)}
.toggle button:focus-visible{outline:2px solid var(--accent-text); outline-offset:2px}

.inputs{display:grid; gap:13px 15px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){ .inputs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:1060px){ .inputs{grid-template-columns:repeat(6,minmax(0,1fr))} }

/* Ticker spans the row on a phone; expiration and strike share the next. */
.key-inputs{display:grid; gap:13px 15px; grid-template-columns:repeat(2,minmax(0,1fr))}
.ticker-field{grid-column:1/-1}
@media(min-width:620px){
  .key-inputs{grid-template-columns:1.2fr 1fr 1fr}
  .ticker-field{grid-column:auto}
}
#ticker{font-family:var(--sans); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
#ticker::placeholder{font-weight:400; letter-spacing:0; text-transform:none}
/* A loaded chain supplies expiration and strike through dropdowns; manual entry
   swaps in typed fields for the same two values. */
.position:not(.manual) .manual-only,.position.manual .chain-only{display:none}
.chain-status{font-size:12px; color:var(--text-soft); margin:12px 0 0}
.chain-status:empty{display:none}
.submit{
  display:block; width:100%; margin-top:16px; padding:13px 0; border:0; border-radius:10px;
  background:var(--accent); color:var(--on-accent); font-family:var(--sans); font-size:15px;
  font-weight:600; letter-spacing:-.01em; cursor:pointer; transition:opacity .15s ease;
}
.submit:disabled{opacity:.35; cursor:default}
.submit:focus-visible{outline:2px solid var(--accent-text); outline-offset:2px}
@media(min-width:620px){ .submit{width:auto; padding:12px 40px} }
.more{margin-top:18px; border-top:1px solid var(--rule); padding-top:14px}
.more + .submit{margin-top:18px}
.more .inputs{margin-top:14px}

.prompt{
  text-align:center; color:var(--text-faint); font-size:14px; letter-spacing:-.01em;
  padding:44px 16px; margin:0 0 16px; border:1px solid var(--rule); border-radius:14px;
}
.prompt[hidden]{display:none}

/* The position at a glance: what was chosen, what the stock is doing, and the
   quote figures the model starts from. */
.quote-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.quote-symbol{font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1}
.quote-contract{margin-top:20px; padding-top:18px; border-top:1px solid var(--rule)}
.quote-position{font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.35}
.quote-price{text-align:right; font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1}
.quote-change{margin-top:9px; font-size:12.5px; font-weight:500; color:var(--positive)}
.quote-change.down{color:var(--negative)}
.quote-stats{display:flex; flex-wrap:wrap; gap:12px 32px; margin:14px 0 0}
.quote-stats dt{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); font-weight:600}
.quote-stats dd{margin:5px 0 0; font-family:var(--mono); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums}
.quote-note{margin:12px 0 0; font-size:11.5px; color:var(--text-faint)}

.tiles{display:grid; gap:12px; grid-template-columns:minmax(0,1fr); margin-bottom:16px}
@media(min-width:760px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tile{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:16px 17px; position:relative; overflow:hidden;
}
.tile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2.5px; background:var(--rule-strong)}
.tile.alert::before{background:var(--negative)}
.tile.watch::before{background:var(--caution)}
.tile.calm::before{background:var(--positive)}
.tile-label{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin-bottom:10px}
.tile-value{font-family:var(--mono); font-size:27px; font-weight:600; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.tile-value.compact{font-size:18px; letter-spacing:-.02em}
.tile-detail{font-size:12px; color:var(--text-soft); margin-top:11px; line-height:1.55; letter-spacing:-.005em}
.tile-detail strong{color:var(--text); font-weight:600}

.dashboard{display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.column-main>*:last-child{margin-bottom:0}

/* The two headline figures sit above the panels that explain them. */
.headline{display:grid; gap:14px; grid-template-columns:minmax(0,1fr); margin-bottom:16px}
@media(min-width:540px){ .headline{grid-template-columns:repeat(2,minmax(0,1fr))} }
.headline-figure{padding-left:13px; border-left:2.5px solid var(--rule-strong)}
.headline-figure.alert{border-left-color:var(--negative)}
.headline-figure.watch{border-left-color:var(--caution)}
.headline-figure.calm{border-left-color:var(--positive)}

.split{display:grid; gap:12px; grid-template-columns:minmax(0,1fr)}
@media(min-width:540px){ .split{grid-template-columns:repeat(2,minmax(0,1fr))} }
.split-panel{background:var(--surface-sunken); border:1px solid var(--rule); border-radius:11px; padding:14px 15px}
.split-panel.flagged{border-color:var(--negative-edge)}
.split-heading{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin-bottom:12px}
.split-heading strong{color:var(--text); font-family:var(--mono); font-weight:600; letter-spacing:-.01em}
.split-panel.flagged .split-heading strong{color:var(--negative)}
.split-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:5px 0; font-size:12.5px; color:var(--text-soft)}
.split-row b{font-family:var(--mono); font-size:14.5px; color:var(--text); font-weight:600; font-variant-numeric:tabular-nums}
.split-row.total{border-top:1px solid var(--rule); margin-top:7px; padding-top:10px}
.split-row.total span{color:var(--text); font-weight:500}

/* The two panels under the headline figures are collapsed to their titles by
   default. Aligned to the top so opening one doesn't stretch its closed
   neighbour to the same height. */
#exerciseCase .split{align-items:start}
details.split-panel > summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center;
}
details.split-panel > summary::-webkit-details-marker{display:none}
details.split-panel > summary::after{
  content:"⌄"; flex:none; color:var(--accent-text);
  font-size:22px; line-height:1; transform:translateY(-4px);
  transition:transform .2s ease,color .15s ease;
}
details.split-panel[open] > summary::after{transform:translateY(2px) rotate(180deg)}
details.split-panel > summary:hover{color:var(--text-soft)}
details.split-panel > summary:hover::after{color:var(--text)}
details.split-panel:not([open]) > summary{margin-bottom:0}
details.split-panel:not([open]) > :not(summary){display:none}


.group-label{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-text); font-weight:600; padding:16px 0 4px; border-bottom:1px solid var(--rule-strong)}
.group-label:first-child{padding-top:0}
.line{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:10px 0; border-bottom:1px solid var(--rule)}
.line:last-child{border-bottom:none}
.line-name{font-size:12.5px; color:var(--text-soft); font-weight:500}
.line-name small{display:block; color:var(--text-faint); font-size:10.5px; font-weight:400; margin-top:3px; font-family:var(--mono)}
.line-figure{font-family:var(--mono); font-size:15px; font-weight:500; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.line-figure small{color:var(--text-faint); font-size:11px; display:block; font-weight:400; margin-top:3px}

.derivation{padding:14px 0; border-bottom:1px solid var(--rule)}
.derivation:first-child{padding-top:0}
.derivation:last-child{border-bottom:none; padding-bottom:0}
.derivation-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px}
.derivation-head b{font-size:13px; color:var(--text); font-weight:600; letter-spacing:-.01em}
.derivation-head span{font-family:var(--mono); font-size:11.5px; color:var(--accent-text); white-space:nowrap}
.derivation code{
  display:block; background:var(--surface-sunken); border:1px solid var(--rule); border-radius:8px;
  padding:10px 12px; font-family:var(--mono); font-size:11.5px; color:var(--text);
  overflow-x:auto; white-space:nowrap; line-height:1.7;
}
.derivation code em{color:var(--text-soft); font-style:normal}
.derivation p{margin:10px 0 0; font-size:11.5px; color:var(--text-soft); line-height:1.6}
.derivation p.reading{color:var(--text-soft); font-size:12px; margin:0 0 10px}

/* Symbols defined in the glossary are hoverable wherever they appear. */
.sym{
  color:var(--accent-text); cursor:help; font-weight:600;
  border-bottom:1px dotted var(--accent-underline);
}
.sym:hover,.sym:focus{color:var(--text); border-bottom-color:var(--text); outline:none}
.sym-tip{
  position:fixed; z-index:50; max-width:290px; pointer-events:none; opacity:0;
  background:var(--surface-sunken); border:1px solid var(--rule-strong); border-radius:9px;
  padding:9px 11px; font-size:12px; line-height:1.5; color:var(--text-soft);
  box-shadow:0 8px 24px var(--tip-shadow); transition:opacity .12s ease;
}
.sym-tip.visible{opacity:1}
.sym-tip b{color:var(--accent-text); font-family:var(--mono); display:block; margin-bottom:3px}

.card > summary{cursor:pointer; list-style:none}
.card > summary::-webkit-details-marker{display:none}
.card > summary::after{
  content:"⌄"; flex:none; color:var(--accent-text);
  font-size:22px; line-height:1; transform:translateY(-4px);
  transition:transform .2s ease,color .15s ease;
}
.card[open] > summary::after{transform:translateY(2px) rotate(180deg)}
.card > summary:hover{color:var(--text-soft)}
.card > summary:hover::after{color:var(--text)}

/* Scoped to details: a plain .card has no [open] attribute, so an unscoped
   rule would blank every ordinary card too. A closed details still shows its
   children if they set their own display
   (.line{display:flex}, .split{display:grid}, ...), since an author rule beats
   the UA stylesheet's default. This wins on specificity regardless of what a
   dropdown's content declares. */
details.card:not([open]) > :not(summary){display:none}

.glossary summary{
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--text-faint);
  font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.glossary summary::-webkit-details-marker{display:none}
.glossary summary::after{content:"⌄"; color:var(--accent-text); font-size:15px; line-height:1; transform:translateY(-3px); transition:transform .2s ease}
.glossary[open] summary::after{transform:translateY(1px) rotate(180deg)}
.glossary summary:hover{color:var(--text-soft)}
.glossary dl{margin:15px 0 0}
.glossary dl>div{display:flex; gap:14px; padding:9px 0; border-bottom:1px solid var(--rule)}
.glossary dl>div:last-child{border-bottom:none; padding-bottom:0}
.glossary dt{font-family:var(--mono); font-size:12.5px; color:var(--accent-text); font-weight:600; min-width:64px; flex:none}
.glossary dd{margin:0; font-size:12px; color:var(--text-soft); line-height:1.55}

.alert-box{
  background:var(--negative-wash); border:1px solid var(--negative-wash-edge); color:var(--negative-text);
  font-size:12px; padding:11px 13px; border-radius:9px; margin-top:14px; display:none; line-height:1.5;
}
svg{width:100%; height:auto; display:block}
.caption{font-size:12px; color:var(--text-soft); margin:13px 0 0; line-height:1.6; letter-spacing:-.005em}
.caption b{color:var(--text); font-family:var(--mono); font-weight:600}
.caption .flag{color:var(--negative); font-family:var(--mono); font-weight:600}
.note{font-size:11.5px; color:var(--text-faint); line-height:1.65; margin-top:14px}
.note b{color:var(--text-soft); font-weight:600}
.note+.note{margin-top:11px}