:root{--teal:#0b7a85;--teal-dark:#075a62;--aqua:#2bb3bd;--light-teal:#ddf3f3;--pale-teal:#bfe3e5;--fuchsia:#c81dc1;--fuchsia-soft:#f7ddf6;--ink:#0f2e33;--muted:#4a6468;--bg:#f3fafa;--line:#d5e8e9;--field:#b9d6d8;--white:#ffffff;--danger:#b42318;--danger-soft:#fdecea;--radius:16px;--font-display:"Fredoka",system-ui,sans-serif;--font-body:"Nunito",system-ui,sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5}a{color:var(--teal)}a:hover{color:var(--teal-dark)}h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0}h1{font-size:34px}h2{font-size:22px}p{margin:0}:focus-visible{outline:3px solid var(--fuchsia);outline-offset:2px}.page{max-width:1100px;margin:0 auto;padding:32px 20px 64px;display:flex;flex-direction:column;gap:24px}.narrow{max-width:460px}.stack{display:flex;flex-direction:column;gap:14px}.row,.spread{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.spread{justify-content:space-between}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:16px;gap:16px}.topbar{background:var(--white);border-bottom:1px solid var(--line);padding:12px 20px}.topbar-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}.logo{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--ink)}.logo-word{font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1}.card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px}.card-link{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}.card-link:hover{border-color:var(--teal);color:inherit;transform:translateY(-1px)}.eyebrow{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.eyebrow,.muted{color:var(--muted)}.small{font-size:14px}label{font-weight:700;font-size:15px;display:flex;flex-direction:column;gap:6px}input[type=email],input[type=password],input[type=text],select{height:48px;padding:0 14px;border:1.5px solid var(--field);border-radius:12px;font:inherit;font-weight:400;color:var(--ink);background:var(--white);width:100%}input.code-input{font-family:var(--font-display);font-size:28px;letter-spacing:.15em;text-transform:uppercase;height:64px;text-align:center}.hint{font-weight:400;font-size:14px;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:14px;border:none;cursor:pointer;font:inherit;font-weight:800;font-size:16px;text-decoration:none;background:var(--fuchsia)}.btn,.btn:hover{color:var(--white)}.btn:hover{filter:brightness(.95)}.btn-secondary{background:var(--white);color:var(--ink);border:1.5px solid var(--field)}.btn-secondary:hover{color:var(--ink);border-color:var(--teal)}.btn-small{height:38px;padding:0 14px;font-size:14px;border-radius:10px}.btn-link{background:none;border:none;color:var(--teal);padding:0;height:auto;font-weight:700;text-decoration:underline;cursor:pointer;font:inherit}.btn-danger{background:var(--white);color:var(--danger);border:1.5px solid #f1b8b2}.btn-danger:hover{color:var(--danger);border-color:var(--danger)}.btn-block{width:100%}.alert{background:var(--danger-soft);color:var(--danger)}.alert,.notice{padding:12px 16px;border-radius:12px;font-weight:700}.notice{background:var(--light-teal);color:var(--ink)}.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:800}.badge-pending{background:#fff1d6;color:#7a4b00}.badge-approved{background:var(--light-teal);color:var(--teal-dark)}.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh}.hero-panel{background:var(--teal);color:var(--white);padding:48px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}.hero-panel h1{font-size:44px;max-width:520px}.hero-side{padding:48px 32px;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:520px;width:100%;margin:0 auto}@media (max-width:820px){.hero{grid-template-columns:1fr;min-height:auto}.hero-panel{padding:32px 20px}.hero-panel h1{font-size:34px}.hero-side{padding:28px 16px 48px}}.code-box{background:var(--teal);color:var(--white);border-radius:20px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between}.code-big{font-family:var(--font-display);font-weight:600;font-size:52px;letter-spacing:.08em;line-height:1}.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.roster li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.roster li:last-child{border-bottom:none}.roster-name{font-weight:800;font-size:17px}details.inline>summary{cursor:pointer;color:var(--teal);font-weight:700;font-size:14px;list-style:none}details.inline>summary::-webkit-details-marker{display:none}details.inline[open]{flex-basis:100%}.inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:8px}.inline-form label{flex:1 1 200px}.student-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px;gap:20px}.student-card{width:100%;max-width:420px}.waiting-dot{width:72px;height:72px;border-radius:50%;background:var(--light-teal);display:flex;align-items:center;justify-content:center;margin:0 auto;animation:bob 2.4s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media (prefers-reduced-motion:reduce){.waiting-dot{animation:none}}.navlink{padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:700;font-size:15px}.navlink:hover{color:var(--ink);background:var(--bg)}.navlink-on{background:var(--light-teal);color:var(--ink);font-weight:800}textarea{width:100%;padding:14px;border:1.5px solid var(--field);border-radius:14px;font:inherit;font-weight:400;font-size:16px;line-height:1.6;color:var(--ink);resize:vertical;background:var(--white)}.two-col{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-gap:24px;gap:24px;align-items:start}@media (max-width:900px){.two-col{grid-template-columns:1fr}}.line-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.line-list li{display:flex;gap:10px;align-items:baseline}.line-num{flex:0 0 28px;font-size:13px;font-weight:800;color:var(--muted);text-align:right}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.gloss-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:15px}.gloss-chip button{width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1}.gloss-chip button:hover{background:var(--danger-soft);color:var(--danger)}.q-card{border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}.q-opt{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--bg);margin:2px 4px 2px 0;font-size:14px}.q-opt-right{background:var(--light-teal);font-weight:800}.check-row{display:flex;gap:10px;align-items:center;font-weight:700;flex-direction:row}.check-row input{width:20px;height:20px;accent-color:var(--teal)}.hl{border-bottom:2px dotted var(--teal)}.player{width:100%;max-width:560px;min-height:100vh;margin:0 auto;display:flex;flex-direction:column;background:var(--bg)}.player-head{position:-webkit-sticky;position:sticky;top:0;z-index:2;background:var(--white);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:12px}.progress{flex:1 1 auto;background:#e4efef;overflow:hidden}.progress,.progress>div{height:12px;border-radius:999px}.progress>div{background:var(--teal);transition:width .3s}.points{display:flex;align-items:center;gap:4px;font-weight:800;color:#85137f}.reader{flex:1 1 auto;padding:18px 16px 24px;display:flex;flex-direction:column;gap:14px}.sentence{font-size:21px;line-height:1.7;margin:0}.sentence-old{color:var(--muted);font-size:18px}.word{display:inline;margin:0;padding:0;border:none;background:transparent;font:inherit;color:inherit;cursor:pointer;border-bottom:2px dotted var(--teal)}.answered-chip{align-self:center;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700}.player-foot{bottom:0;background:var(--white);border-top:1px solid var(--line);padding:14px 16px 22px;flex-direction:column;gap:12px}.gloss-bar,.player-foot{position:-webkit-sticky;position:sticky;display:flex}.gloss-bar{margin:0 16px 8px;padding:10px 14px;border-radius:14px;background:var(--ink);color:var(--white);justify-content:space-between;align-items:center;gap:10px;bottom:150px}.opt-btn{flex:1 1 140px;min-height:52px;padding:8px 14px;border:2px solid var(--field);border-radius:14px;background:var(--white);color:var(--ink);font:inherit;font-size:17px;font-weight:800;cursor:pointer}.opt-btn:hover{border-color:var(--teal)}.listen-btn{flex:0 0 56px;height:56px;border:2px solid var(--field);border-radius:16px;background:var(--white);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer}.story-card{text-decoration:none;color:inherit}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));grid-gap:14px;gap:14px}.stat{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px}.stat-num{font-family:var(--font-display);font-weight:600;font-size:32px;line-height:1.1}.stat-label{color:var(--muted);font-weight:700}.suggest{background:var(--teal);color:var(--white);border-radius:20px;padding:22px 24px;gap:10px}.suggest,.suggest ul{display:flex;flex-direction:column}.suggest ul{margin:0;padding-left:22px;gap:6px}.bar-track{background:#e4efef;overflow:hidden}.bar-fill,.bar-track{height:10px;border-radius:999px}.word-row{display:grid;grid-template-columns:minmax(80px,140px) minmax(0,1fr) 32px;grid-gap:10px;gap:10px;align-items:center}.table-wrap{overflow-x:auto}table.data{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}table.data th{text-align:left;color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1.5px solid var(--line)}table.data td{padding:10px;border-bottom:1px solid #e4efef}table.data .num{text-align:right}.pill{display:inline-block;padding:4px 14px;border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;border:1.5px solid var(--field);color:var(--muted);background:var(--white)}.pill-on{border:2px solid var(--teal);background:var(--light-teal);color:var(--ink);font-weight:800}.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.filters label{min-width:200px}.game{width:100%;max-width:560px;min-height:100vh;margin:0 auto;background:var(--bg)}.game,.game-head{display:flex;flex-direction:column}.game-head{background:var(--white);border-bottom:1px solid var(--line);padding:14px 16px 12px;gap:12px;position:-webkit-sticky;position:sticky;top:0;z-index:2}.game-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--muted);text-decoration:none;border-radius:12px}.seg{display:grid;grid-gap:4px;gap:4px;padding:4px;border-radius:14px;background:#e4efef}.seg button{height:42px;border:none;border-radius:10px;background:transparent;color:var(--muted);font:inherit;font-size:15px;font-weight:700;cursor:pointer}.seg button.seg-on{background:var(--white);color:var(--ink);font-weight:800}.seg button:disabled{opacity:.45;cursor:not-allowed}.game-body{padding:18px 16px 26px;gap:14px}.flashcard,.game-body{flex:1 1 auto;display:flex;flex-direction:column}.flashcard{min-height:320px;position:relative;border-radius:24px;padding:28px 22px 48px;align-items:center;justify-content:center;gap:18px;text-align:center;cursor:pointer;font:inherit}.flashcard-front{border:2px solid var(--line);background:var(--white);color:var(--ink)}.flashcard-back{border:none;background:var(--teal);color:var(--white)}.mark{background:var(--fuchsia-soft);color:#85137f;font-weight:800;border-radius:6px;padding:0 4px}.tile{width:100%;min-height:64px;padding:10px 12px;border-radius:14px;font:inherit;font-size:17px;font-weight:800;text-align:center;cursor:pointer;border:2px solid var(--line);background:var(--white);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px}.tile-sentence{min-height:84px;font-size:15px}.tile-selected{border-color:var(--teal);box-shadow:0 0 0 3px var(--pale-teal)}.tile-wrong{border-color:var(--fuchsia);background:var(--fuchsia-soft)}.tile-done{border-color:var(--light-teal);background:var(--light-teal);color:#4a8a90;cursor:default}.icon-btn{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer}.game-body .progress{flex:0 0 12px}.cloze{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}.cloze-grid{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-gap:24px;gap:24px;padding:24px;align-items:start}@media (max-width:1000px){.cloze-grid{grid-template-columns:1fr}}.cloze-text{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:28px 32px;font-size:28px;line-height:2}.cloze-text p{margin:0 0 8px}.cloze-blank{display:inline-block;height:.95em;vertical-align:-.1em;border-radius:6px;background:var(--light-teal);border-bottom:3px solid var(--teal)}.cloze-word{font-weight:700}.cloze-new{font-weight:800;background:var(--fuchsia-soft);color:#85137f;border-radius:6px;padding:0 4px}.cloze-click{font:inherit;color:inherit;cursor:pointer;border-top:none;border-left:none;border-right:none;padding:0;margin:0}button.cloze-word.cloze-click{font-weight:700;background:transparent;border-bottom:none;border-radius:6px}button.cloze-word.cloze-click:hover{background:var(--light-teal)}button.cloze-blank.cloze-click:hover{background:var(--teal)}.race{min-height:100vh;background:var(--ink);padding:20px;display:flex;flex-direction:column;gap:16px}.race,.race h1,.race h2{color:#fff}.race-lobby{display:flex;flex-wrap:wrap;gap:20px}.race-join{background:var(--teal);padding:32px;gap:12px;justify-content:center}.race-join,.race-teams{flex:1 1 420px;border-radius:24px;display:flex;flex-direction:column}.race-teams{background:#fff;color:var(--ink);padding:24px;gap:14px}.race-team-grid{display:grid;grid-gap:10px;gap:10px}.race-team-card{padding:12px 14px;border-radius:14px;background:var(--bg);border-left:8px solid;color:var(--ink)}.race-lanes{background:#0b5c66;border-radius:24px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}.race-lane-row{display:flex;align-items:center;gap:12px}.race-team-name{flex:0 0 90px;font-weight:800;font-size:17px}.race-lane{flex:1 1 auto;position:relative;height:52px;border-radius:12px;background:#0e6e79;border-right:6px dashed var(--fuchsia-soft)}.race-boat{position:absolute;top:4px;transition:left .8s ease}.race-score{flex:0 0 44px;text-align:right;font-size:22px}.race-score,.race-timer{font-family:var(--font-display);font-weight:600}.race-timer{width:64px;height:64px;border-radius:50%;border:4px solid var(--fuchsia-soft);display:flex;align-items:center;justify-content:center;font-size:24px}.race-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-gap:12px;gap:12px}.race-option{display:flex;align-items:center;gap:14px;min-height:84px;padding:0 22px;border-radius:18px;color:#fff;font-size:28px;font-weight:800}.race-reveal{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}.race-panel{background:#fff;color:var(--ink);border-radius:24px;padding:24px;gap:10px}.race-panel,.race-phone{display:flex;flex-direction:column}.race-phone{min-height:100vh;max-width:520px;margin:0 auto;background:var(--bg)}.race-phone-opt{display:flex;align-items:center;gap:14px;min-height:72px;padding:0 20px;border:none;border-radius:18px;color:#fff;font:inherit;font-size:21px;font-weight:800;text-align:left;cursor:pointer}.zh-text{font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,system-ui,sans-serif}ruby{ruby-position:over}rt.py{font-family:var(--font-body);font-size:.5em;font-weight:700;color:var(--teal)}.sentence:has(ruby){line-height:2.3;font-size:26px}.sentence-old:has(ruby){font-size:22px}.reread-burst{position:relative;width:130px;height:120px}.reread-burst .rb{position:absolute;animation:rb-pop .7s cubic-bezier(.2,1.6,.4,1) both}.reread-burst .rb1{left:30px;top:10px}.reread-burst .rb2{left:0;top:64px;animation-delay:.15s}.reread-burst .rb3{left:100px;top:30px;animation-delay:.3s}.reread-title{color:#85137f;font-size:44px;animation:rb-pop .6s cubic-bezier(.2,1.6,.4,1) .1s both}@keyframes rb-pop{0%{transform:scale(0) rotate(-30deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@media (prefers-reduced-motion:reduce){.reread-burst .rb,.reread-title{animation:none}}.race-boat svg{animation:racer-glide 1.4s ease-in-out infinite alternate;transform-origin:50% 50%}@keyframes racer-glide{0%{transform:translateY(3px) rotate(2deg)}to{transform:translateY(-3px) rotate(-3deg)}}@media (prefers-reduced-motion:reduce){.race-boat svg{animation:none}}.dialogue{display:flex;flex-direction:column;gap:6px}.bubble-row{display:flex;align-items:flex-end;gap:10px}.bubble-avatar{flex:none;width:36px;height:36px;border-radius:50%;color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}.bubble{background:#fff;border:2px solid;border-radius:18px 18px 18px 4px;padding:8px 14px}.dialogue-old .bubble-avatar{opacity:.6}.dialogue-old .bubble{border-width:1px}details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}details.fold>summary::-webkit-details-marker{display:none}details.fold>summary:before{content:"▸";color:var(--teal);font-size:18px;transition:transform .15s}details.fold[open]>summary:before{transform:rotate(90deg)}details.fold>:not(summary){margin-top:12px}details.fold>summary h2{margin:0}.zh-split{font-size:22px;line-height:2.1;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px}.zh-word{font:inherit;background:var(--light-teal);border:1px solid var(--pale-teal);border-radius:8px;padding:0 6px;cursor:pointer;color:var(--ink)}.zh-word:hover{border-color:var(--teal)}.zh-word-open{display:inline-flex;align-items:center;background:var(--fuchsia-soft);border-color:var(--fuchsia);cursor:default}.zh-cut,.zh-join{font:inherit;font-size:13px;line-height:1;width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;padding:0;margin:0 2px}.zh-join{background:transparent;color:var(--muted)}.zh-join:hover{background:var(--teal);color:#fff}.zh-cut{background:#fff;color:var(--fuchsia)}.zh-cut:hover{background:var(--fuchsia);color:#fff}