/* WealthyTrees notebook.css v1: Learn modules look like a handwritten study notebook */
.article{position:relative;margin-top:1rem;margin-bottom:2rem;padding:1.4rem 1.4rem 2rem 3.4rem;background-color:var(--paper);background-image:repeating-linear-gradient(transparent 0 26px,color-mix(in srgb,var(--up) 14%,transparent) 26px 27px);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.article::before{content:"";position:absolute;top:0;bottom:0;left:2.6rem;width:2px;background:color-mix(in srgb,var(--down) 55%,transparent)}
.article::after{content:"";position:absolute;top:1.2rem;bottom:1.2rem;left:.8rem;width:14px;background:radial-gradient(circle at 7px 7px,var(--bg) 0 5px,color-mix(in srgb,var(--ink) 25%,transparent) 5.5px 7px,transparent 7.5px) 0 0/14px 38px repeat-y}
.article>*{position:relative;z-index:1}
.article a{color:var(--up);text-decoration-thickness:2px;text-underline-offset:3px}
.article>p:first-of-type{margin-top:0}
.article>p:first-of-type a:not(.fbtn){display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .95rem;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;transition:border-color .2s,transform .2s,color .2s}
.article>p:first-of-type a:not(.fbtn):hover{border-color:var(--up);color:var(--up);transform:translateX(-3px)}
.article h2{font-family:Caveat,"Segoe Print","Comic Sans MS",cursive;font-size:2.15rem;font-weight:700;letter-spacing:0;display:inline-block;margin:2.2rem 0 .4rem;padding:0 .35rem;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--gold) 38%,transparent) 58% 92%,transparent 92%);transform:rotate(-.6deg)}
.article p b:first-child{font-family:Caveat,"Segoe Print",cursive;font-size:1.3rem;font-weight:700;color:var(--up);margin-right:.15rem}
.article p.trap{max-width:40rem;background:#fff1a6;color:#3a3000;padding:.7rem 1rem .8rem;margin:1rem 0;border-radius:3px;transform:rotate(-.7deg);box-shadow:2px 5px 10px rgba(0,0,0,.18)}
.article p.trap b:first-child{color:#a2380f}
.article p.trap b:first-child::before{content:"\26A0\FE0F  "}
.article .callout{border:2px dashed var(--up);border-left-width:2px;background:color-mix(in srgb,var(--up) 7%,var(--paper));transform:rotate(.3deg)}
.article .callout h3{font-family:Caveat,"Segoe Print",cursive;font-size:1.8rem;font-weight:700;letter-spacing:0}
.article ul{max-width:42rem}
.dgm{margin:1rem 0 .4rem;color:var(--ink);max-width:42rem}
.dgm svg{width:100%;height:auto;display:block;overflow:visible}
.dgm .hw{font-family:Caveat,"Segoe Print",cursive;font-weight:700;fill:currentColor}
.dgm .wk{filter:url(#rough)}
.dgm .wd{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.dgm .cap{font-size:.85rem;color:var(--mute);margin:.1rem 0 0}
.js-nb .dgm .wd{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s ease}
.js-nb .dgm .wf{opacity:0;transition:opacity .8s ease .9s}
.js-nb .dgm.in .wd{stroke-dashoffset:0}
.js-nb .dgm.in .wf{opacity:1}
@media(max-width:640px){.article{padding:1rem .9rem 1.5rem 2.3rem}.article::before{left:1.6rem}.article::after{left:.35rem;width:12px}.article h2{font-size:1.9rem}}
@media(prefers-reduced-motion:reduce){.article>p:first-of-type a:not(.fbtn){transition:none}.js-nb .dgm .wd,.js-nb .dgm .wf{transition:none}}
.js-nb .dgm.done .wd{stroke-dasharray:none;transition:none}

/* Learn index: course page with lesson-thumbnail cards */
.clead{max-width:42rem;font-size:1.05rem}
.cstats{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 1.1rem}.cstats span{font-size:.85rem;font-weight:600;padding:.25rem .75rem;border:1.5px dashed var(--line);border-radius:999px;color:var(--mute)}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.3rem;margin:1.6rem 0 2.5rem}
.ccard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
@media(hover:hover){a.ccard:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 16px 32px rgba(15,138,95,.2);border-color:var(--up)}}
a.ccard:active{transform:scale(.99)}
.cthumb.dgm{position:relative;margin:0;max-width:none;aspect-ratio:16/9;background-color:var(--bg);background-image:repeating-linear-gradient(transparent 0 21px,color-mix(in srgb,var(--up) 14%,transparent) 21px 22px);border-bottom:1px solid var(--line)}
.cthumb.dgm svg{position:absolute;inset:0;width:100%;height:100%}
.cthumb::before{content:"";position:absolute;top:-5px;left:50%;width:74px;height:18px;transform:translateX(-50%) rotate(-3deg);background:color-mix(in srgb,var(--gold) 45%,transparent);z-index:2}
.cnum,.cchip,.cplay,.cribbon{position:absolute;z-index:3}
.cnum{top:.45rem;left:.8rem;font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:1.5rem;color:var(--up)}
.cchip{left:.8rem;bottom:.55rem;background:var(--deep);color:#fff;font-size:.72rem;font-weight:600;padding:.18rem .6rem;border-radius:999px}
.cplay{right:.8rem;bottom:.55rem;width:40px;height:40px;border-radius:50%;background:var(--up);box-shadow:0 4px 12px rgba(15,138,95,.35);transition:transform .2s}
.cplay::after{content:"";position:absolute;left:16px;top:11px;border-left:15px solid var(--on-up);border-top:9px solid transparent;border-bottom:9px solid transparent}
@media(hover:hover){a.ccard:hover .cplay{transform:scale(1.12)}}
.cbody{padding:.85rem 1.1rem 1.1rem}.cbody h3{margin:0 0 .25rem;font-size:1.15rem}.cbody p{margin:0 0 .7rem;color:var(--mute);font-size:.93rem}
.cprog{height:6px;border-radius:9px;background:var(--line);overflow:hidden}.cprog i{display:block;height:100%;width:var(--p,0%);background:var(--up);transition:width .6s}
.cstate{display:flex;justify-content:space-between;font-size:.82rem;margin-top:.4rem;color:var(--mute)}.cgo{color:var(--up);font-weight:700}
.ccard.soon{opacity:.75;filter:saturate(.75)}.cribbon{top:.55rem;right:-2.2rem;transform:rotate(35deg);background:var(--gold);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2rem 2.6rem}
@media(prefers-reduced-motion:reduce){.ccard,.cprog i{transition:none}}

/* v3: captions and the closing note in handwriting */
.article .dgm .cap,.article p.cap{font-family:Caveat,"Segoe Print",cursive;font-size:1.25rem;font-weight:600;color:var(--mute)}

/* v4: diagrams sit in a taped graph-paper box; interactive quiz; overall progress */
.article .dgm{position:relative;margin:1.6rem 0 1rem;padding:1.1rem 1rem .5rem;max-width:42rem;background-color:var(--bg);background-image:linear-gradient(color-mix(in srgb,var(--up) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--up) 9%,transparent) 1px,transparent 1px);background-size:22px 22px;border:2px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:14px;box-shadow:3px 5px 0 color-mix(in srgb,var(--ink) 14%,transparent)}
.article .dgm::before{content:"";position:absolute;top:-9px;left:50%;width:74px;height:18px;transform:translateX(-50%) rotate(-2deg);background:color-mix(in srgb,var(--gold) 50%,transparent)}
.article .dgm .cap{margin:.2rem 0 .4rem;text-align:center}
.quiz{position:relative;margin:2.2rem 0 1rem;padding:1.1rem 1.2rem 1.3rem;max-width:42rem;border:2px dashed var(--up);border-radius:14px;background:color-mix(in srgb,var(--up) 7%,var(--paper))}
.quiz h3{margin:0 0 .2rem;font-family:Caveat,"Segoe Print",cursive;font-size:2rem}
.qdots{display:flex;gap:.4rem;margin:.2rem 0 .8rem}.qdots i{width:26px;height:7px;border-radius:9px;background:var(--line)}.qdots i.on{background:var(--gold)}.qdots i.ok{background:var(--up)}.qdots i.bad{background:var(--down)}
.qq{font-weight:600;margin:.2rem 0 .6rem}
.qopt{display:block;width:100%;text-align:left;margin:.45rem 0;padding:.65rem .95rem;font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.qopt:not(:disabled):hover{border-color:var(--up);transform:translateX(4px)}.qopt:disabled{cursor:default}
.qopt.ok{background:color-mix(in srgb,var(--up) 22%,var(--paper));border-color:var(--up);font-weight:600}
.qopt.bad{background:color-mix(in srgb,var(--down) 18%,var(--paper));border-color:var(--down);animation:qshake .4s}
@keyframes qshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.qfb{margin:.7rem 0 .5rem;font-family:Caveat,"Segoe Print",cursive;font-size:1.4rem;font-weight:700;line-height:1.25}
.qres{text-align:center;padding:.6rem 0}.qres b{display:block;font-family:Caveat,"Segoe Print",cursive;font-size:3rem;color:var(--up)}
.oprog{max-width:42rem;margin:0 0 1.1rem}.oprog p{margin:0 0 .3rem;font-weight:600}.oprog b{color:var(--up);font-size:1.15rem}
@media(prefers-reduced-motion:reduce){.qopt.bad{animation:none}}

/* v6: one calm disclaimer at the end of each module */
p.legal{max-width:42rem;margin:1.6rem 0 .6rem;padding:.7rem 1rem;border:1.5px solid var(--line);border-left:6px solid var(--gold);border-radius:8px;background:color-mix(in srgb,var(--gold) 9%,var(--paper));font-weight:600;font-size:.92rem;line-height:1.5;color:var(--ink);transform:none}
p.legal b:first-child{font-family:Inter,system-ui,sans-serif;font-size:.9rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-right:.35rem}
footer .wrap{font-weight:700;color:var(--ink)}

/* Practice lab + course path */
.builds{max-width:42rem;padding:.5rem .9rem;border-left:3px solid var(--up);background:color-mix(in srgb,var(--up) 7%,transparent);border-radius:0 8px 8px 0}
.builds b{font-family:Caveat,"Segoe Print",cursive;font-size:1.25rem;color:var(--up)}
.lab{margin:2.2rem 0 1.4rem;padding:1rem 1.2rem 1.2rem;border:2px solid var(--up);border-radius:14px;background:color-mix(in srgb,var(--up) 6%,var(--paper))}
.lab .lab-h{margin-top:.2rem;transform:none;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--up) 30%,transparent) 58% 92%,transparent 92%)}
.lab-sub{margin:.2rem 0 .8rem;color:var(--mute)}.lab-cnt{margin-left:.4rem;font-weight:700;color:var(--up);white-space:nowrap}
.lab ol{list-style:none;margin:0;padding:0;counter-reset:lb}
.lab li{counter-increment:lb;margin:0 0 .8rem;padding:.7rem .8rem .7rem 2.8rem;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.lab li::before{content:counter(lb);position:absolute;left:.8rem;top:.65rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--up);color:var(--on-up,#fff);font-weight:700;font-size:.85rem;display:grid;place-items:center}
.lab label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}.lab input{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--up);flex:none}
.lab li.ok{border-color:var(--up);background:color-mix(in srgb,var(--up) 8%,var(--paper))}.lab li.ok .lab-t{opacity:.7;text-decoration:line-through;text-decoration-thickness:1px}
.lab-links{display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 0 1.7rem}
.article .lab a.lab-go{display:inline-block;padding:.3rem .8rem;border:1.5px solid var(--up);border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none;color:var(--up);transition:background .2s,color .2s}
.article .lab a.lab-go:hover{background:var(--up);color:var(--on-up,#fff)}
.mpath{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;margin-top:1rem}
.article .mpath a{font-weight:600;text-decoration:none;padding:.4rem .9rem;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink)}
.article .mpath a:hover{border-color:var(--up);color:var(--up)}.article .mpath a.lab-next{background:var(--up);border-color:var(--up);color:var(--on-up,#fff)}
.lab.all{box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 22%,transparent)}

.mdone{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 .3rem}
.mdone span{font-size:.85rem;font-weight:600;padding:.25rem .75rem;border:1.5px solid var(--line);border-radius:999px;background:var(--bg);color:var(--mute)}
.mdone span.ok{background:var(--up);border-color:var(--up);color:var(--on-up,#fff)}
.mdone-msg{flex-basis:100%;margin:.2rem 0 0;font-size:.9rem;color:var(--mute)}

/* v7: subtle green glow on cards in dark mode */
[data-theme=dark] .ccard,[data-theme=dark] .article .dgm,[data-theme=dark] .quiz,[data-theme=dark] .lab{border-color:color-mix(in srgb,var(--up) 45%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 22%,transparent),0 0 16px color-mix(in srgb,var(--up) 16%,transparent),0 0 38px color-mix(in srgb,var(--up) 8%,transparent)}
@media(hover:hover){[data-theme=dark] a.ccard:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 50%,transparent),0 0 24px color-mix(in srgb,var(--up) 32%,transparent),0 0 56px color-mix(in srgb,var(--up) 16%,transparent)}}
[data-theme=dark] .article .dgm::before{background:color-mix(in srgb,var(--up) 40%,transparent)}

/* v8: Learn section glows in dark mode */
[data-theme=dark] .course-grid{position:relative;isolation:isolate}
[data-theme=dark] .course-grid::before{content:"";position:absolute;inset:-50px -30px;z-index:-1;pointer-events:none;background:radial-gradient(34% 28% at 35% 28%,rgba(62,207,142,.20),transparent 70%),radial-gradient(30% 26% at 68% 78%,rgba(224,176,79,.12),transparent 70%)}
[data-theme=dark] .course-grid .ccard{background:linear-gradient(155deg,color-mix(in srgb,var(--up) 24%,var(--paper)),var(--paper) 64%);border:1.5px solid color-mix(in srgb,var(--up) 75%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 30%,transparent),0 0 24px color-mix(in srgb,var(--up) 38%,transparent),0 0 60px color-mix(in srgb,var(--up) 18%,transparent),inset 0 0 30px color-mix(in srgb,var(--up) 14%,transparent);animation:ccglow 3.4s ease-in-out infinite}
@keyframes ccglow{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 45%,transparent),0 0 34px color-mix(in srgb,var(--up) 58%,transparent),0 0 80px color-mix(in srgb,var(--up) 28%,transparent),inset 0 0 36px color-mix(in srgb,var(--up) 22%,transparent)}}
@media(hover:hover){[data-theme=dark] .course-grid a.ccard:hover{animation:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 65%,transparent),0 0 36px color-mix(in srgb,var(--up) 65%,transparent),0 0 90px color-mix(in srgb,var(--up) 32%,transparent),inset 0 0 40px color-mix(in srgb,var(--up) 24%,transparent)}}
[data-theme=dark] .course-grid .cthumb{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--up) 30%,#0a1812),#0a1812 78%)}
[data-theme=dark] .course-grid .cnum{color:#8dffc9;text-shadow:0 0 12px rgba(62,207,142,.8)}
[data-theme=dark] .course-grid .cgo{color:#8dffc9;text-shadow:0 0 10px rgba(62,207,142,.6)}
[data-theme=dark] .course-grid .cprog i{box-shadow:0 0 12px var(--up)}
[data-theme=dark] .cstats span,[data-theme=dark] .oprog{box-shadow:0 0 12px color-mix(in srgb,var(--up) 22%,transparent)}
[data-theme=dark] main.page>h1{text-shadow:0 0 24px rgba(62,207,142,.5)}
@media(prefers-reduced-motion:reduce){[data-theme=dark] .course-grid .ccard{animation:none}}

/* Try it live (Learn modules to Markets) */
.try{margin:1.6rem 0;padding:.9rem 1.2rem 1.1rem;border:2px dashed color-mix(in srgb,var(--up) 55%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--up) 4%,var(--paper))}
.try h2{margin-top:.1rem}
.try p{margin:.3rem 0}
a.tryb{display:inline-flex;align-items:center;gap:.5rem;background:var(--paper);color:var(--ink);border:2px solid var(--up);border-radius:10px;padding:.5rem 1.2rem;font-family:Caveat,"Segoe Print","Comic Sans MS",cursive;font-size:1.45rem;font-weight:700;line-height:1.2;text-decoration:none;box-shadow:3px 3px 0 color-mix(in srgb,var(--up) 45%,transparent);transition:transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
a.tryb::after{content:"\2192";color:var(--up);transition:transform .15s}
@media(hover:hover){a.tryb:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 color-mix(in srgb,var(--up) 60%,transparent)}a.tryb:hover::after{transform:translateX(4px)}}
a.tryb:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--up)}
a.tryb:focus-visible{outline:3px solid var(--up);outline-offset:3px}
[data-theme=dark] a.tryb{box-shadow:0 0 14px color-mix(in srgb,var(--up) 35%,transparent)}
@media(hover:hover){[data-theme=dark] a.tryb:hover{box-shadow:0 0 22px color-mix(in srgb,var(--up) 60%,transparent)}}
[data-theme=dark] a.tryb:active{box-shadow:0 0 8px var(--up)}
@media(prefers-reduced-motion:reduce){a.tryb,a.tryb::after{transition:none}}

/* Learn index: 3 level cards, side by side */
.page.lw{max-width:68rem}.crumb{margin:0}
.lvls{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.6rem .6rem 1.2rem;margin:.6rem -.6rem 1.5rem}
@media(max-width:700px){.lvls{grid-auto-columns:82%}}
.lvl{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;padding:1.1rem 1.2rem;background:var(--paper);border:1.5px dashed var(--line);border-radius:14px;color:var(--ink);text-decoration:none}
.lvl h2{font-family:'Caveat',cursive;font-size:2.1rem;line-height:1.1;margin:.5rem 0 .3rem}.lvl p{margin:0 0 .4rem}
.lvl .cstats{margin:.5rem 0}.lvp{margin:.2rem 0 .6rem}.lvp span{font-weight:600}.lvp b{color:var(--up);font-size:1.1rem}.lvp .cprog{margin-top:.3rem}
.lvtag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.15rem .6rem;border-radius:999px;background:var(--up);color:var(--paper)}
.lvl.lock{opacity:.85}.lvl.lock .lvtag{background:var(--gold)}
.lvl.live{border:2px solid var(--up);transition:transform .25s}
@media(hover:hover){a.lvl:hover{transform:translateY(-4px)}}
.lvact{margin-top:auto;padding-top:.6rem}
[data-theme=dark] .lvl.live{box-shadow:0 0 0 1px color-mix(in srgb,var(--up) 30%,transparent),0 0 24px color-mix(in srgb,var(--up) 30%,transparent)}
[data-theme=dark] .oprog{box-shadow:none}
@media(prefers-reduced-motion:reduce){.lvl.live{transition:none}}
.lw .course-grid{margin-top:3rem}#cont{position:relative;z-index:1}
.lvl.live h2{margin-top:2rem}
/* Site button: filled, use for every link that acts like a button */
.fbtn{display:inline-flex;align-items:center;gap:.45rem;background:var(--up);color:var(--paper);border:2px solid var(--up);border-radius:10px;padding:.5rem 1.25rem;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.fbtn.alt{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.fbtn.go::after{content:"\2192"}
@media(hover:hover){.fbtn:hover{transform:translate(-1px,-2px);box-shadow:4px 4px 0 color-mix(in srgb,var(--up) 55%,transparent)}}
.fbtn:active{transform:translate(1px,1px);box-shadow:none}
@media(prefers-reduced-motion:reduce){.fbtn{transition:none}}
[data-theme=dark] .fbtn.alt{background:var(--paper);color:var(--ink);border-color:var(--up)}
.ccard .can{font-size:.88rem;margin:.5rem 0 0}.ccard .can b{color:var(--up)}
.ccard.soon .cchip{left:auto;right:.8rem;bottom:auto;top:.55rem}
.lvrow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.article a.fbtn{color:var(--paper);text-decoration:none}.article a.fbtn.alt{color:var(--btn-fg)}
[data-theme=dark] .article a.fbtn.alt{color:var(--ink)}

/*play*/
.pb,.pw,.pp,.pf,.ph,.pt{transform-box:fill-box;transform-origin:center}
.pb{animation:plb 2.6s ease-in-out infinite}.pw{animation:plw 3s ease-in-out infinite}.pp{animation:plp 2.2s ease-in-out infinite}.ph{animation:plh 2.4s ease-in-out infinite}.pt{animation:plt 4s ease-in-out infinite}
@keyframes plb{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes plw{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes plp{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes plh{0%{transform:translateX(0);opacity:1}80%{transform:translateX(34px);opacity:.2}100%{transform:translateX(34px);opacity:0}}
@keyframes plt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@media(hover:hover){.ccard:hover .pb,.ccard:hover .pw,.ccard:hover .pp,.ccard:hover .ph{animation-duration:.9s}.ccard:hover .pt{animation-duration:1.8s}}
.dgm.pl svg{max-width:540px;margin:0 auto}
.dgm.pl .hs{cursor:pointer;outline:none}
.dgm.pl .hs:hover .wd,.dgm.pl .hs.on .wd,.dgm.pl .hs:focus-visible .wd{stroke:var(--up);stroke-width:3.6}
.dgm.pl .ptip{min-height:3.2em;margin-top:.4rem}
@media(prefers-reduced-motion:reduce){.pb,.pw,.pp,.ph,.pt{animation:none}}
.cthumb.dgm{aspect-ratio:320/258}

/*mnav*/
.mnav.mpath{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;margin:2.2rem 0 1rem;justify-content:stretch;align-items:stretch}
.article .mnav a.mn{display:flex;flex-direction:column;justify-content:center;gap:.15rem;padding:.7rem 1rem;border:2px solid var(--btn);border-radius:12px;background:var(--btn);color:var(--btn-fg);text-decoration:none;font-weight:700;line-height:1.25;min-height:3.6rem;transition:transform .15s,box-shadow .15s}
.article .mnav a.mn-all{background:var(--paper);color:var(--ink);border-color:var(--ink);align-items:center;text-align:center}
.article .mnav a.mn-next{background:var(--up);color:var(--paper);border-color:var(--up);text-align:right;align-items:flex-end}
.mn-k{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;opacity:.85;font-weight:700}
.mn-t{font-size:1rem}
.mn-prev .mn-t::before{content:"\2190\00a0"}.mn-next .mn-t::after{content:"\00a0\2192"}
@media(hover:hover){.article .mnav a.mn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 color-mix(in srgb,var(--up) 45%,transparent)}}
[data-theme=dark] .article .mnav a.mn-prev{background:var(--paper);color:var(--ink);border-color:var(--up)}
@media(max-width:640px){.mnav.mpath{grid-template-columns:1fr}.mnav .mn-next{order:1}.mnav .mn-prev{order:2}.mnav .mn-all{order:3}.mnav .mn-ph{display:none}.article .mnav a.mn-next,.article .mnav a.mn-all{text-align:left;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.article .mnav a.mn{transition:none}}
.article a.mlink{font-family:Caveat,"Segoe Print",cursive;font-weight:700;font-size:1.3em;line-height:1.1;color:var(--up);text-decoration:none;padding:0 .25em;border-radius:4px;background:linear-gradient(transparent 55%,color-mix(in srgb,var(--gold) 45%,transparent) 55%);border-bottom:2px solid color-mix(in srgb,var(--up) 70%,transparent);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.article a.mlink:hover{background:color-mix(in srgb,var(--up) 16%,transparent)}
