@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

:root { color-scheme: light; --ink:#17213c; --paper:#f6f1e8; --blue:#2348a3; --red:#d84143; --gold:#d7b665; --muted:#74776f; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"DM Sans",system-ui,sans-serif; padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
.topbar { height:72px; padding:env(safe-area-inset-top) 22px 0; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(23,33,60,.12); }
.brand { color:var(--ink); text-decoration:none; text-transform:uppercase; font-size:.78rem; font-weight:700; letter-spacing:.12em; display:flex; align-items:center; gap:10px; }
.brand-mark { display:grid; grid-template-columns:repeat(3,5px); width:19px; height:24px; overflow:hidden; border-radius:1px; transform:skewY(-8deg); }
.brand-mark i:nth-child(1){background:var(--blue)} .brand-mark i:nth-child(2){background:#fff} .brand-mark i:nth-child(3){background:var(--red)}
.icon-button { border:1px solid rgba(23,33,60,.17); color:var(--ink); background:transparent; border-radius:50%; width:39px; height:39px; font-size:1.1rem; }
main { max-width:680px; margin:auto; }
.intro { display:flex; justify-content:space-between; align-items:flex-end; padding:34px 22px 24px; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.17em; }
h1,h2 { font-family:"DM Serif Display",Georgia,serif; font-weight:400; margin:0; }
h1 { font-size:clamp(2.45rem,12vw,4rem); line-height:.88; letter-spacing:-.045em; }
.score-orbit { width:78px; height:78px; position:relative; display:grid; place-items:center; text-align:center; flex:0 0 auto; }
.score-orbit svg { position:absolute; inset:0; transform:rotate(-90deg); overflow:visible; }
.score-orbit circle { fill:none; stroke:rgba(23,33,60,.11); stroke-width:4; }
.score-orbit .ring { stroke:var(--red); stroke-linecap:round; stroke-dasharray:270; stroke-dashoffset:270; transition:stroke-dashoffset .35s ease; }
.score-orbit strong { font-family:"DM Serif Display"; font-size:1.6rem; line-height:1; margin-top:-10px; }
.score-orbit span { position:absolute; top:47px; font-size:.55rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.study { padding:0 16px 28px; }
.deck-meta { padding:0 8px 10px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; }
.pill { color:var(--blue); background:#e1e5ef; border-radius:99px; padding:7px 10px; }
.flashcard { width:100%; min-height:340px; padding:34px 28px 25px; border:0; border-radius:7px 7px 20px 7px; color:#fff; background:var(--ink); box-shadow:0 18px 45px rgba(23,33,60,.18); text-align:left; display:flex; flex-direction:column; position:relative; overflow:hidden; cursor:pointer; }
.flashcard::after { content:""; position:absolute; width:180px; height:180px; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:-83px; bottom:-78px; box-shadow:0 0 0 33px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.02); }
.flashcard.show-answer { background:var(--blue); }
.card-number { color:var(--gold); font-size:.67rem; letter-spacing:.16em; font-weight:700; }
.card-face { font-family:"DM Serif Display",Georgia,serif; font-size:clamp(1.65rem,7.4vw,2.35rem); line-height:1.13; letter-spacing:-.02em; margin:auto 0; position:relative; z-index:1; }
.card-answer { font-size:clamp(1.45rem,6.5vw,2rem); }
.reveal-hint { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; opacity:.72; width:100%; }
.reveal-hint i { font-style:normal; margin-right:8px; }
.actions { display:grid; grid-template-columns:1fr 1.18fr; gap:10px; margin-top:14px; }
.action { min-height:58px; border-radius:5px; border:1px solid rgba(23,33,60,.15); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; cursor:pointer; }
.action span { font-size:1rem; margin-right:6px; }
.review { color:var(--red); background:transparent; }
.validated { color:#fff; border-color:var(--red); background:var(--red); box-shadow:0 8px 20px rgba(216,65,67,.2); }
.skip { display:block; margin:16px auto 0; border:0; background:transparent; color:var(--muted); font-size:.74rem; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.progress-panel { margin:0 16px 14px; background:#fff; padding:24px; border-radius:7px; border:1px solid rgba(23,33,60,.1); display:grid; grid-template-columns:1fr auto; gap:18px; }
.progress-panel h2 { font-size:1.8rem; }
.stats { display:flex; gap:20px; text-align:right; }
.stats strong,.stats span { display:block; }.stats strong { font-size:1.15rem; }.stats span { color:var(--muted); font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; }
.progress-track { grid-column:1/-1; height:5px; background:#e8e5de; border-radius:9px; overflow:hidden; }.progress-track span { display:block; height:100%; width:0; background:var(--blue); transition:width .3s ease; }
.reset { grid-column:1/-1; justify-self:start; border:0; background:none; padding:0; color:var(--muted); font-size:.7rem; text-decoration:underline; cursor:pointer; }
.bottom-nav { position:fixed; z-index:5; left:0; right:0; bottom:0; height:calc(76px + env(safe-area-inset-bottom)); padding:8px 12px env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(3,1fr); background:rgba(246,241,232,.94); backdrop-filter:blur(16px); border-top:1px solid rgba(23,33,60,.12); }
.bottom-nav button { border:0; background:none; color:var(--muted); font-size:.65rem; font-weight:600; }.bottom-nav span { display:block; font-size:1.15rem; margin-bottom:4px; }.bottom-nav .active { color:var(--blue); }
button:focus-visible,a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media (min-width:700px) { body{padding-bottom:30px}.topbar{padding-left:calc((100% - 636px)/2);padding-right:calc((100% - 636px)/2)}.bottom-nav{position:static;max-width:648px;margin:20px auto;border:1px solid rgba(23,33,60,.12);border-radius:12px;height:72px}.flashcard{min-height:380px} }
@media (prefers-reduced-motion:reduce) { *{scroll-behavior:auto!important;transition:none!important} }
.error-page { min-height:100vh; padding:clamp(48px,12vw,120px) 24px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.error-page h1 { font-size:clamp(3rem,12vw,5rem); }
.error-page p:not(.eyebrow) { color:var(--muted); margin:18px 0 30px; }
.error-home { display:inline-block; padding:14px 18px; border-radius:5px; color:#fff; background:var(--blue); text-decoration:none; font-weight:700; }