*{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}
.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}
.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:#0b7a5f}.lc{background:#e0892b}
.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 .5s}.hammock-scene.on{opacity:1}
.hammock-scene .sway{transform-box:fill-box;transform:scale(.6);transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}.hammock-scene.on .sway{transform:none}
.hammock-scene.on .hm-swing{transform-box:view-box;transform-origin:0 -26px;animation:hsway 3s ease-in-out infinite alternate}@keyframes hsway{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.cl{transition:transform .9s cubic-bezier(.3,1.3,.5,1),opacity .4s}.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}