:root{--surface-100:#F4F8F9;--surface-200:#FFFFFF;--surface-300:#DFE9EC;--line:#D5E2E6;--line-strong:#6F8A94;--ink:#0B232C;--ink-muted:#48626C;--logo:#0E4F66;--brand:#0E4F66;--brand-lip:#083646;--on-brand:#FFFFFF;--brand-soft:#DBEEF4;--brand-text:#0C4659;--coral:#FF8552;--coral-lip:#CC5F32;--on-coral:#0B232C;--coral-soft:#FFE8DE;--coral-text:#9A3D14;--jade:#2BB673;--on-jade:#06241A;--jade-soft:#D6F4E4;--jade-text:#0B6B3E;--sky:#1769E0;--on-sky:#FFFFFF;--sky-soft:#DCEAFF;--sky-text:#124FA8;--danger:#B3213A;--on-danger:#FFFFFF;--danger-soft:#FDE3E6;--danger-text:#93182C;--focus:#1769E0;--share-ground:#0B232C;--shadow-card:0 1px 0 #D5E2E6, 0 8px 20px -14px #0B232C;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--cut-sm:8px;--cut-md:16px;--font-display:Archivo,"Arial Black",system-ui,sans-serif;--font-sans:"Instrument Sans",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;}@media(prefers-color-scheme:dark){:root{--surface-100:#081920;--surface-200:#11272F;--surface-300:#1E3A44;--line:#2A4852;--line-strong:#6F8F9A;--ink:#EEF6F8;--ink-muted:#AFC5CD;--logo:#FFFFFF;--brand:#1C7795;--brand-lip:#145A72;--on-brand:#FFFFFF;--brand-soft:#123E4E;--brand-text:#8FD3EA;--coral:#FF8552;--coral-lip:#CC5F32;--on-coral:#0B232C;--coral-soft:#4A2415;--coral-text:#FFB08F;--jade:#3DD68C;--on-jade:#06241A;--jade-soft:#0F3D2A;--jade-text:#6FE3A8;--sky:#6FA8FF;--on-sky:#0B232C;--sky-soft:#14305C;--sky-text:#A9CBFF;--danger:#FF7A8A;--on-danger:#0B232C;--danger-soft:#4D1620;--danger-text:#FFB3BD;--focus:#7FB2FF;--share-ground:#0B232C;--shadow-card:0 1px 0 #2A4852;color-scheme:dark}}
.br-stack{display:flex;flex-direction:column;gap:var(--space-3)}.br-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.br-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:square;stroke-linejoin:miter}
.br-h1,.br-h2,.br-display,.br-stat{font-family:var(--font-display);text-wrap:balance;margin:0}
.br-display{font-size:36px;line-height:40px;font-weight:800;letter-spacing:-.02em}.br-h1{font-size:26px;line-height:30px;font-weight:800;letter-spacing:-.015em}.br-h2{font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em}.br-stat{font-size:40px;line-height:40px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.br-small{font-size:14px;line-height:20px;color:var(--ink-muted)}.br-label{font-size:13px;line-height:16px;font-weight:600}.br-p{margin:0}
:where(.br-btn,.br-chip,.br-input,.br-up,.br-opt,.br-nav a,.br-link):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.br-card{background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.br-btn{--b:var(--brand);--f:var(--on-brand);--l:var(--brand-lip);appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 20px;background:var(--b);color:var(--f);border-radius:var(--radius-sm);box-shadow:0 4px 0 var(--l);font:700 15px/20px var(--font-display);letter-spacing:-.005em;transition:transform .08s,box-shadow .08s;text-decoration:none}
.br-btn:active,.br-btn.is-pressed{transform:translateY(3px);box-shadow:0 1px 0 var(--l)}
.br-btn--coral{--b:var(--coral);--f:var(--on-coral);--l:var(--coral-lip)}
.br-btn--quiet{--b:var(--surface-200);--f:var(--ink);--l:var(--line-strong);border:2px solid var(--line-strong)}
.br-btn--block{width:100%}.br-btn[disabled]{--b:var(--surface-300);--f:var(--ink-muted);--l:var(--surface-300);cursor:not-allowed}
.br-link{background:none;border:0;padding:8px 0;color:var(--brand-text);font:600 14px/20px var(--font-sans);cursor:pointer}
.br-field{display:flex;flex-direction:column;gap:6px}
.br-input{font:400 16px/24px var(--font-sans);color:var(--ink);background:var(--surface-200);border:2px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 12px;width:100%;box-sizing:border-box;min-height:48px}
.br-chip{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;background:var(--surface-200);color:var(--ink);border:2px solid var(--line-strong);border-radius:var(--radius-sm);font:600 13px/16px var(--font-sans)}
.br-chip.is-on{background:var(--brand-soft);color:var(--brand-text);border-color:var(--brand)}
.br-steps{display:flex;gap:var(--space-1)}.br-steps i{flex:1;height:8px;background:var(--surface-300);transform:skewX(-18deg);border-radius:var(--radius-xs)}.br-steps i.on{background:var(--brand)}
.br-meter{display:flex;gap:3px;--n:12}
.br-meter i{flex:1;height:16px;background:var(--surface-300);transform:skewX(-16deg);border-radius:var(--radius-xs);animation:br-pop .42s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--i,0)*45ms)}
.br-meter i.done{background:var(--jade)}.br-meter i.doing{background:var(--coral)}.br-meter i.weak{background:var(--danger)}
.br-meter i.todo{animation:none}
@keyframes br-pop{0%{transform:skewX(-16deg) scaleY(.35)}100%{transform:skewX(-16deg) scaleY(1)}}
.br-fill{position:relative;height:18px;background:var(--surface-300);border-radius:var(--radius-xs);overflow:hidden}
.br-fill b{position:absolute;inset:0 auto 0 -8px;width:calc(var(--v)*1% + 8px);background:var(--c,var(--jade));transform-origin:left;transform:skewX(-16deg);transform-origin:0 100%;animation:br-grow .9s cubic-bezier(.2,.9,.3,1) both;overflow:hidden}
.br-fill b::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:var(--surface-200);opacity:.45;animation:br-shine 2.6s .9s ease-in-out infinite}
@keyframes br-grow{0%{width:8px}}@keyframes br-shine{0%{left:-40%}55%,100%{left:120%}}
.br-prow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)}
.br-ring{position:relative;width:128px;height:128px;display:grid;place-items:center}.br-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.br-ring circle{fill:none;stroke-width:14;stroke-dasharray:calc(var(--v)*3.33) 333}.br-ring .t{stroke:var(--surface-300);stroke-dasharray:none}.br-ring .f{stroke:var(--c,var(--jade));animation:br-ring 1s ease-out both}
@keyframes br-ring{from{stroke-dasharray:0 333}}
.br-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-xs);font:600 13px/16px var(--font-sans);white-space:nowrap}.br-pill .br-ic{width:14px;height:14px}
.br-pill--done{background:var(--jade-soft);color:var(--jade-text)}.br-pill--doing{background:var(--coral-soft);color:var(--coral-text)}.br-pill--weak{background:var(--danger-soft);color:var(--danger-text)}.br-pill--todo{background:var(--surface-300);color:var(--ink-muted)}.br-pill--info{background:var(--sky-soft);color:var(--sky-text)}
.br-mat{position:relative;background:var(--mc);color:var(--o);padding:var(--space-4);clip-path:polygon(0 0,calc(100% - var(--cut-md)) 0,100% var(--cut-md),100% 100%,var(--cut-md) 100%,0 calc(100% - var(--cut-md)));display:flex;flex-direction:column;gap:var(--space-3)}
.br-mat .br-fill{background:var(--surface-200)}
.br-topic{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--space-3);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}.br-topic:last-child{border-bottom:0}.br-topic .br-meter{grid-column:1/-1}.br-topic .br-meter i{height:10px}
.br-ups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.br-up{appearance:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);min-height:96px;background:var(--brand-soft);color:var(--brand-text);border:2px dashed var(--brand);border-radius:var(--radius-sm);font:700 13px/16px var(--font-sans);text-align:left}.br-up:nth-child(2){background:var(--coral-soft);color:var(--coral-text);border-color:var(--coral-text)}.br-up:nth-child(3){background:var(--sky-soft);color:var(--sky-text);border-color:var(--sky-text)}.br-up .br-ic{width:24px;height:24px}
.br-chat{display:flex;flex-direction:column;gap:var(--space-3)}
.br-msg{max-width:88%;padding:var(--space-3) var(--space-4);box-sizing:border-box}.br-msg p{margin:0}.br-msg p+p{margin-top:8px}
.br-msg--tutor{align-self:flex-start;background:var(--surface-200);border:1px solid var(--line);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 0}
.br-msg--me{align-self:flex-end;background:var(--brand);color:var(--on-brand);border-radius:var(--radius-md) var(--radius-md) 0 var(--radius-md)}
.br-source{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 8px;background:var(--sky-soft);color:var(--sky-text);border-radius:var(--radius-xs);font:600 13px/16px var(--font-sans);text-decoration:none}.br-source .br-ic{width:14px;height:14px}
.br-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--space-3);align-items:start}
.br-num{width:32px;height:32px;display:grid;place-items:center;font:800 14px/1 var(--font-display);background:var(--surface-300);color:var(--ink-muted);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}.br-step.done .br-num{background:var(--jade);color:var(--on-jade)}.br-step.now .br-num{background:var(--coral);color:var(--on-coral)}
.br-step.lock{color:var(--ink-muted)}.br-num .br-ic{width:16px;height:16px}
.br-opt{appearance:none;cursor:pointer;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--space-2);align-items:center;width:100%;min-height:52px;padding:10px 12px;background:var(--surface-200);color:var(--ink);border:2px solid var(--line-strong);border-radius:var(--radius-sm);text-align:left;font:400 15px/20px var(--font-sans)}
.br-opt b{font:800 13px/1 var(--font-display)}.br-opt.is-right{background:var(--jade-soft);border-color:var(--jade-text);color:var(--jade-text);font-weight:600}.br-opt.is-wrong{background:var(--danger-soft);border-color:var(--danger-text);color:var(--danger-text);font-weight:600}
.br-why{padding:var(--space-3);background:var(--jade-soft);color:var(--ink);border-radius:var(--radius-sm)}
.br-win{position:relative;overflow:hidden;background:var(--brand);color:var(--on-brand);padding:var(--space-6) var(--space-4) var(--space-5);clip-path:polygon(0 0,calc(100% - var(--cut-md)) 0,100% var(--cut-md),100% 100%,var(--cut-md) 100%,0 calc(100% - var(--cut-md)));display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.br-win>*{position:relative}.br-shards{position:absolute!important;top:12px;right:16px;width:190px;height:64px}.br-shards polygon{transform-box:fill-box;transform-origin:center;animation:br-burst .7s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i)*40ms)}
.s-m{fill:var(--coral)}.s-l{fill:var(--jade)}.s-w{fill:var(--on-brand)}
@keyframes br-burst{0%{transform:scale(.2) rotate(-40deg)}}
.br-xp{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--coral);color:var(--on-coral);font:800 14px/16px var(--font-display);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.br-remind{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);align-items:start;padding:var(--space-3);border-radius:var(--radius-sm);background:var(--coral-soft);color:var(--ink)}.br-remind.info{background:var(--sky-soft)}.br-remind .br-ic{color:var(--coral-text);width:24px;height:24px}.br-remind.info .br-ic{color:var(--sky-text)}
.br-streak{display:inline-flex;align-items:center;gap:6px;font:800 16px/20px var(--font-display);color:var(--coral-text)}
.br-nav{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-200);border-top:1px solid var(--line);padding-top:6px}.br-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 8px;color:var(--ink-muted);font:600 13px/16px var(--font-sans);text-decoration:none;position:relative}.br-nav a.on{color:var(--brand-text)}.br-nav a.on::before{content:"";position:absolute;top:-7px;left:26%;right:26%;height:4px;background:var(--brand);transform:skewX(-20deg)}.br-nav .br-ic{width:24px;height:24px}
.br-level{appearance:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-2);width:100%;text-align:left;padding:10px 12px;background:var(--surface-200);color:var(--ink);border:2px solid var(--line-strong);border-radius:var(--radius-sm);font:600 15px/20px var(--font-sans)}
.br-level span{grid-column:1;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}.br-level.is-on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-text)}.br-level .br-ic{grid-column:2;grid-row:1/3;align-self:center}.br-level:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.br-exam{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}.br-exam:last-of-type{border-bottom:0}
.br-date{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60px;background:var(--brand);color:var(--on-brand);font-family:var(--font-display);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.br-date b{font-size:22px;line-height:24px;font-weight:800}.br-date span{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.06em}
.br-example{padding:var(--space-3);background:var(--coral-soft);color:var(--ink);border-radius:var(--radius-sm);display:flex;flex-direction:column;gap:6px}
@media (prefers-reduced-motion:reduce){.br-meter i,.br-fill b,.br-fill b::after,.br-ring .f,.br-shards polygon,.br-btn{animation:none!important;transition:none!important}}
html,body{margin:0;background:var(--surface-100);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}button,input,select,textarea{font-family:inherit}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px}
.top a{color:inherit;display:flex;align-items:center;gap:8px;text-decoration:none}.bell{position:relative;color:var(--ink);padding:8px}.bell i{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 4px;background:var(--coral);color:var(--on-coral);font:800 11px/18px var(--font-display);text-align:center}
main{flex:1;padding:4px 16px 110px;display:flex;flex-direction:column;gap:var(--space-5)}.sec{display:flex;flex-direction:column;gap:var(--space-3)}
.navw{position:fixed;left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom);background:var(--surface-200)}.navw .br-nav{max-width:480px;margin:0 auto}
.br-card p,.sec p{margin:0}textarea.br-input{resize:vertical;min-height:84px}.err{color:var(--danger-text);font-size:14px;line-height:20px}.center{text-align:center}
.back{display:inline-flex;gap:6px;align-items:center;color:var(--ink-muted);font:600 14px/20px var(--font-sans);text-decoration:none}.back .br-ic{transform:rotate(180deg);width:16px;height:16px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));max-width:448px;margin:auto;padding:12px 14px;background:var(--ink);color:var(--surface-100);border-radius:var(--radius-sm);z-index:30}
.wait{display:flex;gap:8px;align-items:center;color:var(--ink-muted)}.wait i{width:9px;height:18px;background:var(--brand);transform:skewX(-16deg);animation:w .8s infinite alternate}.wait i:nth-child(2){animation-delay:.15s;background:var(--coral)}.wait i:nth-child(3){animation-delay:.3s;background:var(--jade)}@keyframes w{to{transform:skewX(-16deg) scaleY(.35)}}
.mat-link{text-decoration:none;display:block}.pre{white-space:pre-wrap}.usebar{display:grid;gap:4px}.feedback-ok{background:var(--jade-soft);padding:12px;border-radius:var(--radius-sm)}.feedback-no{background:var(--danger-soft);padding:12px;border-radius:var(--radius-sm)}
.br-topic{text-decoration:none;color:inherit}.br-mat{color:var(--o)}