/* IELTSGO.IO blog. One small stylesheet, no JavaScript. Tokens follow the app's v5 palette. */
@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(/blog/assets/fonts/nunito-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(/blog/assets/fonts/nunito-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--canvas:#faf8f5;--surface:#fff;--surface-2:#f3f1ec;--line:#e7e4de;--line-soft:#efece6;--ink:#1f1e1b;--ink-2:#5f5b54;--ink-3:#716c64;--green:#58cc02;--green-hover:#4fb802;--green-active:#48a902;--green-ink:#2f7a00;--green-soft:#eefbe3;--green-line:#bfe8a0;--warn-soft:#fff4e5;--warn-ink:#9a5200;--r-sm:8px;--r:12px;--r-lg:16px;--gutter:16px;--read:720px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 17px/1.75 Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--gutter);top:8px;background:var(--surface);padding:8px 12px;border-radius:var(--r-sm);z-index:10}
a{color:var(--green-ink);text-underline-offset:3px}a:hover{text-decoration-thickness:2px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
/* header, same shape as the landing: white bar, ring mark, quiet links, one green button */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:12px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;min-height:44px}
.mark{flex:none}
.primary{display:flex;align-items:center;gap:2px}
.navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:15px}
.navlink:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;background:var(--green);color:var(--ink)!important;border-radius:10px;border-bottom:3px solid var(--green-active);font-weight:700;font-size:16px;line-height:1;text-decoration:none!important}
.btn:hover{background:var(--green-hover)}.btn:active{transform:translateY(2px);border-bottom-width:1px}
.btn-sm{min-height:44px;padding:0 16px;font-size:15px;margin-left:6px}
.btn-ghost{background:var(--surface);border:1px solid var(--line);border-bottom-width:1px;color:var(--ink)!important;min-height:44px;font-size:15px}.btn-ghost:hover{background:var(--surface-2)}
.hide-sm{display:none}
main{display:block;padding-bottom:64px}
/* breadcrumb */
.crumbs ol{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:14px;color:var(--ink-3)}
.crumbs li{display:flex;align-items:center}.crumbs li+li::before{content:"\203A";margin:0 8px;color:var(--ink-3)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px;max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* type */
h1,h2,h3{line-height:1.25;letter-spacing:-.012em;color:var(--ink);font-weight:700}
h1{font-size:clamp(28px,4.4vw,40px);margin:8px 0 14px}
h2{font-size:clamp(22px,3vw,28px);margin:48px 0 12px;scroll-margin-top:84px}
h3{font-size:20px;margin:28px 0 8px;scroll-margin-top:84px}
p{margin:0 0 18px}.lede{font-size:19px;line-height:1.6;color:var(--ink-2)}
.label{font-size:13px!important;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 8px!important;font-weight:700!important}
/* pills and chips (landing language) */
.pill{display:inline-flex;align-items:center;background:var(--green-soft);color:var(--green-ink);border:1px solid var(--green-line);border-radius:999px;padding:2px 12px;font-size:13px;font-weight:700;line-height:1.5}
.pill-white{background:var(--surface)}.pill-solid{background:var(--green);border-color:var(--green);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:var(--surface);border:1px solid var(--green-line);border-radius:999px;color:var(--green-ink);font-weight:600;font-size:15px;text-decoration:none}
.chip:hover{background:var(--green-soft)}.chip-plain{border-color:var(--line);color:var(--ink-2)}
.chip .count{font-size:12px;background:var(--green-soft);border-radius:999px;padding:0 8px;line-height:20px;color:var(--green-ink)}
/* Article metadata chips: compact so the topic and its tags sit on one row; the tap area stays 44px tall (::before). */
.post-head .chips{margin:4px 0 0;gap:6px;flex-wrap:wrap}
.post-head .chip{position:relative;min-height:32px;padding:0 12px;font-size:14px;gap:6px}
.post-head .chip::before{content:"";position:absolute;inset:-6px -2px}
.post-head .chip-plain{background:transparent;border-color:var(--line);color:var(--ink-3);font-weight:600}
/* index */
.band{background:var(--green-soft);border-bottom:1px solid var(--green-line);padding:8px 0 40px;margin-bottom:0}
.band .crumbs a,.band .crumbs{color:var(--green-ink)}
.eyebrow{margin:12px 0 12px}
.hero-h1{font-size:clamp(30px,5.2vw,48px);max-width:20ch;margin:0 0 14px}
.band .lede{max-width:60ch;margin:0}
.section{padding-top:32px}.section section>h2:first-child{margin-top:0}
.featured{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:0 0 40px}
.featured h2{font-size:clamp(24px,3.4vw,32px);margin:8px 0 10px}.featured h2 a{color:var(--ink);text-decoration:none}.featured h2 a:hover{text-decoration:underline}
.featured .lede{max-width:62ch}.featured .meta{margin:0 0 20px}.featured p:last-child{margin:0}
.cards{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column}
.card:hover{border-color:var(--green-line)}
.card-tag{margin:0 0 10px;min-height:24px}
.card h3{margin:0 0 8px;font-size:20px}.card h3 a{color:var(--ink);text-decoration:none}.card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card h3 a:focus-visible{outline-offset:-3px}
.card-desc{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--ink-2);flex:1}
.meta{font-size:14px;color:var(--ink-3);margin:0}
.list-head{margin:0 0 24px}.list-head h1{margin-bottom:8px}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 24px}
.pager-slot{min-width:1px}
.pages{display:flex;gap:6px;list-style:none;margin:0;padding:0;order:3;width:100%;justify-content:center}
.pages a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600}
.pages a:hover{background:var(--surface-2)}.pages a[aria-current="page"]{background:var(--green);border-color:var(--green)}
.pages .gap{display:inline-flex;align-items:center;min-width:24px;justify-content:center;color:var(--ink-3)}
/* article */
.post{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "toc" "body" "rail";max-width:var(--read);margin:0 auto}
.post-head{grid-area:head;padding-top:4px;padding-bottom:16px}.toc-m{grid-area:toc}.post-body{grid-area:body}.rail{grid-area:rail}
.byline-row{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.avatar-sm{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-ink);font-size:13px;font-weight:700;object-fit:cover}
.byline,.reviewed{font-size:14px;line-height:1.5;color:var(--ink-3);margin:0}
.byline a,.reviewed a{color:var(--ink-2);font-weight:600}.reviewed{margin:0 0 12px}
.hero{margin:8px 0 24px}.hero img,.prose img{display:block;max-width:100%;height:auto;border-radius:var(--r)}
.prose figure{margin:24px 0}.prose figcaption{font-size:14px;color:var(--ink-3);margin-top:8px}
.tldr{background:var(--green-soft);border:1px solid var(--green-line);border-radius:var(--r);padding:16px 20px;margin:0 0 20px}
.tldr p{margin:0}.tldr p+p{margin-top:10px}
.takeaways{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:0 0 20px}
.takeaways ul{margin:0;padding-left:22px}.takeaways li{margin:6px 0}.takeaways li::marker{color:var(--green)}
.disclosure{background:var(--warn-soft);color:var(--warn-ink);border-radius:var(--r);padding:12px 16px;margin:0 0 24px;font-size:15px;line-height:1.6}.disclosure p{margin:0}.disclosure p+p{margin-top:6px}
.toc-m{margin:0 0 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.toc-m summary{display:flex;align-items:center;min-height:48px;padding:0 16px;font-weight:700;cursor:pointer;list-style:none}.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--ink-3)}.toc-m[open] summary::after{content:"\2212"}
.toc-m ol{margin:0;padding:0 16px 12px 38px}.toc-m li{margin:2px 0}.toc-m a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.toc-m a:hover{text-decoration:underline}
.toc-d{display:none}
.definition{background:var(--surface-2);border-left:4px solid var(--green);border-radius:var(--r-sm);padding:12px 16px}
.definition-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
dfn{font-style:normal;font-weight:700}
.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}.prose li{margin:6px 0}
.prose blockquote:not(.tldr){margin:0 0 18px;padding:4px 16px;border-left:4px solid var(--line);color:var(--ink-2)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;margin:0 0 18px;display:block;overflow-wrap:anywhere}
.prose th,.prose td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}.prose th{background:var(--surface-2)}
.prose code{background:var(--surface-2);padding:1px 6px;border-radius:6px;font-size:.92em}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.sources,.changelog,.author-box{margin:40px 0 0}
.sources h2,.changelog h2{font-size:20px;margin:0 0 10px}
.sources ol,.changelog ul{margin:0;padding-left:22px;font-size:15px;line-height:1.6}.sources li,.changelog li{margin:6px 0}.src-meta{color:var(--ink-3);font-size:14px}
.author-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}.author-box h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 8px}.author-box p{margin:0 0 6px;font-size:16px;line-height:1.6}.creds{font-size:14px;color:var(--ink-3)}
.avatar{border-radius:50%;object-fit:cover}.author-head{display:flex;gap:16px;align-items:center}
.rail{margin-top:40px}
.cta{background:var(--green-soft);border:1px solid var(--green-line);border-radius:var(--r-lg);padding:20px}.cta h2{margin:0 0 6px;font-size:20px}.cta p{margin:0 0 14px;font-size:16px;line-height:1.55}.cta p:last-child{margin:0}
.related{margin-top:64px;padding:40px 0 8px;border-top:1px solid var(--line);background:var(--surface)}.related h2{margin:0 0 20px;font-size:24px}.related .cards{margin-bottom:24px}
.links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}.links a{display:inline-flex;align-items:center;min-height:44px}
.creds-list{padding-left:22px}
/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:32px 0 36px;font-size:15px}
.foot{display:grid;gap:16px}
.footer-brand{margin:0}.footer-brand a{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;min-height:44px}
.footer-tag{margin:0;color:var(--ink-3);font-size:15px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 20px}.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2)}
.fine{color:var(--ink-3);font-size:13px;margin:0}
/* search */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon-link{padding:0 10px;color:var(--ink-2)}.icon-link:hover{color:var(--ink)}
.search{position:relative;max-width:640px;margin:20px 0 0}
.search-box{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--green-line);border-radius:14px;padding:6px 6px 6px 14px;min-height:56px;color:var(--ink-3)}
.search-box:focus-within{border-color:var(--green);outline:3px solid var(--green-soft)}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);min-height:44px;-webkit-appearance:none;appearance:none}
.search-box input::placeholder{color:var(--ink-3);opacity:1}
.search-box input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-box .btn{min-height:44px;padding:0 18px;margin:0}
.suggest{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.suggest[hidden]{display:none}
.suggest li{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:44px;padding:8px 12px;border-radius:var(--r-sm);cursor:pointer;line-height:1.35}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--green-soft)}
.suggest .t{font-weight:600;color:var(--ink)}.suggest .c{font-size:13px;color:var(--ink-3)}
.suggest .suggest-all .t{color:var(--green-ink)}
.suggest .suggest-section .c::before{content:"di: "}
.list-head .search{margin-top:14px}
.count{color:var(--ink-3);margin:0 0 16px}
.results{list-style:none;margin:0 0 32px;padding:0}
.result{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:0 0 12px}
.result h2{margin:0 0 6px;font-size:20px}.result h2 a{color:var(--ink);text-decoration:none}.result h2 a:hover{text-decoration:underline}
.snippet{margin:0 0 8px;color:var(--ink-2);font-size:16px;line-height:1.6}.hits{margin:0;font-size:14px;color:var(--ink-3)}
mark{background:var(--green-soft);color:inherit;border-radius:3px;padding:0 2px}
/* standards (brand) */
.standards{margin-top:48px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.standards h2{margin:0 0 6px;font-size:22px}.mission{margin:0 0 16px;color:var(--ink-2)}
.standards ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.standards li{display:flex;flex-direction:column;gap:2px}.standards li span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.standards p:last-child{margin:0}
@media (min-width:640px){.standards ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.standards ul{grid-template-columns:repeat(4,1fr)}}
@media (max-width:420px){.search-box{padding-left:12px}.search-box svg{display:none}.search-box .btn{padding:0 14px}}
@media (min-width:640px){.pages{order:0;width:auto}.cards{grid-template-columns:repeat(2,1fr)}.hide-sm{display:inline-flex}.featured{padding:36px}.band{padding-bottom:56px}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}.related .cards,.section .cards{grid-template-columns:repeat(3,1fr)}.foot{grid-template-columns:1fr auto;align-items:center}.fine{grid-column:1/-1}}
@media (min-width:1100px){
  .post{max-width:none;grid-template-columns:minmax(0,var(--read)) 300px;grid-template-areas:"head rail" "body rail";column-gap:56px;justify-content:start}
  .toc-m{display:none}
  .rail{margin-top:0;align-self:start;position:sticky;top:84px;padding-top:12px}
  .toc-d{display:block;margin:0 0 20px}.toc-d ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
  .toc-d li{margin:0}.toc-d a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--ink-2);text-decoration:none;font-size:15px;line-height:1.4}
  .toc-d a:hover{color:var(--green-ink);border-left-color:var(--green)}
}
@media (max-width:639px){.crumbs li:last-child:not(:first-child){display:none}}
@media (max-width:480px){.primary .navlink{display:none}}
@media (max-width:420px){.btn{padding:0 18px}.btn-sm{padding:0 12px;margin-left:2px}.brand{font-size:17px}.hero-h1{max-width:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:active{transform:none}}
