body { line-height:1.6; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; border:1px solid var(--line); padding:10px 16px; min-height:44px; border-radius:10px; color:var(--ink); background:white; }
button:hover:not(:disabled) { border-color:var(--accent); background:#f2faf8; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,a:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #e7b832; outline-offset:3px; }
.primary { background:var(--cyan-dark); color:white; border-color:var(--cyan-dark); font-weight:600; }
.primary:hover:not(:disabled) { background:#076a7b; color:white; }
.text-button { background:transparent; border-color:transparent; color:var(--accent); }
.pill { border-radius:7px; background:var(--mint); padding:5px 10px; font-size:12px; color:var(--cyan-dark); font-weight:600; }
main { max-width:1240px; margin:0 auto; padding:42px 32px 56px; min-height:calc(100vh - 170px); }
.eyebrow { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:1.5px; margin:0 0 12px; }
h1 { color:var(--navy); font-size:clamp(30px,3.5vw,44px); font-weight:650; letter-spacing:-1px; line-height:1.5; margin:0 0 16px; }
h2 { font-size:23px; margin:0 0 12px; line-height:1.4; }
h3 { font-size:16px; margin:0 0 10px; }
p { margin:0 0 12px; }
.muted { color:var(--muted); }
.small { font-size:13px; }
.lead { max-width:660px; color:var(--muted); white-space:pre-line; line-height:1.9; font-size:15px; }
.intro { margin-bottom:32px; position:relative; }
.intro h1 > span { display:inline; }
.title-accent { color:var(--cyan-dark); }
.trial-note { position:absolute; top:6px; right:0; font-size:12px; color:var(--muted); }
.tabs { display:flex; width:fit-content; gap:4px; background:#eaf1f3; border:1px solid #e5edf0; padding:4px; border-radius:12px; margin:26px 0 22px; }
.tabs button { border:0; background:transparent; color:var(--muted); min-width:128px; font-size:14px; font-weight:600; padding:9px 18px; }
.tabs button[aria-pressed="true"] { background:white; color:var(--navy); box-shadow:0 2px 6px #12356b09; }
.levels button[aria-pressed="true"] { background:var(--mint); color:var(--cyan-dark); border-color:#99d5d5; }
.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; align-items:center; }
select { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:white; color:var(--ink); max-width:100%; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.topic { border:1px solid var(--line); border-radius:18px; background:white; padding:24px; display:flex; flex-direction:column; gap:14px; }
.topic.available { border-color:#c4e5e8; background:linear-gradient(125deg,#f8fdff,#edf9f7); position:relative; overflow:hidden; }
.topic.available::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--brand-gradient); }
.topic p { margin:0; }.topic h3 { font-size:19px; }.topic button { margin-top:auto; }
.topic-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.featured-grid { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; }
.featured-grid .topic { padding:30px; gap:18px; }
.featured-grid .topic h3 { font-size:28px; font-weight:650; color:var(--navy); margin-bottom:0; }
.featured-grid .topic button { align-self:flex-start; min-width:220px; margin-top:6px; }
.task-chips { display:flex; flex-wrap:wrap; gap:8px; margin:3px 0; }
.task-chips span { border:1px solid #cfe6e8; color:#557487; border-radius:8px; padding:6px 10px; background:#ffffffb3; font-size:12px; }
.practice-guide { padding:24px 28px; border:1px solid var(--line); border-radius:18px; background:white; }
.practice-guide .eyebrow { font-size:10px; margin-bottom:9px; }
.practice-guide h2 { color:var(--navy); font-size:19px; font-weight:600; margin-bottom:22px; }
.guide-step { display:flex; gap:14px; margin-top:18px; align-items:flex-start; }
.guide-number { font-size:11px; font-weight:600; color:var(--cyan-dark); background:var(--mint); border-radius:50%; width:28px; height:28px; display:grid; place-items:center; flex-shrink:0; }
.guide-step h3 { font-size:13px; font-weight:600; margin:0 0 4px; }
.guide-step p { font-size:12px; color:var(--muted); margin:0; }
.badge-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.meta { color:var(--muted); font-size:12px; }
.notice { font-size:13px; color:var(--muted); margin:18px 0; max-width:850px; }
.workspace { display:grid; grid-template-columns:280px minmax(0,1fr); gap:36px; align-items:start; }
.aside { padding:6px 0; }.aside h2 { color:var(--navy); font-weight:650; }.aside .context { font-size:14px; color:var(--muted); }
.task-list { padding-left:20px; font-size:14px; }.task-list li { padding:4px 0; }
.task-list li.active { color:var(--accent); font-weight:650; }
.side-links { display:grid; gap:7px; margin:22px 0; }
.side-links button { text-align:left; display:flex; gap:12px; font-size:13px; padding:10px 12px; }
.side-links button[aria-current="step"] { background:#e8f5f3; border-color:#91c2bb; }
.side-links .step { display:flex; gap:12px; font-size:13px; padding:10px 12px; border:1px solid transparent; border-radius:10px; }
.side-links .step[aria-current="step"] { background:#e8f5f3; border-color:#91c2bb; }
.side-links .num { color:var(--accent); font-weight:700; flex-shrink:0; }
.exercise { background:white; border:1px solid var(--line); border-radius:22px; padding:32px; box-shadow:var(--shadow); min-width:0; }
.exercise-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:20px; }
.levels { display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 8px; }.levels button { font-size:12px; padding:8px 12px; }
.sentence { color:var(--navy); font-size:clamp(21px,2.1vw,25px); line-height:1.8; font-weight:550; margin:25px 0 16px; letter-spacing:.2px; }
.help-line { border-left:3px solid var(--teal); background:#f3fbfa; border-radius:0 8px 8px 0; padding:10px 15px; font-size:14px; margin:12px 0; }
.help-line p:last-child { margin-bottom:0; }
.answer-label { display:flex; justify-content:space-between; align-items:center; margin:23px 0 8px; font-size:13px; }
textarea { width:100%; min-height:145px; resize:vertical; padding:16px; border:1px solid #c5d5da; border-radius:12px; background:#fcfefe; color:var(--ink); font-size:17px; line-height:1.7; }
textarea:focus { border-color:var(--cyan-dark); box-shadow:0 0 0 3px #00a8e80d; }
.actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:15px; align-items:center; }.actions .primary { margin-left:auto; }
.feedback { padding-top:23px; margin-top:23px; border-top:1px solid var(--line); }
.feedback h3 { color:var(--cyan-dark); }.feedback.needs_review h3 { color:var(--danger); }.feedback.pending h3 { color:var(--muted); }
.english { font-size:17px; line-height:1.8; overflow-wrap:anywhere; }
.pattern { color:var(--accent); font-size:14px; }
details { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; font-size:14px; }summary { cursor:pointer; color:var(--muted); min-height:32px; }details .inner { padding-top:12px; }
.demo-buttons { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }.demo-buttons button { font-size:12px; }
.divider { height:1px; background:var(--line); margin:22px 0; }
.email { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; font-size:16px; font-family:inherit; }
.summary { max-width:800px; margin:auto; }
.stats { display:flex; flex-wrap:wrap; gap:22px; margin:24px 0; }.stat b { display:block; font-size:27px; color:var(--navy); }.stat span { font-size:13px; color:var(--muted); }
.empty { padding:35px 0; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.mobile-context { display:none; }
@media(max-width:900px) { .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.workspace { grid-template-columns:235px minmax(0,1fr); gap:20px; }.exercise { padding:23px; } }
@media(max-width:680px) { .header,footer { padding:18px 20px; }.header .pill { font-size:10px; padding:5px 9px; }.brand { font-size:16px; }main { padding:20px 20px 35px; }.grid,.workspace { grid-template-columns:1fr; }.topic { padding:20px; }.aside { padding:0; }.aside .side-links { display:none; }.aside h2 { font-size:21px; }.aside .context { font-size:13px; }.aside .task-list { margin-bottom:0; font-size:13px; }.exercise { padding:20px; border-radius:16px; }.exercise-top { margin-bottom:10px; }.levels { gap:5px; }.levels button { padding:7px 9px; }.sentence { margin-top:18px; }.actions { gap:7px; }.actions .primary { flex:1 0 100%; margin:5px 0 0; }.notice { margin-bottom:16px; }footer { align-items:flex-start; }.stats { gap:17px; } }
@media(max-width:680px) { .desktop-context,.desktop-only,.aside > .notice { display:none; }.mobile-context { display:block; margin:8px 0 0; padding-top:8px; }.workspace { gap:16px; }.aside .eyebrow { margin-top:10px; } }
@media(max-width:900px) { .featured-grid { grid-template-columns:1fr 1fr; }.featured-grid .topic { padding:24px; }.trial-note { position:static; display:inline-block; margin-top:4px; } }
@media(max-width:680px) { .featured-grid { grid-template-columns:1fr; }.featured-grid .topic h3 { font-size:24px; }.practice-guide { padding:24px; }.intro { margin-bottom:24px; }.intro h1 { font-size:30px; }.lead { font-size:14px; }.filters { gap:8px; font-size:13px; }.filters .text-button { padding:8px 0; width:100%; text-align:left; }.tabs { width:100%; }.tabs button { flex:1; min-width:0; }.featured-grid .topic button { width:100%; }.task-chips { gap:6px; }.task-chips span { font-size:11px; } }
@media(max-width:680px) { .intro h1 > span { display:block; } }
.reference-card { padding: 1rem 0; border-bottom: 1px solid #d9e8ec; }
.reference-card:last-child { border-bottom: 0; }
.reference-card .english { overflow-wrap: anywhere; }
#draft-pack { width: 100%; max-width: 34rem; margin: .5rem 0 1.25rem; }