:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#17352f;background:#f4f5ef;font-size:16px;line-height:1.6;font-synthesis:none;--green:#18594c;--ink:#17352f;--muted:#51665e;--orange:#a53817;--line:#d5dfd7}*{box-sizing:border-box}body{margin:0}a{color:#155d50;text-underline-offset:3px}a:hover{text-decoration-thickness:2px}button,input,select,textarea{font:inherit}button,select,input:not([type=range]):not([type=checkbox]){min-height:44px}button{cursor:pointer;border:1px solid var(--green);border-radius:9px;background:var(--green);color:white;padding:10px 17px;font-weight:650}button:hover{background:#104436}button.secondary{background:white;color:var(--green)}button.secondary:hover{background:#eef4ed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #bd541f;outline-offset:3px}input,textarea,select{border:1px solid #81998b;border-radius:7px;padding:9px 11px;background:white;color:var(--ink);max-width:100%}input[type=range]{padding:0;width:100%;accent-color:var(--green);min-height:34px}input[type=checkbox]{accent-color:var(--green);width:19px;height:19px;flex-shrink:0}input[type=file]{width:100%;font-size:.8rem}label{font-size:.88rem;font-weight:650;display:block;margin:15px 0 6px}select,textarea{width:100%}textarea{font-family:ui-monospace,monospace;font-size:.79rem;resize:vertical}header{max-width:1500px;margin:auto;padding:20px 35px;display:flex;gap:18px;justify-content:space-between;border-bottom:1px solid var(--line);font-size:.85rem}header span{color:var(--muted)}main{max-width:1500px;margin:auto;padding:0 35px 50px}.intro{padding:40px 0 30px;max-width:900px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.7rem;color:var(--green);margin:0 0 8px}h1{font-family:Georgia,serif;font-size:clamp(2.5rem,5vw,4rem);letter-spacing:-.04em;line-height:1.1;margin:0 0 15px}h1 em{color:#327263;font-weight:400}h2{font-size:1.16rem;line-height:1.35;margin:0 0 13px}h2 span{font-weight:400;color:var(--muted);font-size:.85rem}.lead{font-size:1.22rem;margin:0 0 8px}.intro>p:not(.lead):not(.eyebrow){color:var(--muted)}.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.tags span,.pill{border:1px solid var(--line);background:#edf2e7;border-radius:30px;padding:5px 12px;font-size:.75rem}.workspace{display:grid;grid-template-columns:290px minmax(0,1fr);align-items:start;gap:24px}.controls{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;position:sticky;top:16px}.controls h2{font-family:Georgia,serif;font-size:1.5rem}.controls details{border-top:1px solid var(--line);padding-top:15px;margin-top:18px}.controls button{width:100%;margin-top:12px}.hint{font-size:.8rem;color:var(--muted);line-height:1.55}.frozen{border-left:3px solid var(--green);background:#f0f5ee;padding:11px;font-size:.8rem}.check{display:flex;gap:9px;align-items:flex-start;font-weight:500}.check input{margin-top:4px}output{display:block;color:#155c4b;font-size:.8rem;font-weight:500}summary{cursor:pointer;font-weight:650;line-height:1.4;padding:8px 0}details[open]>summary{margin-bottom:10px}.stack{display:grid}.results{min-width:0;display:grid;gap:20px}.prediction{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#e8ede0;border:1px solid #c3d2ba;border-radius:14px;padding:22px}.prediction p:last-child{margin:0;font-size:.88rem}.prediction button{flex-shrink:0}.chart-card,.calculation,.specs,.table-details{background:white;border:1px solid var(--line);border-radius:14px;padding:24px}.chart-title,.section-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.section-row label{display:flex;align-items:center;gap:8px;margin:0 0 12px}.section-row select{width:auto;min-width:75px}.chart-scroll{overflow-x:auto}.chart-scroll svg{width:100%;min-width:560px;height:auto;display:block}.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-top:10px}.legend-value{color:var(--green)}.interpretation{padding:22px;border-left:5px solid var(--green);background:#ecf3e9;border-radius:10px}.interpretation strong{display:block;margin-bottom:7px}.interpretation p{margin:8px 0;font-size:.9rem}.warnings:empty{display:none}.warnings p,.error{padding:14px 18px;background:#fff2db;color:#6c3e0b;border:1px solid #e4c38c;border-radius:10px;font-size:.84rem;margin:0 0 8px}.error{background:#fff0ec;border-color:#b55739;color:#7a2611}.calc-grid,.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.calc-grid h3{font-size:.86rem;margin:5px 0;color:var(--muted)}.formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.84rem;overflow-wrap:anywhere;background:#f2f5ef;border:1px solid #e1e7dc;border-radius:8px;padding:12px;margin:8px 0}.calc-grid p{font-size:.86rem;margin:8px 0}.specs{background:#f9faf6}.spec-grid p{font-size:.86rem;margin-top:5px}.spec-inputs{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.spec-inputs label{max-width:180px;margin:0}.spec-inputs input{width:100%;margin-top:4px}.spec-inputs button{margin-bottom:0}#spec-result{font-weight:650;font-size:.9rem}.table-scroll{overflow-x:auto;max-height:460px}table{border-collapse:collapse;width:100%;font-size:.78rem}th,td{text-align:right;border-bottom:1px solid #e0e6dc;padding:8px 10px;white-space:nowrap}th{position:sticky;top:0;background:#e9f0e2}td:first-child,th:first-child{text-align:left}caption{text-align:left;color:var(--muted);margin-bottom:10px}tr.signal{background:#fff0e7}tr.monitor{border-left:3px solid var(--green)}.table-details>p{font-size:.86rem}.teaching{max-width:1000px;padding:40px 0 0}.teaching li{margin:10px 0}.teaching details{margin-top:25px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem}.teaching p{color:var(--muted)}footer{text-align:center;border-top:1px solid var(--line);padding:25px;font-size:.75rem;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:absolute;top:-100px;background:white;padding:10px;z-index:9}.skip:focus{top:10px}[hidden]{display:none!important}@media(max-width:1000px){.workspace{grid-template-columns:250px minmax(0,1fr);gap:16px}.controls{padding:17px}.prediction{display:block}.prediction button{margin-top:16px}.calc-grid{grid-template-columns:1fr}.chart-card,.calculation,.specs,.table-details{padding:18px}.chart-title{align-items:start;flex-wrap:wrap}}@media(max-width:760px){header{padding:15px 20px;flex-wrap:wrap;font-size:.78rem}header span{order:3;width:100%}main{padding:0 18px 30px}.intro{padding:28px 0}.workspace{grid-template-columns:1fr}.controls{position:static}.controls input[type=range]{min-height:44px}.spec-grid{grid-template-columns:1fr;gap:8px}.section-row{align-items:start;flex-wrap:wrap}.chart-card,.calculation,.specs,.table-details{padding:16px}.tags span{font-size:.69rem}.spec-inputs label{max-width:145px}.spec-inputs{gap:10px}}@media print{header,.controls,.prediction,footer,button,.skip{display:none!important}body{background:white;font-size:11px}main{padding:0}.intro{padding:8px 0}h1{font-size:30px}.workspace{display:block}.results{display:block}.chart-card,.calculation,.specs,.interpretation{margin:10px 0;break-inside:avoid}.chart-scroll svg{min-width:0}.table-details{display:none}.teaching{padding-top:15px}.chart-scroll{overflow:visible}}

.results > * { min-width: 0; }

.chart-scroll:focus-visible { outline: 3px solid #bd541f; outline-offset: 3px; } @media (max-width:1000px) { .chart-card::after { content: 'Scroll within the chart to see later subgroups →'; display: block; color: #51665e; font-size: .76rem; margin-top: 10px; } }