| :root { |
| color-scheme: light; |
| --paper: #f2efe6; |
| --surface: #fffdf7; |
| --surface-muted: #e7e4da; |
| --ink: #17251f; |
| --muted: #5b6760; |
| --line: #cbc7bb; |
| --spruce: #1d6753; |
| --spruce-deep: #144b3d; |
| --spruce-soft: #d8e7df; |
| --clay: #b65d35; |
| --clay-soft: #f1ded3; |
| --gold: #9b7a30; |
| --shadow: 0 20px 56px rgb(28 43 35 / 11%); |
| --radius-small: 6px; |
| --radius-large: 16px; |
| --display: Georgia, "Times New Roman", serif; |
| --body: Aptos, "Segoe UI", sans-serif; |
| --mono: "Cascadia Mono", Consolas, monospace; |
| } |
|
|
| [data-theme="dark"] { |
| color-scheme: dark; |
| --paper: #14201b; |
| --surface: #1c2a24; |
| --surface-muted: #26362f; |
| --ink: #edf1eb; |
| --muted: #b5c0b9; |
| --line: #405048; |
| --spruce: #78c2a5; |
| --spruce-deep: #a4d8c3; |
| --spruce-soft: #29493d; |
| --clay: #ed9568; |
| --clay-soft: #523629; |
| --gold: #d0b66d; |
| --shadow: 0 20px 56px rgb(0 0 0 / 28%); |
| } |
|
|
| * { box-sizing: border-box; } |
| html { scroll-behavior: smooth; } |
| body { |
| margin: 0; |
| background: |
| linear-gradient(rgb(23 37 31 / 3.5%) 1px, transparent 1px), |
| linear-gradient(90deg, rgb(23 37 31 / 3.5%) 1px, transparent 1px), |
| var(--paper); |
| background-size: 32px 32px; |
| color: var(--ink); |
| font-family: var(--body); |
| font-size: 17px; |
| line-height: 1.55; |
| text-wrap: pretty; |
| } |
|
|
| button, input, select { font: inherit; } |
| button, input, select, summary, a { -webkit-tap-highlight-color: transparent; } |
| :focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; } |
| [hidden] { display: none !important; } |
| .shell { width: min(1220px, calc(100% - 32px)); margin-inline: auto; } |
|
|
| .topbar { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| min-height: 66px; |
| border-bottom: 1px solid var(--line); |
| } |
| .wordmark { |
| color: var(--ink); |
| font-family: var(--mono); |
| font-size: 13px; |
| font-weight: 750; |
| letter-spacing: .09em; |
| text-decoration: none; |
| } |
| .top-actions { display: flex; align-items: center; gap: 12px; } |
| .status { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; } |
| .status.ready { color: var(--spruce); } |
| .status.error { color: var(--clay); } |
|
|
| .quiet-button { |
| min-height: 44px; |
| padding: 8px 13px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius-small); |
| background: var(--surface); |
| color: var(--ink); |
| cursor: pointer; |
| transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; |
| } |
| .quiet-button:hover { border-color: var(--spruce); background: var(--spruce-soft); } |
| .quiet-button:active { transform: translateY(1px); } |
| .quiet-button:disabled { cursor: not-allowed; opacity: .5; } |
|
|
| .hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); |
| gap: clamp(36px, 7vw, 92px); |
| align-items: end; |
| padding-block: clamp(62px, 9vw, 118px) 48px; |
| } |
| .eyebrow { |
| margin: 0 0 13px; |
| color: var(--spruce); |
| font-family: var(--mono); |
| font-size: 11px; |
| font-weight: 750; |
| letter-spacing: .12em; |
| text-transform: uppercase; |
| } |
| h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; } |
| h1 { margin: 0; font-size: clamp(44px, 7vw, 84px); letter-spacing: -.047em; } |
| h1 em { color: var(--spruce-deep); font-weight: inherit; } |
| h2 { margin: 0; font-size: clamp(29px, 4vw, 45px); letter-spacing: -.028em; } |
| h3 { margin: 0; font-size: 27px; } |
| .lede { max-width: 820px; margin: 25px 0 0; color: var(--muted); font-size: clamp(18px, 2.1vw, 23px); } |
| .endpoint-note { padding: 25px; border-top: 4px solid var(--clay); background: var(--surface); box-shadow: var(--shadow); } |
| .endpoint-note span { display: block; margin-bottom: 9px; color: var(--clay); font-family: var(--mono); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; } |
| .endpoint-note p { margin: 0; } |
|
|
| .evidence-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 38px; border: 1px solid var(--line); background: var(--surface); } |
| .evidence-item { min-height: 132px; padding: 23px; border-right: 1px solid var(--line); } |
| .evidence-item:last-child { border-right: 0; } |
| .evidence-item strong { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 36px; font-weight: 500; line-height: 1; } |
| .evidence-item span { color: var(--muted); font-size: 14px; } |
|
|
| .warning { display: grid; grid-template-columns: auto 1fr; gap: 17px; margin-bottom: 40px; padding: 23px 25px; border: 1px solid color-mix(in srgb, var(--clay) 45%, var(--line)); border-radius: var(--radius-small); background: var(--clay-soft); } |
| .warning span { color: var(--clay); font-family: var(--mono); font-size: 12px; font-weight: 750; letter-spacing: .09em; } |
| .warning p { margin: 0; } |
|
|
| .workspace { overflow: hidden; margin-bottom: 68px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); box-shadow: var(--shadow); } |
| .tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--surface-muted); } |
| .tab { min-height: 56px; padding: 12px 24px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; } |
| .tab:hover { background: var(--surface); color: var(--ink); } |
| .tab[aria-selected="true"] { background: var(--surface); color: var(--spruce-deep); box-shadow: inset 0 -3px var(--spruce); } |
| .panel { display: none; } |
| .panel.active { display: block; animation: enter 220ms ease both; } |
| @keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } |
|
|
| .tool-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); min-height: 720px; } |
| .form-pane, .curve-controls { padding: clamp(25px, 4vw, 46px); border-right: 1px solid var(--line); } |
| .result-pane, .chart-pane { padding: clamp(25px, 4vw, 46px); background: color-mix(in srgb, var(--spruce-soft) 28%, var(--surface)); } |
| .section-heading { margin-bottom: 31px; } |
| .section-heading > p:last-child { margin: 10px 0 0; color: var(--muted); } |
| .field-groups { display: grid; gap: 24px; } |
| fieldset { margin: 0; padding: 0; border: 0; } |
| legend { width: 100%; margin-bottom: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--spruce-deep); font-family: var(--mono); font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; } |
| .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 17px; } |
| .fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } |
| .field { min-width: 0; } |
| label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; } |
| input, select { width: 100%; min-height: 46px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease; } |
| input:hover, select:hover { border-color: var(--spruce); } |
| input:focus, select:focus { border-color: var(--spruce); box-shadow: 0 0 0 3px color-mix(in srgb, var(--spruce) 18%, transparent); outline: 0; } |
| .range { display: block; margin-top: 5px; color: var(--muted); font-family: var(--mono); font-size: 10px; } |
| .primary-button { width: 100%; min-height: 54px; margin-top: 28px; border: 1px solid var(--spruce-deep); border-radius: var(--radius-small); background: var(--spruce-deep); color: var(--surface); cursor: pointer; font-weight: 750; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; } |
| [data-theme="dark"] .primary-button { color: #14211b; } |
| .primary-button:hover { filter: brightness(1.08); box-shadow: 0 11px 26px rgb(20 75 61 / 18%); transform: translateY(-1px); } |
| .primary-button:active { transform: translateY(1px); } |
| .primary-button:disabled { cursor: wait; opacity: .58; transform: none; } |
|
|
| .empty-state { min-height: 430px; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--muted); } |
| .loading-ring { width: 74px; height: 74px; margin-bottom: 22px; border: 1px solid var(--line); border-top-color: var(--spruce); border-radius: 50%; animation: spin 1.2s linear infinite; } |
| @keyframes spin { to { transform: rotate(360deg); } } |
| .result-kicker { margin: 0; color: var(--spruce-deep); font-family: var(--mono); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; } |
| .prediction { margin: 11px 0 24px; font-family: var(--display); font-size: clamp(58px, 7vw, 82px); line-height: .95; letter-spacing: -.045em; } |
| .prediction small { display: block; margin-top: 9px; color: var(--muted); font-family: var(--body); font-size: 16px; letter-spacing: 0; } |
| .comparison { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-block: 14px; border-block: 1px solid var(--line); } |
| .comparison span { color: var(--muted); } |
| .interval-grid { display: grid; gap: 12px; } |
| .interval-grid article { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); } |
| .interval-grid article > span, .interval-grid small { display: block; color: var(--muted); font-size: 13px; } |
| .interval-grid strong { display: block; margin: 5px 0; font-family: var(--display); font-size: 24px; font-weight: 500; } |
| .interval-grid .stress-card { border-color: color-mix(in srgb, var(--clay) 42%, var(--line)); background: var(--clay-soft); } |
| .notes { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); } |
| .notes h4 { margin: 0 0 9px; font-size: 15px; } |
| .notes ul { margin: 0; padding-left: 20px; } |
| .notes li + li { margin-top: 6px; } |
| .decision-boundary { margin: 20px 0 0; color: var(--muted); font-size: 13px; } |
| .error-block { padding: 18px; border: 1px solid var(--clay); border-radius: var(--radius-small); background: var(--clay-soft); } |
|
|
| .curve-layout { display: grid; grid-template-columns: minmax(390px, .72fr) minmax(0, 1.28fr); min-height: 760px; } |
| .time-controls { margin-top: 26px; } |
| .checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; font-weight: 500; } |
| .checkbox-row input { flex: 0 0 auto; width: 18px; min-height: 18px; margin-top: 3px; } |
| .chart-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; } |
| .chart-card { min-height: 430px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); } |
| #curveChart { display: block; width: 100%; height: auto; overflow: visible; } |
| .legend { display: flex; flex-wrap: wrap; gap: 12px 19px; margin-top: 14px; color: var(--muted); font-size: 12px; } |
| .legend span::before { content: ""; display: inline-block; width: 24px; height: 3px; margin-right: 7px; vertical-align: middle; background: var(--spruce); } |
| .legend .legend-baseline::before { background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 9px); } |
| .legend .legend-represented::before { height: 10px; border: 1px solid var(--spruce); background: var(--spruce-soft); } |
| .legend .legend-stress::before { height: 10px; border: 1px solid var(--clay); background: var(--clay-soft); } |
|
|
| .methods { display: grid; grid-template-columns: .67fr 1.33fr; gap: clamp(34px, 7vw, 86px); padding-block: 24px 92px; } |
| .method-details details { border-top: 1px solid var(--line); } |
| .method-details details:last-child { border-bottom: 1px solid var(--line); } |
| summary { padding: 19px 0; cursor: pointer; font-weight: 750; list-style: none; } |
| summary::after { content: "+"; float: right; color: var(--spruce); font-family: var(--mono); } |
| details[open] summary::after { content: "−"; } |
| details p { margin: 0 0 21px; color: var(--muted); } |
| footer { padding-block: 30px 45px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; } |
| footer a { color: var(--spruce-deep); } |
|
|
| @media (max-width: 960px) { |
| .hero, .tool-grid, .curve-layout, .methods { grid-template-columns: 1fr; } |
| .evidence-strip { grid-template-columns: repeat(2, 1fr); } |
| .evidence-item:nth-child(2) { border-right: 0; } |
| .evidence-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); } |
| .form-pane, .curve-controls { border-right: 0; border-bottom: 1px solid var(--line); } |
| .result-pane { min-height: 560px; } |
| } |
|
|
| @media (max-width: 620px) { |
| body { font-size: 16px; } |
| .shell { width: min(100% - 20px, 1220px); } |
| .topbar { min-height: 60px; } |
| .status { display: none; } |
| .hero { padding-top: 48px; } |
| .evidence-strip, .fields, .fields.three { grid-template-columns: 1fr; } |
| .evidence-item { border-right: 0; border-bottom: 1px solid var(--line); } |
| .evidence-item:last-child { border-bottom: 0; } |
| .warning { grid-template-columns: 1fr; } |
| .tabs { overflow-x: auto; } |
| .tab { flex: 1 0 auto; min-height: 50px; padding: 10px 15px; } |
| .form-pane, .result-pane, .curve-controls, .chart-pane { padding: 24px 18px; } |
| .chart-header { align-items: flex-start; flex-direction: column; } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; } |
| } |
|
|
