/* Explore: topic picker -> hub -> category pages */
.ex{padding:48px 0 70px;--gr1:#8EDDAA;--gr2:#62C58F;--grink:#0D3B26}
.ex-head{text-align:center;margin:0 auto 34px}
.ex-head h1{font-size:clamp(1.9rem,4.6vw,3.6rem);margin:0 0 12px}@media(min-width:640px){.ex-head h1{white-space:nowrap}}
.ex-sub{margin:0 auto;max-width:52ch;font-size:.95rem;line-height:1.5;color:var(--muted)}
.ex-topics{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.ex-topics{grid-template-columns:repeat(4,1fr)}}
.ex-t{position:relative;border:1.5px solid var(--line);border-radius:var(--r-md);padding:20px 20px 22px;min-height:132px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;overflow:hidden;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.ex-t::before{content:"";position:absolute;inset:0;background:var(--g);opacity:.0;transition:opacity .3s}
.ex-t>*{position:relative}.ex-t:hover{transform:translateY(-2px);border-color:var(--gr2)}
.ex-t .ic{font-size:1.4rem;line-height:1}
.ex-t b{font:1.55rem/1.1 var(--serif);margin-top:4px}.ex-t span.d{font-size:.88rem;line-height:1.4;color:var(--soft)}
.ex-t[aria-pressed=true]{border-color:var(--gr2)}.ex-t[aria-pressed=true]::before{opacity:.55}
:root[data-theme=dark] .ex-t[aria-pressed=true]::before,body.cinema .ex-t[aria-pressed=true]::before{opacity:.18}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ex-t[aria-pressed=true]::before{opacity:.18}}
.ex-free{display:flex;justify-content:center;margin:22px 0 8px}
.ex-free button{border:1px dashed var(--line);background:none;color:var(--soft);border-radius:var(--r-md);padding:16px 30px;font:500 1rem var(--sans);cursor:pointer;transition:.3s}
.ex-free button:hover{border-color:var(--gr2);color:var(--ink)}
.ex-go{display:flex;justify-content:center;margin-top:18px}
.ex-go button{min-width:240px;border:0;border-radius:999px;padding:15px 38px;font:600 1.05rem var(--sans);cursor:pointer;background:linear-gradient(135deg,var(--gr1),var(--gr2));color:var(--grink);box-shadow:0 8px 24px -10px var(--gr2);transition:transform .25s var(--ease),filter .3s}
.ex-go button:hover:not(:disabled){transform:translateY(-2px);filter:saturate(1.1)}
.ex-go button:disabled{background:#C9D3CC;color:#6E7A72;box-shadow:none;cursor:not-allowed}
:root[data-theme=dark] .ex-go button:disabled{background:#2A312D;color:#76827A}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ex-go button:disabled{background:#2A312D;color:#76827A}}
/* sub pages */
.ex-back{display:inline-flex;align-items:center;gap:8px;color:var(--soft);text-decoration:none;font:500 .95rem var(--sans);padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:999px;margin-bottom:26px;transition:.3s}
.ex-back:hover{color:var(--ink);border-color:var(--gr2)}
.ex h1.pg{font-size:clamp(2.2rem,5vw,3.6rem);margin:0 0 10px}
.ex-picked{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 6px}
.ex-picked .chip{border-radius:999px;padding:5px 14px;font:500 .85rem var(--sans);background:linear-gradient(135deg,var(--gr1),var(--gr2));color:var(--grink)}
.ex-picked a{font-size:.9rem;margin-left:6px}
.ex-note{color:var(--muted);font-size:.9rem;margin:0 0 26px;max-width:60ch}
.ex-hub{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px}
.ex-c{flex:0 1 calc(25% - 12px);min-width:230px;display:flex;flex-direction:column;gap:6px;min-height:170px;padding:24px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;position:relative;overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.ex-c::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--g);opacity:.28}
.ex-c:hover{transform:translateY(-3px);border-color:var(--gr2)}
.ex-c .ic{font-size:1.5rem}.ex-c b{font:1.9rem/1.1 var(--serif)}.ex-c .d{color:var(--soft);font-size:.92rem;line-height:1.4}
.ex-c .n{margin-top:auto;padding-top:10px;font-size:.82rem;color:var(--muted)}.ex-c .n em{font-style:normal;color:#2E8A5B;font-weight:600}
.ex-prog{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--soft);font-size:.9rem}
.ex .progress{display:flex;align-items:center;gap:14px}
.ex-sec{font:1.7rem var(--serif);margin:38px 0 6px}
.ex-sec-s{color:var(--soft);margin:0 0 18px;max-width:60ch}
.ex .foryou{display:inline-block;font:600 .68rem var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,var(--gr1),var(--gr2));color:var(--grink);margin-left:8px;vertical-align:middle}
.ex .item .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.ex .acts{display:flex;gap:8px;flex-wrap:wrap}
.ex .links{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.9rem}
.ex-more{margin-top:16px}.ex-more button{border:1px solid var(--line);background:none;color:var(--ink);border-radius:999px;padding:10px 22px;font:500 .95rem var(--sans);cursor:pointer}.ex-more button:hover{border-color:var(--gr2)}

@media(max-width:560px){.ex-c{flex-basis:100%}}

/* Mark as read: pastel green state + short, quiet animation */
.ex .done{position:relative;display:inline-flex;align-items:center;gap:6px;transition:background .3s,color .3s,border-color .3s}
.ex .done[aria-pressed=true]{background:linear-gradient(135deg,var(--gr1),var(--gr2));border-color:transparent;color:var(--grink);font-weight:600}
.ex .done .ck{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ex .done .ck path{stroke-dasharray:1;stroke-dashoffset:0}
.ex .done.pop{animation:exPop .45s var(--ease)}
.ex .done.pop .ck path{animation:exDraw .4s .08s ease-out both}
.ex .done.pop::after{content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid var(--gr2);opacity:0;animation:exRing .6s ease-out}
.ex .item.glow{animation:exGlow .9s ease-out}
.ex .item.is-done{opacity:1}
@keyframes exPop{0%{transform:scale(.92)}55%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes exDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes exRing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.45,1.9)}}
@keyframes exGlow{0%{box-shadow:0 0 0 0 rgba(98,197,143,.55)}100%{box-shadow:0 0 0 14px rgba(98,197,143,0)}}

/* Explore entrance: soft staggered reveal, colour wash on topic cards, bouncing icons */
@keyframes exUp{from{opacity:0;transform:translateY(16px)}}
@keyframes exPop{from{opacity:0;transform:translateY(18px) scale(.94);filter:blur(4px)}}
@keyframes exFlash{0%{opacity:0}40%{opacity:.5}}
@keyframes exIc{0%{transform:scale(.3) rotate(-24deg);opacity:0}60%{transform:scale(1.18) rotate(8deg);opacity:1}100%{transform:none}}
@keyframes exBar{to{width:84px}}
.ex-head h1{animation:exUp .7s var(--ease) both}
.ex-head h1::after{content:"";display:block;height:3px;width:0;margin:14px auto 0;border-radius:3px;background:linear-gradient(90deg,var(--or),var(--gr2));animation:exBar .9s .45s var(--ease) forwards}
.ex-sub{animation:exUp .7s .12s var(--ease) both}
.ex-t,.ex-c{animation:exPop .6s var(--ease) backwards}
.ex-t::before{animation:exFlash 1.1s ease-out backwards;animation-delay:inherit}
.ex-t .ic,.ex-c .ic{display:inline-block;animation:exIc .7s var(--ease) backwards;animation-delay:inherit}
.ex-free,.ex-go{animation:exUp .6s .9s var(--ease) backwards}
.pg,.ex-back,.ex-picked,.ex-note{animation:exUp .55s var(--ease) both}
.ex-t:nth-child(1),.ex-c:nth-child(1){animation-delay:0.26s}
.ex-t:nth-child(2),.ex-c:nth-child(2){animation-delay:0.32s}
.ex-t:nth-child(3),.ex-c:nth-child(3){animation-delay:0.38s}
.ex-t:nth-child(4),.ex-c:nth-child(4){animation-delay:0.44s}
.ex-t:nth-child(5),.ex-c:nth-child(5){animation-delay:0.50s}
.ex-t:nth-child(6),.ex-c:nth-child(6){animation-delay:0.56s}
.ex-t:nth-child(7),.ex-c:nth-child(7){animation-delay:0.62s}
.ex-t:nth-child(8),.ex-c:nth-child(8){animation-delay:0.68s}
.ex-t:nth-child(9),.ex-c:nth-child(9){animation-delay:0.74s}
.ex-t:nth-child(10),.ex-c:nth-child(10){animation-delay:0.80s}
.ex-t:nth-child(11),.ex-c:nth-child(11){animation-delay:0.86s}
.ex-t:nth-child(12),.ex-c:nth-child(12){animation-delay:0.92s}
.ex-t:nth-child(13),.ex-c:nth-child(13){animation-delay:0.98s}
.ex-t:nth-child(14),.ex-c:nth-child(14){animation-delay:1.04s}
.ex-t:nth-child(15),.ex-c:nth-child(15){animation-delay:1.10s}
.ex-t:nth-child(16),.ex-c:nth-child(16){animation-delay:1.16s}
@media(prefers-reduced-motion:reduce){.ex-head h1,.ex-sub,.ex-t,.ex-c,.ex-t::before,.ex-t .ic,.ex-c .ic,.ex-free,.ex-go,.pg,.ex-back,.ex-picked,.ex-note{animation:none}.ex-head h1::after{animation:none;width:84px}}

/* Colour-coded material cards (not quotes) */
.ex .item.tinted{--tk:30%;--tx:color-mix(in srgb,var(--c) 45%,#14110d);position:relative;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--c) calc(var(--tk) + 8%),var(--card)),color-mix(in srgb,var(--c) var(--tk),var(--card)) 55%,var(--card));border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 10px 30px -18px var(--c);transition:transform .3s var(--ease,ease),box-shadow .3s,border-color .3s}
.ex .item.tinted::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.ex .item.tinted::after{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,transparent),transparent 70%);pointer-events:none}
.ex .item.tinted:hover{transform:translateY(-3px);box-shadow:0 18px 38px -20px var(--c);border-color:var(--c)}
.ex .item.tinted h3{color:var(--ink)}
.ex .item.tinted .sub{color:var(--tx)}
.ex .item.tinted .tag{color:var(--tx)}
.ex .item.tinted .links a{color:var(--tx);font-weight:500}
.ex .item.tinted .savebtn,.ex .item.tinted .done:not(.on){border-color:color-mix(in srgb,var(--c) 60%,transparent)}
:root[data-theme=dark] .ex .item.tinted{--tk:13%;--tx:var(--c)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ex .item.tinted{--tk:13%;--tx:var(--c)}}

/* Card UX polish */
.ex .item{padding:24px 26px 22px;display:flex;flex-direction:column}
.ex .item .top{align-items:center;margin-bottom:6px}
.ex .item .tag{display:flex;flex-wrap:wrap;gap:6px;align-items:center;letter-spacing:0;text-transform:none}
.ex .item .tg{display:inline-flex;align-items:center;gap:6px;font:500 .74rem var(--sans);letter-spacing:.02em;padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--soft)}
.ex .item .tg::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--or))}
.ex .item.tinted .tg{background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--tx)}
.ex .item h3{font:600 1.85rem/1.15 var(--serif);margin:14px 0 6px;letter-spacing:-.005em}
.ex .item .sub{font:500 1rem/1.45 var(--sans);letter-spacing:0;text-transform:none;margin:0 0 6px}
.ex .item p{line-height:1.65;max-width:64ch}
.ex .item .acts .done,.ex .item .acts .savebtn{min-height:38px;padding:8px 16px;font-size:.85rem}
.ex .item .links{margin-top:auto;padding-top:18px;gap:10px}
.ex .item p+.links,.ex .item .sub+.links{margin-top:14px}
.ex .item .lk{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;font:600 .95rem var(--sans);text-decoration:none;border:1.5px solid color-mix(in srgb,var(--c,var(--or)) 70%,transparent);color:var(--tx,var(--or-text));background:color-mix(in srgb,var(--c,var(--or)) 10%,transparent);transition:transform .2s,background .2s,box-shadow .2s}
.ex .item .lk:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--c,var(--or)) 24%,transparent);box-shadow:0 8px 18px -10px var(--c,var(--or))}
.ex .item .lk:focus-visible{outline:3px solid var(--c,var(--or));outline-offset:2px}
.ex .item .lk-main{background:var(--c,var(--or));border-color:var(--c,var(--or));color:#14110d}
.ex .item .lk-main:hover{background:var(--c,var(--or));filter:brightness(1.08)}
@media(max-width:560px){.ex .item{padding:20px 18px}.ex .item .links{flex-direction:column}.ex .item .lk{justify-content:center;width:100%}.ex .item h3{font-size:1.6rem}}

/* Compact minimal cards */
.ex .item{padding:16px 18px 16px;gap:0}
.ex .item h3{font-size:1.45rem;margin:10px 0 2px}
.ex .item .sub{font-size:.9rem;margin:0 0 4px}
.ex .item.tinted p:not(.sub){font-size:.9rem;line-height:1.5;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex .item .tg{font-size:.7rem;padding:3px 9px}
.ex .item .acts .done,.ex .item .acts .savebtn{min-height:32px;padding:5px 12px;font-size:.8rem}
.ex .item .links{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;margin-top:auto;padding-top:14px}
.ex .item .links:has(.lk:only-child){grid-template-columns:1fr}
.ex .item .lk{min-height:40px;padding:8px 16px;font-size:.9rem;justify-content:center;text-align:center}
.ex .item .links .lk:not(.lk-main){background:transparent}
.ex .item.tinted .links a.lk-main{background:var(--c);border-color:var(--c);color:#14110d;font-weight:700}
.ex .item.tinted .links a.lk-main:hover{background:var(--c);filter:brightness(1.08)}
.ex .item.tinted .links a.lk:not(.lk-main){color:var(--tx)}
@media(max-width:560px){.ex .item .links{grid-template-columns:1fr}.ex .item h3{font-size:1.35rem}}

/* Footer: [page | wiki] over [done | save] */
.ex .item .foot{display:grid;grid-template-columns:1.5fr 1fr;gap:8px 10px;margin-top:auto;padding-top:14px}
.ex .item .foot .links,.ex .item .foot .acts{display:contents}
.ex .item .foot .lk{grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:24px;padding:8px 10px;font-size:.85rem;margin:0}
.ex .item .foot .lk-main{grid-column:1}.ex .item .foot .lk:not(.lk-main){grid-column:2}
.ex .item .foot:not(:has(.lk-main)) .lk{grid-column:1/-1}
.ex .item .foot .done{grid-row:2;grid-column:1;justify-content:center;width:100%;min-height:34px}
.ex .item .foot .savebtn{grid-row:2;grid-column:2;width:100%;min-height:34px;justify-content:center}
.ex .item .foot:not(:has(.done)) .savebtn{grid-column:1/-1}
.ex .item .foot:not(:has(.lk)) .done{grid-row:1}.ex .item .foot:not(:has(.lk)) .savebtn{grid-row:1}
.ex .item .savebtn{cursor:pointer;border:1px solid var(--line);border-radius:999px;background:none;color:var(--soft);font:500 .8rem var(--sans);transition:background .25s,color .25s,border-color .25s}
.ex .item .savebtn.is-saved{color:var(--tx,var(--ink));border-color:var(--c,var(--or));background:color-mix(in srgb,var(--c,var(--or)) 18%,transparent)}
.ex .item .savebtn.bump{animation:svBump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes svBump{0%{transform:scale(1)}30%{transform:scale(1.14) rotate(-3deg);box-shadow:0 0 0 0 var(--c,var(--or))}60%{transform:scale(.97);box-shadow:0 0 0 10px transparent}100%{transform:scale(1)}}
/* Done colour follows the card */
.ex .item.tinted{--gr1:color-mix(in srgb,var(--c) 55%,#fff);--gr2:var(--c);--grink:#14110d}
.ex .item.tinted.glow{animation:exGlowC .9s ease-out}
@keyframes exGlowC{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media(max-width:560px){.ex .item .foot{grid-template-columns:1fr 1fr}.ex .item .foot .lk{font-size:.8rem;padding:8px 6px}}

/* Tags: one compact line */
.ex .item .top{flex-wrap:nowrap;min-width:0}
.ex .item .tag{flex-wrap:nowrap;gap:4px;min-width:0;overflow:hidden;white-space:nowrap}
.ex .item .tg{font-size:.62rem;padding:2px 7px;gap:4px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ex .item .tg::before{width:5px;height:5px;flex:none}
.ex .item .foryou{font-size:.56rem;padding:2px 7px;margin-left:2px;flex:none}
@media(max-width:560px){.ex .item .tg{font-size:.58rem;padding:2px 6px}}

/* Practices: single full-width page button */
.ex .item .foot:not(:has(.lk:not(.lk-main))) .lk-main{grid-column:1/-1}
.ex .item .foot:not(:has(.lk:not(.lk-main))) .done{grid-column:1}.ex .item .foot:not(:has(.lk:not(.lk-main))) .savebtn{grid-column:2}