/* v57: restore compact, colourful game cards. */
body.sst-brand a:focus-visible,body.sst-brand button:focus-visible,body.sst-brand select:focus-visible{outline:3px solid #0754a1;outline-offset:3px}
body.sst-brand .sst-banner:not(.sst-banner-home){height:auto;min-height:145px;padding:18px 22px;gap:16px}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-mark{width:100%;align-items:flex-start}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-logo{width:210px;max-width:100%}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-title{margin:8px 0 0!important;font-size:27px!important;color:#102d43!important;font-style:normal;font-weight:1000!important;max-width:100%;overflow-wrap:anywhere}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-hint{text-align:left;font-size:12px;line-height:1.45;margin-top:5px}
body.sst-brand .sst-banner-home .sst-banner-tagline{color:#c58a00!important;font-weight:1000!important}
body.sst-brand .st-word,body.sst-brand .sst-home-wordmark strong{background-image:linear-gradient(100deg,#0753a6 5%,#079fc0 45%,#007d50 100%);font-weight:1000!important;-webkit-text-stroke:.2px #173b56}
body.sst-brand .practice-shortcuts,body.sst-brand>.st-seo{box-sizing:border-box;width:calc(100% - 40px);max-width:1060px;margin:18px auto;padding:16px 24px}
body.sst-brand[data-sst-module="math"] .practice-shortcuts,body.sst-brand[data-sst-module="math"]>.st-seo{max-width:850px}
body.sst-brand .home-wrap .practice-shortcuts{width:100%;padding:12px 0;margin:12px 0}
body.sst-brand .practice-shortcuts a{font-size:13px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.sst-progress-strip{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;margin:16px 0;padding:14px 16px;background:#fff9df;border:1.5px solid #deb541;border-radius:16px;color:#173b56}
.sst-progress-copy{min-width:0}.sst-progress-copy h2{font:950 17px/1.3 TrainerRounded,system-ui,sans-serif;margin:0 0 4px}.sst-progress-copy p{font-size:13px;line-height:1.45;margin:0;color:#40505b}.sst-progress-track{height:8px;overflow:hidden;border-radius:99px;background:#eee1b4;margin-top:10px}.sst-progress-track i{display:block;height:100%;background:linear-gradient(90deg,#f0ad20,#ffcf35);border-radius:99px}
.sst-progress-stickers{display:flex;gap:4px;align-items:center}.sst-progress-stickers .sst-sticker{width:36px;height:42px}.sst-progress-open{min-height:42px;border:1px solid #ba8b16;border-radius:10px;background:#fff;color:#674900;padding:9px 12px;font:900 13px/1.3 TrainerRounded,system-ui,sans-serif;cursor:pointer;white-space:normal}
.sst-progress-counts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.sst-progress-counts span{padding:4px 7px;border:1px solid #d8c68d;border-radius:7px;font-size:11px;font-weight:850;background:#fff}.sst-progress-counts .tier-bronze{background:#f6e4d7;color:#6b3c18}.sst-progress-counts .tier-silver{background:#e8eef6;color:#334b64}.sst-progress-counts .tier-gold{background:#fff1b7;color:#694600}.sst-progress-counts .tier-nailed{background:#ffd747;color:#382a00}
.sst-progress-strip[hidden]{display:none!important}
@media(max-width:760px){.sst-progress-strip{grid-template-columns:minmax(0,1fr) auto;gap:10px}.sst-progress-open{grid-column:1/-1;justify-self:start}body.sst-brand .sst-banner:not(.sst-banner-home){padding:14px;min-height:145px}body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-logo{width:165px}body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-title{font-size:23px!important}body.sst-brand .practice-shortcuts,body.sst-brand>.st-seo{width:calc(100% - 24px);padding:16px 12px}}
@media(max-width:390px){body.sst-brand .module-card h3{font-size:14px}body.sst-brand .module-card:nth-child(n){min-height:146px}.sst-progress-strip{grid-template-columns:minmax(0,1fr);padding:12px}.sst-progress-stickers{grid-row:2}.sst-progress-open{grid-row:3;max-width:100%}body.sst-brand .sst-home-header{flex-wrap:wrap}body.sst-brand .sst-header-actions{margin-left:auto}}
body.sst-brand .sst-banner-home .sst-banner-tagline{margin:8px 0 0!important;text-align:center;max-width:100%}

/* v60: one transparent wordmark, shared readable banner composition. */
body.sst-brand .sst-banner .sst-wordmark-composed{position:relative;overflow:hidden;aspect-ratio:2099/277;isolation:isolate}
body.sst-brand .sst-wordmark-composed>img{opacity:1}
body.sst-brand .sst-wordmark-composed::before{content:none}
body.sst-brand .sst-wordmark-composed::after{content:'';position:absolute;inset:0;clip-path:inset(0 0 0 34.5%);background:linear-gradient(110deg,#08699f 34%,#16aed1 48%,#117b95 62%,#27b89b 79%,#08734e 100%);mask:url('/assets/brand/wordmark-race-v043.webp') 47.945% 53.244%/103.478% auto no-repeat;-webkit-mask:url('/assets/brand/wordmark-race-v043.webp') 47.945% 53.244%/103.478% auto no-repeat;pointer-events:none}
body.sst-brand .sst-banner-home{grid-template-columns:minmax(0,380px) 174px;justify-content:center;column-gap:30px;padding:18px 24px 18px 80px;height:auto;min-height:160px}
body.sst-brand .sst-banner-home .sst-banner-mark{width:380px;max-width:100%}
body.sst-brand .sst-banner-home .sst-wordmark-composed{width:310px;max-width:100%;margin:0 auto}
body.sst-brand .sst-banner-home .sst-banner-tagline{font-size:17px!important;color:#c58a00!important;line-height:1.25!important;white-space:normal}
body.sst-brand .sst-banner-home .sst-banner-cards{width:174px}
body.sst-brand .sst-banner:not(.sst-banner-home){grid-template-columns:minmax(0,1fr) 176px;padding:22px clamp(26px,5.5vw,58px);gap:24px;min-height:174px;height:auto}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-mark{max-width:570px;justify-self:center}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-logo{width:205px;max-width:100%}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-title{font-size:clamp(21px,2.7vw,27px)!important;line-height:1.15!important;text-wrap:balance}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-hint{max-width:53ch;font-size:13px;line-height:1.45;text-wrap:pretty}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-cards{width:176px;gap:14px}
body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-card{height:44px;font-size:14px;border-radius:9px}
body.sst-brand .sst-banner-card:nth-child(1){transform:rotate(-12deg) translateY(5px)}
body.sst-brand .sst-banner-card:nth-child(2){transform:rotate(10deg) translateY(-8px)}
@media(max-width:700px){
 body.sst-brand .sst-banner-home{grid-template-columns:minmax(0,1fr) 88px;padding:16px;gap:8px}
 body.sst-brand .sst-banner-home .sst-banner-cards{width:88px}
 body.sst-brand .sst-banner-home .sst-banner-tagline{font-size:clamp(11px,2.5vw,16px)!important}
 body.sst-brand .sst-banner:not(.sst-banner-home){grid-template-columns:minmax(0,1fr) 106px;padding:20px 22px;gap:14px}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-title{font-size:22px!important}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-cards{width:106px;gap:12px;grid-template-columns:1fr}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-card{height:37px;font-size:12px;width:88px;justify-self:center}
}
@media(max-width:420px){
 body.sst-brand .sst-banner-home{grid-template-columns:minmax(0,1fr) 70px;padding:14px 10px;gap:6px}
 body.sst-brand .sst-banner-home .sst-banner-cards{width:70px}
 body.sst-brand .sst-banner:not(.sst-banner-home){grid-template-columns:minmax(0,1fr) 65px;gap:10px;padding:20px}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-logo{width:165px}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-title{font-size:20px!important}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-hint{font-size:12px}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-cards{width:65px}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-card{width:62px;height:34px;font-size:10px}
}

@supports not ((mask-image:url("")) or (-webkit-mask-image:url(""))){body.sst-brand .sst-wordmark-composed::after{content:none}}

/* v61: calm racing surfaces; keep dark selections and green start actions. */
body.sst-brand :is(.qx-question,#question.question,.clockbox,.word-prompt,.flag-prompt){
 background:linear-gradient(135deg,#d9faf2d9,#e4fbffdf),url('/assets/brand/hero-race-v043.webp') center/cover!important;
 color:#173b56!important;border:1px solid #b9e6dc;
}
body.sst-brand :is(.st-chip,.geo-refine-btn,.qx-pill,.mode-btn,.chip,.time-chip,.eng-chip)[aria-pressed="true"],
body.sst-brand :is(.st-chip,.geo-refine-btn,.qx-pill,.mode-btn,.chip,.time-chip,.eng-chip).active{
 background:linear-gradient(125deg,#12658beF,#087e91ed),url('/assets/brand/hero-race-v043.webp') center/cover!important;
 color:#fff!important;border-color:#0c708b!important;
}
body.sst-brand :is(.st-primary,.bigbtn,.primary,#start-game){
 background:linear-gradient(125deg,#08896aed,#0a9e79ed),url('/assets/brand/hero-race-v043.webp') center/cover!important;
 color:#fff!important;border-color:#08785d!important;
}
body.sst-brand :is(.st-option,.option,.qx-option):not(:disabled){
 background:linear-gradient(125deg,#ffffffef,#ecfaf8ed),url('/assets/brand/hero-race-v043.webp') center/cover!important;
}
/* Follow the slanted edge of the 0 instead of colouring a vertical slice of it. */
body.sst-brand .sst-wordmark-composed::after{clip-path:polygon(36% 0,100% 0,100% 100%,31.3% 100%,31.4% 88%,32.4% 77%,33.1% 66%,33.8% 55%,34.5% 44%,35.2% 33%,36% 22%)}
body.sst-brand .sst-wordmark-composed::before{content:'';position:absolute;inset:0;background:#030606;clip-path:polygon(25% 0,36% 0,36% 22%,35.2% 33%,34.5% 44%,33.8% 55%,33.1% 66%,32.4% 77%,31.4% 88%,31.3% 100%,25% 100%);mask:url('/assets/brand/wordmark-race-v043.webp') 47.945% 53.244%/103.478% auto no-repeat;-webkit-mask:url('/assets/brand/wordmark-race-v043.webp') 47.945% 53.244%/103.478% auto no-repeat;pointer-events:none;z-index:1}
body.sst-brand .sst-banner:not(.sst-banner-home){padding-left:clamp(30px,6vw,64px)}
@media(max-width:700px){body.sst-brand .sst-banner:not(.sst-banner-home){padding-left:24px}}
@media(max-width:420px){body.sst-brand .sst-banner:not(.sst-banner-home){padding-left:21px}}
@supports not ((mask-image:url("")) or (-webkit-mask-image:url(""))){body.sst-brand .sst-wordmark-composed::before{content:none}}
.sst-keyboard-hint{font:600 11px/1.5 TrainerSans,system-ui,sans-serif;color:#365c66;margin:7px 2px 0}
.sst-keyboard-hint[hidden]{display:none!important}
.sst-keyboard-match{outline:2px solid #138998;outline-offset:2px}
.sst-keyboard-number{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:#e0f3ee;color:#14546a;font-size:11px;margin-right:5px}
@media(hover:none){.sst-keyboard-hint,.sst-keyboard-number{display:none}}
body.sst-brand :is(.tile,.time-btn,.st-time,.btn-mode,.qx-time)[aria-pressed="true"]{background:linear-gradient(125deg,#12658bef,#087e91ed),url('/assets/brand/hero-race-v043.webp') center/cover!important;color:#fff!important;border-color:#0c708b!important}
body.sst-brand :is(.question,.card-question){background:linear-gradient(135deg,#d9faf2d9,#e4fbffdf),url('/assets/brand/hero-race-v043.webp') center/cover!important;color:#173b56!important}

/* v63: local alignment fixes, without changing the approved banner artwork. */
body.sst-brand .mode-card > .mode-icon{
 display:flex;align-items:center;justify-content:center;
 white-space:nowrap;line-height:1;letter-spacing:0;padding:0;
 font-size:23px;text-align:center;
}
body.sst-brand .mode-card > .card-go{
 display:grid;place-items:center;line-height:1;padding:0;margin:0;
 text-align:center;
}
body.sst-brand .sst-home-actions{align-items:stretch}
body.sst-brand .sst-home-actions > .live-cta{
 align-self:stretch;height:auto;min-width:0;
}
body.sst-brand .sst-home-actions > .live-cta > div{min-width:0}
@media(max-width:700px){
 body.sst-brand .mode-card > .mode-icon{font-size:20px}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-cards{gap:18px}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-card:nth-child(1){transform:rotate(-10deg)}
 body.sst-brand .sst-banner:not(.sst-banner-home) .sst-banner-card:nth-child(2){transform:rotate(8deg)}
 body.sst-brand .sst-banner-home .sst-banner-cards{gap:12px 8px}
 body.sst-brand .sst-banner-home .sst-banner-card{min-width:0;font-size:8px;padding:2px;gap:1px}
 body.sst-brand .sst-banner-home .sst-banner-card:nth-child(1){transform:rotate(-10deg)}
 body.sst-brand .sst-banner-home .sst-banner-card:nth-child(2){transform:rotate(8deg)}
}
@media(max-width:420px){
 body.sst-brand .sst-banner-home .sst-banner-card{font-size:6.5px;gap:0}
}