:root{
  --bg:#ffffff;--bg2:#f5f5f5;--ink:#32353e;--head:#2c2f35;--muted:#73767e;--card:#ffffff;--line:#dcdcde;--line2:rgba(50,53,62,.11);
  --mint:#67e0a6;--mint-d:#4fd394;--teal:#173e3e;--green:#067c64;--blue:#2970ec;--red:#d93c1d;
  --accent:var(--teal);--shadow:0 16px 36px -18px rgba(23,62,62,.35);--r:16px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.65 "Inter",Helvetica,Arial,sans-serif;overflow-x:hidden;transition:background .3s,color .3s}
img{max-width:100%;height:auto;display:block}
html{overflow-x:clip}
main,footer{overflow-x:clip}a{color:inherit}
h1,h2,h3{font-family:"Inter",Helvetica,Arial,sans-serif;font-weight:600;color:var(--head);line-height:1.15;letter-spacing:-.025em;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
#leaves{position:fixed;inset:0;pointer-events:none;z-index:0}
main,header,footer{position:relative;z-index:1}

/* header */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 21px "Inter",sans-serif;color:var(--teal)}
.logo i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-style:normal;background:var(--mint);color:var(--teal);font-size:20px}
.logo b{color:var(--green)}
.top nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.top nav a.lnk{padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px;color:var(--muted)}
.top nav a.lnk:hover{background:var(--bg2);color:var(--ink)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:18px}
@media (max-width:640px){.top nav a.lnk{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--mint);color:var(--teal);text-decoration:none;font-weight:600;padding:12px 24px;border-radius:320px;border:0;cursor:pointer;font-size:16px;font-family:inherit;transition:transform .18s,background .18s,box-shadow .18s}
.btn:hover{background:var(--mint-d);transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(23,62,62,.5)}
.btn.sm{padding:9px 16px;font-size:14.5px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.ghost:hover{background:var(--bg2);border-color:var(--ink)}
.btn .arr{transition:transform .18s}.btn:hover .arr{transform:translateX(4px)}

/* hero */
.hero{padding-top:70px;padding-bottom:80px;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);padding:6px 14px 6px 8px;border-radius:999px;font-weight:600;font-size:14px}
.eyebrow span{background:var(--teal);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px}
.hero h1{font-size:clamp(40px,6.4vw,76px);margin:20px 0 18px}
.hero h1 .rot{display:inline-block;color:var(--green);position:relative}
.hero h1 .rot::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--mint);opacity:.6;border-radius:6px;z-index:-1}
.hero p.sub{font-size:19px;color:var(--muted);max-width:560px;margin:0 0 26px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.stats div{font-weight:700;color:var(--muted);font-size:14px}
.stats b{display:block;font:700 32px "Inter",sans-serif;color:var(--teal)}
.stack{position:relative;height:520px}
.stack .s{position:absolute;width:62%;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);border:6px solid var(--card);background:var(--card);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.stack .s:nth-child(1){left:2%;top:40px;transform:rotate(-9deg)}
.stack .s:nth-child(2){right:2%;top:10px;transform:rotate(7deg)}
.stack .s:nth-child(3){left:20%;top:120px;transform:rotate(-1deg);z-index:2}
.stack:hover .s:nth-child(1){transform:rotate(-14deg) translate(-20px,10px)}
.stack:hover .s:nth-child(2){transform:rotate(12deg) translate(20px,-6px)}
.stack:hover .s:nth-child(3){transform:rotate(0) translateY(-12px) scale(1.03)}
.blob{position:absolute;inset:6% 4%;border-radius:42% 58% 63% 37%/45% 40% 60% 55%;background:linear-gradient(135deg,#b9f3d6,var(--mint) 50%,#2f8f7a);opacity:.9;animation:morph 12s ease-in-out infinite;filter:saturate(1.1)}
@keyframes morph{50%{border-radius:58% 42% 38% 62%/58% 56% 44% 42%;transform:rotate(8deg)}}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-top:40px}.stack{height:420px;max-width:460px;margin:0 auto;width:100%}}

/* marquee */
.marquee{overflow:hidden;position:relative;z-index:3;border-block:1px solid var(--line);background:var(--teal);color:#fff;padding:14px 0;margin:30px 0 0;transform:rotate(-1.2deg)}
.marquee div{display:flex;gap:40px;width:max-content;animation:scroll 30s linear infinite;font:600 18px "Inter",sans-serif;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* shop */
.shop{padding-top:80px;padding-bottom:40px}
.shop-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.shop-head h2{font-size:clamp(32px,4.4vw,52px)}
.shop-head p{margin:6px 0 0;color:var(--muted)}
.search{position:relative;flex:0 1 320px}
.search input{width:100%;padding:13px 16px 13px 44px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:16px}
.search input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(103,224,166,.35)}
.search::before{content:"🔎";position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;align-items:center}
.chip{border:1px solid var(--line2);background:var(--card);color:var(--ink);font:500 15px "Inter",sans-serif;padding:8px 16px;border-radius:999px;cursor:pointer;transition:all .15s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.filters .sep{width:1px;height:26px;background:var(--line);margin:0 6px}
.filters select{margin-left:auto;border:1px solid var(--line2);background:var(--card);color:var(--ink);font:500 15px "Inter",sans-serif;padding:8px 14px;border-radius:999px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;transform-style:preserve-3d;will-change:transform}
.card:hover{box-shadow:var(--shadow)}
.card .thumb{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg2);cursor:pointer}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.06)}
.card .thumb .fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:90px}
.badge{position:absolute;top:14px;left:14px;background:var(--mint);color:var(--teal);font:700 12px "Inter";letter-spacing:.06em;padding:5px 11px;border-radius:999px;z-index:2}
.qv{position:absolute;inset:auto 14px 14px 14px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(6px);color:var(--ink);border:0;font:600 14.5px "Inter";padding:10px;border-radius:14px;cursor:pointer;opacity:0;transform:translateY(10px);transition:all .25s}
.card:hover .qv,.qv:focus{opacity:1;transform:none}
.card .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tag{color:var(--green)!important;font:600 12.5px "Inter";letter-spacing:.07em;text-transform:uppercase}
.card h3{font-size:20px;line-height:1.2}
.card h3 a{text-decoration:none}
.card p{margin:0;color:var(--muted);font-size:15px}
.card .row{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.price{font:700 22px "Inter",sans-serif;color:var(--ink)}
.price small{display:block;font:600 12px "Inter";color:var(--muted);letter-spacing:.04em}
.empty{padding:50px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:var(--r);display:none}

/* features */
.features{padding-top:60px;padding-bottom:60px}
.features h2{font-size:clamp(30px,4vw,46px);max-width:640px;margin-bottom:28px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.f{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:transform .2s}
.f:hover{transform:translateY(-4px) rotate(-.6deg)}
.f .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;margin-bottom:14px}
.f h3{font-size:21px;margin-bottom:6px}.f p{margin:0;color:var(--muted);font-size:15.5px}

/* finder */
.finder{margin:30px 0 70px;border-radius:32px;padding:44px;background:var(--teal);color:#fff;display:grid;grid-template-columns:1fr 1.2fr;gap:30px;align-items:center;overflow:hidden;position:relative}
.finder h2{color:#fff;font-size:clamp(28px,3.6vw,42px)}
.finder p{opacity:.85}
.finder .opts{display:flex;flex-wrap:wrap;gap:10px}
.finder .opts button{border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font:600 16px "Inter";padding:12px 20px;border-radius:320px;cursor:pointer;transition:all .15s}
.finder .opts button:hover,.finder .opts button.on{background:var(--mint);border-color:var(--mint);color:var(--teal)}
.finder .result{margin-top:18px;min-height:56px}
.finder .result a{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.12);border-radius:16px;padding:10px;text-decoration:none;margin-bottom:8px;animation:pop .35s}
.finder .result img{width:48px;height:48px;border-radius:10px;object-fit:cover}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
@media (max-width:820px){.finder{grid-template-columns:1fr;padding:30px}}

/* modal */
dialog{border:0;padding:0;border-radius:28px;max-width:900px;width:calc(100% - 32px);background:var(--card);color:var(--ink);box-shadow:0 40px 80px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(20,10,30,.55);backdrop-filter:blur(4px)}
dialog[open]{animation:pop .3s}
.m{display:grid;grid-template-columns:1.1fr 1fr}
.m .gal{background:var(--bg2);position:relative}
.m .gal img{width:100%;aspect-ratio:1;object-fit:contain}
.m .dots{display:flex;gap:8px;justify-content:center;padding:12px}
.m .dots button{width:54px;height:54px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:none}
.m .dots button.on{border-color:var(--mint)}
.m .dots img{width:100%;height:100%;object-fit:cover}
.m .info{padding:30px;display:flex;flex-direction:column;gap:12px}
.m .info h3{font-size:26px}.m .info p{margin:0;color:var(--muted)}
.m .info .acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.m .x{position:absolute;top:12px;right:12px;z-index:3}
@media (max-width:720px){.m{grid-template-columns:1fr}}

/* product page */
.crumbs{font-size:14.5px;color:var(--muted);padding-top:24px}.crumbs a{text-decoration:none}
.p-hero{padding-top:26px;padding-bottom:30px;display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start}
.gallery .main{border-radius:var(--r);overflow:hidden;background:var(--bg2);border:1px solid var(--line);aspect-ratio:1;position:relative}
.gallery .main img{width:100%;height:100%;object-fit:contain;transition:opacity .25s}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.gallery .thumbs button{padding:0;border:2px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:1;background:var(--bg2)}
.gallery .thumbs button.on{border-color:var(--mint)}
.gallery .thumbs img{width:100%;height:100%;object-fit:cover}
.p-info h1{font-size:clamp(30px,4vw,48px);margin:10px 0 16px}
.p-info .lead{font-size:18.5px;color:var(--muted)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}
.facts div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-size:14px;color:var(--muted)}
.facts b{display:block;color:var(--ink);font-size:15.5px;font-weight:600}
.buyrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.note{font-size:13.5px;color:var(--muted);margin-top:10px}
@media (max-width:880px){.p-hero{grid-template-columns:1fr}}
.tabs{display:flex;flex-wrap:wrap;gap:4px 8px;border-bottom:2px solid var(--line);margin:30px 0 0}
.tabs button{border:0;background:none;color:var(--muted);font:600 16px "Inter";padding:12px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tabs button.on{color:var(--teal);border-color:var(--mint)}
.panel{display:none;padding:26px 0 10px;max-width:820px}
.panel.on{display:block;animation:pop .3s}
.panel h2{font-size:26px;margin:26px 0 12px}.panel h2:first-child{margin-top:0}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px 12px 46px;position:relative}
.checks li::before{content:"✓";position:absolute;left:14px;top:11px;width:22px;height:22px;border-radius:50%;background:var(--mint);color:var(--teal);font-weight:900;font-size:13px;display:grid;place-items:center}
details{border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:10px 0;background:var(--card)}
summary{font-weight:600;color:var(--head);cursor:pointer;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";font-size:22px;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:10px 0 0;color:var(--muted)}
.cta-band{margin:50px 0;border-radius:32px;padding:40px;background:var(--teal);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.cta-band h2{font-size:clamp(24px,3vw,34px);max-width:560px}
.cta-band h2{color:#fff}
.related h2{font-size:30px;margin-bottom:18px}
.sticky-buy{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;background:var(--teal);color:#fff;border-radius:320px;padding:8px 8px 8px 22px;display:flex;align-items:center;gap:12px;transform:translateY(140%);transition:transform .35s;box-shadow:0 20px 40px -10px rgba(0,0,0,.5)}
.sticky-buy.show{transform:none}
.sticky-buy span{flex:1;font-weight:800;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:881px){.sticky-buy{left:auto;width:440px;right:24px}}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

footer{padding:50px 0 90px;color:var(--muted);font-size:14.5px;border-top:1px solid var(--line);margin-top:40px;background:var(--bg2)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
[hidden]{display:none!important}

.about{max-width:820px;padding:10px 0 6px}
.about h2{font-size:28px;margin:10px 0 14px}
.about p{margin:0 0 16px;font-size:17px}
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;list-style:none;padding:0;margin:0}
.uses li{background:var(--bg2);border-radius:12px;padding:12px 16px;font-weight:500}
.shop,.features{background:transparent}
.features{background:var(--bg2);border-radius:28px;padding-left:28px;padding-right:28px}
.card{border-color:var(--line)}
.f{border-color:var(--line)}

/* ---------- mobile refinements ---------- */
.crumbs a{display:inline-block;padding:10px 2px}
.card h3 a{display:block;padding:6px 0}
footer a{display:inline-block;padding:8px 0}
.top nav .btn{white-space:nowrap}
.btn{justify-content:center;text-align:center}
@media (max-width:900px){
  .stack{height:auto;aspect-ratio:1/0.85;max-width:420px}
  .stack .s{width:58%}
  .stack .s:nth-child(3){top:18%}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .hero{padding-top:28px;padding-bottom:48px;gap:28px}
  .hero p.sub{font-size:17px}
  .hero .ctas .btn{flex:1 1 auto}
  .stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:22px;margin-top:26px}
  .stats b{font-size:26px}
  .marquee{transform:none;margin-top:0}
  .shop{padding-top:56px}
  .filters{gap:6px}
  .filters .sep{display:none}
  .filters select{margin-left:0;width:100%}
  .search{flex:1 1 100%}
  .chip{padding:9px 14px;min-height:40px}
  .grid{gap:18px}
  .finder{padding:24px;border-radius:24px}
  .finder .opts button{padding:11px 16px}
  .features{padding-left:18px;padding-right:18px;border-radius:20px}
  .p-hero{gap:26px}
  .facts{gap:8px}
  .buyrow .btn{flex:1 1 100%}
  .tabs button{padding:12px 12px;font-size:15px}
  .cta-band{padding:26px;border-radius:24px}
  .cta-band .btn{width:100%}
  .m .info{padding:20px}
  .m .dots button{width:46px;height:46px}
  dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);overflow:auto}
}
@media (max-width:420px){
  .top .wrap{gap:8px;height:60px}
  .logo{font-size:18px;gap:8px}
  .logo i{width:32px;height:32px;font-size:17px}
  .top nav .btn.sm{padding:9px 14px;font-size:14px}
  .hero h1{font-size:36px}
  .p-info h1{font-size:28px}
  .sticky-buy span{font-size:14px}
}
@media (max-width:340px){
  .top nav .btn.sm .arr{display:none}
  .stats{gap:14px}
  .stats b{font-size:22px}
}

/* ---------- blog ---------- */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.bcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.bthumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
.bthumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.bcard:hover .bthumb img{transform:scale(1.05)}
.bbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.bbody h3{font-size:19px;line-height:1.3}.bbody h3 a{text-decoration:none}
.bbody p{margin:0;color:var(--muted);font-size:15px}
.bbody .more{margin-top:auto;padding-top:8px;font-weight:600;color:var(--green);text-decoration:none;display:inline-block;padding-bottom:4px}
.blog-teaser{padding-top:30px;padding-bottom:30px}
.blog-teaser h2{font-size:clamp(28px,4vw,44px)}
.blog-hero{padding:20px 0 30px;max-width:760px}
.blog-hero h1{font-size:clamp(34px,5vw,56px);margin-bottom:12px}
.blog-hero p{color:var(--muted);font-size:18px;margin:0}
.post-head{max-width:820px;padding:12px 0 24px}
.post-head h1{font-size:clamp(30px,4.6vw,50px);margin:10px 0 14px}
.post-meta{color:var(--muted);font-size:15px;margin:0}
.post-layout{display:grid;grid-template-columns:240px minmax(0,760px);gap:48px;align-items:start;padding-bottom:30px}
.toc{position:sticky;top:90px;font-size:14.5px}
.toc summary{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc ol{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.toc li a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--muted);line-height:1.35}
.toc li a:hover,.toc li a.on{color:var(--teal);border-color:var(--mint)}
.toc details{border:0;padding:0;background:none;margin:0}
.post-body{font-size:18px;line-height:1.75}
.post-body h2{font-size:clamp(25px,3vw,31px);margin:44px 0 14px;scroll-margin-top:84px}
.post-body h3{font-size:21px;margin:30px 0 10px}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 20px;padding-left:24px}
.post-body li{margin:7px 0}
.post-body a{color:var(--green);text-underline-offset:3px}
.post-cta{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin:30px 0}
.post-cta img{border-radius:12px;width:100%;aspect-ratio:1;object-fit:cover}
.post-cta h3{margin:4px 0 6px;font-size:20px}
.post-cta p{font-size:15px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.post-cta .acts{display:flex;gap:10px;flex-wrap:wrap}
.guide-link{display:grid;gap:4px;text-decoration:none;background:var(--bg2);border:1px solid var(--line);border-left:5px solid var(--mint);border-radius:16px;padding:20px 22px;margin:34px 0 0;transition:transform .2s}
.guide-link:hover{transform:translateX(4px)}
.guide-link span{font-size:13.5px;color:var(--muted);font-weight:600}
.guide-link b{font-size:19px;color:var(--head)}
.guide-link i{font-style:normal;color:var(--green);font-weight:600}
.read-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:40;background:transparent}
.read-progress span{display:block;height:100%;width:0;background:var(--mint)}
@media (max-width:980px){
  .post-layout{grid-template-columns:1fr;gap:10px}
  .toc{position:static;background:var(--bg2);border-radius:14px;padding:14px 16px}
  .toc details:not([open]) summary{margin-bottom:0}
}
@media (max-width:600px){
  .post-body{font-size:17px}
  .post-cta{grid-template-columns:1fr;padding:16px}
  .post-cta img{max-width:220px}
  .post-cta .acts .btn{flex:1 1 100%}
  .bgrid{gap:18px}
}
@media (hover:none){.toc li a{padding:10px 0 10px 14px}}

/* ---------- solve-to-reveal demo ---------- */
.rdemo{display:grid;grid-template-columns:1fr minmax(0,440px);gap:56px;align-items:center;margin-top:10px;margin-bottom:10px;padding:44px;background:var(--bg2);border-radius:32px}
.rd-kicker{display:inline-block;font:600 13px "Inter";letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.rdemo h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:12px}
.rd-text>p{color:var(--muted);margin:0 0 20px}
.rd-tasks{display:grid;gap:10px}
.rd-task{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 12px 10px 14px;transition:border-color .2s,background .2s}
.rd-task b{font-weight:600;color:var(--head);font-size:16px}
.rd-sw{width:18px;height:18px;border-radius:5px;border:2px solid var(--line)}
.rd-g{background:#2f9e6f}.rd-o{background:#f08c3a}.rd-k{background:#173e3e}
.rd-opts{display:flex;gap:6px}
.rd-opts button{min-width:48px;height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);font:600 16px "Inter";color:var(--ink);cursor:pointer;transition:transform .15s,background .15s}
.rd-opts button:hover{background:var(--bg2);transform:translateY(-1px)}
.rd-opts button.no{animation:rdshake .35s;border-color:var(--red);color:var(--red)}
.rd-task.done{border-color:var(--mint);background:#effcf5}
.rd-task.done .rd-opts button{pointer-events:none;opacity:.35}
.rd-task.done .rd-opts button.yes{opacity:1;background:var(--mint);border-color:var(--mint);color:var(--teal)}
@keyframes rdshake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.rd-msg{min-height:24px;margin:14px 0 0;font-weight:600;color:var(--muted)}
.rd-msg.bad{color:var(--red)}.rd-msg.good{color:var(--green)}
.rd-done{display:none;gap:10px;flex-wrap:wrap;margin-top:14px}
.rdemo.complete .rd-done{display:flex}
.rd-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:3px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:var(--shadow)}
.rd-c{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;font:600 clamp(9px,1.6vw,13px) "Inter";color:#9a9ca3;background:#fff;transition:background .35s calc(var(--i)*35ms),color .35s calc(var(--i)*35ms),transform .35s calc(var(--i)*35ms),border-color .35s calc(var(--i)*35ms)}
.rd-c.on{color:transparent;transform:scale(1.04);background:var(--fc);border-color:var(--fc)}
.rdemo.complete .rd-grid{animation:rdpop .6s .4s}
@keyframes rdpop{50%{transform:scale(1.03) rotate(-1deg)}}
@media (max-width:900px){.rdemo{grid-template-columns:1fr;gap:28px;padding:28px}.rd-grid{max-width:440px;width:100%;margin:0 auto}}
@media (max-width:600px){.rdemo{padding:20px 16px;border-radius:22px;margin-left:16px;margin-right:16px}
 .rd-task{grid-template-columns:auto 1fr;row-gap:10px}.rd-opts{grid-column:1/-1}.rd-opts button{flex:1}
 .rd-grid{padding:10px;gap:2px}.rd-done .btn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.rd-c{transition:none}}
@media (max-width:900px){
 .rdemo{display:flex;flex-direction:column;gap:0}
 .rd-text{display:contents}
 .rd-kicker{order:1;align-self:flex-start}.rdemo h2{order:2}.rd-text>p{order:3}
 .rd-grid{order:4;margin:0 auto 18px}
 .rd-tasks{order:5}.rd-msg{order:6}.rd-done{order:7}
}
@media (max-width:900px){.rd-text>p.rd-msg{order:6}.rd-tasks,.rd-msg,.rd-done{width:100%;align-self:stretch}}

.rd-next{margin-top:14px;background:none;border:0;padding:10px 2px;font:600 15px "Inter";color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.rd-next:hover{color:var(--teal)}
.rd-grid.swap .rd-c{transition:none}
@media (max-width:900px){.rd-next{order:8;align-self:center}}