:root{--bg:#FFF9F6;--bg2:#FBEFEF;--band:#FCEFEA;--surface:#FFFFFF;--surface2:#FFF6F3;--paper:#FFFFFF;--line:#EEDCE2;--line2:#E3C9D2;--ink:#3A2230;--ink2:#664556;--muted:#7D5E6F;--accent:#C2456A;--accent-h:#A83A5C;--accent-ink:#B03A5D;--accent-soft:#FBE6EC;--accent-soft2:#F6D2DC;--teal:#17766C;--teal-ink:#17766C;--teal-soft:#E2F4F0;--red:#BF2E2E;--red-ink:#B52A2A;--red-soft:#FDECEA;--red-line:#F0BFBA;--yel:#F2B92E;--yel-ink:#7A5600;--yel-soft:#FFF5DA;--blue:#3B7DB4;--blue-ink:#2F6A9C;--blue-soft:#E8F2FB;--lil:#7E5CB8;--lil-ink:#5E4391;--lil-soft:#F1EAFA;--orange:#C76A0E;--orange-ink:#A4560A;--orange-soft:#FFF0E0;--coffee:#7A4F30;--coffee-ink:#5E3B22;--coffee-soft:#FFF5EB;--coffee-line:#EDD3BE;--foot:#3A2230;--foot-ink:#F4E6EC;--foot-link:#FFC2D2;--glass:rgba(255,249,246,.86);--shc:94,52,74;--img-dim:1;color-scheme:light;--hdr:66px;--r:22px;--w:760px;--ww:1100px;--fh:"Montserrat",system-ui,sans-serif;--fb:"Nunito",system-ui,sans-serif;--fs:clamp(17px,.95rem + .25vw,18.5px);--sh-1:0 2px 10px rgba(var(--shc),.06);--sh:0 10px 30px rgba(var(--shc),.09);--sh-2:0 18px 44px rgba(var(--shc),.16)}
:root[data-theme=dark]{--bg:#161015;--bg2:#23191F;--band:#1C1419;--surface:#1F161C;--surface2:#271C23;--paper:#F3EBEE;--line:#3A2A33;--line2:#4C3743;--ink:#F6ECF1;--ink2:#DCC8D2;--muted:#BCA5B1;--accent:#C2456A;--accent-h:#D25478;--accent-ink:#FF9FB7;--accent-soft:#3A1F2C;--accent-soft2:#4C2738;--teal:#17766C;--teal-ink:#7FD9CC;--teal-soft:#14302C;--red:#BF2E2E;--red-ink:#FF948B;--red-soft:#381B1D;--red-line:#6E2E2E;--yel:#F2B92E;--yel-ink:#F4CC66;--yel-soft:#332914;--blue:#3B7DB4;--blue-ink:#8FC3EE;--blue-soft:#172634;--lil:#7E5CB8;--lil-ink:#CDB8F4;--lil-soft:#251E33;--orange:#C76A0E;--orange-ink:#F5B06A;--orange-soft:#33240F;--coffee:#7A4F30;--coffee-ink:#F2CBA8;--coffee-soft:#241A14;--coffee-line:#4A3526;--foot:#0E0A0D;--foot-ink:#EADCE2;--foot-link:#FFB3C6;--glass:rgba(22,16,21,.86);--shc:0,0,0;--img-dim:.9;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#161015;--bg2:#23191F;--band:#1C1419;--surface:#1F161C;--surface2:#271C23;--paper:#F3EBEE;--line:#3A2A33;--line2:#4C3743;--ink:#F6ECF1;--ink2:#DCC8D2;--muted:#BCA5B1;--accent:#C2456A;--accent-h:#D25478;--accent-ink:#FF9FB7;--accent-soft:#3A1F2C;--accent-soft2:#4C2738;--teal:#17766C;--teal-ink:#7FD9CC;--teal-soft:#14302C;--red:#BF2E2E;--red-ink:#FF948B;--red-soft:#381B1D;--red-line:#6E2E2E;--yel:#F2B92E;--yel-ink:#F4CC66;--yel-soft:#332914;--blue:#3B7DB4;--blue-ink:#8FC3EE;--blue-soft:#172634;--lil:#7E5CB8;--lil-ink:#CDB8F4;--lil-soft:#251E33;--orange:#C76A0E;--orange-ink:#F5B06A;--orange-soft:#33240F;--coffee:#7A4F30;--coffee-ink:#F2CBA8;--coffee-soft:#241A14;--coffee-line:#4A3526;--foot:#0E0A0D;--foot-ink:#EADCE2;--foot-link:#FFB3C6;--glass:rgba(22,16,21,.86);--shc:0,0,0;--img-dim:.9;color-scheme:dark}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 var(--fs)/1.72 var(--fb);letter-spacing:.003em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;transition:background .4s,color .4s}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s}a:hover{color:var(--accent-h)}
:root[data-theme=dark] a:hover{color:#FFC4D3}
::selection{background:var(--accent-soft2);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4{font-family:var(--fh);line-height:1.18;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
h2{font-size:clamp(25px,2.2vw + 16px,34px);font-weight:800;margin:68px 0 18px;scroll-margin-top:96px}
h3{font-size:clamp(19px,.6vw + 16px,22px);font-weight:800;margin:36px 0 10px}
h4{font-size:18px;font-weight:800;margin:0 0 6px}
p{margin:0 0 16px;text-wrap:pretty}
ul,ol{padding-left:1.3em;margin:0 0 18px}li{margin:6px 0;text-wrap:pretty}li::marker{color:var(--accent)}
b,strong{font-weight:800;color:inherit}
small{font-size:.85em}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--surface);padding:8px 14px;border-radius:10px}
/* header */
.top{position:sticky;top:0;z-index:40;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .in{max-width:var(--ww);margin:auto;display:flex;align-items:center;gap:12px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 17.5px/1.1 var(--fh);margin-right:auto;letter-spacing:-.01em}
.brand svg{width:40px;height:40px;flex:0 0 40px}.brand small{display:block;font:700 12.5px/1.3 var(--fb);color:var(--muted);letter-spacing:0;margin-top:2px}
.nav{display:flex;gap:2px}.nav a{text-decoration:none;color:var(--ink2);font-weight:800;font-size:15.5px;padding:8px 13px;border-radius:30px}
.nav a:hover,.nav a.on{background:var(--accent-soft);color:var(--accent-ink)}
.sosb{background:var(--red);color:#fff!important;text-decoration:none;font-weight:900;font-size:14.5px;padding:8px 14px;border-radius:30px;white-space:nowrap}
.theme{border:1px solid var(--line);background:var(--surface);color:var(--ink2);width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 40px;padding:0}
.theme svg{width:20px;height:20px}.theme .sun{display:none}
:root[data-theme=dark] .theme .sun{display:block}:root[data-theme=dark] .theme .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .theme .sun{display:block}:root:not([data-theme=light]) .theme .moon{display:none}}
.theme:hover{color:var(--accent-ink);border-color:var(--accent-soft2)}
.menu{display:none;border:0;background:var(--accent-soft);color:var(--accent-ink);font:900 15px var(--fb);padding:9px 14px;border-radius:30px;cursor:pointer}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(30,12,22,.45);opacity:0;visibility:hidden;transition:.25s}
.drawer.open{opacity:1;visibility:visible}
.drawer .pane{position:absolute;right:0;top:0;bottom:0;width:min(360px,88vw);background:var(--bg);padding:22px 20px 40px;overflow:auto;transform:translateX(100%);transition:.3s;box-shadow:-20px 0 50px rgba(0,0,0,.18)}
.drawer.open .pane{transform:none}
.drawer h5{font:900 12.5px var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.drawer a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--ink);font-weight:800;font-size:16.5px}
.drawer a:hover,.drawer a.on{background:var(--accent-soft);color:var(--accent-ink)}.drawer .x{float:right;border:0;background:none;font-size:30px;line-height:1;color:var(--ink2);cursor:pointer}
@media(max-width:940px){.nav{display:none}.menu{display:block}}
@media(max-width:420px){.brand small{display:none}.brand{font-size:16.5px}.sosb{padding:8px 11px}}
/* page hero */
.phero{background:linear-gradient(120deg,#8E3462 0%,#A83B66 45%,#C64A6E 100%);color:#fff;overflow:hidden;position:relative}
.phero:after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.08)}
.phero .in{max-width:var(--ww);margin:auto;padding:46px 16px 54px;display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center;position:relative;z-index:1}
.phero h1{color:#fff;font-size:clamp(33px,4.4vw + 14px,56px);font-weight:800;line-height:1.08;margin:14px 0 14px;letter-spacing:-.025em;text-shadow:0 2px 18px rgba(60,10,35,.25)}
.phero p.lead{font-size:clamp(18px,.8vw + 14px,21px);font-weight:600;line-height:1.55;color:#fff;margin:0 0 20px;max-width:34em}
.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(40,8,26,.32);color:#fff;font-weight:800;font-size:14.5px;padding:6px 14px;border-radius:30px;letter-spacing:.01em;border:1px solid rgba(255,255,255,.18)}
.phero .meta{display:flex;flex-wrap:wrap;gap:8px}.phero .meta span{background:rgba(40,8,26,.28);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:5px 13px;font-weight:800;font-size:14.5px}
.phero .pic{border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(40,6,24,.35);aspect-ratio:4/3;background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.25)}
.phero .pic img{width:100%;height:100%;object-fit:cover}
.phero .pic.svgp{background:#FFE9EC;display:flex;align-items:center;justify-content:center;padding:14px}
.phero .credit{font-size:12px;margin-top:8px;color:rgba(255,255,255,.88)}.phero .credit a{color:#fff}
@media(max-width:760px){.phero .in{grid-template-columns:1fr;padding:30px 16px 40px;gap:22px}}
/* toc */
.toc{max-width:var(--ww);margin:-26px auto 0;padding:0 16px;position:relative;z-index:3}
.toc .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:12px 14px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.toc .box::-webkit-scrollbar{display:none}
.toc b{font:900 13px var(--fb);color:var(--muted);white-space:nowrap;align-self:center;margin-right:4px;letter-spacing:.02em}
.toc a{white-space:nowrap;text-decoration:none;background:var(--bg2);color:var(--ink2);font-weight:800;font-size:14.5px;padding:7px 14px;border-radius:30px}
.toc a:hover{background:var(--accent-soft);color:var(--accent-ink)}
/* content */
main{max-width:var(--w);margin:0 auto;padding:14px 18px 40px}
main > p:first-child{margin-top:36px;font-size:1.06em;color:var(--ink)}
.lead2{font-size:1.1em;font-weight:600;color:var(--ink2)}
.wide{width:min(var(--ww),calc(100vw - 32px));margin-left:50%;transform:translateX(-50%)}
.tldr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px 10px;box-shadow:var(--sh);margin:34px 0;border-top:6px solid var(--yel)}
.tldr-h{font:800 19px var(--fh);margin-bottom:8px;display:flex;align-items:center;gap:10px;color:var(--ink)}.tldr .ic{color:var(--yel)}
.tldr li{margin:8px 0}.tldr li::marker{color:var(--yel)}
.video{margin:32px 0;background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh);overflow:hidden}
.vbox{background:#FFE9EC}.vbox video{width:100%;aspect-ratio:1/1;background:#FFE9EC}
@media(min-width:820px){.video{display:grid;grid-template-columns:400px 1fr;align-items:center}.vbox{height:100%}}
.video figcaption{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px}
.vtag{font-weight:900;font-size:12.5px;color:var(--accent-ink);letter-spacing:.08em;text-transform:uppercase}
.video figcaption b{font:800 21px/1.28 var(--fh);color:var(--ink)}.video figcaption span:not(.vtag){color:var(--muted);font-size:15.5px;font-weight:700}
.dl{align-self:flex-start;font-weight:800;font-size:14.5px;text-decoration:none;background:var(--accent-soft);color:var(--accent-ink);padding:7px 15px;border-radius:30px;margin-top:4px}
.steps{list-style:none;padding:0;margin:22px 0;counter-reset:s}
.step{display:grid;grid-template-columns:48px 1fr;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 14px;margin:12px 0;box-shadow:var(--sh-1)}
.step .sn{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;font:900 19px var(--fh);display:flex;align-items:center;justify-content:center}
.step h4{font-size:18.5px;margin-top:8px}
.step .sb p:last-child,.step .sb ul:last-child{margin-bottom:0}
@media(max-width:520px){.step{grid-template-columns:34px 1fr;gap:10px;padding:16px 14px 12px}.step .sn{width:34px;height:34px;font-size:16px}.step h4{margin-top:4px}.step .sa{margin:0 -4px}main{padding-left:16px;padding-right:16px}.tool{padding:18px 16px}}
.step .sa{grid-column:1/-1}
.dd{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.dd>div{border-radius:var(--r);padding:18px 20px 8px;border:1px solid transparent}.dd .do{background:var(--teal-soft)}.dd .dont{background:var(--red-soft)}
.dd h4{display:flex;align-items:center;gap:10px;font-size:18px}.dd .do h4{color:var(--teal-ink)}.dd .dont h4{color:var(--red-ink)}
.dd h4 span{width:30px;height:30px;flex:0 0 30px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.do h4 span{background:var(--teal)}.dont h4 span{background:var(--red)}.dd ul{padding-left:1.1em}.do li::marker{color:var(--teal-ink)}.dont li::marker{color:var(--red-ink)}
@media(max-width:640px){.dd{grid-template-columns:1fr}}
.call{display:grid;grid-template-columns:44px 1fr;gap:14px;border-radius:var(--r);padding:18px 20px;margin:26px 0;background:var(--blue-soft);border-left:5px solid var(--blue)}
.call .ci{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font:900 19px var(--fh);display:flex;align-items:center;justify-content:center}
.call .ct{display:block;font:800 17.5px var(--fh);margin-bottom:6px;color:var(--ink)}.call p:last-child,.call ul:last-child{margin-bottom:0}
.call.tip{background:var(--yel-soft);border-left-color:var(--yel)}.call.tip .ci{background:#C99410}
.call.warn{background:var(--orange-soft);border-left-color:var(--orange)}.call.warn .ci{background:var(--orange)}
.call.danger{background:var(--red-soft);border-left-color:var(--red)}.call.danger .ci{background:var(--red)}.call.danger .ct{color:var(--red-ink)}
.call.why{background:var(--lil-soft);border-left-color:var(--lil)}.call.why .ci{background:var(--lil)}
.call.mn{background:var(--teal-soft);border-left-color:var(--teal)}.call.mn .ci{background:var(--teal)}
.ph{margin:26px 0}.ph img{border-radius:var(--r);width:100%;background:var(--bg2)}
.ph figcaption,.art figcaption{font-size:15.5px;line-height:1.55;color:var(--ink2);margin-top:10px;font-weight:600}
.ph small{display:block;font-size:12px;color:var(--muted);margin-top:4px;font-weight:600}.ph small a{color:inherit}
.figrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:26px 0}
.figrow .ph{margin:0}.figrow .ph img{aspect-ratio:4/3;object-fit:cover}
.art{margin:26px 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh-1)}
.art figcaption{color:#5A3C4C}
.art .il{margin:auto;max-height:460px;width:100%}
.myth{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;margin:18px 0;border:1px solid var(--line);box-shadow:var(--sh-1)}
.myth>div{padding:16px 18px}.myth span{display:block;font:900 12.5px var(--fb);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.myth .m{background:var(--bg2);color:var(--ink2)}.myth .m span{color:var(--red-ink)}.myth .f{background:var(--surface)}.myth .f span{color:var(--teal-ink)}
@media(max-width:640px){.myth{grid-template-columns:1fr}}
.tw{overflow-x:auto;margin:24px 0;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-1)}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:16px;line-height:1.55}
th{background:var(--accent-soft);color:var(--ink);text-align:left;font-weight:800;padding:12px 14px;font-size:15.5px}td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink)}
tbody tr:nth-child(even) td{background:var(--surface2)}
.doctor{background:var(--red-soft);border:2px solid var(--red-line);border-radius:var(--r);padding:20px 22px 10px;margin:32px 0}
.doctor .dh{font:800 19px var(--fh);color:var(--red-ink);display:flex;gap:10px;align-items:center;margin-bottom:8px}
.doctor .dh span{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--red);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.doctor li::marker{color:var(--red-ink)}.doctor .dn{font-weight:800;color:var(--ink)}
.src{margin:60px 0 0;padding-top:22px;border-top:2px dashed var(--line2);font-size:15.5px;color:var(--ink2)}.src h3{margin-top:0;font-size:19px}.src li{margin:7px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:24px 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-1)}
.card .cic{font-size:30px;line-height:1;margin-bottom:10px}.card b{display:block;font:800 17px/1.3 var(--fh);margin-bottom:6px;color:var(--ink)}.card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:24px 0}
.kv div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:var(--sh-1)}
.kv dt{font-weight:800;color:var(--muted);font-size:14px;line-height:1.35}.kv dd{margin:4px 0 0;font:800 22px/1.2 var(--fh);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.positions{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.pos{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:10px;text-align:center;font-weight:800;font-size:15px;color:#3A2230;box-shadow:var(--sh-1)}
@media(max-width:640px){.positions{grid-template-columns:1fr 1fr}}
/* checklists & tools */
.checklist{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:18px 20px;margin:28px 0}
.clh{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}.clh b{font:800 18px var(--fh)}
.clr{border:0;background:var(--bg2);color:var(--ink2);font:800 13.5px var(--fb);padding:6px 12px;border-radius:30px;cursor:pointer;flex:0 0 auto;white-space:nowrap}
.checklist ul{list-style:none;padding:0;margin:0}
.checklist label{display:flex;gap:12px;align-items:flex-start;padding:9px 6px;border-radius:12px;cursor:pointer}
.checklist label:hover{background:var(--surface2)}
.checklist input,.sg input{appearance:none;-webkit-appearance:none;flex:0 0 26px;width:26px;height:26px;border:2.5px solid var(--accent);border-radius:8px;margin:2px 0 0;display:grid;place-content:center;cursor:pointer;background:var(--surface)}
.checklist input:checked,.sg input:checked{background:var(--teal);border-color:var(--teal)}
.checklist input:checked:after,.sg input:checked:after{content:"";width:12px;height:7px;border:3px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-2px)}
.checklist input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line2)}
.clp{height:8px;background:var(--bg2);border-radius:8px;margin-top:10px;overflow:hidden}.clp i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),#2FB3A2)}
.tool{background:var(--surface);border-radius:26px;box-shadow:var(--sh);padding:22px;margin:32px 0;border:2px solid var(--accent-soft)}
.tool h4{font-size:20px;margin-bottom:4px}.tool .sub{color:var(--ink2);font-size:15.5px;margin-bottom:14px}
.tool .tag{display:inline-block;background:var(--accent-soft);color:var(--accent-ink);font:900 12px var(--fb);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:8px}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}
.seg button{border:2px solid var(--line2);background:var(--surface);color:var(--ink);font:800 15px var(--fb);padding:8px 14px;border-radius:30px;cursor:pointer}
.seg button:hover{border-color:var(--accent);color:var(--accent-ink)}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.res{background:var(--surface2);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.res .big{font:800 28px/1.2 var(--fh);color:var(--accent-ink)}
.icons{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.icons i{font-style:normal;font-size:26px}
.range{width:100%;margin:14px 0;-webkit-appearance:none;appearance:none;height:12px;border-radius:12px;background:linear-gradient(90deg,#3B7DB4 0%,#17766C 35%,#E0A400 62%,#BF2E2E 100%);outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid #3A2230;box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:grab;transition:transform .2s}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid #3A2230;cursor:grab}
.range:active::-webkit-slider-thumb{transform:scale(1.2);cursor:grabbing}
.tval{font:800 44px var(--fh);color:var(--accent-ink);transition:color .4s;font-variant-numeric:tabular-nums}
.danger-list label{display:flex;gap:12px;padding:10px 8px;border-radius:12px;cursor:pointer;align-items:flex-start;line-height:1.5}
.danger-list label:hover{background:var(--surface2)}
.danger-list input{width:24px;height:24px;flex:0 0 24px;accent-color:var(--red);margin-top:3px}
.alert{border-radius:18px;padding:16px 18px;margin-top:12px;font-weight:800;line-height:1.5}
.alert.ok{background:var(--teal-soft);color:var(--teal-ink)}.alert.bad{background:var(--red);color:#fff;animation:pulse 1.4s infinite}
.alert.bad a{color:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(191,46,46,.18)}}
.bigbtn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:0;font:900 17.5px var(--fb);padding:14px 22px;border-radius:40px;cursor:pointer;text-decoration:none;letter-spacing:.005em}
.bigbtn:hover{color:#fff;background:var(--accent-h)}
.bigbtn.alt{background:#fff;color:#A3355A;box-shadow:var(--sh)}.bigbtn.alt:hover{background:#FFF2F5;color:#8E2C4F}
.bigbtn.dark{background:#2B1522;color:#fff}.bigbtn.dark:hover{background:#3D1F31}
.bigbtn.red{background:var(--red)}.bigbtn.red:hover{background:#A52525}
.tapzone{width:100%;min-height:150px;border:3px dashed var(--accent);border-radius:24px;background:var(--surface2);font:900 22px var(--fb);color:var(--accent-ink);cursor:pointer;margin:12px 0;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tapzone:active{background:var(--accent-soft)}
.wheel{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:20px;align-items:center}
.wheel .ring{color:var(--ink)}
@media(max-width:640px){.wheel{grid-template-columns:1fr}}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-weight:800;font-size:14.5px;color:var(--ink2)}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.cry button.q{display:flex;width:100%;text-align:left;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface2);border-radius:16px;padding:14px 16px;margin:8px 0;font:800 17px/1.4 var(--fb);color:var(--ink);cursor:pointer}
.cry button.q:hover{border-color:var(--accent-soft2)}
.cry button.q:after{content:"+";font-size:22px;color:var(--accent-ink);transition:transform .3s}.cry button.q[aria-expanded=true]:after{content:"–";transform:rotate(180deg)}
.cry .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}.cry .a>div{overflow:hidden;padding:0 16px;color:var(--ink2)}.cry .a.open{grid-template-rows:1fr}.cry .a.open>div{padding-bottom:10px}
/* home */
.hhero{background:linear-gradient(120deg,#8A3260 0%,#A83B66 45%,#C64A6E 100%);color:#fff;position:relative;overflow:hidden}
.hhero .in{max-width:var(--ww);margin:auto;padding:56px 16px 70px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hhero h1{color:#fff;font-size:clamp(36px,5.6vw + 12px,66px);font-weight:800;line-height:1.04;margin:16px 0 16px;letter-spacing:-.03em;text-shadow:0 2px 20px rgba(60,10,35,.25)}
.hhero p{font-size:clamp(18px,.9vw + 14px,21.5px);font-weight:600;line-height:1.6;max-width:31em;color:#fff}
.hhero p b{color:#FFE2A8}
.hhero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hhero .art2{position:relative}.hhero .art2 .il{filter:drop-shadow(0 22px 44px rgba(40,6,24,.35))}
@media(max-width:760px){.hhero .in{grid-template-columns:1fr;padding:34px 16px 56px}.hhero .art2{max-width:340px;margin:auto}}
.days{max-width:var(--ww);margin:0 auto;padding:10px 16px 20px;position:relative;isolation:isolate}
.dayh{display:flex;align-items:center;gap:14px;margin:60px 0 18px;flex-wrap:wrap;scroll-margin-top:96px}
.dayh .n{font:900 13px var(--fb);letter-spacing:.06em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-ink);padding:7px 14px;border-radius:30px}
.dayh h2{margin:0}
.band{position:relative;padding:8px 0 36px;margin-top:40px}
.band:before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--band);z-index:-1;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band .dayh{margin-top:40px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.topic{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh);transition:transform .25s,box-shadow .25s}
.topic:hover{transform:translateY(-4px);box-shadow:var(--sh-2);color:var(--ink)}
.topic .tp{aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}.topic .tp img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.topic:hover .tp img{transform:scale(1.05)}
.topic .tb{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}.topic h3{margin:0 0 6px;font-size:20.5px;line-height:1.25}.topic p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.55}
.topic .tm{display:flex;gap:8px;margin-top:auto;padding-top:14px;flex-wrap:wrap}.topic .tm span{font-size:13px;font-weight:800;color:var(--ink2);background:var(--bg2);padding:4px 10px;border-radius:20px}.topic .tm span:empty{display:none}
.topic .done{background:var(--teal-soft)!important;color:var(--teal-ink)!important}
.catnav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.catnav a{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:800;font-size:16px;padding:9px 16px;border-radius:40px;box-shadow:var(--sh-1)}
.catnav a:hover{background:var(--accent-soft);color:var(--accent-ink)}.catnav span{font-size:20px}
.cath{display:flex;gap:16px;align-items:center;margin:52px 0 18px;scroll-margin-top:150px}
.cath .ce{flex:0 0 58px;height:58px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;font-size:30px}
.cath h2{margin:0}.cath p{margin:4px 0 0;color:var(--muted);font-size:16px;font-weight:600}
.sos-topic{border:2px solid var(--red-line)}.sos-topic h3{color:var(--red-ink)}
.sosbar{max-width:var(--ww);margin:-34px auto 0;padding:0 16px;position:relative;z-index:3}
.sosbar .box{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--sh-2);padding:16px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-left:8px solid var(--red)}
.sosbar b{font:800 18px var(--fh);color:var(--red-ink)}.sosbar p{margin:0;color:var(--ink2);font-size:16px;flex:1;min-width:220px;line-height:1.5}
.sosbar .bigbtn{padding:10px 18px;font-size:16px}
.rules{counter-reset:r;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.rules li{counter-increment:r;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 18px 16px 64px;position:relative;margin:0;box-shadow:var(--sh-1);line-height:1.5}
.rules li:before{content:counter(r);position:absolute;left:16px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--yel);color:#3A2230;font:900 16px var(--fh);display:flex;align-items:center;justify-content:center}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--sh)}.vcard video{width:100%;aspect-ratio:1/1;background:#FFE9EC}
.vcard>div:last-child{padding:12px 14px 14px;font-weight:800;line-height:1.35;color:var(--ink)}.vcard small{display:block;color:var(--muted);font-weight:700;margin-top:4px;font-size:13.5px}
/* coffee */
.coffee{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;background:var(--coffee-soft);border:2px solid var(--coffee-line);border-radius:30px;padding:28px;margin:56px 0 10px}
.coffee h2{margin:8px 0 10px}.coffee .n{font:900 13px var(--fb);letter-spacing:.06em;text-transform:uppercase;background:var(--coffee);color:#fff;padding:7px 14px;border-radius:30px}
.coffee p{color:var(--ink2)}
.coffee .cup{width:150px;height:150px}.coffee .note{font-size:15.5px;color:var(--muted);margin:12px 0 0;font-weight:600}
.coffee .steam path{animation:steam 2.6s ease-in-out infinite;opacity:.0}.coffee .steam path:nth-child(2){animation-delay:.6s}.coffee .steam path:nth-child(3){animation-delay:1.2s}
@keyframes steam{0%{opacity:0;transform:translateY(16px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-10px)}}
.acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:var(--surface);border:1px solid var(--coffee-line);border-radius:18px;padding:12px 14px;margin:10px 0}
.acc span{flex:1 0 100%;font-size:13.5px;font-weight:800;color:var(--muted)}.acc b{font:800 clamp(16px,4.1vw,24px) var(--fh);letter-spacing:.03em;color:var(--coffee-ink);margin-right:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.copy{border:0;background:var(--coffee);color:#fff;font:900 14.5px var(--fb);padding:9px 16px;border-radius:30px;cursor:pointer;min-width:100px}
.copy.ok{background:var(--teal)}
.coffee.compact{grid-template-columns:84px 1fr;gap:18px;padding:20px;margin:36px 0 0}.coffee.compact .cup{width:84px;height:84px}
.coffee .kt{font:800 19px var(--fh);display:block;margin-bottom:4px;color:var(--ink)}.coffee.compact p{margin:0 0 6px;font-size:16px}
@media(max-width:640px){.coffee{grid-template-columns:1fr;text-align:left;padding:22px 18px}.coffee .cup{width:96px;height:96px}.coffee.compact{grid-template-columns:1fr}.coffee.compact .cup{width:64px;height:64px}}
/* shopping checklist */
.shop{margin:28px 0}
.shopbar{position:sticky;top:calc(var(--hdr) + 4px);transition:top .35s cubic-bezier(.2,.8,.2,1);z-index:5;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh);padding:14px 16px;margin:0 0 18px}
.sbt{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--fh)}.sbt b{font-weight:800}.sbt .cnt{font:800 22px var(--fh);color:var(--teal-ink);font-variant-numeric:tabular-nums}
.sbb{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}.sbb .seg{margin:0}
.sbb .seg button{padding:6px 12px;font-size:14px}.shopbtn{display:flex;gap:8px}
.shopbtn button{border:0;background:var(--bg2);color:var(--ink);font:800 14px var(--fb);padding:8px 12px;border-radius:30px;cursor:pointer}
.sg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:16px 18px 8px;margin:14px 0}
.sgh{display:flex;align-items:center;gap:10px}.sgh span{font-size:26px}.sgh h3{margin:0;flex:1;font-size:19px}.sgc{font:900 14.5px var(--fb);color:var(--ink2);background:var(--bg2);padding:4px 10px;border-radius:20px;font-variant-numeric:tabular-nums}
.sgc.done{background:var(--teal-soft);color:var(--teal-ink)}.sgn{font-size:15px;color:var(--muted);margin:6px 0 0;font-weight:600}
.sg ul{list-style:none;padding:0;margin:8px 0 0}.sg li{margin:0;border-top:1px solid var(--line)}.sg li:first-child{border-top:0}
.sg label{display:flex;gap:12px;align-items:flex-start;padding:11px 4px;cursor:pointer}
.nm{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;line-height:1.4}.nm b{font-weight:800;color:var(--ink)}.nm em{font-style:normal;font-weight:800;color:var(--accent-ink);font-size:15px}
.nm small{flex:1 0 100%;color:var(--ink2);font-size:15px;line-height:1.5}.sg input:checked+.nm b{text-decoration:line-through;color:var(--muted)}
.tg{font-style:normal;font:900 12px var(--fb);padding:2px 9px;border-radius:20px;letter-spacing:.02em}
.t-must{background:var(--accent-soft);color:var(--accent-ink)}.t-need{background:var(--yel-soft);color:var(--yel-ink)}.t-opt{background:var(--lil-soft);color:var(--lil-ink)}
.sg li.hide{display:none}
.avoid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:22px 0}
.av{display:flex;gap:12px;background:var(--surface);border:2px solid var(--red-line);border-radius:18px;padding:14px 16px}
.av span{flex:0 0 30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.av b{display:block;margin-bottom:4px;color:var(--ink);line-height:1.35}.av p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2)}
@media print{.shopbar .sbb,.shopbar .clp{display:none}.shopbar{position:static;box-shadow:none}.sg{box-shadow:none;border:1px solid #ccc;break-inside:avoid}.nm small{font-size:10pt}}
/* prev/next + footer */
.pn{max-width:var(--w);margin:14px auto 44px;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pn a{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px 18px;text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);font-weight:800;line-height:1.35;transition:transform .25s,box-shadow .25s}
.pn a:hover{transform:translateY(-3px);box-shadow:var(--sh);color:var(--accent-ink)}
.pn a small{display:block;color:var(--muted);font-weight:700;font-size:13px;margin-bottom:2px}.pn .nx{text-align:right;grid-column:2}
.readbtn{display:flex;justify-content:center;margin:44px 0 0}
.readbtn button{border:2px solid var(--teal);background:var(--surface);color:var(--teal-ink);font:900 16px var(--fb);padding:12px 22px;border-radius:40px;cursor:pointer}
.readbtn button.on{background:var(--teal);color:#fff}
footer{background:var(--foot);color:var(--foot-ink);margin-top:36px}
footer .in{max-width:var(--ww);margin:auto;padding:40px 16px 96px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;font-size:15.5px;line-height:1.6}
footer a{color:var(--foot-link)}footer a:hover{color:#fff}footer h5{font:900 13px var(--fb);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;color:#fff}
footer ul{list-style:none;padding:0;margin:0 0 18px}footer li{margin:5px 0}footer p{color:var(--foot-ink)}
@media(max-width:760px){footer .in{grid-template-columns:1fr}}
.sos{position:fixed;right:14px;bottom:14px;z-index:30;background:var(--red);color:#fff;text-decoration:none;font:900 15px var(--fb);padding:12px 16px;border-radius:40px;box-shadow:0 10px 26px rgba(191,46,46,.4);display:flex;gap:8px;align-items:center}
.sos:hover{color:#fff}
/* icons (replace emoji) */
.i{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em}
.sosb,.menu,.sos,.bigbtn,.vtag,.chip,.phero .meta span,.topic .tm span,.shopbtn button,.sosbar b{display:inline-flex;align-items:center;gap:7px}
.vtag .i{width:15px;height:15px}.topic .tm .i{width:14px;height:14px;opacity:.75}.phero .meta .i{width:16px;height:16px}
.drawer a span{display:inline-flex;width:30px;height:30px;border-radius:10px;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-ink);flex:0 0 30px}.drawer a span .i{width:18px;height:18px}
.catnav a .i{width:18px;height:18px;color:var(--accent-ink)}.catnav a.on .i{color:#fff}
.cath .ce{color:var(--accent-ink)}.cath .ce .i{width:30px;height:30px}
.call .ci .i{width:22px;height:22px}.doctor .dh span .i,.av span .i,.dd h4 span .i{width:17px;height:17px;stroke-width:2.6}
.tldr .ic{display:inline-flex}.tldr .ic .i{width:22px;height:22px;fill:var(--yel);stroke:#C99410}
.icons i{color:#3B7DB4;display:inline-flex}.icons i svg{width:24px;height:24px}
.note2{margin-left:10px;color:var(--ink2);font-weight:600}
.card{border-top:4px solid var(--accent-soft2)}
/* animations */
.js .reveal{opacity:0;translate:0 24px;transition:opacity .75s cubic-bezier(.2,.8,.2,1),translate .75s cubic-bezier(.2,.8,.2,1),scale .75s cubic-bezier(.2,.8,.2,1),transform .3s ease,box-shadow .3s ease}
.js .reveal.r-left{translate:-34px 0}.js .reveal.r-right{translate:34px 0}.js .reveal.r-scale{translate:0 20px;scale:.94}
.js .reveal.in{opacity:1;translate:none;scale:none}
.il .breathe .chest{transform-box:fill-box;transform-origin:50% 60%;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04,1.06)}}
.il .zz text{animation:zz 3s ease-in-out infinite;opacity:0}.il .zz text:nth-child(2){animation-delay:.5s}.il .zz text:nth-child(3){animation-delay:1s}
@keyframes zz{0%{opacity:0;transform:translateY(10px)}40%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.il .float1{animation:fl 5s ease-in-out infinite}.il .float2{animation:fl 6s ease-in-out infinite reverse}.il .float3{animation:fl 4s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-14px)}}
.il .dash{animation:dash 1.2s linear infinite}@keyframes dash{to{stroke-dashoffset:-26}}
.il .grow circle{transform-box:fill-box;transform-origin:center;animation:grow 1s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d)}
@keyframes grow{from{transform:scale(0)}}
.il .kick{animation:dash 1.4s linear infinite}
.reveal.in .drawme{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.4s ease forwards}@keyframes draw{to{stroke-dashoffset:0}}
/* ===================== Motion design ===================== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.26s cubic-bezier(.4,0,1,1) both vt-out}
::view-transition-new(root){animation:.45s cubic-bezier(.2,.8,.2,1) both vt-in}
::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
.top{view-transition-name:site-top}
.vt .phero .pic,.vt .phero .pic img{animation:none}
/* reading progress */
.readprog{position:fixed;left:0;top:0;height:4px;width:100%;z-index:60;background:linear-gradient(90deg,#E5617D,#F7C548,#21897E);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
/* smart header */
.top{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s}
.top .in{transition:padding .3s}
.top.scrolled{box-shadow:var(--sh)}
.top.scrolled .in{padding-top:6px;padding-bottom:6px}
.top.hide{transform:translateY(-105%)}
html.hdr-hidden{--hdr:0px}
.brand svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}.brand:hover svg{transform:rotate(-12deg) scale(1.08)}
.nav a{position:relative;transition:background .25s,color .25s}
.sosb{transition:transform .2s}.sosb:hover{transform:scale(1.05)}
/* hero: living gradient, blobs, wave, floating hearts */
.hhero,.phero{background-size:220% 220%;animation:gradShift 16s ease-in-out infinite alternate}
@keyframes gradShift{from{background-position:0% 20%}to{background-position:100% 80%}}
.hhero:before,.phero:before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;left:-160px;bottom:-240px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);animation:blob 13s ease-in-out infinite alternate;pointer-events:none}
.hhero:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-120px;top:-140px;background:radial-gradient(circle,rgba(255,214,150,.22),transparent 70%);animation:blob 11s ease-in-out infinite alternate-reverse;pointer-events:none}
.phero:after{animation:blob 12s ease-in-out infinite alternate-reverse}
@keyframes blob{to{transform:translate(70px,-50px) scale(1.18)}}
.hhero .in,.phero .in{position:relative;z-index:2}
.wave{position:absolute;left:0;bottom:-1px;width:100%;height:46px;z-index:1;pointer-events:none;overflow:hidden}
.wave path{fill:var(--bg)}.wave .w2 path{opacity:.45}
.wave .w1{animation:waveX 14s linear infinite}.wave .w2{animation:waveX 22s linear infinite reverse}
@keyframes waveX{from{transform:translateX(0)}to{transform:translateX(-1440px)}}
.phero .in{padding-bottom:70px}.hhero .in{padding-bottom:84px}
.fh{position:absolute;left:var(--x);bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.35);animation:floatUp 9s linear infinite;animation-delay:var(--d);z-index:1;pointer-events:none}
@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(-420px) rotate(25deg);opacity:0}}
/* hero entrance */
.hhero .in>div:first-child>*,.phero .in>div:first-child>*{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.hhero .in>div:first-child>:nth-child(2),.phero .in>div:first-child>:nth-child(2){animation-delay:.08s}
.hhero .in>div:first-child>:nth-child(3),.phero .in>div:first-child>:nth-child(3){animation-delay:.22s}
.hhero .in>div:first-child>:nth-child(4),.phero .in>div:first-child>:nth-child(4){animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
.hhero .art2{animation:popIn 1.1s .25s cubic-bezier(.2,1.25,.3,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.82) rotate(-5deg)}}
.hhero .art2 .il{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.phero .pic{animation:clipIn 1.1s .12s cubic-bezier(.65,0,.35,1) both}
@keyframes clipIn{from{clip-path:inset(14% 14% 14% 14% round 48px);opacity:0}to{clip-path:inset(0 round 28px);opacity:1}}
.phero .pic img{animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
h1.split{animation:none!important}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w>span{display:inline-block;animation:wordUp 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.12s + var(--i) * 75ms)}
@keyframes wordUp{from{transform:translateY(110%) rotate(4deg)}}
/* section headers */
main h2{position:relative}
main h2:after{content:"";display:block;height:5px;width:0;border-radius:5px;background:linear-gradient(90deg,#E5617D,#F7C548);margin-top:12px;transition:width .9s .25s cubic-bezier(.2,.8,.2,1)}
main h2.in:after,html:not(.js) main h2:after{width:70px}
.cath .ce{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}.js .cath.reveal:not(.in) .ce{transform:scale(.3) rotate(-30deg)}
.cath:hover .ce{transform:rotate(-8deg) scale(1.08)}
/* category nav: sticky + scrollspy */
.catnav{position:sticky;top:calc(var(--hdr) + 8px);z-index:6;padding:8px;margin:0 -8px 10px;border-radius:40px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:top .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.catnav.stuck{box-shadow:0 8px 24px rgba(122,84,104,.12)}
.catnav a{transition:background .3s,color .3s,transform .3s}.catnav a:hover{transform:translateY(-2px)}
.catnav a.on{background:var(--accent);border-color:var(--accent);color:#fff}.catnav a span{display:inline-block;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}.catnav a:hover span{transform:scale(1.25) rotate(-10deg)}
.catnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-radius:30px;gap:8px}.catnav::-webkit-scrollbar{display:none}.catnav a{white-space:nowrap;flex:0 0 auto;font-size:15px;padding:8px 14px}
@media(max-width:760px){.catnav{border-radius:26px}}
.toc a{transition:background .3s,color .3s}.toc a.on{background:var(--accent);color:#fff}
/* topic cards: shine + tilt */
.topic{transform-style:preserve-3d;will-change:transform}
.topic .tp{position:relative}
.topic .tp:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.topic:hover .tp:after{transform:translateX(120%)}
.topic h3{transition:color .3s}.topic:hover h3{color:var(--coral)}
.card,.av,.pos,.kv div{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.card:hover,.av:hover,.pos:hover,.kv div:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(122,84,104,.14)}
.card .cic{display:inline-block;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}.card:hover .cic{transform:scale(1.2) rotate(-8deg)}
/* steps: progress line + number pop */
.steps{position:relative}
.steps:before{content:"";position:absolute;left:39px;top:26px;bottom:26px;width:4px;border-radius:4px;background:linear-gradient(#E5617D,#F7C548,#21897E);transform-origin:top;transform:scaleY(var(--p,0));z-index:0;opacity:.85}
.step{position:relative;z-index:1}
.step .sn{transition:transform .6s cubic-bezier(.3,1.6,.5,1),box-shadow .6s}
.js .step.reveal:not(.in) .sn{transform:scale(.3) rotate(-90deg)}
.step.in .sn{box-shadow:0 0 0 6px var(--accent-soft)}
@media(max-width:520px){.steps:before{left:30px}}
/* lists inside revealed blocks */
.js .reveal li.st{opacity:0;translate:-10px 0;transition:opacity .5s,translate .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.15s + var(--i) * 60ms)}
.js .reveal.in li.st{opacity:1;translate:none}
.rules li:before{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}.js .rules li.reveal:not(.in):before{transform:scale(0) rotate(-120deg)}
/* myths: strike-through draws in */
.myth .mt,.myth .ft{margin:0}
.myth .mt{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:transparent;transition:text-decoration-color .8s .45s}
.myth.in .mt,html:not(.js) .myth .mt{text-decoration-color:rgba(201,48,44,.6)}
.js .myth .f{opacity:.0;transition:opacity .7s .7s}.myth.in .f{opacity:1}
/* doctor + danger */
.doctor.in{animation:ringRed 1.8s .4s 2}
@keyframes ringRed{0%{box-shadow:0 0 0 0 rgba(201,48,44,.35)}100%{box-shadow:0 0 0 18px rgba(201,48,44,0)}}
.doctor.in .dh span,.call.danger.in .ci{animation:wiggle .9s .5s}
@keyframes wiggle{20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
.tldr.in .ic{display:inline-block;animation:spinStar 1.2s .3s cubic-bezier(.3,1.4,.5,1) both}
@keyframes spinStar{from{transform:rotate(-180deg) scale(0)}}
/* video play overlay */
.vbox{position:relative}
.vplay{position:absolute;left:50%;top:80%;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;border:0;background:rgba(255,255,255,.94);box-shadow:0 12px 32px rgba(90,20,40,.28);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .3s;z-index:2}
.vplay:before{content:"";position:absolute;inset:-12px;border-radius:50%;border:3px solid rgba(255,255,255,.85);animation:pulseRing 2.2s ease-out infinite}
.vplay span{width:0;height:0;border-left:28px solid #C2456A;border-top:17px solid transparent;border-bottom:17px solid transparent;margin-left:7px}
.vplay:hover{transform:scale(1.1)}.vplay:active{transform:scale(.94)}
.playing .vplay{opacity:0;transform:scale(.5);pointer-events:none}
@keyframes pulseRing{from{transform:scale(.88);opacity:1}to{transform:scale(1.4);opacity:0}}
.vcard .vplay{width:60px;height:60px;margin:-30px 0 0 -30px}
@media(max-width:520px){.video .vplay{width:72px;height:72px;margin:-36px 0 0 -36px}}.vcard .vplay span{border-left-width:22px;border-top-width:13px;border-bottom-width:13px}
.video,.vcard{transition:box-shadow .3s,transform .3s}.video:hover,.vcard:hover{box-shadow:0 18px 40px rgba(122,84,104,.18)}
/* images fade in when loaded */
.js img[loading=lazy]{opacity:0;transition:opacity .7s ease,transform .7s ease}
.js img[loading=lazy].loaded{opacity:1}
/* buttons: press + ripple */
.bigbtn,.copy,.seg button,.readbtn button,.shopbtn button,.clr,.tapzone,.menu,.dl{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.3,1.5,.5,1),background .3s,color .3s,box-shadow .3s}
.bigbtn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(90,20,40,.22)}
.bigbtn:active,.copy:active,.seg button:active,.readbtn button:active,.shopbtn button:active,.clr:active,.menu:active{transform:scale(.95)}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);animation:ripple .65s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* checkboxes */
.checklist input:checked,.sg input:checked{animation:boxPop .35s cubic-bezier(.3,1.6,.5,1)}
.checklist input:checked:after,.sg input:checked:after{animation:tick .35s .05s cubic-bezier(.3,1.6,.5,1) both}
@keyframes boxPop{50%{transform:scale(1.22)}}
@keyframes tick{from{transform:rotate(-45deg) translate(1px,-2px) scale(0)}}
.danger-list input{transition:transform .2s}.danger-list input:checked{animation:boxPop .35s}
.clp i{transition:width .6s cubic-bezier(.2,.8,.2,1)}
.sgc{transition:background .4s,color .4s,transform .4s}.sgc.done{animation:boxPop .5s}
.particle{position:fixed;z-index:80;pointer-events:none;font-size:18px;line-height:1;will-change:transform,opacity}
/* results / alerts */
.res{animation:fadeSlide .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}}
.icons i{animation:dropIn .5s cubic-bezier(.3,1.6,.5,1) both}
.icons i:nth-child(2){animation-delay:.06s}.icons i:nth-child(3){animation-delay:.12s}.icons i:nth-child(4){animation-delay:.18s}.icons i:nth-child(5){animation-delay:.24s}.icons i:nth-child(6){animation-delay:.3s}
@keyframes dropIn{from{transform:translateY(-24px) scale(.4);opacity:0}}
/* drawer stagger */
.drawer .pane>a,.drawer .pane>h5{opacity:0;transform:translateX(24px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.drawer.open .pane>a,.drawer.open .pane>h5{opacity:1;transform:none;transition-delay:calc(.08s + var(--i,0) * 22ms)}
.drawer a span{display:inline-block;transition:transform .3s}.drawer a:hover span{transform:scale(1.25)}
/* floating SOS heartbeat */
.sos{animation:beat 6s ease-in-out infinite;transition:transform .3s,opacity .3s}
@keyframes beat{0%,14%,100%{transform:scale(1)}4%{transform:scale(1.09)}8%{transform:scale(1)}11%{transform:scale(1.06)}}
.sos.away{opacity:0;transform:translateY(30px) scale(.8);pointer-events:none;animation:none}
/* coffee */
.coffee .cup{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}.coffee:hover .cup{transform:rotate(-8deg) scale(1.06)}
.copy.ok{animation:boxPop .4s}
/* footer wave */
footer{position:relative}
footer:before{content:"";position:absolute;left:0;right:0;top:-28px;height:30px;background:radial-gradient(30px 22px at 30px 30px,var(--foot) 98%,transparent) repeat-x;background-size:60px 30px;animation:footWave 20s linear infinite}
@keyframes footWave{to{background-position:600px 0}}

:root[data-theme=dark] img{filter:brightness(.88) contrast(1.04)}:root[data-theme=dark] .vbox,.vbox video,.vcard video{background:#2A1A23}:root[data-theme=dark] .hhero,.phero{filter:saturate(.92)}:root[data-theme=dark] .topic:hover,.pn a:hover{box-shadow:0 18px 44px rgba(0,0,0,.5)}:root[data-theme=dark] .range::-webkit-slider-thumb{border-color:#1F161C}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) img{filter:brightness(.88) contrast(1.04)}:root:not([data-theme=light]) .vbox,.vbox video,.vcard video{background:#2A1A23}:root:not([data-theme=light]) .hhero,.phero{filter:saturate(.92)}:root:not([data-theme=light]) .topic:hover,.pn a:hover{box-shadow:0 18px 44px rgba(0,0,0,.5)}:root:not([data-theme=light]) .range::-webkit-slider-thumb{border-color:#1F161C}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;translate:none;scale:none}.readprog,.wave,.fh{display:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media print{.top,.drawer,.sos,.toc,.pn,footer,.video,.tool,.readbtn,.hhero .cta{display:none!important}body{background:#fff;font-size:12pt}.phero{background:none;color:var(--ink)}.phero h1,.phero .chip{color:var(--ink)}.js .reveal{opacity:1;transform:none}a{color:var(--ink)}}