:root{--cream:#f8f4ea;--ink:#22352b;--muted:#6d7469;--orange:#d97950;--orange-dark:#af5838;--sage:#dbe7d9;--sage-dark:#537563;--white:#fffdf7;--line:#dcded2;--serif:Georgia,"Iowan Old Style","Times New Roman",serif;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}body,p{line-height:1.62}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.wrap{width:min(1190px,calc(100% - 56px));margin-inline:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:white;padding:12px;z-index:100}.site-header{height:95px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.07em;font-size:23px;white-space:nowrap}.brand-mark{width:37px;height:37px;display:grid;place-items:center;color:var(--cream);border-radius:50%;background:var(--ink);font-size:22px;letter-spacing:0}.brand-italic{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.05em}.brand-dot{color:var(--orange)}nav{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:650}nav a:hover,.text-link:hover,.site-footer a:hover{color:var(--orange-dark)}.nav-github{border:1px solid var(--ink);padding:10px 17px;border-radius:99px}.hero{display:grid;grid-template-columns:1.12fr .88fr;min-height:585px;align-items:center;gap:15px;padding-top:50px;padding-bottom:55px}.kicker,.mini-overline{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--orange-dark);line-height:1.4;margin:0}.kicker-rule{display:inline-block;height:2px;background:var(--orange);width:30px;vertical-align:middle;margin-right:9px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.06em}h1{font-size:clamp(55px,6.1vw,91px);line-height:1.035;margin:27px 0}h1 em,h2 em{font-weight:400;color:var(--orange-dark)}.period{color:var(--orange)}.hero-lede{font-size:17px;max-width:575px;color:#58635a;line-height:1.83;margin-bottom:31px}.hero-link{display:inline-flex;gap:25px;align-items:center;font-size:14px;font-weight:800;border-bottom:2px solid var(--orange);padding-bottom:10px}.hero-link span{font-size:21px}.hero-art{position:relative;width:100%;height:460px;display:flex;align-items:center;justify-content:center}.orb{position:absolute;border-radius:50%}.orb-one{width:365px;height:365px;background:#ecdbc0;top:35px;left:calc(50% - 175px)}.orb-two{width:75px;height:75px;background:#d3dfcf;right:22px;top:21px}.cat-art{position:relative;width:100%;max-height:420px;z-index:2;filter:drop-shadow(0 10px 0 rgba(42,60,43,.02))}.art-stamp{position:absolute;z-index:3;right:-6px;top:77px;transform:rotate(9deg);width:128px;height:128px;border:1.5px dashed #d7a17a;border-radius:50%;background:#f6e8d7;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.art-stamp span{font-family:var(--serif);font-size:48px;line-height:1;color:var(--orange-dark)}.art-stamp small{font-size:10px;line-height:1.35;font-weight:650}.art-caption{position:absolute;bottom:0;color:#7e786d;font-size:12px;font-family:var(--serif);font-style:italic;letter-spacing:.02em}.calculator-section{background:#e8ede3;padding:89px 0 81px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:33px}.section-heading h2,.sources-section h2{font-size:clamp(38px,4vw,57px);line-height:1.11;margin:12px 0 0}.section-heading>p{font-size:13px;color:var(--muted);max-width:275px;margin:0 0 5px}.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.control-panel,.result-panel{border-radius:17px;padding:35px 38px;min-height:435px}.control-panel{background:var(--white);border:1px solid #dce2d6;box-shadow:0 16px 34px rgba(32,50,38,.045)}.panel-index{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;font-weight:800}.panel-index span+span{color:#a0a99a;font-size:10px;letter-spacing:.17em}.age-fields{display:flex;gap:20px;margin-top:28px;margin-bottom:30px}.age-fields>div:first-child{flex:0 0 135px}.age-fields>div:last-child{flex:1}.age-fields label{display:block;font-size:12px;color:#767b70;font-weight:650;margin-bottom:6px}.age-fields input,.age-fields select{width:100%;background:#f7f8f2;border:1px solid #dbe0d6;color:var(--ink);height:57px;border-radius:9px;padding:0 14px}.age-fields input{font-size:30px;font-weight:750;letter-spacing:-.055em}.age-fields select{font-size:13px}input[type=range]{display:block;width:100%;height:6px;accent-color:var(--orange);cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:11px;color:#8f988b;margin:9px 0 25px}.quick-label,.control-subhead{font-size:12px;font-weight:800;margin:0 0 12px}.presets{display:flex;gap:7px;flex-wrap:wrap}.presets button{font-size:11px;font-weight:700;background:#f4f6ef;border:1px solid #dce2d7;border-radius:7px;padding:9px 11px;color:#516356}.presets button.active,.presets button:hover{background:var(--ink);color:white;border-color:var(--ink)}.control-rule{height:1px;background:#e4e8df;margin:25px 0}.switcher{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:4px;background:#edf0e9;border-radius:9px}.switcher button{background:transparent;border:0;border-radius:7px;padding:11px 9px;font-size:12px;color:#637467;font-weight:750}.switcher .active{background:white;color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.06)}.method-explain{font-size:11px;color:#79877b;margin:12px 0 0;line-height:1.65;min-height:35px}.result-panel{background:var(--ink);color:#f7f4e9;position:relative;overflow:hidden}.result-panel:after{content:"";position:absolute;width:330px;height:330px;border-radius:50%;border:1px solid rgba(241,240,217,.09);right:-150px;top:-100px;pointer-events:none}.result-overline{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:750;letter-spacing:.16em;color:#bbd0bc}.result-star{font-size:25px;color:#d9a283}.human-num{display:flex;align-items:baseline;gap:19px;margin:27px 0 13px;line-height:1}.human-num span{font-family:var(--serif);font-size:clamp(86px,10vw,127px);letter-spacing:-.09em}.human-num small{font-size:13px;color:#c1d0c3;max-width:65px;line-height:1.35}.result-context{font-size:13px;color:#c1d0c3;max-width:320px;line-height:1.65;margin:0}.result-context strong{color:#fff}.result-divider{height:1px;background:rgba(240,246,228,.2);margin:31px 0 23px}.result-details{display:flex;justify-content:space-between;gap:12px}.result-details div{display:grid;gap:8px}.result-details div+div{text-align:right}.result-details span{font-size:11px;color:#adc0ae}.result-details strong{font-size:17px}.progress{background:#46594a;border-radius:40px;height:6px;overflow:hidden;margin-top:21px}.progress span{display:block;height:100%;background:#e6a582;transition:width .2s}.result-actions{display:flex;align-items:center;gap:13px;margin-top:27px}.action-main,.action-alt{border:0;padding:13px 17px;border-radius:7px;font-size:12px;font-weight:800}.action-main{background:#e6aa8c;color:#20352a}.action-main:hover{background:#f1c5a9}.action-alt{background:transparent;color:#d0d9cf;border:1px solid #647466}.comparison-band{display:grid;grid-template-columns:1.55fr repeat(3,1fr);margin-top:16px;border:1px solid #cdd8c9;background:#f5f7f0;border-radius:12px;overflow:hidden}.comparison-band>div{padding:19px 22px;border-right:1px solid #dce4d6;display:flex;flex-direction:column;justify-content:center}.comparison-band>div:last-child{border-right:0}.comparison-band p{font-family:var(--serif);font-size:21px;line-height:1.25;margin:6px 0 0}.comparison-band strong{font-family:var(--serif);font-size:34px;line-height:1.1;letter-spacing:-.05em}.comparison-band small{font-size:11px;color:#6f796f;margin-top:6px}.comparison-band .compare-feature{background:#f8e2d4}.method-section{padding-top:95px;padding-bottom:96px}.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:29px;margin:35px 0 42px}.reason-grid article{border-top:1.5px solid #aebfb0;padding-top:18px}.reason-number{color:var(--orange-dark);font-size:11px;font-weight:800;letter-spacing:.18em}.reason-grid h3{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:-.035em;margin:15px 0 9px}.reason-grid p{font-size:13px;color:#647066;margin:0;line-height:1.8}.formula-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:18px}.formula-card,.chart-card{border-radius:14px;padding:30px;min-width:0}.formula-card{background:#f0e7d8}.formula{font-family:var(--serif);font-size:clamp(23px,2.65vw,37px);letter-spacing:-.04em;line-height:1.4;margin:32px 0 24px;white-space:nowrap}.formula sub,.formula sup{font-size:50%}.formula-card>p:not(.mini-overline){font-size:13px;color:#5e665c;line-height:1.85}.formula-card strong{color:#283b2e}.formula-note{border-top:1px solid #d5c8b4;padding-top:16px;margin-top:22px;font-size:12px;color:#6d6e61}.chart-card{background:#fffdf7;border:1px solid var(--line)}.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.chart-head h3{font-size:16px;letter-spacing:-.03em;margin:0}.chart-head span{font-size:11px;color:#81877c;white-space:nowrap}.chart-card svg,.survival-card svg{display:block;width:100%;height:auto;margin:13px auto}.chart-legend{display:flex;flex-wrap:wrap;gap:15px;font-size:11px;color:#687368}.chart-legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:5px}.lg-orange{background:var(--orange)}.lg-green{background:#608b74}.lg-dotted{border-top:2px dashed #aeb4ae}.accuracy-caveat{margin:22px 0 0;color:#5d695e;font-size:13px;line-height:1.85;background:#f2efe5;padding:18px 24px;border-left:3px solid var(--orange)}.evidence-section{padding:95px 0;background:#e7e9df}.evidence-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.survival-card,.kidney-card{background:var(--white);padding:31px;border-radius:14px;border:1px solid #d9ded3;min-width:0}.survival-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.survival-metrics>div{background:#f3f4ed;padding:13px 10px;border-radius:7px}.survival-metrics strong{display:block;font-family:var(--serif);font-size:27px;letter-spacing:-.04em}.survival-metrics span,.small-print{font-size:10.5px;line-height:1.7;color:#81877b}.small-print{margin:17px 0 0}.kidney-card{background:#f6f0e4}.kidney-card h3{font-family:var(--serif);font-size:clamp(30px,3.5vw,44px);font-weight:400;line-height:1.15;letter-spacing:-.05em;margin:15px 0 18px}.kidney-card>p:not(.mini-overline):not(.small-print){font-size:13px;color:#646a5e;line-height:1.8}.diet-bars{display:grid;gap:19px;margin:22px 0}.diet-bars>div>div:first-child{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:6px}.bar-track{height:12px;border-radius:20px;background:#dedfd6;overflow:hidden}.bar-track span{display:block;height:100%;border-radius:20px}.text-link{display:inline-block;border-bottom:1px solid var(--orange);font-size:12px;font-weight:800;margin-top:22px}.table-section{padding-top:94px;padding-bottom:90px}.table-shell{overflow:auto;background:var(--white);border:1px solid var(--line);border-radius:13px}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th{background:#e9eee4;font-size:11px;letter-spacing:.05em;padding:17px 24px;white-space:nowrap}td{border-top:1px solid #e6e8df;padding:14px 24px}tbody tr:hover{background:#f8f5eb}td:first-child{font-weight:800}td:nth-child(2){font-weight:800;color:var(--orange-dark)}.sources-section{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px;padding-top:65px;padding-bottom:100px;border-top:1px solid var(--line)}.sources-lede{font-size:14px;color:var(--muted);max-width:290px;margin-top:18px}.source-list{margin:0;padding:0;list-style:none;counter-reset:sources}.source-list li{counter-increment:sources;border-bottom:1px solid #d9dfd5}.source-list li a{padding:16px 0;display:block}.source-list li strong{display:block;font-size:14px}.source-list li strong:before{content:"0" counter(sources) " / ";color:var(--orange-dark);font-size:11px;margin-right:7px}.source-list li span{display:flex;justify-content:space-between;font-size:11px;color:#7d8479;margin-left:39px;margin-top:3px}.source-list li b{font-size:14px;color:var(--orange-dark)}.source-list li a:hover strong{color:var(--orange-dark)}.closing{background:var(--ink);color:#fffaf0;border-radius:16px;display:flex;gap:30px;align-items:center;padding:36px 44px}.closing>span{font-size:58px;color:#de9f7b}.closing h2{font-size:35px;line-height:1.12;margin:0 0 6px}.closing h2 em{color:#ebb394}.closing p{margin:0;font-size:12px;color:#b5cabb}.closing a{margin-left:auto;border-bottom:1px solid #e4a781;white-space:nowrap;font-size:12px;font-weight:800}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:42px;padding-bottom:45px}.site-footer .brand{font-size:18px}.site-footer .brand-mark{height:29px;width:29px;font-size:16px}.site-footer p{font-size:11px;color:#818779;max-width:440px;margin:0}.site-footer>a:last-child{font-size:11px;font-weight:800;white-space:nowrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.hero{grid-template-columns:1fr .9fr}.hero-art{height:340px}.orb-one{width:280px;height:280px;left:calc(50% - 140px)}.art-stamp{width:100px;height:100px;right:-10px;top:36px}.art-stamp span{font-size:35px}.formula-layout,.evidence-grid{grid-template-columns:1fr}.comparison-band{grid-template-columns:1.2fr repeat(3,1fr)}}@media(max-width:700px){.wrap{width:calc(100% - 34px)}.site-header{height:74px}.brand{font-size:21px}nav{gap:12px}nav a:not(.nav-github){display:none}.nav-github{padding:9px 11px;font-size:11px}.hero{display:flex;flex-direction:column;gap:8px;padding:51px 0 44px;min-height:0}.hero-copy{width:100%}h1{font-size:clamp(47px,11.3vw,73px);line-height:1.035}.hero-lede{font-size:15px}.hero-art{height:315px;width:min(370px,100%);margin:0 auto}.orb-one{width:275px;height:275px;top:10px}.cat-art{max-height:310px}.art-stamp{top:14px;right:0}.art-caption{bottom:-5px}.calculator-section,.method-section,.evidence-section,.table-section{padding-top:63px;padding-bottom:65px}.section-heading{align-items:start;flex-direction:column;gap:10px;margin-bottom:25px}.section-heading h2,.sources-section h2{font-size:38px}.section-heading>p{max-width:100%}.calc-grid,.reason-grid{grid-template-columns:1fr}.control-panel,.result-panel{padding:24px 22px;min-height:0}.result-panel{min-height:370px}.human-num span{font-size:97px}.comparison-band{grid-template-columns:repeat(3,1fr)}.comparison-band>div:first-child{grid-column:1/-1;border-bottom:1px solid #dce4d6}.comparison-band>div{padding:13px 12px}.comparison-band strong{font-size:30px}.comparison-band small{font-size:10px}.reason-grid{gap:23px;margin-top:23px}.reason-grid article{padding-top:12px}.formula-card,.chart-card,.survival-card,.kidney-card{padding:22px}.formula{font-size:27px}.survival-metrics strong{font-size:23px}.sources-section{grid-template-columns:1fr;gap:23px;padding-top:45px;padding-bottom:65px}.closing{display:block;padding:28px}.closing>span{font-size:35px}.closing h2{font-size:30px}.closing a{display:inline-block;margin-top:18px}.site-footer{flex-wrap:wrap;align-items:start;padding-top:33px;padding-bottom:35px}.site-footer p{order:3;width:100%;max-width:100%}}@media(max-width:370px){.age-fields>div:first-child{flex:0 0 105px}.switcher button{font-size:10px}.presets button{padding:8px}.human-num span{font-size:80px}.formula{font-size:23px}.chart-head{flex-direction:column}.source-list li span{margin-left:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Make the two-line equation readable on narrow phones. */
.formula-v2{white-space:normal;overflow-wrap:normal;font-size:clamp(21px,2.6vw,33px)}.formula-v2 span{display:block;white-space:nowrap}@media(max-width:370px){.formula-v2{font-size:21px}}

/* The calculator itself is the landing page's hero. */
.experience-section{background:#edf1e9;padding:35px 0 66px;min-height:0}
.experience-heading{display:flex;justify-content:space-between;align-items:end;gap:36px;margin-bottom:23px}
.experience-heading h1{font-size:clamp(40px,4.6vw,66px);line-height:1.04;margin:12px 0 0;max-width:790px}
.experience-intro{font-size:13px;color:#607267;max-width:350px;margin:0 0 3px;line-height:1.72}
.experience-grid{grid-template-columns:1.03fr .97fr;gap:17px;align-items:stretch}
.experience-control{background:#fffdf7;padding:27px 31px;min-height:0}
.experience-control .panel-index{font-size:11px;letter-spacing:.12em;color:#617668}
.experience-control .panel-index span+span{color:#98aa99}
.hero-result{margin:7px 0 10px;border-bottom:1px solid #e7e9df;padding-bottom:13px}
.hero-number{display:flex;align-items:baseline;gap:15px;line-height:1.05}
.hero-number strong{font-family:var(--serif);font-weight:400;font-size:clamp(72px,7vw,99px);letter-spacing:-.085em;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-number span{font-size:13px;line-height:1.26;color:#6b7a70}
.hero-sub{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#748176}
.stage-pill{display:inline-flex;background:#e8ecdf;color:#415a48;border:1px solid #d2dfd2;border-radius:50px;padding:5px 11px;font-size:10px;font-weight:800}
.experience-control .age-fields{margin:12px 0 19px}
.experience-control .age-fields input,.experience-control .age-fields select{height:45px}
.experience-control .age-fields input{font-size:24px}
.experience-control .age-fields>div:first-child{flex:0 0 125px}
.experience-control .range-ends{margin-bottom:15px}
.experience-control .quick-label{font-size:10px;letter-spacing:.12em;margin-bottom:8px;color:#829082}
.experience-control .presets{gap:5px}
.experience-control .presets button{padding:7px 8px;font-size:10px}
.control-lower{display:grid;grid-template-columns:1.25fr .85fr;gap:17px;margin-top:17px;padding-top:15px;border-top:1px solid #e6e9df}
.control-lower .control-subhead{font-size:11px;margin-bottom:9px}
.control-lower .switcher button{font-size:10px;padding:9px 6px}
.record-meter{margin-top:4px}
.record-meter-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10px;color:#6f7e73}
.record-meter-label strong{font-size:13px;color:#324b39;white-space:nowrap}
.record-meter .progress{height:7px;background:#e0e8da;margin-top:13px}
.record-meter .progress span{background:#d97950}
.experience-control .method-explain{margin-top:10px;min-height:0}
.experience-control .result-actions{margin-top:14px}
.experience-control .action-main{background:var(--ink);color:#fffdf7}
.experience-control .action-main:hover{background:#3d5948}
.experience-control .action-alt{color:#4d6656;border-color:#cbd9cd}
.experience-section .comparison-band{background:#f7f8f3}
.scene-panel{min-height:492px;background:radial-gradient(ellipse at 52% 36%,#f9efe1 0,#eadbc7 53%,#d2e1d5 100%);position:relative;border:1px solid #d3e0d6;overflow:hidden;border-radius:17px;display:flex;flex-direction:column}
.scene-top,.scene-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;z-index:2;padding:23px 25px 0;font-size:10px;font-weight:800;letter-spacing:.13em;color:#416354}
.scene-status{border:1px solid rgba(72,112,79,.25);border-radius:100px;padding:7px 11px;background:rgba(255,255,255,.42);font-size:9px}
.cat-viewport{position:relative;min-height:330px;flex:1;isolation:isolate}
.cat-viewport:before{content:"";position:absolute;inset:16px 9% 0;background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.45),transparent 67%);z-index:-1}
#cat-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.cat-fallback{position:absolute;inset:0;display:grid;place-items:center;opacity:1}
.cat-fallback svg{width:min(88%,410px);height:98%;filter:drop-shadow(0 14px 12px rgba(35,57,39,.12))}
.cat-viewport.webgl-ready .cat-fallback{display:none}
.scene-foot{padding:0 24px 10px;letter-spacing:.08em;font-size:9px}
.scene-foot span+span{font-size:13px;color:#35513e;font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none}
.scene-note{padding:0 24px;margin:0 0 19px;font-size:10px;max-width:480px;line-height:1.5;color:#637769;z-index:2}
@media(min-width:1000px) and (max-height:780px){.experience-section{padding-top:25px}.experience-heading h1{font-size:48px}.scene-panel{min-height:430px}.cat-viewport{min-height:280px}.experience-control .hero-number strong{font-size:70px}.experience-control{padding:20px 27px}}
@media(max-width:950px){.experience-grid{grid-template-columns:1fr 1fr}.experience-control{padding:22px}.control-lower{grid-template-columns:1fr}.scene-panel{min-height:470px}.experience-intro{max-width:265px}.scene-top,.scene-foot{padding-left:14px;padding-right:14px}}
@media(max-width:700px){.experience-section{padding:25px 0 52px}.experience-heading{display:block;margin-bottom:19px}.experience-heading h1{font-size:clamp(39px,9vw,58px);margin:9px 0 11px}.experience-intro{max-width:100%;font-size:12px}.experience-grid{display:flex;flex-direction:column;gap:13px}.experience-control{padding:19px 20px}.hero-result{margin:8px 0 12px}.hero-number strong{font-size:78px}.experience-control .age-fields{margin:10px 0 16px}.control-lower{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding-top:12px}.scene-panel{min-height:360px}.cat-viewport{min-height:235px}.scene-top{padding-top:13px}.scene-note{margin-bottom:11px}.scene-foot{padding-top:0}}
@media(max-width:375px){.experience-control{padding:16px}.experience-control .age-fields>div:first-child{flex:0 0 95px}.control-lower{grid-template-columns:1fr}.hero-number strong{font-size:68px}.scene-panel{min-height:330px}}

/* Mobile: the live cat portrait follows the age readout, before the slider. */
@media(max-width:700px){
.experience-control>.scene-panel{min-height:240px;height:240px;margin:0 0 15px;border-radius:13px}
.experience-control>.scene-panel .scene-top{padding:12px 14px 0;font-size:9px}
.experience-control>.scene-panel .scene-status{font-size:8px;padding:5px 7px}
.experience-control>.scene-panel .cat-viewport{min-height:165px;flex:1}
.experience-control>.scene-panel .scene-foot{padding:0 14px 11px}
.experience-control>.scene-panel .scene-note{display:none}
}
@media(max-width:400px){.experience-control>.scene-panel{height:216px;min-height:216px}.experience-control>.scene-panel .cat-viewport{min-height:140px}}


/* True Cat Years · original Parisian anime / illustrated storybook identity */
:root{--cream:#fbf2e4;--ink:#344754;--muted:#73747a;--orange:#bd7b91;--orange-dark:#a76b80;--sage:#e3e6e2;--sage-dark:#72888a;--white:#fffaf3;--line:#dfc9ba;--serif:"Baskerville","Iowan Old Style","Palatino Linotype",Georgia,serif}
body{background:var(--cream);color:var(--ink)}
.site-header{height:79px;background:linear-gradient(96deg,#fffbf0,#f7e9de);border-bottom:1px solid #dcc4b4}
.brand{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.035em}.brand-italic{color:#b5768a;font-weight:400}.brand-dot{color:#c8a26f}
.brand-mark{background:#354b58;color:#fff5e2;font-size:23px}
nav{font-family:var(--serif);font-size:14px;letter-spacing:.03em}nav .nav-github{border-color:#c7a374;background:#fff8ec8c}
.kicker,.mini-overline{color:#ad7285;letter-spacing:.16em}.kicker-rule{background:#c9a475}
.experience-section{background:linear-gradient(122deg,#fff5e7,#f3e7e2 61%,#e4e3e8);padding:27px 0 60px}
.experience-heading{align-items:center;gap:19px;margin-bottom:23px}
.experience-heading h1{font-size:clamp(46px,5.85vw,84px);line-height:.95;font-weight:500;letter-spacing:-.061em;margin:8px 0 0;max-width:900px}
.experience-heading h1 em{font-weight:400;color:#b97d8e}
.experience-intro{font-family:var(--serif);font-size:18px;line-height:1.48;color:#786f77;max-width:307px}
.experience-grid{grid-template-columns:1fr 1.08fr;gap:16px}
.experience-control{border:2px solid #cfb496;outline:1px solid #e4d0b4;outline-offset:-9px;border-radius:23px;background:linear-gradient(150deg,#fffcf4,#fff0e5);box-shadow:0 12px 27px #574b4c13;padding:24px 29px}
.experience-control .panel-index{font-family:var(--serif);font-size:15px;color:#987b86}.experience-control .panel-index span+span{font:700 9px var(--sans);letter-spacing:.16em;color:#af9299}
.hero-result{border-bottom-color:#e8d0c0;margin:6px 0 11px}
.hero-number strong{font:500 clamp(73px,8vw,110px)/1 var(--serif);letter-spacing:-.074em;color:#344754}
.hero-number span{font-family:var(--serif);font-size:18px;color:#786c7b}
.hero-sub{font-family:var(--serif);font-size:13px;color:#897986}
.stage-pill{background:#f6e3e6;border:1px solid #e1bac4;color:#9c6980}
.age-fields input,.age-fields select{background:#fffaf3;border-color:#e3c9bc;color:#344754}
.experience-control input[type=range]{accent-color:#be788e}
.experience-control .range-ends{color:#977f88}
.experience-control .presets button{background:#fffaee;border-color:#e5c9ba;color:#8e7180;border-radius:50px}
.experience-control .presets button:hover,.experience-control .presets button.active{background:#b97c90;border-color:#b97c90;color:white}
.control-lower{border-top-color:#e6cec4}
.control-lower .switcher{background:#f4e5df}
.control-lower .switcher button{color:#786f80}
.control-lower .switcher .active{background:#fffcf3;color:#344754}
.record-meter .progress{background:#e9d8de}.record-meter .progress span{background:#c17c91}
.record-meter-label strong{color:#a46b7f}
.experience-control .method-explain{font-family:var(--serif);font-size:12px;color:#8f7b80}
.experience-control .action-main{background:#344754;border-radius:60px}.experience-control .action-main:hover{background:#557081}
.experience-control .action-alt{color:#8e6b7a;border-color:#e0bec0;border-radius:60px}
.scene-panel{position:relative;isolation:isolate;min-height:490px;border-radius:23px;border:2px solid #d7ad9b;outline:1px solid #fce7c9;outline-offset:-9px;background:#f5dece url("./paris-balcony.svg") center center/cover no-repeat;box-shadow:0 16px 29px #624d601b}
.scene-panel:after{content:"";pointer-events:none;position:absolute;inset:11px;border:1px solid #fff4df9e;border-radius:15px;z-index:1}
.scene-top,.scene-foot{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:.09em;color:#5d5c70;text-shadow:0 1px 9px #fff8ec}
.scene-status{background:#fff8e6bf;border-color:#cda5ac;color:#96718a}
.scene-top{padding:19px 22px 0}.scene-foot{padding:0 22px 8px}
.scene-foot span+span{font-size:17px;color:#6d596e}
.scene-note{font-family:var(--serif);font-size:11px;line-height:1.35;color:#6d6977;text-shadow:0 1px 8px #fff3eb;max-width:480px}
.cat-viewport{min-height:310px}.cat-viewport:before{background:radial-gradient(ellipse at 50% 58%,#fff3da2b,transparent 65%)}
.life-story-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;border:1px solid #dfc4b6;border-radius:14px;overflow:hidden;background:linear-gradient(90deg,#fff9eb,#f7e5db)}
.life-stage{display:flex;justify-content:center;align-items:center;gap:12px;padding:15px 9px;border-right:1px solid #e3caba}.life-stage:last-child{border:0}
.life-icon{font:400 29px var(--serif);color:#bb7994}.life-stage strong{display:block;font:600 18px var(--serif);color:#344754}.life-stage small{display:block;font:15px var(--serif);color:#b87787}
.comparison-band{border-color:#dfc5b5;background:#fff9ed}.comparison-band>div{border-color:#ead2c6}.comparison-band .compare-feature{background:#f8e5e7}.comparison-band strong{color:#344754}
.method-section,.table-section,.sources-section{background:#fbf2e4}
.section-heading h2,.sources-section h2{font-family:var(--serif);font-weight:500;color:#344754}.section-heading h2 em,.sources-section h2 em{color:#b97a8f}
.reason-grid article{border-color:#cbb3b7}.reason-grid h3{color:#425469}.reason-number{color:#ae7387}
.formula-card{background:#fff5e8;border:1px solid #dac3b4}.chart-card,.survival-card{background:#fffaf3;border-color:#dfcaba}
.accuracy-caveat{background:#fff5eb;border-left-color:#ba7891}
.evidence-section{background:linear-gradient(125deg,#e6e9eb,#f3e2e4)}
.kidney-card{background:#fff3e8;border-color:#e8c9bc}
.table-shell{background:#fffaf3;border-color:#dfc8b9}th{background:#f4e2e3}td:nth-child(2){color:#a76b80}
.closing{background:linear-gradient(115deg,#405568,#6c6b81);color:#fff7ed}.closing h2 em,.closing>span{color:#efc1c7}
.site-footer{border-top:1px solid #dfc7bb}.site-footer .brand{font-size:23px}
@media(max-width:950px){.experience-heading h1{font-size:clamp(45px,6.2vw,69px)}.experience-intro{font-size:16px}.experience-control{padding:21px}}
@media(max-width:700px){.site-header{height:70px}.brand{font-size:23px}.experience-heading h1{font-size:clamp(47px,10vw,64px)}.experience-intro{max-width:410px;font-size:15px}.experience-control{padding:20px}.experience-control>.scene-panel{height:248px;min-height:248px;margin:7px 0 13px}.experience-control>.scene-panel .cat-viewport{min-height:174px}.life-story-strip{grid-template-columns:1fr 1fr}.life-stage{justify-content:flex-start;border-bottom:1px solid #e3caba}.life-stage:nth-child(even){border-right:0}.life-stage:nth-child(n+3){border-bottom:0}.life-stage strong{font-size:16px}.life-stage small{font-size:13px}.life-icon{font-size:23px}}
@media(max-width:380px){.experience-control>.scene-panel{height:226px;min-height:226px}.experience-control>.scene-panel .cat-viewport{min-height:149px}.life-stage{padding:10px 8px;gap:5px}}

/* Subtle original anime sparkle detailing in the painted scene. */
.scene-panel{overflow:hidden}
.scene-panel .cat-fallback svg{width:min(88%,340px);height:95%;filter:drop-shadow(0 12px 9px rgba(72,66,90,.19))}
.scene-panel .cat-viewport{z-index:1}
.scene-panel:before{content:"✧";position:absolute;z-index:1;top:17%;right:17%;font:32px var(--serif);color:#fff7de;opacity:.85;text-shadow:0 0 17px #fff}
@media(max-width:700px){.scene-panel:before{font-size:23px}}

/* Depth of field: gently blur only the illustrated Paris backdrop.
   The WebGL cat and calculator UI stay crisp above this layer. */
.scene-panel{
  background:#f5dece;
  overflow:hidden;
}
.scene-panel::before{
  content:"";
  position:absolute;
  inset:-6px;
  top:-6px;
  right:-6px;
  bottom:-6px;
  left:-6px;
  z-index:0;
  pointer-events:none;
  background:#f5dece url("./paris-balcony.svg") center center / cover no-repeat;
  filter:blur(2.5px);
  transform:scale(1.015);
  opacity:1;
  font:initial;
  color:initial;
  text-shadow:none;
}
.scene-panel .cat-viewport{position:relative;z-index:1}
.scene-panel .scene-top,.scene-panel .scene-foot,.scene-panel .scene-note{position:relative;z-index:2}



/* FAST-FORWARD PARIS — ONE DAY/NIGHT PER TWO CAT YEARS
   The storyboard is sampled via --tl-delay. Animation is ALWAYS paused.
   Both 0% and 100% match, so the age slider can spin through day/night
   cycles smoothly, forward or backward, without resets or autoplay. */
.scene-panel{--tl-duration:42s;--tl-delay:-21s}
.paris-timelapse{
 position:absolute;inset:-6px;z-index:0;overflow:hidden;
 pointer-events:none;filter:blur(2.5px);transform:scale(1.015);
}
.paris-timelapse .tl-warmth,
.paris-timelapse .tl-sunset,
.paris-timelapse .tl-nightfall{position:absolute;inset:0;pointer-events:none;opacity:0}
.tl-warmth{background:linear-gradient(115deg,rgba(255,245,206,.12) 12%,rgba(255,211,169,.28) 77%)}
.tl-sunset{background:linear-gradient(180deg,rgba(245,133,130,.33),rgba(239,139,156,.37) 60%,rgba(235,142,94,.15))}
.tl-nightfall{background:linear-gradient(180deg,rgba(21,28,68,.84),rgba(43,39,83,.74) 62%,rgba(29,39,77,.82))}
.tl-animation-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tl-clouds,.tl-sun,.tl-moon,.tl-stars,.tl-windows .tl-window-early,.tl-windows .tl-window-late{transform-box:view-box}
.paris-timelapse .tl-warmth,
.paris-timelapse .tl-sunset,
.paris-timelapse .tl-nightfall,
.paris-timelapse .tl-clouds,
.paris-timelapse .tl-sun,
.paris-timelapse .tl-moon,
.paris-timelapse .tl-stars,
.paris-timelapse .tl-window-early,
.paris-timelapse .tl-window-late{
 animation-duration:var(--tl-duration);
 animation-timing-function:linear;
 animation-delay:var(--tl-delay);
 animation-play-state:paused!important;
 animation-iteration-count:1;
 animation-fill-mode:both;
}
.tl-warmth{animation-name:tl-warmth}
.tl-sunset{animation-name:tl-sunset}
.tl-nightfall{animation-name:tl-night}
.tl-clouds{animation-name:tl-clouds}
.tl-sun{animation-name:tl-sun-path}
.tl-moon{animation-name:tl-moon-path}
.tl-stars{animation-name:tl-stars-in}
.tl-window-early{animation-name:tl-lights}
.tl-window-late{animation-name:tl-lights-late}
/* Don't autoplay twinkling; the stars themselves are scrubbed as well. */
.tl-stars-a,.tl-stars-b{opacity:1}
@keyframes tl-warmth{
 0%,100%{opacity:.12}13%{opacity:.38}32%{opacity:.21}
 50%{opacity:.55}66%{opacity:.12}83%{opacity:0}94%{opacity:.035}
}
@keyframes tl-sunset{
 0%,100%{opacity:0}39%{opacity:0}53%{opacity:.47}
 62%{opacity:.84}73%{opacity:.23}78%{opacity:0}
}
@keyframes tl-night{
 0%,100%{opacity:0}58%{opacity:0}67%{opacity:.17}
 78%{opacity:.80}86%{opacity:.91}91%{opacity:.77}95%{opacity:.30}
}
@keyframes tl-sun-path{
 0%,100%{opacity:.52;transform:translate(-130px,111px)}
 13%{opacity:.82;transform:translate(-50px,37px)}
 31%{opacity:.91;transform:translate(68px,-37px)}
 49%{opacity:.86;transform:translate(202px,13px)}
 65%{opacity:.90;transform:translate(339px,149px)}
 75%,94%{opacity:0;transform:translate(390px,195px)}
 96%{opacity:.14;transform:translate(-145px,134px)}
}
@keyframes tl-moon-path{
 0%,100%{opacity:0;transform:translate(330px,168px)}
 64%{opacity:0;transform:translate(330px,168px)}
 73%{opacity:.46;transform:translate(280px,78px)}
 86%{opacity:.93;transform:translate(178px,-63px)}
 94%{opacity:.40;transform:translate(88px,3px)}
 98%{opacity:0;transform:translate(52px,93px)}
}
@keyframes tl-stars-in{
 0%,100%{opacity:0}66%{opacity:0}
 78%{opacity:.60}85%{opacity:.96}
 91%{opacity:.76}97%{opacity:0}
}
@keyframes tl-lights{
 0%,100%{opacity:0}66%{opacity:0}
 76%{opacity:.67}85%{opacity:.95}92%{opacity:.50}98%{opacity:0}
}
@keyframes tl-lights-late{
 0%,100%{opacity:0}72%{opacity:0}
 81%{opacity:.51}89%{opacity:.87}95%{opacity:.22}98%{opacity:0}
}
@keyframes tl-clouds{
 0%,100%{opacity:.52;transform:translate(-28px,3px)}
 28%{opacity:.53;transform:translate(-2px,-5px)}
 52%{opacity:.34;transform:translate(27px,3px)}
 81%{opacity:.14;transform:translate(49px,-7px)}
 94%{opacity:.27;transform:translate(55px,-3px)}
}
.scene-status-wrap{display:flex;align-items:center;gap:7px}
.scene-daypart{
 font:700 10px var(--sans);letter-spacing:.08em;text-transform:uppercase;
 color:#744f70;text-shadow:0 1px 6px #fff8e7;
 background:rgba(255,250,237,.65);padding:6px 8px;
 border:1px solid rgba(206,164,170,.65);border-radius:99px;
 white-space:nowrap;
}
@media(max-width:700px){.scene-daypart{font-size:8px;padding:5px 7px}}