:root{--paper: #f4f7f5;--ink: #1f2724;--muted: #5c6661;--accent: #c84f35;--accent-soft: rgba(200, 79, 53, .18);--tile: #ffffff;--tile-border: rgba(31, 39, 36, .14);--line: rgba(31, 39, 36, .18);--baseline: #188977;--xheight: #c79f22}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--paper);background-image:none}.join-stats{max-width:1440px;margin:0 auto;padding:28px 32px 56px;display:grid;gap:18px}.join-stats__header{display:flex;align-items:end;justify-content:space-between;gap:18px}.join-stats__header h1{margin:0 0 6px;font-size:2.4rem;letter-spacing:0}.join-stats__header p{margin:0;color:var(--muted)}.join-stats__topbar,.join-stats__controls,.join-stats__panel{border:1px solid var(--tile-border);border-radius:8px;background:var(--tile);box-shadow:0 12px 28px #1f27240f}.join-stats__topbar{padding:16px}.join-stats__form{display:flex;flex-wrap:wrap;align-items:end;gap:12px}.join-stats__field{display:grid;gap:6px;min-width:min(420px,100%);color:var(--muted);font-family:Space Mono,Courier New,monospace;font-size:.82rem}.join-stats__input{width:min(420px,100%);padding:10px 12px;border-radius:8px;border:1px solid rgba(31,39,36,.22);background:#fff;color:var(--ink);font:inherit;font-family:inherit}.join-stats__button{padding:10px 18px;border:1px solid rgba(31,39,36,.18);border-radius:8px;background:var(--accent);color:#fff;font-family:Space Mono,Courier New,monospace;cursor:pointer}.join-stats__button:hover{background:#ad422b}.join-stats__controls{padding:16px}.join-stats__controls-title,.join-stats__panel-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}.join-stats__controls-title h2,.join-stats__panel-title h2{margin:0;font-size:1rem;letter-spacing:0}.join-stats__controls-title span,.join-stats__panel-title span{color:var(--muted);font-family:Space Mono,Courier New,monospace;font-size:.78rem}.join-stats__slider-grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px}.join-stats__range-row{display:flex;align-items:center;gap:10px}.join-stats__range{width:100%}.join-stats__range-value{min-width:5ch;text-align:right;color:var(--ink)}.join-stats__layout{display:grid;gap:18px}.join-stats__panel{overflow:hidden}.join-stats__panel-title{padding:14px 16px 0}.join-stats__svg{width:100%;height:390px;display:block;border-top:1px solid rgba(31,39,36,.08);background:#fbfcfb}.join-stats__svg--calculation{height:520px}.join-stats__bg{fill:#fbfcfb}.join-stats__segment-path{fill:none;stroke-linecap:round;stroke-linejoin:round}.join-stats__segment-path--join{stroke:var(--accent);stroke-opacity:.85;stroke-width:44}.join-stats__segment-path--selected-join{stroke:#8f2f1f;stroke-opacity:1;stroke-width:54}.join-stats__letter-zone rect{fill:#1889770f;stroke:#1f27241a;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer}.join-stats__letter-zone text{fill:var(--muted);font-family:Space Mono,Courier New,monospace;font-size:18px;pointer-events:none}.join-stats__letter-zone--selected rect{fill:#c84f3524;stroke:#c84f35b3}.join-stats__letter-zone--selected text{fill:#8f2f1f;font-weight:700}.join-stats__anchor-overlay{pointer-events:none}.join-stats__anchor-handle{stroke:#315a9d;stroke-width:4;stroke-dasharray:10 8;vector-effect:non-scaling-stroke}.join-stats__anchor-point{stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke}.join-stats__anchor-point--end{fill:#fff}.join-stats__anchor-point--control{fill:#f4d35e}.join-stats__anchor-label{fill:var(--ink);font-family:Space Mono,Courier New,monospace;font-size:18px;paint-order:stroke;stroke:#fbfcfb;stroke-width:5px;stroke-linejoin:round}.join-stats__context-path{fill:none;stroke:#b8c0bc;stroke-width:36;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.38}.join-stats__calc-join{fill:none;stroke:var(--accent);stroke-width:28;stroke-linecap:round;stroke-linejoin:round}.join-stats__bend-measurement-join{fill:none;stroke:#7d5295;stroke-width:18;stroke-dasharray:18 12;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.9}.join-stats__calc-handle{fill:none;stroke:#315a9d;stroke-width:4;stroke-dasharray:10 8;vector-effect:non-scaling-stroke}.join-stats__calc-point{fill:#fff;stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke}.join-stats__calc-point--bend{fill:#f4d35e;stroke:#8f2f1f}.join-stats__calc-line{stroke-width:3;vector-effect:non-scaling-stroke}.join-stats__calc-line--previous{stroke:#6d7470}.join-stats__calc-line--target{stroke:#315a9d;stroke-dasharray:12 8}.join-stats__calc-line--minimum{stroke:#b56c18;stroke-dasharray:4 8}.join-stats__calc-line--no-backwards{stroke:#c43b68;stroke-dasharray:14 6 4 6}.join-stats__calc-line--actual{stroke:#188977}.join-stats__calc-line--entry{stroke:#7d5295;stroke-dasharray:8 8}.join-stats__measure{stroke:var(--ink);stroke-width:3;marker-start:url(#join-stats-arrow);marker-end:url(#join-stats-arrow);vector-effect:non-scaling-stroke}.join-stats__label{fill:var(--ink);font-family:Space Mono,Courier New,monospace;font-size:18px;paint-order:stroke;stroke:#fbfcfb;stroke-width:5px;stroke-linejoin:round}.join-stats__metrics{padding:0 16px 16px}.join-stats__formula{margin-bottom:14px;padding:12px;border:1px solid rgba(31,39,36,.1);border-radius:8px;background:#f7f9f8;color:var(--ink);font-family:Space Mono,Courier New,monospace;font-size:.8rem;line-height:1.55}.join-stats__formula-line{display:grid;grid-template-columns:minmax(70px,.35fr) minmax(220px,1fr) minmax(220px,1fr);gap:12px;padding:4px 0;border-bottom:1px solid rgba(31,39,36,.08)}.join-stats__formula-line:last-child{border-bottom:0}.join-stats__formula-label{color:var(--muted)}.join-stats__formula-expression{min-width:0}.join-stats__formula-token,.join-stats__formula-term{display:inline-block;padding:0 4px;border-radius:4px;color:#fff;cursor:help}.join-stats__formula-token--vertical-weight{background:#2b6fa7}.join-stats__formula-token--vertical-distance{background:#188977}.join-stats__formula-token--vertical-contribution{background:#126e61}.join-stats__formula-token--bend-weight{background:#8f2f1f}.join-stats__formula-token--bend{background:#b56c18}.join-stats__formula-token--bend-contribution{background:#9d5525}.join-stats__formula-token--kerning{background:#315a9d}.join-stats__formula-token--raw-gap{background:#7d5295}.join-stats__formula-token--raw-target{background:#5f6470}.join-stats__formula-token--computed-gap{background:#6d7470}.join-stats__formula-token--minimum{background:#c79f22;color:#1f2724}.join-stats__formula-token--no-backwards{background:#c43b68}.join-stats__formula-token--actual{background:#188977}.join-stats__metric-grid{display:grid;gap:8px}.join-stats__metric-row{display:grid;grid-template-columns:minmax(170px,1fr) minmax(120px,.6fr);gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(31,39,36,.08)}.join-stats__metric-label{color:var(--muted)}.join-stats__metric-value{color:var(--ink);font-family:Space Mono,Courier New,monospace;text-align:right}.join-stats__empty{fill:var(--muted);font-family:Space Mono,Courier New,monospace;font-size:18px}@media (max-width: 1100px){.join-stats__slider-grid{grid-template-columns:1fr}}@media (max-width: 680px){.join-stats{padding:22px 16px 40px}.join-stats__header,.join-stats__controls-title,.join-stats__panel-title{align-items:flex-start;flex-direction:column}.join-stats__svg{height:300px}.join-stats__svg--calculation{height:420px}.join-stats__metric-row,.join-stats__formula-line{grid-template-columns:1fr}.join-stats__metric-value{text-align:left}}