:root{font-family:'DM Sans',system-ui,sans-serif;color:#202725;background:#f8f8f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}.hidden{display:none!important}.shell{max-width:760px;margin:auto;padding:0 22px 70px}header{height:78px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:Outfit,system-ui,sans-serif;font-size:27px;font-weight:700;letter-spacing:-1.4px}.brand-dot{color:#e2825a}.text-button{background:none;border:0;color:#69716d;font-weight:600;padding:10px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#c16c4b}.intro{padding:38px 0 26px}h1,h2{font-family:Outfit,system-ui,sans-serif;letter-spacing:-.04em}h1{font-size:clamp(36px,7vw,54px);line-height:1.08;margin:12px 0}h2{font-size:23px;margin:0}p{line-height:1.5;color:#6e7772}.intro p{margin:0}.tabs{display:flex;gap:28px;border-bottom:1px solid #dfe3dc;margin-bottom:25px}.tab{border:0;background:none;color:#7d8580;padding:0 2px 15px;font-weight:700}.tab.active{color:#243f35;border-bottom:3px solid #44745e}.panel{background:white;border:1px solid #e4e8e1;border-radius:22px;box-shadow:0 12px 34px rgba(31,50,38,.04)}.login-panel{margin:80px auto 0;padding:38px;max-width:440px}.login-panel p{margin-bottom:30px}.login-panel form{display:grid;gap:12px}label{font-size:13px;font-weight:700;color:#4f5b54}input,textarea,select{width:100%;border:1px solid #dbe0d8;background:white;border-radius:12px;padding:13px 14px;color:#202725;outline:none}input:focus,textarea:focus,select:focus{border-color:#44745e;box-shadow:0 0 0 3px #dbe9dc}textarea{min-height:100px;resize:vertical}.primary{border:0;border-radius:12px;background:#35694e;color:white;font-weight:700;padding:14px 18px;min-height:48px}.primary:hover{background:#28563e}.primary span{float:right}.login-panel .primary{margin-top:10px;text-align:left}.error{color:#b33d35;min-height:24px;font-size:13px;padding-top:8px}.filter-row{display:flex;gap:14px;align-items:center;margin-bottom:18px}.filter-row select{max-width:260px}.review-card{min-height:340px;padding:32px;display:flex;flex-direction:column}.review-card .course-label{font-size:12px;text-transform:uppercase;letter-spacing:1.7px;color:#7e8f84;font-weight:700}.question{font-family:Outfit,system-ui,sans-serif;font-size:clamp(27px,5vw,38px);line-height:1.2;white-space:pre-wrap;margin:30px 0;flex:1}.answer{border-top:1px solid #e4e8e1;padding:22px 0;font-size:20px;white-space:pre-wrap;line-height:1.45}.source{font-size:12px;color:#8b938d;margin-top:12px;overflow-wrap:anywhere}.reveal{width:100%}.rating-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rating-row button{border:1px solid #d6ded5;border-radius:12px;background:#f7faf6;padding:13px 3px;color:#375745;font-weight:700}.rating-row button:first-child{background:#fff5f0;color:#b85c3b;border-color:#f3d9cd}.empty{align-items:center;justify-content:center;text-align:center}.empty-icon{width:60px;height:60px;border-radius:50%;background:#e5efe6;color:#457c59;display:grid;place-items:center;font-size:30px;margin-bottom:12px}.empty h2{margin:8px 0}.section-title{display:flex;justify-content:space-between;align-items:center;margin:33px 0 17px}.small-button{border:1px solid #ced9ce;border-radius:10px;background:white;padding:9px 13px;color:#35694e;font-weight:700}.course-list,.card-list{display:grid;gap:10px}.list-item{border:1px solid #e4e8e1;border-radius:14px;background:white;padding:16px;display:flex;justify-content:space-between;align-items:center;gap:15px}.list-item strong{display:block;overflow-wrap:anywhere}.list-item small{display:block;color:#85908a;margin-top:5px}.list-item button{white-space:nowrap}.card-list .list-item{align-items:flex-start}.card-list .list-item strong{font-weight:600}.muted{color:#87928a;font-size:13px}.settings-panel{padding:26px;margin-bottom:15px}.settings-panel .primary{margin-top:6px}dialog{border:0;border-radius:20px;box-shadow:0 20px 70px #1b2a2380;width:min(92vw,520px);padding:28px}dialog::backdrop{background:#15241a80}#dialog-fields{display:grid;gap:12px;margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.dialog-actions .primary{min-width:100px}@media(max-width:520px){.shell{padding:0 17px 50px}header{height:66px}.intro{padding:23px 0 22px}.review-card{padding:23px;min-height:360px}.login-panel{margin:50px auto 0;padding:26px}.rating-row{gap:5px}.rating-row button{font-size:12px}}

#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.particle{position:absolute;border-radius:50%}
.confetti{position:absolute;top:0;border-radius:2px}
kbd{font:600 10px system-ui,sans-serif;border:1px solid currentColor;border-radius:4px;padding:1px 4px;margin-left:8px;opacity:.45;vertical-align:middle}
@media(hover:none){kbd{display:none}}
.streak-chip{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:99px;background:#fff1e8;color:#b85c3b;font-size:13px;font-weight:700}
.review-card{position:relative;overflow:hidden;transition:box-shadow .3s,border-color .3s}
.progress{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.segments{display:flex;gap:4px;flex:1}
.segments span{flex:1;height:8px;border-radius:99px;background:#e6ebe4;transition:background .3s}
.segments span.done{background:#44745e}
.segments span.again{background:#d9b8a6}
.segments span.just-done{animation:segment .45s cubic-bezier(.3,1.6,.5,1)}
.progress-count{font-size:13px;font-weight:700;color:#4f5b54;font-variant-numeric:tabular-nums;white-space:nowrap}
@keyframes segment{50%{transform:scaleY(1.9)}}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.combo{font-size:12px;font-weight:700;color:#8b938d}
.combo.hot{color:#b85c3b;background:#fff1e8;padding:3px 10px;border-radius:99px}
.card-body{display:flex;flex-direction:column;flex:1}
.card-body.entering{animation:enter .32s cubic-bezier(.2,.8,.3,1)}
.card-body.leaving{transition:transform .22s ease-in,opacity .22s;transform:translateX(-40px);opacity:0}
.card-body.leaving-down{transition:transform .22s ease-in,opacity .22s;transform:translateY(20px);opacity:0}
.answer{animation:rise .3s ease-out}
.rating-row{animation:rise .3s .06s ease-out backwards}
.rating-row button{transition:transform .12s}
.rating-row button:active{transform:scale(.94)}
.rating-row button:nth-child(4){background:#fffaeb;color:#9a7417;border-color:#f1e2b5}
.flash-good,.flash-hard{border-color:#9fd0ae;box-shadow:0 0 0 4px #dcefdf,0 12px 34px rgba(31,50,38,.08)}
.flash-easy{border-color:#f0d27a;box-shadow:0 0 0 4px #fbf0cc,0 12px 34px rgba(31,50,38,.08)}
.stamp{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);padding:10px 20px;border-radius:99px;font:700 20px Outfit,system-ui,sans-serif;white-space:nowrap;animation:stamp .5s cubic-bezier(.3,1.5,.5,1);pointer-events:none;box-shadow:0 10px 30px rgba(31,50,38,.12)}
.stamp.good,.stamp.hard{background:#35694e;color:white}
.stamp.easy{background:#f2c14e;color:#3b2f0a}
.stamp.again{background:#f4f1ec;color:#6e6259;font-size:17px}
.complete{align-items:center;text-align:center;justify-content:center;gap:4px}
.complete p{max-width:420px;margin:6px auto 16px}
.trophy{font-size:52px;animation:stamp .6s cubic-bezier(.3,1.6,.5,1)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:440px;margin-bottom:16px}
.stat-row div{background:#f5f8f3;border-radius:14px;padding:12px 4px}
.stat-row strong{display:block;font:700 26px Outfit,system-ui,sans-serif;color:#243f35}
.stat-row small{color:#85908a;font-size:12px}
.streak-banner{font-weight:700;color:#b85c3b;margin-bottom:16px}
.streak-banner.fresh{animation:stamp .6s .3s cubic-bezier(.3,1.6,.5,1) backwards}
.complete .primary{width:100%;max-width:440px;text-align:left}
@keyframes enter{from{transform:translateX(40px);opacity:0}}
@keyframes rise{from{transform:translateY(8px);opacity:0}}
@keyframes stamp{from{transform:translate(-50%,-50%) scale(.4);opacity:0}}
.trophy,.streak-banner.fresh{animation-name:pop}
@keyframes pop{from{transform:scale(.4);opacity:0}}
@media(max-width:520px){.stat-row strong{font-size:21px}.stamp{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.waiting{display:block;font-size:13px;color:#87928a;margin-top:6px}
