:root{
--paper:#F6F7FF;--card:#FFFFFF;--ink:#12142B;--muted:#464B72;--line:#12142B;--line-soft:#C6CAEC;--tint:#E9ECFF;
--hero-bg:#2D3BFF;--hero-ink:#FFFFFF;--btn-bg:#2D3BFF;--btn-ink:#FFFFFF;--link:#2230E0;
--lemon:#FFE34D;--lemon-ink:#12142B;--ok:#0B7F63;--ok-ink:#FFFFFF;--bad:#C92A52;--bad-ink:#FFFFFF;--focus:#C92A52;
--g-food:#FF7A45;--g-nature:#18B58D;--g-bugs:#9BC53D;--g-plants:#4CC26B;--g-home:#F5B800;--g-work:#8A74FF;--g-health:#FF6FA5;--g-tech:#3D95FF;--g-holiday:#FF9F1C;--g-fun:#C45BE8;--g-arts:#E8505B;--g-sports:#19B5D9;--g-travel:#7F93A8;
--display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;--body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0B0E2B;--card:#151947;--ink:#EEF0FF;--muted:#B4B9E6;--line:#5560C8;--line-soft:#2F3687;--tint:#1D2262;
--hero-bg:#1A2270;--btn-bg:#FFE34D;--btn-ink:#12142B;--link:#A3ABFF;--ok:#34D3A6;--ok-ink:#06231B;--bad:#FF7C96;--bad-ink:#2B0610;--focus:#FFE34D;}}
:root[data-theme="dark"]{--paper:#0B0E2B;--card:#151947;--ink:#EEF0FF;--muted:#B4B9E6;--line:#5560C8;--line-soft:#2F3687;--tint:#1D2262;
--hero-bg:#1A2270;--btn-bg:#FFE34D;--btn-ink:#12142B;--link:#A3ABFF;--ok:#34D3A6;--ok-ink:#06231B;--bad:#FF7C96;--bad-ink:#2B0610;--focus:#FFE34D;}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
.hero :focus-visible,.site-footer :focus-visible{outline-color:var(--lemon)}
.wrap{width:min(1120px,100% - 2rem);margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--lemon);color:var(--lemon-ink);padding:10px 16px;border-radius:10px;z-index:100;font-weight:700}
.skip:focus{left:12px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:2px solid var(--line)}
.hdr{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:10px 0}
.brand{display:flex;align-items:center;gap:8px;font:800 1.55rem/1 var(--display);letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.brand .mk{font-size:1.5rem}
.nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto}
.nav a{padding:8px 12px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:hover{background:var(--tint)}
.hdr-actions{display:flex;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 .95rem var(--body);cursor:pointer}
.pill:hover{background:var(--tint)}
.pill svg{width:18px;height:18px}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--bad);color:var(--bad-ink);font-size:.8rem}
@media (max-width:760px){.nav{order:3;width:100%;margin-left:0}.hdr-actions{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:2px solid var(--line);background:var(--btn-bg);color:var(--btn-ink);font:700 1rem var(--body);cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--tint)}
.btn.sm{min-height:40px;padding:0 16px;font-size:.92rem}

/* hero */
.hero{background:var(--hero-bg);color:#fff;padding:clamp(36px,6vw,80px) 0 clamp(56px,8vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font:800 clamp(2.6rem,6.4vw,4.8rem)/1 var(--display);letter-spacing:-.045em;margin:0 0 .45em;max-width:12ch}
.lead-h{font-size:1.2rem;max-width:46ch;margin:0 0 1.5rem;color:rgba(255,255,255,.9)}
.search{display:flex;align-items:center;gap:10px;background:#fff;color:#12142B;border:2px solid #12142B;border-radius:14px;padding:0 14px;min-height:58px}
.search svg{width:22px;height:22px;flex:none;color:#464B72}
.search input{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:500 1.1rem var(--body);min-height:54px;outline:none}
.search input::placeholder{color:#6A6F98}
.search:focus-within{outline:3px solid var(--lemon);outline-offset:2px}
.search.page{background:var(--card);color:var(--ink);border-color:var(--line)}
.search.page:focus-within{outline-color:var(--focus)}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.quick span{font-weight:600;margin-right:2px}
.chip-lt{border:1.5px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:999px;padding:6px 14px;font:600 .93rem var(--body);cursor:pointer}
.chip-lt:hover{background:rgba(255,255,255,.18)}
.hero-note{margin:22px 0 0;font-size:.98rem;color:rgba(255,255,255,.85)}

/* spotlight */
.spot{background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,28px);box-shadow:9px 9px 0 var(--lemon);display:flex;flex-direction:column;gap:14px}
@media (min-width:901px){.spot{transform:rotate(-1.2deg)}}
.spot-label{align-self:flex-start;background:var(--lemon);color:var(--lemon-ink);border-radius:999px;padding:4px 14px;font-weight:700;font-size:.92rem}
.spot .setup{font-size:1.25rem}
.spot .punch{font-size:1.75rem}
.spot-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.spot-meta a{font-weight:600}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}to{transform:rotateX(0);opacity:1}}
.punch.flip{animation:flip .45s ease-out;transform-origin:50% 0}

/* pun text */
.setup{margin:0;font-size:1.06rem}
.punch{margin:0;font:700 1.22rem/1.85 var(--display);letter-spacing:-.01em}
mark{background:var(--lemon);color:var(--lemon-ink);padding:.12em .45em;border-radius:7px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.line{margin:0;font:700 1.18rem/1.45 var(--display);letter-spacing:-.01em}

/* sections */
.section{padding:clamp(48px,7vw,88px) 0}
.section.alt{background:var(--tint)}
.section h2{font:800 clamp(1.9rem,4.2vw,2.9rem)/1.06 var(--display);letter-spacing:-.04em;margin:0 0 .5rem}
.lead{max-width:62ch;color:var(--muted);margin:0 0 1.8rem}

/* filters */
.filters{display:grid;gap:14px;margin-bottom:20px}
.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip-row .lbl{font-weight:700;margin-right:6px;min-width:5.5rem}
.chip{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;min-height:38px;font:600 .93rem var(--body);cursor:pointer}
.chip:hover{background:var(--tint)}
.chip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink)}
.statusbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:4px 0 22px;color:var(--muted);font-weight:600}
.idx{margin:0 0 44px;border:2px solid var(--line);border-radius:16px;background:var(--card)}
.idx summary{cursor:pointer;font-weight:700;padding:14px 18px;list-style:none;display:flex;justify-content:space-between}
.idx summary::-webkit-details-marker{display:none}
.idx summary::after{content:'+';font-size:1.4rem;line-height:1}
.idx[open] summary::after{content:'–'}
.idx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:22px 28px;padding:6px 18px 20px}
.idx-group h4{font:800 1.05rem var(--display);letter-spacing:-.02em;margin:0 0 8px}
.idx-group ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.idx-group a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;background:var(--card);border:1.5px solid var(--line-soft);border-left:6px solid var(--tc);color:var(--ink);text-decoration:none;font-weight:600;font-size:.93rem}
.idx-group a:hover{background:var(--tint)}
.idx-group small{color:var(--muted);font-weight:600}
.index-title{font-weight:700;margin:0 0 10px}
.empty{border:2px dashed var(--line);border-radius:18px;padding:32px;text-align:center}
.empty p{margin:0 0 14px}

/* topics */
.g-food{--tc:var(--g-food)}.g-nature{--tc:var(--g-nature)}.g-bugs{--tc:var(--g-bugs)}.g-plants{--tc:var(--g-plants)}.g-home{--tc:var(--g-home)}.g-work{--tc:var(--g-work)}.g-health{--tc:var(--g-health)}.g-tech{--tc:var(--g-tech)}.g-holiday{--tc:var(--g-holiday)}.g-fun{--tc:var(--g-fun)}.g-arts{--tc:var(--g-arts)}.g-sports{--tc:var(--g-sports)}.g-travel{--tc:var(--g-travel)}
.topic{margin:0 0 60px;content-visibility:auto;contain-intrinsic-size:auto 560px}
.topic-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
.tile{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--tc);border:2px solid var(--line);font-size:1.8rem}
.topic h3{font:800 clamp(1.6rem,3vw,2rem)/1.1 var(--display);letter-spacing:-.035em;margin:2px 0 6px}
.intro{margin:0;color:var(--muted);max-width:64ch}
.words-label{font-weight:700;font-size:.92rem;margin:16px 0 8px}
.words{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 18px}
.words li{background:var(--tint);border-radius:999px;padding:3px 12px;font-size:.9rem}
.pun-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.pun{background:var(--card);border:2px solid var(--line);border-top:9px solid var(--tc);border-radius:14px;padding:16px 16px 12px;display:flex;flex-direction:column;gap:10px}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.btn-s{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line-soft);background:transparent;color:var(--ink);font:600 .86rem var(--body);cursor:pointer}
.btn-s svg{width:16px;height:16px}
.btn-s:hover{background:var(--tint)}
.btn-s[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:var(--bad-ink)}
.btn-s[aria-pressed="true"] svg{fill:currentColor}
.more{margin:14px 0 0;font-size:.95rem}

/* quiz */
.quiz{background:var(--card);border:3px solid var(--line);border-radius:24px;padding:clamp(20px,4vw,40px);max-width:820px}
.quiz-top{display:flex;justify-content:space-between;gap:12px;font-weight:700;margin-bottom:10px}
.bar{height:12px;border-radius:99px;background:var(--tint);border:2px solid var(--line);overflow:hidden;margin-bottom:24px}
.bar i{display:block;height:100%;background:var(--lemon);width:0;transition:width .3s}
.q-text{font:700 clamp(1.35rem,3vw,1.95rem)/1.25 var(--display);letter-spacing:-.02em;margin:0 0 18px;outline:none}
.opts{display:grid;gap:10px}
.opt{text-align:left;min-height:54px;padding:12px 16px;border-radius:14px;border:2px solid var(--line);background:var(--paper);color:var(--ink);font:600 1.05rem var(--body);cursor:pointer}
.opt:hover:not(:disabled){background:var(--lemon);color:var(--lemon-ink)}
.opt:disabled{cursor:default}
.opt.right{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.opt.wrong{background:var(--bad);border-color:var(--bad);color:var(--bad-ink)}
.fb{min-height:1.7em;margin:16px 0 0;font-weight:700}
.quiz-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.big-score{font:800 clamp(2.4rem,7vw,4rem)/1 var(--display);letter-spacing:-.04em;margin:0 0 8px}

/* workshop */
.ws-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.ws-grid{grid-template-columns:1fr}}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 24px;display:grid;gap:18px}
.steps li{display:grid;grid-template-columns:42px 1fr;gap:14px;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--lemon);color:var(--lemon-ink);border:2px solid var(--line);font:800 1.15rem var(--display)}
.steps strong{display:block}
.steps span{color:var(--muted)}
.example{border-left:6px solid var(--lemon);background:var(--card);border-radius:0 14px 14px 0;padding:14px 18px}
.example p{margin:0}
.tool{background:var(--card);border:3px solid var(--line);border-radius:22px;padding:clamp(18px,3vw,28px);display:grid;gap:16px}
.tool label{font-weight:700;display:block;margin-bottom:6px}
.tool select,.tool textarea{width:100%;font:500 1rem var(--body);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:10px 12px}
.tool textarea{min-height:140px;resize:vertical;line-height:1.5}
.tool .hint{margin:0 0 8px;color:var(--muted);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.row{display:flex;flex-wrap:wrap;gap:10px}

/* faq */
.faq{max-width:820px}
.faq details{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:0 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{margin:0 0 16px;color:var(--muted);max-width:66ch}

/* footer */
.site-footer{background:var(--hero-bg);color:#fff;padding:40px 0}
.site-footer a{color:#fff}
.site-footer p{margin:0 0 8px;max-width:60ch}
.foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-end}

/* dialog + toast */
dialog{border:3px solid var(--line);border-radius:22px;padding:0;background:var(--card);color:var(--ink);width:min(580px,calc(100% - 24px))}
dialog::backdrop{background:rgba(8,10,40,.65)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:2px solid var(--line)}
.dlg-head h2{font:800 1.5rem var(--display);letter-spacing:-.03em;margin:0}
.dlg-body{padding:6px 20px;overflow:auto;max-height:58vh}
.saved-item{padding:14px 0;border-bottom:1px solid var(--line-soft)}
.saved-item:last-child{border-bottom:0}
.saved-item p{margin:0 0 10px;white-space:pre-line}
.dlg-foot{padding:14px 20px;border-top:2px solid var(--line);display:flex;flex-wrap:wrap;gap:10px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--lemon);color:var(--lemon-ink);border:2px solid #12142B;padding:10px 18px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- inner pages ---------- */
.crumbs{margin:0 0 16px;font-size:.95rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;padding:0;margin:0;color:var(--muted)}
.crumbs li+li::before{content:'/';margin-right:8px}
.page-head{background:var(--tint);border-bottom:2px solid var(--line);padding:clamp(24px,4vw,48px) 0 clamp(28px,4vw,48px)}
.page-head h1{font:800 clamp(2.1rem,5.5vw,3.6rem)/1.04 var(--display);letter-spacing:-.045em;margin:0 0 .3em}
.page-head .topic-head{align-items:center;margin-bottom:0}
.page-head .count{margin:.7rem 0 0;color:var(--muted);font-weight:600}
.subsearch{margin:20px 0 0;max-width:520px}
.subsearch button{display:none}
.pun-big{background:var(--card);border:3px solid var(--line);border-radius:22px;padding:clamp(20px,4vw,38px);box-shadow:9px 9px 0 var(--tc);display:flex;flex-direction:column;gap:16px}
.pun-big .kicker{margin:0;font-weight:700}
.pun-big h1{font:800 clamp(1.7rem,4.6vw,2.9rem)/1.1 var(--display);letter-spacing:-.04em;margin:0}
.pun-big .punch{font-size:clamp(1.5rem,4vw,2.4rem)}
.pun-big .acts{padding-top:4px}
.pun .setup a,.pun .line a{color:inherit;text-decoration:none}
.pun .setup a:hover,.pun .line a:hover,.pun .setup a:focus-visible,.pun .line a:focus-visible{text-decoration:underline}
.pun .topic-tag{margin:0;font-size:.86rem;font-weight:700}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px)}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.section h2.sm{font:800 clamp(1.4rem,3vw,1.9rem)/1.15 var(--display);letter-spacing:-.03em;margin:0 0 .6rem}
.section p.plain{max-width:60ch;margin:0 0 1rem}
.tagline{display:inline-block;padding:8px 14px;border-radius:12px;background:var(--tint);font-weight:600;word-break:break-word}
.rel-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.rel-list a{display:block;padding:12px 14px;border:2px solid var(--line);border-left:8px solid var(--tc);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600}
.rel-list a:hover{background:var(--tint)}
.rel-list small{display:block;margin-top:2px;color:var(--muted);font-weight:500}
.pn{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:36px}
.pn a{flex:1 1 260px;display:block;padding:14px 16px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600}
.pn a:hover{background:var(--tint)}
.pn small{display:block;color:var(--muted);font-weight:700;margin-bottom:2px}
.pn .next{text-align:right}

/* ---------- topic directory ---------- */
.dir-group{margin:0 0 34px}
.dir-group h3{font:800 1.4rem/1.1 var(--display);letter-spacing:-.03em;margin:0 0 12px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px;list-style:none;padding:0;margin:0}
.tcard{display:flex;gap:12px;align-items:center;padding:10px 12px;border:2px solid var(--line);border-left:8px solid var(--tc);border-radius:14px;background:var(--card);color:var(--ink);text-decoration:none}
.tcard:hover{background:var(--tint)}
.tcard .tile{width:44px;height:44px;font-size:1.4rem;border-radius:12px;border-width:0;background:var(--tint)}
.tcard strong{display:block;line-height:1.2}
.tcard small{display:block;color:var(--muted)}
.results{margin:0 0 44px}
.results h3{font:800 1.4rem/1.1 var(--display);letter-spacing:-.03em;margin:0 0 14px}
.results .btn{margin-top:16px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 0;padding:0;list-style:none}
.foot-links a{font-size:.95rem}
.err-wrap{padding:clamp(48px,10vw,120px) 0;text-align:left}

/* ---------- likes, counts, badges ---------- */
.btn-s.like .n{margin-left:2px;font-weight:800}
.btn-s .n:empty{display:none}
.btn-s.like[aria-pressed="true"]{background:var(--bad);border-color:var(--bad);color:var(--bad-ink)}
.btn-s[data-act="save"][aria-pressed="true"]{background:var(--lemon);border-color:var(--lemon);color:var(--lemon-ink)}
.stats{flex-basis:100%;margin:2px 0 0;font-size:.84rem;color:var(--muted);font-weight:600}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.badge{background:var(--lemon);color:var(--lemon-ink);border:2px solid var(--line);border-radius:999px;padding:1px 10px;font-size:.78rem;font-weight:800}

/* ---------- hub pages ---------- */
.toolbar{display:grid;gap:14px;margin:0 0 26px}
.toolbar .row2{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.toolbar label.sl{font-weight:700;margin-right:8px}
.toolbar select{font:600 1rem var(--body);color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:12px;padding:9px 12px}
.toolbar .grow{flex:1 1 280px}
.modeNote{margin:0;padding:10px 14px;border:2px dashed var(--line);border-radius:12px;background:var(--card);color:var(--muted);font-weight:600}
.hubstatus{margin:0;color:var(--muted);font-weight:600}
.sub{margin:0 0 48px}
.sub h2{display:flex;gap:12px;align-items:center;font:800 clamp(1.5rem,3vw,2rem)/1.1 var(--display);letter-spacing:-.035em;margin:0 0 6px}
.sub h2 .tile{width:48px;height:48px;font-size:1.5rem;border-radius:14px;flex:none}
.sub .words-label{margin-top:10px}
.hubnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}

/* ---------- popular tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tab{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 18px;min-height:42px;font:700 .98rem var(--body);cursor:pointer}
.tab:hover{background:var(--tint)}
.tab[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-ink)}
.empty-note{margin:0 0 6px;padding:18px;border:2px dashed var(--line);border-radius:14px;background:var(--card);font-weight:600}

/* ---------- narrow pages and directory ---------- */
a.chip-lt{display:inline-block;text-decoration:none}
.dir-sub{margin:-4px 0 12px;font-size:.95rem}
.page-head .words-label{margin-top:0}

/* community puns */
.community .cform{display:grid;gap:12px;max-width:640px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px;margin:14px 0 20px}
.cf-row{display:grid;gap:4px}
.cf-row label,.cs-label{font-weight:700;font-size:.92rem}
.cf-row .opt{font-weight:500;opacity:.7}
.cf-row input{font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:10px;background:var(--bg,var(--card));color:inherit;width:100%;box-sizing:border-box}
.cf-row input:focus-visible{outline:3px solid var(--tc,#2D3BFF);outline-offset:1px}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cf-msg{margin:0;color:#b00020;font-weight:600}
[data-theme="dark"] .cf-msg{color:#ff8a9b}
.cf-note{margin:0;font-size:.85rem;opacity:.75}
.cs-label select{font:inherit;margin-left:6px;padding:6px 8px;border-radius:8px;border:2px solid var(--line);background:var(--card);color:inherit}
.byline{margin:0;font-size:.85rem;opacity:.75}
.c-empty{list-style:none;padding:14px 0;opacity:.8}