:root { color-scheme: light; --ink:#24243c; --muted:#636477; --line:#dedee8; --purple:#6053b6; --green:#4b6b60; --paper:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:#f6f6fa; color:var(--ink); font:16px/1.55 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button,select,input { min-height:44px; }
button { cursor:pointer; border:1px solid var(--line); background:white; color:var(--ink); border-radius:12px; padding:.6rem 1rem; font-weight:650; }
button:hover { border-color:var(--purple); background:#f4f2fc; }
:focus-visible { outline:3px solid #3269b9; outline-offset:3px; }
a { color:var(--purple); text-underline-offset:3px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.09; letter-spacing:-.045em; max-width:22ch; margin-bottom:1rem; }
h2 { font-size:1.35rem; letter-spacing:-.025em; margin-bottom:.65rem; }
h3 { font-size:1rem; }
.local-banner { padding:.5rem 1rem; text-align:center; background:#e7e3f4; color:#493f7d; font-size:.75rem; font-weight:750; letter-spacing:.09em; }
.shell { width:min(1260px,calc(100% - 3rem)); margin:auto; }
.topbar { display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.brand { font-weight:850; font-size:1.15rem; text-decoration:none; color:var(--ink); letter-spacing:-.04em; }
.brand span { margin-left:.5rem; font-size:.8rem; color:var(--muted); font-weight:500; letter-spacing:0; }
.topbar label { display:flex; gap:.5rem; align-items:center; font-size:.8rem; }
.topbar select { width:auto; }
.hero { padding:2.5rem 0 1.5rem; display:grid; grid-template-columns:1.5fr 1fr; gap:2rem; align-items:end; }
.eyebrow { font-size:.75rem; font-weight:750; letter-spacing:.13em; text-transform:uppercase; color:var(--purple); margin-bottom:.85rem; }
.lead { max-width:65ch; color:var(--muted); font-size:1.05rem; margin-bottom:0; }
.notice { border-left:3px solid #cdc6e8; padding:.25rem 0 .25rem 1rem; font-size:.875rem; color:var(--muted); }
.notice p:last-child { margin-bottom:0; }
.examples { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin:0 0 1.75rem; }
.examples span { font-size:.85rem; color:var(--muted); margin-right:.4rem; }
.examples button { font-size:.8rem; }
.examples a { font-size:.8rem; padding:.65rem .25rem; }
#results,#inputTitle { scroll-margin-top:1rem; }
.workspace { display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:1.5rem; align-items:start; padding-bottom:3rem; }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:1.4rem; min-width:0; }
.form-panel { padding:1.3rem; }
.input-caption,.small { font-size:.8rem; color:var(--muted); }
.input-caption { padding:.65rem .8rem; background:#f3f2f9; border-radius:9px; }
fieldset { margin:0; border:0; padding:0; min-width:0; }
legend { font-weight:700; padding:0; margin-bottom:.8rem; }
.fields { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.field { display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--ink); min-width:0; }
.field.wide { grid-column:1 / -1; }
.field small { font-size:.75rem; color:var(--muted); }
input,select { width:100%; color:var(--ink); background:#fff; border:1px solid #c9cad9; border-radius:8px; padding:.45rem .55rem; min-width:0; }
input:invalid { border-color:#ac6d39; }
details { border-top:1px solid var(--line); margin-top:1.15rem; padding-top:.7rem; }
summary { cursor:pointer; font-weight:650; padding:.35rem 0; min-height:44px; }
details[open] summary { margin-bottom:.7rem; }
.primary { background:var(--purple); color:white; border-color:var(--purple); width:100%; margin-top:1.2rem; }
.primary:hover { background:#51459e; color:white; }
.result-stack { display:grid; gap:1rem; }
.result-top { display:flex; justify-content:space-between; gap:.8rem; align-items:start; }
.tag { display:inline-block; font-size:.7rem; font-weight:750; letter-spacing:.05em; padding:.3rem .55rem; border-radius:5px; color:#554392; background:#efebfb; white-space:nowrap; }
.primary-result { margin:1.2rem 0; padding:1.4rem; border:1px solid #dcd5f1; border-radius:16px; background:#f7f5fd; }
.primary-result h2 { font-size:1.1rem; color:var(--purple); margin-bottom:.35rem; }
#scenarioValue { display:block; color:var(--purple); font-size:clamp(3.5rem,6vw,5rem); font-weight:750; letter-spacing:-.055em; line-height:1.1; margin-bottom:.85rem; }
.primary-result .interpretation { margin-bottom:0; }
.outlook-horizon { font-size:.9rem; margin-bottom:.5rem; color:var(--muted); }
.outlook-dates { font-size:1rem; font-weight:650; margin-bottom:.55rem; color:var(--ink); }
.methodology { font-size:.85rem; color:var(--muted); }
.save-details .primary { margin-top:0; }
.save-details p:last-child { margin-bottom:0; }
button:disabled { opacity:.65; cursor:not-allowed; }
.outlook-truncated { padding:.65rem .8rem; border-left:3px solid #a58542; background:#fffaf0; font-size:.85rem; }
.reference-outlook .primary-result { background:#f1f5f3; border-color:#d1ded7; }
.reference-outlook .primary-result h2,.reference-outlook #scenarioValue { color:var(--green); }
.reference-outlook-chart .scenario { stroke:var(--green); }
.reference-outlook-chart circle { fill:var(--green); }
.reference-provenance,.personal-unavailable { font-size:.85rem; color:var(--muted); }
.reference-provenance a { white-space:normal; }
.daily-detail details,.factor-detail { margin-top:0; }
.daily-detail details { border-top:0; padding-top:0; }
.daily-detail-value { color:var(--muted); font-size:.9rem; }
.daily-detail-value strong { color:var(--purple); font-size:1.4rem; }
.factor-detail > .panel { padding:0; border:0; }
.reference-comparison { color:var(--muted); padding:.2rem 0 .75rem; border-bottom:1px solid var(--line); }
.reference-comparison p { margin-bottom:.5rem; }
.reference-comparison p:first-child > span { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.2rem; }
.reference-comparison strong { font-size:.85rem; font-weight:550; }
.reference-toggle { display:flex; align-items:center; gap:.6rem; min-height:44px; cursor:pointer; font-size:.8rem; }
.reference-toggle input { width:18px; height:18px; min-height:18px; flex:none; accent-color:var(--purple); }
.result-context { font-size:.9rem; margin-bottom:.6rem; }
.interpretation { font-size:1rem; line-height:1.6; max-width:65ch; margin-bottom:.8rem; }
.essential-limit { background:#f6f5f9; color:var(--muted); border-radius:10px; padding:.7rem .85rem; font-size:.8rem; margin:1rem 0; }
.terms { margin-top:1rem; }
.terms dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; }
.terms dt { font-weight:650; font-size:.85rem; margin-bottom:.3rem; }
.terms dd { color:var(--muted); font-size:.8rem; margin:0; }
.curve-heading { margin-top:1.5rem; font-size:1rem; }
.standalone { margin:0; border:0; padding:0; }
.standalone summary { margin-bottom:0; }
.legend { display:flex; gap:1rem; flex-wrap:wrap; font-size:.75rem; color:var(--muted); margin:.5rem 0 0; }
.legend span::before { content:""; display:inline-block; vertical-align:middle; width:20px; margin-right:.4rem; border-top:3px solid var(--purple); }
.legend .baseline::before { border-top-color:#9899a9; border-top-style:dashed; }
.chart { width:100%; height:auto; display:block; overflow:visible; }
.chart text { fill:var(--muted); font-size:11px; font-family:inherit; }
.chart .grid { stroke:#e9e9ef; stroke-width:1; }
.chart .scenario { fill:none; stroke:var(--purple); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.chart .base { fill:none; stroke:#9899a9; stroke-width:2; stroke-dasharray:6 5; }
.chart .selected { stroke:#cbc4e3; stroke-width:1.5; }
.chart circle { fill:var(--purple); stroke:#fff; stroke-width:2; }
.context-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.context-grid p { margin:0; font-size:.8rem; }
.context-grid strong { display:block; font-size:1.2rem; }
.factor-list { list-style:none; padding:0; margin:0; }
.factor-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 1rem; padding:.8rem 0; border-top:1px solid #eeeef3; }
.factor-list strong { font-size:.875rem; }
.factor-list small { display:block; font-size:.75rem; color:var(--muted); }
.effect { color:var(--purple); font-size:.85rem; font-weight:700; text-align:right; max-width:12rem; }
.impact-summary { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem 1.5rem; padding:1rem; margin:1.2rem 0; background:#f6f4fb; border-radius:12px; }
.impact-summary strong { display:block; font-size:1.35rem; color:var(--purple); }
.impact-summary span,.impact-summary p { font-size:.75rem; color:var(--muted); }
.impact-summary strong span { font-size:1.2rem; padding:0 .35rem; }
.impact-summary p { margin:0; }
.impact-summary p strong { font-size:1rem; margin-top:.25rem; }
.impact-axis { display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.75rem; }
.impact-axis span:last-child { text-align:right; }
.impact-scale { display:flex; justify-content:space-between; margin:.35rem 5% 0; color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums; }
.impact-list { list-style:none; padding:0; margin:.5rem 0 0; }
.impact-list li { border-bottom:1px solid #eeeef3; padding:1rem 0 .8rem; }
.impact-heading { display:flex; align-items:start; justify-content:space-between; gap:.5rem 1rem; }
.impact-heading h3 { font-size:.9rem; margin:0; font-weight:650; }
.impact-heading h3 small { display:block; margin-top:.2rem; color:var(--muted); font-size:.75rem; font-weight:400; }
.impact-value { font-size:.8rem; white-space:nowrap; font-weight:650; padding-top:.1rem; }
.impact-bar { width:100%; height:28px; display:block; margin:.5rem 0; }
.impact-bar .track { stroke:#efedf5; stroke-width:2; }
.impact-bar .zero { stroke:#a4a1b7; stroke-width:1; }
.impact-bar .lower { fill:#52738d; }
.impact-bar .higher { fill:var(--purple); }
.impact-bar .neutral { fill:#9895a7; }
.impact-list .small { margin-bottom:0; }
.impact-footnote { margin:1rem 0 0; }
.muted { color:var(--muted); }
.empty { padding:1.5rem; border:1px solid #dfcd9e; background:#fffaf0; border-radius:20px; }
.empty h2 { color:#745b28; }
.empty li { margin-bottom:.4rem; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.78rem; }
th,td { text-align:left; border-bottom:1px solid var(--line); padding:.6rem .5rem; }
th { color:var(--muted); font-weight:600; }
code { font-size:.8rem; overflow-wrap:anywhere; }
.formula { background:#f6f5fb; padding:.8rem; border-radius:8px; }
.source-list { margin:0; padding-left:1.2rem; font-size:.8rem; }
.source-list li { margin-bottom:.5rem; }
footer { border-top:1px solid var(--line); padding:1rem 0 2rem; color:var(--muted); font-size:.8rem; }
[hidden] { display:none !important; }
@media(max-width:850px) { .hero { grid-template-columns:1fr; gap:1.25rem; } .workspace { grid-template-columns:1fr; } .fields { gap:.85rem; } .form-panel { order:0; } }
@media(max-width:480px) { .shell { width:calc(100% - 1.5rem); } .topbar { flex-wrap:wrap; } .hero { padding-top:1.7rem; } .panel { padding:1rem; border-radius:14px; } .primary-result { padding:1rem; } .result-top { flex-direction:column; } .context-grid,.terms dl { grid-template-columns:1fr; } .impact-heading { flex-direction:column; gap:.25rem; } }