/* AE League first-visit tour, drawn over the page by x-tour.js in the matchmaking screen's own dress
   (x-matchmaking.css): the same palette, type, panels, plates, radar and night rail. Every selector carries the
   tr- prefix so nothing here can meet league.css. */
html.tr-open,html.tr-open body{overflow:hidden}
.tr{--tr-red:#FA503E;--tr-green:#1DD65C;--tr-blue:#4CB1EF;--tr-gold:#c9a227;--tr-gold2:#e8c34a;--tr-ink:#eceef0;--tr-ink2:#b6bcc3;--tr-ink3:#7e878f;--tr-bg:#08090a;--tr-panel:rgba(16,18,21,.92);--tr-line:rgba(255,255,255,.1);
  --tr-fd:'Barlow Condensed','Barlow',system-ui,sans-serif;--tr-ff:'Barlow',system-ui,sans-serif;--tr-fm:'JetBrains Mono',ui-monospace,Consolas,monospace;
  position:fixed;inset:0;z-index:2000;overflow:hidden;background:var(--tr-bg);color:var(--tr-ink);font:500 16px/1.4 var(--tr-ff);-webkit-font-smoothing:antialiased;text-align:left;
  animation:tr-open .45s cubic-bezier(.2,.8,.2,1) both}
.tr.is-out{animation:tr-close .3s ease both;pointer-events:none}
.tr *{box-sizing:border-box}
.tr a{color:inherit}
.tr img{max-width:100%}

/* the ground: the slow grid, scanlines and a vignette */
.tr::before{content:'';position:absolute;inset:-48px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px;
  animation:tr-drift 26s linear infinite}
.tr::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.62) 100%)}
.tr-app{position:relative;z-index:1;height:100%;display:grid;grid-template-rows:auto 1fr auto;
  background:radial-gradient(1200px 520px at 50% -10%,rgba(201,162,39,.14),transparent 70%)}

/* ---- top bar ---- */
.tr-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px 24px;border-bottom:1px solid var(--tr-line);background:rgba(8,9,10,.72)}
.tr-brand{display:inline-flex;align-items:center;gap:12px;justify-self:start}
.tr-brand img{width:28px;height:28px;object-fit:contain}
.tr-brand b{font:800 20px/1 var(--tr-fd);letter-spacing:.08em;white-space:nowrap}
.tr-brand i{font:700 12px/1 var(--tr-fd);font-style:normal;letter-spacing:.28em;color:var(--tr-gold2);padding-left:12px;border-left:1px solid var(--tr-line);white-space:nowrap}
.tr-mid{display:flex;align-items:center;gap:12px}
.tr-ph{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(201,162,39,.5);border-radius:2px;font:700 11px/1 var(--tr-fd);letter-spacing:.2em;color:var(--tr-gold2);white-space:nowrap}
.tr-ph i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:tr-pulse 1.4s infinite}
.tr-no{font:500 13px/1 var(--tr-fm);color:var(--tr-ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-no b{color:var(--tr-gold2);font-weight:500}
.tr-tools{display:flex;align-items:center;gap:12px;justify-self:end}
.tr-chip{display:inline-flex;align-items:center;padding:8px 10px;border:1px solid var(--tr-line);border-radius:2px;background:transparent;color:var(--tr-ink2);font:700 11px/1 var(--tr-fd);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.tr-chip:hover,.tr-chip:focus-visible{border-color:var(--tr-gold2);color:var(--tr-gold2);outline:none}

/* ---- the stage ---- */
.tr-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:24px;overflow:auto}
.tr-scene{width:100%;max-width:1180px;margin:auto;display:grid;grid-template-columns:minmax(260px,440px) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,72px)}
.tr-scene.is-wide{grid-template-columns:minmax(0,1fr)}
.tr-kicker{display:block;font:700 13px/1.2 var(--tr-fd);letter-spacing:.28em;text-transform:uppercase;color:var(--tr-gold2)}
.tr-title{margin:12px 0 0;font:800 clamp(38px,5.6vw,80px)/.92 var(--tr-fd);letter-spacing:.01em;text-transform:uppercase}
.tr-sub{margin:16px 0 0;max-width:60ch;color:var(--tr-ink2);font-size:17px}
.tr-sub b{color:var(--tr-ink);font-weight:600}
.tr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.tr-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1px solid var(--tr-line);border-radius:4px;background:rgba(255,255,255,.04);color:var(--tr-ink);font:700 13px/1 var(--tr-fd);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap}
.tr-btn:hover,.tr-btn:focus-visible{border-color:var(--tr-gold2);color:var(--tr-gold2);outline:none}
.tr-btn.is-gold{background:var(--tr-gold);border-color:var(--tr-gold);color:#0a0b09}
.tr-btn.is-gold:hover,.tr-btn.is-gold:focus-visible{background:var(--tr-gold2);border-color:var(--tr-gold2);color:#0a0b09}
.tr-btn svg{flex:none}
.tr-btn[hidden]{display:none}
.tr-acts .tr-sp{flex:1}

/* stat cells */
.tr-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;max-width:640px}
.tr-cells.is-3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.tr-cell{padding:14px 16px;background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:6px;min-width:0}
.tr-cell>span{display:block;font:700 11px/1 var(--tr-fd);letter-spacing:.22em;text-transform:uppercase;color:var(--tr-ink3)}
.tr-cell>b{display:block;margin-top:8px;font:500 28px/1.05 var(--tr-fm);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-cell>b.tr-t{font:700 24px/1.15 var(--tr-fd);letter-spacing:.02em;text-transform:uppercase}
.tr-cell>b small{font-size:.55em;color:var(--tr-ink3);letter-spacing:0}
.tr-cell>i{display:block;margin-top:6px;font:500 12px/1.3 var(--tr-fm);font-style:normal;color:var(--tr-ink3)}
.tr-cell.is-go{border-color:rgba(201,162,39,.65);box-shadow:0 0 32px rgba(201,162,39,.12)}
.tr-cell.is-go>b{color:var(--tr-gold2)}

/* ---- welcome: the three factions as plates ---- */
.tr-sides{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tr-side{--tr-c:var(--tr-ink3);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;min-height:clamp(200px,32vh,320px);padding:16px 10px 18px;border-radius:6px;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tr-c) 26%,transparent),rgba(12,14,16,.94) 66%);border:1px solid color-mix(in srgb,var(--tr-c) 42%,transparent);border-top:4px solid var(--tr-c)}
.tr-side::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 14px)}
.tr-side img{position:relative;width:clamp(56px,7vw,96px);height:auto;margin:auto 0}
.tr-side span{position:relative;font:700 12px/1.2 var(--tr-fd);letter-spacing:.2em;color:var(--tr-c)}
.tr-side b{position:relative;display:block;font:800 clamp(18px,2vw,26px)/1 var(--tr-fd);text-transform:uppercase}
.tr-red{--tr-c:var(--tr-red)}.tr-green{--tr-c:var(--tr-green)}.tr-blue{--tr-c:var(--tr-blue)}
.tr-vs{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font:700 12px/1 var(--tr-fd);letter-spacing:.24em;text-transform:uppercase;color:var(--tr-ink3)}
/* the V sits dead centre: no letter spacing from the row, and a lift for the condensed face's low cap height */
.tr-vs b{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding-bottom:.08em;border-radius:50%;border:2px solid var(--tr-gold2);color:var(--tr-gold2);font:800 18px/1 var(--tr-fd);letter-spacing:0;box-shadow:0 0 24px rgba(201,162,39,.35)}

/* ---- Steam: the account card the referee locks ---- */
.tr-id{position:relative;padding:20px;background:var(--tr-panel);border:1px solid var(--tr-line);border-left:3px solid var(--tr-gold);border-radius:6px;overflow:hidden}
.tr-id::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px)}
.tr-id-h{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 11px/1 var(--tr-fd);letter-spacing:.22em;text-transform:uppercase;color:var(--tr-ink3)}
.tr-id-h svg{color:var(--tr-ink2)}
.tr-id-p{position:relative;display:flex;align-items:center;gap:14px;margin-top:18px}
.tr-id-p img{width:56px;height:56px;padding:10px;border:1px solid var(--tr-line);border-radius:6px;background:rgba(255,255,255,.04);object-fit:contain;opacity:.85}
.tr-id-p b{display:block;font:800 26px/1 var(--tr-fd);text-transform:uppercase}
.tr-id-p i{display:block;margin-top:6px;font:500 13px/1 var(--tr-fm);font-style:normal;color:var(--tr-ink2);letter-spacing:.04em}
.tr-id-rows{position:relative;display:grid;gap:8px;margin-top:18px}
.tr-id-rows div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--tr-line);border-radius:4px;background:rgba(8,9,10,.5);font:500 12px/1.2 var(--tr-fm);color:var(--tr-ink3)}
.tr-id-rows em{font-style:normal;font:700 11px/1 var(--tr-fd);letter-spacing:.2em;text-transform:uppercase;color:var(--tr-gold2)}
.tr-lock{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 12px;border-radius:2px;background:var(--tr-gold2);color:#0a0b09;font:800 12px/1 var(--tr-fd);letter-spacing:.2em;text-transform:uppercase}

/* ---- your way in: three plates ---- */
.tr-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.tr-way{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-width:0;padding:18px 18px 20px;border-radius:6px;
  background:linear-gradient(180deg,rgba(201,162,39,.14),rgba(12,14,16,.94) 58%);border:1px solid rgba(201,162,39,.32);border-top:4px solid var(--tr-gold)}
.tr-way::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 14px)}
.tr-way>*{position:relative}
.tr-way-n{display:flex;align-items:center;justify-content:space-between;gap:8px;font:500 13px/1 var(--tr-fm);color:var(--tr-gold2)}
.tr-way-n em{font:700 11px/1 var(--tr-fd);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--tr-ink3)}
.tr-way h3{margin:6px 0 0;font:800 clamp(26px,2.8vw,38px)/1 var(--tr-fd);text-transform:uppercase}
.tr-way p{margin:0;color:var(--tr-ink2);font-size:15px;flex:1}
.tr-way .tr-btn{align-self:flex-start;margin-top:8px}

/* ---- game night: the night rail, one per night ---- */
.tr-nights{display:grid;gap:14px}
.tr-night{padding:16px 18px 18px;background:var(--tr-panel);border:1px solid var(--tr-line);border-left:3px solid var(--tr-gold);border-radius:6px}
.tr-night-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font:800 22px/1 var(--tr-fd);letter-spacing:.06em;text-transform:uppercase}
.tr-night-h i{font:700 11px/1 var(--tr-fd);font-style:normal;letter-spacing:.22em;color:var(--tr-ink3)}
.tr-night ol{display:flex;list-style:none;margin:18px 0 0;padding:0}
.tr-night li{position:relative;flex:1;min-width:0;padding:12px 10px 0 0;border-top:2px solid rgba(201,162,39,.55)}
.tr-night li::before{content:'';position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--tr-gold);border:2px solid var(--tr-gold)}
.tr-night li:last-child{border-top-color:transparent}
.tr-night li.is-key::before{background:var(--tr-bg);border-color:var(--tr-gold2);animation:tr-pulse 1.4s infinite}
.tr-night li b{display:block;font:500 17px/1 var(--tr-fm);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-night li.is-key b{color:var(--tr-gold2)}
.tr-night li span{display:block;margin-top:6px;font:600 11px/1.25 var(--tr-fd);letter-spacing:.12em;text-transform:uppercase;color:var(--tr-ink3)}

/* ---- the draw: the radar and MATCH FOUND ---- */
.tr-radar{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:1;border-radius:50%;border:1px solid rgba(201,162,39,.45);overflow:hidden;
  background:linear-gradient(rgba(201,162,39,.16),rgba(201,162,39,.16)) 50% 0/1px 100% no-repeat,linear-gradient(rgba(201,162,39,.16),rgba(201,162,39,.16)) 0 50%/100% 1px no-repeat,
  radial-gradient(circle closest-side,transparent 0 32.6%,rgba(201,162,39,.2) 32.6% 33.2%,transparent 33.2% 65.9%,rgba(201,162,39,.2) 65.9% 66.5%,transparent 66.5%),
  radial-gradient(circle closest-side,rgba(201,162,39,.1),rgba(8,9,10,.92))}
.tr-radar::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 76%,rgba(232,195,74,.04) 80%,rgba(232,195,74,.5) 100%);animation:tr-sweep 4s linear infinite}
.tr-radar::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--tr-gold2);box-shadow:0 0 16px var(--tr-gold2)}
.tr-blip{position:absolute;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--tr-gold2);opacity:.28;animation:tr-ping 4s linear infinite;animation-delay:calc(var(--tr-a) * 4s - 4s)}
.tr-blip i{position:absolute;left:12px;top:-3px;font:500 10px/1 var(--tr-fm);font-style:normal;color:var(--tr-ink2);white-space:nowrap}
.tr-blip.is-mine{width:12px;height:12px;margin:-6px;background:#fff;opacity:1;animation:none;box-shadow:0 0 0 3px rgba(232,195,74,.5),0 0 22px #fff}
.tr-blip.is-mine i{left:16px;top:0;color:#fff;font-weight:700}
.tr-found{position:absolute;left:0;right:0;bottom:12%;z-index:2;text-align:center;pointer-events:none}
.tr-found b{display:inline-block;padding:8px 14px;background:rgba(8,9,10,.86);border:1px solid rgba(232,195,74,.6);border-radius:2px;font:800 clamp(24px,3vw,34px)/1 var(--tr-fd);letter-spacing:.06em;color:var(--tr-ink);text-shadow:0 0 40px rgba(232,195,74,.5);animation:tr-slam .5s 1.1s cubic-bezier(.2,1.5,.3,1) both}

/* ---- the wave: three groups into one final ---- */
.tr-wave{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:center;gap:8px}
.tr-groups{display:grid;gap:8px}
.tr-g{background:var(--tr-panel);border:1px solid var(--tr-line);border-radius:6px;overflow:hidden}
.tr-g-h{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font:700 10px/1 var(--tr-fd);letter-spacing:.2em;text-transform:uppercase;color:var(--tr-ink3)}
.tr-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;border-top:1px solid var(--tr-line);border-left:3px solid var(--tr-c,var(--tr-ink3));font:700 14px/1.1 var(--tr-fd);text-transform:uppercase;color:var(--tr-ink2)}
.tr-row em{font:500 11px/1 var(--tr-fm);font-style:normal;color:var(--tr-ink3)}
.tr-row.is-win{color:var(--tr-ink)}
.tr-row.is-win em{color:var(--tr-gold2)}
.tr-arrow{position:relative;height:70%;border:2px solid rgba(201,162,39,.45);border-left:0;border-radius:0 6px 6px 0}
.tr-arrow::after{content:'';position:absolute;right:-9px;top:50%;margin-top:-6px;border:6px solid transparent;border-left:8px solid var(--tr-gold2)}
.tr-final{position:relative;overflow:hidden;padding:0 0 12px;background:linear-gradient(180deg,rgba(201,162,39,.2),rgba(12,14,16,.94) 70%);border:1px solid rgba(232,195,74,.6);border-top:4px solid var(--tr-gold2);border-radius:6px;box-shadow:0 0 44px rgba(201,162,39,.16)}
.tr-final .tr-g-h{color:var(--tr-gold2)}
.tr-won{margin:12px 10px 0;padding:8px;border-radius:2px;background:var(--tr-gold2);color:#0a0b09;text-align:center;font:800 13px/1 var(--tr-fd);letter-spacing:.24em;animation:tr-stamp .5s .9s cubic-bezier(.2,1.5,.3,1) both}

/* ---- the steps along the bottom ---- */
.tr-rail{display:flex;align-items:flex-start;gap:24px;padding:14px 24px 12px;border-top:1px solid var(--tr-line);background:rgba(8,9,10,.72);overflow-x:auto}
.tr-rail-l{flex:none;padding-top:2px;font:700 12px/1.2 var(--tr-fd);letter-spacing:.22em;color:var(--tr-gold2)}
.tr-rail-l i{display:block;margin-top:4px;font-size:10px;font-style:normal;letter-spacing:.14em;color:var(--tr-ink3)}
.tr-rail ol{flex:1;display:flex;list-style:none;margin:6px 0 0;padding:0}
.tr-rail li{flex:1;min-width:112px}
.tr-rail button{position:relative;display:block;width:100%;padding:12px 12px 0 0;border:0;border-top:2px solid var(--tr-line);background:none;color:inherit;text-align:left;cursor:pointer}
.tr-rail button::before{content:'';position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--tr-bg);border:2px solid var(--tr-ink3)}
.tr-rail b{display:block;font:500 15px/1 var(--tr-fm);font-variant-numeric:tabular-nums;color:var(--tr-ink3)}
.tr-rail span{display:block;margin-top:5px;font:600 11px/1.2 var(--tr-fd);letter-spacing:.12em;text-transform:uppercase;color:var(--tr-ink3)}
.tr-rail .is-done button{border-top-color:rgba(201,162,39,.55)}
.tr-rail .is-done button::before{background:var(--tr-gold);border-color:var(--tr-gold)}
.tr-rail .is-on button{border-top-color:var(--tr-gold2)}
.tr-rail .is-on button::before{border-color:var(--tr-gold2);animation:tr-pulse 1.4s infinite}
.tr-rail .is-on b,.tr-rail .is-on span{color:var(--tr-gold2)}
.tr-rail button:hover span,.tr-rail button:focus-visible span{color:var(--tr-ink)}
.tr-rail button:focus-visible{outline:none}

/* ---- arriving on a step ---- */
.tr-in .tr-kicker{animation:tr-fade .4s both}
.tr-in .tr-title{animation:tr-up .5s .05s cubic-bezier(.2,.8,.2,1) both}
.tr-in .tr-sub{animation:tr-fade .5s .2s both}
.tr-in .tr-cells,.tr-in .tr-acts{animation:tr-up .5s .3s cubic-bezier(.2,.8,.2,1) both}
.tr-in .tr-side{animation:tr-up .55s cubic-bezier(.2,.8,.2,1) both}
.tr-in .tr-side:nth-child(2){animation-delay:.08s}.tr-in .tr-side:nth-child(3){animation-delay:.16s}
.tr-in .tr-vs b{animation:tr-stamp .5s .45s cubic-bezier(.2,1.5,.3,1) both}
.tr-in .tr-id,.tr-in .tr-night{animation:tr-up .55s .1s cubic-bezier(.2,.8,.2,1) both}
.tr-in .tr-night+.tr-night{animation-delay:.2s}
.tr-in .tr-lock{animation:tr-stamp .5s .55s cubic-bezier(.2,1.5,.3,1) both}
.tr-in .tr-way{animation:tr-up .5s .15s cubic-bezier(.2,.8,.2,1) both}
.tr-in .tr-way:nth-child(2){animation-delay:.23s}.tr-in .tr-way:nth-child(3){animation-delay:.31s}
.tr-in .tr-radar{animation:tr-zoom .6s cubic-bezier(.2,.8,.2,1) both}
.tr-in .tr-g{animation:tr-left .5s cubic-bezier(.2,.8,.2,1) both}
.tr-in .tr-g:nth-child(2){animation-delay:.08s}.tr-in .tr-g:nth-child(3){animation-delay:.16s}
.tr-in .tr-final{animation:tr-right .55s .35s cubic-bezier(.2,.8,.2,1) both}

@keyframes tr-open{from{opacity:0}}
@keyframes tr-close{to{opacity:0;transform:scale(1.02)}}
@keyframes tr-drift{to{transform:translate3d(48px,48px,0)}}
@keyframes tr-pulse{0%{box-shadow:0 0 0 0 rgba(232,195,74,.55)}70%{box-shadow:0 0 0 8px rgba(232,195,74,0)}100%{box-shadow:0 0 0 0 rgba(232,195,74,0)}}
@keyframes tr-sweep{to{transform:rotate(360deg)}}
@keyframes tr-ping{0%{opacity:1;box-shadow:0 0 0 0 rgba(232,195,74,.7),0 0 14px var(--tr-gold2)}22%{opacity:.6;box-shadow:0 0 0 10px rgba(232,195,74,0),0 0 0 transparent}100%{opacity:.28;box-shadow:none}}
@keyframes tr-fade{from{opacity:0}}
@keyframes tr-up{from{opacity:0;transform:translateY(18px)}}
@keyframes tr-left{from{opacity:0;transform:translateX(-40px)}}
@keyframes tr-right{from{opacity:0;transform:translateX(40px)}}
@keyframes tr-zoom{from{opacity:0;transform:scale(.86)}}
@keyframes tr-stamp{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:none}}
@keyframes tr-slam{from{opacity:0;transform:scale(1.7);letter-spacing:.2em}}

/* ---- short screens: keep a step on one screen ---- */
@media (max-height:760px) and (min-width:861px){
  .tr-stage{padding:16px 24px}
  .tr-title{font-size:clamp(34px,4.6vw,64px)}
  .tr-side{min-height:clamp(170px,28vh,260px)}
  .tr-cells,.tr-ways{margin-top:16px}
  .tr-acts{margin-top:18px}
}

/* ---- small screens: the step scrolls and the parts stack ---- */
@media (max-width:860px){
  .tr-top{grid-template-columns:1fr auto;padding:10px 16px}
  .tr-mid{display:none}
  .tr-brand i{display:none}
  .tr-stage{padding:20px 16px;align-items:flex-start}
  .tr-scene{grid-template-columns:minmax(0,1fr);gap:22px}
  .tr-vis{order:2}
  .tr-ways{grid-template-columns:minmax(0,1fr)}
  .tr-cells.is-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr-cells.is-3 .tr-cell:last-child{grid-column:1/-1}
  .tr-side{min-height:150px;padding:12px 6px 14px}
  .tr-radar{max-width:250px}
  .tr-rail{padding:12px 16px;gap:16px}
  .tr-rail-l{display:none}
  .tr-rail li{min-width:84px}
  .tr-acts .tr-sp{display:none}
}

/* ---- for anyone who has asked their system for less motion ---- */
@media (prefers-reduced-motion:reduce){
  .tr,.tr::before,.tr-radar::before{animation:none}
  .tr *,.tr *::before,.tr *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .tr-blip{opacity:.7}
}