/* TestRoute - PRACTICE WINDOW (session layer) v2.0.0 (core 4.107.0)
 * Shared by Show me, tell me and Road signs (road-signs/assets/session-signs.css adds the signs).
 *
 * The window, by screen size:
 *   phone (< 720 px)            the whole screen, one column, the answer slides up as a sheet
 *   tablet (720 to 959 px)      a portrait window of max 680 x 880, one column
 *   laptop (>= 960 x 560 px)    a landscape window of max 1120 x 720: the stage (what you work on)
 *                               and a side column of 392 (what belongs with it)
 * Pixel rules (8 okt 2026, nagemeten op 2x):
 *   one spacing scale on a 4 px base · line heights in whole pixels · hairlines as box-shadows
 *   (they take no room) · stacked cards by inset, never scaled · the site's own buttons, links
 *   and chips (assets/css/tr-cta-system.css, one solid green per view) with two corrections
 *   inside this window: a 16 px arrow and a 19 px line height on text links.
 * `!important` throughout per house rule 7 (Cornerstone stacking traps). */

.tss{position:fixed !important;inset:0 !important;z-index:2147482990 !important;display:flex !important;align-items:flex-start !important;justify-content:flex-start !important;
	background:#0c1927 !important;color:#f8f9fa !important;text-align:left !important;letter-spacing:normal !important;
	-webkit-font-smoothing:antialiased !important;-moz-osx-font-smoothing:grayscale !important;
	font:400 15px/24px 'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif !important;
	--tss-ink:#0c1927;--tss-plate:#14283d;--tss-plate2:#11233a;--tss-plate3:#0f1f34;
	--tss-line:rgba(255,255,255,.08);--tss-line2:rgba(255,255,255,.14);--tss-line-soft:rgba(255,255,255,.06);
	--tss-hi:#f8f9fa;--tss-mid:rgba(255,255,255,.68);--tss-low:rgba(255,255,255,.52);
	--tss-green:#03c988;--tss-green-deep:#0c1927;--tss-disp:'Lato','Lato Fallback',sans-serif;
	--tss-ease:cubic-bezier(.22,1,.36,1);--tss-px:20px;--tss-py:24px}
.tss[hidden]{display:none !important}
.tss *,.tss *::before,.tss *::after{box-sizing:border-box !important;margin:0 !important;padding:0 !important;text-transform:none !important}
.tss :where(button:not([class*="tr-"])){font:inherit !important;color:inherit !important;background:none !important;border:0 !important;border-radius:0 !important;
	box-shadow:none !important;cursor:pointer !important;text-align:left !important;-webkit-tap-highlight-color:transparent}
.tss :where(ul){list-style:none !important}
.tss :focus-visible{outline:2px solid var(--tss-green) !important;outline-offset:2px !important}
/* read out, not shown ("Members only" on a locked set) */
.tss .tss-sr{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip-path:inset(50%) !important;white-space:nowrap !important}
/* the site's controls, two whole-pixel corrections: a 16 px arrow (15 px sits half a pixel off
   in a 48 px button) and an odd line height on the text link, so its underline lands on a pixel */
.tss .tr-cta:not(#_trcta) svg{width:16px !important;height:16px !important}
.tss .tr-link:not(#_trcta){line-height:19px !important}
.tss .tr-link:not(#_trcta) svg{width:14px !important;height:14px !important}
.tss .tr-ib svg{width:16px !important;height:16px !important}
.tss .tr-ib--play svg{width:14px !important;height:14px !important}
/* the neutral button keeps its own colours in this window, whatever a page re-declares after the
   site file (road-signs.css carries an older copy of .tr-cta without the neutral variant) */
.tss .tr-cta--neutral:not(#_trcta){background:rgba(255,255,255,.05) !important;border:1.5px solid rgba(255,255,255,.16) !important;color:#f8f9fa !important}
.tss .tr-cta--neutral:not(#_trcta):hover{background:rgba(255,255,255,.09) !important;border-color:rgba(255,255,255,.28) !important}

/* iOS-proof scroll lock (the JS stores and restores scrollY) */
body.tss-lock{position:fixed !important;left:0 !important;right:0 !important;width:100% !important;overflow:hidden !important}

/* scrollbars in the house colours: thin, dark, no white track */
.tss *{scrollbar-width:thin !important;scrollbar-color:rgba(255,255,255,.2) transparent !important}
.tss ::-webkit-scrollbar{width:10px !important;height:10px !important}
.tss ::-webkit-scrollbar-track{background:transparent !important}
.tss ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18) !important;border-radius:10px !important;border:3px solid transparent !important;background-clip:padding-box !important}
.tss ::-webkit-scrollbar-thumb:hover{background-color:rgba(255,255,255,.32) !important}

/* ── the window ── */
/* Whole pixels: the window's width and height are rounded down to an even number, so whatever is
   centred in it (a card, a sign, a question) lands on a whole pixel. On a phone it fills the screen
   from the top left (a spare pixel at an edge has the same colour); from 720 px up it is centred and
   its offset is rounded down. Browsers without round() keep the plain sizes and the centred place. */
.tss .tss-win{position:relative !important;width:100% !important;height:100% !important;width:round(down,100%,2px) !important;height:round(down,100%,2px) !important;
	display:flex !important;flex-direction:column !important;background:var(--tss-ink) !important;overflow:hidden !important}
@media (min-width:720px){
	.tss{align-items:center !important;justify-content:center !important;background:rgba(5,12,20,.86) !important;--tss-px:32px;--tss-py:32px}
	.tss .tss-win{width:min(680px,calc(100vw - 48px)) !important;width:round(down,min(680px,100vw - 48px),2px) !important;
		height:min(880px,calc(100vh - 48px)) !important;height:min(880px,calc(100dvh - 48px)) !important;height:round(down,min(880px,100dvh - 48px),2px) !important;
		border-radius:16px !important;box-shadow:0 0 0 1px var(--tss-line),0 40px 100px -40px rgba(0,0,0,.9) !important;
		translate:calc(round(down,(100vw - 100%) / 2,1px) - (100vw - 100%) / 2) calc(round(down,(100dvh - 100%) / 2,1px) - (100dvh - 100%) / 2) !important}
}
@media (min-width:960px) and (min-height:560px){
	.tss{--tss-px:40px;--tss-py:40px}
	.tss .tss-win{width:min(1120px,calc(100vw - 64px)) !important;width:round(down,min(1120px,100vw - 64px),2px) !important;
		height:min(720px,calc(100vh - 64px)) !important;height:min(720px,calc(100dvh - 64px)) !important;height:round(down,min(720px,100dvh - 64px),2px) !important}
}
.tss .tss-screen{position:absolute !important;inset:0 !important;display:none !important;flex-direction:column !important}
.tss .tss-screen.is-on{display:flex !important}

/* ── top bar: 56 on a phone, 64 from tablet up; title on the content edge, close in the corner ── */
.tss .tss-bar{flex:0 0 auto !important;display:flex !important;align-items:center !important;gap:12px !important;height:56px !important;
	padding:0 8px 0 var(--tss-px) !important;box-shadow:inset 0 -1px 0 var(--tss-line) !important}
@media (min-width:720px){.tss .tss-bar{height:64px !important;padding-right:12px !important;gap:16px !important}}
.tss .tss-bar .tr-ib{flex:0 0 auto !important;margin-left:auto !important}
.tss .tss-bar-t{font-size:15px !important;line-height:24px !important;font-weight:600 !important;color:var(--tss-hi) !important;white-space:nowrap !important}
.tss .tss-bar-r{display:flex !important;align-items:center !important;gap:12px !important;font-size:13px !important;line-height:20px !important;font-weight:500 !important;
	color:var(--tss-mid) !important;font-variant-numeric:tabular-nums !important;white-space:nowrap !important}
.tss .tss-bar-r:empty{display:none !important}
.tss .tss-bar-t+.tss-bar-r{margin-left:auto !important}
.tss .tss-prog+.tss-bar-r{width:48px !important;justify-content:flex-end !important}
/* the close button sits in the corner; only a filled bar-r (counter, mastery) takes the auto margin from it */
.tss .tss-bar-r:not(:empty)+.tr-ib{margin-left:0 !important}
.tss .tss-meter,.tss .tss-prog{display:block !important;height:6px !important;border-radius:3px !important;background:rgba(255,255,255,.1) !important;overflow:hidden !important}
.tss .tss-meter{width:72px !important}
.tss .tss-prog{flex:1 !important}
/* narrow phones: the start bar holds title, mastery and close, so the meter gets shorter, then goes */
@media (max-width:399px){.tss .tss-meter{width:48px !important}}
@media (max-width:359px){.tss .tss-bar-r .tss-meter{display:none !important}}
.tss .tss-meter>span,.tss .tss-prog>span{display:block !important;height:100% !important;width:0;border-radius:3px !important;background:var(--tss-green) !important}
.tss .tss-prog>span{transition:width .4s var(--tss-ease) !important}

/* ── body: one scrolling column below 960 px; stage + side on a laptop ── */
.tss .tss-main{flex:1 !important;min-height:0 !important;overflow-x:hidden !important;overflow-y:auto !important;overscroll-behavior:contain !important;display:flex !important;flex-direction:column !important}
.tss .tss-stage{padding:var(--tss-py) var(--tss-px) !important}
.tss .tss-side{padding:var(--tss-py) var(--tss-px) calc(var(--tss-py) + 8px + env(safe-area-inset-bottom)) !important;box-shadow:inset 0 1px 0 var(--tss-line) !important}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-main{position:relative !important}
	/* the side column's tint and hairline are the scroll box's own background, so they stay put
	   and fill the full height while a long screen scrolls under them */
	.tss .tss-main--split{display:grid !important;grid-template-columns:minmax(0,1fr) 392px !important;
		background:linear-gradient(to right,transparent calc(100% - 392px),var(--tss-line) calc(100% - 392px),var(--tss-line) calc(100% - 391px),rgba(255,255,255,.018) calc(100% - 391px)) !important}
	/* fill: both columns run the full height (start screen) */
	.tss .tss-main--fill{overflow:hidden !important;grid-template-rows:minmax(0,1fr) !important}
	.tss .tss-main--fill>.tss-stage,.tss .tss-main--fill>.tss-side{min-height:0 !important;display:flex !important;flex-direction:column !important}
	/* both columns scroll on their own if a short window still runs out of room */
	.tss .tss-main--fill>.tss-stage,.tss .tss-main--fill>.tss-side{overflow-x:hidden !important;overflow-y:auto !important}
	/* top: both columns start on the same line (quiz: the question never jumps) */
	.tss .tss-main--top{align-content:start !important;align-items:start !important}
	/* pair: both columns start on the same line and sit in the middle together (end screen) */
	/* (safe: a result taller than the window starts at the top and scrolls, instead of being cut off above) */
	.tss .tss-main--pair{align-content:start !important;align-content:safe center !important;align-items:start !important}
	.tss .tss-side{padding:var(--tss-py) var(--tss-px) !important;box-shadow:none !important}
}

/* ── START SCREEN ── */
.tss .tss-eyebrow{font-size:13px !important;line-height:20px !important;font-weight:500 !important;color:var(--tss-low) !important}
.tss .tss-h{font-family:var(--tss-disp) !important;font-weight:700 !important;font-size:28px !important;line-height:32px !important;letter-spacing:-.03em !important;
	color:#fff !important;margin-top:8px !important}
.tss .tss-lead{font-size:15px !important;line-height:24px !important;color:var(--tss-mid) !important;margin-top:8px !important;max-width:544px !important;text-wrap:balance}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-h{font-size:36px !important;line-height:40px !important}
	.tss .tss-lead{font-size:17px !important;line-height:26px !important;margin-top:12px !important}
}

/* today's deck: the real first card on top, two cards under it, each edge 8 px apart */
.tss .tss-pdeck{position:relative !important;display:block !important;width:100% !important;height:196px !important;margin-top:24px !important;cursor:pointer !important;text-align:left !important}
.tss .tss-pc{position:absolute !important;border-radius:16px !important;background:var(--tss-plate3) !important;box-shadow:inset 0 0 0 1px var(--tss-line2) !important}
.tss .tss-pc--3{left:32px !important;right:32px !important;top:16px !important;bottom:0 !important;opacity:.6 !important}
.tss .tss-pc--2{left:16px !important;right:16px !important;top:8px !important;bottom:8px !important;background:var(--tss-plate2) !important}
.tss .tss-pc--1{left:0 !important;right:0 !important;top:0 !important;bottom:16px !important;background:var(--tss-plate) !important;display:flex !important;flex-direction:column !important;
	padding:20px 24px !important;transition:transform .18s var(--tss-ease),box-shadow .18s !important}
.tss .tss-pdeck:hover .tss-pc--1{transform:translateY(-1px) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24) !important}
.tss .tss-ftop{display:flex !important;align-items:center !important;gap:8px !important;font-size:13px !important;line-height:20px !important}
.tss .tss-tag{font-weight:600 !important;color:var(--tss-green) !important}
.tss .tss-tag-topic{color:var(--tss-low) !important}
.tss .tss-pc-n{margin-left:auto !important;color:var(--tss-low) !important;font-variant-numeric:tabular-nums !important}
.tss .tss-pc-body{flex:1 !important;min-height:0 !important;display:flex !important;align-items:center !important}
.tss .tss-pc-q{font-size:17px !important;line-height:26px !important;font-weight:600 !important;letter-spacing:-.01em !important;color:var(--tss-hi) !important;
	display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden !important}
.tss .tss-go{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:16px !important;margin-top:24px !important}
.tss .tss-go .tr-cta:not(#_trcta),.tss .tss-endacts .tr-cta:not(#_trcta),.tss .tss-stage .tss-reveal:not(#_trcta){width:100% !important}
.tss .tss-go-sub{height:24px !important;font-size:14px !important;line-height:24px !important;text-align:center !important;color:var(--tss-low) !important}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-pdeck{flex:1 1 auto !important;height:auto !important;min-height:180px !important;margin-top:32px !important}
	.tss .tss-pc--1{padding:24px 32px !important}
	.tss .tss-pc-q{font-size:28px !important;line-height:36px !important}
	.tss .tss-go{align-items:flex-start !important;margin-top:32px !important}
	.tss .tss-go-sub{text-align:left !important}
	.tss .tss-go .tr-cta:not(#_trcta),.tss .tss-endacts .tr-cta:not(#_trcta),.tss .tss-stage .tss-reveal:not(#_trcta){width:312px !important}
}

/* side column: what members get, or the sets */
.tss .tss-side-h{font-family:var(--tss-disp) !important;font-weight:700 !important;font-size:22px !important;line-height:28px !important;letter-spacing:-.02em !important;color:#fff !important}
.tss .tss-side-p{font-size:14px !important;line-height:22px !important;color:var(--tss-mid) !important;margin-top:8px !important;text-wrap:balance}
.tss .tss-sets{margin-top:24px !important}
.tss .tss-sets li{position:relative !important}
.tss .tss-sets li::before,.tss .tss-sets li:last-child::after{content:"" !important;position:absolute !important;left:0 !important;right:0 !important;height:1px !important;background:var(--tss-line) !important}
.tss .tss-sets li::before{top:0 !important}
.tss .tss-sets li:last-child::after{bottom:0 !important}
.tss .tss-set{position:relative !important;width:calc(100% + 24px) !important;margin:0 -12px !important;display:flex !important;align-items:center !important;gap:16px !important;
	height:64px !important;padding:0 12px !important;border-radius:8px !important;transition:background .15s !important}
.tss .tss-set:hover{background:rgba(255,255,255,.04) !important}
.tss .tss-set-ic{flex:0 0 auto !important;display:flex !important;width:20px !important;height:20px !important;color:rgba(255,255,255,.56) !important}
.tss .tss-set-ic svg{width:20px !important;height:20px !important}
.tss .tss-set-t{flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important;gap:2px !important;font-size:15px !important;line-height:20px !important;
	font-weight:600 !important;color:var(--tss-hi) !important}
.tss .tss-set-t small{font-size:13px !important;line-height:18px !important;font-weight:400 !important;color:var(--tss-mid) !important}
.tss .tss-set-r{flex:0 0 auto !important;display:flex !important;width:16px !important;height:16px !important;color:rgba(255,255,255,.4) !important}
.tss .tss-set-r svg{width:16px !important;height:16px !important}
.tss .tss-set:not([data-tss-locked]) .tss-set-r{color:var(--tss-mid) !important}
.tss .tss-foot{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:16px !important;margin-top:24px !important}
.tss .tss-foot-sub{height:24px !important;font-size:14px !important;line-height:24px !important;text-align:center !important;color:var(--tss-low) !important}
.tss .tss-sub{font-size:13px !important;line-height:20px !important;font-weight:600 !important;color:var(--tss-mid) !important;margin:24px 0 12px !important}
.tss .tss-chips{display:flex !important;flex-wrap:wrap !important;gap:8px !important}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-main--fill .tss-foot{margin-top:auto !important;padding-top:24px !important}
}
@media (min-width:960px) and (min-height:560px){
	/* more below in a scrolling side column: its lower edge fades out (session.js sets is-more) */
	.tss .tss-main--fill>.tss-side.is-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent) !important;
		mask-image:linear-gradient(to bottom,#000 calc(100% - 64px),transparent) !important}
}
@media (min-width:960px) and (max-height:760px){.tss .tss-main--fill .tss-side-p{display:none !important}}
/* short laptop windows (under 720 px high, such as a 1366 x 768 screen under the browser's bars):
   a tighter rhythm, a smaller preview and 56 px rows, so the start screen still fits */
@media (min-width:960px) and (min-height:560px) and (max-height:719px){
	.tss{--tss-py:32px}
	.tss .tss-pdeck{min-height:136px !important;margin-top:24px !important}
	.tss .tss-pc--1{padding:20px 24px !important}
	.tss .tss-pc-q{font-size:22px !important;line-height:30px !important;-webkit-line-clamp:2}
	.tss .tss-go{margin-top:24px !important}
	.tss .tss-set{height:56px !important}
}
/* under 640 px high the preview goes and the Start button carries the screen */
@media (min-width:960px) and (min-height:560px) and (max-height:639px){
	.tss .tss-pdeck{display:none !important}
	.tss .tss-go{margin-top:32px !important}
}

/* ── FLASHCARDS ── */
.tss .tss-stage--deck{flex:1 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;
	justify-content:flex-start !important;justify-content:safe center !important}
.tss .tss-deck{position:relative !important;width:100% !important;max-width:720px !important;flex:0 1 456px !important;min-height:300px !important;touch-action:pan-y !important}
.tss .tss-fcard{position:absolute !important;left:0 !important;right:0 !important;top:0 !important;bottom:16px !important;border-radius:16px !important;will-change:transform}
.tss .tss-fcard--under{left:16px !important;right:16px !important;top:8px !important;bottom:8px !important;pointer-events:none !important}
.tss .tss-fcin{position:relative !important;width:100% !important;height:100% !important;transform-style:preserve-3d !important;transition:transform .45s var(--tss-ease) !important}
.tss .tss-fcard.is-flipped .tss-fcin{transform:rotateY(180deg) !important}
.tss .tss-face{position:absolute !important;inset:0 !important;border-radius:16px !important;background:var(--tss-plate) !important;box-shadow:inset 0 0 0 1px var(--tss-line2) !important;
	display:flex !important;flex-direction:column !important;padding:24px !important;overflow:hidden !important;
	backface-visibility:hidden !important;-webkit-backface-visibility:hidden !important}
.tss .tss-face--back{transform:rotateY(180deg) !important}
.tss .tss-fcard--under .tss-face{background:var(--tss-plate2) !important}
.tss .tss-fcard.tss-got .tss-face--back{box-shadow:inset 0 0 0 1px rgba(3,201,136,.5) !important}
/* the middle of a card scrolls when an answer is long; 4 px of padding (given back by the margin)
   keeps a focus ring on a full-width row inside it, and safe centring keeps a long answer's
   first line reachable */
.tss .tss-face-mid{flex:1 !important;min-height:0 !important;display:flex !important;flex-direction:column !important;
	justify-content:flex-start !important;justify-content:safe center !important;gap:16px !important;padding:4px !important;margin:-4px !important;
	overflow-x:hidden !important;overflow-y:auto !important;overscroll-behavior:contain !important}
.tss .tss-q{font-size:22px !important;line-height:30px !important;font-weight:600 !important;letter-spacing:-.01em !important;color:var(--tss-hi) !important;max-width:30em !important}
.tss .tss-a{font-size:17px !important;line-height:26px !important;color:var(--tss-hi) !important;max-width:36em !important}
.tss .tss-qsmall{font-size:14px !important;line-height:20px !important;color:var(--tss-low) !important;max-width:44em !important;margin-top:8px !important}
.tss .tss-deck-acts{width:100% !important;max-width:720px !important;display:grid !important;grid-auto-flow:column !important;grid-auto-columns:minmax(0,1fr) !important;
	gap:16px !important;margin-top:24px !important}
.tss .tss-deck-acts .tr-cta:not(#_trcta){width:100% !important}
.tss .tss-hintline{text-align:center !important;font-size:13px !important;line-height:20px !important;color:var(--tss-low) !important;margin-top:12px !important}
@media (hover:hover) and (pointer:fine){.tss .tss-hintline{display:none !important}}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-face{padding:32px 40px !important}
	.tss .tss-q{font-size:28px !important;line-height:36px !important}
	.tss .tss-a{font-size:17px !important;line-height:28px !important}
}
/* swipe stamps and edge glow: green on the right, neutral on the left */
.tss .tss-stamp{position:absolute !important;top:16px !important;font-size:14px !important;line-height:20px !important;font-weight:700 !important;padding:6px 12px !important;
	border-radius:8px !important;opacity:0;pointer-events:none !important;z-index:2 !important}
.tss .tss-stamp--got{right:16px !important;color:var(--tss-green) !important;box-shadow:inset 0 0 0 2px var(--tss-green) !important;transform:rotate(8deg) !important}
.tss .tss-stamp--again{left:16px !important;color:var(--tss-mid) !important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.36) !important;transform:rotate(-8deg) !important}
.tss .tss-glow{position:absolute !important;top:0 !important;bottom:16px !important;width:26% !important;pointer-events:none !important;opacity:0;z-index:5 !important}
.tss .tss-glow--r{right:0 !important;background:linear-gradient(to left,rgba(3,201,136,.28),transparent) !important;border-radius:0 16px 16px 0 !important}
.tss .tss-glow--l{left:0 !important;background:linear-gradient(to right,rgba(255,255,255,.14),transparent) !important;border-radius:16px 0 0 16px !important}

/* keyboard keys inside buttons and answers, only where there is a keyboard */
.tss kbd{display:none !important;box-sizing:border-box !important;height:20px !important;min-width:20px !important;padding:0 6px !important;border-radius:5px !important;
	font:600 11px/18px 'Inter','Inter Fallback',sans-serif !important;text-align:center !important;color:inherit !important;
	background:rgba(12,25,39,.12) !important;box-shadow:inset 0 0 0 1px rgba(12,25,39,.24) !important}
.tss .tr-cta--neutral kbd{background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important}
@media (hover:hover) and (pointer:fine){.tss kbd{display:inline-block !important}}

/* the video row (the site's play button) and the video in place */
.tss .tss-vrow{display:flex !important;align-items:center !important;gap:12px !important;width:100% !important;height:56px !important;flex:0 0 auto !important;
	padding:0 16px 0 8px !important;border-radius:12px !important;background:rgba(255,255,255,.03) !important;box-shadow:inset 0 0 0 1px var(--tss-line) !important;
	font-size:14px !important;line-height:20px !important;font-weight:600 !important;color:var(--tss-hi) !important;text-align:left !important;transition:background .15s !important}
.tss .tss-vrow:hover{background:rgba(255,255,255,.06) !important}
.tss .tss-vrow .tr-ib{flex:0 0 auto !important;width:40px !important;height:40px !important}
.tss .tss-vrow-t{min-width:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.tss .tss-vrow em{margin-left:auto !important;display:flex !important;align-items:center !important;gap:6px !important;font-style:normal !important;font-size:13px !important;
	line-height:20px !important;font-weight:500 !important;color:var(--tss-low) !important}
.tss .tss-vrow em svg{width:14px !important;height:14px !important}
/* 4.112.0: .tss-vinline (the player inside the card) is gone; Watch opens the shared player above the window. */
.tss .tss-qside,.tss .tss-face-mid{container-type:inline-size}

/* ── QUIZ ── */
.tss .tss-qtop{display:flex !important;align-items:center !important;gap:8px !important;font-size:13px !important;line-height:20px !important;min-height:20px !important}
.tss .tss-qtop .tr-ib{margin-left:auto !important}
.tss .tss-flag.is-on,.tss .tss-flagline .tr-link.is-on{color:var(--tss-green) !important}
.tss .tss-flag.is-on{box-shadow:inset 0 0 0 1px rgba(3,201,136,.5) !important}
.tss .tss-qq{font-size:20px !important;line-height:28px !important;font-weight:600 !important;letter-spacing:-.01em !important;color:var(--tss-hi) !important;margin:12px 0 20px !important;max-width:30em !important}
@media (min-width:960px) and (min-height:560px){.tss .tss-qq{font-size:24px !important;line-height:32px !important;margin:12px 0 24px !important}}
.tss .tss-opts{display:flex !important;flex-direction:column !important;gap:12px !important}
.tss .tss-opt{display:flex !important;align-items:flex-start !important;gap:16px !important;width:100% !important;min-height:56px !important;padding:16px !important;border-radius:12px !important;
	background:rgba(255,255,255,.035) !important;box-shadow:inset 0 0 0 1px var(--tss-line2) !important;font-size:17px !important;line-height:24px !important;color:var(--tss-hi) !important;
	text-align:left !important;transition:background .15s,box-shadow .15s !important}
.tss .tss-opt:not(:disabled):hover{background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24) !important}
.tss .tss-opt kbd{height:24px !important;min-width:24px !important;padding:0 !important;border-radius:6px !important;font-size:12px !important;line-height:24px !important;color:var(--tss-mid) !important;
	background:rgba(255,255,255,.06) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16) !important}
.tss .tss-opt-t{flex:1 !important;min-width:0 !important}
.tss .tss-opt-m{flex:0 0 auto !important;display:flex !important;width:20px !important;height:20px !important;margin-top:2px !important}
.tss .tss-opt-m svg{width:20px !important;height:20px !important}
.tss .tss-opt.is-correct{background:rgba(3,201,136,.1) !important;box-shadow:inset 0 0 0 1px var(--tss-green) !important}
.tss .tss-opt.is-correct .tss-opt-m{color:var(--tss-green) !important}
.tss .tss-opt.is-wrong{background:rgba(255,255,255,.05) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.36) !important}
.tss .tss-opt.is-wrong .tss-opt-m{color:var(--tss-mid) !important}
.tss .tss-opt.is-dim{opacity:.44 !important}
.tss .tss-opt:disabled{cursor:default !important}
.tss .tss-hintbox{display:flex !important;gap:12px !important;align-items:flex-start !important;padding:16px !important;border-radius:12px !important;
	background:rgba(255,255,255,.035) !important;box-shadow:inset 0 0 0 1px var(--tss-line) !important;font-size:14px !important;line-height:22px !important;color:var(--tss-mid) !important}
.tss .tss-hintbox svg{flex:0 0 auto !important;width:16px !important;height:16px !important;margin-top:3px !important}
.tss .tss-hintbox+.tss-reveal{margin-top:24px !important}

/* the answer panel: a sheet that slides up on a phone and tablet, the side column on a laptop */
.tss .tss-qside{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:10 !important;max-height:78% !important;overflow-x:hidden !important;overflow-y:auto !important;
	overscroll-behavior:contain !important;background:#0f2131 !important;border-radius:20px 20px 0 0 !important;
	box-shadow:0 -1px 0 var(--tss-line),0 -18px 50px -20px rgba(0,0,0,.7) !important;
	padding:20px var(--tss-px) calc(20px + env(safe-area-inset-bottom)) !important;transform:translateY(102%) !important;transition:transform .32s var(--tss-ease) !important}
.tss .tss-qside.is-up{transform:translateY(0) !important}
.tss .tss-qside.is-good{box-shadow:0 -1px 0 rgba(3,201,136,.5),0 -18px 50px -20px rgba(0,0,0,.7) !important}
.tss .tss-wait,.tss .tss-flagline{display:none !important}
.tss .tss-quiz-stage{padding-bottom:calc(var(--tss-py) + 160px) !important}
@media (min-width:960px) and (min-height:560px){
	.tss .tss-qside{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;z-index:auto !important;max-height:none !important;overflow:visible !important;
		background:none !important;border-radius:0 !important;box-shadow:none !important;padding:var(--tss-py) var(--tss-px) !important;transform:none !important;transition:none !important}
	.tss .tss-qside.is-good{box-shadow:none !important}
	.tss .tss-wait,.tss .tss-flagline{display:block !important}
	.tss .tss-qtop .tss-flag{display:none !important}
	.tss .tss-quiz-stage{padding-bottom:var(--tss-py) !important}
}
.tss .tss-wait b{display:block !important;font-size:15px !important;line-height:24px !important;font-weight:600 !important;color:var(--tss-mid) !important}
.tss .tss-wait span{display:block !important;font-size:14px !important;line-height:22px !important;color:var(--tss-low) !important;margin-top:4px !important}
.tss .tss-wait+.tss-flagline{margin-top:16px !important}
.tss .tss-verdict{font-size:20px !important;line-height:28px !important;font-weight:700 !important;letter-spacing:-.01em !important;color:#fff !important}
.tss .tss-verdict.is-good{color:var(--tss-green) !important}
.tss .tss-why{font-size:15px !important;line-height:24px !important;color:rgba(255,255,255,.86) !important;margin:8px 0 24px !important;text-wrap:pretty}
.tss .tss-line{height:24px !important;font-size:14px !important;line-height:24px !important;margin-top:16px !important}
.tss .tss-qside .tss-vrow+.tss-line{margin-top:16px !important}
.tss .tss-qside .tss-next:not(#_trcta){margin-top:32px !important}
.tss .tss-ratelab{display:block !important;font-size:14px !important;line-height:22px !important;color:var(--tss-mid) !important;margin:24px 0 12px !important}
.tss .tss-rate{display:grid !important;grid-auto-flow:column !important;grid-auto-columns:minmax(0,1fr) !important;gap:12px !important}
.tss .tss-rate .tr-cta:not(#_trcta){width:100% !important;padding:0 12px !important}

/* ── END OF A SESSION ── */
.tss .tss-ring{display:block !important;width:80px !important;height:80px !important}
.tss .tss-score{font-size:15px !important;line-height:24px !important;font-weight:600 !important;color:var(--tss-mid) !important;margin-top:24px !important;font-variant-numeric:tabular-nums !important}
.tss .tss-score b{font-weight:600 !important;color:var(--tss-hi) !important}
.tss .tss-score+.tss-h{margin-top:8px !important}
.tss .tss-endacts{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:16px 24px !important;margin-top:32px !important}
.tss .tss-endacts .tss-line{margin-top:0 !important;width:100% !important;text-align:center !important}
@media (min-width:960px) and (min-height:560px){.tss .tss-endacts .tss-line{width:auto !important;text-align:left !important}}
.tss .tss-again{margin-top:40px !important}
.tss .tss-again>p{font-size:13px !important;line-height:20px !important;font-weight:600 !important;color:var(--tss-mid) !important}
.tss .tss-again ul{margin-top:8px !important}
.tss .tss-again li{display:flex !important;align-items:flex-start !important;gap:12px !important;font-size:14px !important;line-height:22px !important;color:var(--tss-hi) !important;
	padding:12px 0 !important;box-shadow:inset 0 1px 0 var(--tss-line) !important}
.tss .tss-again li:last-child{box-shadow:inset 0 1px 0 var(--tss-line),inset 0 -1px 0 var(--tss-line) !important}
.tss .tss-again li::before{content:"" !important;flex:0 0 auto !important;width:6px !important;height:6px !important;border-radius:3px !important;background:var(--tss-low) !important;margin-top:8px !important}
.tss .tss-lockline{display:flex !important;align-items:center !important;gap:8px !important;font-size:13px !important;line-height:20px !important;font-weight:600 !important;color:var(--tss-green) !important}
.tss .tss-lockline svg{width:14px !important;height:14px !important}
.tss .tss-lockline+.tss-side-h{margin-top:12px !important}
.tss .tss-checks{margin-top:20px !important;display:flex !important;flex-direction:column !important;gap:8px !important}
.tss .tss-checks li{display:flex !important;gap:12px !important;font-size:14px !important;line-height:22px !important;color:rgba(255,255,255,.86) !important}
.tss .tss-checks svg{flex:0 0 auto !important;width:16px !important;height:16px !important;margin-top:3px !important;color:var(--tss-green) !important}
.tss .tss-checks+.tss-foot{margin-top:32px !important}
.tss .tss-mastery{margin-top:16px !important}
.tss .tss-mastery .tss-meter{width:100% !important}
.tss .tss-mastery+.tss-side-p{margin-top:12px !important}

/* toast */
.tss .tss-toast{position:absolute !important;left:50% !important;bottom:calc(24px + env(safe-area-inset-bottom)) !important;transform:translate(-50%,16px);
	background:#132a3d !important;box-shadow:inset 0 0 0 1px var(--tss-line) !important;color:var(--tss-hi) !important;font-size:13px !important;line-height:20px !important;
	font-weight:600 !important;border-radius:999px !important;padding:8px 16px !important;opacity:0;transition:opacity .25s,transform .25s var(--tss-ease) !important;
	pointer-events:none !important;z-index:40 !important;white-space:nowrap !important}
.tss .tss-toast.is-in{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
	.tss *{transition-duration:.01ms !important;animation:none !important}
	.tss .tss-fcin{transition:none !important}
}