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

:root { --paper:#f4f0e8; --card:#fffdf8; --ink:#17312d; --muted:#68746e; --line:#d8d4ca; --accent:#e4654f; --accent-soft:#f8ddd5; --green:#27725c; --green-soft:#dcece5; --yellow:#d7a63b; --shadow:0 18px 50px rgba(23,49,45,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; line-height:1.55; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
a { color:inherit; }
button,input,select { font:inherit; }
button { color:inherit; }
:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
#app:focus { outline:none; }
.site-header { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center; padding:18px clamp(20px,5vw,72px); background:rgba(244,240,232,.92); border-bottom:1px solid rgba(23,49,45,.12); backdrop-filter:blur(14px); }
.brand { display:flex; gap:10px; align-items:center; font-family:"Fraunces",serif; font-size:1.15rem; text-decoration:none; }
.brand span { display:grid; place-items:center; width:45px; height:45px; color:white; background:var(--accent); border-radius:50% 48% 54% 46%; transform:rotate(-5deg); font-family:"DM Sans",sans-serif; font-weight:700; font-size:.82rem; }
nav { display:flex; gap:8px; }
nav a { padding:9px 12px; border-radius:999px; text-decoration:none; color:var(--muted); font-size:.92rem; font-weight:600; }
nav a.active,nav a:hover { color:var(--ink); background:var(--card); }
main { width:min(1160px,calc(100% - 40px)); min-height:calc(100vh - 160px); margin:0 auto; padding:70px 0 90px; }
footer { display:flex; justify-content:space-between; width:min(1160px,calc(100% - 40px)); margin:auto; padding:24px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.84rem; }
h1,h2,h3 { margin-top:0; font-family:"Fraunces",serif; line-height:1.08; }
h1 { max-width:780px; margin-bottom:20px; font-size:clamp(3rem,7vw,6rem); letter-spacing:-.05em; }
h2 { font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.035em; }
h3 { font-size:1.35rem; }
p { max-width:720px; }
.eyebrow { display:flex; gap:10px; align-items:center; margin-bottom:18px; color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow::before { content:""; width:34px; height:2px; background:currentColor; }
.lede { color:var(--muted); font-size:1.08rem; }
.hero { position:relative; padding-bottom:65px; border-bottom:1px solid var(--line); }
.hero::after { content:"A / B / C / D"; position:absolute; right:2%; bottom:30px; color:rgba(23,49,45,.08); font:700 clamp(2.4rem,6vw,5rem)/1 "Fraunces",serif; transform:rotate(-4deg); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin:60px 0 24px; }
.section-head h2,.section-head p { margin-bottom:0; }
.set-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.filter-bar { display:flex; gap:8px; flex-wrap:wrap; margin:-5px 0 22px; }
.filter-button { padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); cursor:pointer; font-weight:600; }
.filter-button[aria-pressed="true"] { color:white; border-color:var(--ink); background:var(--ink); }
.set-card,.panel,.topic-card,.stat { background:rgba(255,253,248,.84); border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.8) inset; }
.set-card { display:flex; min-height:290px; flex-direction:column; padding:26px; border-radius:4px 28px 4px 4px; transition:transform .18s,box-shadow .18s; }
.set-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.set-card .number { margin:auto 0 20px; color:var(--accent); font:700 3.4rem/1 "Fraunces",serif; }
.set-actions { display:grid; gap:10px; }
.solution-link { padding:4px; text-align:center; color:var(--muted); font-size:.88rem; font-weight:700; text-underline-offset:3px; }
.meta,.chips { display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.78rem; }
.chip { padding:5px 9px; border:1px solid var(--line); border-radius:999px; background:var(--paper); }
.progress-track { height:6px; margin:14px 0 18px; overflow:hidden; border-radius:99px; background:#e7e2d9; }
.progress-track span { display:block; height:100%; background:var(--green); }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:44px; padding:10px 18px; border:1px solid var(--ink); border-radius:4px; background:var(--ink); color:white; text-decoration:none; font-weight:700; cursor:pointer; }
.button.secondary { color:var(--ink); background:transparent; }
.button.ghost { color:var(--muted); border-color:var(--line); background:var(--card); }
.button.danger { color:#9e321f; border-color:#c94b36; background:transparent; }
.button.danger:hover { color:white; background:#b9412d; }
.button:disabled { cursor:not-allowed; opacity:.5; }
.practice-shell { display:grid; grid-template-columns:minmax(0,760px) 250px; gap:45px; align-items:start; }
.practice-top { margin-bottom:25px; }
.question-card { padding:clamp(24px,5vw,48px); border:1px solid var(--line); border-radius:5px 44px 5px 5px; background:var(--card); box-shadow:var(--shadow); }
.question-card h1 { margin:24px 0 36px; font:600 clamp(1.55rem,3vw,2.35rem)/1.35 "Fraunces",serif; letter-spacing:-.02em; }
.target-word { color:var(--accent); }
.flag-button { float:right; padding:7px 12px; border:1px solid var(--line); border-radius:99px; background:transparent; cursor:pointer; }
.flag-button.flagged { color:#8a5a00; border-color:#d7a63b; background:#fff1c9; }
.choices { display:grid; gap:11px; margin:0 0 24px; padding:0; border:0; }
.choice { display:grid; grid-template-columns:38px 1fr; gap:13px; align-items:center; width:100%; padding:14px; text-align:left; border:1px solid var(--line); border-radius:5px; background:white; cursor:pointer; }
.choice .letter { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:50%; font-weight:700; }
.choice:hover:not(:disabled),.choice.selected { border-color:var(--ink); background:#f6f4ed; }
.choice.correct { border-color:var(--green); background:var(--green-soft); }
.choice.incorrect { border-color:var(--accent); background:var(--accent-soft); }
.choice:disabled { color:var(--ink); cursor:default; }
.feedback { margin-top:25px; padding:22px; border-left:4px solid var(--green); background:var(--green-soft); }
.feedback.incorrect { border-color:var(--accent); background:var(--accent-soft); }
.feedback h3 { margin-bottom:8px; font-family:"DM Sans",sans-serif; font-size:1rem; }
.feedback h4 { margin:20px 0 8px; }
.feedback p { margin:6px 0; }
.feedback .choice-definitions { margin:0; background:rgba(255,255,255,.42); }
.topic-link { display:inline-block; margin:8px 6px 0 0; font-weight:700; }
.practice-actions { display:flex; gap:10px; margin-top:24px; }
.question-map { position:sticky; top:105px; }
.question-map h2 { font-size:1.3rem; }
.number-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.number-grid button { aspect-ratio:1; border:1px solid var(--line); border-radius:50%; background:var(--card); cursor:pointer; }
.number-grid button.current { color:white; border-color:var(--ink); background:var(--ink); }
.number-grid button.done { border-color:var(--green); box-shadow:inset 0 -4px 0 var(--green); }
.number-grid button.flagged { color:#8a5a00; background:#fff1c9; }
.search { width:min(480px,100%); padding:13px 16px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--ink); }
.grammar-layout { display:grid; grid-template-columns:240px 1fr; gap:36px; margin-top:35px; }
.topic-nav { position:sticky; top:105px; display:grid; gap:4px; align-self:start; }
.topic-nav a { padding:9px; border-left:3px solid transparent; color:var(--muted); text-decoration:none; }
.topic-nav a:hover { color:var(--ink); border-color:var(--accent); }
.topic-list { display:grid; gap:20px; }
.topic-card { padding:30px; border-radius:4px 28px 4px 4px; }
.example { padding:12px 15px; border-left:3px solid var(--green); background:var(--green-soft); }
.example.bad { border-color:var(--accent); background:var(--accent-soft); text-decoration:line-through; text-decoration-color:var(--accent); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:35px 0; }
.stat { padding:24px; }
.stat strong { display:block; margin-top:8px; font:700 2.5rem/1 "Fraunces",serif; }
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.panel { padding:26px; }
.data-row { display:grid; grid-template-columns:1fr auto; gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.data-row:last-child { border-bottom:0; }
.empty { padding:36px; border:1px dashed var(--line); color:var(--muted); text-align:center; }
.backup { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.solution-header { padding-bottom:38px; border-bottom:1px solid var(--line); }
.solution-header > a { display:inline-block; margin-bottom:36px; }
.solution-header h1 { font-size:clamp(2.6rem,6vw,5rem); }
.solutions-list { display:grid; gap:0; margin:0; padding:0; list-style:none; counter-reset:solutions; }
.solution-item { padding:38px 0; border-bottom:1px solid var(--line); counter-increment:solutions; }
.solution-item h2 { max-width:900px; margin:12px 0 20px; font:600 clamp(1.3rem,2.5vw,1.8rem)/1.4 "Fraunces",serif; }
.solution-item p { margin:8px 0; }
.solution-answer { color:var(--green); font-size:1.05rem; }
.choice-definitions { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; max-width:900px; margin:0 0 22px; padding:18px; background:rgba(244,240,232,.72); border-left:3px solid var(--line); }
.choice-definitions div { display:grid; grid-template-columns:minmax(110px,.7fr) 1.3fr; gap:10px; }
.choice-definitions dt { font-weight:700; }
.choice-definitions dd { margin:0; color:var(--muted); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:850px) { .set-grid { grid-template-columns:1fr 1fr; } .practice-shell,.grammar-layout { grid-template-columns:1fr; } .question-map,.topic-nav { position:static; } .topic-nav { grid-template-columns:repeat(2,1fr); } .stats { grid-template-columns:1fr 1fr; } }
@media (max-width:580px) { .site-header { align-items:flex-start; } .brand { font-size:0; } nav { gap:0; } nav a { padding:9px 8px; font-size:.8rem; } main { width:min(100% - 28px,1160px); padding-top:45px; } h1 { font-size:2.8rem; } .set-grid,.dashboard-grid,.choice-definitions { grid-template-columns:1fr; } .section-head { align-items:start; flex-direction:column; } .question-card { padding:22px; border-radius:4px 28px 4px 4px; } .stats { gap:8px; } .stat { padding:16px; } .stat strong { font-size:2rem; } footer { flex-direction:column; gap:5px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }