/* Three intentionally different compositions, one accessible interaction layer. */
:root{--pizza:#963625;--fishing:#28558a;--hero:#77560e;--round:6px}
*{box-sizing:border-box} [hidden]{display:none!important} body{overflow-wrap:break-word}
.wrap{max-width:1160px;padding-inline:clamp(20px,5vw,64px)}
.masthead{height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;line-height:0}.brand img{width:174px;height:auto;display:block}
.masthead>div{display:flex;gap:27px}.masthead a{color:var(--ink);font-size:13px;text-decoration:none;font-weight:700}
.hero{padding:45px 0 60px}.hero-in{grid-template-columns:1.35fr 1fr;gap:48px;text-align:left;align-items:center;justify-items:stretch}
.hero-copy{justify-items:start;text-align:left;gap:20px;max-width:none}.hero-copy .eyebrow{letter-spacing:.2em;font-size:11px}
h1.tagline{font-size:clamp(34px,4.7vw,58px);line-height:1.25;max-width:none;letter-spacing:-.035em;text-wrap:nowrap}
.tagline span{color:var(--coral-ink)}.sub{max-width:28em;font-size:16px}.cta-row{justify-content:flex-start;gap:12px}
.freebar{text-align:left;font-size:12px;line-height:1.8}.freebar span{color:var(--ink-3)}
.hero-visual{position:relative;display:grid;justify-items:center;align-items:center}
.motion-frame{position:relative;line-height:0;overflow:hidden;border:2px solid var(--edge);background:var(--paper-2);box-shadow:6px 7px 0 var(--edge);border-radius:var(--round)}
.motion-frame video{display:block;width:100%;height:auto;object-fit:contain}
.commute{width:min(100%,286px);transform:rotate(2deg)}
.motion-toggle{position:absolute;right:10px;bottom:10px;z-index:2;border:1.5px solid #6b4a2a;background:#fffaf0;color:#2a1c12;border-radius:4px;min-width:54px;min-height:44px;font-family:inherit;font-weight:700;font-size:13px;line-height:1.3;cursor:pointer}
.hero-sticker{display:none}.visual-caption{display:block;margin-top:22px;font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.language-ribbon{display:flex;align-items:center;justify-content:center;gap:20px;padding:20px;border-block:1px solid var(--rule);font-size:13px;background:var(--paper)}
.language-ribbon span{font:12px 'Jua',sans-serif;letter-spacing:.12em;color:var(--ink-3)}.language-ribbon i{width:5px;height:5px;border-radius:50%;background:var(--coral)}
.sheet{padding:72px 0}.shead{max-width:580px}.shead h2,.home-copy h2{font-size:clamp(30px,3.3vw,42px);letter-spacing:-.02em;line-height:1.35}
.game-tabs{display:flex;gap:0;border-bottom:2px solid var(--edge)}
.game-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;min-height:65px;padding:12px 8px;border:0;border-bottom:4px solid transparent;background:var(--paper-2);font:700 16px 'Noto Sans TC',sans-serif;color:var(--ink);cursor:pointer}
.game-tab img{object-fit:contain;flex:none}.game-tab[data-game=pizza]{--theme:var(--pizza)}.game-tab[data-game=fishing]{--theme:var(--fishing)}.game-tab[data-game=hero]{--theme:var(--hero)}
.game-tab[aria-selected=true]{border-bottom-color:var(--theme);background:var(--paper);color:var(--theme)}
.game-panel{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:42px;padding:36px 42px;background:var(--paper);border:2px solid var(--edge);border-top:0;position:relative;--theme:var(--pizza)}
.game-panel[data-game=fishing]{--theme:var(--fishing)}.game-panel[data-game=hero]{--theme:var(--hero)}
.game-copy{display:grid;gap:15px;justify-items:start}.section-index{font:12px 'Jua',sans-serif;letter-spacing:.13em;color:var(--theme)}
.game-copy h3{font-size:38px;color:var(--theme)}.game-copy p{max-width:27em;font-size:15px;color:var(--ink-2)}
.game-art{width:180px;height:130px;object-fit:cover;margin-top:12px;transform:rotate(-4deg);border:7px solid #fffcf3;box-shadow:0 6px 16px #26160024}
.play-frame{width:min(100%,250px);justify-self:center;border-color:var(--theme);box-shadow:7px 7px 0 color-mix(in srgb,var(--theme) 45%,var(--paper))}
.game-foot{text-align:center;margin-top:23px;color:var(--ink-3);font-size:14px}
.home-section{background:var(--wall);border-block:1px solid var(--rule)}.home-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}
.home-copy{display:grid;gap:22px;justify-items:start}.home-copy>p{max-width:27em;color:var(--ink-2)}
.home-tabs{display:flex;flex-wrap:wrap;gap:9px}.home-tabs button{padding:10px 14px;font:700 14px 'Noto Sans TC',sans-serif;background:var(--paper);color:var(--ink);border:1px solid var(--edge);border-radius:4px;cursor:pointer;min-height:44px}
.home-tabs button[aria-pressed=true]{background:var(--deep);color:var(--on-deep)}.home-pets{display:flex;align-items:flex-end;gap:8px;height:95px}.home-pets img{object-fit:contain;filter:drop-shadow(0 5px 3px #0002)}
.home-gallery{position:relative;max-width:278px;justify-self:center;border:7px solid var(--paper);box-shadow:10px 10px 0 var(--edge);border-radius:9px;background:var(--paper)}
.home-gallery>img{display:block;width:100%;height:auto;aspect-ratio:393/852;object-fit:cover}.gallery-label{position:absolute;bottom:10px;left:10px;padding:5px 13px;background:#fffaf0;color:#422f1f;border:1px solid #6b4a2a;border-radius:4px;font-size:13px}
.home-gallery.changing>img{animation:reveal .25s ease-out}@keyframes reveal{from{opacity:.3}to{opacity:1}}
.stickybar{transform:none;padding:10px max(16px,calc((100vw - 1050px)/2)) calc(10px + env(safe-area-inset-bottom));gap:16px;min-height:80px}
.stickybar .btn{font-size:14px;padding:11px 22px}.stickybar .sb-t{font-size:11px}.stickybar .sb-t b{font-size:14px}
.sheet--wall{background:var(--wall)}.hows{grid-template-columns:repeat(3,1fr)}.how{border:0;border-top:2px solid var(--edge);box-shadow:none;padding:22px 8px;background:transparent}.how h3{font-size:18px}
.shead-scene{max-width:230px}.shead-scene video{display:block;width:100%;height:auto}.faq{max-width:none}.q{box-shadow:none!important}.support{grid-template-columns:repeat(3,1fr)}
.btn{font-size:14px;min-height:48px}.tear{display:none}.osnote{margin:0;width:100%}
/* A — a warm, bound paper catalogue. */
.design-a{background:#fcf5e9}.design-a .hero{background:#f3e1c3}.design-a .masthead{background:#fcf5e9}
.design-a .game-showcase{box-shadow:9px 9px 0 #decaab}.design-a .game-section .shead{position:relative;padding-left:24px;border-left:4px solid var(--coral)}
.design-a .home-gallery{transform:rotate(2deg)}.design-a .home-copy h2{color:#725331}
/* B — theatrical framing, oversize titles and a side selector. */
.design-b{--paper:#251d19;--paper-2:#362a22;--wall:#30251e;--ink:#fff0d4;--ink-2:#dbc9ad;--ink-3:#c3a77c;--edge:#8d6c44;--rule:#5a4633;--coral:#edbe62;--coral-ink:#f0c677;--on-coral:#302015;--deep:#15120f;--on-deep:#f8e7ca;--pizza:#ffa99c;--fishing:#9dc8ff;--hero:#f1cf71;background:var(--paper)}
.design-b .masthead{height:84px;max-width:1280px;border-bottom:1px solid var(--rule)}.design-b .brand img{width:146px}
.design-b .hero{background:radial-gradient(ellipse at 78% 52%,#68442c 0,transparent 52%),#201913;padding:62px 0 72px}
.design-b .hero-in{max-width:1240px;grid-template-columns:1.4fr 1fr}.design-b h1.tagline{font-size:clamp(36px,5.5vw,66px)}
.design-b .commute{width:288px;transform:rotate(-4deg);border:8px solid #dbc5a0;box-shadow:16px 19px 0 #120c0880}
.design-b .language-ribbon{background:#edbe62;color:#302015;border:0}.design-b .language-ribbon span{color:#634321}.design-b .language-ribbon i{background:#5f4224}
.design-b .game-section .wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;max-width:1240px}.design-b .game-section .shead{margin:0;padding-top:14px}
.design-b .game-showcase{display:grid;grid-template-columns:100px minmax(0,1fr);gap:0}.design-b .game-tabs{flex-direction:column;border:0;justify-content:start}
.design-b .game-tab{flex:none;flex-direction:column;min-height:112px;font-size:13px;border:0;border-left:4px solid transparent;border-bottom:1px solid var(--rule)}
.design-b .game-tab[aria-selected=true]{border-left-color:var(--theme)}.design-b .game-panel{border:1px solid var(--rule);padding:26px;grid-template-columns:1fr 1fr;gap:22px}
.design-b .game-copy h3{font-size:29px}.design-b .game-art{width:120px;height:100px}.design-b .game-copy p{font-size:13px}.design-b .game-foot{grid-column:1/-1}
.design-b .home-layout{grid-template-columns:1fr 1.3fr}.design-b .home-copy{order:2}.design-b .home-gallery{order:1;transform:rotate(-3deg);box-shadow:16px 16px 0 #18120d}
.design-b .home-section{background:radial-gradient(ellipse at 18% 52%,#584735,transparent 65%),#30251e}
.design-b .shead h2,.design-b .home-copy h2{color:#f0c677}.design-b .btn{border-radius:0;box-shadow:none}.design-b .btn-main{border-color:#edbe62}.design-b .btn-ghost{border-color:#a78861}.design-b .stickybar{border-color:#edbe62}
/* C — a light journal, centred cover, taped keepsakes and tabbed spread. */
.design-c{--paper:#fffdf6;--paper-2:#f2f0e4;--wall:#e9efdf;--edge:#667252;--deep:#344634;--on-deep:#fff7e6;--coral:#eabb81;--coral-ink:#a64f32;--rule:#c9d0be;background:#fffdf6}
.design-c .masthead{max-width:1280px;border-bottom:1px dashed #a0ae90}.design-c .hero{background:linear-gradient(90deg,transparent 49.9%,#cbd4bc55 50%,transparent 50.1%),#f6f6e9;padding:32px 0 50px}
.design-c .hero-in{display:flex;flex-direction:column;gap:28px}.design-c .hero-copy{justify-items:center;text-align:center;gap:12px}.design-c h1.tagline{font-size:clamp(35px,4.1vw,50px)}
.design-c .hero-copy .sub{max-width:36em}.design-c .hero-copy .freebar{text-align:center}.design-c .hero-copy .cta-row{justify-content:center}
.design-c .hero-visual{width:min(700px,100%);height:260px}.design-c .commute{width:178px;transform:rotate(0deg);border:6px solid #fffaf0;box-shadow:1px 8px 19px #1a301c25;z-index:1}
.design-c .hero-sticker{display:block;position:absolute;width:190px;height:170px;object-fit:cover;border:9px solid #fffaf0;box-shadow:0 8px 17px #1a301c20;top:30px}
.design-c .sticker-left{left:10%;transform:rotate(-9deg)}.design-c .sticker-right{right:10%;transform:rotate(9deg)}.design-c .visual-caption{display:none}
.design-c .language-ribbon{gap:22px;padding:14px;border-style:dashed}.design-c .game-section .shead{text-align:center;margin-inline:auto;max-width:650px}.design-c .game-section .shead h2 br{display:none}
.design-c .game-showcase{max-width:920px;margin-inline:auto}.design-c .game-tabs{gap:12px;border:0;margin-bottom:-1px;padding-inline:18px}.design-c .game-tab{border:1px solid var(--rule);border-radius:12px 12px 0 0;background:#e8eddf}
.design-c .game-tab[aria-selected=true]{background:#fffdf6;border-bottom-color:#fffdf6;position:relative;z-index:1;border-top:4px solid var(--theme)}
.design-c .game-panel{border:1px solid var(--rule);grid-template-columns:1fr 1.2fr;background:repeating-linear-gradient(transparent,transparent 39px,#98ad8012 40px),#fffdf6;box-shadow:0 12px 28px #41512a12}
.design-c .game-copy{order:2}.design-c .play-frame{order:1;transform:rotate(-2deg)}.design-c .game-art{width:160px;height:120px;transform:rotate(5deg)}
.design-c .home-section{background:#e9efdf;border-block:1px dashed #9ca98e}.design-c .home-gallery{transform:rotate(3deg);border:10px solid #fffdf6;box-shadow:0 12px 25px #34463430}
.design-c .home-gallery:before{content:"";position:absolute;width:90px;height:24px;background:#e5c78acc;top:-20px;left:calc(50% - 45px);z-index:1;transform:rotate(-6deg)}
.design-c .home-copy h2{color:#405e3a}.design-c .how{border-color:#9eac8c}.design-c .btn{border-width:1.5px;border-radius:7px;box-shadow:3px 3px 0 var(--edge)}
@media(max-width:1000px){.design-b .game-section .wrap{display:block}.design-b .game-section .shead{margin-bottom:30px;max-width:620px}.design-b .game-showcase{grid-template-columns:120px minmax(0,1fr)}}
@media(max-width:700px){
 .masthead{height:73px;gap:12px;padding-inline:20px}.brand img{width:136px}.masthead>div{gap:14px}.masthead a{font-size:11px}.masthead>div a[href="#faq"]{display:none}
 .hero{padding:28px 0 36px}.hero-in{display:flex;flex-direction:column;gap:30px}.hero-copy{justify-items:center;text-align:center;gap:15px}.hero-copy .eyebrow{font-size:10px}
 h1.tagline{font-size:clamp(30px,8.6vw,44px);line-height:1.25}.sub{font-size:15px;max-width:22em}.cta-row{justify-content:center;gap:10px}.btn{font-size:13px;padding:12px 17px}.freebar{text-align:center;font-size:11px}
 .commute{width:178px;transform:rotate(2deg)}.visual-caption{font-size:9px;margin-top:15px}.language-ribbon{gap:10px;padding:16px 12px;font-size:13px}.language-ribbon span{display:none}
 .sheet{padding:45px 0}.shead{margin-bottom:25px}.shead h2,.home-copy h2{font-size:29px}.shead p{font-size:14px}
 .game-tabs{position:relative}.game-tab{font-size:13px;gap:4px;min-height:60px;padding:8px 2px}.game-tab img{width:22px;height:22px}
 .game-panel{padding:22px 20px 26px;grid-template-columns:1fr;gap:24px}.game-copy{gap:10px}.game-copy h3{font-size:29px}.game-copy p{font-size:14px}.game-art{display:none}.section-index{font-size:10px}
 .play-frame{width:min(100%,248px)}.game-foot{font-size:12px;margin-top:18px}.game-copy .btn{min-width:140px}
 .home-layout{grid-template-columns:1fr;gap:30px}.home-copy{gap:18px}.home-copy>p{font-size:14px}.home-tabs{gap:7px}.home-tabs button{padding:9px 12px;font-size:13px}.home-gallery{max-width:252px}.home-pets{display:none}
 .hows{grid-template-columns:1fr 1fr;gap:17px}.how{padding:18px 0}.how h3{font-size:16px}.how p{font-size:13px}.how .k{font-size:10px}.shead-split{gap:24px}.shead-scene{width:170px}.support{grid-template-columns:1fr}.q>summary{font-size:14px!important}
 .stickybar{padding-inline:12px;gap:8px;min-height:74px}.stickybar .btn{padding:10px 13px;font-size:12px}.stickybar .sb-t{font-size:10px}.stickybar .sb-t b{font-size:12px}.stickybar .sb-t{min-width:0}
 .design-b .masthead{height:73px}.design-b .hero{padding:32px 0 40px}.design-b h1.tagline{font-size:clamp(33px,9.2vw,48px)}.design-b .commute{width:190px;border-width:6px}.design-b .hero-copy{align-items:center}
 .design-b .game-showcase{display:block}.design-b .game-tabs{flex-direction:row}.design-b .game-tab{flex:1;min-height:72px;border-left:0;border-bottom:3px solid transparent;font-size:12px}.design-b .game-tab[aria-selected=true]{border-left:0;border-bottom-color:var(--theme)}
 .design-b .game-panel{grid-template-columns:1fr;padding:24px}.design-b .home-layout{grid-template-columns:1fr}.design-b .home-copy{order:0}.design-b .home-gallery{order:1}.design-b .game-section .shead{padding:0}
 .design-c .hero{padding-top:26px;padding-bottom:35px}.design-c h1.tagline{font-size:clamp(30px,8.4vw,42px)}.design-c .hero-in{gap:26px}.design-c .hero-visual{height:230px}.design-c .commute{width:155px}
 .design-c .hero-sticker{width:113px;height:133px;border-width:6px;top:43px}.design-c .sticker-left{left:0}.design-c .sticker-right{right:0}.design-c .game-tabs{padding-inline:0;gap:5px}.design-c .game-tab{font-size:12px}
 .design-c .game-panel{grid-template-columns:1fr}.design-c .game-copy{order:0}.design-c .play-frame{order:1;transform:none}.design-c .game-section .shead{text-align:left}.design-c .game-section .shead h2 br{display:block}
}
@media(max-width:350px){.hows{grid-template-columns:1fr}.masthead>div{gap:10px}.brand img{width:125px}.game-tab{font-size:11px}.game-tab img{width:19px;height:19px}.stickybar .sb-t{font-size:9px}.stickybar .btn{font-size:11px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* B keeps its dark stage in light mode, with a cream editorial body below it. */
html[data-theme=light] .design-b{--paper:#fff6e5;--paper-2:#f0e4cc;--wall:#ead9bd;--ink:#32251b;--ink-2:#65513d;--ink-3:#765c3c;--edge:#8d6c44;--rule:#d4bc94;--coral:#edbe62;--coral-ink:#8b541d;--deep:#201913;--on-deep:#fff0d4;--pizza:#963625;--fishing:#28558a;--hero:#77560e}
.design-b .hero,.design-b .masthead{--ink:#fff0d4;--ink-2:#dbc9ad;--ink-3:#c3a77c;--paper:#251d19;--coral-ink:#f0c677;background-color:#201913}
.design-b .home-section{--ink:#fff0d4;--ink-2:#dbc9ad;--ink-3:#c3a77c;--paper:#251d19;--coral-ink:#f0c677}
html[data-theme=dark] .design-a{--pizza:#ffb2a4;--fishing:#a5caff;--hero:#f5d47d;background:#221812}
html[data-theme=dark] .design-a .hero{background:#30251b}
html[data-theme=dark] .design-a .masthead{background:#221812}
html[data-theme=dark] .design-a .game-showcase{box-shadow:9px 9px 0 #594229}
html[data-theme=dark] .design-a .home-copy h2{color:#ebca90}
html[data-theme=dark] .design-c{--paper:#18251e;--paper-2:#24362b;--wall:#263d30;--ink:#f7f0db;--ink-2:#cddac7;--ink-3:#bed0ac;--edge:#92a57c;--rule:#52674c;--coral:#eabb81;--coral-ink:#f1b694;--deep:#10251b;--on-deep:#f6ecd5;--pizza:#ffb2a4;--fishing:#a5caff;--hero:#f5d47d;background:#18251e}
html[data-theme=dark] .design-c .hero{background:linear-gradient(90deg,transparent 49.9%,#a5c69b14 50%,transparent 50.1%),#203126}
html[data-theme=dark] .design-c .game-tab{background:#2b4333}
html[data-theme=dark] .design-c .game-tab[aria-selected=true]{background:#18251e;border-bottom-color:#18251e}
html[data-theme=dark] .design-c .game-panel{background:repeating-linear-gradient(transparent,transparent 39px,#bddba110 40px),#18251e}
html[data-theme=dark] .design-c .home-section{background:#263d30}
html[data-theme=dark] .design-c .home-copy h2{color:#d8e6b0}
html[data-theme=dark] .design-c .home-gallery{border-color:#e8e4d2}

html[data-theme=light] .design-b .shead h2{color:#63401c}

.sub{text-wrap:balance}
html{color-scheme:light}html[data-theme=dark]{color-scheme:dark}
html[data-theme=light] .design-b .sheet--deep .shead h2{color:#f0c677}
.design-b .masthead{max-width:none;padding-inline:max(20px,calc((100vw - 1112px)/2))}
@media(min-width:1001px){.design-b .game-section .shead h2{font-size:32px}}

/* ── 免費單字表入口（首頁 #learn-free，2026-10-21 A 版）：卡片＝乾淨紙藝層，edge 描邊＋零模糊硬陰影 ── */
.lt-cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lt-cards a{display:grid;gap:4px;align-content:start;height:100%;padding:18px 18px 20px;text-decoration:none;color:var(--ink);background:var(--paper);border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--hard-sm);transition:transform .12s ease,box-shadow .12s ease}
.lt-cards a:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge)}
.lt-cards h3{font-size:18px;line-height:1.35;margin:0}
.lt-cards span:not(.lt-k){font-size:14px;color:var(--ink-2);line-height:1.6}
.lt-k{font-size:10.5px;color:var(--coral-ink);letter-spacing:.12em}
.lt-all{margin-top:18px;font-weight:700}

/* ── 學習進度段落（首頁 #progress，2026-10-21 A 版）：排法沿用 #home 的 home-layout；截圖框用 paper-2 才看得出邊 ── */
.pg-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pg-points li{font-size:15px;color:var(--ink-2);line-height:1.6;padding-left:14px;border-left:3px solid var(--coral)}
.pg-points b{display:block;color:var(--ink);font-size:16px}
.pg-shot{margin:0;max-width:250px;justify-self:end;border:7px solid var(--paper-2);box-shadow:10px 10px 0 var(--edge);border-radius:9px;background:var(--paper-2);line-height:0}
.pg-shot img{width:100%;height:auto;display:block;aspect-ratio:540/1170}
@media(max-width:860px){.pg-shot{justify-self:center;width:min(250px,62vw)}}