:root { --blue-950:#03245a; --blue-900:#05367f; --blue-800:#0649bd; --blue-700:#0759d6; --blue-100:#e9f1ff; --blue-50:#f4f7fd; --yellow:#ffd400; --yellow-soft:#fff6bf; --ink:#10203a; --muted:#66738a; --line:#dce4ef; --green:#07956a; --red:#d63f4c; --orange:#e57c15; --canvas:#f5f7fb; --shadow:0 20px 55px rgba(15,43,87,.12); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); font-synthesis:none; }
* { box-sizing:border-box; }
html { min-height:100%; scroll-behavior:smooth; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--canvas); }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(7,89,214,.25); outline-offset:3px; }
.hidden { display:none!important; }
.learn-header { position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(220,228,239,.9); background:rgba(255,255,255,.95); backdrop-filter:blur(14px); }
.header-inner { display:flex; align-items:center; justify-content:space-between; width:min(1240px,calc(100% - 48px)); height:76px; margin:0 auto; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-size:18px; font-weight:900; letter-spacing:-.5px; text-decoration:none; }
.brand-mark { position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:white; background:var(--blue-700); box-shadow:0 8px 20px rgba(7,89,214,.22); font-size:22px; font-weight:950; }
.brand-mark i { position:absolute; right:-3px; bottom:-3px; width:13px; height:13px; border:3px solid white; border-radius:50%; background:var(--yellow); }
.header-inner nav { display:flex; align-items:center; gap:18px; }
.header-inner nav a { color:var(--blue-800); font-size:11px; font-weight:850; text-decoration:none; }
.open-pill { padding:7px 10px; border:1px solid #efda69; border-radius:20px; color:#665200; background:var(--yellow-soft); font-size:8px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }
.hero-shell { position:relative; display:grid; grid-template-columns:1fr 430px; align-items:center; width:min(1240px,calc(100% - 48px)); min-height:370px; margin:38px auto 0; padding:50px 58px; overflow:hidden; border-radius:28px; color:white; background:linear-gradient(130deg,var(--blue-950),var(--blue-700)); box-shadow:var(--shadow); }
.hero-shell::before { content:""; position:absolute; right:-130px; top:-240px; width:650px; height:650px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 165px rgba(255,255,255,.018); }
.hero-copy { position:relative; z-index:2; }
.eyebrow { display:inline-block; margin-bottom:10px; color:var(--blue-700); font-size:10px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; }
.eyebrow--yellow { color:var(--yellow); }
.hero-copy h1 { margin:0; color:white; font-size:clamp(42px,5vw,68px); line-height:1; letter-spacing:-3.5px; }
.hero-copy h1 em { color:var(--yellow); font-style:normal; }
.hero-copy p { margin:17px 0 28px; color:rgba(255,255,255,.66); font-size:12px; }
.primary-button,.secondary-button,.danger-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:50px; padding:0 21px; border:1px solid transparent; border-radius:12px; font-size:11px; font-weight:850; cursor:pointer; text-decoration:none; transition:transform .16s,box-shadow .16s,background .16s; }
.primary-button { color:white; background:var(--blue-700); box-shadow:0 10px 24px rgba(7,89,214,.2); }
.primary-button:hover,.secondary-button:hover,.danger-button:hover { transform:translateY(-2px); }
.primary-button--yellow { color:var(--blue-950); background:var(--yellow); box-shadow:0 10px 24px rgba(255,212,0,.2); }
.secondary-button { border-color:var(--line); color:var(--blue-800); background:white; }
.danger-button { border-color:#f0c7cc; color:var(--red); background:#fff0f1; }
.hero-card-art { position:relative; z-index:2; height:270px; }
.hero-card-art > div { position:absolute; top:50%; left:50%; width:195px; height:235px; border-radius:20px; background:white; box-shadow:0 18px 42px rgba(0,0,0,.22); }
.hero-card-art > div:nth-child(1) { opacity:.28; transform:translate(-40%,-49%) rotate(14deg); }
.hero-card-art > div:nth-child(2) { opacity:.55; transform:translate(-61%,-50%) rotate(-9deg); }
.hero-card-art > div:nth-child(3) { display:grid; place-content:center; justify-items:center; gap:13px; color:var(--blue-950); transform:translate(-50%,-50%) rotate(3deg); text-align:center; }
.hero-card-art span { display:grid; place-items:center; width:57px; height:57px; border-radius:50%; background:var(--yellow); font-size:30px; font-weight:950; }
.hero-card-art strong { font-size:16px; line-height:1.25; }
.page-inner { width:min(1240px,calc(100% - 48px)); margin:0 auto; }
.dashboard-content { padding:22px 0 90px; }
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 70px; }
.stats-row article { display:grid; min-height:128px; padding:21px; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 6px 20px rgba(15,43,87,.035); }
.stats-row span { color:var(--muted); font-size:9px; font-weight:800; }
.stats-row strong { align-self:end; font-size:35px; letter-spacing:-1.2px; }
.stats-row small { color:var(--muted); font-size:8px; }
.stats-row .stat-highlight { border:0; color:white; background:linear-gradient(135deg,var(--blue-900),var(--blue-700)); }
.stats-row .stat-highlight span,.stats-row .stat-highlight small { color:rgba(255,255,255,.62); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:22px; }
.section-heading h2,.setup-copy h2 { margin:0; font-size:clamp(30px,3.5vw,45px); line-height:1.05; letter-spacing:-1.8px; }
.text-button { padding:0; border:0; color:var(--blue-700); background:transparent; font-size:10px; font-weight:850; cursor:pointer; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.category-card { display:grid; grid-template-columns:46px 1fr auto; grid-template-rows:auto auto; align-items:center; gap:5px 13px; min-height:105px; padding:17px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:white; cursor:pointer; text-align:left; transition:transform .18s,border .18s,box-shadow .18s; }
.category-card:hover,.category-card.selected { transform:translateY(-3px); border-color:#a9bee0; box-shadow:0 10px 26px rgba(15,43,87,.08); }
.category-card.selected { background:var(--blue-50); }
.category-card > span:first-child { grid-row:1/3; display:grid; place-items:center; width:46px; height:46px; border-radius:13px; color:var(--blue-700); background:var(--blue-100); font-size:21px; }
.category-card:nth-child(3n+2)>span:first-child { color:#715800; background:var(--yellow-soft); }
.category-card:nth-child(3n)>span:first-child { color:var(--green); background:#e4f7f0; }
.category-card strong { align-self:end; font-size:12px; }
.category-card small { align-self:start; color:var(--muted); font-size:8px; }
.category-card b { grid-column:3; grid-row:1/3; color:#9ba7b8; font-size:18px; }
.category-card .mini-track { grid-column:2/4; width:100%; height:4px; overflow:hidden; border-radius:4px; background:#e8edf4; }
.category-card .mini-track i { display:block; height:100%; background:var(--blue-700); }
.setup-card { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; margin-top:55px; padding:36px; border:1px solid var(--line); border-radius:22px; background:white; box-shadow:0 9px 30px rgba(15,43,87,.06); }
.setup-copy p { margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.setup-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.setup-controls label { display:grid; gap:6px; }
.setup-controls label>span { font-size:9px; font-weight:850; }
.setup-controls select { width:100%; height:47px; padding:0 12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:white; outline:0; }
.setup-controls .primary-button { grid-column:1/-1; margin-top:7px; }
.session-shell { width:min(820px,calc(100% - 36px)); margin:0 auto; padding:35px 0 90px; }
.session-top { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:17px; margin-bottom:22px; }
.circle-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; color:var(--muted); background:white; font-size:25px; cursor:pointer; }
.session-top>div { display:grid; grid-template-columns:1fr auto; gap:8px; color:var(--muted); font-size:10px; }
.session-top strong { color:var(--ink); }
.progress-track { grid-column:1/-1; height:7px; overflow:hidden; border-radius:7px; background:#e4e9f1; }
.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue-700),#20a1e6); transition:width .25s; }
.flip-help { margin:0 0 11px; color:var(--muted); font-size:9px; text-align:center; }
.flashcard { width:100%; height:430px; padding:0; border:0; background:transparent; cursor:pointer; perspective:1500px; }
.flashcard-inner { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .52s cubic-bezier(.2,.7,.25,1); }
.flashcard.flipped .flashcard-inner { transform:rotateY(180deg); }
.card-face { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:55px; border:1px solid #d8e1ee; border-radius:25px; background:white; box-shadow:0 22px 60px rgba(15,43,87,.13); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.card-face::before { content:""; position:absolute; inset:12px; border:1px solid #edf1f6; border-radius:18px; }
.card-face small { position:absolute; top:27px; left:27px; padding:7px 10px; border-radius:18px; color:var(--blue-700); background:var(--blue-100); font-size:8px; font-weight:900; }
.card-face>span { position:relative; margin-bottom:18px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; }
.card-face>strong { position:relative; max-width:650px; font-size:clamp(21px,2.4vw,29px); line-height:1.45; text-align:center; white-space:pre-line; }
.card-face>i { position:absolute; bottom:25px; color:var(--muted); font-size:8px; font-style:normal; }
.card-back { color:white; background:linear-gradient(140deg,var(--blue-950),var(--blue-700)); transform:rotateY(180deg); }
.card-back::before { border-color:rgba(255,255,255,.13); }
.card-back small { color:var(--blue-950); background:var(--yellow); }
.card-back>span,.card-back>i { color:rgba(255,255,255,.55); }
.card-back>strong { font-size:clamp(16px,1.8vw,21px); font-weight:650; line-height:1.6; }
.reveal-wrap { display:flex; justify-content:center; margin-top:22px; }
.reveal-wrap kbd { padding:3px 6px; border:1px solid rgba(255,255,255,.25); border-radius:5px; color:rgba(255,255,255,.75); background:transparent; font-size:8px; }
.rating-wrap { margin-top:20px; text-align:center; }
.rating-wrap>p { margin:0 0 10px; color:var(--muted); font-size:9px; }
.rating-wrap>div { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.rating { position:relative; display:grid; grid-template-columns:27px 1fr; grid-template-rows:1fr 1fr; align-items:center; column-gap:7px; min-height:63px; padding:9px 25px 9px 10px; border:1px solid var(--line); border-radius:12px; background:white; cursor:pointer; text-align:left; }
.rating>span { grid-row:1/3; display:grid; place-items:center; width:27px; height:27px; border-radius:50%; }
.rating strong { align-self:end; font-size:10px; }
.rating small { align-self:start; color:var(--muted); font-size:7px; }
.rating kbd { position:absolute; top:7px; right:7px; color:#a1abba; background:transparent; font-size:7px; }
.rating--again>span { color:var(--red); background:#fff0f1; }.rating--hard>span { color:var(--orange); background:#fff3e7; }.rating--good>span { color:var(--blue-700); background:var(--blue-100); }.rating--easy>span { color:var(--green); background:#e4f7f0; }
.finish-card { width:min(620px,calc(100% - 36px)); margin:80px auto; text-align:center; }
.finish-icon { display:grid; place-items:center; width:90px; height:90px; margin:0 auto 23px; border:10px solid var(--yellow-soft); border-radius:50%; color:var(--blue-950); background:var(--yellow); font-size:38px; font-weight:950; }
.finish-card h1 { margin:0 0 10px; font-size:48px; letter-spacing:-2px; }.finish-card>p { color:var(--muted); font-size:12px; }
.finish-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:26px 0; }.finish-stats div { padding:13px 7px; border:1px solid var(--line); border-radius:11px; background:white; }.finish-stats strong { display:block; font-size:19px; }.finish-stats small { color:var(--muted); font-size:8px; }
.finish-actions { display:flex; justify-content:center; gap:9px; }
.modal-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:20px; background:rgba(3,25,59,.68); backdrop-filter:blur(5px); }
.modal { position:relative; width:min(100%,500px); padding:34px; border-radius:22px; background:white; box-shadow:0 28px 80px rgba(0,0,0,.25); }
.modal h2 { margin:0 0 10px; font-size:28px; letter-spacing:-1px; }.modal>p { margin:0 0 20px; color:var(--muted); font-size:11px; line-height:1.6; }
.modal-close { position:absolute; top:13px; right:16px; border:0; color:var(--muted); background:transparent; font-size:26px; cursor:pointer; }
.settings-actions { display:grid; gap:9px; }.file-button { cursor:pointer; }.file-button input { position:absolute; opacity:0; pointer-events:none; }
.settings-message { margin:14px 0 0!important; padding:10px; border-radius:9px; color:#19684f!important; background:#e4f7f0; }.toast { position:fixed; bottom:25px; left:50%; z-index:100; min-width:230px; padding:12px 17px; transform:translateX(-50%); border-radius:11px; color:white; background:var(--blue-950); box-shadow:var(--shadow); font-size:10px; font-weight:750; text-align:center; }
@media(max-width:900px){.hero-shell{grid-template-columns:1fr 300px;padding:42px}.stats-row{grid-template-columns:1fr 1fr}.category-grid{grid-template-columns:1fr 1fr}.setup-card{grid-template-columns:1fr;gap:28px}.hero-card-art>div{width:165px;height:205px}}
@media(max-width:620px){.header-inner{width:calc(100% - 30px);height:66px}.brand{font-size:15px}.brand-mark{width:37px;height:37px;font-size:18px}.header-inner nav a{display:none}.hero-shell{grid-template-columns:1fr;width:calc(100% - 24px);min-height:360px;margin-top:12px;padding:34px 25px}.hero-copy h1{font-size:42px;letter-spacing:-2.4px}.hero-card-art{display:none}.page-inner{width:calc(100% - 24px)}.dashboard-content{padding-top:14px}.stats-row{gap:8px;margin-bottom:55px}.stats-row article{min-height:110px;padding:15px}.stats-row strong{font-size:30px}.section-heading{align-items:flex-start;flex-direction:column;gap:10px}.section-heading h2{font-size:34px}.category-grid{grid-template-columns:1fr}.setup-card{margin-top:40px;padding:22px}.setup-controls{grid-template-columns:1fr}.setup-controls .primary-button{grid-column:auto}.session-shell{padding-top:22px}.flashcard{height:410px}.card-face{padding:48px 23px;border-radius:20px}.card-face>strong{font-size:20px}.card-back>strong{font-size:15px}.rating-wrap>div{grid-template-columns:1fr 1fr}.finish-card h1{font-size:40px}.finish-actions{flex-direction:column}.finish-actions button{width:100%}.modal{padding:29px 21px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}