:root{--teal:#12B886;--teal-dark:#0c8f69;--accent:#f59e0b;--accent-dark:#d97706;--ink:#1b2a2f;--mute:#5d6b70;--line:#e3ebed;--page:#f2f6f5;--bg:#fff;--card:#f6faf9;--shadow:0 1px 2px rgba(20,40,45,.06),0 6px 18px rgba(20,40,45,.06)}
@media (prefers-color-scheme:dark){:root{--ink:#e8f1f2;--mute:#9db0b5;--line:#25383d;--page:#0a1315;--bg:#0f1a1d;--card:#15252a;--shadow:none}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font:16px/1.6 Inter,system-ui,sans-serif;color:var(--ink);background:var(--page)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
a{color:var(--teal-dark)}@media (prefers-color-scheme:dark){a{color:var(--teal)}}
.ic{flex:none;vertical-align:-3px}

/* header */
.top{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none}
.brand-name{color:var(--ink)}.brand-sub{font-weight:600;font-size:.78rem;color:var(--teal-dark);background:rgba(18,184,134,.12);padding:2px 9px;border-radius:999px}
.logo{width:36px;height:36px;border-radius:11px;object-fit:cover}
.main-nav{display:flex;gap:4px;align-items:stretch;align-self:stretch}
.tab{display:inline-flex;align-items:center;gap:7px;padding:0 14px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;border-bottom:3px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--teal-dark)}.tab.on{color:var(--teal-dark);border-bottom-color:var(--teal)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-toggle,.burger{display:none}
.more,.acct{position:relative}
.more>summary,.acct>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem;padding:6px 10px;border-radius:999px}
.more>summary::-webkit-details-marker,.acct>summary::-webkit-details-marker,.faq-item>summary::-webkit-details-marker{display:none}
.more>summary:hover,.acct>summary:hover{background:var(--card)}
.pop{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column;z-index:30}
.pop a,.pop button{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font:inherit;font-size:.92rem;background:none;border:0;cursor:pointer;text-align:left;width:100%}
.pop a:hover,.pop button:hover{background:var(--card)}
.acct-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inline{display:inline}.linkbtn{background:none;border:0;cursor:pointer;padding:0;font:inherit;color:var(--mute);text-decoration:none}.linkbtn:hover{color:var(--teal-dark)}

/* type */
h1{font-size:1.8rem;line-height:1.25;margin:20px 0 8px;overflow-wrap:anywhere}h2{font-size:1.25rem;margin:24px 0 12px}h3{margin:0 0 8px}
.lead,.meta,.crumb,.empty{color:var(--mute)}.meta{font-size:.88rem}

/* hero */
.hero{position:relative;overflow:hidden;margin:24px 0 0;border-radius:22px;color:#fff;background:linear-gradient(135deg,#0b6b57,#12B886 70%);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;min-height:340px}
.hero-copy{padding:48px 20px 64px 44px;align-self:center;position:relative;z-index:1}
.hero h1{font-size:2.5rem;margin:0 0 10px;color:#fff}.hero p{max-width:600px;font-size:1.08rem;margin:0 0 18px;opacity:.96}
.hero-photo{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(to right,transparent,#000 38%);mask-image:linear-gradient(to right,transparent,#000 38%)}

/* topic shortcuts (round, ring-coloured) */
.shortcuts{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px 14px;margin:-26px 18px 28px;position:relative;z-index:2}
.shortcut{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;text-decoration:none;color:var(--ink);font-size:.8rem;font-weight:600;line-height:1.25}
.shortcut:hover .cbadge{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.14)}
.cbadge{--c2:color-mix(in srgb,var(--c) 40%,#fff);display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,var(--bg));border:2px solid var(--c);transition:transform .15s,box-shadow .15s}
.cbadge .illo{display:block}
.cbadge.big{width:64px;height:64px}

/* layout */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;margin-bottom:40px}
.side{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px}
.card{border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:16px;box-shadow:var(--shadow);overflow:hidden}
.promo-img{display:block;width:calc(100% + 32px);max-width:none;margin:-16px -16px 12px;height:130px;object-fit:cover}.card h3{font-size:1rem;display:flex;align-items:center;gap:8px}.card p{margin:0 0 10px;font-size:.92rem;color:var(--mute)}
.promo{background:linear-gradient(180deg,rgba(18,184,134,.08),transparent)}
.join{background:linear-gradient(135deg,rgba(18,184,134,.14),rgba(245,158,11,.1))}
.mini{margin:0 0 6px;padding-left:0;list-style:none}.mini li{padding:8px 0;border-bottom:1px solid var(--line)}.mini li:last-child{border-bottom:0}.mini a{display:block;color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600;overflow-wrap:anywhere}.mini a:hover{color:var(--teal-dark)}.mini small{color:var(--mute)}
.seeall{display:inline-flex;align-items:center;gap:2px;font-size:.88rem;font-weight:600;text-decoration:none;margin-right:10px}
.gname{margin:12px 0 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.catlist{list-style:none;margin:0;padding:0}.catlist a{display:flex;align-items:center;gap:10px;padding:4px 0;text-decoration:none;color:var(--ink);font-size:.92rem}.catlist a:hover{color:var(--teal-dark)}.catlist .cbadge{width:28px;height:28px;border-width:1.5px}

/* topics */
.group{margin:18px 0}.group h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.cat{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--bg);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,border-color .15s}.cat:hover{border-color:var(--teal);transform:translateY(-2px)}
.cat .cbadge{width:54px;height:54px}.cat small{display:block;color:var(--mute);font-size:.84rem;line-height:1.4;margin-top:2px}
.cat-head{display:flex;gap:16px;align-items:center}.cat-head h1{margin:0}
.topics-h{margin-top:36px}

/* discussion list */
.head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px}.head h2{margin:0}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px}.seg a{padding:5px 14px;border-radius:999px;text-decoration:none;color:var(--mute);font-size:.88rem;font-weight:600}.seg a.on{background:var(--teal);color:#fff}
.rows{list-style:none;padding:0;margin:12px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);box-shadow:var(--shadow)}
.row{display:flex;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;transition:background .15s}.row:last-child{border-bottom:0}.row:hover{background:var(--card)}
.row-main{flex:1;min-width:0}.row-title{display:block;font-weight:700;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}.row-title:hover{color:var(--teal-dark)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px 10px;border-radius:999px;background:rgba(18,184,134,.12);color:var(--teal-dark);text-decoration:none;font-size:.8rem;font-weight:600}
.badge{display:flex;flex-direction:column;align-items:center;min-width:58px;padding:4px 8px;border:1px solid var(--line);border-radius:12px;font-size:.7rem;color:var(--mute)}.badge strong{font-size:1.05rem;color:var(--ink)}
.avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:50%;background:hsl(var(--h) 55% 42%);color:#fff;font-weight:700}.avatar.sm{width:30px;height:30px;font-size:.85rem}

/* posts */
.post{padding:22px;border:1px solid var(--line);border-radius:16px;margin:14px 0;background:var(--bg);box-shadow:var(--shadow)}.post h1{margin-top:0}
.post .body{overflow-wrap:anywhere;word-break:break-word}.reply{background:var(--card)}
.byline{display:flex;gap:10px;align-items:center;color:var(--mute);font-size:.88rem;margin:6px 0 12px}
.actions{display:flex;gap:14px;align-items:center;margin-top:10px}

.pager{display:flex;justify-content:space-between;align-items:center;margin:14px 0;color:var(--mute);font-size:.9rem}.pager a{display:inline-flex;align-items:center;gap:4px;font-weight:700;text-decoration:none}.ic-left{transform:rotate(90deg)}
/* FAQ */
.faq-group{margin:26px 0}.faq-group h2{margin:0 0 10px}
.faq-item{background:var(--bg);border:1px solid var(--line);border-radius:14px;margin:8px 0;box-shadow:var(--shadow);overflow:hidden}
.faq-item>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 18px;font-weight:700}
.faq-item>summary .ic{transition:transform .2s;color:var(--mute)}.faq-item[open]>summary .ic{transform:rotate(180deg)}.faq-item[open]{border-color:var(--teal)}
.faq-a{padding:0 18px 4px}.faq-a p{margin:0 0 14px;color:var(--mute)}

/* buttons and forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--teal);color:#fff;border:0;border-radius:11px;padding:10px 18px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.btn:hover{background:var(--teal-dark)}
.btn-small{padding:7px 14px;font-size:.9rem}.btn-block{display:flex;width:100%}
.btn-accent{background:var(--accent);color:#2a1a00}.btn-accent:hover{background:var(--accent-dark);color:#fff}
.btn-ghost{background:transparent;border:1.5px solid rgba(255,255,255,.75);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.16)}
.form{max-width:760px}.form label{display:block;margin:12px 0;font-weight:600}
.form input[type=text],.form input[type=email],.form textarea,.form select,select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;background:var(--bg);color:var(--ink)}
.notice{background:var(--card);border-left:4px solid var(--teal);padding:10px 14px;border-radius:0 10px 10px 0}.error{background:#fdecea;color:#7a1f16;border-left:4px solid #d93025;padding:10px 14px}
.report summary{cursor:pointer;color:var(--mute);font-size:.9rem}
main>h1,main>h2,main>p,main>ul,main>form,main>article,main>div:not(.cols){max-width:820px}

/* footer */
.site-footer{margin-top:56px;background:#0c2f2a;color:#bcd8d1;padding:44px 0 18px}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:30px;align-items:start}
.footer-grid h4{margin:0 0 12px;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:#7fb3a6}
.footer-grid a{display:block;color:#e3f2ee;text-decoration:none;font-size:.92rem;padding:4px 0}.footer-grid a:hover{color:#fff;text-decoration:underline}
.footer-grid .brand{display:inline-flex;align-items:center;gap:10px;padding:0;margin-bottom:8px;color:#fff}.footer-grid .brand:hover{text-decoration:none}.f-brand .brand-name{color:#fff}.f-brand p{max-width:270px;font-size:.88rem;color:#9ec4ba}
.play{display:inline-block!important;padding:0!important;margin:2px 0 10px -10px;line-height:0}.play img{display:block;width:170px;height:auto}.play:hover{opacity:.92;text-decoration:none!important}.play span{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:.95rem}.play small{font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:#bbb}
.social{display:flex;gap:10px}.footer-grid .social a{display:flex;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid #2e5a51;border-radius:50%;padding:0;color:#e3f2ee}.footer-grid .social a:hover{background:var(--teal);border-color:var(--teal);text-decoration:none}.social svg{width:16px;height:16px}
.copy{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:28px;padding-top:16px;border-top:1px solid #1e4a42;color:#8fb8ad;font-size:.82rem}.totop{color:#e3f2ee;text-decoration:none;font-weight:600}.totop:hover{text-decoration:underline}

/* responsive */
@media (max-width:1100px){.shortcuts{grid-template-columns:repeat(9,minmax(86px,1fr));overflow-x:auto;margin-left:0;margin-right:0}}
@media (max-width:900px){
  .cols{grid-template-columns:1fr}.side{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}.f-brand{grid-column:1 / -1}
  .hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:30px 22px 20px}.hero h1{font-size:1.9rem}.hero-photo{height:200px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}.wrap{padding:0 16px}
  .row{flex-wrap:wrap}
  .top .wrap{flex-wrap:wrap;gap:0 12px;min-height:60px}
  .burger{display:inline-flex;margin-left:auto;padding:8px;border-radius:10px;cursor:pointer}.burger:hover{background:var(--card)}
  .main-nav,.nav-right{display:none;width:100%;order:3}
  .nav-toggle:checked~.main-nav{display:flex;flex-direction:column;align-self:auto;padding:6px 0}
  .nav-toggle:checked~.nav-right{display:flex;flex-wrap:wrap;padding:6px 0 12px}
  .tab{padding:11px 4px;border-bottom:0;margin:0}.tab.on{background:rgba(18,184,134,.1);border-radius:8px;padding-left:10px}
  .pop{position:static;box-shadow:none;margin-top:4px}
}
@media (max-width:700px){.brand-sub{display:none}.shortcuts{padding:14px 10px}.cat-head h1{font-size:1.5rem}}