html,body{height:100%;margin:0}body{display:block;place-items:unset;min-width:320px;min-height:100vh;overflow-y:scroll;overflow-x:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fff;color:#2e2e2e}#app{width:100%;max-width:none;margin:0;padding:0;text-align:left}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}:root{--accent:#6BCF9C;--lime: var(--accent);--dark:#2E2E2E;--bg:#FFFFFF;--container: 800px;--panel:#ffffff;--hero: rgba(107,207,156,.12);--hero2: rgba(107,207,156,.18);--grey: rgba(0,0,0,.04);--grey2: rgba(0,0,0,.06);--b1: rgba(46,46,46,.12);--b2: rgba(46,46,46,.16);--shadow: 0 10px 30px rgba(0,0,0,.06);--r: 22px;--rIn: 18px;--ok: #16a34a;--bad: #ef4444}html{overflow-y:scroll;scrollbar-gutter:stable}*{box-sizing:border-box}html,body{height:100%;max-width:100%;overflow-x:hidden}body{margin:0;background:var(--bg);color:var(--dark);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button{font-family:inherit}a{color:inherit}.container{width:100%;max-width:var(--container);margin:0 auto;padding-left:16px;padding-right:16px}.page{padding-top:16px}.topbar{position:sticky;top:0}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:9999;background:var(--bg);border-bottom:1px solid rgba(46,46,46,.08)}.topbarInner{padding:10px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:nowrap}.logo{width:76px;height:76px;display:block}.brand{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.brandText{line-height:1.05;font-size:2em}.brandName{font-weight:1000;letter-spacing:-.2px}.brandSub{font-size:13px;opacity:.7;margin-top:2px}.right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}.page{width:100%;padding-top:16px;padding-bottom:24px}.chips{display:flex;gap:8px;flex-wrap:nowrap;white-space:nowrap}.chip{border:1px solid var(--b2);background:#fff;border-radius:14px;padding:8px 12px;font-weight:950;font-size:16px;cursor:pointer;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease,transform .12s ease}.chip:hover{border-color:#6bcf9cf2;background:#6bcf9c1a;box-shadow:0 6px 16px #6bcf9c24}.chip:active{transform:translateY(1px)}.chip.on{border-color:#6bcf9cfa;background:#6bcf9c2e;box-shadow:0 10px 24px #6bcf9c2e}.badgeBtn{border:1px solid var(--b2);background:#fff;border-radius:14px;padding:8px 12px;font-weight:1000;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease;font-size:16px}.badgeBtn:hover{border-color:#6bcf9cf2;box-shadow:0 6px 16px #6bcf9c1f}.badgeBtn:active{transform:translateY(1px)}.card{width:100%;border:1px solid var(--b1);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow);padding:18px}.hero{width:100%;border-radius:var(--rIn);background:var(--hero);padding:16px}.heroTop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}.h1{margin:0;font-size:30px;letter-spacing:-.6px}.h2{margin:14px 0 10px;font-size:22px}.tag{margin:6px 0 0;opacity:.82}.qrIcon{display:inline-block;margin-right:8px;transform:translateY(1px)}.counts{display:flex;gap:8px}.countBtn{padding:8px 12px;border-radius:12px;border:1px solid var(--b2);background:#fff;font-weight:1000;cursor:pointer;min-width:48px;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease,transform .12s ease}.countBtn:hover{border-color:#6bcf9cf2;box-shadow:0 6px 14px #6bcf9c1f}.countBtn:active{transform:translateY(1px)}.countBtn.on{border-color:#6bcf9cf2;background:var(--hero2)}.play{width:100%;margin-top:12px;padding:16px;border:0;border-radius:18px;background:var(--lime);color:#083322;font-weight:700;font-size:30px;cursor:pointer;text-align:left;box-shadow:0 14px 30px #6bcf9c38;transition:filter .12s ease,transform .12s ease,box-shadow .12s ease}.play:hover{filter:brightness(.985);box-shadow:0 16px 34px #6bcf9c42}.play:active{transform:translateY(1px)}.playSub{display:block;font-size:16px;opacity:.78;margin-top:4px;font-weight:600}.progressBox{margin-top:12px;border-radius:16px;background:#ffffffb3;border:1px solid rgba(0,0,0,.1);padding:12px}.progressRow{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.mini{font-size:12px;font-weight:900;opacity:.8}.bar{width:100%;height:12px;border-radius:999px;background:#0000001a;overflow:hidden}.barFill{height:100%;border-radius:999px;background:var(--lime)}.bar.small{height:10px;margin-top:8px}.previewRow{margin-top:10px;display:flex;align-items:center;gap:10px}.previewStrip{display:flex;gap:10px;flex-wrap:wrap;overflow:visible;padding-bottom:0}.badgePreview{display:flex;gap:8px;align-items:center;border:1px solid rgba(0,0,0,.1);background:#00000008;border-radius:14px;padding:8px 10px;white-space:nowrap;max-width:100%;white-space:normal}.badgePreview.locked{opacity:.45;filter:grayscale(1)}.badgeIcon{font-size:18px}.badgeText{font-size:12px;font-weight:900;opacity:.85}.linkBtn{margin-left:auto;background:transparent;border:0;cursor:pointer;font-weight:1000;opacity:.85}.linkBtn:hover{opacity:1;text-decoration:underline}.grid{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.tile{text-align:left;padding:14px;border-radius:16px;border:1px solid rgba(46,46,46,.14);background:#6bcf9c0f;cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.tile:hover{border-color:#6bcf9cf2;box-shadow:0 6px 16px #6bcf9c2e}.tile:active{transform:translateY(1px)}.tileTitle{display:block;font-weight:1000;font-size:16px}.tileSub{display:block;margin-top:4px;opacity:.78;font-size:12px;font-weight:850}.note{margin-top:12px;font-size:12px;opacity:.7}.toprow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.back{background:transparent;border:0;cursor:pointer;font-weight:1000;opacity:.85}.back:hover{opacity:1;text-decoration:underline}.topics{width:100%;display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}.topic{padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.15);background:#fff;cursor:pointer;font-weight:900;text-align:left;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.topic:hover{border-color:#6bcf9cf2;box-shadow:0 6px 14px #6bcf9c1f}.topic:active{transform:translateY(1px)}.topic.all{border-color:#6bcf9cf2;background:var(--hero2)}.drillTop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.drillMeta{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.exit{background:transparent;border:0;cursor:pointer;font-weight:700;color:#6bcf9cf2;padding:6px 8px;border-radius:10px;transition:background .12s ease,transform .12s ease}.exit:hover{background:#6bcf9c1a;text-decoration:underline}.exit:active{transform:translateY(1px)}.q{text-align:left;margin:6px 0 0;font-size:19px;padding:12px}.options{width:100%;display:grid;gap:10px;margin-top:14px}.option{padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.15);background:#fff;cursor:pointer;font-weight:600;text-align:left;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.option:hover{border-color:#6bcf9cf2;box-shadow:0 6px 14px #6bcf9c1a}.option:active{transform:translateY(1px)}.option:disabled{opacity:.7;cursor:default;box-shadow:none}.feedback{margin-top:14px;text-align:left;border-top:1px solid rgba(0,0,0,.08);padding-top:12px}.result{display:inline-block;font-weight:1100;font-size:20px;letter-spacing:-.2px}.result.ok{color:var(--ok)}.result.bad{color:var(--bad)}.explain{margin:8px 0 0;opacity:.86;font-size:14px;line-height:1.35}.next{width:100%;margin-top:12px;padding:14px 16px;border:0;border-radius:16px;background:var(--lime);color:#083322;font-weight:1100;cursor:pointer;transition:filter .12s ease,transform .12s ease}.next:hover{filter:brightness(.985)}.next:active{transform:translateY(1px)}.resultsTop{text-align:center}.big{font-size:44px}.resultsBtns{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.playSmall{width:100%;padding:14px 16px;border:0;border-radius:16px;background:var(--lime);color:#083322;font-weight:1100;cursor:pointer;transition:filter .12s ease,transform .12s ease}.playSmall:hover{filter:brightness(.985)}.playSmall:active{transform:translateY(1px)}.tileSmall{width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(0,0,0,.15);background:#fff;cursor:pointer;font-weight:1000;transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}.tileSmall:hover{border-color:#6bcf9cf2;box-shadow:0 6px 14px #6bcf9c1a}.tileSmall:active{transform:translateY(1px)}.tileSmall.danger{background:#0000000a}.earned{margin-top:14px;border:1px solid rgba(107,207,156,.35);border-radius:18px;padding:12px;background:#6bcf9c1a}.earnedTitle{font-weight:1100;margin-bottom:10px}.earnedGrid{width:100%;display:grid;gap:10px}.earnedCard{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:10px 12px;background:#fff}.earnedIcon{font-size:22px;width:32px;text-align:center}.earnedName{font-weight:1100}.earnedDesc{opacity:.8;font-size:12px;margin-top:2px}.badgeHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}.badgeList{width:100%;background:#0000000a;border-radius:var(--rIn);padding:10px;display:grid;gap:10px}.badgeRow{width:100%;display:flex;gap:12px;border:1px solid rgba(0,0,0,.1);border-radius:18px;padding:10px 12px;background:#fff;flex-wrap:wrap;align-items:flex-start}.badgeIconBig{font-size:22px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#0000000d;transition:background .16s ease,box-shadow .16s ease,filter .16s ease}.badgeRow.locked .badgeIconBig{filter:grayscale(1);opacity:.65}.badgeRow.unlocked .badgeIconBig{background:#6bcf9c38;box-shadow:0 8px 18px #6bcf9c40;filter:none;opacity:1}.badgeInfo{flex:1;text-align:left;min-width:220px}.badgeName{font-weight:1100}.badgeDesc{opacity:.8;font-size:12px;margin-top:2px}.badgePct{width:auto;text-align:right;margin-left:auto}.badgeRow.locked .badgeName,.badgeRow.locked .badgeDesc,.badgeRow.locked .badgePct{filter:grayscale(1);opacity:.7}.badgeList .bar{background:#0000001a}.badgeList .barFill{background:var(--lime)!important}@media(max-width:820px){.grid{grid-template-columns:1fr}}@media(max-width:640px){.topbarInner{flex-wrap:wrap}.right{width:100%;justify-content:space-between}.chips{flex-wrap:wrap;white-space:normal}.counts{width:100%;justify-content:flex-start}.badgePct{width:100%;text-align:left;margin-left:0}}.drillFooter{margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.08)}.drillProgress{width:100%;height:8px;border-radius:999px;background:#00000014;overflow:hidden}.drillProgressFill{height:100%;border-radius:999px;background:#b9ead1;transition:width .16s ease}.drillChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.chipTag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:700;border:1px solid rgba(152,204,177,.45);background:#ddf4e81a;color:#0a281ce0}.option.isCorrect{border-color:#6bcf9cf2;box-shadow:0 8px 18px #6bcf9c2e;background:#6bcf9c1a}.option.isWrong{border-color:#ef444499;background:#ef44440f}.option.isDim{opacity:.72}@media(max-width:640px){.topbarInner{padding:6px 0;gap:8px}.logo{width:44px;height:44px}.brandText{font-size:1.1em;line-height:1.05}.brandName{font-weight:900;letter-spacing:-.2px}.brandSub{font-size:12px;margin-top:2px;opacity:.75}.brand{gap:8px}.chip,.badgeBtn{padding:6px 10px;font-size:14px}}@media(max-width:380px){.container{padding-left:10px;padding-right:10px}.card{padding:14px}.hero{padding:12px}.topbarInner{padding:6px 0}}