:root{--gradient-start:#585cf6;--gradient-end:#8b3de7;--brand:#724def;--brand-surface:#ede9fe;--brand-gradient:linear-gradient(135deg, var(--gradient-start), var(--gradient-end));--accent:#0e7c74;--accent-light:#14968c;--accent-deep:#09564f;--background:#f6f5fa;--page:#faf9fc;--surface:#fff;--ink:#1c1b22;--ink-secondary:#6b6879;--separator:#e5e3ec;--red-pen:#dc2626;--column:720px;--gutter:24px}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}button:disabled{cursor:default}button:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent);outline-offset:2px}p{margin:0}.unseen{visibility:hidden}html .katex{font-size:1.1em}.start{min-height:100%;padding:32px var(--gutter);background:var(--background);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex}.start-mark{background:var(--brand-gradient);width:120px;height:120px;box-shadow:0 12px 30px color-mix(in srgb, var(--brand) 30%, transparent);border-radius:28px;place-items:center;display:grid}.start h1{letter-spacing:.16em;text-indent:.16em;margin:4px 0 0;font-size:30px;font-weight:700}.start-line{max-width:320px;color:var(--ink-secondary);font-size:19px;line-height:1.4}.start-button{background:var(--brand-gradient);color:#fff;border-radius:16px;min-width:260px;min-height:56px;margin-top:10px;padding:0 28px;font-size:18px;font-weight:600}.start-note{max-width:320px;color:var(--ink-secondary);font-size:14px}.lesson{background:var(--page);flex-direction:column;height:100%;display:flex}.page-column{width:100%;max-width:var(--column);padding:0 var(--gutter);margin:0 auto}.lesson-bar{width:100%;max-width:var(--column);min-height:52px;padding:4px calc(var(--gutter) - 13px) 4px var(--gutter);flex:none;justify-content:space-between;align-items:center;margin:0 auto;display:flex}.close{width:44px;height:44px;color:var(--ink-secondary);border-radius:12px;place-items:center;display:grid}.problem-pill{border:1.5px solid color-mix(in srgb, var(--brand) 45%, transparent);min-height:32px;color:var(--brand);border-radius:999px;padding:0 12px;font-size:15px;font-weight:600}.problem-pill.opened{background:var(--brand-surface)}.pinned-problem{width:100%;max-width:var(--column);padding:10px var(--gutter);flex:none;align-items:baseline;gap:8px;max-height:104px;margin:0 auto;font-size:15px;line-height:1.4;display:flex;overflow-y:auto}.pinned-label{color:var(--brand);font-weight:600}.pinned-lines{min-width:0;color:var(--ink-secondary);flex-direction:column;flex:1;gap:4px;display:flex}.lesson-rule{background:var(--separator);flex:none;height:1px}.page{flex:1;min-height:0;padding:12px 0 28px;overflow-y:auto}.page>.page-column{flex-direction:column;gap:26px;display:flex}.page-title{margin:0;font-size:30px;font-weight:600;line-height:1.2}.sentence{font-size:19px;line-height:1.62}.fragment.emphasized{color:var(--red-pen)}.fragment.stressed{font-weight:700}.fragment.enlarged{font-size:21px}.fit-width{justify-content:center;display:flex;overflow:hidden}.fit-width-inner{transform-origin:top;flex:none}.formula-line{padding:4px 0;font-size:23.6px}.formula-line.large{font-size:58px}.formula-line .katex-display,.recap-formula .katex-display{margin:0}.formula-line .katex-display>.katex,.recap-formula .katex-display>.katex{text-align:left}.fades{opacity:0;transition:opacity .35s ease-out}.fades.shown{opacity:1}.timeline-formula .tl-piece{color:#0000}.recap{flex-direction:column;gap:22px;margin:0;padding:0;list-style:none;display:flex}.recap li{align-items:flex-start;gap:14px;display:flex}.recap li.not-yet .recap-number{visibility:hidden}.recap-number{text-align:right;width:20px;color:var(--brand);font-size:19px;font-weight:600;line-height:1.62}.recap-step{flex-direction:column;flex:1;gap:10px;min-width:0;display:flex}.recap-formula{justify-content:flex-start;font-size:20px}.recap-formula .fit-width-inner{transform-origin:0 0}.figure{opacity:0;flex-direction:column;align-items:center;gap:16px;transition:opacity .5s ease-out;display:flex}.figure.shown{opacity:1}.drawing{width:100%;max-width:420px;position:relative}.drawing svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.drawing .axis line{stroke:var(--ink-secondary);stroke-width:1.5px;stroke-linecap:round}.drawing .axis.faded{opacity:.35}.drawing .stroke{fill:none;stroke:var(--brand);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}.drawing .stroke.thin{stroke-width:1.5px}.drawing .dot{fill:var(--brand);stroke:var(--page);stroke-width:1.5px}.drawing .dot.open{fill:var(--page);stroke:var(--brand);stroke-width:2px}.drawing-label{white-space:nowrap;color:var(--ink);font-size:15px;line-height:1;position:absolute}.drawing-label.small{color:var(--ink-secondary);font-size:12px}.drawing-label.above{transform:translate(-50%,calc(-100% - 9px))}.drawing-label.below{transform:translate(-50%,9px)}.drawing-label.left{transform:translate(calc(-100% - 9px),-50%)}.drawing-label.right{transform:translate(9px,-50%)}.figure-table{border-collapse:collapse;font-size:17px}.figure-table th,.figure-table td{border:1px solid var(--separator);text-align:center;padding:8px 16px}.figure-table th{background:var(--brand-surface);font-weight:600}.their-work{margin:0 calc(-1 * var(--gutter));flex-direction:column;gap:10px;scroll-margin:16px;display:flex}.their-work-page{width:100%;margin:0 auto}.their-work-layer{position:relative}.their-work-picture{border:1px solid var(--separator);background:#fff;border-radius:14px;width:100%;position:relative;overflow:hidden}.their-work-picture img{max-width:none;position:absolute}.their-work-picture svg{width:100%;height:100%;position:absolute;inset:0}.red-pen-mark{fill:none;stroke:var(--red-pen);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}.red-pen-note{color:var(--red-pen);padding:0 var(--gutter);scroll-margin:16px;line-height:1.25}.red-pen-note.on-photo{width:max-content;padding:0;position:absolute}.answering{flex-direction:column;gap:24px;display:flex}.check-note{color:var(--ink-secondary);font-size:16px}.rises{animation:.35s ease-out both rise}.rises.after-note{animation-delay:1.2s}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.answer-steps{justify-content:center;align-items:flex-start;gap:32px;display:flex}.answer-step{text-align:center;color:var(--ink-secondary);flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.35;display:flex}.answer-step>:first-child{height:88px}.answer-step.then>svg{box-sizing:content-box;height:22px;padding:33px 0}.answer-step b{color:var(--accent)}.camera{color:#fff;width:82px;height:88px;position:relative}.camera:before{content:"";background:var(--accent-deep);width:82px;height:82px;box-shadow:0 8px 12px color-mix(in srgb, var(--accent) 35%, transparent);border-radius:50%;position:absolute;top:6px;left:0}.camera>svg{background:linear-gradient(135deg, var(--accent-light), var(--accent));border-radius:50%;width:82px;height:82px;padding:26px 24px;transition:transform 80ms ease-out;position:absolute;top:0;left:0;box-shadow:inset 0 2px #ffffff59}.camera:active>svg{transform:translateY(5px)}.retake{text-align:center;color:var(--ink-secondary);flex-direction:column;align-items:center;gap:12px;font-size:16px;font-weight:500;display:flex}.retake button,.failed button{min-height:44px;color:var(--brand);padding:0 12px;font-weight:600}.controls{padding:0 0 max(16px, env(safe-area-inset-bottom));background:var(--page);flex:none}.controls-row{gap:10px;display:flex}.prev{border:1px solid var(--separator);background:var(--surface);border-radius:16px;width:78px;height:56px;font-size:17px;font-weight:500}.prev:disabled{color:var(--ink-secondary)}.next{background:var(--brand-gradient);color:#fff;border-radius:16px;flex:1;min-height:56px;font-size:18px;font-weight:600}.next:disabled{background:var(--separator);color:var(--ink-secondary)}.waiting,.failed{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:28px;min-height:0;padding:24px;display:flex;overflow-y:auto}.waiting.preparing{align-items:flex-start;width:100%;max-width:420px;margin:0 auto;padding:24px 32px}.waiting-line{color:var(--ink-secondary);font-size:24px;font-weight:700}.waiting-line.with-mark{align-items:center;gap:12px;font-size:22px;display:flex}.waiting-sentence{font-size:19px;font-weight:500;line-height:1.5}.waiting-photo{border-radius:14px;align-self:center;max-width:260px;position:relative;overflow:hidden;box-shadow:0 3px 10px #0000001a}.waiting-photo.answer{max-width:min(100%,520px)}.waiting-photo img{max-width:100%;max-height:46vh;display:block}.sweep{background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--brand) 22%, transparent), transparent);height:35%;animation:3s linear both sweep;position:absolute;top:0;left:0;right:0}.sweep.repeats{animation:2.5s linear infinite sweep}@keyframes sweep{0%{transform:translateY(-100%)}to{transform:translateY(286%)}}.shimmer{background:linear-gradient(90deg, var(--ink-secondary) 0 40%, var(--brand) 50%, var(--ink-secondary) 60% 100%) 100% 0 / 300% 100%;color:#0000;-webkit-background-clip:text;background-clip:text;animation:2s linear infinite shimmer}.shimmer .theta{flex:none}@keyframes shimmer{0%{background-position:100% 0}65%,to{background-position:0 0}}.failed p{text-align:center;max-width:300px;font-size:17px;font-weight:500}.from-phone{--qr:216px;text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.start.with-code{gap:12px;padding-block:24px}.start.with-code .start-mark{border-radius:20px;width:84px;height:84px}.start.with-code h1{margin:0}.start.with-code .start-line{max-width:460px}.start .from-phone{margin-top:8px}.qr-card{width:calc(var(--qr) + 24px);height:calc(var(--qr) + 24px);border:1px solid var(--separator);background:#fff;border-radius:18px;padding:12px;box-shadow:0 6px 18px #1c1b220f}.qr{width:100%;height:100%;display:block}.qr-blank{background:var(--background);border-radius:8px;width:100%;height:100%}.shimmer-block{background:linear-gradient(100deg, var(--background) 40%, var(--brand-surface) 50%, var(--background) 60%) 100% 0 / 300% 100%;animation:1.6s linear infinite shimmer}.qr-message{width:100%;height:100%;color:var(--ink-secondary);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:0 12px;font-size:16px;font-weight:500;display:flex}.from-phone .qr-message button{min-height:44px;color:var(--brand);padding:0 12px;font-weight:600}.qr-arrived{border:4px solid var(--brand-surface);border-top-color:var(--brand);border-radius:50%;width:44px;height:44px;animation:.9s linear infinite turn}@keyframes turn{to{transform:rotate(360deg)}}.from-phone-line{max-width:calc(var(--qr) + 110px);color:var(--ink);font-size:16px;font-weight:500;line-height:1.4}.from-phone-missed{max-width:calc(var(--qr) + 110px);color:var(--red-pen);font-size:15px;font-weight:500}.from-phone-status{min-height:20px;color:var(--ink-secondary);font-size:15px;font-weight:600}.from-phone-sample{color:var(--brand);font-size:13px}.from-phone .this-device{min-height:32px;color:var(--ink-secondary);text-underline-offset:3px;padding:0 10px;font-size:14px;font-weight:500;text-decoration:underline}.answer-steps.with-code{flex-wrap:wrap;align-items:center;row-gap:18px}.answer-code .from-phone{--qr:192px;gap:8px}.answer-code .from-phone-line{color:var(--ink-secondary);font-size:14px}.retake .from-phone{--qr:192px;gap:8px;margin-top:4px}.phone{min-height:100%;padding:32px var(--gutter) max(32px, env(safe-area-inset-bottom));background:var(--background);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:22px;display:flex}.phone-mark{background:var(--brand-gradient);border-radius:18px;place-items:center;width:72px;height:72px;display:grid}.phone-line{max-width:320px;font-size:21px;font-weight:600;line-height:1.35}.phone-button{background:linear-gradient(135deg, var(--accent-light), var(--accent));min-width:260px;min-height:64px;box-shadow:0 8px 16px color-mix(in srgb, var(--accent) 30%, transparent);color:#fff;border-radius:18px;justify-content:center;align-items:center;gap:12px;padding:0 28px;font-size:20px;font-weight:600;display:inline-flex}.phone-photo{border-radius:14px;max-width:min(100%,300px);max-height:42vh;display:block;box-shadow:0 3px 10px #0000001a}.phone-note{max-width:300px;color:var(--ink-secondary);font-size:14px}.notice-veil{background:#0000004d;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.notice{background:var(--surface);text-align:center;border-radius:16px;width:min(100%,290px);overflow:hidden}.notice p{padding:22px 18px;font-size:17px;font-weight:600}.notice button{border-top:1px solid var(--separator);width:100%;min-height:48px;color:var(--brand);font-size:17px;font-weight:600}@media (prefers-reduced-motion:reduce){.sweep,.shimmer,.shimmer-block,.qr-arrived{animation:none}.shimmer{color:var(--ink-secondary);background:0 0}}