/* Product: inspect a trading-balance scenario. Character: calm, exact, restrained.
   World: Quadcode trading tools. Moment: balance curve. Signature: one inspected period. */
:root { --positive: #63e2a4; --negative: #ff9b9b; }
h1, h2, h3, strong { font-weight: 400; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
input, select { min-width: 0; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px; align-items: center; padding-block: 24px 32px; }
.hero h1 { font-size: clamp(48px, 4.8vw, 64px); line-height: 1.04; letter-spacing: -.03em; max-width: 11em; text-wrap: balance; }
.hero-copy > p { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 25em; }
.hero .author-byline { margin-top: 24px; }
.hero .author-byline p { font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 4px; }
.hero .author-byline .author-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hero .author-byline .author-name, .hero .author-byline .author-name a { font-size: 14px; }
.hero .author-byline .author-linkedin { display: inline-flex; margin: 0 0 0 4px; }
.quick-guide { background: #fff; border-radius: 20px; margin-bottom: 16px; padding-inline: 24px; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.quick-guide > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 15px; gap: 24px; }
.quick-guide summary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; transition: transform 180ms; }
.quick-guide[open] summary svg { transform: rotate(180deg); }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 8px 24px; }
.guide-grid h2 { font-size: 17px; line-height: 1.4; }
.guide-grid p { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.no-script { padding: 20px; background: #fff2d7; margin-block: 16px; border-radius: 16px; }
.calculator-grid { display: grid; grid-template-columns: 352px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.input-panel, .results-panel { border-radius: 32px; min-width: 0; }
.input-panel { background: #fff; padding: 32px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.panel-heading h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.text-button { font-size: 14px; padding-block: 12px; min-height: 44px; color: var(--muted); }
.text-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.field + .field { margin-top: 24px; }
.field-heading { display: flex; align-items: center; gap: 8px; min-height: 28px; margin-bottom: 8px; }
.field-heading label, .field > label, .timing-field legend { font-size: 15px; line-height: 1.5; }
.field > label { display: block; margin-bottom: 12px; }
.help-button { width: 24px; height: 28px; border-radius: 6px; color: var(--muted); font-size: 12px; padding: 0; position: relative; }
.help-button::before { content: ''; position: absolute; inset: 6px 4px; border: 1px solid currentColor; border-radius: 50%; }
.help-button:hover, .help-button[aria-expanded=true] { background: #e9ecf0; color: var(--ink); }
.field-tooltip { position: fixed; z-index: 250; width: min(300px, calc(100vw - 32px)); padding: 16px 20px; border-radius: 16px; background: #272729; color: #f7f7f8; box-shadow: 0 8px 32px #0002; font-size: 14px; line-height: 1.65; }
.money-control, .number-control, .select-control { display: flex; align-items: center; background: #f3f4f6; border-radius: 16px; min-height: 60px; padding: 0 16px; gap: 8px; }
.money-control:has(input:focus-visible), .number-control:has(input:focus-visible), .select-control:has(select:focus-visible) { outline: 2px solid #cf2c30; outline-offset: 3px; background: #edf0f3; }
.money-control:has(input[aria-invalid=true]), .number-control:has(input[aria-invalid=true]) { box-shadow: inset 0 0 0 1px #b5232c; }
.money-control > span, .number-control > span { font-size: 20px; color: var(--muted); flex-shrink: 0; }
.money-control input, .number-control input { padding: 16px 0; width: 100%; border: 0; background: transparent; outline: 0; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
input::selection { background: #cbdced; color: #181818; }
select { appearance: none; border: 0; color: var(--ink); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2356616d' stroke-width='1.5'%3E%3Cpath d='m3 5 4 4 4-4'/%3E%3C/svg%3E") right 4px center / 14px 14px no-repeat; border-radius: 4px; padding: 12px 24px 12px 0; cursor: pointer; width: 100%; font-size: 15px; }
.currency-control { width: 68px; flex-shrink: 0; }
.currency-control select { font-size: 12px; padding-right: 18px; }
.currency-control select:focus-visible { outline-offset: 1px; }
.period-controls { display: grid; grid-template-columns: .65fr 1fr; gap: 8px; }
.select-control { padding-inline: 12px; }
.select-control select:focus-visible { outline: 0; }
.field-hint, .input-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }
.field-error { color: #a61625; font-size: 12px; line-height: 1.6; margin-top: 8px; }
.field-error:empty { display: none; }
.funding-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px 0; margin-top: 12px; gap: 16px; text-align: left; font-size: 14px; }
.funding-trigger small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.funding-trigger svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; }
.funding-trigger:hover > span { text-decoration: underline; text-underline-offset: 4px; }
.calculate-button, .apply-button { display: flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 52px; padding: 16px 20px; border-radius: 32px; background: #181818; color: #fff; width: 100%; font-size: 15px; }
.calculate-button:hover, .apply-button:hover { background: #363638; }
.calculate-button svg, .example-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.input-note { margin-top: 20px; }
.results-panel { background: var(--dark); color: #f7f7f8; padding: 32px 40px; min-height: 640px; }
.result-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; }
.result-heading h2 { font-size: 15px; line-height: 1.5; color: #b5b5bd; }
.icon-button { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px; border-radius: 8px; color: #b5b5bd; background: transparent; font-size: 12px; }
.icon-button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.icon-button:hover { background: #272729; color: #f7f7f8; }
.balance { font-size: clamp(48px, 5vw, 72px); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 8px; white-space: nowrap; }
.balance[data-size=medium] { font-size: clamp(28px, 4.8vw, 72px); }
.balance[data-size=long] { font-size: clamp(24px, 3.6vw, 64px); }
.result-context { color: #b5b5bd; font-size: 14px; line-height: 1.6; margin-top: 8px; }
.result-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block: 24px; }
.result-facts dt { color: #b5b5bd; font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
.result-facts dd { font-size: 24px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.positive { color: var(--positive); }
.negative { color: var(--negative); }
.view-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.view-tabs { display: flex; gap: 4px; background: transparent; padding: 0; border-radius: 0; }
.view-tabs button { padding: 8px 12px; min-height: 44px; border-radius: 8px; color: #b5b5bd; font-size: 13px; }
.view-tabs button[aria-selected=true] { background: #303033; color: #fff; }
.view-tabs button:hover { color: #fff; }
.view-tabs button:focus-visible { outline-offset: 2px; }
.chart-currency { font-size: 12px; color: #b5b5bd; }
.chart-legend { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: #b5b5bd; font-size: 12px; margin-top: 16px; }
.chart-legend > span { display: flex; gap: 8px; align-items: center; }
.chart-legend i { display: inline-block; width: 20px; height: 0; border-top: 2px solid var(--positive); }
.chart-legend .baseline-key { border-top: 2px dashed #a0a0a8; }
.results-panel.is-loss { --positive: var(--negative); }
#balance-chart { color: var(--positive); width: 100%; height: auto; display: block; margin-block: 8px 0; touch-action: pan-y; user-select: none; cursor: crosshair; }
.plot-grid { stroke: #2c2c2f; stroke-width: 1; }
.plot-label { fill: #b5b5bd; font: 13px 'Suisse Intl', Arial, sans-serif; }
.plot-line { stroke: currentColor; fill: none; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.plot-baseline { stroke: #92929b; fill: none; stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.plot-cursor { stroke: #aaaab1; stroke-width: 1; stroke-dasharray: 3 5; }
.plot-halo { fill: currentColor; opacity: .16; }
.plot-point { fill: currentColor; stroke: #161616; stroke-width: 2; }
.period-inspector { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.period-inspector > div { color: #b5b5bd; font-size: 13px; display: flex; gap: 8px; }
.period-inspector output { color: #f7f7f8; }
.period-inspector strong { font-size: 18px; }
#period-slider { appearance: none; width: 100%; height: 36px; background: transparent; padding: 0; margin: 0; cursor: ew-resize; }
#period-slider::-webkit-slider-runnable-track { height: 3px; background: #55555c; border-radius: 4px; }
#period-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6.5px; background: #f7f7f8; border: 0; border-radius: 50%; }
#period-slider::-moz-range-track { height: 3px; background: #55555c; border-radius: 4px; }
#period-slider::-moz-range-thumb { width: 16px; height: 16px; background: #f7f7f8; border: 0; border-radius: 50%; }
.inspect-detail, .chart-note { color: #b5b5bd; font-size: 12px; line-height: 1.65; }
.inspect-detail { min-height: 20px; font-variant-numeric: tabular-nums; }
.chart-note { margin-top: 12px; }
.table-scroll { margin-top: 20px; max-height: 328px; overflow: auto; border-radius: 8px; scrollbar-color: #595960 #272729; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 12px; }
thead { position: sticky; top: 0; z-index: 3; background: #202022; }
th { font-weight: 400; color: #b5b5bd; }
td, th { padding: 12px 8px; text-align: right; white-space: nowrap; }
td:first-child, th:first-child { text-align: left; }
tbody tr { border-bottom: 1px solid #303033; }
tbody tr[aria-current=true] { background: #2c2c30; }
.table-scroll tr > :first-child { position: sticky; left: 0; z-index: 1; background: #161616; padding-right: 16px; }
.table-scroll thead tr > :first-child { z-index: 4; background: #202022; }
.table-scroll tbody tr[aria-current=true] > :first-child { background: #2c2c30; }
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #b5b5bd; font-size: 12px; margin-top: 12px; }
.table-pagination > div { display: flex; gap: 8px; }
.table-pagination button { min-width: 40px; min-height: 40px; border-radius: 50%; background: #272729; color: #fff; }
.table-pagination button:hover { background: #363638; }
.result-error, .withdrawal-notice { padding: 16px 20px; background: #362a22; color: #f2cca5; font-size: 13px; line-height: 1.6; border-radius: 12px; margin-block: 20px; }
.result-error { background: #352327; color: #ffb9be; }
.calculator-notes { display: flex; justify-content: space-between; gap: 48px; margin-block: 16px 48px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.calculator-notes p { max-width: 78ch; }
.calculator-notes a { flex-shrink: 0; text-decoration: underline; text-underline-offset: 4px; }
.explanation-section, .method-section { padding-block: 48px 72px; }
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.section-intro h2, .faq-section > h2, .author-section > h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.15; letter-spacing: -.025em; max-width: 10em; }
.section-intro p, .example-grid p, .faq-list p, .author-card p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.section-intro p + p { margin-top: 20px; }
.example-band { background: var(--dark); color: #f7f7f8; padding-block: 64px; }
.example-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.example-grid h2 { font-size: 48px; line-height: 1.15; letter-spacing: -.025em; }
.example-grid p { margin-top: 24px; max-width: 36em; color: #b5b5bd; }
.example-button { background: #f7f7f8; color: #181818; display: inline-flex; gap: 32px; min-height: 48px; align-items: center; padding: 12px 20px; border-radius: 32px; margin-top: 32px; font-size: 15px; }
.example-button:hover { background: #dcdce1; }
.example-figures > div { display: flex; flex-direction: column; gap: 8px; }
.example-figures > div + div { margin-top: 24px; }
.example-figures span { color: #b5b5bd; font-size: 14px; }
.example-figures strong { font-size: 40px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.example-figures > div:first-child strong { color: #63e2a4; }
.method-section { padding-block: 80px; }
.section-intro .formula { font-size: 28px; line-height: 1.5; color: var(--ink); margin-block: 24px; }
.formula sup { font-size: 16px; }
.method-details h3 { font-size: 20px; line-height: 1.5; margin-top: 32px; }
.method-details h3 + p { margin-top: 12px; }
.section-intro .updated { font-size: 13px; margin-top: 32px; }
.updated time { color: var(--ink); margin-left: 8px; }
.faq-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 24px 80px; }
.faq-list details { padding: 20px 0; border-bottom: 1px solid #dce0e5; }
.faq-list details:first-child { padding-top: 0; }
.faq-list summary { font-size: 19px; line-height: 1.5; padding-right: 32px; position: relative; min-height: 36px; }
.faq-list summary::after { content: '+'; position: absolute; top: 0; right: 0; font-size: 24px; color: var(--muted); }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { font-size: 16px; margin-top: 16px; }
.author-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 32px 64px; }
.author-card { display: flex; align-items: flex-start; gap: 24px; }
.author-card > img { border-radius: 50%; object-fit: cover; object-position: center 20%; width: 80px; height: 80px; flex-shrink: 0; }
.author-card h3 { font-size: 24px; line-height: 1.3; }
.author-card p { margin-top: 12px; font-size: 16px; }
.author-links { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 16px; font-size: 14px; }
.author-links a { text-decoration: underline; text-underline-offset: 4px; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-block: 32px; color: var(--muted); font-size: 13px; }
.site-footer img { display: block; width: 140px; height: auto; }
.site-footer > div { display: flex; gap: 24px; }
.site-footer a:hover { text-decoration: underline; }
.funding-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 28px; padding: 32px; color: var(--ink); background: #fff; }
.funding-dialog::backdrop { background: #0007; }
.funding-dialog .panel-heading { margin-bottom: 16px; }
.close-button { min-width: 40px; min-height: 40px; border-radius: 50%; background: #f3f4f6; font-size: 28px; line-height: 1; }
#funding-description { font-size: 14px; color: var(--muted); line-height: 1.65; }
.funding-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.funding-fields .field + .field { margin-top: 0; }
.timing-field { margin-top: 24px; }
.timing-field legend { margin-bottom: 12px; }
.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f3f4f6; border-radius: 12px; padding: 4px; }
.segmented-control label { position: relative; cursor: pointer; }
.segmented-control input { position: absolute; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.segmented-control span { display: block; padding: 12px 8px; text-align: center; font-size: 13px; line-height: 1.5; border-radius: 8px; }
.segmented-control input:checked + span { background: #fff; box-shadow: 0 1px 3px #0001; }
.segmented-control input:focus-visible + span { outline: 2px solid #cf2c30; outline-offset: 2px; }
.dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 32px; }
.dialog-actions button { width: auto; }
.cancel-button { font-size: 15px; min-height: 48px; padding: 12px 16px; border-radius: 24px; }
.cancel-button:hover { background: #f3f4f6; }
.header-demo { background: #e60019; }
.header-demo:hover { background: #c70214; }
@media (max-width: 1200px) { .header-bar { gap: 20px; } .primary-nav { gap: 16px; } .hero { gap: 48px; } .results-panel { padding: 32px; } .result-facts dd { font-size: 21px; } }
@media (max-width: 1023px) {
  :root { --page-gutter: 32px; --header-height: 96px; }
  .header-container { padding-inline: 32px; }
  .primary-nav, .solutions-nav { display: none; }
  .header-bar { gap: 16px; }
  .header-bar > .header-burger { display: inline-flex; }
  .hero { gap: 32px; grid-template-columns: 1.1fr 1fr; }
  .hero h1 { font-size: 52px; }
  .hero-copy > p { font-size: 18px; }
  .calculator-grid { grid-template-columns: 304px minmax(0, 1fr); }
  .input-panel { padding: 24px; }
  .results-panel { padding: 24px; }
  .balance { font-size: 48px; }
  .balance[data-size=medium] { font-size: 36px; }
  .balance[data-size=long] { font-size: 28px; }
  .result-facts { gap: 12px; }
  .result-facts dt { font-size: 11px; }
  .result-facts dd { font-size: 18px; }
  .section-intro, .example-grid, .faq-section, .author-section { gap: 48px; }
  .result-heading .icon-button { padding-inline: 8px; }
  .icon-button span { display: none; }
}
@media (max-width: 767px) {
  :root { --page-gutter: 20px; }
  .header-container { padding: 12px 20px 16px; }
  .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 24px 32px; }
  .hero h1 { font-size: clamp(44px, 9vw, 60px); max-width: 12em; }
  .hero-copy > p { font-size: 18px; max-width: 35em; }
  .hero .author-byline { margin-top: 20px; }
  .calculator-grid { grid-template-columns: 1fr; }
  .input-panel, .results-panel { border-radius: 24px; padding: 24px; }
  .results-panel:has(#result-details[hidden]) { min-height: 320px; }
  .panel-heading { margin-bottom: 20px; }
  .input-panel .field + .field { margin-top: 20px; }
  .balance { font-size: clamp(44px, 10vw, 64px); }
  .balance[data-size=medium] { font-size: clamp(28px, 8.5vw, 40px); }
  .balance[data-size=long] { font-size: clamp(24px, 6.4vw, 28px); }
  .balance { white-space: nowrap; }
  .result-facts { grid-template-columns: 1fr; margin-block: 24px; gap: 12px; }
  .result-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
  .result-facts dd { font-size: 20px; white-space: nowrap; }
  .result-facts dt { font-size: 13px; margin-bottom: 0; }
  .result-facts > .long-amount { display: block; }
  .result-facts > .long-amount dt { margin-bottom: 8px; }
  .help-button { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; }
  .help-button::before { inset: 14px; }
  .currency-control { width: 80px; }
  .currency-control select, .select-control select { font-size: 16px; min-height: 44px; }
  .close-button { min-width: 44px; min-height: 44px; }
  .header-burger { min-height: 44px; }
  #period-slider { height: 44px; }
  #period-slider::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9.5px; }
  #period-slider::-moz-range-thumb { width: 22px; height: 22px; }
  .table-pagination button { min-width: 44px; min-height: 44px; }
  .icon-button span { display: inline; }
  .guide-grid { grid-template-columns: 1fr; gap: 24px; }
  .quick-guide { padding-inline: 20px; }
  .guide-grid p { margin-top: 8px; }
  .calculator-notes { flex-direction: column; gap: 12px; margin-bottom: 32px; }
  .section-intro, .example-grid, .faq-section, .author-section { grid-template-columns: 1fr; gap: 24px; }
  .section-intro h2, .faq-section > h2, .author-section > h2 { font-size: 36px; max-width: 12em; }
  .explanation-section { padding-block: 32px 48px; }
  .example-band { padding-block: 48px; }
  .example-grid h2 { font-size: 36px; }
  .example-grid p { margin-top: 16px; }
  .example-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .example-figures strong { font-size: 28px; }
  .example-figures > div + div { margin-top: 0; }
  .example-figures > p { grid-column: 1/-1; margin-top: 0; }
  .method-section { padding-block: 48px; }
  .section-intro .formula { font-size: 24px; }
  .faq-section { padding-bottom: 48px; }
  .author-section { padding-bottom: 32px; }
  .site-footer { flex-wrap: wrap; gap: 24px; }
  .site-footer > div { width: 100%; }
  .table-scroll { margin-inline: -8px; }
  #balance-chart { width: calc(100% + 24px); margin-left: -16px; }
  .plot-label { font-size: 12px; }
}
@media (max-width: 580px) { .header-actions { display: none; } .header-bar { justify-content: space-between; } }
@media (max-width: 400px) {
  .input-panel, .results-panel { padding: 20px; }
  .result-facts { gap: 12px; }
  .result-facts dd { font-size: 20px; }
  .result-facts dt { font-size: 13px; }
  .chart-legend { gap: 16px; font-size: 11px; }
  .funding-dialog { padding: 24px 20px; }
  .funding-fields { grid-template-columns: 1fr; gap: 24px; }
  .dialog-actions { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }