/* trx-play.css (1 October 2026): the header "Play" and "Online Classroom" buttons on every edition, and the
   "Beat the Robot" pop-up window. Loaded after trx-theme.css. The Online Classroom keeps one colour on every
   edition: emerald lettering (no fill, so it does not outshout the page), distinct from Subscribe and the edition colours. */
/* deep enough for 7:1 on the day masthead, so the High contrast mode (trx-contrast.js forces any text under 7:1 to black or white) keeps it green */
html{--trx-cls-fg:#185638}
html:not([data-theme="light"]){--trx-cls-fg:#7DD3A0}
nav.main{align-items:center}
nav.main .nav-play,.gmenu .nav-play{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:7px;margin:0;font:inherit;font-size:14px;line-height:1.2;letter-spacing:.02em;white-space:nowrap;color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 12px 4px 10px;cursor:pointer;transition:color .2s,border-color .2s}
nav.main .nav-play::before,.gmenu .nav-play::before,.mnav-cta .mnav-play::before{content:"";flex:none;width:1.25em;height:1.25em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.5 6.5h9a5 5 0 0 1 4.9 6l-.8 4.1a2.3 2.3 0 0 1-4 1.1l-2-2.2H9.4l-2 2.2a2.3 2.3 0 0 1-4-1.1l-.8-4.1a5 5 0 0 1 4.9-6Z%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M7.6 9.6v3.8M5.7 11.5h3.8%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2716%27 cy=%2710.4%27 r=%271.25%27/%3E%3Ccircle cx=%2718.2%27 cy=%2712.8%27 r=%271.25%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.5 6.5h9a5 5 0 0 1 4.9 6l-.8 4.1a2.3 2.3 0 0 1-4 1.1l-2-2.2H9.4l-2 2.2a2.3 2.3 0 0 1-4-1.1l-.8-4.1a5 5 0 0 1 4.9-6Z%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M7.6 9.6v3.8M5.7 11.5h3.8%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2716%27 cy=%2710.4%27 r=%271.25%27/%3E%3Ccircle cx=%2718.2%27 cy=%2712.8%27 r=%271.25%27/%3E%3C/svg%3E") center/contain no-repeat}

nav.main .nav-play:hover,.gmenu .nav-play:hover{color:var(--gold);border-color:currentColor}
nav.main a.nav-cls,.gmenu a.nav-cls{display:inline-flex;align-items:center;font-weight:700;color:var(--trx-cls-fg);background:transparent;white-space:nowrap;line-height:1.2;text-decoration:none}
nav.main a.nav-cls:hover,nav.main a.nav-cls:focus,.gmenu a.nav-cls:hover{color:var(--trx-cls-fg);text-decoration:underline;text-underline-offset:4px}
nav.main .nav-play:focus-visible,nav.main a.nav-cls:focus-visible,.mnav-cta>*:focus-visible,.gmenu .nav-play:focus-visible,.gmenu a.nav-cls:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.mnav-cta{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 14px}
.mnav-cta a.mnav-cls{flex:1 1 12em;display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:10px 18px;border-radius:999px;font-weight:700;font-size:1.05rem;line-height:1.2;text-align:center;color:var(--trx-cls-fg);background:transparent;border:1px solid currentColor;text-decoration:none}
.mnav-cta .mnav-play{-webkit-appearance:none;appearance:none;flex:0 1 auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:1.05rem;font-weight:600;cursor:pointer}
.gmenu nav .nav-play,.gmenu nav a.nav-cls{margin:6px 0 2px;min-height:44px;justify-content:center}
#trx-pb-acts{display:none}
/* shown by trx-play.js (html.trx-acts) whenever the header menu is off screen: phones, tablets, narrow laptop windows */
html.trx-acts #trx-pb-acts{display:flex;justify-content:center;gap:10px;padding:4px 16px 10px}#trx-pb-acts>*{flex:0 1 260px;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:999px;font:inherit;font-size:15px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;overflow-wrap:anywhere}#trx-pb-acts .nav-cls{font-weight:700;color:var(--trx-cls-fg);background:transparent;border:1px solid currentColor}#trx-pb-acts .nav-play{-webkit-appearance:none;appearance:none;color:var(--ink,#1E242B);background:transparent;border:1px solid var(--line,rgba(30,36,43,.22))}#trx-pb-acts .nav-play::before{content:"";flex:none;width:1.25em;height:1.25em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.5 6.5h9a5 5 0 0 1 4.9 6l-.8 4.1a2.3 2.3 0 0 1-4 1.1l-2-2.2H9.4l-2 2.2a2.3 2.3 0 0 1-4-1.1l-.8-4.1a5 5 0 0 1 4.9-6Z%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M7.6 9.6v3.8M5.7 11.5h3.8%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2716%27 cy=%2710.4%27 r=%271.25%27/%3E%3Ccircle cx=%2718.2%27 cy=%2712.8%27 r=%271.25%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.5 6.5h9a5 5 0 0 1 4.9 6l-.8 4.1a2.3 2.3 0 0 1-4 1.1l-2-2.2H9.4l-2 2.2a2.3 2.3 0 0 1-4-1.1l-.8-4.1a5 5 0 0 1 4.9-6Z%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M7.6 9.6v3.8M5.7 11.5h3.8%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2716%27 cy=%2710.4%27 r=%271.25%27/%3E%3Ccircle cx=%2718.2%27 cy=%2712.8%27 r=%271.25%27/%3E%3C/svg%3E") center/contain no-repeat}#trx-pb-acts>*:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (max-width:600px){html.trx-acts #trx-pb-acts{gap:8px;padding:4px 14px 10px}#trx-pb-acts>*{flex:1 1 0}}
#trx-corner .cta{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}#trx-corner .cta .cls,#trx-corner .cta .play{flex:1 1 9em;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;font:inherit;font-size:15px;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}#trx-corner .cta .cls{font-weight:700;color:var(--trx-cls-fg);background:transparent;border:1px solid currentColor}#trx-corner .cta .play{-webkit-appearance:none;appearance:none;color:inherit;background:transparent;border:1px solid currentColor}#trx-corner .cta .play::before{content:"";flex:none;width:1.25em;height:1.25em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.5 6.5h9a5 5 0 0 1 4.9 6l-.8 4.1a2.3 2.3 0 0 1-4 1.1l-2-2.2H9.4l-2 2.2a2.3 2.3 0 0 1-4-1.1l-.8-4.1a5 5 0 0 1 4.9-6Z%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M7.6 9.6v3.8M5.7 11.5h3.8%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2716%27 cy=%2710.4%27 r=%271.25%27/%3E%3Ccircle cx=%2718.2%27 cy=%2712.8%27 r=%271.25%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M7.5 6.5h9a5 5 0 0 1 4.9 6l-.8 4.1a2.3 2.3 0 0 1-4 1.1l-2-2.2H9.4l-2 2.2a2.3 2.3 0 0 1-4-1.1l-.8-4.1a5 5 0 0 1 4.9-6Z%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linejoin=%27round%27/%3E%3Cpath d=%27M7.6 9.6v3.8M5.7 11.5h3.8%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2716%27 cy=%2710.4%27 r=%271.25%27/%3E%3Ccircle cx=%2718.2%27 cy=%2712.8%27 r=%271.25%27/%3E%3C/svg%3E") center/contain no-repeat}
html.trx-play-open,html.trx-play-open body{overflow:hidden}
.trx-play{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:12px;--display:"Newsreader","Cormorant Garamond",Georgia,serif}
.trx-play[hidden]{display:none!important}
.trx-play-back{position:absolute;inset:0;background:rgba(6,14,20,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.trx-play-box{position:relative;width:min(520px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55);font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.4;text-align:start}
.trx-play button{-webkit-appearance:none;appearance:none;font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:normal}
.trx-play .trx-play-x{position:absolute;top:10px;right:10px;z-index:12;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;color:#DCE9E2;background:rgba(255,255,255,.06);border:1px solid #2A4A41}
.trx-play[dir="rtl"] .trx-play-x{right:auto;left:10px}
.trx-play .trx-play-x:hover{background:rgba(232,200,112,.16);border-color:#E8C870;color:#E8C870}
.trx-play :focus-visible{outline:3px solid #E8C870;outline-offset:2px}
.trx-play .rg-err{margin:0;padding:48px 24px;text-align:center;color:#DCE9E2;background:#0A1B18}
.trx-play .rg-paper{border-radius:16px;border:1px solid #1e3b34;background:radial-gradient(500px 300px at 80% -10%,rgba(52,178,206,.13),transparent 60%),#0A1B18;padding:16px 14px 14px;color:#DCE9E2}
.trx-play .rg-mast{text-align:center;border-bottom:1px solid rgba(201,162,75,.25);padding:2px 46px 10px;margin-bottom:12px}
.trx-play .rg-kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8FB5A8;font-weight:700}
.trx-play .rg-mast h3{font-family:var(--display);font-size:28px;font-weight:700;color:#FFFFFF;line-height:1.05;margin:4px 0 0;padding:0;border:0;background:none;text-transform:none;letter-spacing:0}
.trx-play .rg-status{font-family:var(--display);font-style:italic;font-size:15px;color:#A9C9BD;margin-top:7px;min-height:1.3em}
.trx-play:lang(zh) .rg-status,.trx-play:lang(ja) .rg-status,.trx-play:lang(ko) .rg-status{font-style:normal}
.trx-play .rg-modes{display:flex;gap:7px;margin-bottom:11px}
.trx-play .rg-mode{flex:1;min-width:0;border:1px solid #22443C;border-radius:10px;padding:8px 4px;text-align:center;transition:.15s;background:rgba(255,255,255,.02)}
.trx-play .rg-mode.on{border-color:#E8C870;background:rgba(232,200,112,.1)}
.trx-play .rg-mode-n{display:block;font-family:var(--display);font-size:16px;font-weight:700;color:#FFFFFF;line-height:1.15}
.trx-play .rg-mode.on .rg-mode-n{color:#E8C870}
.trx-play .rg-mode-d{display:block;font-size:11px;color:#8FB5A8;margin-top:2px;line-height:1.25}
.trx-play .rg-stats{display:flex;gap:7px;margin-bottom:10px}
.trx-play .rg-stat{flex:1;min-width:0;border:1px solid #1C3830;border-radius:9px;padding:7px 4px;text-align:center;background:rgba(0,0,0,.18)}
.trx-play .rg-stat .v{display:block;font-family:var(--display);font-size:20px;font-weight:700;color:#EDF0F4;font-variant-numeric:tabular-nums;line-height:1}
.trx-play .rg-stat .v.low{color:#F08A80}
.trx-play .rg-stat .k{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8FB5A8;margin-top:4px;font-weight:700;overflow-wrap:anywhere}
.trx-play .rg-board-wrap{position:relative;width:100%;max-width:max(220px,min(430px,calc(100vh - 440px)));max-width:max(220px,min(430px,calc(100dvh - 440px)));margin:0 auto;direction:ltr}
.trx-play .rg-board{display:grid;border:2px solid #2A4A41;border-radius:8px;overflow:hidden;background:#0D211D;aspect-ratio:1/1}
.trx-play .rg-sq{position:relative;display:flex;align-items:center;justify-content:center;background:#0F2621;min-width:0;min-height:0;overflow:hidden}
.trx-play .rg-sq>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.trx-play .rg-sq.dk{background:#0C1F1B}
.trx-play .rg-sq.wall{background:linear-gradient(160deg,#233F38,#1A2F2A);box-shadow:inset 0 0 0 1px rgba(201,162,75,.28),inset 0 2px 0 rgba(255,255,255,.06)}
.trx-play .rg-pc{font-size:20px;line-height:1;z-index:2}
.trx-play .rg-bot.cloak{opacity:.13;filter:blur(1px)}
.trx-play .rg-chip{color:#E8C870;font-size:13px;text-shadow:0 0 8px rgba(232,200,112,.6)}
.trx-play .rg-foot{color:#3E6B5F;font-size:20px;line-height:0}
.trx-play .rg-foot.f0{opacity:.8}.trx-play .rg-foot.f1{opacity:.5}.trx-play .rg-foot.f2{opacity:.28}
.trx-play .rg-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:.12s;z-index:6}
.trx-play .rg-flash.show{opacity:1}
.trx-play .rg-flash span{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:.06em;padding:8px 22px;border-radius:6px}
.trx-play .rg-flash.gotcha span{background:rgba(38,80,55,.92);color:#B9E8C6;border:2px solid #7FC493}
.trx-play .rg-flash.zap span{background:rgba(96,42,32,.92);color:#FFC9B8;border:2px solid #E8756A}
.trx-play .rg-flash.breach span{background:rgba(90,28,60,.92);color:#F5B8D6;border:2px solid #DD5499}
.trx-play .rg-flash.go{transition:none}
.trx-play .rg-flash.go span{background:rgba(16,35,31,.94);color:#F1D88E;border:2px solid #E8C870;text-align:center;max-width:88%;text-wrap:balance;animation:rgGoIn .5s cubic-bezier(.2,.9,.3,1.2) both}
.trx-play .rg-flash.go2 span{font-size:20px;letter-spacing:.02em;font-weight:600;line-height:1.3;animation-name:rgGoSlide}
.trx-play .rg-flash.go3 span{font-size:52px;animation-name:rgGoPop}
@keyframes rgGoIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rgGoSlide{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes rgGoPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.trx-play .rg-flash.go span{animation:none}}
.trx-play .rg-scrim{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,17,14,.9);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:8;border-radius:8px;padding:16px;overflow:auto}
.trx-play .rg-scrim.show{display:flex}
.trx-play .rg-intro,.trx-play .rg-over{text-align:center;max-width:320px;margin:auto}
.trx-play .rg-emoji{font-size:40px;margin-bottom:10px}
.trx-play .rg-btn{border-radius:11px;padding:12px 22px;min-height:44px;font-size:15px;font-weight:800;letter-spacing:.03em}
.trx-play .rg-btn.primary{background:#E8C870;color:#10231F}
.trx-play .rg-btn.primary:hover{background:#F1D88E}
.trx-play .rg-how{font-size:12.5px;line-height:1.55;color:#A9C9BD;margin-top:14px;text-align:start}
.trx-play .rg-how b{color:#DCE9E2}
.trx-play .rg-over-h{font-family:var(--display);font-size:26px;font-weight:700;color:#FFFFFF}
.trx-play .rg-over-score{font-size:15px;color:#DCE9E2;margin-top:8px}
.trx-play .rg-over-score b{font-family:var(--display);font-size:26px;color:#E8C870}
.trx-play .rg-newbest{color:#8FE0B0;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.trx-play .rg-over-best{font-size:12px;color:#8FB5A8;margin-top:3px}
.trx-play .rg-over-sub{font-family:var(--display);font-style:italic;font-size:14.5px;color:#A9C9BD;margin:10px 0 14px}
.trx-play .rg-ctrl{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px}
.trx-play .rg-pad{display:grid;grid-template-columns:repeat(3,minmax(64px,88px));grid-template-rows:repeat(2,52px);gap:8px;width:100%;max-width:300px;justify-content:center;direction:ltr}
.trx-play .rg-pad button{width:100%;height:52px;border-radius:13px;border:1px solid #2A4A41;background:rgba(255,255,255,.04);color:#CFE3DA;display:flex;align-items:center;justify-content:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.trx-play .rg-pad button:active{background:rgba(232,200,112,.18);border-color:#E8C870}
.trx-play .rg-pad button svg{width:24px;height:24px}
.trx-play .rg-pad button:nth-child(1){grid-column:2;grid-row:1}
.trx-play .rg-pad button:nth-child(2){grid-column:1;grid-row:2}
.trx-play .rg-pad button:nth-child(3){grid-column:2;grid-row:2}
.trx-play .rg-pad button:nth-child(4){grid-column:3;grid-row:2}
.trx-play .rg-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 14px;font-size:12px;color:#8FB5A8;text-align:center}
.trx-play .rg-chip-i{color:#E8C870;font-style:normal}
.trx-play .rg-legend span:nth-child(-n+2){white-space:nowrap}
@media (min-width:760px) and (max-height:780px){.trx-play-box{width:min(840px,100%)}.trx-play .rg-paper{display:grid;grid-template-columns:auto 300px;grid-template-areas:"mast mast" "board modes" "board stats" "board ctrl";grid-template-rows:auto auto auto 1fr;column-gap:18px;align-items:start}.trx-play .rg-mast{grid-area:mast}.trx-play .rg-modes{grid-area:modes}.trx-play .rg-stats{grid-area:stats}.trx-play .rg-ctrl{grid-area:ctrl;margin-top:4px}.trx-play .rg-board-wrap{grid-area:board;width:max(240px,min(430px,calc(100vh - 150px)));width:max(240px,min(430px,calc(100dvh - 150px)));max-width:none;margin:0}.trx-play .rg-mode{padding:7px 3px}.trx-play .rg-mode-d{font-size:10.5px}}
@media (max-width:520px){.trx-play .rg-board-wrap{max-width:max(220px,min(430px,calc(100vh - 410px)));max-width:max(220px,min(430px,calc(100dvh - 410px)))}.trx-play{padding:0}.trx-play-box{width:100%;height:100%;max-height:none;border-radius:0}.trx-play .rg-paper{min-height:100%;border-radius:0;border:0;padding:14px 12px 18px}.trx-play .rg-mode-d{font-size:10.5px}}
@media (max-height:640px){.trx-play .rg-mast{margin-bottom:8px;padding-bottom:6px}.trx-play .rg-status{margin-top:4px}.trx-play .rg-modes,.trx-play .rg-stats{margin-bottom:7px}.trx-play .rg-pad{grid-template-rows:repeat(2,46px)}.trx-play .rg-pad button{height:46px}}
@media (max-height:760px){.trx-play .rg-emoji{display:none}.trx-play .rg-scrim{padding:10px 12px}.trx-play .rg-how{font-size:12px;line-height:1.45;margin-top:10px}}
@media (prefers-reduced-motion:reduce){.trx-play *{transition:none!important}}
@media print{.trx-play{display:none!important}}

/* Online Classroom carries a mortarboard, matching the controller on Play a game */
nav.main a.nav-cls,.gmenu a.nav-cls,.mnav-cta a.mnav-cls,#trx-pb-acts .nav-cls,#trx-corner .cta .cls{gap:7px}
nav.main a.nav-cls::before,.gmenu a.nav-cls::before,.mnav-cta a.mnav-cls::before,#trx-pb-acts .nav-cls::before,#trx-corner .cta .cls::before{content:"";flex:none;width:1.25em;height:1.25em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 3.6 1.2 8.9 12 14.2l8.6-4.2v5.6h1.9V8.9Z%27/%3E%3Cpath d=%27M5.6 12.4v3.7c0 1.7 2.9 3.4 6.4 3.4s6.4-1.7 6.4-3.4v-3.7L12 15.6Z%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 3.6 1.2 8.9 12 14.2l8.6-4.2v5.6h1.9V8.9Z%27/%3E%3Cpath d=%27M5.6 12.4v3.7c0 1.7 2.9 3.4 6.4 3.4s6.4-1.7 6.4-3.4v-3.7L12 15.6Z%27/%3E%3C/svg%3E") center/contain no-repeat}
/* in the top strip (placed by trx-play.js between the edition links and the language picker) */
html.trx-acts .dateline #trx-pb-acts.in-strip{display:flex;order:0;flex:0 0 auto;gap:8px;padding:0;margin:0;min-width:0}
.dateline #trx-pb-acts.in-strip>*{flex:0 0 auto;min-height:30px;padding:3px 12px;margin:0;font-size:12px;letter-spacing:.05em;line-height:1.2;gap:6px;white-space:nowrap}
.dateline #trx-pb-acts.in-strip .nav-play{color:var(--ink-soft)}

/* Play a game in burnt orange, Online Classroom in emerald: a matched pair. Both colours reach 7:1 on their masthead, so High contrast mode keeps them in colour. */
html{--trx-play-fg:#8F360A}
html:not([data-theme="light"]){--trx-play-fg:#F4A261}
nav.main .nav-play,.gmenu .nav-play{color:var(--trx-play-fg);border-color:transparent;font-weight:700;padding-left:4px;padding-right:4px}
nav.main .nav-play:hover,.gmenu .nav-play:hover{color:var(--trx-play-fg);border-color:transparent;text-decoration:underline;text-underline-offset:4px}
.mnav-cta .mnav-play,#trx-pb-acts .nav-play,#trx-corner .cta .play{color:var(--trx-play-fg);border:1px solid currentColor;font-weight:700}
.dateline #trx-pb-acts.in-strip .nav-play{color:var(--trx-play-fg)}
.dateline #trx-pb-acts.in-strip>*{text-transform:uppercase;font-weight:700}

/* matched pair, final: same pill frame, same weight, each in its own colour (Play a game burnt orange, Online Classroom emerald). Day colours meet 4.5:1 on the strip and the masthead; High contrast (html[data-contrast="high"]) switches to deeper shades that meet 7:1, so the contrast pass leaves them in colour. */
html{--trx-play-fg:#A9430D;--trx-cls-fg:#23704A}
html:not([data-theme="light"]){--trx-play-fg:#F4A261;--trx-cls-fg:#7DD3A0}
html[data-contrast="high"][data-theme="light"]{--trx-play-fg:#7A2C08;--trx-cls-fg:#134A2C}
/* r21j: Dark has no data-theme attribute, so the old :not([data-theme]) branch gave Dark the deep day shades (1.4:1); High contrast in Dark keeps light shades of 7.9 and 9.1:1 */
html[data-contrast="high"]:not([data-theme="light"]){--trx-play-fg:#F5B489;--trx-cls-fg:#8FE0B0}
nav.main .nav-play,.gmenu .nav-play,nav.main a.nav-cls,.gmenu a.nav-cls{display:inline-flex;align-items:center;gap:7px;font-weight:500;border:1px solid currentColor;border-radius:999px;padding:4px 13px 4px 11px;background:transparent;line-height:1.2;white-space:nowrap}
nav.main .nav-play,.gmenu .nav-play{color:var(--trx-play-fg)}
nav.main a.nav-cls,.gmenu a.nav-cls{color:var(--trx-cls-fg)}
nav.main .nav-play:hover,.gmenu .nav-play:hover,nav.main a.nav-cls:hover,.gmenu a.nav-cls:hover{text-decoration:none;background:color-mix(in srgb,currentColor 9%,transparent)}
.mnav-cta .mnav-play,.mnav-cta a.mnav-cls,#trx-pb-acts .nav-play,#trx-pb-acts .nav-cls,#trx-corner .cta .play,#trx-corner .cta .cls{font-weight:500;border:1px solid currentColor;background:transparent}
.mnav-cta .mnav-play,#trx-pb-acts .nav-play,#trx-corner .cta .play{color:var(--trx-play-fg)}
.mnav-cta a.mnav-cls,#trx-pb-acts .nav-cls,#trx-corner .cta .cls{color:var(--trx-cls-fg)}
.dateline #trx-pb-acts.in-strip>*{font-weight:600}
.dateline #trx-pb-acts.in-strip .nav-play{color:var(--trx-play-fg)}.dateline #trx-pb-acts.in-strip .nav-cls{color:var(--trx-cls-fg)}

/* phone and tablet row: compact pills sized like the edition links, centred, not full width */
@media (max-width:999px){html.trx-acts #trx-pb-acts:not(.in-strip){justify-content:center;gap:10px;padding:2px 16px 10px}#trx-pb-acts:not(.in-strip)>*{flex:0 1 auto!important;min-height:36px;padding:5px 14px;font-size:14px;gap:6px;border-radius:999px}#trx-pb-acts:not(.in-strip)>*::before{width:1.15em;height:1.15em}}
@media (max-width:360px){#trx-pb-acts:not(.in-strip)>*{padding:5px 11px;font-size:13.5px}}

/* text size beside the language picker (trx-play.js) */
.trx-fs2{display:none;align-items:stretch;flex:0 0 auto;border:1px solid var(--brass,#C9A24B);border-radius:22px;overflow:hidden}
.trx-fs2>button{-webkit-appearance:none;appearance:none;margin:0;border:0;background:transparent;color:var(--ink,#1E242B);font:700 14px/1 var(--body,system-ui,sans-serif);letter-spacing:0;text-transform:none;min-width:40px;padding:0 9px;cursor:pointer;font-variant-numeric:tabular-nums}
.trx-fs2>button+button{border-left:1px solid var(--brass,#C9A24B)}
.trx-fs2>button:disabled{opacity:.4;cursor:default}
.trx-fs2>button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.trx-fs2>button:hover:not(:disabled){background:color-mix(in srgb,currentColor 9%,transparent)}
@media (max-width:600px){header.mast .trx-fs2.fs2-phone{display:inline-flex;min-height:44px;margin-inline-start:auto;margin-inline-end:8px}header.mast .trx-fs2.fs2-phone+.pb-lang{margin-inline-start:0}}
@media (min-width:601px) and (max-width:1099px){.dateline .trx-fs2.fs2-strip{display:inline-flex;min-height:30px;margin:0}.dateline .trx-fs2.fs2-strip>button{min-width:34px;font-size:12.5px}}
@media (max-width:600px){header.mast .trx-fs2.fs2-phone>button{min-width:34px;padding:0 7px;font-size:13.5px}header.mast .trx-fs2.fs2-phone{margin-inline-end:6px}header.mast .pb-lang{padding:0 10px!important;gap:4px!important}header.mast .pb-lang .pb-caret{display:none!important}html body header.mast .brand .nm small{letter-spacing:.05em!important}}
#trx-pb-acts>*{overflow-wrap:normal!important;word-break:normal}

/* r24b (3 Nov 2026): the header action pills (Play a game, Online Classroom, the desk) keep each label on one line and wrap as whole pills, instead of squeezing every label onto two lines; below 360 px the pills are slightly smaller, and below 300 px a label may wrap so no pill is wider than the screen. */
html body #trx-pb-acts{flex-wrap:wrap!important;justify-content:center;row-gap:8px}html body #trx-pb-acts>*{flex:0 0 auto!important;white-space:nowrap!important;max-width:100%;min-height:40px}@media(max-width:360px){html body #trx-pb-acts{column-gap:6px}html body #trx-pb-acts>*{font-size:13px!important;padding-inline:10px!important;gap:5px!important}}@media(max-width:300px){html body #trx-pb-acts>*{white-space:normal!important;flex:1 1 auto!important;text-wrap:balance}}
/* r24b: on the narrowest phones (under 375 px) the masthead name and edition line take their own row, and the text-size and language controls sit on the row below, so the name no longer breaks as "TOTO-/REX". */
@media(max-width:374px){html body header.mast>.wrap{flex-wrap:wrap!important;row-gap:8px;justify-content:flex-end}html body header.mast>.wrap>a.brand{flex:1 1 100%!important;max-width:none!important;width:100%}}
/* r24b: the name TOTO-REX never breaks at its hyphen on phones; the edition line under it may wrap. */
html body header.mast a.brand .nm{white-space:nowrap}html body header.mast a.brand .nm small{white-space:normal}
/* r24b: Chinese, Japanese and Korean labels in buttons, tabs and the edition row no longer break inside a word ("電子/報", "英國與歐/盟") or spill out of a tab ("按科技供應商"). */
html:is([lang^="zh"],[lang^="ja"],[lang^="ko"]) :is(.mast-subscribe,.tabs .tab,.editions a,.gdl-eds a,#trx-pb-acts>*){white-space:nowrap!important;word-break:keep-all}html:is([lang^="zh"],[lang^="ja"],[lang^="ko"]) .tabs{flex-wrap:wrap}html:is([lang^="zh"],[lang^="ja"],[lang^="ko"]) .tabs .tab{height:auto;min-height:40px}
/* r24b: the Europe country-picker filter pills ("All", "UK", "EU" ...) broke one character per line in Korean, Chinese and Japanese. */
html body .eur button{white-space:nowrap!important;word-break:keep-all}
/* r24c: shelf folder numbers sat flush against their labels ("01New rules"): the index is inline, so its min-width never applied. */
html body .f-idx i{display:inline-block;margin-inline-end:.5em}

/* r24j, 4 November 2026: CJK eyebrow pills ("最新新聞") and archive links ("存檔") wrapped inside a word above the news section; keep each on one line. */
html[lang^="zh"] .shead .eyebrow,html[lang^="ja"] .shead .eyebrow,html[lang^="ko"] .shead .eyebrow{white-space:nowrap;max-width:none}
.shead .arch{white-space:nowrap}

/* r24j: AI & IP guide and country guides in the editions bar (trx-topbar.js) */
nav.editions{flex-wrap:wrap;row-gap:4px}
.tb-guides{display:inline-flex;align-items:center;gap:inherit;flex-wrap:wrap;margin-inline-start:10px;padding-inline-start:12px;border-inline-start:1px solid currentColor;opacity:1}
.tb-x{white-space:nowrap}
.tb-ip{font-weight:700}
@media(max-width:480px){.tb-guides{margin-inline-start:6px;padding-inline-start:8px}}

/* r24j: make room under the billboard for the sign-up on the first screen (owner, 4 November 2026) */
.hero.bb-hero{padding:12px 0 0}
.bb-scene [class*="road"]{max-height:76px;overflow:hidden}
#trx-learn.tl-top{scroll-margin-top:96px}

/* r24l, 4 November 2026 (owner): hidden for now, not deleted */
#newsletter,#write,#pocket,a[href="#newsletter"],a[href="#write"],a[href="#pocket"]{display:none!important}
/* r24l: the Courier on white, masthead compact */
html body #npstand .np{background:#FFFFFF;color:#1C1A17;border:1px solid #D9E0E7;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:18px clamp(16px,2.4vw,30px) 16px}
html body #npstand .np-mast{padding-bottom:8px;border-bottom:2px solid #1C1A17}
html body #npstand .np-kick{letter-spacing:.12em;font-size:12.5px!important}
html body #npstand .np-mast h3{font-size:clamp(1.9rem,3.4vw,2.6rem);margin:4px 0 0;color:#1C1A17}
html body #npstand .np-ed{font-size:clamp(1.05rem,1.7vw,1.3rem);margin:6px 0 2px;gap:10px}
html body #npstand .np-ed::before,html body #npstand .np-ed::after{height:2px;flex-basis:40px}
html body #npstand .np-dateline{margin-top:6px;padding-top:6px;letter-spacing:.06em;font-size:12.5px!important;border-top-color:#D9E0E7}
html body #npstand .np-notice{margin-top:2px}
html:is([lang^="zh"],[lang^="ja"],[lang^="ko"],[lang="ar"],[lang^="hi"]) body #npstand :is(.np-kick,.np-dateline){letter-spacing:0}
html body #npstand .cc-page{box-shadow:0 10px 30px rgba(0,0,0,.18)}
/* r24l: header link to Toto-Rex's world */
nav.main a[href="#world"]{font-weight:600}

/* r24l density (owner, 4 November 2026): less empty space around section heads; the Courier index tighter */
html body :is(.newsroom-sec,.brief-sec,.apps-sec,.na-sec,.fin-sec,.tools-sec,.jobs-sec,.learn-sec,.watch-sec,.events-sec,.chess-sec,.shelf-sec,.intro-sec,.video-sec,.world-card){padding-top:36px;padding-bottom:40px}
html body .shead{margin-bottom:18px;gap:14px 18px;align-items:center}
html body .shead h2,html body .shead h2.oneline{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-top:0;line-height:1.12}
html body .shead .eyebrow{margin-bottom:2px}
html body .shead .sub{font-size:15px;max-width:40ch}
html body .shead h2+.arch,html body .shead .arch{margin-top:4px}
html body #npstand .cc-index{padding:8px 0 4px}html body #npstand .cc-ix-k{margin-bottom:4px}html body #npstand .cc-ix-p{padding:2px 0 5px;font-size:16px}html body #npstand .cc-ix-p .n{flex-basis:24px;height:24px;font-size:11.5px}html body #npstand .cc-ix-s{margin-top:3px;gap:0 10px}html body #npstand .cc-ix-s button{padding:2px 0;font-size:12.5px}
html body #npstand .cc-page{padding:18px clamp(14px,2.2vw,28px) 22px}

/* r24l: the paper is never rolled up; no roller, no fade, no empty band (owner, 4 November 2026) */
html body .np-stand .np{max-height:none!important;overflow:visible}
html body .np-stand .np-roll,html body .np-stand .np-btn{display:none!important}
html body .np-stand{padding-bottom:0}

/* r24l: the Courier in two columns from 1000 px: masthead as a left spine, the issue on the right (owner, 4 November 2026) */
@media (min-width:1000px){
html body #npstand .np:not(.cc-sheet .np){display:grid;grid-template-columns:minmax(230px,.85fr) minmax(0,2.7fr);column-gap:30px;align-items:start}
html body #npstand .np:not(.cc-sheet .np)>.np-mast{grid-column:1;grid-row:1/span 60;position:sticky;top:14px;align-self:start;text-align:start;border-bottom:0;border-inline-end:2px solid #1C1A17;padding:4px 22px 4px 0;margin:0}
html body #npstand .np:not(.cc-sheet .np)>*:not(.np-mast){grid-column:2;min-width:0}
html body #npstand .np:not(.cc-sheet .np)>.np-mast h3{font-size:clamp(1.7rem,2.3vw,2.3rem);line-height:1.05}
html body #npstand .np:not(.cc-sheet .np)>.np-mast .np-ed{justify-content:flex-start;margin:10px 0 4px}
html body #npstand .np:not(.cc-sheet .np)>.np-mast .np-ed::before{display:none}
html body #npstand .np:not(.cc-sheet .np)>.np-mast .np-ed::after{flex:0 0 36px}
html body #npstand .np:not(.cc-sheet .np)>.np-mast .np-notice{margin-inline:0;text-align:start}
html[dir="rtl"] body #npstand .np:not(.cc-sheet .np)>.np-mast{padding:4px 0 4px 22px}
}

/* r24l: no issue index above the Courier (owner, 4 November 2026); the page arrows remain */
html body #npstand .cc-index{display:none!important}

/* r24l: intro hidden (owner, 4 November 2026: it repeats the billboard copy); the "newsletter is coming soon" line is stale now that the sign-up sits beside the billboard. Hidden, not deleted. */
#intro,a[href="#intro"],.bb-hero .mini .soon-note{display:none!important}

/* r24l: world button (opens a sub-page), billboard figure anchored to the bottom, mast Newsletter button hidden (owner, 4 November 2026) */
nav.main a[href="#world"]{background:var(--trx-tape,#EFD98B);color:var(--trx-tape-ink,#1D2733)!important;border-radius:999px;padding:7px 14px;font-weight:700;line-height:1.1}nav.main a[href="#world"]:hover{filter:brightness(1.05)}
html[data-edition="uk"] body section.bb-hero .bb-face .bb-video{top:auto;bottom:0;height:auto;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%);mask-image:linear-gradient(to bottom,transparent 0%,#000 9%)}
html body .bb-pic{align-items:end;align-content:end;padding-bottom:0!important}html body .bb-pic .bb-figure{align-self:end;object-fit:contain;object-position:center bottom}
.mast-subscribe{display:none!important}

/* r24n: world and enquiry in the phone menu; the world button carries the tape colour there too */
.mnav-cta .mnav-world{background:var(--trx-tape,#EFD98B);color:var(--trx-tape-ink,#1D2733);border-color:transparent}
#trx-pb-acts .enq-btn{font-size:13px;min-height:34px}

/* r24n: phone-menu group labels (list rebuilt from the registry) */
#mnav-links .mnav-g{display:block;margin:14px 0 4px;font:700 11.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}#mnav-links .mnav-g:first-child{margin-top:4px}html:is([lang^="zh"],[lang^="ja"],[lang^="ko"],[lang="ar"],[lang^="hi"]) #mnav-links .mnav-g{letter-spacing:0;text-transform:none;font-size:13px}

/* r24o (owner, 4 November 2026): the featured word keeps its text and background, loses the framing line */
html body #npstand .np-word,html body .np .np-word,html body aside.np-word{border:0!important;box-shadow:none!important;outline:0!important}
/* r24q, 4 November 2026 (owner): a longer, lower billboard; smaller display type, less vertical padding */
html body .bb-face{min-height:clamp(250px,24vw,340px)}
html body section.bb-hero .bb-pic{min-height:clamp(200px,24vw,340px)}
html body .bb-copy{padding:clamp(20px,2.6vw,36px) clamp(22px,4.2vw,58px)}
html body .bb-hero .bb-copy .eyebrow{margin-bottom:14px}
html body .bb-hero .bb-copy h1{font-size:clamp(1.9rem,3.6vw,3rem);max-width:18ch}
html body .bb-hero .bb-copy .kick{margin-top:14px;padding-top:10px;font-size:clamp(1rem,1.2vw,1.2rem)}
@media(max-width:820px){html body section.bb-hero .bb-pic{min-height:clamp(160px,34vw,260px)}}
@media(max-width:480px){html body .bb-hero .bb-copy h1{font-size:clamp(1.7rem,7.6vw,2.1rem)}}

/* r24r (4 November 2026): at phone widths the section eyebrows, the archive links under the section heads and the billboard buttons may wrap again. The r24j one-line rules pushed the page past the viewport at 320 px (uk_eu: fr 385, ru 555, ja 363; global: ja 560, ko 368, es 327). Chinese and Japanese break between characters as their typesetting does; Korean keeps its words whole and breaks at the spaces. */
@media(max-width:600px){
html:is([lang^="zh"],[lang^="ja"],[lang^="ko"]) .shead .eyebrow,html body .shead .eyebrow{white-space:normal;max-width:100%;line-height:1.5;overflow-wrap:anywhere;word-break:normal}
html[lang^="ko"] .shead .eyebrow{word-break:keep-all;overflow-wrap:normal}
html body .shead .arch{white-space:normal;max-width:100%;overflow-wrap:anywhere}
html body .btn,html body .bb-below .ctas .btn,html body .btn.btn-ghost{white-space:normal;max-width:100%;text-align:center;line-height:1.25}
}

/* r24r (5 November 2026): the Study Corner's masthead in Scottish Gaelic ("Oisean an Ionnsachaidh Toto-Rex", kept on one line by the r24b rule) ran 9 px past a 320 px screen; on very narrow phones the logo and the name step down slightly instead. */
@media(max-width:380px){html body header.mast a.brand{gap:8px;min-width:0}html body header.mast a.brand img{width:32px;height:auto}html body header.mast a.brand .nm{font-size:.94em}}