@font-face { font-family: "Bricolage Grotesque"; src: url("./assets/fonts/BricolageGrotesque.woff2") format("woff2"); font-display: swap; font-weight: 100 900; }
@font-face { font-family: "Inter"; src: url("./assets/fonts/Inter.woff2") format("woff2"); font-display: swap; font-weight: 100 900; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/fonts/JetBrainsMono.woff2") format("woff2"); font-display: swap; font-weight: 100 900; }

:root {
  color-scheme: dark;
  --g: #4ecd89;
  --g-2: #6ce8a3;
  --g-soft: rgba(78, 205, 137, .55);
  --g-dim: rgba(78, 205, 137, .22);
  --g-ink: rgba(78, 205, 137, .075);
  --bg: #0a0a0c;
  --panel: #121215;
  --panel-2: #17171b;
  --panel-el: #1c1c21;
  --hover-surface: #1a201d;
  --hover-surface-strong: #202823;
  --field-bg: #0d0d10;
  --border: #26262c;
  --border-strong: #34343c;
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, .95);
  --ink-3: rgba(255, 255, 255, .58);
  --ink-4: rgba(255, 255, 255, .48);
  --ink-5: rgba(255, 255, 255, .12);
  --platinum: #d5d9e2;
  --error: #e5786b;
  --warn: #e0a530;
  --disp: "Bricolage Grotesque", "Inter", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 4px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { min-height: 100%; scrollbar-width: thin; scrollbar-color: var(--g-dim) transparent; }
body { min-height: 100%; margin: 0; overflow: hidden; color: var(--ink-2); background: var(--bg); font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.45; }
button, input, select { font: inherit; }
button, select, summary, input[type="checkbox"] { cursor: pointer; }
a { color: inherit; text-decoration: none; }
em { color: var(--g); font-style: normal; }
:focus-visible { outline: 2px solid var(--g); outline-offset: 3px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-soft); }

.skip-link { position: fixed; z-index: 100; left: 18px; top: 12px; min-height: 44px; display: flex; align-items: center; transform: translateY(-180%); padding: 10px 14px; color: #000; background: var(--g); font: 500 11px/1 var(--sans); letter-spacing: .04em; }
.skip-link:focus { transform: translateY(0); }

.corner { position: fixed; z-index: 40; color: var(--ink-3); font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: lowercase; }
.corner.tl { top: 15px; left: 22px; }
.corner.bl { bottom: 15px; left: 22px; }
.corner.br { bottom: 15px; right: 22px; font-variant-numeric: tabular-nums; }
.corner.tl a { min-width: 61px; min-height: 44px; display: flex; align-items: flex-start; }
.corner-logo { display: block; width: auto; height: 15px; object-fit: contain; object-position: left center; }

.app-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; width: 100vw; height: 100vh; padding: 42px 20px 38px; }
.app-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0 10px; border-bottom: 1px solid var(--border); background: transparent; }
.brand-lockup { min-width: 0; }
h1 { margin: 0; overflow: hidden; color: var(--ink); font: 500 clamp(18px, 1.8vw, 25px)/1 var(--disp); font-variation-settings: "opsz" 26, "wdth" 96; letter-spacing: -.02em; white-space: nowrap; text-overflow: ellipsis; }
.header-tools { display: flex; align-items: end; gap: 6px; }
.preset-control { width: 190px; display: grid; gap: 3px; color: var(--ink-4); font: 400 10px/1 var(--sans); letter-spacing: .04em; text-transform: lowercase; }
.preset-control select { min-height: 44px; }
.tool-button { min-width: 58px; min-height: 44px; padding: 0 10px; border: 1px solid transparent; border-radius: 2px; color: var(--ink-3); background: transparent; font: 400 11px/1 var(--sans); letter-spacing: .04em; text-transform: lowercase; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.tool-button:hover { color: var(--ink); border-color: var(--g-dim); background: var(--hover-surface); }

.workspace { min-height: 0; display: grid; grid-template-columns: minmax(320px, 365px) minmax(0, 1fr); gap: 12px; }
.control-panel, .results { min-width: 0; min-height: 0; overflow: hidden; }
.control-panel { border: 1px solid var(--border); border-radius: 0; background: var(--panel); }
.control-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.results { overflow-y: auto; padding-right: 3px; scroll-behavior: smooth; }
.panel-scroll { min-height: 0; overflow-y: auto; padding: 16px; }

.input-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.input-tab { min-height: 40px; border: 0; border-bottom: 1px solid transparent; color: var(--ink-4); background: transparent; font: 400 11px/1 var(--sans); letter-spacing: .04em; text-transform: lowercase; }
.input-tab:hover { color: var(--ink-2); background: var(--hover-surface); }
.input-tab.active { color: var(--g); border-color: var(--g); background: var(--g-ink); }

.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.panel-heading h2 { margin: 2px 0 0; color: var(--ink); font: 500 21px/1.1 var(--disp); font-variation-settings: "opsz" 22; letter-spacing: -.015em; }
.kicker, .section-label, .modal-kicker { display: block; color: var(--ink-4); font: 400 10px/1.3 var(--sans); letter-spacing: .05em; text-transform: lowercase; }
.panel-total { color: var(--g); font: 300 12px/1.2 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel-note { margin: -5px 0 15px; color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.assumption-note { display: grid; gap: 4px; margin: 0 0 14px; padding: 11px 0; border-block: 1px solid var(--border); }
.assumption-note strong { color: var(--g); font: 400 11px/1.3 var(--sans); }
.assumption-note span { color: var(--ink-4); font-size: 10px; line-height: 1.5; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.form-grid .wide { grid-column: 1 / -1; }
.field { min-width: 0; display: grid; gap: 5px; color: var(--ink-3); font: 300 11px/1.25 var(--sans); }
.field > span:first-child { min-height: 14px; }
.field-hint { display: none; }
select, input[type="text"] { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 2px; outline: 0; color: var(--ink); background-color: var(--field-bg); font-size: 13px; font-weight: 300; font-variant-numeric: tabular-nums; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
select { appearance: none; color-scheme: dark; padding-right: 36px; border-radius: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23d5d9e2' stroke-opacity='.62' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
select:not(:disabled):hover { color: var(--ink); border-color: var(--g-dim); background-color: var(--hover-surface-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%234ecd89' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); box-shadow: inset 0 0 0 1px var(--g-ink); }
input[type="text"]:hover { border-color: var(--g-dim); background-color: var(--hover-surface-strong); box-shadow: inset 0 0 0 1px var(--g-ink); }
select:focus, select:open, input[type="text"]:focus { border-color: var(--g); box-shadow: 0 0 0 1px var(--g-dim); }
select:focus, select:open { background-color: var(--panel-el); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 6 4-4 4 4' fill='none' stroke='%234ecd89' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
select:disabled, input[type="text"]:disabled { cursor: not-allowed; opacity: .46; }
select:invalid, input[type="text"]:invalid { border-color: var(--error); }
select option, select optgroup { color: var(--ink-2); background-color: var(--panel-el); font-family: var(--sans); font-size: 13px; font-weight: 300; }
select option:checked { color: var(--bg); background: linear-gradient(var(--g), var(--g)); }
select option:disabled { color: var(--ink-4); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px var(--field-bg) inset; }

.range-field { gap: 3px; }
.field:hover > span:first-child, .range-field:hover .range-heading label { color: var(--ink-2); }
.range-heading { min-width: 0; min-height: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.range-heading label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.range-heading output { flex: none; color: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 32px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--g) 0 var(--range-progress), var(--border-strong) var(--range-progress) 100%); }
input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -6px; appearance: none; border: 2px solid var(--panel); border-radius: 50%; background: var(--g); box-shadow: 0 0 0 1px var(--g-dim); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 99px; background: var(--border-strong); }
input[type="range"]::-moz-range-progress { height: 3px; border-radius: 99px; background: var(--g); }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid var(--panel); border-radius: 50%; background: var(--g); box-shadow: 0 0 0 1px var(--g-dim); }
input[type="range"]:focus-visible { outline: 0; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--g-dim); }

.subsection { margin-top: 18px; border-top: 1px solid var(--border); }
.subsection > summary { min-height: 46px; display: flex; align-items: center; gap: 8px; color: var(--ink-3); list-style: none; font: 400 11px/1 var(--sans); letter-spacing: .04em; text-transform: lowercase; transition: color .2s var(--ease), background-color .2s var(--ease); }
.subsection > summary:hover { color: var(--ink-2); background: var(--hover-surface); }
.subsection > summary::-webkit-details-marker, .editor-row > summary::-webkit-details-marker { display: none; }
.subsection > summary::before, .editor-row > summary::before { content: "+"; color: var(--ink-4); font-family: var(--sans); }
.subsection[open] > summary::before, .editor-row[open] > summary::before { content: "−"; color: var(--g); }
.subsection-body { padding-bottom: 4px; }

.editor-row { border-top: 1px solid var(--border); }
.editor-row:first-of-type { border-top: 0; }
.editor-summary { min-height: 56px; display: flex; align-items: center; gap: 9px; list-style: none; transition: background-color .2s var(--ease); }
.editor-summary:hover { background: var(--hover-surface); }
.editor-summary-main { min-width: 0; display: grid; gap: 2px; }
.editor-summary-main strong { overflow: hidden; color: var(--ink-2); font: 400 14px/1.2 var(--disp); font-variation-settings: "opsz" 15; text-overflow: ellipsis; white-space: nowrap; }
.editor-summary-main span { color: var(--ink-4); font: 400 10px/1.3 var(--sans); letter-spacing: .02em; }
.editor-amount { margin-left: auto; color: var(--platinum); font: 300 10px/1 var(--sans); font-variant-numeric: tabular-nums; }
.editor-body { padding: 3px 0 17px 17px; }
.editor-actions { display: flex; justify-content: flex-end; margin-top: 11px; }
.editor-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.editor-tools .button { min-height: 40px; background: transparent; }
.check-field { min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 8px 0; border-block: 1px solid var(--border); color: var(--ink-3); font-size: 11px; transition: color .2s var(--ease), background-color .2s var(--ease); }
.check-field input { appearance: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; border: 1px solid var(--border-strong); border-radius: 2px; background-color: var(--field-bg); background-position: center; background-repeat: no-repeat; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.check-field:hover { color: var(--ink-2); background: var(--hover-surface); }
.check-field:hover input { border-color: var(--g-dim); }
.check-field input:checked { border-color: var(--g); background-color: var(--g); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='m1.5 5 3 3 6-6.5' fill='none' stroke='%230a0a0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check-field input:disabled { cursor: not-allowed; opacity: .46; }
.shared-terms { margin: 0 0 18px; padding: 14px 0; border-block: 1px solid var(--border-strong); }
.shared-terms-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.shared-terms-heading h3 { margin: 2px 0 0; color: var(--ink-2); font: 400 15px/1.2 var(--disp); font-variation-settings: "opsz" 16; }
.shared-terms-heading > span { color: var(--ink-4); font-size: 10px; }
.shared-checks { border-top: 1px solid var(--border); }
.shared-checks .check-field { min-height: 40px; border: 0; border-bottom: 1px solid var(--border); }
.shared-term-values { margin-top: 13px; }
.shared-terms-note, .holder-terms-note { margin: 11px 0 0; color: var(--ink-4); font-size: 10px; line-height: 1.5; }
.holder-terms { margin-top: 13px; padding-top: 2px; border-top: 1px solid var(--border); }
.holder-terms > .check-field { border-top: 0; }
.individual-terms { margin-top: 10px; }
.individual-terms-label { display: block; margin-bottom: 7px; color: var(--ink-4); font-size: 10px; letter-spacing: .04em; text-transform: lowercase; }
.button { min-height: 44px; padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 2px; color: var(--ink-3); background: var(--panel-2); font: 400 11px/1 var(--sans); letter-spacing: .04em; text-transform: lowercase; }
.button:hover { color: var(--ink); border-color: var(--g-dim); background: var(--hover-surface-strong); }
.button.danger { color: var(--error); }
.add-row { width: 100%; margin-top: 12px; }

#results-content { padding: 2px 0 18px; }
.result-layout { display: flex; flex-direction: column; }
.result-layout > .visual-grid { order: 1; }
.result-layout > .result-tabs { order: 2; }
.result-layout > .result-tab-panel { order: 3; }
.result-layout > .result-tab-detail { order: 4; }
.result-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 14px; }
.result-header h2 { margin: 2px 0 4px; color: var(--ink); font: 500 clamp(20px, 2vw, 29px)/1.05 var(--disp); font-variation-settings: "opsz" 30, "wdth" 97; letter-spacing: -.025em; }
.result-header p { max-width: 68ch; margin: 0; color: var(--ink-3); font-size: 12px; }
.alerts { display: grid; gap: 6px; margin-bottom: 12px; }
.alert { padding: 9px 11px; border-block: 1px solid rgba(224,165,48,.3); color: var(--ink-3); background: rgba(224,165,48,.04); font-size: 11px; }
.alert.danger { border-color: var(--error); background: rgba(229,120,107,.06); }
.alert.success { border-color: var(--g); background: var(--g-ink); }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--border); }
.metric { min-width: 0; padding: 13px 14px; border-right: 1px solid var(--border); transition: background-color .2s var(--ease); }
.metric:hover { background: var(--hover-surface); }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric span { display: block; overflow: hidden; color: var(--ink-4); font: 400 10px/1.3 var(--sans); letter-spacing: .04em; text-transform: lowercase; text-overflow: ellipsis; white-space: nowrap; }
.metric strong { display: block; margin-top: 4px; color: var(--ink); font: 500 clamp(20px, 2.3vw, 34px)/1 var(--disp); font-variation-settings: "opsz" 34, "wdth" 95; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.metric.primary strong { color: var(--g); }

.visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 12px; border-top: 1px solid var(--border); }
.viz-panel { min-width: 0; height: 252px; padding: 16px 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.viz-panel:nth-child(2) { border-right: 1px solid var(--border); }
.visual-grid > .viz-panel:first-child { grid-column: 1 / -1; height: auto; }
.visual-grid > .viz-panel:first-child .chart { height: 182px; }
.class-panel { grid-column: 1 / -1; height: 292px; }
.outcome-panel { width: 100%; height: auto; padding-block: 13px; border-top: 1px solid var(--border); }
.ownership-panel { padding: 14px 0 13px; border-top: 1px solid var(--border); }
.ownership-list { margin: 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.ownership-row { min-height: 62px; display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(130px, .9fr) minmax(170px, 1fr); align-items: center; gap: 16px; border-bottom: 1px solid var(--border); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.ownership-row:hover { border-color: var(--g-dim); background: var(--hover-surface); }
.ownership-row > div:first-child, .ownership-row > div:last-child { min-width: 0; }
.ownership-row > div:last-child { text-align: right; }
.ownership-row strong { display: block; overflow: hidden; color: var(--ink-2); font-size: 11px; font-weight: 300; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.ownership-row span { display: block; margin-top: 2px; overflow: hidden; color: var(--ink-4); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ownership-bar { height: 4px; overflow: hidden; background: var(--ink-5); }
.ownership-bar span { height: 100%; margin: 0; background: var(--g); }
.visual-grid > .viz-panel:last-child { grid-column: 1 / -1; }
.viz-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.viz-heading h3, .table-heading h3 { margin: 2px 0 0; color: var(--ink); font: 400 16px/1.1 var(--disp); font-variation-settings: "opsz" 17; letter-spacing: -.01em; }
.viz-heading p, .table-heading p { margin: 0; color: var(--ink-4); font: 400 10px/1.35 var(--sans); text-align: right; }
.chart { width: 100%; height: 192px; display: block; overflow: visible; }
.chart text { font-family: var(--sans); font-weight: 300; }
.chart .axis { stroke: var(--border-strong); stroke-width: 1; }
.chart .gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 5; }
.chart .label { fill: var(--ink-4); font-size: 9px; }
.chart .value { fill: var(--ink-3); font-size: 9px; }
.chart .mint { fill: var(--g); stroke: var(--g); }
.chart .platinum { fill: var(--platinum); stroke: var(--platinum); }
.chart .ghost { fill: rgba(255,255,255,.18); stroke: rgba(255,255,255,.18); }
.chart .line { fill: none; stroke: var(--g); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .area { fill: url(#areaFade); }
.chart .point { fill: var(--bg); stroke: var(--g); stroke-width: 1.5; }

.bridge-equation { min-height: 105px; display: grid; grid-template-columns: minmax(130px, .9fr) 28px minmax(210px, 1.35fr) 28px minmax(130px, .9fr); align-items: stretch; }
.bridge-node { display: grid; align-content: center; gap: 7px; padding: 12px 14px; border-block: 1px solid var(--border-strong); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.bridge-node:hover { border-color: var(--g-dim); background: var(--hover-surface); }
.bridge-node span, .bridge-adjustments header span { color: var(--ink-4); font: 400 10px/1.3 var(--sans); letter-spacing: .04em; text-transform: lowercase; }
.bridge-node strong { color: var(--platinum); font: 500 clamp(23px, 2.3vw, 36px)/1 var(--disp); font-variation-settings: "opsz" 36, "wdth" 95; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.bridge-node.final { border-color: var(--g-dim); text-align: right; }
.bridge-node.final strong { color: var(--g); }
.bridge-operator { display: grid; place-items: center; color: var(--ink-4); font: 300 18px/1 var(--sans); }
.bridge-adjustments { min-width: 0; border-block: 1px solid var(--border); }
.bridge-adjustments header, .bridge-adjustment { min-height: 27px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.bridge-adjustment { transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.bridge-adjustment:hover { border-color: var(--g-dim); background: var(--hover-surface); }
.bridge-adjustments header strong, .bridge-adjustment strong { color: var(--ink-2); font: 300 10px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bridge-adjustment span { overflow: hidden; color: var(--ink-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.bridge-adjustment:last-child { border-bottom: 0; }
.bridge-adjustment.empty span { color: var(--ink-4); }
.positive { color: var(--g) !important; }
.negative { color: var(--error) !important; }
.contingent-strip { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); color: var(--ink-4); font: 400 10px/1.3 var(--sans); }
.contingent-strip strong { color: var(--ink-2); font-weight: 400; }
.equation-sign { color: var(--g); }

.class-comparison { margin: 0; padding: 0; border-top: 1px solid var(--border); list-style: none; }
.class-compare-row { min-height: 31px; display: grid; grid-template-columns: minmax(185px, 1.25fr) repeat(2, minmax(145px, 1fr)); align-items: center; gap: 15px; border-bottom: 1px solid var(--border); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.class-compare-row:hover { border-color: var(--g-dim); background: var(--hover-surface); }
.class-identity { min-width: 0; display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 9px; align-items: center; }
.class-identity > span:last-child { min-width: 0; }
.class-identity strong { display: block; overflow: hidden; color: var(--ink-2); font-size: 11px; font-weight: 300; text-overflow: ellipsis; white-space: nowrap; }
.class-identity small { display: block; margin-top: 1px; overflow: hidden; color: var(--ink-4); font: 400 10px/1.25 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.class-swatch { width: 6px; height: 6px; border-radius: 50%; }
.compare-value { min-width: 0; }
.compare-label { display: flex; align-items: baseline; justify-content: space-between; gap: 7px; }
.compare-label span { overflow: hidden; color: var(--ink-4); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.compare-label strong { flex: none; color: var(--ink-2); font-size: 10px; font-weight: 300; font-variant-numeric: tabular-nums; }
.compare-track { height: 4px; overflow: hidden; margin-top: 3px; background: var(--ink-5); }
.compare-track span { display: block; height: 100%; }
.compare-value.initial .compare-track span { background: var(--platinum); }
.compare-value.exit .compare-track span { background: var(--g); }
.mint { background: var(--g); }
.platinum { background: var(--platinum); }
.mint-soft { background: rgba(78,205,137,.62); }
.platinum-soft { background: rgba(213,217,226,.58); }
.mint-dim { background: rgba(78,205,137,.34); }
.platinum-dim { background: rgba(213,217,226,.28); }
.empty-state { color: var(--ink-4); font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }

.result-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; border-block: 1px solid var(--border); }
.result-tab { min-height: 44px; border: 0; border-right: 1px solid var(--border); color: var(--ink-4); background: transparent; font: 400 11px/1 var(--sans); letter-spacing: .025em; text-transform: lowercase; }
.result-tab:last-child { border-right: 0; }
.result-tab:hover { color: var(--ink-2); background: var(--hover-surface); }
.result-tab.active { color: var(--g); background: var(--g-ink); box-shadow: inset 0 -1px 0 var(--g); }
.result-tab-panel, .result-tab-detail { min-width: 0; }

.payout-section { margin-top: 12px; border-top: 1px solid var(--border); }
.table-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 13px 0 8px; }
.table-wrap { overflow: auto; max-height: 245px; border-top: 1px solid var(--border); }
.table-scroll-cue { display: none; margin-bottom: 7px; color: var(--ink-3); text-align: right; }
table { width: 100%; border-collapse: collapse; color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; white-space: nowrap; }
tbody tr { transition: background-color .2s var(--ease); }
tbody tr:hover { background: var(--hover-surface); }
th:first-child, td:first-child { padding-left: 0; text-align: left; }
th:last-child, td:last-child { padding-right: 0; }
thead th { position: sticky; z-index: 2; top: 0; color: var(--ink-4); background: var(--panel); font: 400 10px/1 var(--sans); letter-spacing: .04em; text-transform: lowercase; }
td strong { color: var(--ink-2); font-weight: 300; }
.subtext { display: block; margin-top: 2px; color: var(--ink-4); font-size: 10px; }
.money { color: var(--ink-2); font-family: var(--sans); }
tfoot td { color: var(--ink); border-top: 1px solid var(--border-strong); border-bottom: 0; font-family: var(--sans); }
.allocation-meter { width: 72px; height: 3px; margin-left: auto; overflow: hidden; background: var(--ink-5); }
.allocation-meter span { display: block; height: 100%; background: var(--g); }

.modal { width: min(720px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--ink-2); background: var(--panel-el); box-shadow: 0 28px 90px rgba(0,0,0,.75); }
.modal::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(6px); }
.modal-frame { max-height: inherit; display: grid; grid-template-rows: auto minmax(0, 1fr); margin: 0; }
.modal header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--border); background: var(--panel-el); }
.modal h2 { margin: 4px 0 0; color: var(--ink); font: 500 25px/1 var(--disp); font-variation-settings: "opsz" 26; letter-spacing: -.02em; }
.modal-close { width: 44px; height: 44px; color: var(--ink-3); background: transparent; border: 1px solid var(--border); border-radius: 50%; font-size: 24px; font-weight: 200; }
.modal-close:hover { color: var(--g); border-color: var(--g-dim); background: var(--hover-surface-strong); }
.modal-content { min-height: 0; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; padding: 22px; }
.explainers { display: grid; gap: 0; }
.explainer { padding: 15px 0; border-top: 1px solid var(--border); }
.explainer:first-child { padding-top: 0; border-top: 0; }
.explainer h3 { margin: 0 0 5px; color: var(--ink-2); font: 400 15px/1.2 var(--disp); }
.explainer p { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.65; }
.explainer a { color: var(--g); text-decoration: underline; text-underline-offset: 3px; }
.disclaimer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--ink-4); font-size: 11px; line-height: 1.6; }
.linkedin-modal { width: min(760px, calc(100vw - 28px)); }
.linkedin-preview-frame { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.linkedin-preview { min-height: 0; overflow: auto; padding: 14px; background: #050506; }
.linkedin-preview img { width: min(100%, 540px); height: auto; display: block; margin: 0 auto; border: 1px solid var(--border); }
.linkedin-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--panel-el); }
.linkedin-actions p { margin: 0; color: var(--ink-3); font-size: 11px; }
.linkedin-actions .button { flex: none; min-width: 140px; display: grid; place-items: center; }
.mobile-footer { display: none; }
.mobile-jump-nav { display: none; }

.dot-cur { display: none; position: fixed; z-index: 80; top: 0; left: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; pointer-events: none; transform: translate3d(-100px,-100px,0); }
.dot-cur::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--g); transform: scale(1); transition: transform .2s var(--ease), background-color .2s var(--ease); }
html.has-dot .dot-cur { display: block; }
html.has-dot, html.has-dot *, html.has-dot *::before, html.has-dot *::after { cursor: none !important; }
html.has-dot input[type="range"]::-webkit-slider-runnable-track, html.has-dot input[type="range"]::-webkit-slider-thumb { cursor: none !important; }
html.has-dot input[type="range"]::-moz-range-track, html.has-dot input[type="range"]::-moz-range-thumb { cursor: none !important; }
html.has-dot dialog::backdrop, html.has-dot ::-webkit-scrollbar, html.has-dot ::-webkit-scrollbar-thumb { cursor: none !important; }
body.hoverable .dot-cur::after { background: rgba(78,205,137,.28); transform: scale(5); }

@media (max-width: 1150px) {
  .visual-grid { grid-template-columns: 1fr; }
  .viz-panel:nth-child(2) { border-right: 0; }
  .viz-panel, .visual-grid > .viz-panel:first-child, .visual-grid > .viz-panel:last-child { grid-column: auto; height: 242px; }
  .class-panel { grid-column: auto; height: 292px; }
  .outcome-panel { height: auto; }
  .viz-panel .chart, .visual-grid > .viz-panel:first-child .chart { height: 182px; }
}

@media (max-width: 960px) {
  body { overflow: auto; }
  .corner.bl, .corner.br { display: none; }
  .app-shell { width: auto; height: auto; min-height: 100dvh; padding: 42px 12px calc(78px + env(safe-area-inset-bottom)); }
  .app-header { align-items: stretch; flex-direction: column; }
  .header-tools { flex-wrap: wrap; }
  .preset-control { flex: 1 1 220px; }
  .header-tools .tool-button:nth-of-type(2), .header-tools .tool-button:nth-of-type(3) { display: block; }
  .workspace { grid-template-columns: 1fr; }
  .control-panel { height: min(72dvh, 620px); min-height: 0; scroll-margin-top: 64px; }
  .results { overflow: visible; padding-right: 0; }
  .result-layout > .result-tabs { order: 1; }
  .result-layout > .result-tab-panel { order: 2; }
  .result-layout > .visual-grid { order: 3; }
  .result-layout > .result-tab-detail { order: 4; }
  .panel-scroll { max-height: none; overscroll-behavior: contain; }
  .input-tab, .shared-checks .check-field, input[type="range"] { min-height: 44px; height: 44px; }
  .editor-tools .button { min-height: 44px; }
  .table-wrap { overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
  #results { scroll-margin-top: 64px; }
  .mobile-jump-nav { position: fixed; z-index: 50; right: 12px; bottom: max(8px, env(safe-area-inset-bottom)); left: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-strong); background: var(--panel-el); }
  .mobile-jump-nav a { min-height: 44px; display: grid; place-items: center; color: var(--ink-3); font: 400 11px/1 var(--sans); letter-spacing: .04em; text-transform: lowercase; }
  .mobile-jump-nav a + a { border-left: 1px solid var(--border-strong); }
  .mobile-jump-nav a:hover, .mobile-jump-nav a:focus-visible { color: var(--g); background: var(--hover-surface-strong); }
  .mobile-footer { display: block; padding: 12px 2px 20px; color: var(--ink-3); font-size: 10px; }
  .modal { max-height: calc(100dvh - 24px); }
  .modal-content { max-height: none; }
  .linkedin-actions { align-items: stretch; flex-direction: column; gap: 8px; }
}

@media (max-width: 620px) {
  .corner.tl { left: 16px; }
  .app-shell { padding-inline: 16px; }
  .app-header { gap: 12px; padding: 12px 0; }
  h1 { font-size: 17px; }
  .header-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .preset-control { width: auto; grid-column: 1 / -1; }
  .tool-button { min-width: 0; padding-inline: 4px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric { border-bottom: 1px solid var(--border); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(n+3) { border-bottom: 0; }
  .metric:nth-child(3) { padding-left: 0; }
  .metric span { overflow: visible; min-height: 2.6em; text-overflow: clip; white-space: normal; }
  .visual-grid { grid-template-columns: 1fr; }
  .viz-panel, .visual-grid > .viz-panel:first-child { grid-column: auto; height: 236px; }
  .class-panel { height: auto; }
  .viz-heading { display: grid; gap: 6px; }
  .viz-heading p { text-align: left; }
  .class-compare-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 9px 0; }
  .class-identity { grid-column: 1 / -1; }
  .class-identity strong, .class-identity small { overflow: visible; text-overflow: clip; white-space: normal; }
  .compare-label { align-items: start; flex-direction: column; }
  .class-identity small, .ownership-row span, .subtext { color: var(--ink-3); font-size: 10px; }
  .metric span, .viz-heading p, .table-heading p { color: var(--ink-3); font-size: 11px; }
  .editor-summary-main span { color: var(--ink-3); font-size: 11px; }
  .assumption-note span, .shared-terms-note, .holder-terms-note, .disclaimer { color: var(--ink-3); font-size: 12px; line-height: 1.55; }
  .shared-terms-heading > span { color: var(--ink-3); }
  .ownership-row { grid-template-columns: minmax(0, 1fr) minmax(105px, .7fr); gap: 9px; padding: 9px 0; }
  .ownership-row .ownership-bar { display: none; }
  .compare-label span { display: block; overflow: visible; text-overflow: clip; white-space: normal; }
  .table-scroll-cue { display: block; }
  .table-wrap th:first-child, .table-wrap td:first-child { position: sticky; z-index: 1; left: 0; background: var(--bg); }
  .table-wrap thead th:first-child { z-index: 3; background: var(--panel); }
  .table-wrap tbody tr:hover td:first-child { background: var(--hover-surface); }
  .viz-panel .chart, .visual-grid > .viz-panel:first-child .chart { height: 176px; }
  .result-header { flex-direction: column; }
  .bridge-panel { height: auto !important; }
  .bridge-equation { grid-template-columns: 1fr; }
  .bridge-node.final { text-align: left; }
  .bridge-operator { min-height: 28px; }
  .contingent-strip { align-items: flex-start; flex-direction: column; }
  .contingent-strip .equation-sign { display: none; }
  .modal header { padding: 16px; }
  .modal h2 { font-size: 22px; }
  .modal-content { padding: 18px 16px; }
  .mobile-jump-nav { right: 16px; left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  body { overflow: visible; color: #111; background: #fff; }
  .corner, .app-header, .control-panel, .mobile-footer, .dot-cur { display: none !important; }
  .app-shell { display: block; height: auto; padding: 0; }
  .workspace { display: block; }
  .results { border: 0; overflow: visible; background: #fff; }
  .viz-panel { break-inside: avoid; border-color: #ccc; background: #fff; }
}