/* ============================================================
   前進紅點之路｜線上講義  style.css
   Paper × Ink × Red Dot
   ============================================================ */
:root{
  --paper:#FBF9F5; --paper-2:#F3EFE8; --ink:#121110; --ink-2:#3A3733; --mute:#7A746B;
  --red:#E3001B; --red-d:#B30016; --line:rgba(18,17,16,.14);
  --night:#0E0D0C; --night-2:#1B1A18; --on-night:#F7F4EE; --on-night-mute:#A39C90;
  --gold:#C9A45C;
  --f-sans:"Noto Sans TC",system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --f-serif:"Noto Serif TC","Songti TC",serif;
  --f-disp:"Archivo Black","Noto Sans TC",sans-serif;
  --f-mono:"Space Grotesk",ui-monospace,monospace;
  --pad:clamp(16px,5vw,72px);
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.75;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--red);color:#fff}

/* paper grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- top bar ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:16px;padding:10px var(--pad);
  background:rgba(251,249,245,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:background .3s,color .3s}
.bar.dark{background:rgba(14,13,12,.82);color:var(--on-night);border-color:rgba(255,255,255,.1)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.brand i{width:18px;height:18px;border-radius:50%;background:var(--red);display:inline-block;box-shadow:0 0 0 4px rgba(227,0,27,.15)}
.brand small{font-family:var(--f-mono);font-weight:500;opacity:.6;font-size:12px;letter-spacing:.1em}
.chapters{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.chapters::-webkit-scrollbar{display:none}
.chapters a{font-size:13px;text-decoration:none;padding:6px 10px;border-radius:99px;white-space:nowrap;opacity:.7;transition:.2s}
.chapters a b{font-family:var(--f-mono);font-weight:700;margin-right:4px;color:var(--red)}
.chapters a:hover,.chapters a.on{opacity:1;background:var(--ink);color:var(--paper)}
.bar.dark .chapters a:hover,.bar.dark .chapters a.on{background:var(--on-night);color:var(--ink)}
.mode{display:flex;border:1px solid currentColor;border-radius:99px;padding:2px;flex-shrink:0}
.mode button{border:0;background:none;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700}
.mode button.on{background:var(--red);color:#fff}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);z-index:101;width:0;transition:width .15s linear}

/* ---------- sections / slides ---------- */
.slide{position:relative;padding:clamp(96px,12vh,140px) var(--pad) clamp(72px,10vh,120px);min-height:auto}
.slide>.in{max-width:var(--max);margin:0 auto;position:relative}
.night{background:var(--night);color:var(--on-night)}
.night .mute{color:var(--on-night-mute)}
.redbg{background:var(--red);color:#fff}
.paper2{background:var(--paper-2)}
.mute{color:var(--mute)}

/* deck mode */
body.deck{overflow:hidden}
body.deck main{height:100vh;height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory}
body.deck .slide{min-height:100vh;min-height:100dvh;scroll-snap-align:start;display:flex;align-items:center}
body.deck .slide>.in{width:100%}
body.deck footer{scroll-snap-align:end}
.deck-ui{position:fixed;right:var(--pad);bottom:20px;z-index:100;display:none;align-items:center;gap:8px;font-family:var(--f-mono);font-size:13px}
body.deck .deck-ui{display:flex}
.deck-ui button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);font-size:16px;display:grid;place-items:center}
.deck-ui span{background:var(--ink);color:var(--paper);padding:6px 12px;border-radius:99px;min-width:76px;text-align:center}
.hint{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:100;background:var(--ink);color:var(--paper);font-size:13px;padding:8px 16px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .4s}
.hint.show{opacity:1}

/* ---------- typography ---------- */
.kicker{font-family:var(--f-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 18px}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.redbg .kicker::before{background:#fff}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:.01em;line-height:1.18}
.h-xl{font-size:clamp(44px,8.4vw,128px);line-height:1.02;letter-spacing:-.01em}
.h-l{font-size:clamp(34px,5.4vw,76px);line-height:1.1}
.h-m{font-size:clamp(26px,3.4vw,44px)}
.h-s{font-size:clamp(20px,2vw,26px)}
.lead{font-size:clamp(18px,1.6vw,22px);line-height:1.8;max-width:46em}
.serif{font-family:var(--f-serif);font-weight:900}
.num{font-family:var(--f-disp);letter-spacing:-.02em}
.red{color:var(--red)}
.u-red{background:linear-gradient(transparent 62%,rgba(227,0,27,.25) 0)}
p{margin:0 0 1em}
h2+.lead,h2+p.lead{margin-top:18px}
.mt1{margin-top:16px}.mt2{margin-top:32px}.mt3{margin-top:56px}.mt4{margin-top:88px}
.note{font-size:13px;color:var(--mute);line-height:1.6}
.night .note{color:var(--on-night-mute)}
.src{font-size:12px;opacity:.6;margin-top:24px}

/* chapter cover */
.ch-cover{overflow:hidden}
.ch-num{font-family:var(--f-disp);font-size:clamp(160px,30vw,440px);line-height:.8;color:transparent;-webkit-text-stroke:2px currentColor;opacity:.16;position:absolute;right:-.06em;bottom:-.12em;pointer-events:none;user-select:none}
.ch-cover h2{font-size:clamp(48px,9vw,140px);line-height:1}
.ch-cover .lead{margin-top:24px}
.toc-mini{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.toc-mini span{border:1px solid currentColor;border-radius:99px;padding:4px 14px;font-size:14px;opacity:.85}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in-view{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ---------- HERO ---------- */
.hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;overflow:hidden;padding-top:120px}
.hero .lead{position:relative;z-index:2;max-width:30em}
.hero .dot{position:absolute;right:-10vw;top:50%;width:min(54vw,720px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.hero .dot svg{width:100%;height:100%;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1{position:relative;z-index:2}
.hero h1 .line{display:block}
.hero h1 .small{font-size:.36em;display:block;letter-spacing:.06em;margin-bottom:.3em;font-weight:700}
.hero .meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:40px;position:relative;z-index:2}
.stat b{display:block;font-family:var(--f-disp);font-size:clamp(40px,5vw,72px);line-height:1;color:var(--red)}
.stat span{font-size:13px;color:var(--mute)}
.hero .who{position:relative;z-index:2;margin-top:44px;font-size:14px;color:var(--mute)}
.scroll-cue{position:absolute;left:var(--pad);bottom:28px;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;display:flex;align-items:center;gap:10px}
.scroll-cue i{width:1px;height:40px;background:currentColor;animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- generic grids / cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;position:relative}
.night .card{background:var(--night-2);border-color:rgba(255,255,255,.08)}
.card h3{font-size:20px;margin-bottom:8px}
.card .idx{font-family:var(--f-disp);color:var(--red);font-size:14px;letter-spacing:.06em}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:3px 12px;font-size:13px;font-weight:700;background:var(--ink);color:var(--paper)}
.pill.r{background:var(--red);color:#fff}
.pill.o{background:transparent;border:1px solid currentColor;color:inherit}

/* Venn */
.venn{position:relative;width:min(100%,460px);aspect-ratio:1;margin:auto}
.venn button{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;border:0;mix-blend-mode:multiply;font-weight:900;font-size:clamp(18px,2.2vw,26px);color:#fff;display:grid;place-items:center;transition:transform .35s var(--ease)}
.venn button:hover,.venn button.on{transform:scale(1.07)}
.venn .v1{left:22%;top:0;background:#E3001B}
.venn .v2{left:0;top:40%;background:#1D2B53}
.venn .v3{left:44%;top:40%;background:#C9A45C}
.venn-out{min-height:150px}
.venn-out h3{font-size:28px}

/* flip cards */
.flip{perspective:1000px;min-height:230px;background:none;border:0;padding:0;text-align:left}
.flip .f{position:relative;width:100%;height:100%;min-height:230px;transition:transform .7s var(--ease);transform-style:preserve-3d}
.flip.on .f{transform:rotateY(180deg)}
.flip .a,.flip .b{position:absolute;inset:0;border-radius:18px;padding:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between}
.flip .a{background:var(--ink);color:var(--paper)}
.flip .a h3{font-size:clamp(26px,2.6vw,36px)}
.flip .a small{font-family:var(--f-mono);opacity:.6;letter-spacing:.1em}
.flip .b{background:var(--red);color:#fff;transform:rotateY(180deg);font-size:16px;line-height:1.7}
.flip:nth-child(2) .a{background:#1D2B53}.flip:nth-child(3) .a{background:#5B4A2E}.flip:nth-child(4) .a{background:#2E5B3A}

/* chips board */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid var(--ink);background:transparent;border-radius:99px;padding:10px 20px;font-size:17px;font-weight:700;transition:.2s}
.chip:hover{background:var(--ink);color:var(--paper)}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.night .chip{border-color:var(--on-night)}
.night .chip:hover{background:var(--on-night);color:var(--ink)}

/* big quote */
.quote{font-family:var(--f-serif);font-weight:900;font-size:clamp(30px,4.6vw,64px);line-height:1.3}
.quote em{font-style:normal;color:var(--red)}

/* timeline stepper */
.steps{display:grid;grid-template-columns:repeat(8,1fr);gap:0;position:relative;margin-top:36px}
.steps::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--line)}
.steps .bar-fill{position:absolute;left:0;top:22px;height:2px;background:var(--red);transition:width .5s var(--ease)}
.step{background:none;border:0;padding:0 4px;text-align:left;position:relative}
.step i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);font-style:normal;font-family:var(--f-disp);font-size:14px;position:relative;z-index:1;transition:.3s}
.step b{display:block;margin-top:10px;font-size:15px;line-height:1.35}
.step.on i,.step.done i{background:var(--red);border-color:var(--red);color:#fff}
.step-detail{margin-top:36px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;min-height:170px}
.step-detail .big{font-family:var(--f-disp);font-size:clamp(64px,9vw,120px);line-height:.85;color:var(--red)}
.step-detail h3{font-size:28px;margin-bottom:8px}
.step-detail ul{margin:8px 0 0;padding-left:1.2em}

/* starting point orbit */
.orbit{position:relative;width:min(100%,520px);aspect-ratio:1;margin:auto}
.orbit .core{position:absolute;inset:34%;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900;font-size:clamp(20px,2.6vw,30px);text-align:center;line-height:1.2;z-index:2}
.orbit button{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-weight:900;line-height:1.15;display:grid;place-content:center;text-align:center;transition:.3s var(--ease);font-size:clamp(14px,1.6vw,18px)}
.orbit button small{display:block;font-family:var(--f-mono);font-size:.75em;color:var(--red)}
.orbit button:hover,.orbit button.on{background:var(--ink);color:var(--paper);transform:scale(1.08)}
.orbit .o1{left:35%;top:0}.orbit .o2{right:0;top:35%}.orbit .o3{left:35%;bottom:0}.orbit .o4{left:0;top:35%}
.orbit-out{border-left:4px solid var(--red);padding:8px 0 8px 24px;min-height:200px}
.orbit-out h3{font-size:clamp(26px,3vw,40px)}

/* direction columns */
.dir{border-radius:20px;padding:28px;color:#fff;display:flex;flex-direction:column;gap:12px;min-height:280px}
.dir h3{font-size:24px}
.dir .ex{font-size:14px;opacity:.85}
.dir.a{background:#5F7A1E}.dir.b{background:#D8504D}.dir.c{background:#1B8A9A}
.dir .eg{margin-top:auto;font-size:13px;background:rgba(0,0,0,.18);border-radius:12px;padding:10px 12px}

/* SDG board */
.sdg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sdg{aspect-ratio:1;border:0;border-radius:10px;color:#fff;text-align:left;padding:10px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .25s var(--ease),opacity .25s;position:relative;overflow:hidden}
.sdg b{font-family:var(--f-disp);font-size:clamp(20px,2.4vw,34px);line-height:1}
.sdg span{font-size:clamp(11px,1vw,14px);font-weight:700;line-height:1.25}
.sdg em{position:absolute;right:8px;top:8px;font-style:normal;font-size:11px;background:#fff;color:#111;border-radius:99px;padding:1px 7px;font-weight:900}
.sdg:hover{transform:translateY(-3px)}
.sdg.dim{opacity:.28}
.sdg.on{outline:3px solid var(--ink);outline-offset:2px}
.sdg-out{min-height:260px}
.mini-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:16px}
.mini-works button{border:0;padding:0;background:none;text-align:left}
.mini-works img{aspect-ratio:4/3;object-fit:cover;border-radius:10px;transition:.3s}
.mini-works button:hover img{transform:scale(1.04)}
.mini-works b{display:block;font-size:14px;margin-top:6px}
.mini-works small{font-size:12px;color:var(--mute)}

/* cultural heritage */
.heri{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.heri h3{font-size:20px;margin-bottom:12px}
.heri .chips .chip{font-size:15px;padding:8px 14px}
.pies{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;text-align:center}
.pie{--p:0;width:100%;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--red) calc(var(--p)*1%),rgba(255,255,255,.12) 0);transition:--p 1s}
.pies b{display:block;font-family:var(--f-disp);font-size:clamp(16px,2vw,24px);margin-top:8px}
.pies small{font-size:12px;opacity:.7}

/* generator */
.gen{background:var(--night);color:var(--on-night);border-radius:28px;padding:clamp(24px,4vw,48px);position:relative;overflow:hidden}
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.reel{background:var(--night-2);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between}
.reel small{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--on-night-mute)}
.reel b{font-size:clamp(18px,1.8vw,24px);line-height:1.3;display:block;transition:opacity .1s}
.reel.lock{border-color:var(--red)}
.reel .lk{align-self:flex-start;background:none;border:1px solid rgba(255,255,255,.25);border-radius:99px;font-size:12px;padding:2px 10px;color:var(--on-night-mute)}
.reel.lock .lk{background:var(--red);border-color:var(--red);color:#fff}
.spin{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{border:0;border-radius:99px;padding:14px 28px;font-weight:900;font-size:17px;background:var(--red);color:#fff;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(227,0,27,.6)}
.btn.ghost{background:transparent;border:1.5px solid currentColor;color:inherit}
.btn.ghost:hover{box-shadow:none}
.gen-out{margin-top:28px;font-family:var(--f-serif);font-size:clamp(20px,2.4vw,30px);line-height:1.6;border-top:1px dashed rgba(255,255,255,.2);padding-top:24px}
.gen-out mark{background:none;color:var(--red);font-weight:900}
.checks{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.checks label{display:flex;align-items:center;gap:8px;background:var(--night-2);border-radius:99px;padding:6px 14px;font-size:14px;cursor:pointer}
.checks input{accent-color:var(--red)}

/* plan structure */
.plan li{margin-bottom:10px}
.matrix{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;font-size:14px}
.matrix div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.matrix h4{margin:0 0 8px;font-size:15px;color:var(--red)}
.matrix ul{margin:0;padding-left:1.1em;line-height:1.6}

/* team */
.skillpick{display:flex;flex-wrap:wrap;gap:10px}
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:20px}
.member{border:2px dashed var(--line);border-radius:18px;min-height:150px;padding:14px;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.5)}
.member.filled{border-style:solid;border-color:var(--ink);background:#fff}
.member h4{margin:0;font-size:15px}
.member select{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:4px 6px;background:#fff;width:100%}
.member .tags{display:flex;flex-wrap:wrap;gap:4px}
.member .tags span{font-size:11px;background:var(--paper-2);border-radius:99px;padding:1px 8px}
.coverage{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:20px}
.cov{border-radius:12px;padding:10px 6px;text-align:center;font-size:13px;font-weight:700;background:var(--paper-2);color:var(--mute);transition:.3s}
.cov.ok{background:var(--ink);color:var(--paper)}
.cov.ok::after{content:" ✓";color:var(--red)}
.team-msg{margin-top:16px;font-weight:700}
.role-card{background:var(--red);color:#fff;border-radius:22px;padding:28px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.role-card h3{font-size:clamp(30px,3.6vw,48px)}

/* competitions */
.cal{position:relative;margin-top:20px}
.cal-months{display:grid;grid-template-columns:140px repeat(12,1fr);font-family:var(--f-mono);font-size:12px;color:var(--on-night-mute)}
.cal-months span{text-align:center;padding:6px 0;border-left:1px solid rgba(255,255,255,.06)}
.cal-row{display:grid;grid-template-columns:140px repeat(12,1fr);align-items:center;min-height:48px;border-top:1px solid rgba(255,255,255,.08);position:relative}
.cal-row>b{font-size:14px;padding-right:8px;line-height:1.3}
.cal-row .seg{position:absolute;height:26px;border-radius:99px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;color:#fff;cursor:default}
.cal-row .seg.rd{background:var(--red)}
.cal-row .seg.yo{background:#F6C445;color:#111}
.cal-row .seg.ca{background:#4B7BE5}
.cal-row .seg.tw{background:#4C9F38}
.cal-row .seg.mk{background:transparent;border:1.5px dashed rgba(255,255,255,.5)}
.cal-now{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.8}
.cal-now::before{content:"TODAY";position:absolute;top:-20px;left:-22px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em}

.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.level{border-radius:22px;padding:28px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.level.l1{background:var(--ink);color:var(--paper)}
.level.l2{background:var(--red);color:#fff}
.level.l3{background:#fff;border:1px solid var(--line)}
.level h3{font-size:clamp(22px,2.4vw,32px)}
.level .tiny{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;opacity:.7}
.level .rdlogo{position:absolute;right:-30px;top:-30px;width:140px;opacity:.18}

.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cat{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;text-align:left;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}
.cat b{font-family:var(--f-disp);font-size:13px;color:var(--mute)}
.cat span{font-weight:900;font-size:15px;line-height:1.3}
.cat small{font-size:11px;color:var(--mute);line-height:1.3}
.cat.hot{border-color:var(--ink)}
.cat.hot b{color:var(--red)}
.cat:hover,.cat.on{background:var(--ink);color:var(--paper)}
.cat:hover small,.cat.on small{color:var(--on-night-mute)}
.cat-out{margin-top:16px;background:var(--ink);color:var(--paper);border-radius:16px;padding:18px 22px;min-height:84px}
.legend{display:flex;gap:16px;font-size:13px;margin:12px 0}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;border:1.5px solid var(--ink);margin-right:6px;vertical-align:-1px}

.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:28px;position:relative}
.tl div{border-top:3px solid var(--ink);padding:14px 12px 0 0;position:relative}
.tl div::before{content:"";position:absolute;top:-9px;left:0;width:15px;height:15px;border-radius:50%;background:var(--ink)}
.tl div.r{border-color:var(--red)}
.tl div.r::before{background:var(--red)}
.tl b{display:block;font-family:var(--f-mono);font-size:13px;letter-spacing:.06em}
.tl span{font-weight:900;font-size:17px;display:block;margin-top:2px}
.tl small{font-size:13px;color:var(--mute)}

.calc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}
.calc .row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:14px}
.calc label{font-size:14px;font-weight:700}
.seg-btns{display:flex;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden}
.seg-btns button{border:0;background:none;padding:8px 14px;font-size:14px;font-weight:700}
.seg-btns button.on{background:var(--ink);color:var(--paper)}
.calc input[type=number]{width:84px;font:inherit;border:1.5px solid var(--ink);border-radius:10px;padding:6px 10px}
.calc input[type=range]{accent-color:var(--red);width:160px}
.calc .total{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:16px;margin-top:8px}
.calc .total b{font-family:var(--f-disp);font-size:clamp(36px,4vw,56px);color:var(--red);line-height:1}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.checklist li::before{content:"";flex:0 0 22px;height:22px;border-radius:50%;border:2px solid var(--red);margin-top:4px}
.night .checklist li{border-color:rgba(255,255,255,.1)}

.yo-awards{display:flex;gap:14px;flex-wrap:wrap}
.cube{width:110px;aspect-ratio:1;border-radius:18px;display:grid;place-content:center;text-align:center;font-weight:900;line-height:1.2;font-size:15px;box-shadow:inset 0 -10px 0 rgba(0,0,0,.18)}
.cube small{display:block;font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.1em;opacity:.8}
.cube.g{background:linear-gradient(135deg,#F5D77A,#B8902E);color:#2a1f00}
.cube.s{background:linear-gradient(135deg,#EDEDED,#9C9C9C);color:#1a1a1a}
.cube.b{background:linear-gradient(135deg,#E7A979,#8E5428);color:#fff}
.cube.m{background:transparent;border:2px solid currentColor;box-shadow:none}

.disc{columns:3;column-gap:24px;font-size:15px}
.disc div{break-inside:avoid;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:8px}
.disc div.hot{color:#F6C445;font-weight:900}
.disc em{font-style:normal;font-family:var(--f-mono);font-size:12px;opacity:.6}

.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:14px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{font-size:14px;font-family:var(--f-mono);letter-spacing:.06em;border-bottom:2px solid var(--ink)}
.compare tbody th{width:130px;font-size:14px;color:var(--mute)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- works ---------- */
.bars{display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,16px);height:300px;margin-top:28px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.bars i{display:block;width:100%;background:var(--on-night);border-radius:8px 8px 0 0;height:0;transition:height 1.2s var(--ease)}
.bars div.hi i{background:var(--red)}
.bars b{font-family:var(--f-disp);font-size:clamp(14px,1.8vw,22px);margin-bottom:6px}
.bars small{font-family:var(--f-mono);font-size:12px;margin-top:8px;color:var(--on-night-mute)}
.counter{font-family:var(--f-disp);font-size:clamp(110px,20vw,280px);line-height:.85;color:var(--red);letter-spacing:-.04em}

.bob{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.bob-img{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/2;background:#000}
.bob-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}
.bob-img img.on{opacity:1}
.bob-thumbs{display:flex;gap:8px;margin-top:10px}
.bob-thumbs button{flex:1;border:0;padding:0;border-radius:8px;overflow:hidden;opacity:.5;transition:.2s;background:#000}
.bob-thumbs button.on{opacity:1;outline:2px solid var(--red);outline-offset:2px}
.bob-thumbs img{aspect-ratio:3/2;object-fit:cover}
.bob-badge{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;border-radius:99px;padding:6px 16px 6px 6px;font-weight:900;font-size:14px}
.bob-badge i{width:28px;height:28px;border-radius:50%;background:#fff;display:inline-block;position:relative}
.bob-badge i::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--red)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.filters button{border:1.5px solid var(--on-night);background:none;color:var(--on-night);border-radius:99px;padding:6px 16px;font-size:14px;font-weight:700}
.filters button.on{background:var(--on-night);color:var(--ink)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.wcard{border:0;padding:0;background:var(--night-2);border-radius:18px;overflow:hidden;text-align:left;color:var(--on-night);transition:transform .35s var(--ease),opacity .3s;position:relative}
.wcard:hover{transform:translateY(-6px)}
.wcard .ph{aspect-ratio:3/2;overflow:hidden;position:relative}
.wcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wcard:hover .ph img{transform:scale(1.06)}
.wcard .meta{padding:16px 18px 20px}
.wcard h3{font-size:24px}
.wcard h3 small{font-family:var(--f-mono);font-size:12px;font-weight:500;opacity:.6;display:block;letter-spacing:.04em;margin-top:2px}
.wcard .tg{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.wcard .tg span{font-size:12px;border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:1px 9px}
.wcard .bd{position:absolute;left:12px;top:12px;z-index:2;font-size:11px;font-weight:900;border-radius:99px;padding:3px 10px;letter-spacing:.04em}
.bd.BOB{background:var(--red);color:#fff}
.bd.RD{background:#fff;color:var(--red)}
.bd.ADC{background:#F6C445;color:#111}
.bd.CA{background:#4B7BE5;color:#fff}
.wcard.hide{display:none}

/* modal */
.modal{position:fixed;inset:0;z-index:300;background:rgba(10,9,8,.92);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;color:var(--on-night)}
.modal.open{display:block}
.modal .box{max-width:1240px;margin:0 auto;padding:72px var(--pad) 60px;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px)}
.modal .x{position:fixed;right:20px;top:16px;width:46px;height:46px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:22px;z-index:2}
.modal .stage{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:3/2}
.modal .stage img{width:100%;height:100%;object-fit:contain}
.modal .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#111;font-size:20px}
.modal .nav.p{left:12px}.modal .nav.n{right:12px}
.modal .thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.modal .thumbs button{flex:0 0 84px;border:0;padding:0;border-radius:8px;overflow:hidden;opacity:.45;background:#000}
.modal .thumbs button.on{opacity:1;outline:2px solid var(--red)}
.modal .thumbs img{aspect-ratio:3/2;object-fit:cover}
.modal h2{font-size:clamp(36px,4vw,56px)}
.modal .en{font-family:var(--f-mono);opacity:.6;font-size:14px}
.tabs{display:flex;gap:4px;margin:20px 0 14px;border-bottom:1px solid rgba(255,255,255,.15);overflow-x:auto}
.tabs button{border:0;background:none;color:var(--on-night-mute);padding:10px 12px;font-weight:700;font-size:15px;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.on{color:var(--on-night);border-color:var(--red)}
.tabpane{min-height:180px;font-size:16px}
.tabpane ul{padding-left:1.2em;margin:0}
.tabpane li{margin-bottom:6px}
.award-list{list-style:none;padding:0;margin:14px 0 0}
.award-list li{padding:8px 0;border-top:1px solid rgba(255,255,255,.1);font-size:14px;display:flex;gap:10px}
.award-list li::before{content:"●";color:var(--red)}
.sdg-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.sdg-tags span{font-size:12px;font-weight:700;color:#fff;border-radius:6px;padding:3px 9px}

/* 5 layers */
.layers{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.layer{border:0;text-align:left;border-radius:18px;padding:20px;min-height:180px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;transition:.3s var(--ease)}
.layer b{font-family:var(--f-disp);font-size:40px;line-height:1;color:var(--paper-2);-webkit-text-stroke:1.5px var(--ink)}
.layer h3{font-size:20px}
.layer:hover,.layer.on{background:var(--ink);color:var(--paper);transform:translateY(-4px)}
.layer.on b{color:var(--red);-webkit-text-stroke:0}
.layer-out{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px;align-items:center;min-height:300px}
.layer-out img{border-radius:18px;aspect-ratio:3/2;object-fit:cover;width:100%}
.layer-out h3{font-size:28px;margin-bottom:10px}

/* past cases */
.past{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;transition:transform .3s var(--ease)}
.pcard:hover{transform:translateY(-5px)}
.pcard .ph{aspect-ratio:16/10;overflow:hidden;background:#222;position:relative}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .ph .bd{position:absolute;left:12px;top:12px;font-size:11px;font-weight:900;border-radius:99px;padding:3px 10px}
.pcard .meta{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{font-size:22px}
.pcard h3 span{font-family:var(--f-mono);font-size:12px;color:var(--mute);font-weight:500;margin-left:6px}
.pcard .sub{font-size:14px;color:var(--mute)}
.pcard .yr{font-family:var(--f-disp);font-size:13px;color:var(--red)}

/* wall marquee */
.wall{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.wall .track{display:flex;gap:12px;width:max-content;animation:marq 90s linear infinite}
.wall .track.rev{animation-direction:reverse;animation-duration:110s;margin-top:12px}
.wall:hover .track{animation-play-state:paused}
.wall img{height:clamp(120px,16vw,200px);width:auto;border-radius:12px}
@keyframes marq{to{transform:translateX(-50%)}}

/* judge game */
.judge{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.judge-stage{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:3/2;background:#000;display:grid;place-items:center}
.judge-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .4s,opacity .4s}
.judge-stage.hidden img{filter:blur(30px) brightness(.3)}
.judge-stage .cd{position:relative;z-index:2;font-family:var(--f-disp);font-size:120px;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.judge-q{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.judge-q button{border:1.5px solid var(--on-night);background:none;color:var(--on-night);border-radius:14px;padding:12px 16px;text-align:left;font-size:16px;font-weight:700}
.judge-q button.ok{background:#3F9E5A;border-color:#3F9E5A}
.judge-q button.no{background:var(--red);border-color:var(--red)}

/* tips cards (judges) */
.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tip{border-radius:20px;padding:24px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;background:var(--ink);color:var(--paper)}
.tip:nth-child(2){background:var(--red);color:#fff}
.tip:nth-child(3){background:#fff;color:var(--ink);border:1px solid var(--line)}
.tip:nth-child(4){background:#1D2B53;color:#fff}
.tip h3{font-size:clamp(22px,2.2vw,30px);line-height:1.25}
.tip p{font-size:14px;opacity:.85;margin:0}

/* todo */
.todo{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.todo label{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;transition:.2s}
.todo input{appearance:none;-webkit-appearance:none;flex:0 0 26px;height:26px;border-radius:50%;border:2px solid var(--ink);margin:0;display:grid;place-items:center;transition:.2s}
.todo input:checked{background:var(--red);border-color:var(--red)}
.todo input:checked::after{content:"✓";color:#fff;font-weight:900;font-size:15px}
.todo label:has(input:checked){background:var(--paper-2)}
.todo label:has(input:checked) span{text-decoration:line-through;opacity:.55}
.todo small{display:block;color:var(--mute);font-size:13px}
.todo-meter{height:10px;border-radius:99px;background:var(--paper-2);overflow:hidden;margin-top:18px}
.todo-meter i{display:block;height:100%;width:0;background:var(--red);transition:width .5s var(--ease)}

.links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.links a{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff;transition:.2s}
.links a:hover{border-color:var(--red);transform:translateY(-2px)}
.links b{font-size:16px}
.links small{font-size:12px;color:var(--mute);word-break:break-all}

.end{min-height:100vh;display:flex;align-items:center;text-align:center}
.end .in{width:100%}

footer{padding:40px var(--pad);font-size:13px;color:var(--on-night-mute);background:var(--night);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .matrix{grid-template-columns:repeat(3,1fr)}
  .tips{grid-template-columns:1fr 1fr}
  .layers{grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto}
  .disc{columns:2}
  .chapters a span{display:none}
}
@media (max-width:820px){
  body{font-size:16px}
  .g2,.g3,.g4,.split,.bob,.judge,.heri,.layer-out{grid-template-columns:1fr}
  .modal .box{grid-template-columns:1fr;padding-top:64px}
  .levels{grid-template-columns:1fr}
  .sdg-grid{grid-template-columns:repeat(4,1fr)}
  .reels{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(4,1fr);row-gap:28px}
  .steps::before,.steps .bar-fill{display:none}
  .team{grid-template-columns:repeat(2,1fr)}
  .coverage{grid-template-columns:repeat(4,1fr)}
  .tl{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .links,.todo{grid-template-columns:1fr}
  .cal-months,.cal-row{grid-template-columns:84px repeat(12,1fr)}
  .cal-row>b{font-size:12px}
  .cal-row .seg{font-size:0;padding:0}
  .disc{columns:1}
  .chapters{display:none}
  .mode{margin-left:auto}
  .hero .dot{right:-30vw;top:30%;width:90vw;opacity:.9}
  .step-detail{grid-template-columns:1fr}
  .pies{grid-template-columns:repeat(5,1fr);gap:6px}
}
@media (max-width:520px){
  .cats{grid-template-columns:1fr 1fr}
  .matrix{grid-template-columns:1fr 1fr}
  .tips{grid-template-columns:1fr}
  .sdg-grid{grid-template-columns:repeat(3,1fr)}
  .reels{grid-template-columns:1fr}
  .brand small{display:none}
}

/* print = 講義 */
@media print{
  .bar,.progress,.deck-ui,.modal,.scroll-cue,.hint,body::before{display:none!important}
  .rv{opacity:1;transform:none}
  .slide{page-break-inside:avoid;padding:40px 24px}
  .night,.redbg{background:#fff!important;color:#111!important}
}
.pies>div{max-width:150px;justify-self:center;width:100%}
.night .tip:nth-child(1){background:var(--night-2);border:1px solid rgba(255,255,255,.14)}
ul.todo{margin-top:32px}
.redbg .grid p{font-size:16px}
.tl.tl5{grid-template-columns:repeat(5,1fr)}
.tabpane{font-size:17px}
@media (max-width:820px){.tl.tl5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){
  .bar{gap:8px}
  .brand{font-size:15px;gap:8px}
  .mode button{padding:4px 10px;font-size:12px}
  .hero .lead br{display:none}
  .stat b{font-size:40px}
}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:820px){.g5{grid-template-columns:1fr 1fr}}

/* ================= v2 additions ================= */
/* brand + hero logo */
.brand .rd-ball{width:22px;height:22px;object-fit:contain}
.hero .dot{display:grid;place-items:center}
.hero .dot .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 70s linear infinite}
.hero .dot .ball{width:66%;height:auto;filter:drop-shadow(0 30px 40px rgba(227,0,27,.18));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(-3deg)}}
.hero-logo{position:relative;z-index:2;width:clamp(150px,16vw,220px);margin-top:36px;display:block}
.rd-logo-h{width:150px;margin-bottom:22px;display:block}
.bd img,.bob-badge img{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.bd.TW{background:#2E8B57;color:#fff}
.bd.CASE{background:#121110;color:#fff}

/* calendar colours */
.cal-row .seg.gp{background:#C9A45C;color:#111}
.cal-row .seg.vtc{background:#7C8CC4}
.cal-row .seg.hs{background:#FF6B6B}
.cal-row .seg.ap{background:#B07A45}
.cal-row .seg.ti{background:#4C9F38}
.cal-row.sep{border-top:2px solid rgba(255,255,255,.35)}

/* winner package */
.pkg{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pkg-col{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px}
.pkg-col.bob{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pkg-h{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.pkg-h img{width:48px;height:48px}
.pkg-h b{font-size:22px;display:block;line-height:1.2}
.pkg-h small{opacity:.65;font-size:13px}
.pkg-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:12px;margin-top:10px}
.pkg-col.bob .pkg-row{border-color:rgba(255,255,255,.15)}
.pkg-name{font-family:var(--f-mono);font-weight:700;letter-spacing:.06em}
.pkg-price{font-family:var(--f-disp);font-size:28px;color:var(--red)}
.pkg-col.bob .pkg-price{color:#ff4d5e}
.pkg ul{margin:8px 0 0;padding-left:1.2em;font-size:15px;line-height:1.7}
.pkg-jr{margin:14px 0 0;background:var(--paper-2);border-radius:12px;padding:10px 14px;font-size:14px}
.calc2{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:14px}
.c2-step{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:12px}
.c2-step h3{font-size:22px;margin-top:-4px}
.c2-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--red);font-weight:700}
.c2-step .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.c2-step label{font-size:14px;font-weight:700}
.c2-step .chk{font-weight:500;display:flex;gap:8px;align-items:flex-start;line-height:1.5}
.c2-step .chk input{accent-color:var(--red);margin-top:4px}
.c2-out{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.c2-out .c2-n{color:#ff4d5e}
.stepper{display:inline-flex;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden}
.stepper button{border:0;background:none;width:36px;font-size:18px;font-weight:900}
.stepper button:hover{background:var(--paper-2)}
.stepper input{width:46px;border:0;text-align:center;font:inherit;font-weight:900;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.rate{width:76px;font:inherit;border:1px solid rgba(255,255,255,.3);background:transparent;color:inherit;border-radius:8px;padding:4px 8px}
.bill{width:100%;border-collapse:collapse;font-size:13px}
.bill td{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top}
.bill td:nth-child(2),.bill td:nth-child(3){text-align:right;white-space:nowrap;padding-left:8px;font-family:var(--f-mono)}
.c2-out .total{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.c2-out .total b{font-family:var(--f-disp);font-size:clamp(32px,3.4vw,48px);color:#ff4d5e;line-height:1}
.scen{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.scen button{border:1.5px solid var(--ink);background:none;border-radius:99px;padding:6px 14px;font-size:14px;font-weight:700}
.scen button.on,.scen button:hover{background:var(--ink);color:var(--paper)}

/* compare cards */
.cmp{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:start}
.cmp-keys{display:flex;flex-direction:column;gap:4px;position:sticky;top:80px}
.cmp-keys button{border:0;background:none;text-align:left;padding:9px 14px;border-radius:12px;font-weight:700;font-size:15px;color:var(--mute)}
.cmp-keys button.on{background:var(--ink);color:var(--paper)}
.cmp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cmp-card{background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.cmp-top{display:flex;gap:12px;align-items:center;padding:18px 18px 16px;border-top:8px solid var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,#fff),#fff)}
.cmp-top img,.cmp-top i{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--c)}
.cmp-top img{background:none}
.cmp-top h3{font-size:19px;line-height:1.25}
.cmp-top small{font-size:11px;color:var(--mute);line-height:1.3;display:block;margin-top:2px}
.cmp-row{padding:12px 18px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;transition:background .25s}
.cmp-row em{display:block;font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--mute);margin-bottom:2px}
.cmp-row.hl{background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:inset 4px 0 0 var(--c)}
.cmp-row.hl span{font-weight:700}
.cmp-big{display:block;font-family:var(--f-disp);font-size:24px;line-height:1.15;color:var(--c)}
.cmp-link{margin-top:auto;padding:12px 18px;font-weight:900;text-decoration:none;border-top:1px solid var(--line);color:var(--c)}

/* domestic */
.who-toggle{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700}
.who-toggle button{border:1.5px solid var(--ink);background:none;border-radius:99px;padding:8px 18px;font-weight:900}
.who-toggle button.on{background:var(--red);border-color:var(--red);color:#fff}
.dom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.dom{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:opacity .35s,transform .35s,filter .35s}
.dom.dim{opacity:.25;filter:grayscale(1);transform:scale(.98)}
.dom-h{padding:20px;background:var(--c);color:#fff}
.dom-h h3{font-size:22px;margin-top:10px;line-height:1.3}
.dom-h small{opacity:.85;font-size:12px}
.wtag{display:inline-block;font-size:12px;font-weight:900;border-radius:99px;padding:2px 10px;margin:0 4px 4px 0;background:rgba(255,255,255,.92);color:#111}
.wtag.hs{background:#fff;color:var(--red)}
.wtag.free{background:#121110;color:#fff}
.dom dl{margin:0;padding:6px 20px 10px;display:grid;grid-template-columns:44px 1fr;gap:8px 10px;font-size:14px;line-height:1.6}
.dom dt{font-weight:900;color:var(--c);padding-top:1px}
.dom dd{margin:0}
.dom a{margin-top:auto;padding:12px 20px;border-top:1px solid var(--line);font-weight:900;text-decoration:none;color:var(--c)}
.hs-flow{display:grid;gap:10px}
.hs-flow>div{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.hs-flow>div.r{background:var(--red);color:#fff;border-color:var(--red)}
.hs-flow b{grid-row:span 2;font-family:var(--f-disp);font-size:30px;color:var(--red);line-height:1}
.hs-flow>div.r b{color:#fff}
.hs-flow h3{font-size:19px}
.hs-flow p{margin:0;font-size:14px;line-height:1.6;opacity:.85}

/* finder */
.finder{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.f-q>span{display:block;font-weight:900;margin-bottom:10px;color:var(--on-night-mute)}
.f-q .chip{font-size:15px;padding:8px 16px}
.f-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:10px}
.f-card{background:var(--night-2);border:1px solid rgba(255,255,255,.1);border-top:6px solid var(--c);border-radius:18px;padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:8px;transition:transform .25s}
.f-card:hover{transform:translateY(-4px)}
.f-card h3{font-size:19px}
.f-card p{margin:0;font-size:14px;line-height:1.7}
.f-card p b{color:#F6C445}
.f-card small{color:var(--on-night-mute);font-size:12px}
.f-tag{align-self:flex-start;font-size:11px;font-weight:900;background:var(--c);color:#fff;border-radius:99px;padding:2px 10px}

/* photo sort */
.psort{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;margin-top:12px}
.ps-stage{position:relative;border-radius:22px;overflow:hidden;background:#111;aspect-ratio:16/10}
.ps-stage img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
.ps-btns{display:flex;flex-direction:column;gap:10px}
.ps-btns button{border:1.5px solid var(--ink);background:#fff;border-radius:14px;padding:14px 18px;font-size:17px;font-weight:900;text-align:left}
.ps-btns button.ok{background:#3F9E5A;border-color:#3F9E5A;color:#fff}
.ps-btns button.no{background:var(--red);border-color:var(--red);color:#fff}
.ps-msg{font-weight:700;min-height:56px;margin:14px 0 0}

/* past explorer */
.pfilter{display:grid;gap:10px;margin:24px 0 8px}
.pfilter>div{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pfilter>div>span{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;font-weight:700;width:40px;color:var(--mute)}
.pf{display:flex;flex-wrap:wrap;gap:6px}
.pf button{border:1.5px solid var(--ink);background:none;border-radius:99px;padding:5px 14px;font-size:14px;font-weight:700}
.pf button.on{background:var(--ink);color:var(--paper)}
.pcard.hide{display:none}
.pcard .pn{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;border-radius:99px;padding:2px 10px;font-family:var(--f-mono)}
.ptopic{margin:4px 0 0;font-size:14px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ptags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ptags span{font-size:11px;border:1px solid var(--line);border-radius:99px;padding:1px 9px}

/* lens */
.lens-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.lens-tabs button{border:1.5px solid var(--ink);background:none;border-radius:99px;padding:8px 18px;font-weight:900}
.lens-tabs button.on{background:var(--red);border-color:var(--red);color:#fff}
.lens-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-height:72vh;overflow-y:auto;padding-right:6px}
.lens-item{display:grid;grid-template-columns:120px 1fr;gap:14px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;transition:border-color .2s}
.lens-item:hover{border-color:var(--red)}
.lens-item img{width:120px;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.lens-item b{font-size:17px}
.lens-item small{margin-left:8px;color:var(--red);font-family:var(--f-disp);font-size:12px}
.lens-item p{margin:4px 0 0;font-size:14px;line-height:1.65}

/* naming flips */
.names{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nflip{perspective:1000px;background:none;border:0;padding:0;text-align:left;min-height:200px}
.nflip .f{position:relative;width:100%;min-height:200px;height:100%;transition:transform .7s var(--ease);transform-style:preserve-3d}
.nflip.on .f{transform:rotateY(180deg)}
.nflip .a,.nflip .b{position:absolute;inset:0;border-radius:18px;padding:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between}
.nflip .a{background:var(--night-2);border:1px solid rgba(255,255,255,.12)}
.nflip .a small{font-family:var(--f-mono);font-size:11px;color:var(--on-night-mute);letter-spacing:.06em}
.nflip .a h3{font-size:clamp(34px,3.6vw,52px);line-height:1.1}
.nflip .a span{font-size:12px;color:var(--on-night-mute)}
.nflip .b{background:var(--red);color:#fff;transform:rotateY(180deg);font-size:14px;line-height:1.65}
.nflip .b p{margin:6px 0;overflow:auto}
.nlink{font-weight:900;text-decoration:underline;cursor:pointer}

/* guess */
.guess{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
.g-work img{border-radius:18px;aspect-ratio:3/2;object-fit:cover;width:100%;cursor:zoom-in}
.g-work h3{font-size:30px;margin-top:14px}
.g-work p{font-size:14px;line-height:1.65}
.g-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.g-cats button{border:1px solid rgba(255,255,255,.2);background:var(--night-2);color:var(--on-night);border-radius:10px;padding:8px 10px;text-align:left;font-size:13px;font-weight:700;line-height:1.3}
.g-cats button b{display:block;font-family:var(--f-disp);font-size:11px;color:var(--on-night-mute)}
.g-cats button.on{background:var(--on-night);color:var(--ink)}
.g-cats button.ans{background:#3F9E5A;border-color:#3F9E5A;color:#fff}
.g-cats button.miss{background:var(--red);border-color:var(--red);color:#fff;text-decoration:line-through}
.g-msg{margin-top:14px;font-weight:700;line-height:1.7}

/* story */
.story-out{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px;align-items:center;min-height:280px}
.story-out img{border-radius:18px;aspect-ratio:3/2;object-fit:cover;width:100%;cursor:zoom-in}
.story-out h3{font-size:28px;margin-bottom:8px}
#ssteps .step b{font-size:14px}

/* zoom affordances */
[data-zoom],.modal .stage img,.bob-img{cursor:zoom-in}
.modal .stage{position:relative}
.zoom-btn{position:absolute;right:12px;bottom:12px;border:0;background:rgba(255,255,255,.92);color:#111;border-radius:99px;padding:7px 14px;font-weight:900;font-size:13px;z-index:2}

/* lightbox */
.lb{position:fixed;inset:0;z-index:500;background:rgba(8,8,8,.97);display:none;color:#fff;touch-action:none}
.lb.open{display:block}
.lb-view{position:absolute;inset:0 0 58px;display:grid;place-items:center;overflow:hidden;cursor:zoom-in}
.lb.zoomed .lb-view{cursor:grab}
.lb.zoomed .lb-view:active{cursor:grabbing}
.lb-img{max-width:94vw;max-height:calc(100vh - 90px);object-fit:contain;transform-origin:center center;user-select:none;-webkit-user-drag:none;pointer-events:none;transition:filter .3s}
.lb.loading .lb-img{filter:blur(2px)}
.lb-bar{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#000;border-top:1px solid rgba(255,255,255,.1)}
.lb-title{font-weight:900;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-count,.lb-pct{font-family:var(--f-mono);font-size:13px;opacity:.75;min-width:48px;text-align:center}
.lb-bar button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:none;color:#fff;font-size:18px}
.lb-bar button:hover{background:rgba(255,255,255,.12)}
.lb-bar .lb-x{background:var(--red);border-color:var(--red)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#111;font-size:26px;z-index:2}
.lb-nav.p{left:16px}.lb-nav.n{right:16px}
.lb.single .lb-nav{display:none}
.lb.zoomed .lb-nav,.lb.zoomed .lb-hint{opacity:0;pointer-events:none}
.lb-hint{position:absolute;left:50%;top:14px;transform:translateX(-50%);margin:0;font-size:12px;background:rgba(0,0,0,.6);padding:6px 14px;border-radius:99px;opacity:.8;transition:opacity .3s;white-space:nowrap}

@media (max-width:1080px){
  .calc2{grid-template-columns:1fr 1fr}.c2-out{grid-column:span 2}
  .cmp{grid-template-columns:1fr}
  .cmp-keys{flex-direction:row;flex-wrap:wrap;position:static}
  .names{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .pkg,.calc2,.finder,.psort,.guess,.story-out,.lens-list{grid-template-columns:1fr}
  .c2-out{grid-column:auto}
  .cmp-cards{grid-template-columns:1fr}
  .g-cats{grid-template-columns:repeat(2,1fr)}
  .lb-hint{display:none}
  .lb-nav{width:42px;height:42px}
  .hero .dot .ball{width:60%}
  #ssteps{grid-template-columns:repeat(4,1fr)!important}
}
@media (max-width:520px){.names{grid-template-columns:1fr}.dom-grid{grid-template-columns:1fr}.lens-item{grid-template-columns:90px 1fr}.lens-item img{width:90px}}
.pcard .ph img{width:auto;height:auto}
.pcard .ph>img{width:100%;height:100%;object-fit:cover}
.bd img{width:14px!important;height:14px!important;object-fit:contain!important;display:inline-block}
.hero-logo{width:clamp(120px,11vw,160px);margin:0 0 26px}
.modal .box>div{min-width:0}
.modal .tabs{flex-wrap:wrap}
body.deck .slide>.in{min-width:0;max-width:min(var(--max),100%)}
body.deck main{overflow-x:hidden}

/* ===== v3 bright palette ===== */
:root{--blue:#2F5BFF;--yellow:#FFD43B;--pink:#FF4F9A;--mint:#00BFA6;--orange:#FF7A1A}
.yellowbg{background:var(--yellow);color:var(--ink)}
.yellowbg .kicker::before{background:var(--red)}
.yellowbg .quote{color:var(--ink)}
.yellowbg .quote em{color:var(--red)}
/* Venn */
.venn .v1{background:var(--red)}
.venn .v2{background:var(--blue)}
.venn .v3{background:var(--yellow);color:var(--ink)}
/* flip cards */
.flip .a{background:var(--red);color:#fff}
.flip:nth-child(2) .a{background:var(--blue)}
.flip:nth-child(3) .a{background:var(--yellow);color:var(--ink)}
.flip:nth-child(4) .a{background:var(--mint)}
.flip .b{background:var(--ink);color:var(--paper)}
/* three directions */
.dir.a{background:var(--red)}
.dir.b{background:var(--blue)}
.dir.c{background:var(--yellow);color:var(--ink)}
.dir.c .eg{background:rgba(0,0,0,.08)}

/* ===== modal thumbnail rail ===== */
.tw{position:relative;margin-top:12px}
.modal .tw .thumbs{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px;margin:0;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
.modal .tw .thumbs::-webkit-scrollbar{display:none}
.modal .tw .thumbs.dragging{cursor:grabbing;scroll-behavior:auto}
.modal .tw .thumbs.dragging img{pointer-events:none}
.tw.at-start .thumbs{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent 100%)}
.tw.at-end .thumbs{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 100%)}
.tw.at-start.at-end .thumbs,.tw.no-scroll .thumbs{-webkit-mask-image:none;mask-image:none}
.modal .tw .thumbs button{flex:0 0 96px;border-radius:10px;opacity:.45;transition:opacity .25s,transform .25s,outline-color .25s;outline:2px solid transparent;outline-offset:2px}
.modal .tw .thumbs button:hover{opacity:.85;transform:translateY(-2px)}
.modal .tw .thumbs button.on{opacity:1;outline-color:var(--red)}
.tw-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#111;font-size:18px;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:opacity .25s,transform .25s}
.tw-btn:hover{transform:translateY(-50%) scale(1.08)}
.tw-btn.l{left:-6px}.tw-btn.r{right:-6px}
.tw.at-start .tw-btn.l,.tw.at-end .tw-btn.r,.tw.no-scroll .tw-btn{opacity:0;pointer-events:none}
.tw-meta{display:flex;align-items:center;gap:12px;margin-top:10px}
.tw-bar{position:relative;flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.tw-bar i{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:var(--red);transition:left .15s linear,width .2s}
.tw.no-scroll+.tw-meta .tw-bar{visibility:hidden}
.tw-num{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;color:var(--on-night-mute);white-space:nowrap}
@media (max-width:820px){.modal .tw .thumbs button{flex-basis:76px}.tw-btn{display:none}}
/* thin themed scrollbars elsewhere */
.lens-list,.table-wrap,.modal{scrollbar-width:thin;scrollbar-color:var(--red) transparent}
.lens-list::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.modal::-webkit-scrollbar{width:6px;height:6px}
.lens-list::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{background:var(--red);border-radius:99px}
.lens-list::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track{background:transparent}
/* Venn = CMY（multiply 疊色：C+M=藍、M+Y=紅、C+Y=綠、三色＝黑） */
.venn .v1{background:#E4007F;color:#fff}
.venn .v2{background:#00A0E9;color:#fff}
.venn .v3{background:#FFF100;color:var(--ink)}

/* ================= v4 interactions ================= */
/* thumb chips */
.tstrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.tchip{display:flex;flex-direction:column;gap:6px;border:0;background:none;padding:0;width:150px;text-align:left;font-weight:700;font-size:14px;color:inherit;transition:transform .25s}
.tchip:hover{transform:translateY(-4px)}
.tchip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.tstrip.sm .tchip{width:118px;font-size:12px}
.tchip.txt{width:auto;padding:8px 14px;border:1px solid currentColor;border-radius:99px;opacity:.8;justify-content:center}
@keyframes popin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.tstrip>*{animation:popin .5s var(--ease) both}
.tstrip>*:nth-child(2){animation-delay:.05s}.tstrip>*:nth-child(3){animation-delay:.1s}.tstrip>*:nth-child(4){animation-delay:.15s}.tstrip>*:nth-child(5){animation-delay:.2s}.tstrip>*:nth-child(6){animation-delay:.25s}.tstrip>*:nth-child(7){animation-delay:.3s}.tstrip>*:nth-child(n+8){animation-delay:.35s}

/* quad */
.quad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.quad-vis{position:relative;width:min(100%,440px);aspect-ratio:1;margin:auto}
.qc{position:absolute;width:56%;aspect-ratio:1;border-radius:50%;border:2.5px dashed rgba(18,17,16,.35);background:rgba(255,255,255,.45);font-weight:900;font-size:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .45s var(--ease);mix-blend-mode:multiply;color:var(--ink)}
.qc b{font-family:var(--f-disp);font-size:.7em;opacity:.6}
.q1{left:0;top:0;padding:0 20% 20% 0}.q2{right:0;top:0;padding:0 0 20% 20%}.q3{left:0;bottom:0;padding:20% 20% 0 0}.q4{right:0;bottom:0;padding:20% 0 0 20%}
.qc.focus{border-style:solid;border-color:var(--ink);transform:scale(1.04)}
.qc.on{border:0;color:#fff}
.q1.on{background:var(--red)}.q2.on{background:var(--blue)}.q3.on{background:var(--yellow);color:var(--ink)}.q4.on{background:var(--mint)}
.q-core{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-content:center;font-family:var(--f-disp);font-size:clamp(16px,2vw,24px);z-index:2;transition:all .5s var(--ease)}
.quad.full .q-core{background:var(--ink);color:#fff;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 12px rgba(227,0,27,.18),0 0 0 26px rgba(227,0,27,.08);animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(227,0,27,.12),0 0 0 36px rgba(227,0,27,.04)}}
.quad-panel h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:4px}
.q-in{width:100%;font:inherit;font-size:18px;font-weight:700;border:0;border-bottom:2.5px solid var(--ink);background:transparent;padding:10px 2px;margin:8px 0 14px;outline:none}
.q-in:focus{border-color:var(--red)}
.q-chips .chip{font-size:15px;padding:7px 15px}
.q-sum{margin-top:18px;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:17px;line-height:1.9}
.q-sum mark{background:var(--yellow);padding:0 6px;border-radius:4px;font-weight:900}
.q-sum u{opacity:.4;text-decoration:none}
.q-ok{display:block;margin-top:8px;color:var(--red);animation:popin .5s var(--ease)}

/* directions */
#dirs .dir{border:0;text-align:left;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,opacity .3s;font:inherit}
#dirs .dir:hover{transform:translateY(-6px)}
#dirs .dir.on{transform:translateY(-6px);box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--ink)}
#dirs .dir.ok{box-shadow:0 0 0 4px var(--paper),0 0 0 8px #3F9E5A}
#dirs .dir.no{opacity:.45}
.dir-out{min-height:150px;margin-top:8px}
.dq{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center;margin-top:14px;animation:popin .5s var(--ease)}
.dq img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.dq h3{font-size:28px}
.dq-msg{font-weight:900;color:var(--red)}

/* power */
.gen-box{background:var(--ink);color:var(--paper);border-radius:26px;padding:26px}
.gen-box .q-in{color:#fff;border-color:rgba(255,255,255,.4)}
.gen-box .q-in::placeholder{color:rgba(255,255,255,.4)}
.pw-sw{display:grid;gap:10px}
.pw-sw button{display:grid;grid-template-columns:52px 1fr;gap:2px 14px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.14);background:var(--night-2);color:var(--paper);border-radius:16px;padding:12px 14px;transition:all .3s}
.pw-sw i{grid-row:span 2;width:52px;height:28px;border-radius:99px;background:rgba(255,255,255,.18);position:relative;transition:background .3s}
.pw-sw i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)}
.pw-sw button.on{border-color:var(--yellow)}
.pw-sw button.on i{background:var(--yellow)}
.pw-sw button.on i::after{transform:translateX(24px)}
.pw-sw b{font-size:18px}
.pw-sw small{font-size:13px;opacity:.7}
.pw-meter{display:grid;grid-template-columns:76px 1fr;gap:6px 18px;align-items:center;margin-top:18px}
.bulb{grid-row:span 2;width:76px;height:76px}
.bulb svg{width:100%;height:100%;fill:#3a3733;transition:fill .4s,filter .4s}
.bulb.l1 svg{fill:#7a6a2a}.bulb.l2 svg{fill:#c9a72a}
.bulb.l3 svg{fill:var(--yellow);filter:drop-shadow(0 0 18px rgba(255,212,59,.9)) drop-shadow(0 0 40px rgba(255,212,59,.6));animation:flick 1.8s infinite}
@keyframes flick{50%{filter:drop-shadow(0 0 26px rgba(255,212,59,1)) drop-shadow(0 0 60px rgba(255,212,59,.7))}}
.pw-bars{display:flex;gap:6px}
.pw-bars i{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.14);transition:background .4s}
.pw-bars i.on{background:var(--yellow)}
#pw-msg{margin:0;font-size:15px}
.gags{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px}
.gag{perspective:900px;border:0;background:none;padding:0;min-height:190px;text-align:left}
.gag .f{position:relative;width:100%;height:100%;min-height:190px;transition:transform .7s var(--ease);transform-style:preserve-3d}
.gag.on .f{transform:rotateY(180deg)}
.gag .a,.gag .b{position:absolute;inset:0;border-radius:18px;padding:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between}
.gag .a{background:#fff;border:1.5px solid var(--ink)}
.gag .a b{font-size:21px;line-height:1.3}
.gag .a small,.gag .b small{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--red)}
.gag .a span{font-size:12px;color:var(--mute)}
.gag .b{transform:rotateY(180deg);background-size:cover;background-position:center;color:#fff;justify-content:flex-end}
.gag .b small{color:var(--yellow)}
.gag .b b{font-size:15px;line-height:1.45}
.gag:nth-child(6n+1) .a{border-color:var(--red)}.gag:nth-child(6n+2) .a{border-color:var(--blue)}.gag:nth-child(6n+3) .a{border-color:#d9b300}.gag:nth-child(6n+4) .a{border-color:var(--mint)}

/* naming 4 */
.nm4{position:relative;width:min(100%,420px);aspect-ratio:1;margin:auto}
.nm4::before{content:"";position:absolute;inset:12%;border-radius:50%;border:2px solid var(--red);animation:spin 40s linear infinite;border-style:dashed}
.nm4-core{position:absolute;inset:32%;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-content:center;text-align:center;font-weight:900;font-size:clamp(20px,2.4vw,28px);line-height:1.2}
.nm4-b{position:absolute;transform:translate(-50%,-50%);border:2px solid var(--ink);background:var(--paper);border-radius:99px;padding:8px 16px;font-weight:900;font-size:15px;white-space:nowrap;transition:all .3s var(--ease)}
.nm4-b.t{left:50%;top:8%}.nm4-b.b{left:50%;top:92%}.nm4-b.l{left:14%;top:50%}.nm4-b.r{left:86%;top:50%}
.nm4-b:hover,.nm4-b.on{background:var(--red);border-color:var(--red);color:#fff;transform:translate(-50%,-50%) scale(1.08)}
.nm4-out{text-align:center;color:var(--mute);min-height:60px;margin-top:10px}

/* matrix pick */
#matrix li{cursor:pointer;border-radius:6px;padding:1px 4px;margin-left:-4px;transition:background .2s,color .2s;list-style:none;position:relative}
#matrix ul{padding-left:0}
#matrix li::before{content:"○ ";color:var(--mute)}
#matrix li.on{background:var(--red);color:#fff}
#matrix li.on::before{content:"● ";color:#fff}
.mx-out{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:14px;padding:14px 18px;background:var(--ink);color:var(--paper);border-radius:16px}
.mx-n{font-family:var(--f-disp);font-size:40px;color:var(--yellow);line-height:1}
.mx-out em{font-style:normal;font-size:12px;background:rgba(255,255,255,.12);border-radius:99px;padding:2px 9px;margin-left:6px}
.mx-out p{flex-basis:100%;margin:0;font-weight:700}

/* personality toggle */
.pc-card{background:var(--ink);color:var(--paper);border-radius:20px;padding:18px 20px;transition:background .4s}
.pc-card.alt{background:var(--blue)}
.pc-sw{display:inline-flex;background:rgba(255,255,255,.12);border-radius:99px;padding:3px;margin-bottom:12px}
.pc-sw button{border:0;background:none;color:inherit;border-radius:99px;padding:6px 14px;font-weight:900;font-size:14px}
.pc-sw button.on{background:var(--yellow);color:var(--ink)}
.pc-body{animation:popin .45s var(--ease)}
.pc-body h4{margin:0 0 4px;font-size:20px;color:var(--yellow)}
.pc-card.alt .pc-body h4{color:#fff}
.pc-body p{margin:0 0 10px;font-size:15px}
.pc-body span{display:inline-block;font-size:13px;border:1px solid rgba(255,255,255,.35);border-radius:99px;padding:2px 10px;margin:0 6px 6px 0}

/* team check */
.level.t4{cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s}
.level.t4:hover{transform:translateY(-5px)}
.level.t4::after{content:"";position:absolute;right:16px;top:16px;width:30px;height:30px;border-radius:50%;border:2.5px solid currentColor;opacity:.5;transition:all .3s}
.level.t4.chk::after{content:"✓";opacity:1;background:#3F9E5A;border-color:#3F9E5A;color:#fff;display:grid;place-items:center;font-weight:900}
.level.t4.chk{box-shadow:0 0 0 4px #3F9E5A}
.t4-meter{display:flex;align-items:center;gap:16px;margin-top:22px}
.t4-bar{flex:1;max-width:420px;height:12px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.t4-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--yellow),#3F9E5A);transition:width .5s var(--ease)}

/* checklist toggle */
.checklist li{cursor:pointer;transition:opacity .25s}
.checklist li.done{opacity:.55}
.checklist li.done::before{background:var(--red);content:"✓";color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900}
.checklist li.done span,.checklist li.done{text-decoration:line-through}
.cl-meter{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;margin-top:12px}
.cl-meter span{flex:1;max-width:260px;height:6px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.night .cl-meter span{background:rgba(255,255,255,.14)}
.cl-meter i{display:block;height:100%;background:var(--red);transition:width .4s}

/* rd3 / levels */
.rd3{margin-top:10px}.rd3 .chip{font-size:15px;padding:7px 15px}
.rd3-out{min-height:52px;margin-top:10px;font-weight:700;animation:popin .4s}
.level.lvb{cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s}
.level.lvb:hover{transform:translateY(-5px)}
.level.lvb.sel{box-shadow:0 0 0 4px var(--paper-2),0 0 0 8px var(--red)}
.lv-out{min-height:170px;margin-top:18px}
.gp-empty{width:110px;height:110px;border-radius:50%;border:3px dashed var(--red);display:grid;place-items:center;font-family:var(--f-disp);font-size:48px;color:var(--red);animation:pulse 1.6s infinite}

/* cubes */
.cube{border:0;cursor:pointer;transition:transform .3s var(--ease)}
.cube:hover{transform:translateY(-6px) rotate(-3deg)}
.cube.sel{transform:translateY(-6px) scale(1.06);box-shadow:inset 0 -10px 0 rgba(0,0,0,.18),0 0 0 3px var(--night),0 0 0 6px #F6C445}
.cube.m{color:var(--on-night)}
.cube-out{min-height:150px;margin-top:14px}

/* countdown */
.cd-wrap{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 6px}
.cd{background:var(--ink);color:var(--paper);border-radius:18px;padding:14px 20px}
.cd small{display:block;font-size:12px;color:var(--on-night-mute);margin-bottom:4px}
.cd b{font-family:var(--f-disp);font-size:clamp(26px,3vw,40px);color:var(--yellow);line-height:1}
.cd i{font-style:normal;font-size:12px;margin:0 10px 0 4px;opacity:.7}

/* disciplines */
.disc .dbtn{cursor:pointer;border-radius:8px;padding-left:8px;padding-right:8px;transition:background .2s}
.disc .dbtn:hover{background:rgba(255,255,255,.06)}
.disc .dbtn.sel{background:#F6C445;color:var(--ink)}
.disc-out{min-height:150px;margin-top:16px}

/* CA carousel */
.ca-car{position:relative;aspect-ratio:16/10;background:#111;overflow:hidden;cursor:zoom-in}
.ca-car img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1s,transform 4s ease-out}
.ca-car img.on{opacity:1;transform:scale(1)}
.ca-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.ca-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:all .3s}
.ca-dots i.on{background:#fff;width:20px;border-radius:99px}

/* hs flow */
#hs-flow>div{cursor:pointer;transition:all .4s var(--ease);opacity:.55}
#hs-flow>div.act{opacity:1}
#hs-flow>div.cur{transform:translateX(10px);box-shadow:-6px 0 0 var(--red)}
#hs-flow>div.r.cur{box-shadow:-6px 0 0 var(--ink)}

/* tips flip */
.tipf{perspective:1000px;border:0;background:none;padding:0;text-align:left;min-height:240px}
.tipf .f{position:relative;width:100%;height:100%;min-height:240px;transition:transform .7s var(--ease);transform-style:preserve-3d}
.tipf.on .f{transform:rotateY(180deg)}
.tipf .tip{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tipf .tip.b{transform:rotateY(180deg);background-size:cover;background-position:center;color:#fff;justify-content:flex-end}
.tipf .tip.b p{font-size:15px;opacity:1;font-weight:700;line-height:1.6}
.tipf:nth-child(1) .tip.a{background:var(--night-2);border:1px solid rgba(255,255,255,.14);color:var(--paper)}
.tipf:nth-child(2) .tip.a{background:var(--red);color:#fff}
.tipf:nth-child(3) .tip.a{background:var(--yellow);color:var(--ink);border:0}
.tipf:nth-child(4) .tip.a{background:var(--blue);color:#fff}
.tipf .tip.a::after{content:"TAP →";position:absolute;right:18px;bottom:16px;font-family:var(--f-mono);font-size:11px;opacity:.6}

/* common */
.cmb{cursor:pointer;border-radius:18px;padding:14px;margin:-14px;transition:background .3s}
.cmb:hover,.cmb.sel{background:rgba(255,255,255,.14)}
.cmb.sel .num{color:var(--yellow)}
.cm-out{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:center;margin-top:32px;animation:popin .5s var(--ease)}
.cm-out img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:18px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}

/* passion burst */
#end{overflow:hidden}
.burst{position:absolute;pointer-events:none;z-index:5;animation:burst 1.7s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes burst{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 260px)) scale(1) rotate(var(--rt));opacity:0}}

/* chapter toc jump */
.toc-mini span.go{cursor:pointer;transition:all .25s}
.toc-mini span.go:hover{background:var(--red);border-color:var(--red);color:#fff;opacity:1;transform:translateY(-2px)}
.ch-num,.hero .dot{transition:transform .6s ease-out}

@media (max-width:1080px){.gags{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.quad,.cm-out{grid-template-columns:1fr}.dq{grid-template-columns:1fr}.gags{grid-template-columns:repeat(2,1fr)}.tchip{width:130px}}
body.deck .slide{flex-direction:column;justify-content:center}
body.deck .slide>.in+.in{margin-top:32px}
.quad-vis{width:min(100%,380px)}
.bulb svg{fill:#4a4640}

/* ================= v5 ================= */
.v-done{margin-top:14px;padding:14px 16px;border-radius:16px;background:#fff;border:2px solid var(--red);animation:popin .5s var(--ease)}
.v-done .tchip{margin-top:10px;width:150px}

/* career quiz */
.cq-prog{display:flex;gap:6px;margin-top:20px}
.cq-prog i{width:40px;height:6px;border-radius:99px;background:var(--paper-2);transition:background .3s}
.cq-prog i.cur{background:var(--ink)}.cq-prog i.done{background:var(--red)}
.cq{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;min-height:380px;animation:popin .4s var(--ease)}
.cq-q{font-size:clamp(22px,2.4vw,30px);margin-bottom:16px}
.cq-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cq-opts button{border:1.5px solid var(--ink);background:none;border-radius:14px;padding:14px;font-weight:700;font-size:16px;text-align:left;transition:all .2s}
.cq-opts button:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)}
.cq-back{border:0;background:none;margin-top:14px;color:var(--mute);font-weight:700}
.cq-res{border-left:8px solid var(--c);padding-left:18px;animation:popin .5s var(--ease)}
.cq-res h3{font-size:clamp(30px,3.4vw,44px);color:var(--c);line-height:1.1}
.cq-res h3 small{display:block;font-family:var(--f-mono);font-size:13px;color:var(--mute);letter-spacing:.08em;margin-top:4px}
.cq-res p{margin:8px 0}
.cq-res dl{display:grid;grid-template-columns:86px 1fr;gap:6px 12px;font-size:14px;margin:12px 0}
.cq-res dt{font-weight:900;color:var(--c)}
.cq-res dd{margin:0}
.cq-res dd span{display:inline-block;background:var(--paper-2);border-radius:99px;padding:1px 10px;margin:0 4px 4px 0;font-size:13px}

/* eyes */
.lv-badge{display:flex;gap:18px;align-items:center;margin-top:24px;background:var(--ink);color:var(--paper);border-radius:22px;padding:18px 22px;max-width:460px}
.lvb-ring{--p:0;flex:0 0 96px;height:96px;border-radius:50%;background:conic-gradient(var(--red) calc(var(--p)*1%),rgba(255,255,255,.14) 0);display:grid;place-content:center;text-align:center;position:relative;transition:background .5s}
.lvb-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--ink)}
.lvb-ring b,.lvb-ring small{position:relative;z-index:1}
.lvb-ring b{font-family:var(--f-disp);font-size:30px;line-height:1;color:var(--yellow)}
.lvb-ring small{font-size:12px;opacity:.7}
.lv-badge small{font-size:12px;opacity:.7}
.lv-badge h3{font-size:26px;color:var(--yellow)}
.lv-badge p{margin:4px 0 0;font-size:14px}
.lv-badge .note{color:var(--on-night-mute)}
.eye-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.eye-tabs button{border:2px solid var(--ink);background:none;border-radius:99px;padding:8px 16px;font-weight:900}
.eye-tabs button.on{background:var(--ink);color:var(--yellow)}
.eye-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.eye-list li{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:16px;padding:14px 16px;cursor:pointer;transition:transform .2s,opacity .2s;animation:popin .4s var(--ease) both}
.eye-list li:hover{transform:translateX(4px)}
.eye-list li i{flex:0 0 26px;height:26px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;margin-top:2px}
.eye-list li.done i{background:var(--red);border-color:var(--red)}
.eye-list li.done i::after{content:"✓";color:#fff;font-style:normal;font-weight:900;font-size:14px}
.eye-list li.done b{text-decoration:line-through;opacity:.6}
.eye-list b{display:block;font-size:17px}
.eye-list span{font-size:14px;color:var(--ink-2)}
.eye-list a{color:var(--red);font-weight:900}

/* heritage */
.heri .chip em{font-style:normal;font-size:11px;background:var(--red);color:#fff;border-radius:99px;padding:0 7px;margin-left:6px;vertical-align:2px}
.heri-out{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;margin-top:24px;background:var(--night-2);border-radius:22px;padding:24px;min-height:220px;animation:popin .4s var(--ease)}
.heri-out h3{font-size:30px;color:var(--yellow)}
.ho-empty{height:100%;min-height:150px;border:2px dashed rgba(255,255,255,.25);border-radius:18px;display:grid;place-content:center;text-align:center;gap:4px}
.ho-empty b{font-size:22px;color:var(--yellow)}
.heri-out .tchip{color:var(--on-night)}

/* generator */
.gsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.gsteps span{background:#fff;border-radius:14px;padding:10px 12px;font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center}
.gsteps b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-family:var(--f-disp);font-size:13px}
.gen-ref{margin-top:14px}
.gen-ref .tchip{color:var(--on-night)}
.cand{margin-top:20px}
.cand-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.cand-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:16px;animation:popin .4s var(--ease);transition:border-color .3s,box-shadow .3s}
.cand-card.best{border-color:var(--red);box-shadow:0 10px 30px -14px rgba(227,0,27,.5)}
.cand-h{display:flex;align-items:baseline;gap:10px}
.cand-h b{font-family:var(--f-disp);font-size:34px;color:var(--red);line-height:1}
.cand-h b small{font-size:14px;color:var(--mute)}
.cand-h span{font-size:13px;font-weight:900;background:var(--red);color:#fff;border-radius:99px;padding:2px 10px}
.cand-x{margin-left:auto;border:0;background:var(--paper-2);border-radius:50%;width:28px;height:28px;font-size:16px}
.cand-card p{font-weight:700;font-size:15px;margin:8px 0}
.cand-card label{display:flex;gap:8px;font-size:14px;padding:3px 0;cursor:pointer}
.cand-card input{accent-color:var(--red)}
.cand-tip{margin-top:12px;font-weight:700;color:var(--red)}

/* power v2 */
.pw-l{display:block;font-size:13px;font-weight:900;color:var(--yellow);margin-top:6px}
.gen-box .q-in{margin:4px 0 10px;font-size:16px}
.pw-sel{width:100%;font:inherit;font-size:15px;padding:10px 12px;border-radius:12px;background:var(--night-2);color:var(--paper);border:1px solid rgba(255,255,255,.2);margin:4px 0 12px}
.pw-res{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.pw-res li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:10px 12px;border-radius:12px;background:var(--night-2);font-size:14px;line-height:1.55;animation:popin .4s var(--ease) both}
.pw-res li.ok b{color:#5BD17E}.pw-res li.no b{color:#FF6B7A}
.pw-res li:nth-child(2){animation-delay:.1s}.pw-res li:nth-child(3){animation-delay:.2s}

/* proposal */
.prop{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.prop-tabs{display:grid;gap:8px}
.prop-tabs button{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:12px 14px;transition:all .25s}
.prop-tabs button b{width:38px;height:38px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font-family:var(--f-disp)}
.prop-tabs button span{font-weight:900;font-size:17px;line-height:1.3}
.prop-tabs button small{display:block;font-weight:500;font-size:12px;color:var(--mute)}
.prop-tabs button em{font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--mute)}
.prop-tabs button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.prop-tabs button.on b{background:var(--red);color:#fff}
.prop-tabs button.on small,.prop-tabs button.on em{color:var(--on-night-mute)}
.prop-body{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;animation:popin .4s var(--ease)}
.prop-body h3{font-size:28px}
.pb-h{font-weight:900;font-size:14px;color:var(--red);margin:10px 0 6px}
.pb-items{list-style:none;padding:0;margin:0}
.pb-items li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px}
.pb-items li i{flex:0 0 22px;height:22px;border-radius:6px;border:2px solid var(--ink);margin-top:2px;display:grid;place-items:center}
.pb-items li.done i{background:var(--red);border-color:var(--red)}
.pb-items li.done i::after{content:"✓";color:#fff;font-style:normal;font-weight:900;font-size:12px}
.pb-items li.done{color:var(--mute)}
.pb-bad{margin-top:12px;font-size:14px;background:#FFF1F2;border-radius:12px;padding:10px 12px}
.pb-r img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px}
.pb-r p{font-size:14px;line-height:1.65}
.prop-foot{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px}
.prop-meter{flex:1;min-width:160px;max-width:360px;height:10px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.prop-meter i{display:block;height:100%;width:0;background:var(--red);transition:width .4s}

@media (max-width:1080px){.prop{grid-template-columns:1fr}.prop-tabs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.cq-opts,.heri-out,.prop-body,.cand-grid,.gsteps{grid-template-columns:1fr}.gsteps{grid-template-columns:1fr 1fr}}
/* v6 lighter, more refined paper */
body::before{opacity:.025}
:root{--line:rgba(18,17,16,.1);--mute:#857F76}
.paper2 .card,.paper2 .cq,.paper2 .calc,.paper2 .c2-step:not(.c2-out),.paper2 .pkg-col:not(.bob){box-shadow:0 1px 2px rgba(60,40,20,.04),0 8px 24px -16px rgba(60,40,20,.12)}

/* ============================================================
   2026-10-11 競賽資訊自動更新（js/contest.js）＋紅點領獎
   ============================================================ */
/* 年曆：預估／參考色條、年份標記 */
.cal-months em{display:block;font-style:normal;font-size:10px;color:#F6C445;line-height:1}
.cal-row .seg.est{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 6px,transparent 6px 12px);opacity:.82}
.cal-row .seg.mk.est{background-image:none}
.cal-row .seg.gala{box-shadow:0 0 0 2px rgba(255,255,255,.7) inset}
.ct-next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.ct-next .ct-h{grid-column:1/-1;margin:0}
.ct-h{font-weight:900;font-size:16px;margin:0 0 6px}
.ct-h small{font-weight:500;font-size:12px;opacity:.6;margin-left:8px}
.ct-it{border-radius:14px;padding:10px 14px;background:rgba(255,255,255,.06);border-left:4px solid var(--red);display:flex;flex-direction:column;gap:2px}
.ct-it.yo{border-color:#F6C445}.ct-it.ca{border-color:#4B7BE5}.ct-it.gp{border-color:#C9A45C}.ct-it.vtc{border-color:#7C8CC4}.ct-it.hs{border-color:#FF6B6B}.ct-it.ap{border-color:#B07A45}.ct-it.ti{border-color:#4C9F38}
.ct-it b{font-family:var(--f-disp);font-size:20px;line-height:1.1}
.ct-it span{font-size:14px;font-weight:700;line-height:1.35}
.ct-it span em{font-style:normal;font-size:11px;background:var(--red);color:#fff;border-radius:99px;padding:1px 7px;margin-left:4px;vertical-align:2px}
.ct-it small{font-size:12px;opacity:.75}
.ct-b{display:inline-block;font-size:10px;font-weight:700;border-radius:99px;padding:0 6px;margin-left:4px;vertical-align:1px;border:1px solid currentColor}
.ct-b.off{color:#7BD88F}.ct-b.est{color:#F6C445}.ct-b.ref{opacity:.7}

/* 紅點時程：年度切換＋已過去 */
.ct-tabs{display:flex;gap:6px;margin-top:18px}
.ct-tabs button{border:1.5px solid var(--ink);background:none;border-radius:99px;padding:4px 14px;font-size:13px;font-weight:700}
.ct-tabs button.on{background:var(--ink);color:var(--paper)}
.tl.tl7,#rd-tl{grid-template-columns:repeat(7,1fr)}
.tl div.past{opacity:.45}
.ct-watch{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 24px}
.ct-watch-h{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.ct-status{margin:0;font-weight:700}
.ct-status.ok{color:#1E8E3E}.ct-status.wait{color:#B7791F}
.ct-chk{text-align:center;border:1.5px solid var(--ink);border-radius:16px;padding:8px 16px;min-width:150px}
.ct-chk small{display:block;font-size:12px;color:var(--mute)}
.ct-chk b{font-family:var(--f-mono);font-size:20px}
.ct-chk.stale{border-color:var(--red);background:#FFF1F2}.ct-chk.stale small:last-child{color:var(--red);font-weight:700}
.ct-wl{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.ct-wl li{border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column}
.ct-wl a{font-weight:700;text-decoration:none;color:var(--red-d)}
.ct-wl small{font-size:12px;color:var(--mute)}

/* 類別：繳交形式 */
.ct-type{display:inline-block;font-style:normal;font-size:11px;font-weight:700;border-radius:99px;padding:1px 8px;color:#fff;align-self:flex-start;margin-top:6px}
.ct-type.p{background:#B5562A}.ct-type.x{background:#6B5BD2}.ct-type.d{background:#1D8A8A}
.ct-won{display:inline-block;font-style:normal;font-size:11px;font-weight:700;color:var(--red);margin-top:4px}
.cat.on .ct-won,.cat:hover .ct-won{color:#F6C445}
.cat.dim{opacity:.22}
.ct-filter{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}
.ct-filter button{border:1.5px solid var(--ink);background:none;border-radius:99px;padding:3px 12px;font-size:13px;font-weight:700}
.ct-filter button.on{background:var(--ink);color:var(--paper)}
.ct-filter button.p.on{background:#B5562A;border-color:#B5562A}.ct-filter button.x.on{background:#6B5BD2;border-color:#6B5BD2}.ct-filter button.d.on{background:#1D8A8A;border-color:#1D8A8A}

/* 寄實體還是傳數位 */
.pk-c{border-top:5px solid}
.pk-c.p{border-top-color:#B5562A}.pk-c.x{border-top-color:#6B5BD2}.pk-c.d{border-top-color:#1D8A8A}
.pk-c p{margin:0;font-size:15px}
.pk-c h3{margin-top:8px}
.rd-pick{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.pk-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pk-h{margin:0 0 8px;display:flex;flex-direction:column}
.pk-h small{font-size:12px;color:var(--mute);line-height:1.4;margin-top:4px}
.pk-col button{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px;margin-bottom:6px;font-size:14px;font-weight:700;line-height:1.3;transition:.15s}
.pk-col button b{font-family:var(--f-disp);font-size:11px;color:var(--mute);margin-right:6px}
.pk-col button small{display:block;font-size:11px;font-weight:500;color:var(--mute)}
.pk-col.p button.on{background:#B5562A;border-color:#B5562A;color:#fff}
.pk-col.x button.on{background:#6B5BD2;border-color:#6B5BD2;color:#fff}
.pk-col.d button.on{background:#1D8A8A;border-color:#1D8A8A;color:#fff}
.pk-col button.on b,.pk-col button.on small{color:rgba(255,255,255,.8)}
.pk-out{background:var(--ink);color:var(--paper);border-radius:20px;padding:20px 22px;position:sticky;top:80px}
.pk-out .red{color:#FF6B7A}
.pk-list{margin:0;padding-left:1.1em;font-size:14px;line-height:1.65}
.pk-list li{margin-bottom:8px}
.pk-list li.p::marker{color:#E58B5F}.pk-list li.x::marker{color:#A89BFF}.pk-list li.d::marker{color:#5CCFCF}

/* 報名流程 */
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:fl}
.flow li{counter-increment:fl;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;position:relative}
.flow li::before{content:counter(fl,decimal-leading-zero);font-family:var(--f-disp);color:var(--red);font-size:22px;line-height:1;display:block;margin-bottom:6px}
.flow li>b:first-child{display:block;font-size:17px;margin-bottom:4px}
.flow li span{font-size:14px;line-height:1.6;display:block}
.flow-tip{border-left:5px solid var(--red)}

/* Young Ones 試算、比較匯率 */
#yo-calc small{font-size:12px}
.chk{display:inline-flex;gap:6px;align-items:center}
.cmp-rate{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14px;font-weight:700}
.cmp-rate input{width:72px;font:inherit;border:1.5px solid var(--ink);border-radius:10px;padding:3px 8px;margin-left:4px}

/* 紅點領獎 */
.award .aw-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:12px}
.award figure{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#000}
.award figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;cursor:zoom-in;transition:transform .5s var(--ease)}
.award figure:hover img{transform:scale(1.04)}
.award .aw-video{grid-row:span 2}
.award video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9;background:#000}
.award figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 8px;font-size:12px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none}
.award .aw-video figcaption{bottom:auto;top:0;background:linear-gradient(rgba(0,0,0,.6),transparent);padding:8px 12px 18px}
.aw-msg{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center;border-top:1px solid rgba(255,255,255,.15);padding-top:24px}
.aw-big{font-family:var(--f-serif);font-weight:900;font-size:clamp(28px,3.6vw,48px);line-height:1.25;margin:0;color:#fff}
.aw-msg p{margin:0}

@media (max-width:1000px){
  .ct-next{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-pick{grid-template-columns:1fr}
  .pk-out{position:static}
  #rd-tl{grid-template-columns:repeat(4,1fr);row-gap:24px}
}
@media (max-width:820px){
  .pk-cols{grid-template-columns:1fr}
  .pk-sum{grid-template-columns:1fr}
  .award .aw-grid{grid-template-columns:1fr 1fr}
  .award .aw-video{grid-column:1/-1;grid-row:auto}
  .aw-msg{grid-template-columns:1fr}
  #rd-tl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ct-next,.flow{grid-template-columns:1fr}
}
.cal-months span{position:relative}
.cal-months em{position:absolute;left:0;right:0;top:-12px}
@media (max-width:820px){
  .pk-col{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .pk-col .pk-h{grid-column:1/-1}
  .pk-col button{margin:0;font-size:13px}
  .pk-col button small{display:none}
}

/* 紅點領獎：影片封面 */
.award .aw-video{background:#0B0A09}
.award .aw-video video{opacity:0;transition:opacity .4s}
.award .aw-video.playing video{opacity:1}
.aw-cover{position:absolute;inset:0;border:0;padding:0;margin:0;width:100%;height:100%;cursor:pointer;color:#fff;text-align:left;overflow:hidden;background:#0B0A09;display:block}
.aw-video.playing .aw-cover{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.aw-cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(1.15) contrast(1.05);transform:scale(1.04);transition:transform 1.2s var(--ease)}
.aw-cover:hover .aw-cover-bg{transform:scale(1.1)}
.aw-cover::before{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(11,10,9,.92) 0%,rgba(11,10,9,.55) 42%,rgba(11,10,9,.1) 75%),
  linear-gradient(0deg,rgba(227,0,27,.45) 0%,transparent 45%)}
.aw-cover::after{content:"";position:absolute;inset:14px;z-index:1;border:1px solid rgba(255,255,255,.22);border-radius:10px;pointer-events:none}
.aw-cover>span{position:absolute;z-index:2}
.aw-cover-dot{right:-12%;top:-30%;width:62%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(227,0,27,.7);box-shadow:0 0 0 18px rgba(227,0,27,.12),0 0 0 44px rgba(227,0,27,.06);z-index:1!important}
.aw-cover-top{left:32px;top:30px;display:flex;align-items:center;gap:12px;font-family:var(--f-disp);font-size:15px;letter-spacing:.14em;line-height:1.2}
.aw-cover-top img{width:40px;height:40px}
.aw-cover-top small{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;opacity:.75}
.aw-cover-title{left:32px;bottom:64px;display:flex;flex-direction:column}
.aw-cover-title small{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#FF5A6E;font-weight:700}
.aw-cover-title strong{font-family:var(--f-serif);font-weight:900;font-size:clamp(40px,5.2vw,76px);line-height:1.05;letter-spacing:.06em;margin-top:6px;text-shadow:0 4px 30px rgba(0,0,0,.5)}
.aw-cover-title em{font-style:normal;font-family:var(--f-disp);font-size:clamp(14px,1.4vw,20px);letter-spacing:.12em;opacity:.85;margin-top:4px}
.aw-cover-meta{left:32px;bottom:28px;font-size:13px;font-weight:700;letter-spacing:.08em;opacity:.85}
.aw-play{right:9%;top:50%;width:clamp(72px,9vw,112px);aspect-ratio:1;border-radius:50%;background:var(--red);transform:translateY(-50%);display:grid;place-items:center;box-shadow:0 12px 40px rgba(227,0,27,.55);transition:transform .3s var(--ease)}
.aw-play::before,.aw-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:awPulse 2.2s ease-out infinite}
.aw-play::after{animation-delay:1.1s}
.aw-play i{width:0;height:0;border-style:solid;border-width:clamp(13px,1.6vw,20px) 0 clamp(13px,1.6vw,20px) clamp(22px,2.7vw,34px);border-color:transparent transparent transparent #fff;margin-left:8%}
.aw-cover:hover .aw-play,.aw-cover:focus-visible .aw-play{transform:translateY(-50%) scale(1.08)}
@keyframes awPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.aw-play::before,.aw-play::after{animation:none}}
@media (max-width:820px){
  .aw-cover-top{left:20px;top:20px;font-size:12px}.aw-cover-top img{width:30px;height:30px}
  .aw-cover-title{left:20px;bottom:46px}.aw-cover-meta{left:20px;bottom:18px;font-size:12px}
  .aw-play{right:7%}
}
.award .aw-cover img.aw-cover-bg{aspect-ratio:auto;cursor:pointer}
.award .aw-cover .aw-cover-top img{width:40px;height:40px;aspect-ratio:1;cursor:pointer;transform:none}
.award figure:hover .aw-cover-top img{transform:none}
@media (max-width:820px){.award .aw-cover .aw-cover-top img{width:30px;height:30px}}
.aw-play{top:auto;bottom:34px;right:34px;transform:none}
.aw-cover:hover .aw-play,.aw-cover:focus-visible .aw-play{transform:scale(1.08)}
@media (max-width:820px){.aw-play{bottom:20px;right:20px;width:64px}}
@media (max-width:560px){
  .award .aw-video{aspect-ratio:4/3}
  .award .aw-video video{object-fit:contain}
  .aw-cover-title small{font-size:10px}
  .aw-cover-title strong{font-size:36px}
  .aw-cover-dot{display:none}
}

/* ===== Venn 翻面（演講用大字答案） ===== */
.venn{width:min(100%,560px)}
.venn button{perspective:1200px;padding:0;background:none!important;mix-blend-mode:multiply;transition:transform .45s var(--ease)}
.venn .vf{position:absolute;inset:0;transition:transform .7s var(--ease);transform-style:preserve-3d}
.venn .va,.venn .vb{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.venn .va{font-size:clamp(22px,2.6vw,34px);gap:6px}
.venn .va small{font-size:clamp(13px,1.1vw,15px);font-weight:700;letter-spacing:.08em;opacity:.75}
.venn .vb{transform:rotateY(180deg);padding:0 11%;gap:12px;box-shadow:0 24px 50px -18px rgba(0,0,0,.45)}
.venn .vb b{font-size:clamp(24px,2.7vw,36px);line-height:1.3;font-weight:900}
.venn .vb em{font-style:normal;font-weight:700;font-size:clamp(16px,1.5vw,21px);line-height:1.45;opacity:.92}
.venn .v1 .va,.venn .v1 .vb{background:#E4007F;color:#fff}
.venn .v2 .va,.venn .v2 .vb{background:#00A0E9;color:#fff}
.venn .v3 .va,.venn .v3 .vb{background:#FFF100;color:var(--ink)}
.venn button:hover{transform:scale(1.04)}
.venn button.on{mix-blend-mode:normal;z-index:5;transform:scale(1.22);transition:transform .45s var(--ease),z-index 0s}
.venn button.on .vf{transform:rotateY(180deg)}
/* 讓翻面的圓往中間靠，不被切到 */
.venn .v1.on{transform:translate(0,12%) scale(1.22)}
.venn .v2.on{transform:translate(14%,-6%) scale(1.22)}
.venn .v3.on{transform:translate(-14%,-6%) scale(1.22)}
@media (max-width:820px){.venn{width:min(100%,420px)}.venn button.on{transform:scale(1.15)}.venn .v1.on{transform:translate(0,10%) scale(1.15)}.venn .v2.on{transform:translate(10%,-6%) scale(1.15)}.venn .v3.on{transform:translate(-10%,-6%) scale(1.15)}}

/* ===== BIGTEXT:START（演講用大字，tools/bigtext.py 產生，勿手改）===== */
@media (min-width:821px){
body{font-size:20px}
.brand small{font-size:15px}
.chapters a{font-size:16px}
.mode button{font-size:16px}
.deck-ui{font-size:16px}
.deck-ui button{font-size:19px}
.hint{font-size:16px}
.kicker{font-size:16px}
.note{font-size:16px}
.src{font-size:15px}
.toc-mini span{font-size:17px}
.stat span{font-size:16px}
.hero .who{font-size:17px}
.scroll-cue{font-size:15px}
.card .idx{font-size:17px}
.pill{font-size:16px}
.flip .b{font-size:19px}
.chip{font-size:20px}
.step i{font-size:17px}
.step b{font-size:18px}
.orbit button{font-size:clamp(17px,1.6vw,21px)}
.dir .ex{font-size:17px}
.dir .eg{font-size:16px}
.sdg span{font-size:clamp(15px,1vw,19px)}
.sdg em{font-size:15px}
.mini-works b{font-size:17px}
.mini-works small{font-size:15px}
.heri .chips .chip{font-size:18px}
.pies b{font-size:clamp(19px,2vw,24px)}
.pies small{font-size:15px}
.reel small{font-size:15px}
.reel .lk{font-size:15px}
.btn{font-size:20px}
.checks label{font-size:17px}
.matrix{font-size:17px}
.matrix h4{font-size:18px}
.member h4{font-size:18px}
.member select{font-size:17px}
.member .tags span{font-size:15px}
.cov{font-size:16px}
.cal-months{font-size:15px}
.cal-row>b{font-size:17px}
.cal-row .seg{font-size:15px}
.cal-now::before{font-size:14px}
.level .tiny{font-size:15px}
.cat b{font-size:16px}
.cat span{font-size:18px}
.cat small{font-size:15px}
.legend{font-size:16px}
.tl b{font-size:16px}
.tl span{font-size:20px}
.tl small{font-size:16px}
.calc label{font-size:17px}
.seg-btns button{font-size:17px}
.cube{font-size:18px}
.cube small{font-size:14px}
.disc{font-size:18px}
.disc em{font-size:15px}
.compare{font-size:18px}
.compare thead th{font-size:17px}
.compare tbody th{font-size:17px}
.bars b{font-size:clamp(17px,1.8vw,22px)}
.bars small{font-size:15px}
.bob-badge{font-size:17px}
.filters button{font-size:17px}
.wcard h3 small{font-size:15px}
.wcard .tg span{font-size:15px}
.wcard .bd{font-size:15px}
.modal .en{font-size:17px}
.tabs button{font-size:18px}
.tabpane{font-size:20px}
.award-list li{font-size:17px}
.sdg-tags span{font-size:15px}
.pcard .ph .bd{font-size:15px}
.pcard h3 span{font-size:15px}
.pcard .sub{font-size:17px}
.pcard .yr{font-size:16px}
.judge-q button{font-size:19px}
.tip p{font-size:17px}
.todo input:checked::after{font-size:18px}
.todo small{font-size:16px}
.links b{font-size:19px}
.links small{font-size:15px}
footer{font-size:16px}
.redbg .grid p{font-size:19px}
.pkg-h small{font-size:16px}
.pkg ul{font-size:18px}
.pkg-jr{font-size:17px}
.c2-n{font-size:15px}
.c2-step label{font-size:17px}
.bill{font-size:16px}
.scen button{font-size:17px}
.cmp-keys button{font-size:18px}
.cmp-top small{font-size:15px}
.cmp-row{font-size:17px}
.cmp-row em{font-size:15px}
.dom-h small{font-size:15px}
.wtag{font-size:15px}
.dom dl{font-size:17px}
.hs-flow p{font-size:17px}
.f-q .chip{font-size:18px}
.f-card p{font-size:17px}
.f-card small{font-size:15px}
.f-tag{font-size:15px}
.ps-btns button{font-size:20px}
.pfilter>div>span{font-size:15px}
.pf button{font-size:17px}
.pcard .pn{font-size:15px}
.ptopic{font-size:17px}
.ptags span{font-size:15px}
.lens-item b{font-size:20px}
.lens-item small{font-size:15px}
.lens-item p{font-size:17px}
.nflip .a small{font-size:15px}
.nflip .a span{font-size:15px}
.nflip .b{font-size:17px}
.g-work p{font-size:17px}
.g-cats button{font-size:16px}
.g-cats button b{font-size:15px}
#ssteps .step b{font-size:17px}
.zoom-btn{font-size:16px}
.lb-count,.lb-pct{font-size:16px}
.lb-hint{font-size:15px}
.tw-num{font-size:15px}
.tchip{font-size:17px}
.tstrip.sm .tchip{font-size:15px}
.qc{font-size:clamp(19px,1.8vw,23px)}
.q-core{font-size:clamp(19px,2vw,24px)}
.q-chips .chip{font-size:18px}
.q-sum{font-size:20px}
.pw-sw small{font-size:16px}
#pw-msg{font-size:18px}
.gag .a small,.gag .b small{font-size:15px}
.gag .a span{font-size:15px}
.gag .b b{font-size:18px}
.nm4-b{font-size:18px}
.mx-out em{font-size:15px}
.pc-sw button{font-size:17px}
.pc-body p{font-size:18px}
.pc-body span{font-size:16px}
.checklist li.done::before{font-size:16px}
.cl-meter{font-size:16px}
.rd3 .chip{font-size:18px}
.cd small{font-size:15px}
.cd i{font-size:15px}
.tipf .tip.b p{font-size:18px}
.tipf .tip.a::after{font-size:15px}
.cq-opts button{font-size:19px}
.cq-res h3 small{font-size:16px}
.cq-res dl{font-size:17px}
.cq-res dd span{font-size:16px}
.lvb-ring small{font-size:15px}
.lv-badge small{font-size:15px}
.lv-badge p{font-size:17px}
.eye-list li.done i::after{font-size:17px}
.eye-list b{font-size:20px}
.eye-list span{font-size:17px}
.heri .chip em{font-size:15px}
.gsteps span{font-size:17px}
.gsteps b{font-size:16px}
.cand-h b small{font-size:17px}
.cand-h span{font-size:16px}
.cand-x{font-size:19px}
.cand-card p{font-size:18px}
.cand-card label{font-size:17px}
.pw-l{font-size:16px}
.gen-box .q-in{font-size:19px}
.pw-sel{font-size:18px}
.pw-res li{font-size:17px}
.prop-tabs button span{font-size:20px}
.prop-tabs button small{font-size:15px}
.prop-tabs button em{font-size:15px}
.pb-h{font-size:17px}
.pb-items li{font-size:18px}
.pb-items li.done i::after{font-size:15px}
.pb-bad{font-size:17px}
.pb-r p{font-size:17px}
.cal-months em{font-size:14px}
.ct-h{font-size:19px}
.ct-h small{font-size:15px}
.ct-it span{font-size:17px}
.ct-it span em{font-size:15px}
.ct-it small{font-size:15px}
.ct-b{font-size:14px}
.ct-tabs button{font-size:16px}
.ct-chk small{font-size:15px}
.ct-wl small{font-size:15px}
.ct-type{font-size:15px}
.ct-won{font-size:15px}
.ct-filter button{font-size:16px}
.pk-c p{font-size:18px}
.pk-h small{font-size:15px}
.pk-col button{font-size:17px}
.pk-col button b{font-size:15px}
.pk-col button small{font-size:15px}
.pk-list{font-size:17px}
.flow li>b:first-child{font-size:20px}
.flow li span{font-size:17px}
#yo-calc small{font-size:15px}
.cmp-rate{font-size:17px}
.award figcaption{font-size:15px}
.aw-cover-top{font-size:18px}
.aw-cover-top small{font-size:15px}
.aw-cover-title small{font-size:15px}
.aw-cover-title em{font-size:clamp(17px,1.4vw,21px)}
.aw-cover-meta{font-size:16px}
.venn .va small{font-size:clamp(16px,1.1vw,20px)}
.venn .vb em{font-size:clamp(19px,1.5vw,23px)}
}
/* ===== BIGTEXT:END ===== */


/* ===== 演講大字：重點互動答案再加大（桌機） ===== */
@media (min-width:821px){
.flip,.flip .f{min-height:300px}
.flip .b{font-size:21px;line-height:1.6;padding:28px}
.flip .b b{display:block;font-size:clamp(24px,2.2vw,30px);line-height:1.35;margin-bottom:10px}
.venn-out p.mute{font-size:20px}
}
/* 年曆：條上字略小，仍粗體好讀 */
@media (min-width:821px){
.cal-row .seg{font-size:13px;padding:0 8px;letter-spacing:-.01em}
.cal-months{font-size:14px}
.cal-row>b{font-size:16px}
.cal-now::before{font-size:12px;top:-46px}
}