:root{font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,sans-serif;color:#315d90;background:#eef8ff;font-weight:500}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#dff3ff,#f8fcff 55%,#fff8ef)}button,input{font:inherit}.app-shell{min-height:100vh;padding:18px}.topbar,main{width:min(1180px,100%);margin:auto}.topbar{position:sticky;top:10px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-radius:26px;background:#ffffffd9;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 45px #4680be29}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#6cc8ff,#72e0ff);color:#fff;font-size:1.35rem;font-weight:900}.brand strong,.brand span{display:block}.brand strong{font-size:1.25rem}.brand span{font-size:.9rem;color:#6987aa}.stats{display:flex;gap:10px;flex-wrap:wrap}.stats span,.time-chip,.chips span{padding:9px 13px;border-radius:999px;background:#fff;font-weight:800;box-shadow:0 8px 22px #4680be1f}main{display:grid;gap:18px;margin-top:20px}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;padding:28px;border-radius:34px;background:linear-gradient(135deg,#70c8ff,#8ae5ff 40%,#ffe8b6);box-shadow:0 22px 55px #4c8bcd2e;overflow:hidden}.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:#ffffff80;font-weight:900}.hero h1{margin:10px 0 8px;font-size:clamp(2.2rem,5vw,3.6rem);color:#fff;text-shadow:0 5px 14px rgba(38,91,145,.18)}.hero p{max-width:45rem;color:#245d88;font-size:1.05rem}.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.mascots{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}.mascot{width:130px;height:150px;border-radius:36px;background:#ffffffe0;box-shadow:0 18px 38px #31659b2e;display:grid;place-items:center;font-size:2.4rem;font-weight:900;animation:float 3s ease-in-out infinite}.mascot small{display:block;font-size:.9rem;color:#6d88a8}.tabs{display:flex;gap:10px;flex-wrap:wrap;padding:10px;border-radius:22px;background:#ffffffd6;box-shadow:0 16px 40px #4c8bcd24}.tabs button,.table-picker button{border:0;border-radius:16px;padding:12px 15px;background:transparent;color:#53779f;font-weight:900;cursor:pointer}.tabs button.active,.table-picker button.active{background:linear-gradient(135deg,#6ec8ff,#529fff);color:#fff;box-shadow:0 10px 22px #5291e140}.panel{padding:24px;border-radius:30px;background:#ffffffe6;box-shadow:0 18px 45px #4c8bcd24}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.section-head h2{margin:0;font-size:1.7rem}.section-head p{margin:6px 0 0;color:#6987aa}.question-card{padding:22px;border-radius:26px;background:linear-gradient(180deg,#f8fcff,#fffdf7)}.subject-label{display:inline-flex;padding:7px 11px;border-radius:999px;background:#eaf6ff;font-weight:900}.question-card h3{font-size:1.6rem}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option-grid button{padding:15px;border-radius:18px;border:2px solid transparent;background:#fff;color:#315d90;font-weight:800;cursor:pointer}.option-grid button.selected{border-color:#63b9ff;background:#edf8ff}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.primary,.secondary{border:0;border-radius:17px;padding:13px 18px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,#69c8ff,#4f9fff);color:#fff}.secondary{background:#fff;color:#426b99;border:1px solid #d8e8f6}.feedback{margin-top:16px;padding:15px;border-radius:20px;background:#eef9ff;font-weight:800}.subject-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.subject-grid article{padding:20px;border-radius:26px;box-shadow:0 16px 38px #4c8bcd1f}.subject-grid h3{margin:6px 0;font-size:1.4rem}.subject-grid p{color:#6987aa}.subject-icon{font-size:2rem}.bar{height:13px;border-radius:999px;background:#eaf1f7;overflow:hidden}.bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(135deg,#ffd166,#ffb057)}.multiply-panel{background:linear-gradient(180deg,#f8ffef,#fffdf5)}.table-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.table-picker button{background:#fff;box-shadow:0 8px 20px #5b873e1a}.equation{display:flex;justify-content:center;align-items:center;gap:14px;margin:28px 0;font-size:clamp(2.5rem,8vw,5.3rem);font-weight:900;color:#4f722f}.equation input{width:150px;height:105px;border-radius:24px;border:4px solid #9bd270;text-align:center;font-size:inherit;font-weight:900;color:#4f722f}.times-summary{text-align:center;margin-top:14px}.times-table{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.times-table div{padding:14px;border-radius:18px;background:#fff7d7;text-align:center}.reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.reward-grid article{padding:18px;border-radius:22px;background:#fff;border:1px solid #e5eef6}.pin{padding:12px;border-radius:16px;border:2px solid #d8e8f6;width:120px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@media (max-width:900px){.hero,.subject-grid,.reward-grid{grid-template-columns:1fr}.table-picker{grid-template-columns:repeat(4,1fr)}.times-table{grid-template-columns:repeat(3,1fr)}}@media (max-width:650px){.app-shell{padding:12px}.topbar{align-items:flex-start;flex-direction:column}.option-grid{grid-template-columns:1fr}.table-picker{grid-template-columns:repeat(3,1fr)}.times-table{grid-template-columns:repeat(2,1fr)}.section-head{flex-direction:column}.equation{gap:7px}.equation input{width:95px;height:80px}.hero{padding:20px}.mascot{width:105px;height:125px}}.action-chips button{padding:9px 13px;border:0;border-radius:999px;background:#fff;color:#315d90;font-weight:900;box-shadow:0 8px 22px #4680be1f;cursor:pointer}.action-chips button:active,.subject-card:active,.reward-grid button:active,.times-table button:active,.mascot:active{transform:scale(.97)}.subject-card{padding:20px;border:0;border-radius:26px;box-shadow:0 16px 38px #4c8bcd1f;text-align:left;color:#315d90;cursor:pointer}.subject-card h3{margin:6px 0;font-size:1.4rem}.subject-card p{color:#6987aa}.reward-grid button,.reward-grid article{padding:18px;border-radius:22px;background:#fff;border:1px solid #e5eef6;color:#315d90;text-align:left;cursor:pointer}.times-table button{padding:14px;border:0;border-radius:18px;background:#fff7d7;color:#4f722f;text-align:center;cursor:pointer}.file-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.mascot{border:0;color:#315d90;cursor:pointer}.mascot--star{color:#f3b71f}.mascot--bear{color:#8c633c}.tabs button,.action-chips button,.subject-card,.reward-grid button,.times-table button,.primary,.secondary,.mascot{transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}.tabs button:hover,.action-chips button:hover,.subject-card:hover,.reward-grid button:hover,.times-table button:hover,.primary:hover,.secondary:hover{filter:brightness(.98);transform:translateY(-2px)}@media (max-width:650px){.action-chips button{flex:1 1 42%;min-height:44px}.subject-card{min-height:165px}.reward-grid button,.reward-grid article{min-height:120px}.stats span{font-size:.9rem}}