:root{--paper:#fdfcf8;--grid-line:#d7e3f4;--ink:#1f3350;--ink-soft:#4a5b78;--pen-blue:#2255a4;--pen-blue-dark:#163d7a;--red-pen:#c0392b;--green-check:#2e7d32;--margin-line:#e3a5a0;color:var(--ink);font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background-color:var(--paper);background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);background-size:28px 28px;margin:0}.page{--page-max-width:640px;max-width:var(--page-max-width);min-height:100vh;margin:0 auto;padding:32px 24px 64px;position:relative}.page:before{content:"";top:0;bottom:0;left:max(12px, calc((100vw - var(--page-max-width)) / 2 + 56px));background:var(--margin-line);opacity:.6;z-index:0;width:2px;position:fixed}.hero{text-align:center;z-index:1;margin-bottom:28px;position:relative}.hero__title{color:var(--pen-blue-dark);margin:0 0 4px;font-family:Caveat,cursive;font-size:3rem;font-weight:700;transform:rotate(-1deg)}.hero__subtitle{color:var(--ink-soft);margin:0;font-size:.95rem}.tabs{z-index:1;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:20px;display:flex;position:relative}.tab{border:2px solid var(--pen-blue);color:var(--pen-blue);cursor:pointer;background:0 0;border-radius:999px;padding:6px 18px;font-family:Caveat,cursive;font-size:1.4rem}.tab--active{background:var(--pen-blue);color:#fff}.mode-picker{z-index:1;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:24px;display:grid;position:relative}.mode-card{border:1.5px solid var(--grid-line);cursor:pointer;text-align:left;background:#fff;border-radius:10px;flex-direction:column;gap:2px;padding:14px 10px;transition:border-color .15s,transform .1s;display:flex}.mode-card:hover{transform:translateY(-1px)}.mode-card--active{border-color:var(--pen-blue);box-shadow:0 0 0 2px #2255a426}.mode-card__label{font-size:.95rem;font-weight:600}.mode-card__sub{color:var(--ink-soft);font-size:.78rem}.start-panel{z-index:1;text-align:center;position:relative}.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 18px;font-family:Inter,sans-serif;font-size:1rem;font-weight:600}.btn--primary{background:var(--pen-blue);color:#fff}.btn--primary:hover{background:var(--pen-blue-dark)}.btn--primary:disabled{opacity:.5;cursor:not-allowed}.btn--big{padding:14px 28px;font-size:1.15rem}.btn--year{border:1.5px solid var(--pen-blue);color:var(--pen-blue);background:#fff}.btn--year:hover{background:var(--pen-blue);color:#fff}.year-list__label{margin-bottom:8px;font-weight:600}.year-list__grid{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.empty-note{color:var(--ink-soft);max-width:420px;margin:0 auto;font-size:.9rem}.empty-note code{background:#eef2f8;border-radius:4px;padding:1px 5px;font-family:JetBrains Mono,monospace;font-size:.82rem}.practice-config{text-align:left;border:1.5px solid var(--grid-line);background:#fff;border-radius:12px;padding:20px}.practice-config__section{margin-bottom:18px}.practice-config__label{margin:0 0 8px;font-size:.9rem;font-weight:600}.practice-config__ops{flex-wrap:wrap;gap:8px;display:flex}.op-chip{border:1.5px solid var(--grid-line);color:var(--ink-soft);cursor:pointer;background:#fff;border-radius:999px;padding:8px 16px;font-family:Inter,sans-serif;font-size:.9rem;font-weight:600}.op-chip--active{border-color:var(--pen-blue);background:var(--pen-blue);color:#fff}.practice-config__levels{flex-wrap:wrap;gap:8px;display:flex}.level-chip{border:1.5px solid var(--grid-line);color:var(--ink-soft);cursor:pointer;background:#fff;border-radius:10px;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 16px;font-family:Inter,sans-serif;display:flex}.level-chip--active{border-color:var(--pen-blue);background:var(--pen-blue);color:#fff}.level-chip__label{font-size:.9rem;font-weight:600}.level-chip__hint{opacity:.8;font-size:.75rem}.practice-config__custom-max{border:1.5px solid var(--grid-line);border-radius:8px;width:140px;margin-top:10px;padding:8px 10px;font-size:.95rem}.practice-config__fields{flex-wrap:wrap;gap:16px;margin-bottom:18px;display:flex}.practice-config__field{flex-direction:column;flex:1;gap:4px;min-width:140px;font-size:.85rem;font-weight:600;display:flex}.practice-config__field input{border:1.5px solid var(--grid-line);border-radius:8px;padding:8px 10px;font-size:.95rem;font-weight:400}.practice-config__hint{color:var(--red-pen);margin:-8px 0 14px;font-size:.85rem}.lesson-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;display:grid}.lesson-list__item{border:1.5px solid var(--grid-line);cursor:pointer;text-align:left;background:#fff;border-radius:10px;padding:14px;font-weight:600}.lesson-list__item:hover{border-color:var(--pen-blue)}.lesson-view{text-align:left}.lesson-view__title{color:var(--pen-blue-dark);margin:8px 0 12px;font-family:Caveat,cursive;font-size:2rem}.lesson-view__explanation{margin-bottom:20px;line-height:1.6}.worked-example{border-left:4px solid var(--pen-blue);background:#fff;border-radius:8px;margin-bottom:14px;padding:16px 18px;box-shadow:0 2px 10px #1f33500f}.worked-example__problem{margin-bottom:10px;font-family:JetBrains Mono,monospace;font-size:1.15rem;font-weight:600}.worked-example__steps{margin:0 0 10px;padding-left:20px;line-height:1.7}.worked-example__answer{color:var(--green-check);font-weight:600}.config-warning{color:#7a5c00;z-index:1;background:#fff8e1;border:1.5px solid #d4a017;border-radius:10px;margin-bottom:16px;padding:10px 14px;font-size:.85rem;position:relative}.config-warning code{background:#0000000f;border-radius:4px;padding:1px 5px;font-family:JetBrains Mono,monospace}.top-bar{z-index:2;justify-content:flex-end;align-items:center;gap:14px;margin-bottom:8px;display:flex;position:relative}.auth-screen{text-align:center;max-width:360px;margin:60px auto 0}.auth-form{text-align:left;flex-direction:column;gap:14px;margin-top:20px;display:flex}.auth-form label{flex-direction:column;gap:4px;font-size:.9rem;font-weight:600;display:flex}.auth-form input{border:1.5px solid var(--grid-line);border-radius:8px;padding:10px 12px;font-size:1rem;font-weight:400}.auth-form__error{color:var(--red-pen);margin:0;font-size:.88rem}.auth-form__info{color:var(--green-check);margin:0;font-size:.88rem}.auth-form__note{color:var(--ink-soft);margin:0;font-size:.85rem}.profile-bar{justify-content:flex-end;margin-bottom:8px;display:flex}.profile-bar__current{border:1.5px solid var(--grid-line);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 6px;font-size:.9rem;font-weight:600;display:flex}.profile-bar__avatar{background:var(--pen-blue);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-family:Caveat,cursive;font-size:1.1rem;display:flex}.profile-panel{border:1.5px solid var(--grid-line);background:#fff;border-radius:12px;width:min(280px,100vw - 48px);max-width:calc(100vw - 48px);padding:14px;position:absolute;top:46px;right:0;box-shadow:0 8px 24px #1f33501f}.profile-panel__list{flex-direction:column;gap:6px;margin-bottom:10px;display:flex}.profile-chip-row{align-items:center;gap:6px;display:flex}.profile-chip{text-align:left;cursor:pointer;word-break:break-word;background:#f5f7fb;border:none;border-radius:8px;flex:1;min-width:0;min-height:40px;padding:8px 10px;font-weight:600}.profile-chip--active{background:var(--pen-blue);color:#fff}.profile-chip__remove{color:var(--red-pen);cursor:pointer;background:0 0;border:none;width:32px;height:32px;font-size:1.2rem}.profile-panel__new{gap:6px;display:flex}.profile-panel__new input{border:1.5px solid var(--grid-line);border-radius:8px;flex:1;min-width:0;padding:8px 10px;font-size:.95rem}.history-stats{margin-bottom:28px}.history-stats__title,.history-list__title{color:var(--pen-blue-dark);margin:0 0 12px;font-family:Caveat,cursive;font-size:1.5rem}.stat-row{grid-template-columns:110px 1fr auto;align-items:center;gap:10px;margin-bottom:8px;font-size:.88rem;display:grid}.stat-row__label{font-weight:600}.stat-row__bar{background:#eef2f8;border-radius:999px;height:10px;overflow:hidden}.stat-row__fill{border-radius:999px;height:100%}.stat-row__fill.is-low{background:var(--red-pen)}.stat-row__fill.is-mid{background:#d4a017}.stat-row__fill.is-high{background:var(--green-check)}.stat-row__value{color:var(--ink-soft);white-space:nowrap}.history-list{flex-direction:column;gap:8px;display:flex}.history-item{border:1.5px solid var(--grid-line);background:#fff;border-radius:10px;justify-content:space-between;align-items:center;padding:12px 14px;display:flex}.history-item__main{flex-direction:column;display:flex}.history-item__title{font-weight:600}.history-item__date{color:var(--ink-soft);font-size:.78rem}.history-item__score{font-family:JetBrains Mono,monospace;font-weight:600}.history-item__score.is-high{color:var(--green-check)}.history-item__score.is-mid{color:#b8860b}.history-item__score.is-low{color:var(--red-pen)}@media (width>=640px){.page{--page-max-width:720px;padding-top:40px}.hero__title{font-size:3.4rem}}@media (width>=1024px){.page{--page-max-width:820px;padding-top:56px}.problem-card__text{font-size:1.6rem}.mode-picker{grid-template-columns:repeat(5,1fr)}}@media (width<=420px){.hero__title{font-size:2.3rem}.stat-row{grid-template-columns:84px 1fr auto;font-size:.8rem}.problem-card{padding:18px 14px}.problem-card__text{font-size:1.2rem}}.btn,.tab,.mode-card,.choice-btn,.lesson-list__item,.link-btn,.profile-chip{min-height:40px}.quiz-screen{z-index:1;position:relative}.quiz-screen__header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.quiz-screen__title{color:var(--pen-blue-dark);font-family:Caveat,cursive;font-size:1.6rem}.link-btn{color:var(--ink-soft);cursor:pointer;background:0 0;border:none;font-size:.85rem;text-decoration:underline}.problem-card{background:#fff;border-radius:12px;padding:24px 20px;box-shadow:0 2px 10px #1f33500f}.problem-card__eyebrow{letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.78rem;display:flex}.problem-card__timer{letter-spacing:normal;text-transform:none;font-family:JetBrains Mono,monospace;font-weight:600}.problem-card__timer--low{color:var(--red-pen)}.problem-card__text{margin:0 0 20px;font-family:JetBrains Mono,monospace;font-size:1.4rem;line-height:1.5}.problem-card__choices{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px;display:grid}.choice-btn{border:1.5px solid var(--grid-line);cursor:pointer;background:#fff;border-radius:8px;padding:12px;font-family:JetBrains Mono,monospace;font-size:1.1rem}.choice-btn:hover:not(:disabled){border-color:var(--pen-blue)}.choice-btn--right{border-color:var(--green-check);color:var(--green-check);background:#e8f5e9}.choice-btn--wrong{border-color:var(--red-pen);color:var(--red-pen);background:#fdecea}.problem-card__answer-row{gap:10px;display:flex}.answer-input{border:1.5px solid var(--grid-line);border-radius:8px;width:110px;padding:10px 14px;font-family:JetBrains Mono,monospace;font-size:1.2rem}.answer-input--right{border-color:var(--green-check);background:#e8f5e9}.answer-input--wrong{border-color:var(--red-pen);background:#fdecea}.problem-card__feedback{margin-top:16px;font-weight:600}.problem-card__feedback.is-correct{color:var(--green-check)}.problem-card__feedback.is-wrong{color:var(--red-pen)}.problem-card__explain{color:var(--ink-soft);font-weight:400}.quiz-screen--done{flex-direction:column;align-items:center;gap:28px;padding-top:40px;display:flex}.stamp{border:5px solid var(--red-pen);color:var(--red-pen);opacity:.9;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:170px;height:170px;font-family:Caveat,cursive;animation:.35s ease-out stamp-in;display:flex;transform:rotate(-8deg)}.stamp--great{border-color:var(--green-check);color:var(--green-check)}.stamp--ok{border-color:var(--pen-blue);color:var(--pen-blue)}.stamp__score{font-size:2.4rem;font-weight:700;line-height:1}.stamp__word{margin-top:4px;font-size:1.4rem}.stamp__time{margin-top:2px;font-family:JetBrains Mono,monospace;font-size:.9rem}@keyframes stamp-in{0%{opacity:0;transform:rotate(-8deg)scale(1.6)}to{opacity:.9;transform:rotate(-8deg)scale(1)}}@media (prefers-reduced-motion:reduce){.stamp{animation:none}}