/* ---------- this post: draft note, equations, figures ---------- */
.draft{border:1px dashed var(--line-2);border-radius:10px;padding:10px 14px;font-size:12.5px;line-height:1.55;color:var(--paper-2);background:var(--surface)}
.draft b{color:var(--paper)}
.ph{background:var(--ink-3);border-radius:4px;padding:0 5px;color:var(--paper)}
.prose mjx-container[display="true"]{margin:1.3em 0!important;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.eq-note{font-size:13.5px;line-height:1.6;color:var(--paper-2)}
.where{font-size:13.5px;line-height:1.65;color:var(--paper-2);border-left:2px solid var(--line-2);padding-left:14px}
.callout{background:var(--surface);border-radius:12px;padding:16px 20px;box-shadow:0 0 0 1px var(--line)}
.callout p{margin:0}
.callout p+p{margin-top:.7em}
.callout .k{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal);font-weight:600;display:block;margin-bottom:6px}
.exp{font-size:13px;font-weight:600;color:var(--signal);margin-top:2.8em!important;letter-spacing:.02em}
.exp+.v2{margin-top:.25em!important}

.fig{margin-block:2.2em!important;position:relative}
@media (min-width:1280px){.fig.wide{margin-inline:-6%}}
.plate{position:relative;border-radius:14px;background:#F7FAFB;box-shadow:0 0 0 1px #738A9A;overflow:hidden;isolation:isolate}
.plate canvas{display:block;width:100%;height:100%}
.corner{position:absolute;z-index:2;pointer-events:none;color:#0e131799;font:10.5px/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.corner[data-c=fig]{top:16px;left:18px;color:#0e1317bd}
.corner[data-c=title]{top:16px;right:18px;text-transform:uppercase;letter-spacing:.1em}
.corner[data-c=hint]{bottom:16px;left:18px;text-transform:uppercase;letter-spacing:.1em}
.corner[data-c=readout]{bottom:16px;right:18px;color:#0e1317bd;font-variant-numeric:tabular-nums}
.keys{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font:13px/1.55 var(--mono);color:#0e1317bd}
.key{display:inline-flex;align-items:center;gap:8px}
.key:before{content:"";flex:none;width:8px;height:8px;border:1.5px solid #435565;border-radius:1.5px;transform:rotate(45deg) skew(-12deg,-12deg)}
.key[data-m=red]:before{border-color:#D65148;background:#D6514824}
.key[data-m=fill]:before{background:#435565}
.figcap{margin-top:10px;font-size:13px;line-height:1.55;color:var(--paper-2)}
.figcap b{color:var(--paper)}
.ctrls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:14px;font-size:12.5px;color:var(--paper-2)}
.ctrls label{display:inline-flex;align-items:center;gap:8px}
.ctrls output{color:var(--paper);font-variant-numeric:tabular-nums;min-width:6ch;display:inline-block}
.ctrls input[type=range]{width:140px;accent-color:var(--flare)}
.seg{display:inline-flex;border-radius:999px;background:rgba(14,19,23,.06);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-size:12px;border:0;background:transparent;color:var(--paper-2);padding:6px 11px;border-radius:999px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.tbtn{font:600 12px/1 var(--mono);border:0;border-radius:999px;background:var(--paper);color:var(--ink);padding:9px 14px;cursor:pointer}
.tbtn:hover{background:var(--flare);color:#0E1317}
.scrub{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12.5px;color:var(--paper-2)}
.scrub input{flex:1;min-width:0;accent-color:var(--flare)}
.scrub output{min-width:13ch;text-align:right;color:var(--paper);font-variant-numeric:tabular-nums}
.setup{position:absolute;top:12px;right:12px;z-index:5;font-size:12px}
.setup>summary{list-style:none;cursor:pointer;padding:4px 11px 4px 8px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line-2);color:var(--paper);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.setup>summary::-webkit-details-marker{display:none}
.setup>summary:before{content:"i";display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--signal);color:#fff;font:italic 700 10px/1 Georgia,serif}
.setup[open]>summary{background:var(--paper);color:var(--ink)}
.setup-body{position:absolute;right:0;top:calc(100% + 6px);width:min(440px,calc(100vw - 48px));background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--line-2),0 18px 50px rgba(40,55,68,.16);padding:12px 16px;font-size:12.5px;line-height:1.55;color:var(--paper)}
.setup-body ul{margin:0;padding-left:1.1em}
.setup-body li+li{margin-top:4px}
.setup-body b{font-weight:600}
.panels{display:grid;gap:14px}
.p3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p2{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel{display:flex;flex-direction:column;gap:6px;min-width:0}
.panel .pt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-3)}
.panel canvas{width:100%;display:block;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.sq{aspect-ratio:1/1}
.panel .pv{font-size:12px;color:var(--paper-2);font-variant-numeric:tabular-nums}
.ramp{height:8px;border-radius:2px;background:linear-gradient(90deg,#1a1423,#3a2240,#6b3050,#a64b4e,#dc8a5a,#fbe5a8)}
.dramp{height:8px;border-radius:2px;background:linear-gradient(90deg,#3e6898,#f3f3f1,#a3473a)}
.figbox{background:#F7FAFB;border-radius:14px;box-shadow:0 0 0 1px #738A9A;padding:20px;position:relative}
.figbox .ft{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#0e131799;display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;padding-right:90px}
.figbox .ft b{font-weight:400;color:#0e1317bd;letter-spacing:.04em;text-transform:none}
.stack svg{width:100%;height:auto;display:block}
.stack text{font-family:var(--mono)}
.big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.big3>div{background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--line);padding:10px 12px}
.big3 .l{font-size:11px;color:var(--paper-3);letter-spacing:.06em;text-transform:uppercase}
.big3 .v{font-size:22px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto;border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.tbl table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.5;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-3);background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.us td{background:rgba(214,81,72,.07)}
.tbl tr.tot td{background:var(--surface-2);font-weight:600}
.tbl td small{display:block;color:var(--paper-3);font-size:11.5px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--paper);vertical-align:-1px}
.dot.f{background:var(--paper)}
.dot.h{background:linear-gradient(90deg,var(--paper) 50%,transparent 50%)}
.mx td:not(:first-child),.mx th:not(:first-child){text-align:center}
.barcell{display:flex;align-items:center;gap:8px;min-width:9.5rem}
.barcell i{display:block;height:7px;border-radius:2px;background:var(--slate);flex:none}
.barcell i.mx{background:var(--flare)}
.maps img{width:100%;aspect-ratio:1/1;image-rendering:pixelated;display:block;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.tchart svg{display:block;width:100%;min-width:560px;height:auto}
.tchart{overflow-x:auto}
.tchart text{font-family:var(--mono);font-size:11px;fill:rgba(14,19,23,.74)}
@media (max-width:700px){
  .p3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .p2,.big3{grid-template-columns:minmax(0,1fr)}
  .ctrls input[type=range]{width:110px}
  .figbox{padding:14px}
}
/* ---------- v5 charts ---------- */
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text,#f3s text{font-family:var(--mono)}
.figbox .ft{padding-right:0;flex-wrap:wrap}
.big2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.big2>div{background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--line);padding:10px 12px;display:grid;gap:2px}
.big2 .l{font-size:11px;color:var(--paper-3);letter-spacing:.06em;text-transform:uppercase}
.big2 .v{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums}
.f3grid{align-items:center}
.f3c{display:grid;gap:12px;margin-top:0}
.f3c label{display:grid;grid-template-columns:10.5em minmax(0,1fr) 6.5em;align-items:center;gap:10px}
.f3c input[type=range]{width:100%}
.f3c .tbtn{justify-self:start}
#f3s{width:100%;height:auto;display:block}
.pv b{color:var(--paper)}
.f4wrap{display:grid;gap:18px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:start}
.f4maps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f4maps .pv{font-size:11.5px}
@media (max-width:700px){.f4wrap{grid-template-columns:minmax(0,1fr)}}
.f3c{display:grid;gap:10px;margin-top:14px}
.f5grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.f5grid img{width:100%;aspect-ratio:1/1;display:block;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.f5grid .pt{font-size:10.5px}
@media (max-width:700px){.f5grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.figbox p.pv{font-size:13px;line-height:1.55;color:var(--paper);margin:8px 0 0}

.three-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0}.three-stages>div{padding:18px;border:1px solid #d4dadd;border-top:3px solid #435565;border-radius:6px}.three-stages>div:last-child{border-top-color:#a8392f}.three-stages small{font:10px/1.5 monospace;letter-spacing:.06em}.three-stages h3{font-size:18px!important;margin:10px 0!important}.three-stages p{font-size:14px;line-height:1.65;margin:0}.flow-input{font-size:14px;line-height:1.7}.simple-equation{background:#f1f3f3;padding:20px 24px;border-left:3px solid #435565;font:15px/1.9 monospace;margin:24px 0;overflow-wrap:anywhere}.reference-notes{border-top:1px solid #d4dadd;margin-top:40px;padding-top:16px}.reference-notes p{font-size:13px;line-height:1.65}.prose h3{margin-top:32px}.figcap{overflow-wrap:anywhere}@media(max-width:650px){.three-stages{grid-template-columns:1fr}.simple-equation{font-size:12px;padding:16px}}

/* ---------- bullets, Fig 1 animation ---------- */
.prose ul{margin-top:.5em}
.prose p+ul{margin-top:.45em}
.prose .tbl th small{display:block;text-transform:none;letter-spacing:0;font-size:11px}
.steps{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.steps li{font:600 11.5px/1 var(--mono);padding:8px 11px;border-radius:999px;background:rgba(14,19,23,.06);color:var(--paper-2);cursor:pointer;user-select:none;transition:background .25s,color .25s}
.steps li+li{margin-top:0!important}
.steps li[aria-current="step"]{background:var(--paper);color:var(--ink)}
.steps li.done{background:rgba(214,81,72,.14);color:var(--paper)}
#f0{display:block;width:100%;height:auto}
.f0status{font-size:13.5px!important;line-height:1.55;color:var(--paper);margin:10px 0 0!important;min-height:3.1em}
.f0meter{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12px;color:var(--paper-2)}
.f0meter[hidden]{display:none}
.f0meter .mbar{position:relative;flex:1;height:8px;border-radius:4px;background:rgba(14,19,23,.08);overflow:hidden}
.f0meter .mbar i{position:absolute;left:0;top:0;bottom:0;background:var(--flare);border-radius:4px}
.f0meter .mbar em{position:absolute;top:-2px;bottom:-2px;left:3.3%;width:2px;background:var(--paper)}
.f0meter output{min-width:5.5ch;text-align:right;color:var(--paper);font-variant-numeric:tabular-nums}
.f0ctl{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px;color:var(--paper-3)}
@media (max-width:520px){.steps li{font-size:10.5px;padding:7px 9px}}
.tldr{margin:0 0 2em;padding:18px 22px;border-radius:10px;background:rgba(14,19,23,.05);box-shadow:inset 3px 0 0 var(--flare)}
.tldr>b{display:block;font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper-2);margin-bottom:10px}
.tldr ul{margin:0!important}

.key[data-m=steel]:before{border-color:#738A9A;background:#738A9A}

.f6keys .lk{display:inline-flex;align-items:center;gap:7px}.f6keys svg{flex:none}
.cmapwrap{border-radius:8px;overflow:hidden}.cmap{display:block;width:100%;height:auto;border-radius:8px}#complex-layout-maps td{white-space:nowrap}
.prose .references{overflow-wrap:anywhere}.prose .fig img{max-width:100%;height:auto}
