@charset "UTF-8";
:root { color-scheme: light; --bg:#f5f6f8; --surface:#fff; --ink:#19242f; --muted:#556473; --line:#d2d8e0; --accent:#08758a; --violet:#724ac6; --magenta:#b53070; --soft:#edf0f5; --focus:#075dc6; font-family:Inter,"Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.6; letter-spacing:-.012em; font-synthesis:none; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#111820; --surface:#18212c; --ink:#eff3f9; --muted:#adb9ca; --line:#3c495a; --accent:#58d9e7; --violet:#b7a0ff; --magenta:#f08abd; --soft:#202c3a; --focus:#86bbff; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#111820; --surface:#18212c; --ink:#eff3f9; --muted:#adb9ca; --line:#3c495a; --accent:#58d9e7; --violet:#b7a0ff; --magenta:#f08abd; --soft:#202c3a; --focus:#86bbff; } }
* { box-sizing:border-box; } html { scroll-padding-top:24px; } body { margin:0; background:var(--bg); color:var(--ink); } a { color:inherit; text-underline-offset:.23em; } a:hover { color:var(--accent); } button,input,select { font:inherit; color:inherit; } button,select,input[type="number"] { min-height:44px; border:1px solid var(--line); background:var(--surface); border-radius:4px; } button { cursor:pointer; padding:.55rem .9rem; } button:hover,select:hover { border-color:var(--accent); } select { padding:.4rem 2rem .4rem .7rem; } select option { color:var(--ink); background:var(--surface); } input[type="number"] { padding:.4rem .7rem; width:130px; font-variant-numeric:tabular-nums; } input[type="range"] { accent-color:var(--accent); min-height:44px; cursor:pointer; } input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); } :focus-visible { outline:3px solid var(--focus); outline-offset:4px; } [disabled] { cursor:default; opacity:.5; } h1,h2,h3,p,figure { margin:0; } h1,h2,h3 { line-height:1.12; letter-spacing:-.045em; font-weight:550; } h2 { font-size:clamp(1.8rem,3vw,2.6rem); } h3 { font-size:1.2rem; } p + p { margin-top:1.15em; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .skip-link { position:fixed; top:-100px; left:20px; padding:15px; background:var(--surface); z-index:10; } .skip-link:focus { top:15px; }
.site-header { border-bottom:1px solid var(--line); } .header-inner { max-width:1400px; margin:auto; padding:20px 48px; display:flex; align-items:center; gap:24px; } .wordmark { font-weight:750; font-size:1.5rem; letter-spacing:-.055em; text-decoration:none; white-space:nowrap; } .wordmark span { color:var(--accent); } .brand-section { border-left:1px solid var(--line); padding-left:24px; color:var(--muted); font-size:.85rem; } nav { margin-left:auto; display:flex; align-items:center; gap:24px; } nav a { font-size:.82rem; text-decoration:none; color:var(--muted); padding:10px 0; } .preferences { display:flex; gap:15px; align-items:center; } .preferences a { font-size:.78rem; font-weight:600; text-decoration:none; padding:12px 0; } .preferences select { font-size:.75rem; background:transparent; min-width:81px; } main { max-width:1280px; padding:0 48px; margin:auto; }
.hero { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:78px 0 54px; align-items:center; } .eyebrow { font-size:.68rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .small-cross { color:var(--accent); font-size:1.3rem; margin-right:8px; vertical-align:-.06em; } h1 { font-size:clamp(2.6rem,4.7vw,4.15rem); line-height:1.075; margin:22px 0 24px; } h1 em { font-style:normal; color:var(--accent); } .intro { color:var(--muted); font-size:1rem; line-height:1.75; max-width:475px; } .text-link { display:inline-flex; gap:30px; align-items:center; min-height:44px; margin-top:25px; font-size:.82rem; font-weight:600; text-decoration:none; } .text-link span { font-size:1.3rem; color:var(--accent); } .hero-meta { display:flex; gap:22px; color:var(--muted); font-size:.65rem; letter-spacing:.08em; margin-top:30px; } .hero-meta span + span { border-left:1px solid var(--line); padding-left:22px; }
.counter-panel { position:relative; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:27px 30px 0; box-shadow:0 10px 45px #263e6310; overflow:hidden; } .counter-panel::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,var(--accent),var(--violet),var(--magenta)); } .counter-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; } .data-badge { font-size:.66rem; color:var(--muted); display:flex; align-items:center; gap:7px; } .data-badge > span { width:5px; height:5px; border-radius:50%; background:var(--accent); } .counter-panel h2 { font-size:.9rem; line-height:1.5; letter-spacing:0; color:var(--muted); margin-top:31px; } .counter-number { font-size:clamp(3.2rem,6.6vw,6rem); line-height:1.08; letter-spacing:-.065em; font-weight:500; font-variant-numeric:tabular-nums; margin:9px 0 9px; white-space:nowrap; } .currency { font-size:1.6rem; color:var(--muted); margin-left:12px; letter-spacing:-.03em; } .counter-comparison { font-size:.92rem; } .counter-comparison strong { font-weight:600; color:var(--accent); } .counter-context,.counter-period { color:var(--muted); font-size:.74rem; margin-top:14px; } .counter-period { margin-top:3px; } .counter-period strong { font-weight:500; color:var(--ink); } .spark { display:block; width:100%; margin:22px 0 15px; overflow:visible; } .spark path { stroke:var(--accent); stroke-width:2; fill:none; } .counter-foot { border-top:1px solid var(--line); margin:0 -30px; padding:15px 30px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:.67rem; color:var(--muted); } .counter-foot p { max-width:280px; } .counter-foot a { white-space:nowrap; }
.calculator { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:25px 0 20px; } .calculator-controls { display:grid; grid-template-columns:1.15fr .8fr 1.2fr 1fr; gap:25px; align-items:end; } .calculator-controls > label { font-size:.73rem; color:var(--muted); display:flex; flex-direction:column; gap:7px; } .input-unit { display:flex; gap:10px; align-items:center; } .input-unit span { white-space:nowrap; } .calculator-controls .check-label { min-height:44px; flex-direction:row; align-items:center; gap:9px; font-size:.78rem; } .playback-controls { display:flex; align-items:center; gap:16px; margin:24px 0 8px; } .playback-controls button { font-size:.75rem; white-space:nowrap; } .playback-controls button > span { margin-right:5px; } .plain-button { background:transparent; border-color:transparent; font-size:.78rem; } .period-label { display:flex; align-items:center; gap:12px; font-size:.7rem; color:var(--muted); flex:1; white-space:nowrap; } .period-label input { width:100%; min-width:60px; } .playback-status { font-size:.72rem; color:var(--muted); min-width:120px; text-align:right; } .footnote { font-size:.72rem; color:var(--muted); line-height:1.7; } .notice { font-size:.9rem; padding:12px; border-left:2px solid var(--accent); margin-top:12px; }
.history-section { padding:65px 0; } .section-heading { display:grid; grid-template-columns:1.15fr 1fr; gap:65px; align-items:end; margin-bottom:30px; } .section-heading h2 { margin-top:12px; } .section-heading > p { color:var(--muted); font-size:.92rem; line-height:1.75; max-width:440px; } .chart-panel { background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:22px 24px 18px; } .chart-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; } .chart-toolbar > p { font-size:.72rem; color:var(--muted); } .view-buttons { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:5px; } .view-buttons button { font-size:.72rem; min-height:35px; border:0; background:transparent; } .view-buttons button[aria-pressed="true"] { color:var(--bg); background:var(--ink); } .history-chart { width:100%; display:block; margin:20px 0 10px; } .chart-grid line { stroke:var(--line); stroke-width:1; } .chart-grid text,.year-tick { fill:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; } .bar { fill:var(--magenta); cursor:crosshair; } .bar:hover { fill:var(--accent); } .bar.negative { fill:var(--violet); } .bar.partial { fill-opacity:.5; stroke:var(--magenta); stroke-width:1; stroke-dasharray:3 2; } .zero-line { stroke:var(--muted); stroke-width:1; } .cumulative-line { fill:none; stroke:var(--accent); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; } .chart-dot { fill:var(--surface); stroke:var(--accent); stroke-width:2; cursor:crosshair; } .chart-dot:hover { fill:var(--accent); } .inspector { border-top:1px solid var(--line); padding:15px 0 12px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .inspector > label { font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:12px; } .inspector select { font-size:.8rem; min-height:40px; } #inspect-values { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:end; gap:8px 25px; font-size:.75rem; color:var(--muted); } #inspect-values strong { font-size:.85rem; color:var(--ink); font-weight:550; } #inspect-values b { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600; } .data-actions { display:flex; flex-wrap:wrap; align-items:center; gap:25px; margin:15px 0 6px; font-size:.75rem; } .data-actions a { padding:12px 0; text-decoration:none; font-weight:600; } .data-actions a span { color:var(--accent); margin-left:12px; } #share-status { font-size:.72rem; color:var(--muted); } .source-note { color:var(--muted); font-size:.7rem; } sup a { color:var(--accent); padding:6px 3px; text-decoration:none; font-size:.65rem; } sup a:hover { text-decoration:underline; } details { border-bottom:1px solid var(--line); } summary { cursor:pointer; padding:18px 0; font-size:.88rem; font-weight:550; } summary::marker { color:var(--accent); } details[open] > summary { color:var(--accent); } .data-details { margin-top:12px; } .table-scroll { overflow-x:auto; padding-bottom:16px; } table { width:100%; border-collapse:collapse; text-align:right; font-size:.75rem; font-variant-numeric:tabular-nums; white-space:nowrap; } caption { text-align:left; color:var(--muted); font-size:.72rem; padding:8px 0 15px; } th,td { border-bottom:1px solid var(--line); padding:10px 12px; } th { font-weight:550; } thead th { color:var(--muted); font-size:.7rem; } th:first-child { text-align:left; }
.editorial-section { padding:60px 0; border-top:1px solid var(--line); } .editorial-body { max-width:760px; } .editorial-body p { font-size:.98rem; line-height:1.8; } .editorial-body .editorial-question { border-left:2px solid var(--accent); padding-left:20px; margin-top:24px; color:var(--ink); font-weight:550; } .zone-diagrams { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:36px 0 12px; } .zone-diagrams figure { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:20px; } figcaption { font-size:.8rem; font-weight:600; min-height:44px; } .map-index { font-size:.7rem; font-weight:400; display:block; color:var(--muted); margin-bottom:10px; } .zone-stack { display:flex; flex-direction:column; height:245px; margin:20px auto 15px; max-width:180px; } .zone { flex:1; display:flex; align-items:center; justify-content:center; font-size:.73rem; font-weight:550; border:1px solid var(--line); border-radius:2px; color:var(--ink); } .zone-1 { background:var(--soft); } .zone-2 { background:color-mix(in srgb,var(--violet) 12%,var(--surface)); } .zone-3 { background:color-mix(in srgb,var(--accent) 15%,var(--surface)); } .zone-4 { background:color-mix(in srgb,var(--magenta) 22%,var(--surface)); border-color:var(--magenta); } .cut { font-size:.6rem; line-height:1.7; color:var(--muted); text-align:center; } .cut-highlight { color:var(--magenta); font-weight:650; } .zone-new { flex:2; display:flex; gap:5px; align-items:stretch; } .zone-new .zone { flex:1; writing-mode:vertical-rl; } .vertical-cut { writing-mode:vertical-rl; } .zone-diagrams figure > p { font-size:.65rem; color:var(--muted); margin-top:18px; }
.known-section { padding:58px 45px; margin:0 -45px 55px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--soft); display:grid; grid-template-columns:.55fr 1fr; gap:70px; } .known-year { font-size:clamp(4rem,8vw,7rem); letter-spacing:-.07em; font-variant-numeric:tabular-nums; line-height:1.1; color:var(--accent); } .known-year span { display:block; font-size:1.3rem; letter-spacing:-.035em; margin-top:15px; color:var(--muted); } .known-section h2 { margin:13px 0 20px; } .section-lead { font-size:1.05rem; line-height:1.7; margin-bottom:25px; } .known-section .editorial-body p { font-size:.92rem; } .welfare-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:65px; align-items:start; } .welfare-example { background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:26px; margin-top:5px; } .balance-row { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:25px; font-size:.85rem; } .balance-row strong { font-variant-numeric:tabular-nums; font-weight:550; font-size:1.5rem; color:var(--accent); white-space:nowrap; } .balance-row .loss { color:var(--magenta); } .balance-total { border-top:1px solid var(--line); padding-top:20px; } .example-note { font-size:.73rem; line-height:1.7; color:var(--muted); margin-top:24px; } .example-conclusion { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; font-size:.94rem; }
.method-section { padding:50px 0 65px; border-top:1px solid var(--line); } .method-section h2 { margin:12px 0 26px; } .method-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:65px; } .formula { font-size:.88rem; font-variant-numeric:tabular-nums; color:var(--accent); background:var(--soft); padding:16px 20px; margin-bottom:8px; } .method-copy { padding:0 0 22px; } .method-copy p { font-size:.82rem; line-height:1.8; color:var(--muted); } .method-copy strong { font-weight:600; color:var(--ink); } .sources h3 { margin:3px 0 18px; } .sources ol { margin:0; padding:0 0 0 24px; font-size:.73rem; color:var(--muted); } .sources li { padding:9px 0 9px 8px; border-bottom:1px solid var(--line); scroll-margin-top:35px; } .sources li:target { color:var(--ink); background:var(--soft); outline:1px solid var(--accent); } .sources a { text-decoration:none; } .sources a:hover { text-decoration:underline; } .sources a span { color:var(--accent); }
.site-footer { max-width:1280px; margin:auto; padding:30px 48px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:60px; } .site-footer p { font-size:.73rem; color:var(--muted); line-height:1.75; margin-top:8px; } .site-footer .wordmark { font-size:1.3rem; } .privacy details { border:0; } .privacy summary { font-size:.75rem; padding:12px 0 0; } .privacy button { padding-left:0; } .chart-scroll { overflow:auto; }
@media(min-width:1500px) { .hero { padding-top:92px; padding-bottom:65px; } }
.icon { width:1em; height:1em; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
#theme-toggle { display:grid; place-items:center; width:44px; min-width:44px; padding:0; background:transparent; }
.theme-icon { width:20px; height:20px; }
.theme-icon-dark { display:none; }
#theme-toggle[data-theme="dark"] .theme-icon-light, #theme-toggle[data-theme="light"] .theme-icon-dark { display:none; }
#theme-toggle[data-theme="dark"] .theme-icon-dark, #theme-toggle[data-theme="light"] .theme-icon-light { display:block; }
@media(max-width:1050px) { main { padding:0 32px; } .header-inner { padding:18px 32px; gap:18px; } nav { gap:15px; } .brand-section { display:none; } .hero { gap:30px; } .counter-panel { padding:24px 24px 0; } .counter-foot { margin:0 -24px; padding:15px 24px; } .calculator-controls { gap:18px; } .period-label { flex-wrap:wrap; gap:0; } .playback-controls { gap:10px; } .section-heading,.welfare-grid,.method-grid { gap:35px; } .zone-diagrams { gap:12px; } .zone-diagrams figure { padding:16px; } .known-section { margin-left:-20px; margin-right:-20px; padding:40px 20px; gap:40px; } }
@media(max-width:760px) { .header-inner { padding:13px 22px; gap:16px; flex-wrap:wrap; } .wordmark { font-size:1.35rem; } .preferences { margin-left:auto; gap:16px; } nav { order:3; width:100%; margin-left:0; gap:24px; border-top:1px solid var(--line); padding-top:6px; } nav a { font-size:.76rem; } main { padding:0 22px; } .hero { grid-template-columns:1fr; gap:30px; padding:42px 0 30px; } h1 { font-size:clamp(2.65rem,8vw,3.8rem); max-width:600px; } .intro { max-width:600px; } .hero-meta { margin-top:18px; } .text-link { margin-top:15px; } .counter-panel { padding:24px 25px 0; } .counter-number { font-size:clamp(3.6rem,11vw,5.6rem); } .counter-panel h2 { margin-top:23px; } .counter-foot { margin:0 -25px; padding:15px 25px; } .calculator-controls { grid-template-columns:1fr 1fr; gap:20px; } .playback-controls { flex-wrap:wrap; gap:8px; margin-top:20px; } .period-label { order:3; flex:1; width:100%; min-width:65%; margin-top:4px; } .playback-status { order:4; min-width:95px; } .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:24px; } .section-heading > p { max-width:600px; } .history-section,.editorial-section { padding:40px 0; } .chart-panel { padding:18px 14px; } .chart-toolbar { flex-wrap:wrap; gap:10px; } .chart-scroll .history-chart { min-width:600px; } .inspector { align-items:start; flex-direction:column; gap:14px; } #inspect-values { justify-content:start; gap:10px 18px; } #inspect-values strong { width:100%; } .data-actions { gap:8px 22px; } .zone-diagrams { grid-template-columns:repeat(2,1fr); gap:14px; } .zone-stack { height:220px; } .known-section { grid-template-columns:1fr; gap:25px; margin:5px -22px 35px; padding:35px 22px; } .known-year { font-size:4rem; display:flex; align-items:baseline; gap:20px; } .known-year span { font-size:1.1rem; } .welfare-grid,.method-grid { grid-template-columns:1fr; gap:30px; } .welfare-example { max-width:480px; width:100%; } .method-section { padding:35px 0; } .site-footer { padding:25px 22px; grid-template-columns:1fr; gap:18px; } }
@media(max-width:390px) { nav { gap:18px; } .counter-number { font-size:3.35rem; } .currency { font-size:1.2rem; margin-left:8px; } .counter-top .eyebrow { font-size:.6rem; letter-spacing:.07em; } .counter-foot { flex-direction:column; align-items:start; gap:6px; } .calculator-controls { gap:15px; } .input-unit { flex-wrap:wrap; gap:3px; } .input-unit input { width:100%; } .period-label { min-width:60%; } .playback-status { min-width:90px; font-size:.67rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media print { .site-header,.calculator,.data-actions,.site-footer,.view-buttons { display:none; } :root { --bg:#fff; --surface:#fff; --ink:#000; --muted:#333; --line:#bbb; --accent:#075a6a; --magenta:#8a2357; } main { padding:0; } .hero { padding:20px 0; } .counter-panel { box-shadow:none; } details { display:block; } .chart-scroll .history-chart { min-width:0; } }

.chart-guide { pointer-events:none; }
.chart-guide line { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 4; }
.chart-guide circle { fill:var(--surface); stroke:var(--accent); stroke-width:2.5; }
.chart-guide circle.annual { stroke:var(--magenta); }
.chart-guide circle.negative { stroke:var(--violet); }
@media print { .chart-guide { display:none; } }