@font-face{font-family:"KT Display";src:url(fonts/kt-display-500.bee8a1c0.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"KT Sans";src:url(fonts/kt-sans-400.3596cf9e.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"KT Sans";src:url(fonts/kt-sans-500.e080f39c.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"KT Mono";src:url(fonts/kt-mono-400.23002223.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"KT CJK";src:url(fonts/kt-cjk-400.04ea9a1e.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"KT Arabic";src:url(fonts/kt-arabic-400.b472995a.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

/* kinetren landing — styles.
 *
 * A source, not a generated file: layout is design, not content.
 * build.py prepends the @font-face block (font file names depend on their
 * hash) and copies the result to dist/assets/.
 *
 * The palette is the editor's (src/apps/kt-app/src/theme.rs): the page
 * continues the editor's chrome, which has no light theme, so there is one
 * dark theme here too and every colour is set explicitly.
 *
 * WRITING DIRECTION. The Arabic page has dir="rtl" and the browser does
 * bidi (the editor's bidi.rs layer is neither needed nor reused here). So
 * everything that can be is set with LOGICAL properties (margin-inline,
 * padding-inline, inset-inline, text-align:end), and asymmetric decorations
 * are overridden in the [dir="rtl"] block at the end.
 */

:root{
  --bg:#07080A; --deep:#040507;
  --surface:#101114; --surface-hi:#16181E; --surface-2:#1A1D24;
  --seam:#20242B; --line:#2A2E36; --line-hi:#3C434F;
  --accent:#4682EB; --accent-hi:#96BEFF; --accent-dim:#22385F;
  --violet:#7C5BD6; --red:#FF6464;
  --text:#E9EDF5; --muted:#98A1B3; --dim:#68717F;

  /* depth: a small fixed vocabulary, used everywhere */
  --edge:inset 0 1px 0 rgba(255,255,255,.055);
  --elev-1:var(--edge), 0 2px 6px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9);
  --elev-2:var(--edge), 0 4px 12px rgba(0,0,0,.55), 0 42px 90px -34px rgba(0,0,0,1);
  --elev-3:var(--edge), 0 8px 22px rgba(0,0,0,.6), 0 70px 140px -40px rgba(0,0,0,1);

  --sans:"KT Sans","KT CJK","KT Arabic",system-ui,sans-serif;
  --display:"KT Display","KT CJK","KT Arabic",system-ui,sans-serif;
  --mono:"KT Mono","KT CJK","KT Arabic",ui-monospace,monospace;

  --rail:52px; --pad:clamp(20px,4vw,56px); --col:1200px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
/* grid/flex items default to min-width:auto and do not shrink below their
   longest unbreakable token — that is what burst the column on phones */
.split>*,.grid>*,.fx>*,.road>*,.keys>*,.list>*,.stats>*{min-width:0}

html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:500}
p{margin:0}
a{color:var(--accent-hi); text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent-hi); outline-offset:3px}
/* height:auto is required: every screenshot has width/height set, and
   without it a narrowed image kept its height and got stretched */
img{max-width:100%; height:auto; display:block}

.skip{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--accent); color:#05070B; padding:12px 20px;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
}
.skip:focus{inset-inline-start:0}

/* ---------- film edge ----------------------------------------------------- */
/* The rail is part of the document, not of the viewport: it spans the whole
   page height (body is its containing block) and scrolls with the content,
   like the edge of a film strip. */
.rail{
  position:absolute; inset-inline-start:0; top:0; bottom:0; width:var(--rail); z-index:5;
  background:linear-gradient(90deg,#000, var(--deep) 60%, #0A0C10);
  border-inline-end:1px solid var(--seam); pointer-events:none;
  box-shadow:6px 0 24px rgba(0,0,0,.6);
}
.rail::before{
  content:""; position:absolute; top:0; bottom:0; inset-inline-start:17px; width:18px;
  background:repeating-linear-gradient(to bottom, #0D1015 0 22px, transparent 22px 64px);
}
.page{margin-inline-start:0; position:relative; z-index:1}
@media (min-width:1000px){ .page{margin-inline-start:var(--rail)} }
@media (max-width:999px){ .rail{display:none} }

/* The column hugs the start edge (left, or right in RTL) like a printed page;
   the free space stays on the other side. */
.wrap{max-width:var(--col); margin-inline:0 auto; padding-inline:var(--pad)}

/* ---------- header -------------------------------------------------------- */
.mast{
  position:sticky; top:0; z-index:20; background:rgba(7,8,10,.94);
  border-bottom:1px solid var(--seam);
}
.mast-in{display:flex; align-items:center; gap:14px; min-height:54px}
.mark{width:24px; height:24px; flex:none; filter:drop-shadow(0 2px 6px rgba(70,130,235,.4))}
/* the name is always lowercase: "kinetren", never transformed */
.mast-name{font-family:var(--display); font-size:20px; letter-spacing:.04em; text-transform:none}
/* the menu sits a step after the name, not pushed to the far edge */
.mast-links{margin-inline-start:clamp(28px,5vw,88px); display:flex; gap:22px}
.mast-links a{
  color:var(--muted); font-family:var(--display); font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; position:relative; padding-block:4px;
}
.mast-links a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.mast-links a:hover{color:var(--text)}
.mast-links a:hover::after{transform:scaleX(1)}
@media (max-width:900px){ .mast-links{display:none} }

/* the language switcher is a <details>, so it works without JS */
.lang{position:relative; margin-inline-start:auto}
.mast-links + .lang{margin-inline-start:0}
.lang summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line); background:var(--surface); padding:6px 12px;
  box-shadow:var(--edge);
}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:""; width:6px; height:6px; border:1px solid currentColor;
  border-block-start:0; border-inline-start:0; transform:rotate(45deg) translateY(-2px)}
.lang summary:hover{color:var(--text); border-color:var(--line-hi)}
.lang ul{
  position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:30;
  margin:0; padding:6px; list-style:none; min-width:170px;
  background:var(--surface-hi); border:1px solid var(--line); box-shadow:var(--elev-2);
}
.lang li a{
  display:block; padding:8px 12px; color:var(--muted); font-size:15px;
  border:1px solid transparent;
}
.lang li a:hover{background:var(--surface-2); color:var(--text)}
.lang li a[aria-current="true"]{color:var(--accent-hi); border-color:var(--accent-dim)}

/* ---------- background glow -----------------------------------------------
   WAS: three 52vw elements with filter:blur(90px), mix-blend-mode:screen and
   an infinite transform animation. The compositor re-blurred and re-blended
   three huge layers EVERY FRAME, forever — an open tab took 108 % CPU while
   completely idle.
   NOW: one static layer of radial gradients. A gradient is soft by itself,
   no blur is needed, nothing animates — zero cost after the first paint.  */

/* ---------- hero ---------------------------------------------------------- */
/* the glows and the tilted panel overflow the column; clip horizontally
   here so they never widen the document */
.hero{position:relative; padding-top:clamp(60px,9vw,120px); isolation:isolate; overflow-x:clip}
.hero::before{
  content:""; position:absolute; inset:-160px -10% auto -10%; height:1100px;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 42% at 16% 10%, rgba(70,130,235,.34), transparent 70%),
    radial-gradient(42% 38% at 88% 24%, rgba(124,91,214,.26), transparent 72%),
    radial-gradient(40% 34% at 54% 54%, rgba(255,100,100,.11), transparent 74%);
}
.hero>.wrap{position:relative; z-index:2}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent-hi); margin-bottom:24px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:7px; height:7px; background:var(--red); flex:none;
  box-shadow:0 0 12px 2px rgba(255,100,100,.75);
}
.hero h1{
  font-family:var(--display); font-size:clamp(2.7rem,7.4vw,6.2rem);
  line-height:.93; letter-spacing:-.018em; max-width:15ch;
  text-shadow:0 12px 60px rgba(0,0,0,.7);
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--accent-hi),#C9DCFF 45%,var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{margin-top:28px; max-width:60ch; font-size:clamp(17px,1.5vw,19.5px); color:var(--muted)}
.lede strong{color:var(--text); font-weight:400}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; align-items:center}
.btn{
  font-family:var(--display); font-size:17px; letter-spacing:.06em;
  text-transform:uppercase; padding:14px 28px; border:1px solid var(--line-hi);
  background:linear-gradient(180deg,var(--surface-2),var(--surface)); color:var(--text);
  cursor:pointer; box-shadow:var(--elev-1);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, border-color .18s, background .18s;
}
.btn:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--elev-2), 0 0 0 1px rgba(70,130,235,.35)}
.btn-primary{
  background:linear-gradient(180deg,#5A93F2,var(--accent)); border-color:#6BA0F5; color:#05070B;
  box-shadow:var(--edge), 0 8px 24px -6px rgba(70,130,235,.65), 0 2px 6px rgba(0,0,0,.5);
}
.btn-primary:hover{background:linear-gradient(180deg,#7FADFF,#5A93F2); box-shadow:var(--edge), 0 16px 40px -8px rgba(70,130,235,.8)}
.cta-note{font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.03em}

/* the ruler is the same object that sits above the tracks in the editor */
.ruler{position:relative; margin-top:clamp(48px,6vw,80px); height:34px; border-bottom:1px solid var(--line)}
.ruler-ticks{
  position:absolute; inset:auto 0 0 0; height:11px;
  background:repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 28px);
}
.ruler-ticks::after{
  content:""; position:absolute; inset:auto 0 0 0; height:20px;
  background:repeating-linear-gradient(to right, var(--line-hi) 0 1px, transparent 1px 140px);
}
.ruler-tc{
  position:absolute; top:0; font-family:var(--mono); font-size:10.5px;
  color:var(--dim); letter-spacing:.04em; padding-inline-start:3px;
}
.playhead{position:absolute; top:0; bottom:-1px; width:2px; background:var(--red);
  inset-inline-start:34%; box-shadow:0 0 14px 1px rgba(255,60,60,.7)}
.playhead::before{
  content:""; position:absolute; top:0; inset-inline-start:-5px; width:12px; height:8px;
  background:var(--red); clip-path:polygon(0 0,100% 0,50% 100%);
}

/* the hero panel stands in 3D and straightens as the page scrolls */
.stage{position:relative; perspective:2000px; perspective-origin:50% 0%; padding-bottom:clamp(46px,8vw,110px); z-index:2}
.stage-inner{
  position:relative; transform-style:preserve-3d; transform-origin:50% 0%;
  transform:rotateX(var(--rx,13deg)) rotateZ(var(--rz,-.5deg)) scale(var(--sc,.95));
}
.stage-shot{
  position:relative; border:1px solid var(--line-hi); background:var(--deep);
  box-shadow:var(--elev-3), 0 0 90px -20px rgba(70,130,235,.35);
}
.stage-shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.07), transparent 34%);
}
.stage::after{
  content:""; position:absolute; inset-inline:12%; bottom:14px; height:90px; z-index:-1;
  /* no filter:blur: the radial gradient is soft already, and a filter makes
     a separate layer under the 3D panel and keeps the compositor busy */
  background:radial-gradient(ellipse at 50% 0%, rgba(70,130,235,.34), transparent 72%);
  pointer-events:none;
}
.inset{
  position:absolute; inset-inline-start:0; bottom:-10%; width:54%;
  border:1px solid var(--line-hi); background:var(--deep);
  box-shadow:var(--elev-3); transform:translateZ(70px) rotateZ(.8deg);
}
@media (max-width:900px){ .inset{display:none} }

/* ---------- stats strip --------------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--seam); border-block:1px solid var(--seam); margin-top:clamp(24px,4vw,48px);
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:last-child:nth-child(odd){grid-column:1 / -1}
}
.stat{background:var(--bg); padding:26px 22px 28px; text-align:start; transition:background .25s;
  position:relative; cursor:default; outline:none}
.stat:hover,.stat:focus-visible{background:var(--surface)}
/* what the number counts: shown on hover and on keyboard focus (tap on touch) */
.stat .pop{
  display:none; position:absolute; z-index:30; top:100%; inset-inline-start:-1px;
  width:max(100%, 320px); max-width:min(440px, 90vw); padding:14px 16px;
  background:var(--surface-hi); border:1px solid var(--line-hi); box-shadow:var(--elev-2);
  font-size:13.5px; line-height:1.6; color:var(--muted); text-align:start;
}
.stat:hover .pop,.stat:focus .pop{display:block}
.stats .stat:last-child .pop{inset-inline-start:auto; inset-inline-end:-1px}
.stat b{
  display:block; font-family:var(--display); font-weight:500;
  font-size:clamp(2rem,4.4vw,3.2rem); line-height:1; letter-spacing:-.01em;
  background:linear-gradient(180deg,#FFF,#8FA5C4);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{
  display:block; margin-top:9px; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}

/* ---------- section frame ------------------------------------------------- */
section{padding-block:clamp(60px,7.5vw,110px); position:relative}
.slab{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(70,130,235,.08), transparent 60%),
    linear-gradient(180deg, var(--surface-hi), var(--bg) 70%);
  border-top:1px solid var(--line); box-shadow:var(--edge);
}
.slab.violet{background:radial-gradient(120% 80% at 50% -10%, rgba(124,91,214,.13), transparent 60%), linear-gradient(180deg,#171522, var(--bg) 70%)}
.slab.warm{background:radial-gradient(120% 80% at 50% -10%, rgba(255,100,100,.07), transparent 60%), linear-gradient(180deg,#1B1517, var(--bg) 70%)}

.head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px; margin-bottom:16px}
.head .tc{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  letter-spacing:.04em; flex:none; font-variant-numeric:tabular-nums;
}
.head h2{
  font-family:var(--display); font-size:clamp(1.7rem,3.6vw,2.7rem);
  letter-spacing:.01em; text-transform:uppercase; flex:0 1 auto;
  text-shadow:0 6px 30px rgba(0,0,0,.6);
}
.head .rule{
  flex:1 1 40px; min-width:24px; height:1px; transform-origin:left;
  background:linear-gradient(90deg,var(--line-hi),var(--line) 30%, transparent);
}
.standfirst{max-width:64ch; color:var(--muted); margin-bottom:44px; font-size:18px}
.standfirst strong{color:var(--text); font-weight:400}

/* ---------- cards and lists ----------------------------------------------- */
.grid{display:grid; gap:14px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .g3,.g4{grid-template-columns:1fr} }
.cell{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); box-shadow:var(--elev-1);
  padding:28px 26px 30px; position:relative; overflow:hidden;
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s;
}
.cell::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(90% 70% at 0% 0%, rgba(70,130,235,.16), transparent 62%);
  transition:opacity .28s;
}
.cell:hover{transform:translateY(-4px); box-shadow:var(--elev-2); border-color:var(--line-hi)}
.cell:hover::before{opacity:1}
.cell h3{
  font-family:var(--display); font-size:21px; letter-spacing:.03em;
  text-transform:uppercase; margin-bottom:10px; position:relative;
}
.cell p{color:var(--muted); font-size:15.5px; line-height:1.62; position:relative}

ul.list{margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--seam)}
.list li{
  list-style:none; padding-block:19px; border-bottom:1px solid var(--seam);
  display:grid; gap:5px; transition:padding-inline-start .3s cubic-bezier(.16,1,.3,1);
}
.list li:hover{padding-inline-start:10px}
.list li b{font-weight:500; font-size:16.5px}
.list li span{color:var(--muted); font-size:15.5px}

kbd{
  font-family:var(--mono); font-size:12px; color:var(--text);
  border:1px solid var(--line-hi); border-bottom-width:2px;
  background:linear-gradient(180deg,#15181E,#0A0C10);
  padding:2px 7px; letter-spacing:.03em; white-space:nowrap; box-shadow:var(--edge);
}

/* screenshots: framed, raised, never stretched beyond their own pixels */
.shot{
  max-width:min(100%, var(--nw,100%)); border:1px solid var(--line-hi);
  background:var(--deep); box-shadow:var(--elev-2); position:relative;
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}
.shot::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.05), transparent 40%)}
.shot img{width:100%}
.shot:hover{transform:translateY(-6px); box-shadow:var(--elev-3)}
.cap{font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:.03em; margin-top:12px}

/* ---------- effects ------------------------------------------------------- */
.fx{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
@media (max-width:1040px){ .fx{grid-template-columns:repeat(3,1fr)} }
@media (max-width:660px){ .fx{grid-template-columns:repeat(2,1fr)} }
.fx div{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); box-shadow:var(--elev-1);
  padding:16px 18px; position:relative; overflow:hidden;
  transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s, border-color .28s;
}
.fx div::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; opacity:.7;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.fx div:hover{transform:translateY(-4px); box-shadow:var(--elev-2); border-color:var(--line-hi)}
.fx div:hover::before{transform:scaleX(1)}
.fx h3{font-family:var(--mono); font-size:15px; letter-spacing:.02em; margin:0; text-transform:none; color:var(--accent-hi)}

.split{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,4.5vw,64px); align-items:start}
.split-rev{grid-template-columns:.9fr 1.1fr}
@media (max-width:920px){ .split,.split-rev{grid-template-columns:1fr} }
.sub{font-family:var(--display); font-size:26px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:16px}
.stack{display:grid; gap:26px; justify-items:start}

/* ---------- keyboard ------------------------------------------------------ */
.keys{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(30px,4.5vw,64px)}
@media (max-width:780px){ .keys{grid-template-columns:1fr} }
.keys div{
  display:flex; gap:16px; align-items:baseline; justify-content:space-between;
  padding-block:12px; border-bottom:1px solid var(--seam);
}
.keys .k{flex:0 1 auto; display:flex; flex-wrap:wrap; gap:5px; align-items:baseline}
.keys .k i{font-style:normal; color:var(--dim); font-family:var(--mono); font-size:11px}
.keys .a{color:var(--muted); font-size:15px; text-align:end}
.keys h3{
  grid-column:1/-1; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  padding:30px 0 8px; text-align:start;
}
.keys h3:first-child{padding-top:0}

/* ---------- roadmap ------------------------------------------------------- */
.road{display:grid; grid-template-columns:1.15fr .85fr; gap:14px; align-items:start}
@media (max-width:780px){ .road{grid-template-columns:1fr} }
.road>div{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); box-shadow:var(--elev-1); padding:32px 28px 36px;
}
.road-next{border-color:#37242A}
.road h3{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px}
.road-now h3{color:var(--accent)}
.road-next h3{color:var(--red)}
.road ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.road ul li{display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:15.5px; color:var(--muted)}
.road-next li::before{content:"\25B8"; color:var(--red); font-family:var(--mono); font-size:12px; line-height:1.7}
/* version log: the version as a timecode (26:10:24 = v26.10.24), then a summary */
.road-log{margin:0; padding:0; list-style:none; display:grid; gap:0}
.road-log li{
  display:grid; grid-template-columns:auto 1fr; gap:18px; padding-block:12px; align-items:baseline;
  border-top:1px solid var(--seam);
}
.road-log li:first-child{border-top:0; padding-top:0}
.road-log .tc{
  font-family:var(--mono); font-size:13px; color:var(--accent);
  letter-spacing:.04em; font-variant-numeric:tabular-nums; line-height:1.6;
}
.road-log p{font-size:15px; color:var(--muted); line-height:1.55}

/* ---------- install ------------------------------------------------------- */
.req{display:grid; grid-template-columns:auto 1fr; border-top:1px solid var(--seam)}
.req dt{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); padding-block:15px;
  padding-inline-end:28px; border-bottom:1px solid var(--seam); white-space:nowrap;
}
.req dd{margin:0; padding-block:15px; border-bottom:1px solid var(--seam); font-size:15.5px; color:var(--muted)}
@media (max-width:620px){
  .req{grid-template-columns:1fr}
  .req dt{padding-bottom:2px; border-bottom:none}
  .req dd{padding-top:2px}
}
pre{
  margin:0; background:linear-gradient(180deg,#0B0D11,var(--deep));
  border:1px solid var(--line); box-shadow:var(--elev-1), inset 0 0 40px rgba(0,0,0,.5);
  padding:22px 24px; overflow-x:auto; font-family:var(--mono);
  font-size:13.5px; line-height:1.9; color:var(--text);
  /* commands are always left to right, even on the Arabic page */
  direction:ltr; text-align:left;
}
pre .c{color:var(--dim)}
code{font-family:var(--mono); font-size:14px}

/* ---------- footer -------------------------------------------------------- */
footer{border-top:1px solid var(--seam); padding-block:42px; margin-top:20px; background:var(--deep)}
.foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.foot .mark{width:20px; height:20px}
.foot span{font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.04em}
.foot .sep{color:var(--seam)}
.foot a{font-family:var(--mono); font-size:12px; letter-spacing:.04em}

/* ---------- footage credits (credits.html) -------------------------------- */
a.mast-name{color:var(--text)}
.credits{padding-block:64px 96px; max-width:960px}
.credits h1{font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px}
.credits p{color:var(--muted); margin-block:18px}
.credits table{width:100%; border-collapse:collapse; margin-block:28px; font-size:15px}
.credits th,.credits td{text-align:start; padding:10px 12px; border-bottom:1px solid var(--seam); vertical-align:top}
.credits th{font-family:var(--mono); font-size:11.5px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase; font-weight:400}
@media (max-width:640px){
  .credits table,.credits tbody,.credits tr,.credits td{display:block}
  .credits thead{display:none}
  .credits tr{border-bottom:1px solid var(--seam); padding-block:10px}
  .credits td{border:0; padding:2px 0}
}

/* ---------- dispatcher page ----------------------------------------------- */
.pick{min-height:100vh; display:grid; place-items:center; padding:var(--pad)}
.pick-in{max-width:560px; text-align:center}
.pick h1{font-family:var(--display); font-size:clamp(2rem,5vw,3rem); text-transform:none; letter-spacing:.02em; margin-bottom:14px}
.pick p{color:var(--muted); margin-bottom:32px}
.pick ul{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; list-style:none; margin:0; padding:0}
.pick a{
  display:block; padding:12px 22px; border:1px solid var(--line-hi);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  color:var(--text); box-shadow:var(--elev-1); font-size:16px;
}
.pick a:hover{border-color:var(--accent); background:var(--accent-dim)}

/* ---------- motion ---------------------------------------------------------
   Nothing here may hide content on its own: a throttled tab, a blocked script
   or an engine that skips animations must still leave the page readable. The
   hidden state lives at the START of the keyframes (fill backwards), not in
   the base rule, and scroll reveals are armed only when something can
   release them (the .js class).                                           */
.js .rise{opacity:0; transform:translateY(20px)}
.js .in .rise{opacity:1; transform:none; transition:opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1)}
.js .in .rise:nth-child(2){transition-delay:.07s}
.js .in .rise:nth-child(3){transition-delay:.14s}
.js .in .rise:nth-child(4){transition-delay:.21s}
.head .rule{transform:scaleX(1)}
.js .head .rule{transform:scaleX(0)}
.js .in .head .rule{transform:scaleX(1); transition:transform 1s cubic-bezier(.16,1,.3,1)}
.hero-anim{animation:rise .9s cubic-bezier(.16,1,.3,1) backwards}
.hero-anim.d1{animation-delay:.05s} .hero-anim.d2{animation-delay:.16s}
.hero-anim.d3{animation-delay:.28s} .hero-anim.d4{animation-delay:.4s}
.hero-anim.d5{animation-delay:.55s}
@keyframes rise{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  .js .rise,.hero-anim{opacity:1; transform:none}
  .js .head .rule{transform:scaleX(1)}
  .stage-inner{transform:none}
}

/* ---------- right to left --------------------------------------------------
   The logical properties above mirror by themselves. Only what has no
   logical counterpart is here: transform-origin, gradient directions and
   decorative glows tied to physical edges.                                 */
[dir="rtl"] .head .rule{transform-origin:right; background:linear-gradient(270deg,var(--line-hi),var(--line) 30%, transparent)}
[dir="rtl"] .mast-links a::after{transform-origin:right}
[dir="rtl"] .fx div::before{transform-origin:right; background:linear-gradient(270deg,var(--accent),transparent)}
[dir="rtl"] .cell::before{background:radial-gradient(90% 70% at 100% 0%, rgba(70,130,235,.16), transparent 62%)}
[dir="rtl"] .rail{background:linear-gradient(270deg,#000, var(--deep) 60%, #0A0C10); box-shadow:-6px 0 24px rgba(0,0,0,.6)}
[dir="rtl"] .stage-shot::after{background:linear-gradient(200deg, rgba(255,255,255,.07), transparent 34%)}
[dir="rtl"] .shot::after{background:linear-gradient(205deg, rgba(255,255,255,.05), transparent 40%)}
[dir="rtl"] .inset{transform:translateZ(70px) rotateZ(-.8deg)}
[dir="rtl"] .stage-inner{transform:rotateX(var(--rx,13deg)) rotateZ(calc(var(--rz,-.5deg) * -1)) scale(var(--sc,.95))}
[dir="rtl"] .playhead::before{clip-path:polygon(0 0,100% 0,50% 100%)}
[dir="rtl"] .road li::before{content:"\2713"}
[dir="rtl"] .road-next li::before{content:"\25C2"}