:root{--cream:#fff8f0;--paper:#fffefb;--mint:#e7f6ee;--mint-strong:#ccebdc;--forest:#2d6a4f;--teal:#3dbfa0;--orange:#f4872b;--yellow:#fff0a0;--brown:#3d2010;--muted:#7a6a5a;--rose:#e8455a;--line:rgba(61,32,16,0.12);--shadow:0 20px 54px rgba(45,106,79,0.12)}*{box-sizing:border-box}html{min-width:320px;background:var(--cream)}body{margin:0;color:var(--brown);background:radial-gradient(circle at 8% 5%,rgba(244,135,43,.1),transparent 24rem),radial-gradient(circle at 92% 0,rgba(61,191,160,.12),transparent 28rem),var(--cream);font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,system-ui,sans-serif}button,select{font:inherit}button{color:inherit}button:focus-visible{outline:4px solid rgba(244,135,43,.28);outline-offset:3px}.app-shell{width:min(1280px,calc(100% - 40px));min-height:100vh;margin:0 auto;padding:22px 0 28px}.topbar{justify-content:space-between;gap:20px;min-height:66px;padding:10px 14px;border:1px solid rgba(45,106,79,.1);border-radius:22px;background:rgba(255,254,251,.88);box-shadow:0 8px 26px rgba(45,106,79,.07);backdrop-filter:blur(18px)}.brand-button,.topbar{display:flex;align-items:center}.brand-button{gap:12px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left}.brand-button>span:last-child{display:grid;gap:2px}.brand-button strong{font-size:1.07rem;line-height:1.1}.brand-button small{color:var(--muted);font-size:.72rem;letter-spacing:.04em}.brand-mark{display:grid;width:44px;height:44px;place-items:center;border-radius:15px;color:#fff;background:var(--forest);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);font-size:1.35rem;font-weight:900}.topbar-actions{display:flex;align-items:center;gap:10px}.hub-home-link{padding:9px 13px;border:1px solid rgba(45,106,79,.18);border-radius:999px;color:var(--forest);background:var(--mint);font-size:.78rem;font-weight:800;text-decoration:none;white-space:nowrap}.hub-home-link:hover{border-color:var(--forest)}.edition-pill,.sound-toggle{border-radius:999px;font-size:.78rem;font-weight:700}.edition-pill{padding:10px 14px;color:var(--forest);background:var(--mint)}.sound-toggle{display:flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid rgba(61,32,16,.1);background:#fff;cursor:pointer}.demo-screen,.game-screen,.result-screen,.setup-screen{padding:30px 0 22px}.setup-hero{position:relative;display:grid;min-height:390px;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);align-items:center;overflow:hidden;border-radius:34px;background:linear-gradient(120deg,rgba(255,254,251,.96) 0 58%,rgba(204,235,220,.86) 58%),var(--paper);box-shadow:var(--shadow)}.setup-hero:after,.setup-hero:before{position:absolute;content:"";border-radius:999px}.setup-hero:before{width:170px;height:170px;top:-85px;left:48%;border:28px solid rgba(244,135,43,.1)}.setup-hero:after{width:86px;height:86px;right:5%;bottom:-42px;background:rgba(255,240,160,.72)}.hero-copy{position:relative;z-index:2;padding:58px clamp(32px,6vw,76px)}.eyebrow{display:inline-flex;align-items:center;min-height:31px;padding:5px 13px;border-radius:999px;color:var(--forest);background:var(--mint);font-size:.77rem;font-weight:900;letter-spacing:.08em}.demo-card>h1,.hero-copy h1,.result-celebration h1{margin:20px 0 16px;font-size:clamp(2.35rem,5vw,4.55rem);line-height:1.08;letter-spacing:-.045em}.hero-copy p{max-width:620px;margin:0;color:var(--muted);font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.8}.hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:27px}.hero-tags span{padding:9px 13px;border:1px solid rgba(45,106,79,.13);border-radius:999px;background:#fff;font-size:.78rem;font-weight:800}.detective-stage{position:relative;z-index:2;align-self:stretch;min-height:390px}.detective-stage:before{position:absolute;width:300px;height:300px;top:50%;left:50%;content:"";border:2px dashed rgba(45,106,79,.2);border-radius:50%;transform:translate(-50%,-50%)}.detective-stage img{position:absolute;width:min(390px,91%);max-height:390px;right:5%;bottom:-13px;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(61,32,16,.14))}.floating-clue{position:absolute;z-index:3;display:grid;width:62px;height:62px;place-items:center;border:2px solid var(--forest);border-radius:20px;background:#fff;box-shadow:0 10px 24px rgba(45,106,79,.14);font-size:1.7rem;font-weight:900;transform:rotate(-8deg)}.clue-one{top:14%;left:5%;color:var(--forest)}.clue-two{top:24%;right:9%;color:var(--orange);transform:rotate(8deg)}.demo-card,.question-card,.result-card,.setup-panel{border:1px solid rgba(45,106,79,.1);border-radius:30px;background:var(--paper);box-shadow:var(--shadow)}.setup-panel{margin-top:24px;padding:clamp(24px,4vw,44px)}.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line)}.panel-heading>div>span{color:var(--orange);font-size:.72rem;font-weight:900;letter-spacing:.12em}.panel-heading h2{margin:5px 0 0;font-size:clamp(1.6rem,3vw,2.2rem)}.panel-heading p{margin:0;color:var(--muted);font-size:.85rem}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:26px 0}.setting-group{display:grid;gap:10px}.setting-group>span{font-size:.82rem;font-weight:900}.segmented-control{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:6px;border-radius:18px;background:#f4f0ea}.segmented-control button{min-height:46px;padding:8px 10px;border:0;border-radius:13px;color:var(--muted);background:transparent;cursor:pointer;font-size:.86rem;font-weight:800}.segmented-control button.is-selected{color:#fff;background:var(--forest);box-shadow:0 6px 16px rgba(45,106,79,.2)}.setup-summary{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 24px;border-radius:22px;background:var(--mint)}.setup-summary>div{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 12px}.setup-summary>div>span{grid-column:1/-1;color:var(--forest);font-size:.75rem;font-weight:900}.setup-summary strong{font-size:1.6rem}.setup-summary small{color:var(--muted)}.next-button,.primary-button,.secondary-button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:24px;padding:12px 22px;border-radius:18px;cursor:pointer;font-weight:900}.next-button,.primary-button{border:0;color:#fff;background:var(--orange);box-shadow:0 10px 24px rgba(244,135,43,.25)}.primary-button:disabled{cursor:not-allowed;opacity:.45}.secondary-button{border:2px solid var(--forest);color:var(--forest);background:#fff}.screen-toolbar{display:flex;width:100%;justify-content:flex-start;margin-bottom:14px}.demo-card>.screen-toolbar{margin:-18px 0 24px}.back-button{display:inline-flex;min-height:46px;align-items:center;gap:9px;padding:9px 16px;border:2px solid rgba(45,106,79,.22);border-radius:15px;color:var(--forest);background:#fff;cursor:pointer;font-weight:900}.back-button:hover{border-color:var(--forest);background:var(--mint)}.demo-screen,.result-screen{display:grid;min-height:calc(100vh - 190px);place-items:center}.demo-card{width:min(1020px,100%);padding:clamp(28px,5vw,58px);text-align:center}.demo-card>h1{font-size:clamp(2rem,4vw,3.5rem)}.demo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 24px}.demo-steps article{position:relative;min-height:205px;padding:28px 20px 22px;border-radius:22px;background:var(--mint)}.step-number{position:absolute;top:12px;left:14px;color:var(--forest);font-size:.7rem;font-weight:900}.step-icon{font-size:2.5rem}.demo-steps h2{margin:12px 0 6px}.demo-steps p{margin:0;color:var(--muted);line-height:1.6}.demo-example{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px;border:1px dashed rgba(45,106,79,.25);border-radius:22px}.listen-button,.replay-button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;color:#fff;background:var(--forest);cursor:pointer;font-weight:900}.listen-button{padding:12px 18px}.demo-emoji{font-size:3rem}.demo-example>div{display:flex;gap:8px}.demo-example>div span{padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:900}.demo-start{margin-top:25px}.game-screen{width:min(1060px,100%);margin:0 auto}.game-progress{display:grid;gap:10px;margin-bottom:18px}.game-progress>div:first-child{display:flex;align-items:end;justify-content:space-between}.game-progress>div:first-child>span{color:var(--forest);font-size:.82rem;font-weight:900}.game-progress strong{font-size:1.45rem}.game-progress strong small{color:var(--muted);font-size:.8rem}.progress-track{height:10px;overflow:hidden;border-radius:999px;background:rgba(45,106,79,.1)}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--teal),var(--orange));transition:width .28s ease}.question-card{padding:clamp(24px,5vw,48px)}.question-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}.question-heading h1{margin:12px 0 0;font-size:clamp(1.65rem,3.3vw,2.65rem);line-height:1.25}.mode-badge{display:inline-flex;padding:6px 11px;border-radius:999px;font-size:.72rem;font-weight:900}.mode-sound-to-word{color:var(--forest);background:var(--mint)}.mode-homophone-context{color:#8b4b0f;background:#fff0d8}.replay-button{flex:0 0 auto;padding:12px 17px}.question-focus{display:grid;min-height:210px;place-items:center;margin:30px 0;border-radius:26px;background:radial-gradient(circle at center,#fff 0 33%,transparent 34%),var(--mint)}.picture-clue{display:grid;place-items:center;gap:5px}.picture-clue>span{font-size:clamp(5.4rem,10vw,8rem);filter:drop-shadow(0 10px 8px rgba(61,32,16,.08))}.picture-clue small,.sentence-clue small{color:var(--muted);font-weight:800}.sentence-clue{padding:26px;text-align:center}.sentence-clue p{margin:12px 0 0;font-size:clamp(1.9rem,4vw,3.15rem);font-weight:900;line-height:1.5}.answer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.answer-grid button{position:relative;min-height:104px;padding:18px 16px;border:2px solid rgba(45,106,79,.16);border-radius:22px;background:#fff;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.answer-grid button:not(:disabled):hover{border-color:var(--orange);box-shadow:0 10px 24px rgba(244,135,43,.12);transform:translateY(-3px)}.answer-grid button:disabled{cursor:default}.answer-grid button>span{position:absolute;top:10px;left:12px;display:grid;width:24px;height:24px;place-items:center;border-radius:8px;color:var(--forest);background:var(--mint);font-size:.68rem;font-weight:900}.answer-grid button strong{font-size:clamp(1.65rem,3vw,2.45rem)}.answer-grid button.is-chosen{border-color:var(--orange);background:#fff8ee}.answer-grid button.is-correct{border-color:var(--forest);background:var(--mint)}.question-tip{display:flex;justify-content:center;gap:8px;color:var(--muted);font-size:.84rem}.feedback-card,.question-tip{align-items:center;margin-top:18px}.feedback-card{position:relative;display:grid;grid-template-columns:122px minmax(0,1fr) auto;gap:22px;overflow:hidden;padding:22px 24px 22px 8px;border-radius:26px;box-shadow:var(--shadow)}.feedback-found{background:#dff4e9}.feedback-clue{background:#fff1dc}.feedback-card>img{width:140px;height:140px;align-self:end;object-fit:contain;transform:translateY(22px)}.feedback-copy{min-width:0}.feedback-copy>span{color:var(--forest);font-size:.78rem;font-weight:900}.answer-reading{display:flex;align-items:baseline;gap:12px;margin-top:3px}.answer-reading strong{font-size:1.65rem}.answer-reading small{color:var(--muted);font-size:.96rem}.choice-explanation,.correct-line{margin:6px 0 0;font-weight:800;line-height:1.55}.correct-line b{color:var(--orange)}.word-note{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:8px;color:var(--muted);font-size:.82rem}.word-note p{margin:0}.word-note span{padding-left:13px;border-left:2px solid rgba(45,106,79,.22)}.next-button{min-width:166px}.result-card{width:min(1080px,100%);padding:clamp(28px,5vw,58px)}.result-celebration{text-align:center}.result-celebration h1{font-size:clamp(2.1rem,4vw,3.7rem)}.result-celebration p{margin:0;color:var(--muted)}.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:34px 0 20px}.result-stats article{display:grid;min-height:154px;place-items:center;align-content:center;gap:3px;border-radius:22px;background:var(--mint);text-align:center}.result-stats article>span{font-size:1.6rem}.result-stats strong{font-size:2.1rem}.result-stats small{color:var(--muted);font-weight:800}.result-lists{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.result-lists article{padding:22px;border:1px solid var(--line);border-radius:22px}.result-lists article>div:first-child>span{color:var(--orange);font-size:.72rem;font-weight:900}.result-lists h2{margin:4px 0 14px;font-size:1.05rem}.word-pills{display:flex;flex-wrap:wrap;gap:8px}.word-pills span{padding:8px 11px;border-radius:999px;font-size:.85rem;font-weight:900}.ready-pills span{color:var(--forest);background:var(--mint)}.review-pills span{color:#8b4b0f;background:#fff0d8}.result-actions{gap:12px;margin-top:28px}.brand-footer,.result-actions{display:flex;justify-content:center}.brand-footer{align-items:center;gap:16px;padding:22px 0 0;color:var(--muted);font-size:.78rem}.brand-footer img{width:72px;height:40px;object-fit:contain}@media (max-width:820px){.app-shell{width:min(100% - 22px,720px);padding-top:10px}.topbar{border-radius:18px}.edition-pill{display:none}.demo-screen,.game-screen,.result-screen,.setup-screen{padding-top:18px}.setup-hero{grid-template-columns:1fr;background:linear-gradient(180deg,rgba(255,254,251,.96) 0 58%,rgba(204,235,220,.86) 58%),var(--paper)}.hero-copy{padding:38px 26px 12px}.detective-stage{min-height:330px}.detective-stage img{right:9%;max-height:340px}.result-lists,.settings-grid{grid-template-columns:1fr}.question-heading,.setup-summary{align-items:stretch;flex-direction:column}.setup-summary{display:grid}.demo-steps{grid-template-columns:1fr}.demo-steps article{min-height:auto}.demo-example{flex-wrap:wrap}.answer-grid{grid-template-columns:1fr}.answer-grid button{min-height:82px}.feedback-card{grid-template-columns:92px minmax(0,1fr);padding-right:18px}.feedback-card>img{width:105px;height:120px}.feedback-card .next-button{grid-column:1/-1}.result-stats{grid-template-columns:repeat(2,1fr)}}@media (max-width:520px){.hub-home-link{padding-inline:10px;font-size:.7rem}.brand-button small,.sound-toggle{font-size:0}.sound-toggle span{font-size:1rem}.hero-copy h1{font-size:2.25rem}.settings-grid{gap:15px}.segmented-control{grid-template-columns:1fr}.panel-heading{align-items:start;flex-direction:column}.demo-example>div{width:100%;justify-content:center}.question-card{border-radius:22px}.question-heading{display:grid}.replay-button{justify-self:start}.sentence-clue p{font-size:1.65rem}.feedback-card{grid-template-columns:1fr;padding:20px}.feedback-card>img{display:none}.result-stats{gap:8px}.result-stats article{min-height:132px}.result-actions{display:grid}.brand-footer{align-items:center;flex-direction:column;text-align:center}}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}