*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#13202b;background:#f4f7f6}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}.top{background:#0f2e2a;color:#fff}.top .wrap{display:flex;align-items:center;gap:12px;height:56px}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:20px;display:flex;gap:8px;align-items:center}.tag{opacity:.75;font-size:14px}
h1{font-size:clamp(22px,3vw,32px);margin:16px 0 8px}h2{margin:0 0 6px}.muted{color:#5b6b75;font-size:14px}
.ad{min-height:90px;border:2px dashed #b8c6c2;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8a9a96;font-size:13px;margin:12px 0;background:#fbfcfc}
.mode{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}.mode button{border:2px solid #0f2e2a;background:#fff;color:#0f2e2a;padding:8px 14px;border-radius:999px;font-weight:600;cursor:pointer}.mode button.on{background:#0f2e2a;color:#fff}
.calc{display:grid;grid-template-columns:380px 1fr;gap:20px}.inputs,.out,.results,.faq,.reading{background:#fff;border-radius:14px;padding:18px;box-shadow:0 1px 3px #0001}
.sl{margin-bottom:12px}.sl label{display:flex;justify-content:space-between;font-weight:600;font-size:14px}.sl output{font-variant-numeric:tabular-nums;color:#0b7a5f}
input[type=range]{width:100%;accent-color:#0b7a5f;height:28px}.hide{display:none!important}.derived{font-size:13px;color:#5b6b75;margin:4px 0 8px}
details summary{cursor:pointer;font-weight:600;margin:6px 0}.chk{font-size:14px;display:block;margin:8px 0}
.clock{background:#0f2e2a;color:#fff;border-radius:12px;padding:16px;text-align:center;transition:background .3s}.clock.emer{background:#8b1111;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px #e5393533}}.clabel{font-size:15px;opacity:.85}.csub{font-size:15px;margin-top:6px;opacity:.9}.cexplain{font-size:13px;margin-top:8px;opacity:.8;line-height:1.4}
.flip{display:flex;justify-content:center;gap:6px;margin:8px 0;min-height:84px}.d{display:inline-block;min-width:52px;padding:6px 8px;font:800 60px/1.15 ui-monospace,Menlo,monospace;background:#1d4a43;border-radius:8px;position:relative}
.emer .d{background:#b71c1c}.d.f{animation:flip .35s ease}.d.wide{font-size:44px;line-height:1.6;padding:6px 14px}@keyframes flip{0%{transform:rotateX(90deg)}100%{transform:none}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}.stats div{background:#f1f6f4;border-radius:10px;padding:10px}.stats span{display:block;font-size:12px;color:#5b6b75}.stats b{font-size:20px;font-variant-numeric:tabular-nums}.stats .agestat{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:baseline;gap:4px 8px}.stats .agestat em{font-style:normal}.stats .agestat b{font-size:18px}@media(max-width:520px){.stats .agestat{grid-template-columns:1fr auto}}.stats .flowstat{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.stats .flowstat span{display:inline}.stats .flowstat b{font-size:18px}
.bar{display:block;height:6px;background:#dde7e3;border-radius:3px;margin-top:6px}.bar i{display:block;height:100%;background:#0b7a5f;border-radius:3px;transition:width .4s}
#chart{width:100%;height:auto}#chart path{transition:d .5s ease}.legend{font-size:13px;color:#5b6b75}.lp,.lc{display:inline-block;width:14px;height:4px;margin:0 4px 2px 10px}.lp{background:#0f4c5c;height:5px;border-radius:3px}.lc{background:repeating-linear-gradient(90deg,#5b6b75 0 5px,transparent 5px 8px);height:3px}.ls{display:inline-block;width:14px;height:5px;border-radius:3px;margin:0 4px 2px 10px;background:#e9a23b}.li{white-space:nowrap}
.results{margin-top:0}.levers{padding:0;list-style:none;counter-reset:l}.levers li{border:1px solid #dde7e3;border-radius:10px;margin:8px 0}.levers button{all:unset;cursor:pointer;display:flex;justify-content:space-between;gap:10px;width:100%;padding:12px;box-sizing:border-box;font-weight:600}
.levers .gain{color:#0b7a5f;white-space:nowrap}.levers .how{padding:0 14px 12px;font-size:15px}.levers .how ul{margin:4px 0;padding-left:18px}
.save{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}button#saveBtn,.mbtn button{background:#0b7a5f;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:700;cursor:pointer}.mbtn .ghost{background:#e4ebe8;color:#13202b}
.faq,.reading{margin-top:20px}.disc{font-size:14px;color:#5b6b75;background:#fff8e6;border:1px solid #f0dca0;border-radius:10px;padding:12px;margin:20px 0}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:16px}.mbox{background:#fff;border-radius:14px;padding:20px;max-width:420px}.mbox input{width:100%;padding:8px;margin-top:4px}.mbtn{display:flex;gap:8px;margin-top:12px}
footer{padding:20px 16px}
@media(max-width:860px){.calc{grid-template-columns:1fr}.out{order:-1}.d{font-size:44px;min-width:38px}.d.wide{font-size:30px}.stats b{font-size:16px}}

.clock{position:relative}.iconbtn{position:absolute;top:8px;background:#ffffff1f;border:0;color:#fff;border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer}.iconbtn:focus-visible{outline:2px solid #fff}
.mute{right:8px}.climbbtn{left:8px;display:none;background:#fff}
.cl{transition:transform .9s cubic-bezier(.3,1.3,.5,1)}.cl.dropping{transition:transform .8s cubic-bezier(.55,0,1,.45) .35s}
.fig{transform-box:fill-box}.climbing .leg-l,.climbing .arm-r{animation:sw .3s ease-in-out infinite alternate}.climbing .leg-r,.climbing .arm-l{animation:sw .3s ease-in-out infinite alternate-reverse}
.leg,.arm{transform-box:fill-box;transform-origin:50% 0}.arm{transform-origin:0 100%}
@keyframes sw{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.fallen .fig{animation:tumble 1.15s ease-in forwards}@keyframes tumble{0%{transform:rotate(0)}30%{transform:translateY(-6px) rotate(-40deg)}100%{transform:rotate(-450deg) translateY(4px)}}
.fallen.done .fig{animation:none;transform:rotate(-90deg) translate(-4px,2px)}
.stars{opacity:0}.fallen .stars{animation:star 1.2s 1.1s forwards}@keyframes star{to{opacity:1}}
.cpanel{position:fixed;left:12px;right:12px;bottom:12px;background:#fff;border-radius:14px;box-shadow:0 8px 30px #0005;padding:10px;z-index:20}.cpanel #climbClose{float:right;border:0;background:#e4ebe8;border-radius:8px;width:32px;height:32px;cursor:pointer}
@media(max-width:600px){.climbbtn{display:flex}#chart .cl{display:none}}
@media(min-width:601px){.cpanel{display:none!important}}
@media(prefers-reduced-motion:reduce){.cl,.cl.dropping{transition:none}.climbing .leg,.climbing .arm,.fallen .fig,.d.f,.clock.emer{animation:none!important}.fallen .fig{transform:rotate(-90deg)}.fallen .stars{animation:none;opacity:1}}
@media(max-width:600px){.clabel{padding:0 40px}}

/* hammock placeholder (swap for Blender asset later) */
.hammock-scene{opacity:0;pointer-events:none;transition:opacity .15s}.hammock-scene.on{opacity:1}
.hammock-scene .sway{transform-box:fill-box;transform:scale(.85);transform-origin:50% 100%;transition:transform .18s ease-out}.hammock-scene.on .sway{transform:none}
.hammock-scene.on .hm-swing{transform-box:view-box;transform-origin:0 -26px;animation:none}@keyframes hsway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.cl{transition:transform .9s cubic-bezier(.3,1.3,.5,1),opacity .12s}.cl.gone{opacity:0}
@media(max-width:600px){#chart .hammock-scene{display:none}}
@media(prefers-reduced-motion:reduce){.hammock-scene,.hammock-scene .sway{transition:none}.hammock-scene.on .hm-swing{animation:none}}
.still *{transition:none!important;animation:none!important}
.hint{font-size:12.5px;color:#5b6b75;margin:2px 0 8px}.housenote{background:#eef7f3;border-left:4px solid #0b7a5f;border-radius:6px;padding:8px 10px;font-size:14px;margin:0 0 8px}
.mstate{border:0;padding:0;margin:8px 0}.mstate legend{font-weight:600;font-size:14px;padding:0}.mstate label{display:block;font-size:14px;margin:2px 0}
.sl label{flex-wrap:wrap;gap:0 8px}.sl output{white-space:nowrap;margin-left:auto}
.mfbadge{display:flex;gap:10px;align-items:center;background:#fffbea;border:1px solid #f0dca0;border-radius:12px;padding:8px 12px;margin:0 0 8px}.mfbadge b{display:block;color:#0f2e2a}.mfbadge span{font-size:13.5px;color:#5b6b75}
.mfbadge.pop svg{animation:mfpop .6s cubic-bezier(.3,1.8,.5,1)}@keyframes mfpop{0%{transform:scale(.2) rotate(-25deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.mfbadge.pop svg{animation:none}}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}.badges .mfbadge{flex:1 1 260px;margin:0}
.mfbadge svg{flex:0 0 auto}

#chartBars{width:100%;height:auto}.vtog{display:inline-flex;border:2px solid #0f4c5c;border-radius:999px;overflow:hidden;margin:4px 0 8px}.vtog button{border:0;background:#fff;color:#0f4c5c;padding:6px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}.vtog button[aria-pressed="true"]{background:#0f4c5c;color:#fff}.vtog button:focus-visible{outline:3px solid #e9a23b;outline-offset:-3px}
.tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin:0 0 0 6px;padding:0;border:1.5px solid #0f4c5c;border-radius:50%;background:#fff;color:#0f4c5c;font:700 11px/1 Georgia,serif;font-style:italic;cursor:help;vertical-align:middle;flex:none}.tip:hover,.tip[aria-expanded="true"]{background:#0f4c5c;color:#fff}.tip:focus-visible{outline:3px solid #e9a23b;outline-offset:1px}.sl label .tip{margin-right:auto}.sl label .tip+output{margin-left:0}
.tipbox{position:fixed;z-index:50;max-width:min(280px,calc(100vw - 16px));padding:9px 12px;border-radius:10px;background:#0f4c5c;color:#fff;font-size:13px;font-weight:400;line-height:1.4;box-shadow:0 6px 18px rgba(15,76,92,.25);border-left:4px solid #e9a23b;visibility:hidden;opacity:0;transition:opacity .15s;pointer-events:none}.tipbox.on{visibility:visible;opacity:1}
.climbing .fig{animation:bob .3s ease-in-out infinite alternate}@keyframes bob{to{transform:translateY(-.8px)}}.arm{transform-origin:50% 0}
@media(prefers-reduced-motion:reduce){.climbing .fig{animation:none}}

/* Review fixes (Oct 2026): two-path chart note, cash-flow warning, assumptions, contact form, about page */
.pathnote{font-size:13.5px;color:#13202b;background:#fdf6ea;border-left:4px solid #e9a23b;border-radius:6px;padding:8px 10px;margin:4px 0 8px}
.cashwarn{background:#fdecea;border-left:4px solid #b71c1c;border-radius:6px;padding:8px 10px;font-size:14px;margin:8px 0;color:#5c1010}
.assume{font-size:12.5px;color:#4a5a63;background:#f6f8f7;border-radius:6px;padding:8px 10px;margin:0 0 8px}
.cform{display:grid;gap:10px;max-width:520px}.cform label{display:grid;gap:4px;font-weight:600;font-size:14px}.cform input,.cform textarea{font:inherit;font-size:15px;padding:8px 10px;border:1px solid #c9d4d1;border-radius:8px}.cform textarea{min-height:130px}
.cform button{justify-self:start;background:#0f4c5c;color:#fff;border:0;border-radius:999px;padding:10px 20px;font:inherit;font-weight:700;cursor:pointer}.cform button[disabled]{opacity:.6}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.fmsg{font-size:14px;margin:4px 0}.fmsg.ok{color:#0b7a5f}.fmsg.err{color:#b71c1c}
.sl.has-box{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}.sl.has-box label{flex:0 0 100%}.sl.has-box input[type=range]{flex:1 1 0;min-width:0;width:auto}.numbox{flex:0 0 7.6em;width:7.6em;box-sizing:border-box;padding:4px 8px;border:1.5px solid #c9d6d2;border-radius:8px;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;color:#0f2e2a;background:#fff;text-align:right}.numbox:focus-visible{outline:3px solid #e9a23b;outline-offset:1px;border-color:#0b7a5f}.numbox.bad{border-color:#b71c1c}
@media(max-width:600px){#chart.retired{display:none}}
/* desktop two-column: inputs stay in view while the results/chart scroll; tall panel scrolls inside */
@media(min-width:861px){.calc{align-items:start}.calc>.inputs{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}}