:root{font-family:Inter,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#3c3c3c;background:#fff;font-synthesis:none;--green: #58cc02;--green-dark: #46a302;--green-soft: #e9f9dc;--blue: #1cb0f6;--yellow: #ffc800;--red: #ff4b4b;--ink: #3c3c3c;--muted: #777777;--line: #e5e5e5;--surface: #f7f7f7}*{box-sizing:border-box}html{min-width:320px;background:#fff}body{margin:0;min-width:320px;min-height:100vh}button,textarea,input{font:inherit;letter-spacing:0}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}a{color:inherit;text-decoration:none}svg{width:22px;height:22px;stroke-width:2.6;flex:0 0 auto}.app-shell{min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}.shell-content{min-height:calc(100vh - 76px)}.page{width:min(100%,760px);margin:0 auto;padding:24px 20px 36px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.page-header h1{margin:2px 0 0;font-size:30px;line-height:1.15;letter-spacing:0}.resume-heading{display:flex;align-items:center;gap:3px;min-height:42px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;text-align:left}.resume-heading svg{width:25px;height:25px;color:var(--green-dark);transition:transform .15s ease}.resume-heading:active svg{transform:translate(4px)}.resume-heading:focus-visible{outline:3px solid rgba(28,176,246,.35);outline-offset:4px}.eyebrow{margin:0;color:var(--green-dark);font-size:13px;font-weight:800;letter-spacing:0;text-transform:uppercase}.header-icon{width:30px;height:30px;color:var(--blue)}.bottom-nav{position:fixed;z-index:20;left:0;right:0;bottom:0;height:calc(70px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fffffff7;border-top:2px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.bottom-nav a{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#8b8b8b;font-size:12px;font-weight:800}.bottom-nav a.active{color:var(--green-dark);background:var(--green-soft)}.bottom-nav svg{width:25px;height:25px}.streak{display:flex;align-items:center;gap:6px;color:#f59c00;font-size:18px}.streak svg{fill:#ffc800;stroke:#f59c00}.overall-band{margin:0 -20px 22px;padding:18px 20px;background:#f2fbeb;border-top:2px solid #d8f2c4;border-bottom:2px solid #d8f2c4}.overall-band>div{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}.overall-band strong{font-size:26px;color:var(--green-dark)}.overall-band span{color:var(--muted);font-size:14px;font-weight:700}.progress-track{height:14px;width:100%;overflow:hidden;background:#e5e5e5;border-radius:7px;box-shadow:inset 0 2px #0000000f}.progress-track span{display:block;height:100%;background:var(--green);border-radius:inherit;transition:width .25s ease}.lesson-path{position:relative}.lesson-path:before{content:"";position:absolute;top:24px;bottom:26px;left:24px;width:4px;background:#dfe8d8;border-radius:2px}.lesson-row{position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);gap:14px;align-items:start;padding-bottom:22px}.lesson-node{position:relative;z-index:1;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--blue);border:4px solid #fff;box-shadow:0 4px #1289bf;font-size:18px;font-weight:900}.lesson-node.complete{background:var(--green);box-shadow:0 4px 0 var(--green-dark)}.lesson-body{min-width:0;padding:13px 14px 14px;border:2px solid var(--line);border-bottom-width:4px;border-radius:8px;background:#fff}.lesson-title-line{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.lesson-title-line h2{margin:0 0 4px;font-size:18px;line-height:1.25}.lesson-title-line p{margin:0;color:var(--muted);font-size:12px;font-weight:650}.lesson-title-line>strong{color:var(--green-dark);font-size:14px}.lesson-body .progress-track{height:9px}.primary-button,.secondary-button{min-height:50px;border-radius:8px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 18px;font-weight:900;cursor:pointer}.primary-button{color:#fff;background:var(--green);box-shadow:0 4px 0 var(--green-dark)}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--green-dark)}.secondary-button{background:#fff;color:#696969;border:2px solid var(--line);box-shadow:0 3px #d5d5d5}.secondary-button:active{transform:translateY(2px);box-shadow:0 1px #d5d5d5}.primary-button.compact{min-height:42px;margin-top:13px;width:100%}.progress-hero{display:flex;align-items:center;gap:24px;padding:20px 0 28px;border-bottom:2px solid var(--line)}.progress-ring{--percent: 0deg;width:116px;height:116px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--percent),#e9e9e9 0);position:relative}.progress-ring:after{content:"";position:absolute;top:13px;right:13px;bottom:13px;left:13px;border-radius:50%;background:#fff}.progress-ring span{position:relative;z-index:1;font-size:23px;font-weight:900;color:var(--green-dark)}.progress-hero>div:last-child{display:flex;flex-direction:column}.progress-hero strong{font-size:34px;line-height:1}.progress-hero span{margin-top:6px;font-weight:800}.progress-hero small{margin-top:3px;color:var(--muted)}.progress-list{margin-top:12px}.progress-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:2px solid #f0f0f0}.progress-row>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#eef8e7;color:var(--green-dark);font-weight:900}.progress-row>div{min-width:0}.progress-row strong{display:block;margin-bottom:7px;font-size:14px}.progress-row .progress-track{height:8px}.progress-row b{color:var(--muted);font-size:12px}.settings-list{border-top:2px solid var(--line)}.settings-list>button{width:100%;min-height:78px;display:grid;grid-template-columns:28px 1fr 22px;gap:14px;align-items:center;border:0;border-bottom:2px solid var(--line);background:#fff;text-align:left;cursor:pointer}.settings-list>button>svg:first-child{color:var(--blue)}.settings-list>button>svg:last-child{color:#aaa}.settings-list button span{display:flex;flex-direction:column;gap:3px;min-width:0}.settings-list small{color:var(--muted);line-height:1.35}.settings-list .danger>svg:first-child,.settings-list .danger strong{color:var(--red)}.status-message{padding:12px;background:var(--green-soft);color:var(--green-dark);font-weight:800;border-radius:8px;text-align:center}.about-band{margin-top:26px;display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border-radius:8px}.about-band svg{color:var(--green-dark)}.about-band div{display:flex;flex-direction:column;gap:3px}.about-band span{color:var(--muted);font-size:12px}.lesson-page{min-height:100vh;padding-bottom:calc(90px + env(safe-area-inset-bottom));background:#fff}.lesson-header{position:sticky;z-index:10;top:0;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:center;height:68px;padding:10px max(14px,env(safe-area-inset-left));background:#fffffff7;border-bottom:2px solid var(--line)}.icon-button{width:44px;height:44px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;cursor:pointer}.icon-button:hover{background:var(--surface)}.flag-button.active{color:#df9a00;background:#fff5cc}.flag-button.active svg{fill:var(--yellow)}.question-content{width:min(100%,720px);margin:0 auto;padding:20px 18px 34px}.question-meta{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:14px}.question-copy{margin:22px 0 18px}.question-label{margin:0 0 7px;color:var(--green-dark);font-size:13px;font-weight:900}.question-copy h1{margin:0;font-size:21px;line-height:1.55;letter-spacing:0;overflow-wrap:anywhere}.source-viewer{border:2px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}.source-toolbar{height:44px;padding:0 10px 0 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-bottom:2px solid var(--line)}.source-toolbar>span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:850}.source-toolbar svg{width:18px;height:18px;color:var(--blue)}.source-toolbar>div{display:flex;gap:5px}.source-toolbar button{min-width:38px;height:30px;padding:0 8px;border:2px solid var(--line);border-radius:6px;background:#fff;font-size:11px;font-weight:900;cursor:pointer}.source-toolbar button.active{border-color:var(--blue);color:#087cac;background:#e7f7ff}.source-image{position:relative;display:block;width:100%;height:min(41vh,410px);border:0;padding:0;overflow:hidden;background:#ececec;cursor:zoom-in}.source-image img{display:block;width:100%;height:100%;object-fit:contain}.source-image>span{position:absolute;right:10px;bottom:9px;display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:6px;background:#282828c7;color:#fff;font-size:12px;font-weight:800}.source-image>span svg{width:16px;height:16px}.image-modal{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;background:#0f0f0ff0;display:flex;flex-direction:column}.image-modal .modal-close{position:fixed;z-index:2;top:max(12px,env(safe-area-inset-top));right:12px;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;color:#fff;background:#000000ad}.image-modal>div{width:100%;height:100%;overflow:auto;padding:64px 10px 24px}.image-modal img{display:block;width:max(100%,760px);height:auto;margin:0 auto}.options{display:grid;gap:12px}.options button{width:100%;min-height:62px;display:grid;grid-template-columns:38px minmax(0,1fr) 24px;gap:12px;align-items:center;padding:9px 14px;border:2px solid var(--line);border-bottom-width:4px;border-radius:8px;background:#fff;text-align:left;cursor:pointer}.options button>span{width:36px;height:36px;display:grid;place-items:center;border:2px solid #d3d3d3;border-radius:7px;color:#777;font-weight:900}.options button strong{min-width:0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}.options button>svg{opacity:0}.options button.selected{border-color:var(--blue);background:#e8f8ff;color:#087cac}.options button.selected>span{border-color:var(--blue);color:#087cac;background:#fff}.options button.selected>svg{opacity:1}.written-answer label:first-child{display:block;margin-bottom:8px;font-weight:900}.written-answer textarea{width:100%;min-height:150px;resize:vertical;padding:14px;border:2px solid var(--line);border-bottom-width:4px;border-radius:8px;outline:none;line-height:1.65}.written-answer textarea:focus{border-color:var(--blue)}.paper-check{margin-top:13px;min-height:52px;display:flex;align-items:center;gap:10px;padding:0 13px;border:2px solid var(--line);border-radius:8px;font-weight:800;cursor:pointer}.paper-check input{position:absolute;opacity:0}.paper-check>span{width:28px;height:28px;display:grid;place-items:center;border:2px solid #cfcfcf;border-radius:6px}.paper-check>span svg{width:18px;opacity:0}.paper-check input:checked+span{color:#fff;border-color:var(--green);background:var(--green)}.paper-check input:checked+span svg{opacity:1}.lesson-actions{position:fixed;z-index:12;left:0;right:0;bottom:0;min-height:calc(82px + env(safe-area-inset-bottom));padding:13px max(16px,env(safe-area-inset-left)) calc(13px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(110px,.8fr) minmax(165px,1.4fr);gap:12px;background:#fffffffa;border-top:2px solid var(--line)}.completion-page{min-height:100vh;padding-bottom:88px}.completion-page>header{height:66px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:10px 14px;border-bottom:2px solid var(--line);text-align:center;font-weight:900}.completion-page main{width:min(100%,620px);margin:0 auto;padding:35px 20px;text-align:center}.completion-mark{width:78px;height:78px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;color:#fff;background:var(--green);box-shadow:0 6px 0 var(--green-dark)}.completion-mark svg{width:42px;height:42px}.completion-page h1{margin:6px 0 22px;font-size:25px}.summary-grid{margin:24px 0;display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--line);border-radius:8px;overflow:hidden}.summary-grid>div{min-width:0;padding:13px 6px;display:flex;flex-direction:column;gap:2px}.summary-grid>div+div{border-left:2px solid var(--line)}.summary-grid strong{font-size:24px}.summary-grid span{color:var(--muted);font-size:12px;font-weight:800}.question-map{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.question-map a{aspect-ratio:1;display:grid;place-items:center;border:2px solid var(--line);border-radius:7px;color:#888;font-size:12px;font-weight:900}.question-map a.answered{color:var(--green-dark);border-color:var(--green);background:var(--green-soft)}.question-map a.flagged{box-shadow:inset 0 -4px 0 var(--yellow)}.completion-page>footer{position:fixed;left:0;right:0;bottom:0;padding:13px 16px calc(13px + env(safe-area-inset-bottom));border-top:2px solid var(--line);background:#fff}.completion-page>footer .primary-button{width:min(100%,580px);margin:0 auto}.update-banner{position:fixed;z-index:200;left:12px;right:12px;bottom:calc(82px + env(safe-area-inset-bottom));min-height:58px;display:grid;grid-template-columns:1fr auto 44px;gap:8px;align-items:center;padding:8px 9px 8px 14px;border-radius:8px;background:#343434;color:#fff;box-shadow:0 8px 30px #00000040;font-weight:800}.update-banner>button:not(.icon-button){height:40px;padding:0 14px;border:0;border-radius:7px;color:#fff;background:var(--green);font-weight:900}.update-banner .icon-button{color:#fff}@media(min-width:760px){.bottom-nav{left:50%;right:auto;width:760px;transform:translate(-50%);border-left:2px solid var(--line);border-right:2px solid var(--line)}.lesson-actions{grid-template-columns:180px 300px;justify-content:center}.source-image{height:440px}.question-map{grid-template-columns:repeat(8,1fr)}}@media(max-width:370px){.question-content{padding-left:13px;padding-right:13px}.question-copy h1{font-size:19px}.lesson-actions{grid-template-columns:104px minmax(0,1fr);gap:8px;padding-left:10px;padding-right:10px}.lesson-actions .primary-button,.lesson-actions .secondary-button{padding:0 9px;font-size:14px}.question-map{grid-template-columns:repeat(5,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}