:root{font-family:system-ui,-apple-system,sans-serif;background:#f5f7f6;color:#133d38}*{box-sizing:border-box}body{margin:0}.site{background:#0d283a;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:17px max(22px,calc((100% - 1080px)/2));gap:15px}.site a{color:white;text-decoration:none;font-weight:700}.site nav{display:flex;gap:19px;flex-wrap:wrap;font-size:13px}.site nav a{font-weight:500}main{max-width:1080px;padding:22px;margin:auto}.top{border-radius:21px;background:linear-gradient(100deg,#082844e8,#174b50df),url('/assets/somali-german-academy-banner.webp') center/cover;color:#fff;padding:32px}.kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:#c5e0dc}.top h1{font-size:clamp(30px,4vw,45px);margin:8px 0}.top>p:not(.kicker){max-width:720px;line-height:1.55}.notice{font-size:13px}.choose{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:23px}.choose select{font:inherit;padding:10px;border-radius:10px;border:0}.choose span{font-size:12px;opacity:.8}.path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:19px 0}.path button{cursor:pointer;border:1px solid #d6e3db;background:white;border-radius:13px;padding:15px 7px;color:#194039;font-weight:700}.path button.active{background:#164b43;color:white}.path small{display:block;font-size:11px;font-weight:400;margin-top:6px}.exercise{border-radius:18px;padding:30px;background:white;border:1px solid #e0e8e3;min-height:350px;box-shadow:0 10px 25px #102f3411}.exercise h2{margin:0 0 7px}.muted,.foot{color:#637771;font-size:13px}.metric{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#60786e;font-size:13px}.flash{background:#f0f7f3;border-radius:18px;padding:46px 20px;text-align:center;cursor:pointer;min-height:200px;margin:18px 0;display:flex;flex-direction:column;justify-content:center;gap:15px;align-items:center}.flash strong{font-size:clamp(25px,3vw,34px)}button.primary,button.subtle{padding:13px 19px;border-radius:10px;border:0;font-weight:700;cursor:pointer;margin:5px 7px 5px 0}.primary{background:#124638;color:white}.subtle{background:#e8f3ee;color:#174738}.passage{padding:23px;background:#f6f8f5;border-left:4px solid #2a887c;border-radius:8px;line-height:1.85;font-size:16px}.answers{display:grid;gap:9px;margin:18px 0}.answer{display:block;text-align:left;background:#fff;border:1px solid #d3dfda;border-radius:11px;padding:14px;font:inherit;cursor:pointer}.answer.selected{border:2px solid #12675a;background:#edf7f3}.feedback{padding:16px;border-left:4px solid #26865f;background:#eaf5ee;border-radius:8px;margin:16px 0;line-height:1.6}.feedback.wrong{border-color:#cb7337;background:#fff2e8}.choices{display:grid;gap:10px;margin:20px 0}.choices label{padding:11px;border:1px solid #dae3dc;border-radius:8px;cursor:pointer}.exercise textarea{font:inherit;min-height:250px;line-height:1.8;width:100%;padding:17px;border:1px solid #b7cbbc;border-radius:10px}.tips{background:#f2f6f1;border-radius:11px;padding:14px}.tips li{margin:8px}.foot{margin:22px 0 40px}@media(max-width:640px){.path{grid-template-columns:repeat(2,minmax(0,1fr))}.site{flex-direction:column;align-items:flex-start}.exercise{padding:17px}.top{padding:22px}}
/* v0.7.9 – compact, practice-first mobile layout */
@media (max-width: 640px) {
  .site { padding: 9px 14px; flex-direction: row; align-items: center; gap: 8px; }
  .site > a { font-size: 14px; flex-shrink: 0; }
  .site nav { gap: 8px; justify-content: flex-end; font-size: 11px; }
  .site nav a:nth-child(2) { display: none; }
  main { padding: 8px 10px 25px; }
  .top { background: #103e39; border-radius: 12px; padding: 11px 13px; }
  .top .kicker, .top .notice, .top > p:not(.kicker) { display: none; }
  .top h1 { font: 700 17px/1.2 system-ui,sans-serif; margin: 0 0 9px; }
  .choose { display: flex; gap: 5px; margin: 0; align-items: stretch; flex-direction: column; }
  .choose label { font-size: 12px; }
  .choose select { display: block; width: 100%; min-height: 42px; padding: 8px 10px; font-size: 14px; }
  .choose span { display: none; }
  .path { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: #f5f7f6; padding: 7px 0; gap: 6px; margin: 7px 0; scroll-margin-top: 0; }
  .path button { min-width: max-content; flex: 0 0 auto; border-radius: 9px; padding: 10px 13px; font-size: 13px; white-space: nowrap; }
  .path small { display: none; }
  .exercise { min-height: 0; border-radius: 12px; padding: 13px; margin: 0; scroll-margin-top: 58px; box-shadow: none; }
  .exercise h2 { font-size: 19px; }
  .exercise h3 { font-size: 17px; }
  .flash { min-height: 165px; padding: 21px 12px; margin: 10px 0; }
  .flash strong { overflow-wrap: anywhere; font-size: 25px; }
  button.primary,button.subtle { min-height: 42px; padding: 11px 12px; }
  .passage { padding: 14px; font-size: 15px; }
}