/* 威威知識分享 homepage — all styles. Tweakable tokens set on .ww via inline style. */
.ww{
  --ink:#1c2330; --ink2:#262d3a; --cream:#faf7f1; --paper:#ffffff;
  --line:#ece6da; --line2:#ddd5c6; --soft:#43474f; --gray:#857e72; --muted:#a89f90;
  --accent:#c0633f; --accent-d:#a44e2d;
  --math:#35608c; --eng:#b15a36; --fin:#2f7d5b;
  --serif:'Noto Serif TC',serif; --sans:'Noto Sans TC',sans-serif; --mono:'JetBrains Mono',monospace;
  background:var(--cream); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.ww *{box-sizing:border-box;}
.ww a{color:inherit;text-decoration:none;cursor:pointer;}
.ww button{font-family:inherit;cursor:pointer;}
.ww img{display:block;}
.ww-wrap{max-width:1240px;margin:0 auto;padding:0 40px;}
.ww-mono{font-family:var(--mono);}
.ww-serif{font-family:var(--serif);}

/* ---------- NAV ---------- */
.ww-nav{position:sticky;top:0;z-index:50;background:rgba(250,247,241,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.ww-navin{max-width:1240px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.ww-brand{display:flex;align-items:center;gap:12px;}
.ww-brand img{width:34px;height:34px;object-fit:contain;}
.ww-brand b{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:1px;}
.ww-navlinks{display:flex;gap:30px;font-size:15.5px;color:var(--soft);font-weight:500;}
.ww-navlinks a{position:relative;padding:4px 0;transition:color .15s;}
.ww-navlinks a:hover{color:var(--accent);}
.ww-navr{display:flex;align-items:center;gap:16px;}
.ww-iconbtn{width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--soft);}
.ww-iconbtn:hover{border-color:var(--accent);color:var(--accent);}
.ww-navcta{background:var(--ink);color:#fff;padding:10px 20px;border-radius:9px;font-size:14.5px;font-weight:600;white-space:nowrap;}
.ww-navcta:hover{background:var(--accent);}

/* ---------- HERO ---------- */
.ww-hero{position:relative;overflow:hidden;}
.ww-hero.dark{background:linear-gradient(120deg,#171d27 0%,#1f2733 55%,#222b39 100%);color:#f4f1ea;}
.ww-hero.light{background:var(--cream);color:var(--ink);}
.ww-heroin{max-width:1240px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:600px;}
.ww-hero.centered .ww-heroin{grid-template-columns:1fr;text-align:center;min-height:auto;padding-top:84px;padding-bottom:72px;}
.ww-hero.centered .ww-herophoto{display:none;}
.ww-herocontent{padding:80px 0;position:relative;z-index:2;}
.ww-hero.centered .ww-herocontent{padding:0;max-width:820px;margin:0 auto;}
.ww-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;color:var(--accent);margin-bottom:24px;font-weight:500;}
.ww-hero.dark .ww-kicker{color:#e3a37e;}
.ww-kicker .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.ww-h1{font-family:var(--serif);font-weight:700;font-size:62px;line-height:1.12;letter-spacing:-1px;white-space:pre-line;margin:0 0 24px;}
.ww-hero.centered .ww-h1{font-size:66px;}
.ww-lead{font-size:19px;line-height:1.85;margin:0 0 36px;max-width:540px;}
.ww-hero.dark .ww-lead{color:#cbc6bb;}
.ww-hero.light .ww-lead{color:var(--soft);}
.ww-hero.centered .ww-lead{margin-left:auto;margin-right:auto;}
.ww-ctarow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.ww-hero.centered .ww-ctarow{justify-content:center;}
.ww-btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;padding:16px 28px;border-radius:10px;font-size:16px;font-weight:600;white-space:nowrap;border:none;box-shadow:0 12px 30px -10px rgba(192,99,63,.6);transition:transform .15s,background .15s;}
.ww-btn:hover{background:var(--accent-d);transform:translateY(-1px);}
.ww-btn.ghost{background:transparent;box-shadow:none;border:1.5px solid currentColor;color:inherit;}
.ww-hero.dark .ww-btn.ghost{border-color:rgba(255,255,255,.34);}
.ww-btn.ghost:hover{background:rgba(255,255,255,.07);transform:translateY(-1px);}
.ww-hero.light .ww-btn.ghost:hover{background:rgba(0,0,0,.04);}
.ww-herophoto{position:relative;align-self:stretch;}
.ww-herophoto .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 100%);}
.ww-herophoto .badge{position:absolute;left:6px;bottom:42px;z-index:3;background:rgba(20,26,36,.72);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:14px 20px;color:#fff;}
.ww-herophoto .badge b{font-family:var(--serif);font-size:18px;display:block;}
.ww-herophoto .badge span{font-size:13px;opacity:.82;}

/* ---------- CREDS ---------- */
.ww-creds{background:var(--ink);color:#e7e2d8;}
.ww-credsin{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);}
.ww-cred{padding:22px 28px;font-size:15px;font-weight:500;display:flex;align-items:center;gap:11px;border-left:1px solid rgba(255,255,255,.09);}
.ww-cred:first-child{border-left:none;}
.ww-cred svg{color:#e3a37e;flex:none;}

/* ---------- SECTION HEADERS ---------- */
.ww-sec{padding:88px 0;}
.ww-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.ww-h2{font-family:var(--serif);font-size:42px;font-weight:700;letter-spacing:-.4px;margin:0 0 14px;line-height:1.14;}
.ww-h2sub{font-size:18px;color:var(--gray);max-width:620px;line-height:1.75;}
.ww-sechead{margin-bottom:48px;}

/* ---------- PILLARS ---------- */
.ww-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ww-pillar{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:34px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;}
.ww-pillar:hover{transform:translateY(-3px);box-shadow:0 24px 48px -28px rgba(40,30,16,.4);border-color:var(--pc);}
.ww-pillar:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--pc);}
.ww-pilltop{display:flex;align-items:center;gap:14px;margin-bottom:8px;}
.ww-pillicon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--pc);flex:none;}
.ww-pillttl{font-family:var(--serif);font-size:25px;font-weight:700;}
.ww-pillen{font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;}
.ww-pillline{font-size:15.5px;line-height:1.75;color:var(--soft);margin:6px 0 18px;}
.ww-pilltopics{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;}
.ww-pilltopics span{font-size:12.5px;color:var(--soft);background:var(--cream);border:1px solid var(--line);padding:4px 11px;border-radius:30px;}
.ww-pillarts{display:flex;flex-direction:column;gap:0;margin-top:auto;border-top:1px solid var(--line);}
.ww-pillart{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
.ww-pillart:last-child{border-bottom:none;}
.ww-pillart .tcat{font-family:var(--mono);font-size:10.5px;color:var(--pc);font-weight:700;background:color-mix(in srgb,var(--pc) 12%,transparent);padding:3px 8px;border-radius:5px;white-space:nowrap;flex:none;margin-top:2px;}
.ww-pillart .ttitle{font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:500;}
.ww-pillart:hover .ttitle{color:var(--pc);}
.ww-pillempty{margin-top:auto;border-top:1px solid var(--line);padding-top:20px;font-size:14.5px;line-height:1.7;color:var(--gray);}
.ww-pillmore{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:15px;font-weight:600;color:var(--pc);}
.ww-pillmore:hover{gap:11px;}

/* ---------- LEARNING BAND ---------- */
.ww-learn{background:var(--ink);color:#f1ede4;border-radius:0;}
.ww-learnin{max-width:1240px;margin:0 auto;padding:72px 40px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.ww-learn .ww-eyebrow{color:#e3a37e;}
.ww-learn h3{font-family:var(--serif);font-size:36px;font-weight:700;line-height:1.22;margin:0 0 16px;}
.ww-learn p{font-size:17px;line-height:1.8;color:#cbc6bb;margin:0;}
.ww-learnchips{display:flex;flex-wrap:wrap;gap:10px;}
.ww-learnchips span{font-size:14px;color:#e7e2d8;border:1px solid rgba(255,255,255,.18);padding:9px 16px;border-radius:30px;background:rgba(255,255,255,.04);}
.ww-learnchips span:hover{border-color:#e3a37e;color:#fff;}
.ww-learncta{display:inline-flex;align-items:center;gap:9px;margin-top:28px;color:#fff;font-weight:600;font-size:16px;border-bottom:2px solid var(--accent);padding-bottom:4px;}

/* ---------- TIMELINE ---------- */
.ww-tl{background:linear-gradient(180deg,var(--cream),#f3ede2);}
.ww-tltabs{display:inline-flex;background:var(--paper);border:1px solid var(--line2);border-radius:12px;padding:5px;gap:4px;margin-bottom:14px;}
.ww-tltab{padding:9px 22px;border-radius:8px;border:none;background:transparent;font-size:15px;font-weight:600;color:var(--gray);display:flex;align-items:center;gap:8px;}
.ww-tltab.on{background:var(--tlc);color:#fff;}
.ww-tlnote{font-size:13px;color:var(--muted);font-family:var(--mono);margin:18px 0 26px;}
.ww-tlscroll{display:flex;gap:16px;overflow-x:auto;padding:8px 40px 30px;scroll-snap-type:x mandatory;}
.ww-tlscroll::-webkit-scrollbar{height:8px;}
.ww-tlscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;}
.ww-tlcard{flex:0 0 250px;scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;}
.ww-tlcard:hover{transform:translateY(-4px);box-shadow:0 24px 48px -30px rgba(40,30,16,.45);}
.ww-tlcard .gr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.ww-tlcard .grl{font-family:var(--serif);font-size:21px;font-weight:700;}
.ww-tlcard .grn{font-family:var(--mono);font-size:11px;color:#fff;background:var(--tlc);padding:4px 9px;border-radius:20px;font-weight:700;}
.ww-tlpts{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:9px;flex:1;}
.ww-tlpts li{font-size:14px;color:var(--soft);line-height:1.45;display:flex;gap:9px;align-items:flex-start;}
.ww-tlpts li:before{content:'';width:6px;height:6px;border-radius:2px;background:var(--tlc);margin-top:7px;flex:none;transform:rotate(45deg);}
.ww-tlexams{display:flex;flex-wrap:wrap;gap:6px;padding-top:14px;border-top:1px dashed var(--line2);}
.ww-tlexams span{font-size:11px;font-weight:700;color:var(--tlc);background:color-mix(in srgb,var(--tlc) 11%,transparent);padding:3px 9px;border-radius:6px;}
.ww-tlrail{display:flex;align-items:center;gap:14px;padding:0 40px;}
.ww-tlrail .line{flex:1;height:2px;background:var(--line2);position:relative;}
.ww-tlrail .seg{font-family:var(--mono);font-size:11px;color:var(--gray);letter-spacing:1px;}

/* ---------- FREEBIE ---------- */
.ww-freebie{background:var(--ink);color:#f3efe6;position:relative;overflow:hidden;}
.ww-freebie:before{content:'';position:absolute;top:-120px;right:-80px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 40%,transparent),transparent 68%);}
.ww-freebiein{max-width:1240px;margin:0 auto;padding:72px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;z-index:1;}
.ww-fbadge{display:inline-block;background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:1px;padding:6px 15px;border-radius:30px;margin-bottom:20px;}
.ww-freebie h3{font-family:var(--serif);font-size:34px;font-weight:700;line-height:1.28;margin:0 0 16px;}
.ww-freebie>div>p{font-size:16.5px;line-height:1.75;color:#cbc6bb;margin:0 0 28px;max-width:520px;}
.ww-fitems{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.ww-fitem{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:18px;}
.ww-fitem .k{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.ww-fitem b{font-size:15px;display:block;margin-bottom:5px;}
.ww-fitem span{font-size:12.5px;color:#aaa294;line-height:1.5;}
.ww-fform{background:var(--paper);border-radius:16px;padding:34px;color:var(--ink);}
.ww-fform label{font-size:14px;font-weight:600;display:block;margin-bottom:11px;}
.ww-finput{width:100%;border:1.5px solid var(--line2);border-radius:10px;padding:16px 18px;font-size:16px;font-family:inherit;margin-bottom:13px;background:var(--cream);color:var(--ink);}
.ww-finput:focus{outline:none;border-color:var(--accent);}
.ww-fsubmit{width:100%;background:var(--accent);color:#fff;border:none;padding:17px;border-radius:10px;font-size:16.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px;}
.ww-fsubmit:hover{background:var(--accent-d);}
.ww-fnote{text-align:center;font-size:12.5px;color:var(--gray);margin-top:13px;}
.ww-fok{text-align:center;padding:14px 0;}
.ww-fok .ic{width:54px;height:54px;border-radius:50%;background:color-mix(in srgb,var(--fin) 16%,transparent);color:var(--fin);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.ww-fok b{font-size:19px;display:block;margin-bottom:8px;}
.ww-fok p{font-size:14.5px;color:var(--gray);line-height:1.6;margin:0;}

/* ---------- NEWSLETTER ---------- */
.ww-nl{background:var(--cream);}
.ww-nlcard{max-width:1240px;margin:0 auto;padding:0 40px;}
.ww-nlin{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:54px 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;box-shadow:0 30px 60px -40px rgba(40,30,16,.35);}
.ww-nlin h3{font-family:var(--serif);font-size:30px;font-weight:700;margin:0 0 12px;}
.ww-nlin p{font-size:16px;line-height:1.75;color:var(--soft);margin:0;}
.ww-nlform{display:flex;flex-direction:column;gap:12px;}
.ww-nlrow{display:flex;gap:10px;}
.ww-nlrow input{flex:1;border:1.5px solid var(--line2);border-radius:10px;padding:16px 18px;font-size:15.5px;font-family:inherit;background:var(--cream);}
.ww-nlrow input:focus{outline:none;border-color:var(--accent);}
.ww-nlrow button{background:var(--ink);color:#fff;border:none;border-radius:10px;padding:0 28px;font-size:15.5px;font-weight:700;white-space:nowrap;}
.ww-nlrow button:hover{background:var(--accent);}
.ww-nlform .note{font-size:12.5px;color:var(--gray);}

/* ---------- ABOUT ---------- */
.ww-about{background:linear-gradient(180deg,#f3ede2,var(--cream));}
.ww-aboutin{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
.ww-aphoto{position:relative;}
.ww-aphoto img{width:100%;border-radius:18px;object-fit:cover;aspect-ratio:4/5;box-shadow:0 30px 60px -34px rgba(20,20,30,.55);}
.ww-aphoto .mk{position:absolute;right:-16px;bottom:-16px;width:78px;height:78px;background:var(--paper);border-radius:18px;box-shadow:0 14px 30px -16px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:14px;}
.ww-aphoto .mk img{width:100%;height:100%;border-radius:0;box-shadow:none;aspect-ratio:auto;}
.ww-about h3{font-family:var(--serif);font-size:36px;font-weight:700;margin:0 0 22px;}
.ww-about p{font-size:17px;line-height:1.9;color:var(--soft);margin:0 0 18px;max-width:560px;}
.ww-acreds{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0;}
.ww-acreds span{font-size:13.5px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:8px 16px;border-radius:30px;}
.ww-acta{display:inline-flex;align-items:center;gap:9px;color:var(--accent);font-weight:600;font-size:16px;}
.ww-acta:hover{gap:13px;}

/* ---------- SOCIAL + FOOTER ---------- */
.ww-foot{background:var(--ink);color:#cbc6bb;}
.ww-social{border-bottom:1px solid rgba(255,255,255,.1);}
.ww-socialin{max-width:1240px;margin:0 auto;padding:56px 40px;text-align:center;}
.ww-social h4{font-family:var(--serif);color:#f3efe6;font-size:26px;margin:0 0 8px;font-weight:700;}
.ww-social p{font-size:15px;color:#9b9488;margin:0 0 30px;}
.ww-socialgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:760px;margin:0 auto;}
.ww-soc{display:flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid rgba(255,255,255,.14);border-radius:11px;font-size:14.5px;font-weight:500;color:#e0dbd0;background:rgba(255,255,255,.03);transition:.15s;}
.ww-soc:hover{border-color:var(--accent);color:#fff;background:rgba(192,99,63,.14);transform:translateY(-2px);}
.ww-foottop{max-width:1240px;margin:0 auto;padding:60px 40px 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:44px;}
.ww-foottop .bcol b{display:flex;align-items:center;gap:11px;font-family:var(--serif);color:#f3efe6;font-size:22px;font-weight:700;margin-bottom:14px;}
.ww-foottop .bcol b img{width:32px;height:32px;}
.ww-foottop .tl{font-size:14.5px;color:#9b9488;line-height:1.8;max-width:300px;}
.ww-foottop .col b{display:block;color:#7e786d;font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;font-family:var(--mono);}
.ww-foottop .col a{display:block;font-size:15px;color:#d4cfc4;margin-bottom:11px;}
.ww-foottop .col a:hover{color:var(--accent);}
.ww-footnl{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:22px;}
.ww-footnl b{font-size:15px;color:#f3efe6;display:block;margin-bottom:10px;}
.ww-footnl .r{display:flex;gap:8px;}
.ww-footnl input{flex:1;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.2);border-radius:8px;padding:11px 13px;font-size:14px;color:#fff;font-family:inherit;}
.ww-footnl button{background:var(--accent);border:none;color:#fff;border-radius:8px;padding:0 16px;font-weight:700;}
.ww-copy{max-width:1240px;margin:0 auto;padding:24px 40px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:13px;color:#7e786d;}
.ww-disc{max-width:1240px;margin:0 auto;padding:0 40px 40px;font-size:12px;color:#6f6a60;line-height:1.7;}

/* reveal */
@media (prefers-reduced-motion: no-preference){
  .ww-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease;}
  .ww-reveal.in{opacity:1;transform:none;}
}

/* ============ CONTENT / KNOWLEDGE-MAP PAGES ============ */
.ww-cphero{background:linear-gradient(120deg,#171d27,#222b39);color:#f4f1ea;position:relative;overflow:hidden;}
.ww-cphero:before{content:'';position:absolute;top:-140px;right:-60px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sc) 42%,transparent),transparent 68%);}
.ww-cpheroin{max-width:1240px;margin:0 auto;padding:34px 40px 48px;position:relative;z-index:1;}
.ww-bc{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#a59e93;margin-bottom:26px;}
.ww-bc a:hover{color:#fff;}
.ww-bc .sep{opacity:.5;}
.ww-cpeyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;letter-spacing:1.5px;color:var(--sc-l);margin-bottom:16px;}
.ww-cph1{font-family:var(--serif);font-size:54px;font-weight:700;letter-spacing:-1px;margin:0 0 16px;line-height:1.12;}
.ww-cplead{font-size:18px;line-height:1.8;color:#cbc6bb;max-width:640px;margin:0 0 30px;}
.ww-cpstats{display:flex;gap:36px;}
.ww-cpstat .n{font-family:var(--serif);font-size:34px;font-weight:700;color:#fff;line-height:1;}
.ww-cpstat .l{font-size:13px;color:#a59e93;margin-top:7px;}

/* filter bar */
.ww-filter{position:sticky;top:67px;z-index:30;background:rgba(250,247,241,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.ww-filterin{max-width:1240px;margin:0 auto;padding:18px 40px;display:flex;flex-direction:column;gap:14px;}
.ww-frow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ww-flabel{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);width:64px;flex:none;}
.ww-seg{display:inline-flex;background:var(--paper);border:1px solid var(--line2);border-radius:10px;padding:4px;gap:3px;}
.ww-seg button{padding:8px 16px;border-radius:7px;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--gray);display:flex;align-items:center;gap:7px;}
.ww-seg button.on{background:var(--sc);color:#fff;}
.ww-chips{display:flex;flex-wrap:wrap;gap:8px;flex:1;}
.ww-chip{font-size:13.5px;color:var(--soft);background:var(--paper);border:1px solid var(--line2);padding:7px 14px;border-radius:30px;font-weight:500;}
.ww-chip.on{background:var(--sc);color:#fff;border-color:var(--sc);}
.ww-chip:hover:not(.on){border-color:var(--sc);}
.ww-srch{display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line2);border-radius:10px;padding:9px 14px;min-width:220px;color:var(--gray);}
.ww-srch input{border:none;background:none;outline:none;font-size:14.5px;font-family:inherit;color:var(--ink);width:100%;}

/* groups */
.ww-cpbody{max-width:1240px;margin:0 auto;padding:44px 40px 80px;}
.ww-grp{background:var(--paper);border:1px solid var(--line);border-radius:16px;margin-bottom:16px;overflow:hidden;}
.ww-grphead{display:flex;align-items:center;gap:16px;padding:22px 26px;cursor:pointer;user-select:none;}
.ww-grphead .gi{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--sc);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:18px;flex:none;}
.ww-grphead .gt{font-family:var(--serif);font-size:22px;font-weight:700;flex:1;}
.ww-grphead .gc{font-size:13px;color:var(--gray);font-family:var(--mono);}
.ww-grphead .gx{color:var(--gray);transition:transform .2s;}
.ww-grp.open .gx{transform:rotate(180deg);}
.ww-grpbody{padding:0 26px 22px;}
.ww-grppts{display:flex;flex-wrap:wrap;gap:7px;padding:0 0 18px;margin-bottom:6px;border-bottom:1px dashed var(--line2);}
.ww-grppts .lbl{font-size:12px;color:var(--muted);font-family:var(--mono);margin-right:4px;align-self:center;}
.ww-grppts span{font-size:12.5px;color:var(--soft);background:var(--cream);border:1px solid var(--line);padding:4px 11px;border-radius:7px;}
.ww-arts{display:flex;flex-direction:column;}
.ww-art{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);}
.ww-art:last-child{border-bottom:none;}
.ww-art .atag{font-size:11px;font-weight:700;color:var(--sc);background:color-mix(in srgb,var(--sc) 11%,transparent);padding:4px 10px;border-radius:6px;white-space:nowrap;flex:none;width:84px;text-align:center;}
.ww-art .atitle{flex:1;font-size:16px;font-weight:500;color:var(--ink);}
.ww-art:hover .atitle{color:var(--sc);}
.ww-art .ameta{display:flex;align-items:center;gap:10px;flex:none;}
.ww-art .agrade{font-size:12px;color:var(--gray);}
.ww-art .axam{font-size:11px;font-weight:700;color:var(--soft);border:1px solid var(--line2);padding:3px 8px;border-radius:5px;}
.ww-art .adiff{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--soft);}
.ww-art .adiff .dot{width:8px;height:8px;border-radius:50%;}
.ww-art .amin{font-size:12px;color:var(--muted);font-family:var(--mono);width:50px;text-align:right;}
.ww-d入門{background:#7aa84f;} .ww-d中等{background:#d9a13a;} .ww-d進階{background:#cc7a3a;} .ww-d挑戰{background:#b1474a;}
.ww-grpempty{padding:18px 0 6px;font-size:14.5px;color:var(--gray);line-height:1.7;}
.ww-noresult{text-align:center;padding:60px 0;color:var(--gray);}
.ww-noresult b{display:block;font-size:18px;color:var(--ink);margin-bottom:8px;font-family:var(--serif);}

/* blog landing */
.ww-blogcats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px;}
.ww-bcat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;}
.ww-bcat:hover{transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(40,30,16,.4);border-color:var(--bc);}
.ww-bcat:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--bc);}
.ww-bcat .bt{font-family:var(--serif);font-size:22px;font-weight:700;margin-bottom:6px;}
.ww-bcat .bd{font-size:14px;color:var(--gray);line-height:1.6;margin-bottom:18px;min-height:44px;}
.ww-bcat .bn{font-family:var(--mono);font-size:12.5px;color:var(--bc);font-weight:700;}
.ww-bcat .bsoon{font-family:var(--mono);font-size:12px;color:var(--muted);}
.ww-postlist{display:flex;flex-direction:column;gap:0;}
.ww-post{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);}
.ww-post .pcat{font-size:11.5px;font-weight:700;color:#fff;background:var(--ink);padding:5px 12px;border-radius:20px;align-self:flex-start;white-space:nowrap;}
.ww-post h4{font-family:var(--serif);font-size:21px;font-weight:700;margin:0 0 8px;}
.ww-post:hover h4{color:var(--accent);}
.ww-post p{font-size:15px;color:var(--soft);line-height:1.7;margin:0 0 10px;}
.ww-post .pm{font-family:var(--mono);font-size:12px;color:var(--muted);}

@media (max-width:980px){
  .ww-cph1{font-size:38px;}
  .ww-blogcats{grid-template-columns:1fr 1fr;}
  .ww-art{flex-wrap:wrap;gap:10px;}
  .ww-art .atitle{flex-basis:100%;order:-1;}
  .ww-filter{top:59px;}
}

/* responsive */
@media (max-width:980px){
  .ww-heroin{grid-template-columns:1fr;min-height:auto;padding-top:60px;padding-bottom:0;}
  .ww-herophoto{height:360px;margin:0 -40px;}
  .ww-herophoto .ph{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent);object-position:center 15%;}
  .ww-herophoto .badge{left:24px;}
  .ww-h1{font-size:46px;} .ww-hero.centered .ww-h1{font-size:46px;}
  .ww-credsin{grid-template-columns:1fr 1fr;}
  .ww-cred:nth-child(odd){border-left:none;}
  .ww-cred:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09);}
  .ww-pillars{grid-template-columns:1fr;}
  .ww-learnin,.ww-freebiein,.ww-nlin,.ww-aboutin{grid-template-columns:1fr;gap:32px;}
  .ww-fitems{grid-template-columns:repeat(3,1fr);}
  .ww-h2{font-size:34px;}
  .ww-foottop{grid-template-columns:1fr 1fr;}
}