@layer tools {
  [hidden] { display: none !important }
  .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0 }
  .scenario-notebook { border-block: 1px solid var(--line); margin-block: 18px 0 }
  .scenario-notebook>summary { display: flex; align-items: center; gap: 24px; min-block-size: 66px; padding-block: 12px; font-size: 15px; font-weight: 500 }
  #notebook-count { margin-inline-start: auto; color: var(--muted); font-size:14px; font-weight: 400 }
  .notebook-toggle { position: relative; inline-size: 15px; block-size: 15px; flex-shrink: 0 }
  .notebook-toggle::before,.notebook-toggle::after { content: ''; position: absolute; inset-inline: 0; inset-block-start: 7px; block-size: 1px; background: currentColor }
  .notebook-toggle::after { transform: rotate(90deg); transition: transform .18s ease-out }
  .scenario-notebook[open] .notebook-toggle::after { transform: rotate(0) }
  .notebook-content { padding-block: 12px 30px }
  .notebook-intro { display: flex; gap: 24px; justify-content: space-between; align-items: center; padding-block-end: 25px }
  .notebook-intro>p { font-size: 15px; line-height: 1.7; color: var(--muted) }
  .scenario-presets { display: flex; flex-wrap: wrap; gap: 10px 28px }
  .capture-form { display: flex; align-items: flex-start; gap: 24px; padding-block: 22px; border-block: 1px solid var(--line) }
  .notebook-name-field { flex: 1; max-inline-size: 580px }
  .notebook-name-field label { display: block; font-size:14px; font-weight: 500; margin-block-end: 9px }
  .notebook-name-field input,.link-fallback input { inline-size: 100%; min-block-size: 48px; border: 1px solid var(--muted); border-radius: 3px; padding: 9px 13px; background: var(--white); font-size: 16px; line-height: 1.5 }
  .notebook-name-field input::placeholder { color: var(--muted); opacity: 1 }
  .notebook-name-field input[aria-invalid=true] { border-color: var(--accent-text) }
  #scenario-name-hint { display: block; font-size:14px; color: var(--muted); margin-block-start: 5px }
  .capture-form>.button { margin-block-start: 30px; min-block-size: 48px }
  .notebook-empty { padding-block: 34px; color: var(--muted); font-size: 14px }
  .notebook-row { display: flex; gap: 32px; align-items: center; justify-content: space-between; padding-block: 20px; border-block-end: 1px solid var(--line) }
  .notebook-row>div:first-child { min-inline-size: 0 }
  .notebook-row strong { display: block; font-family: var(--display); font-weight: 500; font-size: 19px; line-height: 1.4; overflow-wrap: anywhere }
  .notebook-row p { margin-block-start: 5px; color: var(--muted); font-size:14px; line-height: 1.8 }
  .notebook-row-actions { display: flex; gap: 26px; flex-shrink: 0 }
  .notebook-row[data-selected=true] strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px }
  .notebook-toolbar { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-block-start: 15px }
  #notebook-feedback { color: var(--muted); font-size:14px; line-height: 1.8; margin-block-start: 12px; max-inline-size: 78ch }
  #notebook-feedback[data-error=true] { color: var(--accent-text) }
  .link-fallback { margin-block-start: 20px; max-inline-size: 700px }
  .link-fallback label { font-size:14px; display: block; margin-block-end: 8px }
  .scenario-comparison { padding-block: 32px 20px; border-block-end: 1px solid var(--line) }
  .comparison-heading { display: flex; gap: 24px; align-items: center; justify-content: space-between }
  .comparison-heading h3 { font-size: 27px; line-height: 1.25 }
  #comparison-note { color: var(--muted); font-size:14px; margin-block: 9px 20px }
  .scenario-comparison table { inline-size: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums }
  .scenario-comparison th,.scenario-comparison td { border-block-end: 1px solid var(--soft-line); padding: 16px 0; font-size: 15px; font-weight: 400; text-align: end; overflow-wrap: anywhere; vertical-align: top }
  .scenario-comparison th:first-child { text-align: start; inline-size: 44%; padding-inline-end: 20px }
  .scenario-comparison thead th { color: var(--muted); font-size:14px }
  .scenario-comparison tbody tr:last-child th,.scenario-comparison tbody tr:last-child td { border-block-end: 0 }
  .scenario-comparison td:last-child { color: var(--muted) }
  .workbench:has(#request[aria-invalid=true]) .exit-results strong { font-size: 24px }
  @media(max-width:740px) {
    .scenario-notebook { margin-block-start: 12px }
    .scenario-notebook>summary { min-block-size: 64px; font-size: 15px; gap: 20px }
    .notebook-intro { display: block; padding-block-end: 20px }
    .notebook-intro>p { font-size: 15px }
    .scenario-presets { gap: 8px 25px; margin-block-start: 13px }
    .scenario-presets button { font-size:14px }
    .capture-form { display: block; padding-block: 20px }
    .capture-form>.button { margin-block-start: 15px }
    .notebook-row { display: block; padding-block: 20px }
    .notebook-row strong { font-size: 19px }
    .notebook-row p { font-size:14px }
    .notebook-row-actions { gap: 28px; margin-block-start: 8px }
    .notebook-row-actions .plain-button { font-size:14px }
    .notebook-toolbar { gap: 5px 22px }
    .notebook-toolbar .plain-button { font-size:14px }
    .comparison-heading { align-items: flex-start; display: block }
    .comparison-heading h3 { font-size: 25px }
    .comparison-heading .plain-button { margin-block-start: 5px }
    .scenario-comparison th:first-child { inline-size: 40%; padding-inline-end: 12px }
    .scenario-comparison th,.scenario-comparison td { font-size:14px; padding-block: 15px }
    .scenario-comparison thead th { font-size:14px }
    .scenario-comparison td { padding-inline-start: 8px }
    .workbench:has(#request[aria-invalid=true]) .exit-results strong { font-size: 23px }
  }
  @media(prefers-reduced-motion:reduce) { .notebook-toggle::after { transition: none } }
}
@layer tools {
  .stress-section { padding-block: 50px 90px; border-block-start: 1px solid var(--line) }
  .stress-intro h2 { font-size: 36px; max-inline-size: 750px }
  .stress-intro p { font-size: 16px; color: var(--muted); max-inline-size: 75ch; margin-block-start: 20px; line-height: 1.8 }
  .stress-thresholds { display: flex; justify-content: space-between; gap: 60px; margin-block: 38px 32px }
  .stress-thresholds button { text-align: start; display: block; min-block-size: 64px; padding-block: 8px; border-block-end: 1px solid var(--muted); max-inline-size: 360px }
  .stress-thresholds strong { display: block; font-family: var(--display); font-size: 24px; line-height: 1.2; font-weight: 500 }
  .stress-thresholds span { display: block; font-size:14px; line-height: 1.7; margin-block-start: 8px; color: var(--muted) }
  .stress-thresholds button:hover { border-color: var(--ink) }
  .stress-figure { margin: 0 }
  .stress-chart-label { font-size:14px; color: var(--muted); margin-block-end: 18px }
  .stress-chart { display: grid; grid-template-columns: 56px minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 15px; block-size: 290px }
  .stress-y-scale { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; color: var(--muted); font-size:14px; line-height: 1 }
  .stress-chart svg { inline-size: 100%; block-size: 100%; min-block-size: 0; overflow: visible }
  .stress-chart path,.stress-chart line { vector-effect: non-scaling-stroke }
  .stress-grid { fill: none; stroke: var(--line); stroke-width: 1 }
  .stress-threshold-line { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5 }
  .stress-loss-area { fill: color-mix(in oklch,var(--accent) 12%,transparent); stroke: none }
  .stress-proceeds { fill: none; stroke: var(--ink); stroke-width: 2 }
  .stress-loss-line { fill: none; stroke: var(--accent-text); stroke-width: 2 }
  .stress-current-marker { stroke: var(--accent); stroke-width: 3 }
  .stress-x-scale { position: relative; display: flex; justify-content: space-between; margin-inline-start: 71px; padding-block-start: 14px; font-size:14px; line-height: 1; color: var(--muted) }
  .stress-x-scale span { position: absolute; transform: translateX(-50%) }
  .stress-x-scale span:first-child { position: static; transform: none }
  .stress-x-scale span:nth-child(2) { inset-inline-start: 28.571% }
  .stress-x-scale span:nth-child(3) { inset-inline-start: 57.143% }
  .stress-x-scale span:nth-child(4) { inset-inline-start: 85.714% }
  .stress-x-scale span:last-child { inset-inline-end: 0; transform: none }
  .stress-figure figcaption { color: var(--muted); font-size:14px; margin-block-start: 23px; margin-inline-start: 71px }
  .stress-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding-block: 34px 30px; margin-block-start: 25px; border-block-start: 1px solid var(--line) }
  .stress-slider-field label { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; font-weight: 500 }
  .stress-slider-field output { font-size: 22px; font-family: var(--display) }
  .stress-slider-field input { inline-size: 100%; min-block-size: 44px; margin: 5px 0 0; accent-color: var(--accent) }
  .stress-slider-field>span { font-size:14px; color: var(--muted) }
  .stress-controls dl { display: flex; align-items: center; justify-content: space-between; gap: 30px }
  .stress-controls dt { font-size:14px; color: var(--muted) }
  .stress-controls dd { font-size: 30px; font-family: var(--display); line-height: 1.3; margin-block-start: 10px; letter-spacing: -.025em }
  .stress-section[data-loss=true] #stress-current-loss { color: var(--accent-text) }
  .stress-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; border-block-start: 1px solid var(--line); padding-block-start: 20px }
  .stress-foot p { font-size:14px; color: var(--muted); max-inline-size: 76ch; line-height: 1.8 }
  .stress-foot a { flex-shrink: 0 }
  @media(max-width:740px) {
    .stress-section { padding-block: 40px 50px }
    .stress-intro h2 { font-size: 31px }
    .stress-intro p { font-size: 16px }
    .stress-thresholds { gap: 25px; margin-block: 26px }
    .stress-thresholds strong { font-size: 22px }
    .stress-thresholds span { font-size:14px }
    .stress-chart-label { font-size:14px; line-height: 1.8 }
    .stress-chart { grid-template-columns: 38px minmax(0,1fr); gap: 10px; block-size: 200px }
    .stress-y-scale,.stress-x-scale { font-size:14px }
    .stress-x-scale,.stress-figure figcaption { margin-inline-start: 48px }
    .stress-figure figcaption { font-size:14px; line-height: 1.8; margin-block-start: 20px }
    .stress-controls { grid-template-columns: 1fr; gap: 22px; padding-block: 24px; margin-block-start: 24px }
    .stress-controls dl { justify-content: flex-start; gap: 60px }
    .stress-slider-field label { font-size: 14px }
    .stress-controls dd { font-size: 28px }
    .stress-foot { display: block; padding-block-start: 20px }
    .stress-foot p { font-size:14px }
    .stress-foot a { font-size:14px; margin-block-start: 8px }
  }
}
@layer tools {
  .not-found { padding-block: 90px; min-block-size: 70svh }
  .not-found h1 { max-inline-size: 760px; font-size: clamp(32px,3.7vw,49px) }
  .not-found p { margin-block: 24px 32px; color: var(--muted); font-size: 16px; max-inline-size: 65ch }
  @media(max-width:740px) { .not-found { padding-block: 60px } }
}
@layer tools {
  .mobile-menu-button { display: none }
  #mobile-navigation { padding: 14px 22px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink) }
  #mobile-navigation:not(:popover-open) { display: none }
  #mobile-navigation:popover-open { display: grid; gap: 2px; position: fixed; inset-block-start: 80px; inset-inline: 20px; margin: 0; inline-size: auto }
  #mobile-navigation a { display: flex; align-items: center; min-block-size: 48px; font-size: 15px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px }
  @media(max-width:740px) {
    .site-header { gap: 12px }
    .mobile-menu-button { display: inline-flex; margin-inline-start: auto; min-inline-size: 44px; justify-content: center; font-size:14px }
    .header-thesis { font-size:14px }
    .site-header #mobile-navigation { display: none }
    .site-header #mobile-navigation:popover-open { display: grid }
  }
  @media(min-width:741px) { #mobile-navigation:popover-open { display: none } }
}
