/* Murasil site: design tokens, reset, type, chrome and the film stage.
   The rules every scene follows are in CONTRACT.md. Scene files only add
   rules under their own #s-<id>. */

/* ---- Fonts: self-hosted subsets, see fonts/OFL.txt ---- */
@font-face{font-family:"Murasil Display";src:url(fonts/display.woff2) format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
@font-face{font-family:"Murasil Stamp";src:url(fonts/stamp.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Murasil Text";src:url(fonts/text-lat.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0020-02FF,U+2000-200B,U+2010-206F,U+20AC,U+2190-2193}
/* Arabic is its own family on purpose: a family mixing "400 700" with "400" makes Chromium
   pick the Latin range for Arabic text, which then falls through to the system font. */
@font-face{font-family:"Murasil Text Arabic";src:url(fonts/text-ar-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Murasil Text Arabic";src:url(fonts/text-ar-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Murasil Mono";src:url(fonts/mono-400.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* ---- Tokens ---- */
:root{
  /* The world is monochrome. Signal is the message and nothing else. */
  --ink:#0C0B09;
  --graphite:#1C1A17;
  --ash-dark:#8F897D;
  --ash-light:#5C574E;
  --bone:#D8D0C0;
  --paper:#F2ECDF;
  --paper-2:#E7E0D1;
  --signal:#E43E14;

  --font-display:"Murasil Display",system-ui,sans-serif;
  --font-text:"Murasil Text","Murasil Text Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Murasil Mono","Murasil Text Arabic",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-stamp:"Murasil Stamp","Murasil Mono",monospace;

  /* One bar for both scripts: Alexandria 700's kashida and Latin l stem. */
  --bar:.1779em;

  /* The caps are in rem and the root grows past 1920 by 1080 (see Reset), so a 27-inch screen keeps
     the hierarchy of a laptop instead of tiny type on a black void. */
  --fs-mark:clamp(5rem,min(15.2vw,27svh),18.25rem);
  --fs-display:clamp(2.5rem,min(6vw,11svh),7.25rem);
  --fs-h2:clamp(2rem,min(4.4vw,8.4svh),5.25rem);
  --fs-h3:clamp(1.25rem,min(2vw,3.8svh),2.375rem);
  --fs-lead:clamp(1.0625rem,min(1.45vw,2.8svh),1.75rem);
  --fs-body:clamp(1rem,min(1.2vw,2.4svh),1.4375rem);
  --fs-small:clamp(.875rem,.76vw,1rem);
  --fs-mono:clamp(.6875rem,.86vw,.9375rem);
  --fs-row:clamp(.75rem,.72vw,.875rem);
  --lh-body:1.55;
  --lh-head:1.1;

  --gutter:clamp(16px,3vw,3.5rem);
  --hdr-h:4.25rem;
  --row-h:clamp(3.375rem,6svh,4.25rem);
  --rail-h:1.25rem;
  --chrome-b:calc(var(--row-h) + var(--rail-h));
  --foot-h:1.75rem;
  --thread-clear:0px;
  --measure:34em;

  --ease-draw:cubic-bezier(.16,1,.3,1);
  --ease-stamp:cubic-bezier(.64,0,.78,0);
  --ease-swift:cubic-bezier(.2,.7,.2,1);

  --z-scene:1;
  --z-thread:20;
  --z-row:30;
  --z-veil:45;
  --z-hdr:50;
}
[data-ground=ink]{
  --bg:var(--ink);
  --raised:var(--graphite);
  --fg:var(--bone);
  --fg-strong:var(--paper);
  --fg-2:var(--ash-dark);
  --hairline:rgba(216,208,192,.18);
  --hairline-strong:rgba(216,208,192,.42);
}
[data-ground=paper]{
  --bg:var(--paper);
  --raised:var(--paper-2);
  --fg:var(--ink);
  --fg-strong:var(--ink);
  --fg-2:var(--ash-light);
  --hairline:rgba(12,11,9,.16);
  --hairline-strong:rgba(12,11,9,.4);
}
@media (max-aspect-ratio:9/10){
  /* The thread runs down the reading end at 5.5vw, so the text column stops short of it. */
  :root{--hdr-h:58px;--row-h:34px;--rail-h:14px;--thread-clear:calc(5.5vw + 20px - var(--gutter))}
}
@media (max-height:520px){
  :root{--hdr-h:48px;--row-h:0px;--rail-h:10px}
}

/* A browser without svh takes the calm page (see the head script). Its tokens stay sane here. */
@supports not (height:1svh){
  :root{
    --fs-mark:clamp(5rem,min(15.2vw,27vh),18.25rem);
    --fs-display:clamp(2.5rem,min(6vw,11vh),7.25rem);
    --fs-h2:clamp(2rem,min(4.4vw,8.4vh),5.25rem);
    --fs-h3:clamp(1.25rem,min(2vw,3.8vh),2.375rem);
    --fs-lead:clamp(1.0625rem,min(1.45vw,2.8vh),1.75rem);
    --fs-body:clamp(1rem,min(1.2vw,2.4vh),1.4375rem);
  }
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);scroll-behavior:auto;font-size:max(100%,min(.8334vw,1.482svh))}
html,body{overflow-x:clip}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--fg);font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg,canvas{display:block;max-inline-size:100%}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--fg-strong);outline-offset:3px}

/* ---- Type ---- */
html[lang=ar] body{line-height:1.75}
html[lang=ar]{--lh-head:1.24}
.t-mark,.t-display,.t-h2,.t-h3{font-family:var(--font-display);font-weight:700;color:var(--fg-strong);line-height:var(--lh-head)}
.t-mark{font-size:var(--fs-mark);line-height:1}
.t-display{font-size:var(--fs-display);text-wrap:balance}
.t-h2{font-size:var(--fs-h2);text-wrap:balance}
.t-h3{font-size:var(--fs-h3);text-wrap:balance}
.t-lead{font-size:var(--fs-lead);max-inline-size:var(--measure);text-wrap:pretty}
.t-body{font-size:var(--fs-body);max-inline-size:var(--measure);text-wrap:pretty}
.t-small{font-size:var(--fs-small);color:var(--fg-2)}
.t-stamp{font-family:var(--font-stamp);font-weight:700;line-height:.9;font-variation-settings:"ELGR" 2,"ELSH" 8}
.t-mono,.t-hex{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.6;direction:ltr;unicode-bidi:isolate}
.t-hex{color:var(--fg-2);word-spacing:.05em}
.t-label{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--fg-2);direction:ltr;unicode-bidi:isolate}
html[lang=ar] .t-hide-ar,html[lang=en] .t-hide-en{display:none}
bdi{unicode-bidi:isolate}
html[lang=ar] bdi{white-space:nowrap}
.vh{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Components ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-block-size:44px;padding:.5em 1.15em;border:1.5px solid currentColor;background:transparent;color:var(--fg-strong);font-family:var(--font-text);font-weight:600;font-size:.9375rem;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .16s linear,color .16s linear,border-color .16s linear}
.btn:hover,.btn:focus-visible{background:var(--fg-strong);border-color:var(--fg-strong);color:var(--bg)}
.btn--signal{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn--signal:hover,.btn--signal:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--plain{border-color:transparent;padding-inline:0;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.btn--plain:hover,.btn--plain:focus-visible{background:none;border-color:transparent;color:var(--fg-strong);text-decoration-thickness:2px}

/* The wordmark: letters, one bar, letters. The bar is the same stroke as Alexandria's kashida at
   weight 700, so the join is seamless. The pieces come from core.mark.a and core.mark.b, which use
   U+0640 and not ZWJ: the font has no ZWJ glyph and CoreText breaks the run at one. */
.mark{display:flex;align-items:baseline;font-family:var(--font-display);font-weight:700;font-size:var(--fs-mark);line-height:1;color:var(--fg);white-space:nowrap}
.mark__bar{flex:1;min-inline-size:0;block-size:var(--bar);margin-inline:-.02em;background:var(--signal)}
html[lang=en] .mark__bar{margin-inline:-.055em}

/* Where a figure comes from. WIRE: real bytes. SIM: sample data. TEST: the labelled internal report. */
.src{display:inline-flex;align-items:baseline;gap:.6em;font-size:var(--fs-small);color:var(--fg-2)}
.tag{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.04em;padding:.05em .4em;border:1px solid var(--hairline-strong);color:var(--fg);direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* Capability status in SMPP's own words. Never coloured: the word carries the state. */
.stat{display:inline-flex;align-items:baseline;gap:0;font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--fg);direction:ltr;unicode-bidi:isolate}
.stat::before{content:"stat:";color:var(--fg-2)}
/* What runs today, before the film has earned the word DELIVRD. It is not a status yet, so no prefix. */
.stat--w{padding-inline:.4em;border:1px solid var(--hairline-strong)}
.stat--w::before{content:none}
html[lang=ar] .stat--w{direction:rtl;font-family:var(--font-text)}

/* Every headline fits one SMS. Said once, in the hero, and once more beside the word it is all for.
   core.js fills this from the heading named in data-for. */
.smsc{display:none}
#s-hero .smsc,#s-delivered .smsc{display:block}
html[lang=ar] #s-hero .smsc{font-family:var(--font-text);font-size:.75rem}
.smsc{align-self:flex-start;font-family:var(--font-mono);font-size:.6875rem;color:var(--fg-2);direction:ltr;unicode-bidi:isolate;white-space:nowrap}

/* ---- Header ---- */
.hdr{position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-hdr);block-size:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:var(--gutter);color:var(--fg-strong);pointer-events:none;transition:color .24s linear}
.hdr>*{pointer-events:auto}
.logo{--logo-w:1.7em;display:inline-block;font-family:var(--font-display);font-weight:700;font-size:1.3125rem;line-height:1;color:var(--fg-strong);text-decoration:none;white-space:nowrap}
.logo__bar{display:none;inline-size:var(--logo-w);block-size:var(--bar);margin-inline:-.02em;background:currentColor;position:relative;overflow:hidden;vertical-align:baseline}
html.film .logo__bar{display:inline-block}
html[lang=en] .logo{--logo-w:1.2em}
html[lang=en] .logo__bar{margin-inline:-.055em}
.logo__bar::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(var(--logo-p,0));transform-origin:0 50%}
html[dir=rtl] .logo__bar::after{transform-origin:100% 50%}
html.is-drained .logo__bar::after{background:currentColor}
.hdr__ctl{display:flex;align-items:center;gap:clamp(6px,1.2vw,18px)}
.hdr__lang,.hdr__motion{display:inline-flex;align-items:center;gap:.5em;min-block-size:44px;padding-inline:.35em;color:var(--fg-2);font-family:var(--font-mono);font-size:.75rem;white-space:nowrap;transition:color .16s linear}
.hdr__motion{font-family:var(--font-text);font-size:.8125rem}
.hdr__lang:hover,.hdr__motion:hover,.hdr__lang:focus-visible,.hdr__motion:focus-visible{color:var(--fg-strong);text-decoration:underline;text-underline-offset:.3em}
.hdr__lang-name{font-family:var(--font-text);font-weight:600;font-size:.875rem;color:var(--fg-strong)}
.hdr__lang-name:lang(ar){font-size:.9375rem}
.hdr__motion svg{inline-size:14px;block-size:14px;fill:currentColor;flex:none}
/* For buyers who want the facts: on wide screens the way to the summary and the way to an account
   stay in view. On phones the same two links sit under the hero's buttons. */
.hdr__skip{display:none;align-items:center;min-block-size:44px;padding-inline:.35em;color:var(--fg-2);font-size:.8125rem;text-decoration:none;white-space:nowrap;transition:color .16s linear}
.hdr__skip:hover,.hdr__skip:focus-visible{color:var(--fg-strong);text-decoration:underline;text-underline-offset:.3em}
@media (min-width:1180px){.hdr__skip{display:inline-flex}}
@media (min-width:900px){.hdr__apply{display:inline-flex}}
html.at-last .hdr__skip--sum{visibility:hidden}
html:not(.js) .hdr__lang,html:not(.js) .hdr__motion,html.system-reduced .hdr__motion{display:none}
.hdr__cta{min-block-size:44px;padding-inline:1em;background:var(--bg)}
.logo{padding-block:.75em;margin-block:-.75em}
@media (max-width:760px){
  .logo{--logo-w:1.25em;font-size:1.1875rem}
  .hdr__lang-wire,.hdr__motion span{display:none}
  .hdr__motion{min-inline-size:44px;justify-content:center}
  .hdr__lang{min-inline-size:44px;justify-content:center}
  .hdr__cta{font-size:.875rem;padding-inline:.8em}
}
@media (max-width:359px){
  .hdr__motion{display:none}
}
html:not(.film) .hdr{background:var(--ink);border-block-end:1px solid var(--hairline)}
@media (max-aspect-ratio:9/10){
  html.film .hdr{background:var(--bg);transition:color .24s linear,background-color .24s linear}
  /* The flash is full screen: no grey band above it while the ground turns. */
  html.film.is-flood .hdr{background:transparent;transition:none}
}

.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:60;padding:.6em 1em;background:var(--paper);color:var(--ink);text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

/* ---- Film: the default rules are the dossier, which is also the no-JS page ---- */
#vh-probe{position:fixed;inset-block-start:0;inset-inline-start:0;inline-size:0;block-size:100svh;visibility:hidden;pointer-events:none}
#stage{position:relative}
.scene{position:relative;min-block-size:100svh;background:var(--bg);color:var(--fg);overflow:clip;isolation:isolate}
.frame{position:relative;min-block-size:100svh;padding-block:calc(var(--hdr-h) + clamp(24px,6svh,64px)) clamp(32px,8svh,72px);padding-inline:var(--gutter);display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.4svh,24px)}
#thread,#row,#rail,#veil{display:none}
/* The calm page is a document: sections take the height of what they say. */
html:not(.film) .scene:not(#s-hero){min-block-size:0}
html:not(.film) .scene:not(#s-hero) .frame{min-block-size:0;justify-content:flex-start;padding-block:clamp(40px,7svh,64px)}

html.film #film{position:relative;block-size:var(--film-h,100svh)}
html.film #stage{position:sticky;inset-block-start:0;block-size:100svh;overflow:clip;background:var(--bg);contain:layout paint}
html.film .scene{position:absolute;inset:0;min-block-size:0;z-index:var(--z-scene);opacity:0;pointer-events:none;contain:layout paint style}
html.film .scene.is-on{opacity:1;pointer-events:auto}
/* Scenes stack, so a control in one that is off stage must not take taps meant for the one on it. */
html.film .scene:not(.is-on) *{pointer-events:none!important}
html.film:not(.ready) .scene:first-of-type{pointer-events:auto}
html.film .scene.is-next{z-index:calc(var(--z-scene) + 1)}
html.film:not(.ready) .scene:first-of-type{opacity:1}
html.film:not(.ready) .scene:first-of-type *{pointer-events:auto!important}
html.film .frame{position:absolute;inset-block:var(--hdr-h) var(--chrome-b);inset-inline:var(--gutter);min-block-size:0;padding:0;padding-inline-end:var(--thread-clear)}

/* The thread: one bar and one dot, owned by core.js, same element for the whole film. */
html.film #thread{display:block;position:absolute;inset:0;z-index:var(--z-thread);pointer-events:none;overflow:hidden;direction:ltr}
.thread__bar,.thread__dot{position:absolute;left:0;top:0;width:100px;height:100px;transform-origin:0 0;background:var(--signal);will-change:transform;opacity:0}
.thread__dot{border-radius:50%}

/* The Row: one record from the messages table, filling as the film runs. Always LTR. */
html.film #row{display:flex;position:absolute;inset-inline:0;inset-block-end:var(--rail-h);block-size:var(--row-h);z-index:var(--z-row);direction:ltr;align-items:stretch;gap:0;background:var(--raised);border-block-start:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--fs-row);line-height:1.35;color:var(--fg);transition:transform .34s var(--ease-draw),opacity .2s linear,background-color .24s linear}
html.film[data-row=off] #row{transform:translateY(100%);opacity:0;pointer-events:none}
/* Never on the first paint: it stays hidden in the hero, so it must not flash and slide away. */
html.film:not(.ready) #row{transition:none;opacity:0}
.row__tag{flex:none;display:flex;align-items:center;padding-inline:var(--gutter) 14px;color:var(--fg-2);white-space:nowrap;font-family:var(--font-text);font-size:.75rem}
.row__tag:lang(ar),html[lang=ar] .row__tag{font-size:.8125rem}
.row__cells{flex:1;min-inline-size:0;display:grid;grid-template-columns:1.6fr 1.1fr 1.1fr 1.1fr 1.3fr .45fr .45fr 1.5fr 1.1fr 1.1fr 1.3fr 1.5fr .95fr .65fr;padding-inline-end:var(--gutter);overflow:hidden}
.rc{min-inline-size:0;display:flex;flex-direction:column;justify-content:center;gap:1px;padding-inline-end:8px;white-space:nowrap;overflow:hidden}
.rc__k{color:var(--fg-2);overflow:hidden;text-overflow:ellipsis}
.rc__v{color:var(--fg-strong);min-block-size:1.35em;overflow:hidden;text-overflow:ellipsis}
.rc:not(.is-set) .rc__v{color:var(--fg-2)}
.rc__v.is-hollow,.rc__v.is-solid{align-self:flex-start;padding-inline:.35em;margin-inline-start:-.35em}
.rc__v.is-hollow{box-shadow:inset 0 0 0 1px var(--fg-strong)}
.rc__v.is-solid{background:var(--fg-strong);color:var(--bg)}
.row__count{display:none;flex:none;align-items:center;padding-inline:0 10px;color:var(--fg-2)}
@media (max-width:1320px),(max-aspect-ratio:9/10){
  .row__cells{display:flex;gap:18px;justify-content:flex-end}
  .rc{display:none;flex-direction:row;align-items:center;gap:8px;padding:0}
  .rc.is-latest{display:flex}
  .row__count{display:flex}
  .row__tag{flex:1;padding-inline-end:6px}
  .rc__v.is-hollow,.rc__v.is-solid{align-self:center}
  /* The value is what changes, so the field name is the part that gives way. */
  .rc__v{flex:none}
  .rc__k{flex:0 1 auto;min-inline-size:0}
}
@media (max-width:429px){
  .row__tag{flex:0 1 auto;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;padding-inline-end:10px}
  .row__cells{gap:8px;justify-content:flex-start;flex:1 0 auto;min-inline-size:0}
  .row__count{padding-inline-end:8px}
  .rc{flex:none}
  .rc__k{display:none}
}
@media (max-height:520px){
  html.film #row{display:none}
}

/* The rail: progress and scene jumps. */
html.film #rail{display:block;position:absolute;inset-inline:0;inset-block-end:0;block-size:var(--rail-h);z-index:calc(var(--z-row) + 1);background:var(--bg);direction:inherit;transition:background-color .24s linear}
.rail__track{position:absolute;inset-inline:var(--gutter);inset-block-start:50%;block-size:1px;background:var(--hairline-strong)}
.rail__fill{position:absolute;inset:0;block-size:3px;inset-block-start:-1px;background:var(--signal);transform:scaleX(var(--film-p,0));transform-origin:0 50%}
html[dir=rtl] .rail__fill{transform-origin:100% 50%}
html.is-drained .rail__fill{background:var(--fg-strong)}
.tick{position:absolute;inset-block-start:50%;inline-size:28px;block-size:44px;margin-inline-start:-14px;transform:translateY(-50%)}
.tick::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:50%;inline-size:1px;block-size:9px;margin-block-start:-4.5px;background:var(--fg-2)}
.tick[aria-current=true]::before{background:var(--fg-strong);inline-size:3px;margin-inline-start:-1px}
.tick__label{position:absolute;inset-block-end:calc(50% + 12px);inset-inline-start:50%;padding:.1em .5em;background:var(--fg-strong);color:var(--bg);font-size:.75rem;line-height:1.5;white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(-50%);transition:opacity .12s linear}
html[dir=rtl] .tick__label{transform:translateX(50%)}
.tick:last-of-type .tick__label{inset-inline:auto 0;transform:none}
.tick:first-of-type .tick__label{inset-inline-start:0;transform:none}
.tick:hover .tick__label,.tick:focus-visible .tick__label{opacity:1}
@media (hover:none),(max-aspect-ratio:9/10){
  .tick{pointer-events:none}
}

/* delivered's impact: the one frame with nothing above the message but the header. */
html.is-flood #thread{z-index:calc(var(--z-row) + 2)}
html.is-flood #row,html.is-flood #rail{transition:none}

html.film #veil{display:block;position:absolute;inset:0;z-index:var(--z-veil);background:var(--bg);opacity:0;pointer-events:none}

/* ---- Footer ---- */
.foot{position:relative;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding:24px var(--gutter);background:var(--paper);color:var(--ash-light);font-size:var(--fs-small)}
.foot a{display:inline-flex;align-items:center;min-block-size:44px;color:inherit;text-underline-offset:.25em}
.foot a:hover,.foot a:focus-visible{color:var(--ink)}
.foot__links{display:flex;flex-wrap:wrap;gap:0 20px}
/* In the film the footer is part of the last frame: it takes the rail's place and adds no scroll,
   so nothing can move once the film has ended. */
html.film .foot{position:fixed;inset-block-end:0;inset-inline:0;z-index:calc(var(--z-row) + 2);block-size:var(--foot-h);padding-block:0;flex-wrap:nowrap;font-size:.75rem;line-height:1;visibility:hidden;opacity:0;transition:opacity .2s linear,visibility 0s linear .2s}
html.film.at-end .foot{visibility:visible;opacity:1;transition:opacity .2s linear}
html.film .foot a{min-block-size:0;block-size:var(--foot-h)}
html.film .foot__links{flex-wrap:nowrap;white-space:nowrap}
/* The last frame already has these two as buttons. */
html.film .foot__links a:not(:last-child){display:none}
html.film.at-end #rail{visibility:hidden}
@media (max-width:420px){
  html.film .foot{padding-inline:var(--gutter);gap:12px}
  html.film .foot>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}
}

/* ---- Before the dictionary lands the Arabic page holds its text back, see the head script ---- */
html.i18n-wait [data-i18n],html.i18n-wait [data-i18n-html]{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{
  .hdr{position:static}
  #thread,#row,#rail,#veil{display:none!important}
}

/* ---- scene: hero ---- */
/* Scene: hero. Every selector starts with #s-hero. */

/* ---- Base: the readable document. This is also the no-JS page. ---- */
#s-hero .hero__world{display:flex;flex-direction:column;gap:clamp(14px,2.6svh,28px);min-inline-size:0}

/* The name, one letter short. M and the first Arabic letter sit on the text edge, not their side bearing. */
#s-hero .hero__mark{margin-inline-start:-.068em;margin-block-end:.08em;color:var(--fg)}
html[lang=ar] #s-hero .hero__mark{margin-inline-start:-.03em;margin-block-end:.17em}
#s-hero .mark__bar{position:relative;margin-inline-end:0}
/* English: flush against the stem of the i. Arabic: just past the rounded corners of the kashida's end. */
html[lang=en] #s-hero .mark__bar{margin-inline-start:-.069em}
html[lang=ar] #s-hero .mark__bar{margin-inline-start:0}
#s-hero .hero__dot{position:absolute;inset-inline-end:-.17em;inset-block-start:50%;inline-size:.34em;block-size:.34em;margin-block-start:-.17em;border-radius:50%;background:var(--signal)}
#s-hero .hero__turn{display:none}

/* Headline, sub, buttons, input. */
#s-hero .hero__deck{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);grid-template-areas:"copy in" "cta in";column-gap:clamp(32px,6vw,96px);row-gap:clamp(12px,2.2svh,20px);align-items:end}
#s-hero .hero__copy{grid-area:copy;min-inline-size:0}
#s-hero .hero__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 .75em}
#s-hero .hero__head h1{min-inline-size:0}
#s-hero .hero__head .smsc{margin-block-start:.5em}
#s-hero .hero__sub{margin-block-start:clamp(6px,1.2svh,12px);color:var(--fg)}
#s-hero .hero__cta{grid-area:cta;display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(16px,2.2vw,32px)}

/* The input. The textarea is the message, its rule and counter are the instrument around it. */
#s-hero .hero__in{--ta-fs:max(1rem,var(--fs-h3));--ta-lh:1.36;grid-area:in;display:flex;flex-direction:column;gap:8px;min-inline-size:0;inline-size:100%;max-inline-size:42rem;justify-self:end}
html[lang=ar] #s-hero .hero__in{--ta-lh:1.5}
#s-hero .hero__label{display:block;transition:transform .24s var(--ease-swift)}
/* The label stays beside the words: it comes down with one line and steps back up for two. */
#s-hero .hero__in.is-one .hero__label{transform:translateY(calc(var(--ta-fs) * var(--ta-lh) * .62))}
#s-hero .hero__field{position:relative}
#s-hero .hero__ta,#s-hero .hero__ghost{display:block;inline-size:100%;margin:0;padding:0 0 6px;border:0;background:none;font-family:var(--font-text);font-size:var(--ta-fs);line-height:var(--ta-lh);white-space:pre-wrap;overflow-wrap:anywhere}
/* One line of text sits on the rule, as if written there. The field keeps its two rows, so nothing moves. */
#s-hero .hero__in.is-one .hero__ta,#s-hero .hero__in.is-one .hero__ghost{padding-block-start:calc(var(--ta-fs) * var(--ta-lh))}
#s-hero .hero__ta{resize:none;color:var(--fg-strong);caret-color:var(--signal);border-radius:0;appearance:none;outline:0}
#s-hero .hero__ghost{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;color:transparent;pointer-events:none;overflow:hidden;visibility:hidden}
#s-hero .hero__caret{display:none}
#s-hero .hero__rule{display:block;block-size:1.5px;background:var(--hairline-strong);transform-origin:0 50%}
html[dir=rtl] #s-hero .hero__rule{transform-origin:100% 50%}
#s-hero .hero__field:focus-within .hero__rule{background:var(--fg-strong);block-size:2px;margin-block-end:-.5px}
#s-hero .hero__meta{display:flex;flex-direction:column;gap:4px}
#s-hero .hero__ctr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 16px;color:var(--fg-2);min-block-size:1.6em}
#s-hero .hero__cod,#s-hero .hero__cnt{padding-inline:.35em;margin-inline:-.35em;white-space:nowrap}
html:not(.js) #s-hero .hero__in{display:none}

/* The real submit_sm. Three colours: the PDU, its data_coding byte, and the message. */
#s-hero .hero__foot{display:flex;flex-direction:column;gap:6px;min-inline-size:0}
#s-hero .hero__src{display:block}
#s-hero .hero__src .tag+span{margin-inline-start:.7em}
/* One unit: "part 1/3" never splits and never runs into the sentence before it. */
#s-hero .hero__part{display:inline-block;margin-inline-start:1em;white-space:nowrap;unicode-bidi:isolate}
html[lang=ar] #s-hero .hero__part{direction:rtl;font-family:var(--font-text);font-size:var(--fs-small)}
html[lang=ar] #s-hero .hero__seg{font-family:var(--font-text);font-size:1.08em}
#s-hero .hero__hex{display:flex;flex-direction:column;justify-content:flex-end;max-block-size:calc(1.6em * var(--hex-lines,4));overflow:hidden;text-align:start;overflow-wrap:anywhere}
#s-hero .hero__dc{color:var(--fg-strong)}
#s-hero .hero__sm{color:var(--signal)}
#s-hero .hero__fly,#s-hero .hero__sky{display:none}

@media (max-aspect-ratio:9/10){
  #s-hero .hero__deck{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "in" "cta"}
}
@media (max-width:639px){
  #s-hero .hero__hex{--hex-lines:2}
}

#s-hero .hero__ask{display:none}
/* The summary link is for screens where the header has no room for it. */
@media (min-width:1180px){
  #s-hero .hero__jump{display:none}
}

/* ---- The film adds to it. ---- */
/* The sky is the submit_sm: one star for each byte, the message's bytes in Signal. */
html.film #s-hero .hero__sky{display:block;position:absolute;inset-block-start:0;inset-inline:0;inline-size:100%;block-size:100%;pointer-events:none}

/* What the rest of the film has to answer, on the line, at the size the answer will get. */
html.film #s-hero .hero__ask{display:block;position:absolute;z-index:2;inset-inline:var(--gutter);inset-block-end:calc(20svh + clamp(10px,2svh,22px));margin:0;font-size:var(--fs-display);line-height:1.1;overflow-wrap:anywhere;visibility:hidden;pointer-events:none}
html[lang=ar].film #s-hero .hero__ask{line-height:1.24}
html.film #s-hero .hero__ask.is-long{font-size:calc(var(--fs-display) * .62)}
html.film #s-hero .hero__ask.is-longer{font-size:calc(var(--fs-display) * .4)}

/* The Row is hidden here, so the frame runs down to the rail. */
html.film #s-hero .frame{inset-block-end:var(--rail-h)}
html.film #s-hero .hero__world{--hex-rows:2;--hero-foot:calc(var(--hex-rows) * 1.6 * var(--fs-mono) + 1.75rem + clamp(20px,3.6svh,36px));position:absolute;inset:0;justify-content:flex-end;gap:0;padding-block-end:var(--hero-foot)}
html.film #s-hero .hero__mark{flex:none}
html.film #s-hero .hero__foot{position:absolute;inset-inline:0;inset-block-end:clamp(2px,1svh,10px)}
html.film #s-hero .hero__hex{--hex-lines:3}
/* Before the runtime lands only the name, headline, sub and buttons paint, so the opening has nothing to take back. */
html.film:not(.ready) #s-hero .hero__in,html.film:not(.ready) #s-hero .hero__foot{opacity:0}
html.film:not(.ready) #s-hero .mark__bar{visibility:hidden}

/* The thread draws the bar and the dot, so this bar only keeps its place. */
html.film #s-hero .mark__bar{visibility:hidden}

/* A caret where the visitor can write. It gives way to the real one on focus. */
html.film #s-hero .hero__ghost{visibility:visible}
html.film #s-hero .hero__caret{display:inline-block;inline-size:2px;block-size:1.05em;margin-inline-start:2px;background:var(--signal);vertical-align:-.16em;animation:hero-caret 1.1s steps(1) infinite}
html.film #s-hero .hero__field:focus-within .hero__ghost{visibility:hidden}
html.film #s-hero .hero__ghost.is-off{visibility:hidden}
html.film #s-hero:not(.is-on) .hero__caret{animation:none}
@keyframes hero-caret{0%,55%{opacity:1}56%,100%{opacity:0}}

/* The counter flips when the encoding or the segment count does. Inversion, never Signal. */
html.film #s-hero .hero__in.is-flip .hero__cod,html.film #s-hero .hero__in.is-flip .hero__cnt,html.film #s-hero .hero__hex.is-flip .hero__dc{background:var(--fg-strong);color:var(--bg)}

/* The opening. */
html.film #s-hero .hero__fly{display:block;position:absolute;inset:0;direction:ltr;overflow:visible;pointer-events:none}
/* physical: flights are placed with transforms measured from the top left */
html.film #s-hero .hero__byte{position:absolute;inset-block-start:0;inset-inline-start:0;font-family:var(--font-mono);font-size:var(--fs-mono);line-height:1.6;font-style:normal;white-space:nowrap;color:var(--signal);will-change:transform,opacity}
html.film #s-hero .hero__hex{transition:color .24s linear}
html.film #s-hero .hero__hex.is-hot{color:var(--fg)}
html.film #s-hero .hero__later{visibility:hidden}
html.film #s-hero .hero__cur{display:inline-block;inline-size:0;block-size:1em;vertical-align:-.15em;position:relative}
html.film #s-hero .hero__cur::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:1ch;background:var(--fg-strong)}

@media (max-aspect-ratio:9/10){
  /* The name on top, the message at the foot, and the line crossing the black between them. */
  html.film #s-hero .hero__ask{inset-block:44svh auto;inset-inline-end:calc(var(--gutter) + var(--thread-clear));text-wrap:balance}
  html.film #s-hero .hero__world{--hex-rows:3;justify-content:flex-start;padding-inline-end:var(--thread-clear)}
  html.film #s-hero .hero__foot{inset-inline-end:var(--thread-clear)}
  html.film #s-hero .hero__mark{font-size:min(21.6vw,16.5svh);margin-block-start:clamp(4px,1.4svh,18px);margin-inline-end:calc(-20px - 1.5px)}
  html.film[lang=ar] #s-hero .hero__mark{font-size:min(26.4vw,17svh)}
  html.film #s-hero .mark__bar{visibility:visible;margin-inline-end:.42em}
  html.film #s-hero .hero__dot{display:none}
  /* Thick kashida to thin thread: two border widths on one corner make the taper by themselves. */
  html.film #s-hero .hero__turn{display:block;position:absolute;inset-block-start:0;inset-inline-end:-.42em;inline-size:.42em;block-size:.42em;border-block-start:var(--bar) solid var(--signal);border-inline-end:3px solid var(--signal);border-start-end-radius:.42em}
  html.film #s-hero .hero__deck{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:clamp(12px,2svh,22px);min-block-size:0}
  html.film #s-hero .hero__in{order:1;margin-block-start:auto;max-inline-size:none}
  html.film #s-hero .hero__cta{order:2}
  html.film #s-hero .hero__head h1{font-size:min(7.7vw,5.6svh)}
  html.film[lang=ar] #s-hero .hero__head h1{font-size:min(9.6vw,6svh)}
  html.film #s-hero .hero__sub{font-size:clamp(1rem,min(2.8vw,2.3svh),1.5rem)}
  html.film #s-hero .hero__in{--ta-fs:clamp(1.25rem,min(3.4vw,2.6svh),1.75rem)}
}
@media (max-aspect-ratio:9/10) and (max-width:639px){
  /* On a phone the source line may wrap, so the foot sits in the flow with a fixed two rows of hex. */
  html.film #s-hero .hero__world{padding-block-end:clamp(4px,1svh,10px)}
  html.film #s-hero .hero__foot{position:static;margin-block-start:clamp(12px,2svh,22px)}
  html.film #s-hero .hero__hex{--hex-lines:2;block-size:calc(1.6em * var(--hex-lines))}
}

/* Phones: the buttons share a row, and the field names give way before the values do. */
@media (max-width:430px){
  html.film #s-hero .hero__cta{gap:6px 14px}
  html.film #s-hero .hero__cta .btn{font-size:.875rem}
  html.film #s-hero .hero__cta .btn:not(.btn--plain){padding-inline:.9em}
}
@media (max-width:359px){
  html.film #s-hero .hero__cod-k{display:none}
}

/* Short tall screens. Everything stays, but tighter, and the second row of the field folds away. */
@media (max-aspect-ratio:9/10) and (max-height:700px){
  html.film #s-hero .hero__sub{font-size:.9375rem;line-height:1.5}
  html.film #s-hero .hero__head{position:relative}
  html.film #s-hero .hero__head .smsc{display:none}
  html.film #s-hero .hero__deck{gap:10px}
  html.film #s-hero .hero__in{gap:4px}
  html.film #s-hero .hero__in.is-one .hero__ta{block-size:max(44px,calc(var(--ta-fs) * var(--ta-lh) + 6px));padding-block-start:0}
  html.film #s-hero .hero__in.is-one .hero__ghost{padding-block-start:0}
  html.film #s-hero .hero__in.is-one .hero__label{transform:none}
  html.film #s-hero .hero__meta{gap:0}
  html.film #s-hero .hero__foot{margin-block-start:10px}
  html.film #s-hero .hero__srct{display:none}
}
@media (max-aspect-ratio:9/10) and (max-height:620px){
  html.film #s-hero .hero__mark{font-size:min(21.6vw,13svh)}
  html.film[lang=ar] #s-hero .hero__mark{font-size:min(26.4vw,14svh)}
  html.film #s-hero .hero__cta .btn--plain:not(.hero__jump){display:none}
}

/* Under 520px tall a phone lies on its side: the word shrinks, the source line goes, one row of hex stays. */
@media (max-height:520px){
  html.film #s-hero .hero__world{--hex-rows:1;--hero-foot:calc(var(--fs-mono) * 1.6 + 10px)}
  html.film #s-hero .hero__mark{font-size:21svh;margin-block-end:.1em}
  html.film[lang=ar] #s-hero .hero__mark{font-size:19svh;margin-block-end:.2em}
  html.film #s-hero .hero__head h1{font-size:min(var(--fs-h2),8.6svh)}
  html.film #s-hero .hero__head .smsc{margin-block-start:.2em}
  html.film #s-hero .hero__sub{font-size:.875rem;line-height:1.45;margin-block-start:2px}
  html.film #s-hero .hero__deck{row-gap:6px;column-gap:28px}
  html.film #s-hero .hero__in{gap:2px;--ta-fs:1rem}
  html.film #s-hero .hero__in .t-small{font-size:.75rem}
  html.film #s-hero .hero__srct{display:none}
  html.film #s-hero .hero__hex{--hex-lines:1;flex:1;min-inline-size:0}
  html.film #s-hero .hero__foot{inset-block-end:0;flex-direction:row;align-items:center;gap:10px}
}

/* ---- scene: wire ---- */
/* Scene: wire. Base rules are the dossier: four slides in a plain vertical stack, each its final
   frame. The film adds the stage, the track and the motion states under html.film. */
#s-wire{--dir:1;--sw:100vw;--wire-mono:clamp(.72rem,.98vw,.9375rem);--seam-fs:clamp(3.25rem,min(8.8vw,15svh),10rem)}
html[dir=rtl] #s-wire{--dir:-1}

/* ---- Shared ---- */
#s-wire .wire__slide{position:relative}
#s-wire .wire__slide+.wire__slide .frame{border-block-start:1px solid var(--hairline)}
#s-wire .wire__head{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
#s-wire .wire__idx{font-family:var(--font-mono);font-size:.75rem;line-height:1.4;color:var(--fg-2);direction:ltr;unicode-bidi:isolate}
#s-wire .wire__copy{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
#s-wire .wire__dim{color:var(--fg-2)}

/* ---- 1. The door: the dissection ---- */
#s-wire .wire__dis{display:flex;flex-direction:column;gap:.6rem;min-inline-size:0}
#s-wire .wire__raw,#s-wire .wire__doors,#s-wire .wire__fan,#s-wire .wire__blip,#s-wire .wire__m,#s-wire .wire__scale{display:none}
#s-wire .wire__ri{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) minmax(0,26%);gap:2px 1rem;align-items:baseline;padding-block:.42em;border-block-end:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--wire-mono);line-height:1.5}
#s-wire .wire__k{justify-self:start;color:var(--fg-2);direction:ltr;unicode-bidi:isolate}
#s-wire .wire__c{justify-self:start;min-inline-size:0;max-inline-size:100%}
#s-wire .wire__h{display:block;color:var(--fg);direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
#s-wire .wire__v{justify-self:start;max-inline-size:100%;color:var(--fg-strong);unicode-bidi:isolate;overflow-wrap:anywhere}
#s-wire .wire__r:not([data-f=short_message]) .wire__v{direction:ltr}
#s-wire .wire__r[data-f=short_message] .wire__h,#s-wire .wire__r[data-f=short_message] .wire__v{color:var(--signal)}
#s-wire .wire__r[data-f=short_message] .wire__v{font-family:var(--font-text);font-weight:600}

/* ---- 2. The seam: slips with their seals beside the rejoined text ---- */
#s-wire .wire__seam{display:flex;flex-direction:column;gap:.8rem;min-inline-size:0}
#s-wire .wire__strip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1.25rem;align-items:center}
/* The header comes before the text, so in the calm page it stands at the head of each RTL slip. */
html[dir=rtl]:not(.film) #s-wire .wire__strip{direction:ltr}
#s-wire .wire__slip,#s-wire .wire__whole{font-family:var(--font-display);font-weight:700;line-height:1.7;color:var(--fg)}
#s-wire .wire__slip{font-size:clamp(1.05rem,2vw,1.6rem)}
#s-wire .wire__whole{grid-column:1/-1;padding-block-start:.5rem;border-block-start:1px solid var(--hairline-strong);font-size:clamp(1.25rem,2.8vw,2.2rem);color:var(--fg-strong)}
#s-wire .wire__seal-in{display:inline-block;padding:.22em .6em;background:var(--bone);color:var(--ink);font-family:var(--font-mono);font-size:var(--wire-mono);line-height:1.4;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
#s-wire .wire__edge,#s-wire .wire__unit,#s-wire .wire__sum{display:none}
#s-wire .wire__cap{max-inline-size:var(--measure);font-size:var(--fs-body)}
#s-wire .wire__src-s{display:none}
#s-wire .wire__live{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em .9em}
#s-wire .wire__live-t{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);color:var(--fg-strong)}
#s-wire .wire__live-m{font-family:var(--font-mono);font-size:var(--wire-mono);color:var(--fg-2);direction:ltr;unicode-bidi:isolate}
@media (max-width:640px){
  #s-wire .wire__strip{grid-template-columns:minmax(0,1fr)}
}

/* ---- 3. Accepted: the reply plate ---- */
#s-wire .wire__resp{display:flex;flex-direction:column;gap:.6rem;min-inline-size:0}
#s-wire .wire__plate{padding-block:.8em;border-block:1px solid var(--hairline-strong);font-family:var(--font-mono);font-size:var(--wire-mono);line-height:1.6}
#s-wire .wire__pdu{color:var(--fg-2);text-align:start}
#s-wire .wire__pdu span{direction:ltr;unicode-bidi:isolate}
#s-wire .wire__pl{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em 1.3em;color:var(--fg)}
#s-wire .wire__pl>span{direction:ltr;unicode-bidi:isolate}
#s-wire .wire__pk{color:var(--fg-2)}
#s-wire .wire__id{font-size:clamp(1.3rem,3.3vw,2.875rem);line-height:1.25;color:var(--fg-strong)}
#s-wire .wire__wait,#s-wire .wire__ahead,#s-wire .wire__pulse,#s-wire .wire__back{display:none}
#s-wire .wire__id i{font-style:normal;color:var(--ash-dark)}

/* ---- 4. The prefix: chain, result, lanes ---- */
#s-wire .wire__ask{display:flex;flex-direction:column;gap:.7rem;min-inline-size:0}
#s-wire .wire__chain{position:relative;align-self:flex-start;max-inline-size:100%}
#s-wire .wire__links{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .9em;font-family:var(--font-mono);font-size:var(--wire-mono);color:var(--fg);direction:inherit}
#s-wire .wire__links li{display:inline-flex;align-items:center;gap:.9em}
#s-wire .wire__links span{direction:ltr;unicode-bidi:isolate}
#s-wire .wire__links li+li::before{content:"";inline-size:1.3em;block-size:1px;background:var(--hairline-strong)}
#s-wire .wire__scan,#s-wire .wire__lit{display:none}
#s-wire .wire__res{display:flex;flex-wrap:wrap;gap:.3em 2em;font-family:var(--font-mono);font-size:var(--wire-mono)}
#s-wire .wire__rl{display:flex;align-items:baseline;gap:.7em}
#s-wire .wire__rk{color:var(--fg-2);direction:ltr;unicode-bidi:isolate}
#s-wire .wire__rv,#s-wire .wire__flip{color:var(--fg-strong);direction:ltr;unicode-bidi:isolate}
#s-wire .wire__fa{display:none}
#s-wire .wire__road,#s-wire .wire__lanes{display:grid;gap:6px;min-inline-size:0}
#s-wire .wire__lane{position:relative;display:flex;align-items:baseline;gap:.9em;padding:.55em .8em 1.15em;border:1px solid var(--hairline);color:var(--fg-2)}
#s-wire .wire__lane--2{background:var(--raised);border-color:var(--hairline-strong);color:var(--fg)}
#s-wire .wire__lane--2::after{content:"";position:absolute;inset-inline:0;inset-block-end:.4em;block-size:5px;background:var(--signal)}
#s-wire .wire__lab{font-family:var(--font-mono);font-size:var(--wire-mono);direction:ltr;unicode-bidi:isolate}
#s-wire .wire__sub{font-size:var(--fs-small)}
#s-wire .wire__curve{display:none}
#s-wire .wire__state{display:grid;gap:.45rem}
#s-wire .wire__state li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .8em;font-size:var(--fs-small);color:var(--fg-2)}

/* ---- The film: one track, four slides, moved sideways by core's scrub ---- */
html.film #s-wire{--line:calc(80svh - var(--hdr-h));--rh:clamp(21px,4.1svh,38px);--k:max(calc(var(--sw)*.14 - var(--gutter) + 20px),calc(var(--wire-mono)*9.8 + 34px));--top:clamp(6px,1.8svh,20px);--lh:clamp(34px,5.8svh,54px);--c2:calc(25em + 1rem);--c4:clamp(9rem,21%,19rem)}
html.film #s-wire .wire__track{position:absolute;inset:0;display:flex}
html.film #s-wire .wire__slide{flex:none;inline-size:100%;block-size:100%;overflow:clip}
html.film #s-wire .wire__slide:focus-visible{outline-offset:-10px}
html.film #s-wire .wire__slide+.wire__slide .frame{border-block-start:0}
html.film #s-wire .frame{display:block}
html.film #s-wire .wire__head{position:absolute;inset-block-start:var(--top);inset-inline-start:0;inline-size:54%}
html.film #s-wire .wire__copy{position:absolute;inset-block-start:calc(var(--top) + 1.5rem);inset-inline-end:0;inline-size:44%}

/* 1 */
html.film #s-wire .wire__dis{position:absolute;inset-inline:0;inset-block-end:calc(100% - var(--line) - var(--rh)*.5);gap:.5rem}
html.film #s-wire .wire__bytes{position:relative}
html.film #s-wire .wire__raw{display:block;position:absolute;inset-block-start:0;inset-inline:0;font-family:var(--font-mono);font-size:var(--wire-mono);line-height:var(--rh);color:var(--fg-2);direction:ltr;unicode-bidi:isolate;text-align:start;overflow-wrap:anywhere}
html.film #s-wire .wire__raw b{font-weight:400;color:var(--signal)}
html[dir=rtl].film #s-wire .wire__raw{text-align:end}
html.film #s-wire .wire__r.is-sel .wire__ri{background:var(--bone)}
html.film #s-wire .wire__r.is-sel .wire__k,html.film #s-wire .wire__r.is-sel .wire__h,html.film #s-wire .wire__r.is-sel .wire__v{color:var(--ink)}
html.film #s-wire .wire__ri{grid-template-columns:var(--k) var(--c2) minmax(0,1fr) var(--c4);align-items:center;gap:0;block-size:var(--rh);padding-block:0}
html.film #s-wire .wire__top{display:flex;align-items:baseline}
html.film #s-wire .wire__top .src{inline-size:calc(var(--k) + var(--c2));flex:none}
html.film #s-wire .wire__scale{display:flex;justify-content:space-between;flex:1;margin-inline-end:calc(var(--c4) + 1.5rem);font-family:var(--font-mono);font-size:.6875rem;line-height:1;color:var(--fg-2);direction:inherit}
html.film #s-wire .wire__m{display:block;position:relative;align-self:stretch;margin-inline-end:1.5rem}
html.film #s-wire .wire__m::before{content:"";position:absolute;inset-block-start:calc(50% - 2px);inset-inline-start:calc(var(--a)*100%);inline-size:calc(var(--b)*100%);min-inline-size:3px;block-size:4px;background:var(--fg)}
html.film #s-wire .wire__r.is-sel .wire__m::before{background:var(--ink)}
html.film #s-wire .wire__k{max-inline-size:100%;padding-inline-end:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The key is an LTR element in an RTL grid, so its gap belongs on the left, against the hex. */
html[dir=rtl].film #s-wire .wire__k{padding-inline:34px 0}
html.film #s-wire .wire__c{inline-size:100%;padding-inline-end:1rem;overflow:clip}
html.film #s-wire .wire__h{inline-size:max-content;white-space:nowrap}
html.film #s-wire .wire__v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.film #s-wire .wire__r[data-f=short_message] .wire__ri{grid-template-rows:calc(var(--rh)*.92) var(--rh);block-size:calc(var(--rh)*1.92);border-block-end:0}
html.film #s-wire .wire__r[data-f=short_message] .wire__k{grid-row:1;grid-column:1;align-self:end;padding-block-end:2px}
html.film #s-wire .wire__r[data-f=short_message] .wire__c,html.film #s-wire .wire__r[data-f=short_message] .wire__v{grid-row:2}
html.film #s-wire .wire__r[data-f=short_message] .wire__c{grid-column:2/4}
html.film #s-wire .wire__r[data-f=short_message] .wire__v{grid-column:4;font-size:1.0625em}
html.film #s-wire .wire__r[data-f=short_message] .wire__m{grid-row:1;grid-column:3}
html.film #s-wire .wire__r[data-f=short_message] .wire__m::before{background:var(--signal)}
/* Three ways in, at reading size, each with its own line into the thread. */
html.film #s-wire .wire__doors{display:grid;position:absolute;inset-block-start:calc(100% + 2px);inset-inline-start:0;grid-auto-rows:calc((20svh - var(--chrome-b) - var(--rh)*.5 - 6px)/3);align-items:center;justify-items:start;font-family:var(--font-mono);font-size:var(--fs-small);line-height:1;color:var(--fg)}
html.film #s-wire .wire__doors li:not([data-i18n]){direction:ltr}
html[lang=ar].film #s-wire .wire__doors li[data-i18n]{font-family:var(--font-text);font-size:.8125rem}
html.film #s-wire .wire__fan{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;overflow:visible;fill:none;stroke:var(--ash-dark);stroke-width:1.5;pointer-events:none}

/* 2: three text runs on one line. No element here may wrap or transform a letter. */
html.film #s-wire .wire__seam{position:absolute;inset-block-start:calc(var(--line)*.415);inset-inline:calc(var(--gutter)*-1);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 2rem;padding-inline:var(--gutter)}
html.film #s-wire .wire__strip{display:block;position:relative;grid-column:1/-1;margin-inline:calc(var(--gutter)*-1);block-size:calc(var(--seam-fs)*1.6)}
html.film #s-wire .wire__slip,html.film #s-wire .wire__whole{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:max-content;margin:0;padding:0;border:0;font-weight:800;font-size:var(--seam-fs);line-height:1.6;white-space:nowrap;color:var(--fg-strong)}
html.film #s-wire .wire__slip{visibility:hidden}
html.film #s-wire .wire__strip.is-split .wire__slip{visibility:visible}
html.film #s-wire .wire__strip.is-split .wire__whole{visibility:hidden}
html.film #s-wire .wire__seal{position:absolute;inset-inline-start:0;margin:0;z-index:2}
html.film #s-wire .wire__seal--a{inset-block-end:calc(100% + .35rem)}
html.film #s-wire .wire__seal--b{inset-block-start:calc(100% + .1rem)}
html.film #s-wire .wire__seal-in{font-size:clamp(.8125rem,1.2vw,1.125rem)}
html.film #s-wire .wire__edge{display:block;position:absolute;inset-block:-.35rem;inset-inline-start:0;inline-size:1.5px;background:var(--bone);transform-origin:50% 0;z-index:1}
html.film #s-wire .wire__unit{display:block;position:absolute;inset-block-end:calc(100% - .4rem);inset-inline-start:0;font-family:var(--font-mono);font-size:.75rem;line-height:1;color:var(--fg-2)}
html.film #s-wire .wire__unit::after{content:"";display:block;inline-size:1px;block-size:1rem;margin-block-start:.3rem;margin-inline:auto;background:var(--ash-dark)}
html.film #s-wire .wire__sum{display:block;position:absolute;inset-block-start:50%;inset-inline-start:0;font-family:var(--font-mono);font-size:var(--wire-mono);line-height:1;color:var(--fg-2);white-space:nowrap;direction:ltr}
/* Part 1 is on the right of the Arabic line, so its 67 is too. */
html[dir=rtl].film #s-wire .wire__sum{direction:rtl}
html.film #s-wire .wire__cap{align-self:start;margin-block-start:2.75rem}
html.film #s-wire .wire__src{justify-self:end;align-self:start;margin-block-start:2.75rem}
html.film #s-wire .wire__live{position:absolute;inset-block-start:calc(var(--line) + 18px);inset-inline-start:0}

/* 3 */
html.film #s-wire .wire__slide--acc .t-h2{font-size:var(--fs-display)}
/* The damma on the first word stands where the slide number ends. */
@media (min-aspect-ratio:9/10){
  html[lang=ar].film #s-wire .wire__slide--acc .t-h2{margin-block-start:.16em}
}
html.film #s-wire .wire__slide--acc .wire__head{inline-size:60%}
html.film #s-wire .wire__slide--acc .wire__copy{inline-size:36%}
html.film #s-wire .wire__dim{display:block}
html.film #s-wire .wire__resp{position:absolute;inset-block-end:calc(100% - var(--line) + 46px);inset-inline-start:0;inline-size:min(calc(var(--sw)*.52 - var(--gutter) - 40px),44rem)}
/* The one blank in the film, set where and how big the stamp will fill it. */
html.film #s-wire .wire__wait{display:block;position:absolute;inset-block-start:calc(35svh - var(--hdr-h));inset-inline-end:0;font-family:var(--font-stamp);font-weight:700;font-size:min(11vw,18svh);line-height:.9;font-variation-settings:"ELGR" 1,"ELSH" 2;color:var(--fg-2)}
html.film #s-wire .wire__w{display:inline-flex;align-items:flex-end;gap:.08em;direction:ltr;unicode-bidi:isolate}
html.film #s-wire .wire__w i{display:block;inline-size:2.45em;block-size:.075em;margin-block-end:.1em;background:var(--fg-2)}
html.film #s-wire .wire__ahead{display:block;position:absolute;inset-block-start:calc(80% - .5px);inset-inline:calc(var(--sw)*.52 + 22px) 0;block-size:1px;background:var(--hairline-strong)}
html.film #s-wire .wire__back{display:block;position:absolute;inset-block-start:calc(80% - 12px);inset-inline:var(--gutter) calc(100% - var(--sw)*.52 + 16px);block-size:1.5px;background:var(--ash-dark)}
html.film #s-wire .wire__pulse{display:block;position:absolute;inset-block-start:calc(80% - 31.5px);inset-inline-start:0;inline-size:140px;block-size:20px;fill:none;stroke:var(--ash-dark);stroke-width:1.5;max-inline-size:none;overflow:visible}

/* 4 */
html.film #s-wire .wire__ask{position:absolute;inset-inline:0;inset-block-end:calc(100% - var(--y2,0px) + var(--lh)*.5 + 1rem);gap:.55rem}
html.film #s-wire .wire__chain{align-self:stretch;padding-block:.25rem}
html.film #s-wire .wire__links{flex-wrap:nowrap;gap:0;font-size:clamp(.875rem,1.6vw,1.4375rem);color:var(--fg-2)}
html.film #s-wire .wire__links li{gap:1em}
html.film #s-wire .wire__links li+li{flex:1}
html.film #s-wire .wire__links li+li::before{flex:1;inline-size:auto;margin-inline-start:1em}
html.film #s-wire .wire__lit{display:block;position:absolute;inset:0;padding-block:.25rem;color:var(--bone)}
html.film #s-wire .wire__lit .wire__links{color:inherit}
html.film #s-wire .wire__scan{display:block;position:absolute;inset-block-start:-.3rem;inset-inline-start:0;inline-size:1px;block-size:var(--scan,3rem);background:var(--bone);z-index:2}
html.film #s-wire .wire__res{gap:.3em clamp(1.5rem,5vw,5.5rem)}
html.film #s-wire .wire__rl{flex-direction:column;align-items:flex-start;gap:.1rem}
html.film #s-wire .wire__rv,html.film #s-wire .wire__flip{font-size:clamp(1.125rem,2.5vw,2.25rem);line-height:1.2}
html.film #s-wire .wire__flip{display:inline-grid;perspective:320px}
html.film #s-wire .wire__fa,html.film #s-wire .wire__fb{display:block;grid-area:1/1;padding-inline:.32em;margin-inline-start:-.32em;backface-visibility:hidden}
html.film #s-wire .wire__fa{background:var(--raised)}
html.film #s-wire .wire__fb{background:var(--bone);color:var(--ink)}
html.film #s-wire .wire__road{position:absolute;inset-block:0;inset-inline:calc(var(--gutter)*-1);display:block;overflow:clip;pointer-events:none}
html.film #s-wire .wire__lanes{position:absolute;inset:0;display:block}
html.film #s-wire .wire__lane{--lit:0;position:absolute;inset-inline:0;inset-block-start:calc(var(--ly) - var(--lh)*.5);block-size:var(--lh);align-items:flex-start;padding:.3rem var(--gutter) 0;border-inline:0;border-block:1px solid var(--hairline-strong);background:none;color:var(--fg)}
html.film #s-wire .wire__lane::before{content:"";position:absolute;inset:0;background:var(--raised);opacity:var(--lit)}
html.film #s-wire .wire__lane>span{position:relative;opacity:calc(.62 + var(--lit)*.38)}
html.film #s-wire .wire__lane--1{--lit:1;--ly:var(--y1,0px)}
html.film #s-wire .wire__lane--2{--ly:var(--y2,0px)}
html.film #s-wire .wire__lane--2::after{display:none}
html.film #s-wire .wire__lab{font-size:.75rem;line-height:1.4}
html.film #s-wire .wire__sub{font-size:.75rem;line-height:1.4}
/* On a laptop the lane is short, and a label on the thread loses the dots under its Arabic letters. */
@media (min-aspect-ratio:9/10) and (max-height:800px){
  html.film #s-wire .wire__lane{align-items:flex-end;padding-block:0 .1rem}
}
html.film #s-wire .wire__curve{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;overflow:visible}
html.film #s-wire .wire__sig,html.film #s-wire .wire__route,html.film #s-wire .wire__aim{fill:none}
html.film #s-wire .wire__sig{stroke:var(--signal);stroke-width:var(--w,5);opacity:0}
html.film #s-wire .wire__route,html.film #s-wire .wire__aim{stroke:var(--bone);stroke-width:1.5}
/* The disclosure follows the explanation, in the same column. */
html.film #s-wire .wire__state{position:absolute;inset-block-start:calc(var(--top) + 1.5rem + var(--lead-b,0px) + .8rem);inset-inline-end:0;inline-size:44%}
html.film #s-wire .wire__slide--pre .wire__copy{inset-block-start:calc(var(--top) + 1.5rem)}

/* ---- Tall: the track stays horizontal, each slide stacks ---- */
@media (max-aspect-ratio:9/10){
  html.film #s-wire{--rh:clamp(30px,5.2svh,44px);--top:clamp(4px,1.2svh,16px);--seam-fs:clamp(3.25rem,min(16.5vw,10.5svh),9rem);--wire-mono:clamp(.72rem,1.75vw,1rem)}
  html.film #s-wire .frame{display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(8px,1.5svh,16px);padding-block-start:var(--top)}
  html.film #s-wire .wire__head,html.film #s-wire .wire__copy,html.film #s-wire .wire__dis,html.film #s-wire .wire__resp{position:relative;inset:auto;inline-size:auto;max-inline-size:100%}
  html.film #s-wire .wire__copy,html.film #s-wire .wire__slide--pre .wire__copy,html.film #s-wire .wire__slide--acc .wire__copy,html.film #s-wire .wire__slide--acc .wire__head{position:relative;inset:auto;inline-size:auto}
  html.film #s-wire .wire__r[data-f=command_length],html.film #s-wire .wire__r[data-f=sequence_number],html.film #s-wire .wire__r[data-f=esm_class]{display:none}
  html.film #s-wire .wire__doors,html.film #s-wire .wire__m,html.film #s-wire .wire__scale{display:none}
  html.film #s-wire .wire__top{display:block}
  html.film #s-wire .wire__top .src{inline-size:auto}
  html.film #s-wire .wire__raw{line-height:1.7}
  html.film #s-wire .wire__dis{margin-block-start:auto;margin-block-end:clamp(0px,2svh,24px)}
  html.film #s-wire .wire__slide--seam .wire__copy{min-block-size:calc(36svh - var(--hdr-h) - 6.5rem)}
  html.film #s-wire .wire__ri{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 .8rem;block-size:auto;padding-block:clamp(.34em,1svh,.8em)}
  html.film #s-wire .wire__k{grid-row:1;grid-column:1;padding-inline-end:0}
  html.film #s-wire .wire__v{grid-row:1;grid-column:2;justify-self:end;max-inline-size:14em}
  html.film #s-wire .wire__c{grid-row:2;grid-column:1/-1;inline-size:auto;padding-inline-end:0;max-block-size:3.1em}
  html.film #s-wire .wire__h{inline-size:auto;white-space:normal}
  html.film #s-wire .wire__r[data-f=short_message] .wire__ri{grid-template-rows:auto auto;block-size:auto;border-block-end:1px solid var(--hairline)}
  html.film #s-wire .wire__r[data-f=short_message] .wire__k{align-self:auto;padding-block-end:0}
  html.film #s-wire .wire__r[data-f=short_message] .wire__c{grid-column:1/-1}
  html.film #s-wire .wire__r[data-f=short_message] .wire__v{grid-row:1;grid-column:2;font-size:1em}
  html.film #s-wire .wire__blip{display:block;position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:13px;block-size:13px;border-radius:50%;background:var(--signal);opacity:0}

  /* The cut keeps its size: one line while whole, one line per slip once it parts. */
  html.film #s-wire .wire__seam{position:relative;inset:auto;display:flex;margin-block:clamp(14px,3.4svh,40px) 0;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter) calc(var(--gutter) + var(--thread-clear))}
  html.film #s-wire .wire__strip{margin-inline:calc(var(--gutter)*-1) calc((var(--gutter) + var(--thread-clear))*-1);block-size:calc(var(--seam-fs)*2.72)}
  html.film #s-wire .wire__slip,html.film #s-wire .wire__whole{inset-block-start:calc(var(--seam-fs)*.56)}
  html.film #s-wire .wire__seal--a{inset-block-start:0;inset-block-end:auto}
  html.film #s-wire .wire__seal--b{inset-block-start:auto;inset-block-end:0}
  html.film #s-wire .wire__edge{inset-block:calc(var(--seam-fs)*.3)}
  html.film #s-wire .wire__unit{inset-block-end:auto;inset-block-start:calc(var(--seam-fs)*.26 - .75rem)}
  html.film #s-wire .wire__live{position:relative;inset:auto;margin-block-start:auto}

  html.film #s-wire .wire__slide--acc .t-h2{font-size:var(--fs-h2)}
  html.film #s-wire .wire__resp{margin-block-start:clamp(4px,1.4svh,16px)}
  html.film #s-wire .wire__wait{position:relative;inset:auto;margin-block-start:auto;margin-block-end:clamp(30px,8svh,80px);text-align:end;font-size:min(13vw,8svh)}
  html.film #s-wire .wire__ahead{inset-block:calc(var(--ty,54%) + 12px) 0;inset-inline:auto calc(var(--sw)*.055 - .5px);inline-size:1px;block-size:auto}
  html.film #s-wire .wire__pulse{inset-block-start:0}
  html.film #s-wire .wire__back{inset-block:var(--bt,0px) auto;inset-inline:auto calc(var(--sw)*.055 + 10px);inline-size:1.5px;block-size:var(--bh,0px)}

  html.film #s-wire .wire__links{font-size:var(--wire-mono)}
  html.film #s-wire .wire__links li{gap:.5em}
  html.film #s-wire .wire__links li+li::before{margin-inline-start:.5em}
  html.film #s-wire .wire__ask{inset-inline:0;inset-block-end:calc(100% - var(--y1,0px) + var(--lh)*.5 + .6rem);padding-inline-end:var(--thread-clear)}
  html.film #s-wire .wire__rv,html.film #s-wire .wire__flip{font-size:clamp(1rem,4.2vw,1.625rem)}
  html.film #s-wire .wire__res{gap:.3em 1.4rem}
  html.film #s-wire .wire__sum{display:none}
  html.film #s-wire .wire__road{inset-inline:calc(var(--gutter)*-1) calc((var(--gutter) + var(--thread-clear))*-1)}
  html.film #s-wire .wire__state{position:absolute;inset-block:calc(var(--y2,0px) + var(--lh)*.5 + 12px) auto;inset-inline:0;inline-size:auto;padding-inline-end:var(--thread-clear)}
  html.film #s-wire .wire__slide--pre .wire__copy{inset-block-start:auto}

  html.film #s-wire .wire__lane{padding-block-start:.15rem}
  html.film #s-wire .wire__lab,html.film #s-wire .wire__sub{font-size:.6875rem}
}

/* ---- A small phone upright: every slide still fits, the extras step back ---- */
@media (max-aspect-ratio:9/10) and (max-height:760px),(max-aspect-ratio:9/10) and (max-width:379px){
  html.film #s-wire{--rh:26px;--seam-fs:clamp(2.75rem,min(14vw,8.2svh),3.25rem);--lh:34px;--wire-mono:.6875rem}
  html.film #s-wire .frame{gap:6px}
  html.film #s-wire .t-h2,html.film #s-wire .wire__slide--acc .t-h2{font-size:1.625rem}
  html.film #s-wire .t-lead{font-size:.9375rem;line-height:1.45}
  html[lang=ar].film #s-wire .t-lead{line-height:1.6}
  html.film #s-wire .t-small{font-size:.8125rem;line-height:1.4}
  html.film #s-wire .wire__r[data-f=source_addr],html.film #s-wire .wire__r[data-f=sm_length]{display:none}
  html.film #s-wire .wire__ri{padding-block:.2em}
  html.film #s-wire .wire__dis{margin-block:0;gap:.25rem}
  html.film #s-wire .wire__slide--seam .wire__copy{min-block-size:auto}
  html.film #s-wire .wire__cap,html.film #s-wire .wire__src{margin-block-start:0}
  html.film #s-wire .wire__c{max-block-size:1.6em}
  html.film #s-wire .src{font-size:.75rem;line-height:1.35}
  html.film #s-wire .wire__src-l{display:none}
  html.film #s-wire .wire__src-s{display:inline}
  html.film #s-wire .wire__seam{margin-block-start:2px;gap:.2rem}
  html.film #s-wire .wire__strip{block-size:calc(var(--seam-fs)*3.1)}
  html.film #s-wire .wire__slip,html.film #s-wire .wire__whole{inset-block-start:calc(var(--seam-fs)*.74)}
  html.film #s-wire .wire__cap{font-size:.875rem;line-height:1.4}
  html.film #s-wire .wire__live-t{font-size:1rem}
  html.film #s-wire .wire__resp{gap:.3rem}
  html.film #s-wire .wire__plate{padding-block:.4em}
  html.film #s-wire .wire__id{font-size:1.25rem}
  html.film #s-wire .wire__wait{margin-block-end:12px}
  html.film #s-wire .wire__ask{gap:.2rem}
  html.film #s-wire .wire__ask .src span:last-child,html.film #s-wire .wire__rl:first-child{display:none}
  html.film #s-wire .wire__rv,html.film #s-wire .wire__flip{font-size:1rem}
  html.film #s-wire .wire__rl{flex-direction:row;align-items:baseline;gap:.5em}
  html.film #s-wire .wire__state{inset-block-start:calc(var(--y2,0px) + var(--lh)*.5 + 6px)}
  html.film #s-wire .wire__state li{font-size:.71875rem;line-height:1.3}
  html.film #s-wire .wire__state li:first-child{display:none}
}

/* ---- A phone held sideways: no Row, little height, one band of text and one of evidence ---- */
@media (max-height:520px){
  html.film #s-wire{--rh:17px;--wire-mono:.6875rem;--seam-fs:3.25rem;--lh:36px}
  html.film #s-wire .t-h2,html.film #s-wire .wire__slide--acc .t-h2{font-size:1.625rem}
  html.film #s-wire .t-lead{font-size:.875rem;line-height:1.4}
  html[lang=ar].film #s-wire .t-lead{line-height:1.55}
  html.film #s-wire .t-small{font-size:.75rem;line-height:1.35}
  html.film #s-wire .wire__state li{font-size:.6875rem;line-height:1.3}
  html.film #s-wire .wire__copy{gap:.3rem;inline-size:53%}
  html.film #s-wire .wire__head,html.film #s-wire .wire__slide--acc .wire__head{inline-size:44%}
  html.film #s-wire .wire__slide--acc .wire__copy{inline-size:53%}
  html.film #s-wire .wire__r[data-f=command_length],html.film #s-wire .wire__r[data-f=sequence_number],html.film #s-wire .wire__r[data-f=esm_class],html.film #s-wire .wire__r[data-f=sm_length],html.film #s-wire .wire__r[data-f=source_addr],html.film #s-wire .wire__r[data-f=destination_addr]{display:none}
  html.film #s-wire .wire__r[data-f=short_message] .wire__k{grid-column:1/3;max-inline-size:none;overflow:visible}
  html.film #s-wire .wire__doors,html.film #s-wire .wire__wait,html.film #s-wire .wire__cap,html.film #s-wire .wire__sum,html.film #s-wire .wire__state li:first-child{display:none}
  html.film #s-wire .wire__dis .src span:last-child,html.film #s-wire .wire__ask .src span:last-child{display:none}
  html.film #s-wire .wire__src-l{display:none}
  html.film #s-wire .wire__src-s{display:inline}
  html.film #s-wire .wire__src{position:absolute;inset-block-start:calc(var(--line) + 18px);inset-inline-end:0;margin:0}
  html.film #s-wire .wire__seam{position:static}
  html.film #s-wire .wire__strip{position:absolute;inset-block-start:calc(var(--line)*.47);inset-inline:calc(var(--gutter)*-1);margin:0}
  html.film #s-wire .wire__resp .src{inline-size:max-content;font-size:.6875rem;white-space:nowrap}
  html.film #s-wire .wire__state{inset-block-start:calc(var(--top) + 5.3rem);inset-inline:0 auto;inline-size:43%}
  html.film #s-wire .wire__cap,html.film #s-wire .wire__src{margin-block-start:0}
  html.film #s-wire .wire__seal--a{inset-block-start:calc(50% - 1.75rem);inset-block-end:auto}
  html.film #s-wire .wire__seal--b{inset-block-start:calc(50% + .1rem)}
  html.film #s-wire .wire__seal-in{font-size:.6875rem}
  html.film #s-wire .wire__live-t{font-size:.9375rem}
  html.film #s-wire .wire__id{font-size:1.25rem}
  html.film #s-wire .wire__resp{gap:.25rem;inset-block-end:calc(100% - var(--line) + 18px)}
  html.film #s-wire .wire__plate{padding-block:.3em}
  html.film #s-wire .wire__slide--pre .wire__copy{inset-block-start:var(--top);inset-inline:auto 0;inline-size:54%}
  html.film #s-wire .wire__wait{display:none}
  html.film #s-wire .wire__ask{gap:.1rem;inset-block-end:calc(100% - var(--y2,0px) + var(--lh)*.5 + .4rem)}
  html.film #s-wire .wire__links{font-size:.75rem}
  html.film #s-wire .wire__rl{flex-direction:row;align-items:baseline;gap:.5em}
  html.film #s-wire .wire__rv,html.film #s-wire .wire__flip{font-size:.9375rem}
  html.film #s-wire .wire__lane{padding-block-start:.1rem}
  html.film #s-wire .wire__lab,html.film #s-wire .wire__sub{font-size:.625rem}
}

/* ---- scene: gates ---- */
/* Scene: gates. Every selector starts with #s-gates.
   Base rules are the calm version: the 13 names, the band, all the copy, no canvas.
   The film adds to them under html.film. */

#s-gates{--gates-dir:1;--gates-comb:clamp(40px,7svh,64px);--gates-hz:.47}
html[dir=rtl] #s-gates{--gates-dir:-1}

/* ---- The calm version ---- */
#s-gates .gates__art,#s-gates .gates__lane{display:none}
#s-gates .frame{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3.6svh,36px);align-content:center}
#s-gates .gates__head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem 1rem}
#s-gates .gates__verdict{display:grid;gap:clamp(20px,3.6svh,36px);min-inline-size:0}

#s-gates .gates__list{display:grid;gap:.1rem 1.5rem}
#s-gates .gates__mt{margin-inline-start:auto;font-size:.625rem;color:var(--fg-2)}
#s-gates .gates__row{display:flex;align-items:baseline;gap:.75em;padding-block:.3rem;border-block-end:1px solid var(--hairline);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--fg);direction:ltr;unicode-bidi:isolate}
html[dir=rtl] #s-gates .gates__row{direction:rtl}
#s-gates .gates__n{color:var(--fg-2);direction:ltr;unicode-bidi:isolate}
#s-gates .gates__g{direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}

#s-gates .gates__scale{position:relative;padding-block-start:calc(var(--gates-comb) + 1.6rem);margin-block-end:1.5rem}
#s-gates .gates__comb{position:absolute;inset-inline:0;inset-block-end:0;inline-size:100%;max-inline-size:none;block-size:var(--gates-comb);overflow:visible;transform:scaleX(var(--gates-dir))}
#s-gates .gates__comb path{fill:none;stroke:var(--bone);stroke-width:1.5;vector-effect:non-scaling-stroke}
#s-gates .gates__c0{opacity:.5}
#s-gates .gates__c1{opacity:.68}
#s-gates .gates__c2{opacity:.84}
#s-gates .gates__needle{position:absolute;inset-inline-start:6%;inset-block-end:-.4rem;inline-size:2px;block-size:calc(var(--gates-comb) * .62);background:var(--paper)}
#s-gates .gates__ticks{position:absolute;inset:0}
#s-gates .gates__tick{position:absolute;display:flex;align-items:baseline;gap:.45em;font-size:var(--fs-small);line-height:1.2;color:var(--fg);white-space:nowrap}
#s-gates .gates__tick .t-mono{color:var(--fg-strong)}
#s-gates .gates__tick--flag{inset-inline-start:50%;inset-block-end:calc(var(--gates-comb) * .43 + .35rem)}
#s-gates .gates__tick--hold{inset-inline-start:75%;inset-block-end:calc(var(--gates-comb) * .68 + .35rem)}
#s-gates .gates__tick--stop{inset-inline-start:90%;inset-block-end:calc(var(--gates-comb) + .35rem)}
/* The calm page on a phone: the last two labels end on their ticks and stand above the tallest bars. */
@media (max-width:640px){
  html:not(.film) #s-gates .gates__tick--hold{inset-inline:auto 25%;inset-block-end:calc(var(--gates-comb) + 1.5rem)}
  html:not(.film) #s-gates .gates__tick--stop{inset-inline:auto 10%;inset-block-end:calc(var(--gates-comb) + .35rem)}
}
/* Not .t-mono: that class sets direction on the element, and a logical inset follows it. */
#s-gates .gates__end{position:absolute;inset-block-start:calc(100% + .3rem);font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--fg-2);line-height:1}
#s-gates .gates__end--a{inset-inline-start:0}
#s-gates .gates__end--b{inset-inline-end:0}
#s-gates .gates__read{gap:.6em;align-items:center}

#s-gates .gates__try{display:grid;gap:.75rem;min-inline-size:0}
#s-gates .gates__picks{display:flex;flex-wrap:wrap;gap:.5rem}
#s-gates .gates__pick{min-block-size:44px;padding:.4em .9em;border:1px solid var(--hairline-strong);color:var(--fg);font-size:.8125rem;line-height:1.2;transition:background-color .16s linear,color .16s linear}
#s-gates .gates__pick:hover{text-decoration:underline;text-underline-offset:.25em}
#s-gates .gates__pick[aria-pressed=true]{background:var(--fg-strong);border-color:var(--fg-strong);color:var(--bg)}
/* A small door on a small road. In the second case a leaf falls and the road stops at it. */
#s-gates .gates__mini{position:relative;block-size:46px;max-inline-size:22rem}
#s-gates .gates__mini-name{position:absolute;inset-block-start:0;inset-inline-start:calc(52% + 30px);color:var(--fg-2);white-space:nowrap}
#s-gates .gates__mini-name .t-mono{font-size:.6875rem}
#s-gates .gates__mini::before{content:"";position:absolute;inset-inline-start:52%;inset-block-start:0;inline-size:22px;block-size:46px;border:1.5px solid var(--bone);border-block-end:0}
#s-gates .gates__mini-road{position:absolute;inset-inline-start:0;inset-block-start:29px;inline-size:100%;block-size:3px;background:var(--signal);transform-origin:0 50%}
html[dir=rtl] #s-gates .gates__mini-road{transform-origin:100% 50%}
#s-gates .gates__mini-dot{position:absolute;inset-block-start:24px;inset-inline-start:calc(100% - 13px);inline-size:13px;block-size:13px;border-radius:50%;background:var(--signal)}
#s-gates .gates__mini-shut{position:absolute;inset-inline-start:52%;inset-block-start:1.5px;inline-size:22px;block-size:44px;background:var(--bone);transform-origin:50% 0;transform:scaleY(0)}
#s-gates .gates__try.is-threat .gates__mini-road{inline-size:52%;background:var(--ash-dark)}
#s-gates .gates__try.is-threat .gates__mini-dot{inset-inline-start:calc(52% - 15px);background:var(--ash-dark);opacity:.5;transform:translateY(16px)}
#s-gates .gates__try.is-threat .gates__mini-shut{transform:none}
#s-gates .gates__out{gap:.6em;align-items:center;min-block-size:1.6em}
#s-gates .gates__said{color:var(--fg);white-space:nowrap}

#s-gates .gates__count{display:flex;flex-direction:column;gap:.35rem}
#s-gates .gates__num{font-size:clamp(4rem,12vw,7rem);color:var(--fg);direction:ltr;unicode-bidi:isolate;text-align:start}
#s-gates .gates__now{color:var(--fg-2);text-align:start}

#s-gates .gates__after{display:grid;gap:clamp(16px,2.8svh,28px);min-inline-size:0}
#s-gates .gates__ledger{display:grid;gap:.8rem}
#s-gates .gates__stats{display:grid;gap:.35rem;font-size:var(--fs-small);line-height:1.5}
#s-gates .gates__stats li{display:flex;align-items:baseline;gap:.75em}
#s-gates .gates__stats .stat{flex:none}
#s-gates .gates__detail{max-inline-size:var(--measure);text-wrap:pretty}
#s-gates .gates__cap{color:var(--fg-2)}
#s-gates .gates__cap code,#s-gates .gates__cap bdi{font-family:var(--font-mono);font-size:.92em;color:var(--fg)}

@media (min-width:860px){
  html:not(.film) #s-gates .frame{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,6vw,88px)}
  html:not(.film) #s-gates .gates__head{grid-column:1/-1}
  html:not(.film) #s-gates .gates__verdict{grid-column:1/-1;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,6vw,88px);align-items:end}
  html:not(.film) #s-gates .gates__body{grid-column:1}
  html:not(.film) #s-gates .gates__band{grid-column:1/-1}
  html:not(.film) #s-gates .gates__try{grid-column:1/-1;grid-template-columns:auto minmax(0,22rem) auto;align-items:center;justify-content:start;column-gap:clamp(20px,3vw,40px)}
  html:not(.film) #s-gates .gates__list{grid-column:1;grid-template-rows:repeat(7,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  html:not(.film) #s-gates .gates__count{grid-column:2;align-self:center}
  html:not(.film) #s-gates .gates__after{grid-column:1/-1;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,6vw,88px)}
  html:not(.film) #s-gates .gates__cap{grid-column:1/-1}
}

/* The replay needs JS. Without it the page keeps everything the replay would say. */
html:not(.js) #s-gates .gates__try{display:none}

/* ---- The film ---- */
html.film #s-gates .gates__art{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;direction:ltr}
html.film #s-gates .frame{display:block;pointer-events:none}

/* The canvas clears a soft-edged hole behind the title and the counter: gates never cross type. */
html.film #s-gates .gates__head{position:absolute;inset-block-start:clamp(4px,1.4svh,14px);inset-inline-start:0;flex-wrap:nowrap;gap:.75rem}
html.film #s-gates .t-h2{inline-size:max-content;max-inline-size:8.2em;font-size:clamp(1.5rem,min(2.75vw,5.1svh),2.75rem);line-height:1.12}
/* Arabic breaks at the comma, as the English does. */
html[lang=ar].film #s-gates .t-h2{line-height:1.2;max-inline-size:8.9em;text-wrap:wrap}

html.film #s-gates .gates__verdict{display:contents}
html.film #s-gates .gates__body{position:absolute;inset-block-start:clamp(6px,1.6svh,16px);inset-inline-end:0;inline-size:min(45%,33em);max-inline-size:none}
html.film #s-gates .gates__band{position:absolute;inset-inline:0;inset-block-end:calc((1 - var(--gates-hz)) * 100svh - var(--chrome-b));transform-origin:50% 100%;will-change:transform,clip-path}
html.film #s-gates .gates__scale{margin:0}
html.film #s-gates .gates__needle{will-change:transform}
html.film #s-gates .gates__read{position:absolute;inset-inline-start:calc(6% + .9rem);inset-block-start:0;white-space:nowrap;background:var(--bg);padding-inline:.25rem}

html.film #s-gates .gates__try{position:absolute;inset-inline-end:calc(min(10.4vw,16.7svh) * 2.25 + 2.5vw);inset-block-end:calc(20svh - var(--chrome-b) + 18px);inline-size:min(23rem,30vw)}
html.film #s-gates .gates__try.is-live{pointer-events:auto}
@media (max-height:640px){
  html.film #s-gates .gates__try{display:none}
}

html.film #s-gates .gates__list{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

html.film #s-gates .gates__count{position:absolute;inset-inline-end:0;inset-block-end:calc(20svh - var(--chrome-b) + 18px)}
html.film #s-gates .gates__num{font-size:clamp(4.5rem,min(10.4vw,16.7svh),9.5rem);line-height:.84}
html.film #s-gates .gates__now{min-block-size:1.6em;text-align:start;white-space:nowrap}

html.film #s-gates .gates__after{display:contents}
html.film #s-gates .gates__ledger{position:absolute;inset-inline-start:0;inset-block-end:calc(20svh - var(--chrome-b) + 18px);inline-size:min(47%,33em)}
html.film #s-gates .gates__detail{position:absolute;inset-inline-end:0;inset-block-end:calc(20svh - var(--chrome-b) + 18px);inline-size:min(45%,34em)}
html.film #s-gates .gates__cap{position:absolute;inset-inline-start:0;inset-block-end:clamp(8px,2.6svh,26px);white-space:nowrap}

html.film #s-gates .gates__lane{display:inline-flex;align-items:center;gap:.6em;position:absolute;inset-inline-start:calc(17vw + 14px - var(--gutter));inset-block-end:clamp(6px,1.4svh,14px);padding-inline:.35em;background:var(--bg);color:var(--fg-2);font-size:var(--fs-mono)}
html.film #s-gates .gates__lane .tag{font-size:.625rem}
html[lang=ar].film #s-gates .gates__lane span:last-child{font-family:var(--font-text);font-size:var(--fs-small)}
/* physical: the Row is LTR in both languages, so the tick drops onto the cell's left edge. */
html.film #s-gates .gates__cap.is-over::after{content:"";position:absolute;left:0;inset-block-start:100%;inline-size:1px;block-size:clamp(8px,2.6svh,26px);background:var(--hairline-strong)}

/* physical: under 1320px the Row shows one cell, always at its right end, in both languages. */
@media (max-width:1320px) and (min-aspect-ratio:9/10){
  html.film #s-gates .gates__cap{left:auto;right:0}
  html.film #s-gates .gates__cap::after{content:"";position:absolute;right:0;inset-block-start:100%;inline-size:1px;block-size:clamp(8px,2.6svh,26px);background:var(--hairline-strong)}
}

/* ---- A short stage: a landscape phone. The horizon drops so the words fit above it. ---- */
@media (max-height:520px) and (min-aspect-ratio:9/10){
  html.film #s-gates{--gates-hz:.53;--gates-comb:26px}
  html.film #s-gates .gates__head{inset-block-start:2px}
  html.film #s-gates .t-h2{inline-size:auto;max-inline-size:none;font-size:1.25rem;white-space:nowrap}
  html[lang=ar].film #s-gates .t-h2{max-inline-size:none}
  html.film #s-gates .gates__body{inset-block-start:32px;inset-inline:0;inline-size:auto;font-size:.8125rem;line-height:1.42}
  html[lang=ar].film #s-gates .gates__body{line-height:1.5}
  html.film #s-gates .gates__scale{padding-block-start:calc(var(--gates-comb) + 1.1rem)}
  html.film #s-gates .gates__tick{font-size:.6875rem}
  html.film #s-gates .gates__read{inset-inline-start:calc(6% + .6rem)}
  html.film #s-gates .gates__num{font-size:clamp(2.75rem,17svh,4.5rem)}
  /* The bar is away until the counter has gone, so it may stand this low here. */
  html.film #s-gates .gates__count{inset-block-end:calc(20svh - var(--chrome-b) - 10px)}
  html.film #s-gates .gates__ledger{inline-size:auto;inset-inline-end:0;gap:.3rem;inset-block-end:calc(20svh - var(--chrome-b) + 8px)}
  html.film #s-gates .gates__honest{font-size:1rem}
  html.film #s-gates .gates__stats{font-size:.75rem;gap:.1rem}
  html.film #s-gates .gates__detail{display:none}
}

/* ---- Tall: the tunnel lies flat. The real list crosses the thread at the reading end. ---- */
@media (max-aspect-ratio:9/10){
  html.film #s-gates{--gates-num:clamp(3.25rem,min(25vw,12.5svh),7.5rem);--gates-comb:clamp(56px,min(13svh,18vw),150px)}
  html.film #s-gates .frame{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);row-gap:14px;padding-block-start:clamp(8px,1.6svh,18px)}
  html.film #s-gates .gates__head{position:relative;inset:auto;grid-row:1;gap:.6rem}
  html.film #s-gates .t-h2{font-size:clamp(1.5rem,min(7.4vw,4.3svh),2.75rem)}

  html.film #s-gates .gates__list{position:relative;grid-row:2;grid-column:1;display:flex;flex-direction:column;inline-size:auto;block-size:calc(100% - var(--gates-num) * .84 - 2.5rem);margin:0;padding:0;overflow:visible;clip-path:none;white-space:normal}
  html.film #s-gates .gates__row{flex:1 1 0;min-block-size:0;align-items:center;gap:.7em;padding:0;border:0;font-size:clamp(.6875rem,min(3.4vw,1.75svh),1rem);line-height:1;color:var(--fg-2)}
  html.film #s-gates .gates__row::after{content:"";flex:1;min-inline-size:0;block-size:1px;margin-inline-end:-20px;background:var(--hairline)}
  html.film #s-gates .gates__g{overflow-wrap:normal;white-space:nowrap}
  html.film #s-gates .gates__row.is-past{color:var(--fg)}
  html.film #s-gates .gates__row.is-past::after{background:var(--hairline-strong)}
  html.film #s-gates .gates__row.is-now{color:var(--fg-strong)}
  html.film #s-gates .gates__row.is-now .gates__n{color:var(--fg-strong)}
  html.film #s-gates .gates__row.is-now .gates__g{padding-inline:.4em;margin-inline:-.4em;padding-block:.28em;background:var(--fg-strong);color:var(--bg)}
  html.film #s-gates .gates__row.is-now::after{block-size:2px;background:var(--fg-strong)}

  html.film #s-gates .gates__count{position:relative;inset:auto;grid-row:2;grid-column:1;align-self:end}
  html.film #s-gates .gates__num{font-size:var(--gates-num)}
  html.film #s-gates .gates__now{font-size:.75rem}

  html.film #s-gates .gates__verdict{display:flex;flex-direction:column;gap:clamp(14px,2.6svh,28px);grid-row:2;grid-column:1;align-self:start;min-inline-size:0}
  html.film #s-gates .gates__body{position:static;inline-size:auto;max-inline-size:var(--measure);font-size:var(--fs-body)}
  html.film #s-gates .gates__band{position:relative;inset:auto;will-change:auto}
  html.film #s-gates .gates__read{inset-inline-start:0;padding:0;background:none}
  html.film #s-gates .gates__scale{margin:0}
  html.film #s-gates .gates__tick--hold{inset-inline-start:auto;inset-inline-end:calc(10% + .4rem)}
  html.film #s-gates .gates__tick--stop{inset-inline-start:auto;inset-inline-end:0}
  /* Arabic's short words fit on their own ticks. */
  html[lang=ar].film #s-gates .gates__tick--hold{inset-inline:75% auto}
  html[lang=ar].film #s-gates .gates__tick--stop{inset-inline:90% auto}

  html.film #s-gates .gates__try{inset-inline:0 auto;inset-block-end:calc(var(--gates-num) * .84 + 2.6rem);inline-size:min(100%,23rem);gap:.375rem}
  html.film #s-gates .gates__picks{flex-wrap:nowrap;gap:.375rem}
  html.film #s-gates .gates__pick{padding-inline:.6em;font-size:clamp(.6875rem,3.1vw,.8125rem);white-space:nowrap}
  html.film #s-gates .gates__mini{inline-size:min(100%,18rem)}
  html.film #s-gates.gates--no-try .gates__try{display:none}
  html.film #s-gates .gates__mt{margin-inline-start:0;padding-block:0;line-height:1.3}

  html.film #s-gates .gates__after{display:flex;flex-direction:column;gap:clamp(12px,2.2svh,24px);grid-row:2;grid-column:1;align-self:start;min-inline-size:0}
  html.film #s-gates .gates__ledger,html.film #s-gates .gates__detail{position:static;inline-size:auto}
  html.film #s-gates .gates__stats li{flex-wrap:wrap;gap:.1rem .75em}
  html.film #s-gates.gates--tight .gates__detail{display:none}
  html.film #s-gates .gates__cap{inset-block-end:0;inset-inline-end:var(--thread-clear);white-space:normal}
  html.film #s-gates .gates__lane{inset-inline-start:0;inset-block-end:0}
}

/* ---- scene: route ---- */
/* Scene: route. Every selector starts with #s-route.
   The default rules are the calm version: one composed final board, with or without JS. */

/* ---- Base: the readable document ---- */
#s-route{
  --riser:14vw;
  --u:35;
  --t:calc((100vw - 2*var(--gutter))/var(--u));
  --tw:calc(var(--t) - 2px);
  --th:calc(var(--t)*1.72);
  --tf:calc(var(--t)*1.4);
}
#s-route .route__lines{display:none}
#s-route .route__ln{display:block}
#s-route .route__top{display:flex;flex-direction:column;gap:clamp(12px,2.4svh,24px)}
#s-route .route__title{display:flex;flex-direction:column;gap:6px}
#s-route .route__copy,#s-route .route__more{display:flex;flex-direction:column;gap:.75em}
#s-route .route__deck{display:flex;flex-direction:column;gap:clamp(16px,3svh,28px);margin-block-start:clamp(8px,2svh,16px)}
#s-route .route__board{display:flex;flex-direction:column;gap:clamp(12px,2.4svh,20px)}
#s-route .route__strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px}
#s-route .route__now{display:flex;align-items:baseline;gap:.75em}
#s-route .route__label.route__v{font-size:var(--fs-h3);color:var(--fg-strong)}
#s-route .route__why{display:flex;flex-direction:column;gap:2px;min-inline-size:0;flex:1}
#s-route .route__cap{display:none;font-size:var(--fs-small);color:var(--fg)}
#s-route .route__trail{display:flex;flex-wrap:wrap;gap:0 .75em;color:var(--fg-strong);justify-content:flex-start}
html[dir=rtl] #s-route .route__trail{justify-content:flex-end}
#s-route .route__trail-k{color:var(--fg-2)}
#s-route .route__guarded.is-idle{color:var(--fg-2)}

/* A real table in grid clothes, so a row can move by transform in every browser.
   Explicit roles in the HTML keep its meaning. Data is Latin and LTR, columns follow the reader. */
#s-route .route__table,#s-route thead,#s-route tbody{display:block}
#s-route tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.4fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,2fr);column-gap:clamp(6px,1.4vw,20px);align-items:center;border-block-end:1px solid var(--hairline);padding-block:.5em}
#s-route th,#s-route td{font-weight:400;text-align:start;min-inline-size:0}
#s-route thead th{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--fg-2)}
#s-route thead th.c-margin{justify-self:end;inline-size:7.2em}
html[lang=ar] #s-route thead th{font-family:var(--font-text);font-size:.8125rem}
html[lang=ar] #s-route thead th.c-asr{font-family:var(--font-mono);font-size:var(--fs-mono)}
#s-route .route__v{font-family:var(--font-mono);font-size:clamp(.8125rem,1.5vw,1.375rem);color:var(--fg-strong);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
#s-route .c-margin{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:2px 10px}
#s-route .route__amt{position:relative;display:inline-flex;direction:ltr}
#s-route .route__mark{color:var(--ink);background:var(--bone);padding-inline:.45em;white-space:nowrap}
#s-route .route__strike{position:absolute;inset-inline:-3px;inset-block-start:calc(50% - 1px);block-size:2px;background:var(--bone)}
#s-route tr.is-marked td .route__v,#s-route tr.is-marked th .route__v{color:var(--fg-2)}

#s-route .route__pick{display:flex;flex-direction:column;gap:6px}
#s-route .route__keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));column-gap:clamp(16px,3vw,44px)}
#s-route .route__key{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .9em;min-block-size:44px;padding-block:.5em;padding-inline:.5em;text-align:start;border-block-end:1px solid var(--hairline);font-size:var(--fs-small)}
#s-route .route__key-n{color:var(--fg-strong);min-inline-size:11ch}
html[dir=rtl] #s-route .route__key-n{text-align:right}
/* Without JS these do nothing, so they read as a plain list. */
html:not(.js) #s-route .route__pick-h{display:none}
html:not(.js) #s-route .route__key{cursor:default;pointer-events:none}
html:not(.js) #s-route .route__key.is-on{background:none;border-color:var(--hairline)}
html:not(.js) #s-route .route__key.is-on .route__key-n{color:var(--fg-strong)}
html:not(.js) #s-route .route__key.is-on .route__key-c{color:var(--fg-2)}
#s-route .route__key-c{color:var(--fg-2)}
#s-route .route__key.is-on{background:var(--fg-strong);border-color:var(--fg-strong)}
#s-route .route__key.is-on .route__key-n,#s-route .route__key.is-on .route__key-c{color:var(--bg)}
#s-route .route__key:not(.is-on):hover .route__key-n{text-decoration:underline;text-underline-offset:.3em}

#s-route .route__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;margin-block-start:clamp(8px,2svh,16px)}
/* Arabic in the mono stack keeps the mono font's space, which is far too wide. */
html[lang=ar] #s-route .route__msg,#s-route .route__msg.is-ar,html[lang=ar] #s-delivered .dlv__held{font-family:var(--font-text)}
/* The visitor's own words, the only text in Signal. Not .t-mono: dir="auto" must win. */
#s-route .route__msg{font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--signal);min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
#s-route .route__ghosts{display:none}

/* ---- Tiles: built by init, so the page without JS keeps plain text ---- */
#s-route .route__f{display:none;position:relative;direction:ltr;unicode-bidi:isolate;gap:calc(var(--t) - var(--tw))}
#s-route .route__f i{position:relative;display:block;flex:none;inline-size:var(--tw);block-size:var(--th);overflow:hidden;background:var(--graphite);color:var(--bone);font-family:var(--font-mono);font-style:normal;font-size:var(--tf);line-height:var(--th);text-align:center;white-space:pre}
/* The hinge runs through a whole cell, one element, so it stays still while the flaps fall. */
#s-route .route__f::after{content:"";position:absolute;inset-inline:0;inset-block-start:calc(50% - .5px);block-size:1px;background:var(--ink)}
/* One device pixel where there are enough of them: a hinge must never read as the strike. */
@media (min-resolution:2dppx){
  #s-route .route__f::after{block-size:.5px}
}
#s-route .route__f i.is-f::before{content:"";position:absolute;inset-inline:0;inset-block:0 50%;background:var(--graphite);transform-origin:50% 100%;animation:route-flap .24s steps(6) both}
@keyframes route-flap{from{transform:scaleY(1)}to{transform:scaleY(0)}}
#s-route tr.is-marked td .route__f i,#s-route tr.is-marked th .route__f i{color:var(--ash-dark)}

/* The calm version keeps the tiles where the five columns fit. */
@media (min-aspect-ratio:9/10){
  html.dossier #s-route .has-f .route__f{display:inline-flex}
  html.dossier #s-route .has-f .route__v{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  html.dossier #s-route tr{grid-template-columns:calc(var(--t)*10) calc(var(--t)*2) calc(var(--t)*6) calc(var(--t)*6) calc(var(--t)*7);justify-content:space-between;column-gap:0;padding-block:8px 5px}
  html.dossier #s-route thead th.c-margin{inline-size:calc(var(--t)*7)}
  html.dossier #s-route .c-margin{position:relative;display:block}
  html.dossier #s-route .route__mark{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 6px)}
  html.dossier #s-route tbody{padding-block-end:24px}
}

/* ---- The film ---- */
html.film #s-route{--keys:calc(var(--riser) - var(--gutter) - 14px);--band:calc(var(--h2)*2.46 + 44px);--h2:min(var(--fs-h2),7svh);--t:min(calc((100vw - var(--gutter) - var(--riser) - 30px)/var(--u)),calc((100svh - var(--hdr-h) - var(--chrome-b) - var(--band) - 118px)/10.4))}
html.film #s-route .route__lines{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;z-index:2;pointer-events:none}
html.film #s-route .route__sig{fill:none;stroke:var(--signal);stroke-width:5;stroke-linejoin:miter;opacity:0}
html.film #s-route .route__rung{stroke:var(--ash-dark);stroke-width:1.5;stroke-dasharray:8 6;opacity:0}
/* Row cells leaving the board for the Row. Physical on purpose: they fly to measured pixels. */
html.film #s-route .route__ghosts{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;direction:ltr;overflow:hidden}
html.film #s-route .route__ghost{position:absolute;inset-block-start:0;inset-inline-start:0;font-size:.6875rem;line-height:1.35;padding-inline:.35em;background:var(--bone);color:var(--ink);opacity:0;white-space:nowrap}

/* Below y=.8 only the reading-start column has to clear the thread. The bar reaches past .14 at
   p=1 alone, when the rows it would cross have gone, so the board may run on past the line. */
html.film #s-route .frame{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;container-type:size;container-name:route}
html.film #s-route .route__top{grid-row:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:end;padding-block:clamp(6px,1.6svh,18px) clamp(8px,2svh,20px)}
html.film #s-route .route__top .t-h2{font-size:var(--h2)}
html.film #s-route .route__ln{white-space:nowrap}
html.film #s-route .route__copy{display:grid}
html.film #s-route .route__copy>*{grid-area:1/1}
html.film #s-route .route__copy p{max-inline-size:38em;font-size:clamp(.9375rem,min(1.1vw,2.1svh),1.0625rem);line-height:1.5}
html[lang=ar].film #s-route .route__copy p{line-height:1.65}
html.film #s-route .route__sim{color:var(--fg-strong)}

html.film #s-route .route__deck{grid-row:2;display:grid;grid-template-columns:var(--keys) minmax(0,1fr);grid-template-rows:minmax(0,1fr) calc(20svh - var(--chrome-b));column-gap:44px;gap:0 44px;margin:0;min-block-size:0}
html.film #s-route .route__board{grid-column:2;grid-row:1/3;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:0;min-inline-size:0;min-block-size:0;padding-block-end:8px}
html.film #s-route .route__pick{grid-column:1;grid-row:1;display:grid;grid-template-rows:auto minmax(0,1fr);gap:4px;min-block-size:0;padding-block-end:18px}
html.film #s-route .route__pick-h{white-space:nowrap;line-height:1.4}
html.film #s-route .route__keys{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);column-gap:0;min-block-size:0}
html.film #s-route .route__key{display:flex;align-items:center;min-block-size:0;padding-block:0;padding-inline:.6em;font-size:var(--fs-mono)}
html.film #s-route .route__key-n{min-inline-size:0}
/* The captions stay readable to assistive tech and show one at a time beside the label. */
html.film #s-route .route__key-c{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.film #s-route .route__foot{position:absolute;inset-inline-start:0;inset-block-end:0;inline-size:var(--keys);block-size:calc(20svh - var(--chrome-b));margin:0;padding-block-start:clamp(10px,1.8svh,16px);display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:flex-start;gap:2px}
html.film #s-route .route__msg{max-inline-size:100%;flex:none}
/* Under the line there is room for one of the two: keep the status. */
@media (max-height:640px) and (min-aspect-ratio:9/10){
  html.film #s-route .route__foot .route__msg{display:none}
}

html.film #s-route .route__strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:stretch;column-gap:calc(var(--t)*.8);padding-block-end:clamp(6px,1.2svh,12px)}
html.film #s-route .route__now{display:flex;flex-direction:column;align-items:flex-start;gap:0}
html.film #s-route .route__now-k{font-size:.6875rem;line-height:1.5}
html.film #s-route .route__why{justify-content:flex-end;padding-block-end:1px}
html.film #s-route .route__cap{display:block;color:var(--fg);line-height:1.35}
html.film #s-route .route__src{align-self:end;white-space:nowrap}

html.film #s-route .route__f{display:inline-flex}
html.film #s-route .has-f .route__v{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
html.film #s-route .route__label+.route__f i,html.film #s-route tbody th .route__f i,html.film #s-route .c-margin .route__f i{color:var(--paper)}

html.film #s-route .route__table{display:grid;grid-template-rows:auto minmax(0,1fr);position:relative;min-block-size:0}
html.film #s-route thead{transform:translateY(calc(var(--gone,0)*var(--drop,0px)))}
html.film #s-route tbody{display:grid;grid-template-rows:repeat(4,1fr);position:relative}
html.film #s-route tr{grid-template-columns:calc(var(--t)*10) calc(var(--t)*2) calc(var(--t)*6) calc(var(--t)*6) calc(var(--t)*7);justify-content:space-between;column-gap:0;align-items:end}
html.film #s-route thead tr{padding-block:0 3px;border-block-end:0}
html.film #s-route tbody tr{position:relative;z-index:1;background:var(--bg);padding-block:calc(var(--t)*.34) 5px}
html.film #s-route tbody tr:first-child{z-index:2;transform:translateY(calc(var(--gone,0)*var(--drop,0px)))}
html.film #s-route tbody tr:not(:first-child){opacity:calc(1 - var(--fade,0))}
html.film #s-route thead th.c-margin{inline-size:calc(var(--t)*7)}
html.film #s-route thead th{transition:color .16s linear}
html.film #s-route thead th.is-key{color:var(--fg-strong);text-decoration:underline;text-underline-offset:.35em}
html.film #s-route .c-margin{position:relative;display:block}
html.film #s-route .route__strike{inset-inline:-4px;transform-origin:0 50%;transform:scaleX(0);z-index:2;transition:transform .12s linear}
html[dir=rtl].film #s-route .route__strike{transform-origin:100% 50%}
html.film #s-route tr.is-struck .route__strike{transform:none;transition:transform .24s var(--ease-draw)}
html.film #s-route tr.is-quick .route__strike,html.film #s-route tr.is-quick .route__mark{transition:none}
/* The mark hangs off the rail of the sunken row and prints itself, one letter a step, left to
   right, because it is Latin in both languages. */
html.film #s-route .route__mark{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 6px);font-size:clamp(.6875rem,calc(var(--t)*.4),.8125rem);line-height:1.5;clip-path:inset(0 100% 0 0)}
html.film #s-route tr.is-marked .route__mark{clip-path:inset(0);transition:clip-path .32s steps(13) .34s}
/* A window this short has no room under the board: the mark stands beside its row, off the keys. */
@media (max-height:520px) and (min-aspect-ratio:9/10),(pointer:coarse) and (max-height:680px) and (min-aspect-ratio:9/10){
  html.film #s-route td.c-margin{position:static}
  html.film #s-route tbody tr{position:relative}
  html.film #s-route .route__mark{inset-block-start:calc(50% - .75em);inset-inline-end:calc(100% + 8px)}
  html[dir=rtl].film #s-route .route__mark{inset-inline:calc(100% + 8px) auto}
}
/* Once, at rest: the keys are keys. The underline runs down them and is gone. */
html.film #s-route .route__key.is-hint .route__key-n{text-decoration:underline;text-underline-offset:.3em}
html.film #s-route tr.is-marked td .route__f i,html.film #s-route tr.is-marked th .route__f i{color:var(--ash-dark);transition:color .3s linear}

/* On a touch screen the keys need the label's height to stay 44px tall. */
@media (pointer:coarse) and (min-aspect-ratio:9/10){
  html.film #s-route .route__pick{grid-template-rows:minmax(0,1fr)}
  html.film #s-route .route__pick-h{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  html.film #s-route .route__keys{grid-auto-rows:minmax(44px,1fr)}
}

/* ---- Tall or short: the board drops to three columns and the keys become a strip ---- */
@media (max-aspect-ratio:9/10),(max-height:520px),(pointer:coarse) and (max-height:680px){
  html.film #s-route{--u:26.4}
  html.film #s-route .route__deck{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:space-evenly;row-gap:clamp(6px,2svh,20px)}
  html.film #s-route .route__board{grid-column:1;grid-row:1;padding-block-end:0;display:block}
  html.film #s-route .route__pick{grid-column:1;grid-row:2;padding-block-end:0;display:block}
  html.film #s-route .route__pick-h{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  html.film #s-route .route__keys{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x pan-y}
  html.film #s-route .route__keys::-webkit-scrollbar{display:none}
  html.film #s-route .route__key{flex:none;min-block-size:44px;padding-inline:.9em;font-size:.8125rem}
  html.film #s-route .route__key:focus-visible{outline-offset:-3px}
  html.film #s-route .route__strip{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;row-gap:2px}
  html.film #s-route .route__now{grid-column:1;grid-row:1/3}
  html.film #s-route .route__src{grid-column:2;grid-row:1;justify-self:start;align-self:start;white-space:normal}
  html.film #s-route .route__why{grid-column:2;grid-row:2}
  html.film #s-route .route__table{display:block}
  html.film #s-route tbody{display:block;padding-block-end:22px}
  html.film #s-route tr{grid-template-columns:calc(var(--t)*10) calc(var(--t)*6) calc(var(--t)*7)}
  html.film #s-route .c-asr,html.film #s-route .c-sell{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
}

/* Very short and wide: text one side, board the other. The riser needs height it does not have,
   so the thread stays on its line here and route.js draws no ladder. */
@media (max-height:520px) and (min-aspect-ratio:9/10),(pointer:coarse) and (max-height:680px) and (min-aspect-ratio:9/10){
  html.film #s-route{--col:calc((100vw - 2*var(--gutter))*.56);--h2:clamp(1.5rem,7svh,2.25rem);--t:min(calc(var(--col)/var(--u)),calc((100svh - var(--hdr-h) - var(--chrome-b) - 164px)/8.2))}
  html.film #s-route .frame{grid-template-columns:minmax(0,1fr) var(--col);grid-template-rows:minmax(0,1fr);column-gap:20px}
  html.film #s-route .route__top{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;padding-block:2px 0;min-inline-size:0;align-self:start}
  html.film #s-route .route__ln{white-space:normal;text-wrap:balance}
  html.film #s-route .route__copy p{font-size:.875rem;line-height:1.42}
  html.film #s-route .route__deck{grid-column:2;grid-row:1;align-content:space-between;row-gap:2px}
  html.film #s-route .route__foot{inset-block-end:0;inline-size:calc(100% - var(--col) - 20px)}
  html.film #s-route .route__foot .route__msg{display:block}
  html.film #s-route tbody tr{padding-block:calc(var(--t)*.26) 3px}
  html.film #s-route tbody{padding-block-end:23px}
  html.film #s-route .route__src{font-size:.75rem}
  html.film #s-route .route__cap{font-size:.8125rem}
}
@media (max-height:360px) and (min-aspect-ratio:9/10),(max-height:400px) and (max-width:760px) and (min-aspect-ratio:9/10){
  html.film #s-route .route__copy{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-height:340px) and (min-aspect-ratio:9/10){
  html.film #s-route .route__why{display:none}
}

@media (max-aspect-ratio:9/10){
  html.film #s-route{--h2:min(6vw,3.5rem);--t:calc((100vw - 2*var(--gutter) - var(--thread-clear))/var(--u))}
  html.film #s-route .route__sig{stroke-width:3}
  html.film #s-route .route__top{grid-template-columns:minmax(0,1fr);row-gap:clamp(8px,1.6svh,16px);padding-block-start:0}
  html.film #s-route .route__ln{white-space:normal;text-wrap:balance}
  html.film #s-route .route__copy p{font-size:var(--fs-body);line-height:1.5}
  html.film #s-route .route__foot{position:static;inline-size:auto;block-size:auto;flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;padding-block-start:clamp(4px,1svh,10px)}
  html.film #s-route .route__msg{flex:0 1 auto}
  html.film #s-route .route__foot .stat{flex:none}
  html.film #s-route tbody tr{padding-block:calc(var(--t)*.5) 5px}
}
@media (max-aspect-ratio:9/10) and (max-width:639px){
  html.film #s-route{--u:18.6;--h2:7.4vw}
  html.film #s-route tr{grid-template-columns:calc(var(--t)*3.4) calc(var(--t)*6) calc(var(--t)*7)}
  html.film #s-route tbody tr{padding-block:calc(var(--t)*.3) 4px}
  html.film #s-route .c-sup .route__f i:nth-child(-n+9){display:none}
  html.film #s-route .route__strip{grid-template-columns:auto minmax(0,1fr);column-gap:10px}
  html.film #s-route .route__now{grid-row:1}
  html.film #s-route .route__src{grid-row:1;align-self:end;flex-wrap:wrap;gap:0 .4em;font-size:.75rem;line-height:1.25}
  html.film #s-route .route__why{grid-column:1/-1;grid-row:2}
}
/* Phones with a short stage cannot hold it all at once, so the copy becomes slides: the body over
   the strip's place at p=0, then the board, then at the rest stop the detail takes the headline's
   place. Measured on the frame, not the viewport: the frame follows svh, so a collapsing URL bar
   cannot flip the layout mid-scroll. route.js reads the same 694px. */
@media (max-aspect-ratio:9/10){
  @container route (max-height:694px){
    html.film #s-route .route__top{position:relative;display:block;padding-block:0}
    html.film #s-route .route__copy{display:block}
    html.film #s-route .route__copy p{font-size:.9375rem;line-height:1.45}
    html.film #s-route .route__body{position:absolute;inset-inline:0;inset-block-start:calc(100% + 2px)}
    html.film #s-route .route__more{position:absolute;inset-inline:0;inset-block-start:0;gap:.5em}
    html.film #s-route .route__deck{align-content:end;row-gap:6px}
  }
  @container route (max-height:514px){
    html.film #s-route .route__copy p{font-size:.8125rem;line-height:1.38}
    html.film #s-route tbody{padding-block-end:20px}
    html.film #s-route tbody tr{padding-block:calc(var(--t)*.2) 3px}
    /* The tag stays on the board, its sentence stays for assistive tech. */
    html.film #s-route .route__src span:last-child{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
    html.film #s-route .route__cap{font-size:.8125rem;line-height:1.25}
  }
}
/* The narrowest phones: the words swap under the same headline, so they step down a size. */
@media (max-width:300px){
  html.film #s-route .route__copy p{font-size:.75rem;line-height:1.3}
}

/* ---- scene: hold ---- */
/* Scene: hold. Every selector starts with #s-hold.
   Hollow numerals mean held, here and in every later scene. Nothing else may use them. */

/* Base: the readable document, also what shows with no JS at all.
   The number runs the full width of the frame, so everything else hangs off its two edges.
   hold.js sets --em (its ink width in em) and the two side bearings from the font's metrics,
   because the width depends on the digits the visitor's message produces. */
#s-hold{--em:3.467;--lsb:.035;--rsb:.046;--cap:52svh;--amt-stroke:clamp(3px,.347vw,6px)}
html[lang=ar] #s-hold .hold__segs{font-family:var(--font-text)}
#s-hold .frame{container-type:inline-size}
#s-hold .hold__under{display:none}
#s-hold .hold__figure{display:flex;flex-direction:column;gap:clamp(2px,.6svh,8px)}
#s-hold .hold__strip{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.1em 2.5em;color:var(--fg-2)}
#s-hold .hold__strip .t-mono{font-size:clamp(.75rem,.95vw,.9375rem)}
#s-hold .hold__avail{color:var(--fg-strong)}
#s-hold .hold__amount{font-family:var(--font-display);font-weight:800;font-size:min(calc(100cqi/var(--em)),var(--cap));line-height:1;letter-spacing:.012em;direction:ltr;unicode-bidi:isolate;white-space:nowrap;margin-block:-.1em -.1em;display:flex}
/* A flex item, not an inline-block: clipped inline-blocks sit on a different baseline in each engine. */
#s-hold .hold__mask{flex:none;overflow:hidden;overflow:clip;margin-inline:calc(var(--lsb)*-1em) calc(var(--rsb)*-1em)}
/* The fill is the ground and the stroke is painted under it: a stroke alone shows the font's
   overlapping contours as seams inside the 3. Solid, later, is one colour change away. */
#s-hold .hold__num{display:block;color:var(--bg);-webkit-text-stroke:var(--amt-stroke) var(--fg);paint-order:stroke fill}
#s-hold .hold__opts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.5em clamp(12px,4.6vw,64px)}
#s-hold .hold__opt{position:relative;padding-block-end:.4em;font-size:clamp(.8125rem,.98vw,.9375rem);color:var(--fg-2)}
#s-hold .hold__opt--on{color:var(--fg-strong)}
#s-hold .hold__rule{position:absolute;inset-inline:0;inset-block-end:0;block-size:2px;background:var(--fg)}
#s-hold .hold__not{display:block;margin-block:.35em;font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-head);color:var(--fg-strong)}
#s-hold .hold__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4em 2em}

/* The film: one column, as wide as the number, standing on the thread at y=.8. */
html.film #s-hold .frame{display:grid;grid-template-columns:min(100%,calc(var(--cap)*var(--em)));grid-template-rows:minmax(0,1fr) auto auto auto auto;justify-content:center;gap:0}
html.film #s-hold .hold__h{grid-row:1;align-self:end;font-size:min(var(--fs-h2),3.9vw,calc(var(--cap)*var(--em)/20))}
html.film #s-hold .smsc{grid-row:2;justify-self:start;margin-block:6px clamp(8px,2.6svh,24px)}
html.film #s-hold .hold__figure{grid-row:3;grid-column:1}
html.film #s-hold .hold__body{grid-row:3;grid-column:1;align-self:center;max-inline-size:min(var(--measure),100%)}
html.film #s-hold .hold__opts{grid-row:4;justify-content:center;margin-block-start:clamp(6px,2svh,20px);padding-block-end:6px}
html.film #s-hold .hold__opt--on{color:var(--fg-2)}
html.film #s-hold .hold__opt{transition:color .14s linear}
html.film #s-hold .hold__opt.is-on{color:var(--fg-strong)}
html.film #s-hold .hold__foot{grid-row:5;align-items:center;min-block-size:calc(20svh - var(--chrome-b))}

@media (max-height:520px){
  #s-hold{--cap:36svh}
}
@media (max-aspect-ratio:9/10){
  #s-hold .hold__strip{flex-direction:column;align-items:flex-start}
  /* direction:ltr so its transform reads from the physical left in both languages. */
  html.film #s-hold .hold__under{display:block;position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100px;block-size:3px;background:var(--signal);transform-origin:0 0;opacity:0;direction:ltr}
  html.film #s-hold .frame{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;align-content:center;justify-content:stretch}
  html.film #s-hold .hold__h{font-size:var(--fs-h2)}
  html.film #s-hold .hold__body{align-self:start}
  html.film #s-hold .hold__opts{justify-content:flex-start;margin-block-start:clamp(14px,3svh,32px)}
  html.film #s-hold .hold__foot{min-block-size:0;margin-block-start:clamp(14px,3svh,32px)}
}
/* A small phone: everything still fits, each thing a little tighter. */
@media (max-aspect-ratio:9/10) and (max-height:640px){
  html.film #s-hold .hold__h{font-size:min(var(--fs-h2),8.6vw)}
  html.film #s-hold .smsc{margin-block:4px 6px}
  html.film #s-hold .hold__body{font-size:.9375rem;line-height:1.45}
  html.film #s-hold .hold__not{font-size:1.125rem}
  html.film #s-hold .hold__opts{margin-block-start:8px}
  html.film #s-hold .hold__foot{margin-block-start:8px}
  html[lang=ar].film #s-hold .hold__body{line-height:1.6}
}
/* A landscape phone on the small side: the number gives up height, and the type steps down with it. */
@media (max-height:400px) and (max-width:760px) and (min-aspect-ratio:9/10){
  #s-hold{--cap:27svh}
  html.film #s-hold .hold__h{font-size:1.125rem}
  html.film #s-hold .smsc{display:none}
  html.film #s-hold .hold__strip .t-mono{font-size:.6875rem}
  html.film #s-hold .hold__opts{margin-block-start:4px}
  html.film #s-hold .hold__body{font-size:.8125rem;line-height:1.4}
  html.film #s-hold .hold__not{font-size:1rem;margin-block:.15em}
}

/* ---- scene: break ---- */
/* Scene: break. Every selector starts with #s-break.
   The only scene that breaks the film's rhythm. Everything that is not the header goes. */

/* Base: the calm frame, also what shows with no JS at all. */
#s-break{--dir:1}
html[dir=rtl] #s-break{--dir:-1}
#s-break .brk__air,#s-break .brk__rig,#s-break .brk__word{display:none}
#s-break .brk__sub{font-family:var(--font-display);font-weight:600;font-size:var(--fs-h3);line-height:var(--lh-head);color:var(--fg-strong);text-wrap:balance}
#s-break .brk__log{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2em .8em;align-items:baseline;inline-size:fit-content;max-inline-size:100%;direction:ltr;text-align:start}
#s-break .brk__sim{grid-row:1}
#s-break .brk__line{grid-column:2;font-size:clamp(.71875rem,1.75vw,1.0625rem);color:var(--fg)}
#s-break .brk__tok,#s-break .brk__nb{white-space:nowrap}
#s-break .brk__k{color:var(--fg-2)}
#s-break .brk__v--on{color:var(--fg-strong)}
#s-break .brk__caret{display:none}
#s-break .brk__plan{position:relative;inline-size:min(100%,40rem);padding-block:1.4em}
#s-break .brk__plan svg{inline-size:100%;block-size:auto;overflow:visible;transform:scaleX(var(--dir))}
#s-break .brk__p-dash{fill:none;stroke:var(--ash-dark);stroke-width:1.5;stroke-dasharray:8 6}
#s-break .brk__p-tick{fill:none;stroke:var(--fg);stroke-width:1.5}
#s-break .brk__p-live{fill:none;stroke:var(--signal);stroke-width:5;stroke-linejoin:miter}
#s-break .brk__p-dot{fill:var(--signal)}
/* Latin only, so it can take the page's direction, and its inset then mirrors with the diagram. */
#s-break .brk__pl{position:absolute;direction:inherit;inset-inline-start:58.13%;transform:translateX(calc(-50%*var(--dir)))}
#s-break .brk__pl--b{inset-block-start:0}
#s-break .brk__pl--a{inset-block-end:0}
#s-break .brk__stack{display:flex;flex-direction:column;gap:clamp(12px,2.4svh,24px)}
#s-break .brk__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em 1.5em}

/* With JS the headline can be the broken word, in the film and in the calm version alike. It is
   the same text and stroke as the wordmark: letters, the bar, letters. AT reads the real h2. */
html.js #s-break .brk__h{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.js #s-break .brk__word{display:block;--cut:.86em;font-family:var(--font-display);font-weight:700;font-size:var(--fs-display);line-height:1.1;color:var(--fg-strong);text-wrap:balance}
html.js #s-break .brk__whole{white-space:nowrap}
/* The bar is cut once, and each end is sheared so it reads as broken, not as two dashes. */
html.js #s-break .brk__cut{display:inline-block;inline-size:var(--cut);block-size:var(--bar);background:currentColor;vertical-align:baseline;margin-inline:-.02em;clip-path:polygon(0 0,100% 0,calc(100% - .1em) 100%,0 100%);transform:scaleX(var(--dir))}
html.js #s-break .brk__cut+.brk__cut{clip-path:polygon(.1em 0,100% 0,100% 100%,0 100%)}
html[lang=en].js #s-break .brk__cut{margin-inline:-.055em}
html.js #s-break .brk__cut:first-of-type{margin-inline-end:.2em}

/* The film. The log line sits at the centre of the stage, so it stays put through the cuts. */
/* Everything goes but the header: the rail is a later sibling of the scene in the stage. */
html.film #s-break.is-void~#rail{visibility:hidden}
html.film #s-break .brk__air{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none}
html.film #s-break .brk__rig{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none}
html.film #s-break .brk__ahead{fill:none;stroke:var(--hairline-strong);stroke-width:1}
html.film #s-break .brk__ghost{fill:none;stroke:var(--ash-dark);stroke-width:1.5;stroke-dasharray:8 6;opacity:.4}
html.film #s-break .brk__dash{fill:none;stroke:var(--bone);stroke-width:1.5;stroke-dasharray:8 6}
html.film #s-break .brk__tick{fill:none;stroke:var(--fg);stroke-width:1.5}
html.film #s-break .brk__lab{font-family:var(--font-mono);font-size:.75rem;fill:var(--fg);direction:ltr}
html.film #s-break .brk__lab--try,html.film #s-break .brk__pre .brk__lab--b{fill:var(--fg-2)}
html.film #s-break .brk__pre .brk__tick--b,html.film #s-break .brk__failed .brk__tick,html.film #s-break .brk__next .brk__tick{stroke:var(--fg-2)}
html.film #s-break .brk__failed .brk__lab,html.film #s-break .brk__next .brk__lab{fill:var(--fg-2)}
/* The route that took the message is the one label that stays lit. */
html.film #s-break .brk__next[data-taken="1"] .brk__lab{fill:var(--fg-strong)}
html.film #s-break .brk__next[data-taken="1"] .brk__tick{stroke:var(--fg-strong)}
html.film #s-break .brk__end,html.film #s-break .brk__road,html.film #s-break .brk__live{fill:none;stroke:var(--signal);stroke-linejoin:miter}

html.film #s-break .brk__plan{display:none}
/* The headline stands over the log, whose line is typed at the centre of the stage. Under it the
   text keeps to the reading start, on the log's start edge, and the ladder has the reading end. */
html.film #s-break .frame{--top:calc(43svh - var(--hdr-h));--col:min(100%,36rem,46vw);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--top) auto;justify-items:center;align-content:start;gap:0;text-align:center}
html.film #s-break .brk__title{align-self:end;position:relative;max-inline-size:100%}
html.film #s-break .brk__word{font-size:clamp(3rem,min(7.6vw,14svh),12rem)}
html[lang=ar].film #s-break .brk__word{font-size:clamp(3.5rem,min(9.4vw,17svh),14rem);line-height:1.24}
html.film #s-break .smsc{position:absolute;inset-block-start:.6em;inset-inline-start:100%;margin-inline-start:.8em}
/* The counter's own direction is LTR, so its logical sides do not flip with the page. */
html[dir=rtl].film #s-break .smsc{inset-inline:auto 100%;margin-inline:0 .8em}
html.film #s-break .brk__stack{inline-size:fit-content;max-inline-size:100%;gap:0;text-align:start}
html.film #s-break .brk__log{order:-1;margin-block:clamp(10px,2svh,20px) clamp(14px,3.2svh,32px)}
html[lang=ar].film #s-break .brk__log{margin-block-start:clamp(18px,3.4svh,34px)}
/* Sized by the log alone: a paragraph's natural width must not stretch the column. */
html.film #s-break .brk__sub,html.film #s-break .brk__body,html.film #s-break .brk__foot{inline-size:0;min-inline-size:var(--col)}
html.film #s-break .brk__sub{margin-block-end:clamp(6px,1.2svh,12px)}
html.film #s-break .brk__body{max-inline-size:none;text-wrap:balance}
html.film #s-break .brk__foot{margin-block-start:clamp(8px,1.6svh,16px)}
html.film #s-break .brk__off{opacity:0}
html.film #s-break .brk__caret{inline-size:0;block-size:1em;position:relative;vertical-align:text-bottom}
html.film #s-break .brk__caret::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:.6em;background:var(--fg);opacity:var(--blink,1)}

/* Short laptops: the stack starts higher, so it still clears the line. */
@media (max-height:700px) and (min-aspect-ratio:9/10){
  html.film #s-break .frame{--top:calc(35svh - var(--hdr-h))}
  html.film #s-break .brk__body{font-size:.9375rem;line-height:1.45}
  html[lang=ar].film #s-break .brk__body{line-height:1.6}
}
/* A squarish window: the headline is width-bound and small, so the stack can start higher. */
@media (max-aspect-ratio:5/4) and (min-aspect-ratio:9/10){
  html.film #s-break .frame{--top:calc(30svh - var(--hdr-h))}
}
/* A small window that is not tall: less headline above, a wider column beside the ladder. */
@media (max-width:800px) and (min-aspect-ratio:9/10){
  html.film #s-break .frame{--top:calc(25svh - var(--hdr-h));--col:min(100%,54vw)}
}
/* The tall film: the same beats down the reading-end edge. The headline takes two lines. */
@media (max-aspect-ratio:9/10){
  html.film #s-break .frame{--col:100%;grid-template-rows:auto auto;align-content:center}
  html.film #s-break .brk__title{align-self:auto}
  html.film #s-break .brk__word{--cut:.7em;font-size:min(14.5vw,11svh);line-height:1.08}
  html[lang=ar].film #s-break .brk__word{font-size:min(16vw,12svh);line-height:1.2}
  html.film #s-break .smsc,html[dir=rtl].film #s-break .smsc{position:static;margin:.5em 0 0}
  html.film #s-break .brk__lab{font-size:.6875rem}
}
/* The SIM tag takes its own row, so the log only wraps at its = boundaries. */
@media (max-width:639px){
  #s-break .brk__log{grid-template-columns:minmax(0,1fr)}
  #s-break .brk__line{grid-column:1}
  #s-break .brk__sim{justify-self:start}
}
/* A small phone: the same frame in smaller type. */
@media (max-aspect-ratio:9/10) and (max-height:640px){
  html.film #s-break .brk__word{line-height:1.04}
  html.film #s-break .smsc,html[dir=rtl].film #s-break .smsc{margin-block-start:.2em}
  html.film #s-break .brk__line{font-size:.65625rem}
  html.film #s-break .brk__log,html[lang=ar].film #s-break .brk__log{margin-block:4px 6px;gap:.1em .8em}
  html.film #s-break .brk__sub{font-size:1.0625rem;margin-block-end:3px}
  html.film #s-break .brk__body{font-size:.875rem;line-height:1.4}
  html[lang=ar].film #s-break .brk__body{line-height:1.55}
  html.film #s-break .brk__foot{margin-block-start:3px}
  html.film #s-break .brk__trip{font-size:.75rem;line-height:1.3}
}
/* A landscape phone has no Row and little height: the headline, then two columns above the line. */
@media (max-height:520px) and (min-aspect-ratio:9/10){
  html.film #s-break .frame{--col:100%;grid-template-rows:auto auto;justify-items:stretch;text-align:start;padding-block-start:4px}
  html.film #s-break .brk__title{align-self:start;display:flex;align-items:baseline;gap:1em}
  html.film #s-break .brk__word,html[lang=ar].film #s-break .brk__word{text-wrap:nowrap}
  html.film #s-break .brk__word{font-size:min(5.4vw,12svh);line-height:1.2}
  html[lang=ar].film #s-break .brk__word{font-size:min(6.2vw,14svh);line-height:1.2}
  html.film #s-break .smsc,html[dir=rtl].film #s-break .smsc{position:static;margin:0}
  html.film #s-break .brk__stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto auto;column-gap:clamp(16px,3vw,32px);inline-size:100%;margin-block-start:4px}
  html.film #s-break .brk__log,html[lang=ar].film #s-break .brk__log{grid-column:1;grid-row:1 / span 3;align-self:start;margin:0}
  html.film #s-break .brk__line{font-size:.6875rem}
  html.film #s-break .brk__sub{grid-column:2;grid-row:1;font-size:1.0625rem;margin-block-end:2px}
  html.film #s-break .brk__body{grid-column:2;grid-row:2;font-size:.78125rem;line-height:1.38}
  html[lang=ar].film #s-break .brk__body{line-height:1.5}
  html.film #s-break .brk__foot{display:contents}
  html.film #s-break .brk__stat{grid-column:1;grid-row:4;justify-self:start;margin-block-start:2px}
  html.film #s-break .brk__trip{grid-column:2;grid-row:3;margin-block-start:2px}
  html.film #s-break .brk__trip{font-size:.71875rem;line-height:1.3}
}
/* The smallest landscape phones: tighter still, so the text stays clear of the ladder. */
@media (max-height:360px) and (min-aspect-ratio:9/10){
  html.film #s-break .brk__stack{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);column-gap:12px}
  html.film #s-break .brk__line{font-size:.65625rem}
  html.film #s-break .brk__sub{font-size:.9375rem}
  html.film #s-break .brk__body{font-size:.75rem;line-height:1.35}
  html[lang=ar].film #s-break .brk__body{line-height:1.45}
  html.film #s-break .brk__trip{font-size:.6875rem}
  html.film #s-break .brk__lab--b{display:none}
}
/* The narrowest phones: the column runs long, so everything steps down once more. */
@media (max-width:300px){
  html.film #s-break .brk__word{font-size:12.5vw}
  html[lang=ar].film #s-break .brk__word{font-size:14vw}
  html.film #s-break .brk__sub{font-size:1rem}
  html.film #s-break .brk__body{font-size:.8125rem;line-height:1.4}
  html.film #s-break .brk__trip{font-size:.75rem;line-height:1.3}
}

/* ---- scene: delivered ---- */
/* Scene: delivered. Every selector starts with #s-delivered.
   Base rules are the dossier: the document on Paper, already resolved. No flash exists here. */

#s-delivered .dlv__paper,
#s-delivered .dlv__night,
#s-delivered .dlv__phone,
#s-delivered .dlv__head { display: none; }

#s-delivered .frame { gap: clamp(14px, 2.6svh, 28px); }
#s-delivered .dlv__poster { position: relative; padding-block-start: clamp(44px, 9vw, 120px); }
#s-delivered .dlv__word {
  font-size: clamp(5rem, min(27vw, 46svh), 30rem);
  line-height: 1;
  color: var(--fg-strong);
  font-variation-settings: "ELGR" 1, "ELSH" 2;
  white-space: nowrap;
}
html[lang=ar] #s-delivered .dlv__word { font-size: clamp(7rem, min(40vw, 56svh), 40rem); line-height: 1.2; }
/* Grey slivers in Chromium below 256 device pixels, see layout() in delivered.js. */
@media (max-width: 640px) and (max-resolution: 1.5dppx), (max-width: 330px) {
  html[lang=ar] #s-delivered .dlv__word { font-variation-settings: "ELGR" 1.03, "ELSH" 2; }
}
#s-delivered .dlv__stamp {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  font-size: clamp(3rem, min(11vw, 20svh), 12rem);
  color: var(--signal);
  transform: rotate(-5deg);
}
#s-delivered .dlv__line { max-inline-size: 26em; }
html[lang=ar] #s-delivered .dlv__line { font-size: clamp(1.5rem, min(3vw, 5svh), 3rem); }
#s-delivered .dlv__report { display: grid; gap: clamp(10px, 1.6svh, 16px); }
#s-delivered .dlv__wire { display: grid; gap: 8px; }
#s-delivered .dlv__src { align-items: center; }
#s-delivered .dlv__nb { white-space: nowrap; }
#s-delivered .dlv__dlr { color: var(--fg-2); overflow-wrap: anywhere; text-align: start; }
html[dir=rtl] #s-delivered .dlv__dlr { text-align: end; } /* The element is LTR, so end is the reading start. */
#s-delivered .dlv__dlr b { font-weight: 400; color: var(--fg-strong); }
#s-delivered .dlv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
#s-delivered .dlv__held { font-family:var(--font-mono); font-size: var(--fs-mono); line-height: 1.4; color: var(--fg); }

/* ---- Film ---- */
html.film #s-delivered .frame { display: block; }

/* Under everything of ours: the day. Its edge is the thread bar itself, see delivered.js. */
html.film #s-delivered .dlv__paper {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--paper);
  visibility: hidden;
}

html.film #s-delivered .dlv__night {
  display: block;
  position: absolute;
  inset-block: var(--hdr-h) var(--chrome-b);
  inset-inline: var(--gutter);
  padding-block-start: 30svh;
  padding-inline-end: calc(var(--thread-clear) + 4%);
}
/* A shrink-wrapped box in a block that keeps the page's direction. dir=auto on the message can
   then never move it: logical properties on the element itself would flip with the visitor's text. */
html.film #s-delivered .dlv__ask {
  display: inline-block;
  max-inline-size: 100%;
  max-block-size: 4.2em;
  overflow: hidden;
  color: var(--bone);
  overflow-wrap: anywhere;
}
html.film #s-delivered .dlv__ask.is-long { font-size: var(--fs-h2); }
html.film #s-delivered .dlv__ask.is-longer { font-size: var(--fs-h3); }

/* One plain outline. The Row covers its foot, so it stands on the Row. */
html.film #s-delivered .dlv__phone {
  --ph: clamp(120px, 29svh, 340px);
  display: block;
  position: absolute;
  block-size: var(--ph);
  inline-size: calc(var(--ph) / 2);
  inset-block-start: calc(80% - var(--ph) / 2);
  inset-inline-end: calc(14% - var(--ph) / 4);
  color: var(--bone);
}
#s-delivered .dlv__phone svg { inline-size: 100%; block-size: 100%; overflow: visible; }
#s-delivered .dlv__phone rect,
#s-delivered .dlv__phone path { fill: none; stroke: currentColor; stroke-width: 1.75px; vector-effect: non-scaling-stroke; }

/* The message on the handset, in the one colour. Ink on Signal is 4.68:1. */
html.film #s-delivered .dlv__sms {
  position: absolute;
  inset-inline: 8%;
  inset-block-start: 50%;
  translate: 0 -50%;
  padding: .45em .6em;
  background: var(--signal);
  color: var(--ink);
  font-family:var(--font-text);
  font-weight: 600;
  font-size: clamp(.6875rem, 1.5svh, .875rem);
  line-height: 1.3;
  visibility: hidden;
}
#s-delivered .dlv__sms span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* The poster: the word and the stamp, moved as one. */
html.film #s-delivered .dlv__poster {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--dlv-pw, 100%);
  padding: 0;
  transform-origin: 0 0;
}
html.film[dir=rtl] #s-delivered .dlv__poster { transform-origin: 100% 0; }
html.film #s-delivered .dlv__word {
  font-size: var(--dlv-f, 20vw);
  line-height: var(--dlv-lh, 1);
  white-space: var(--dlv-wrap, nowrap);
  margin-inline-start: var(--dlv-bear, 0);
}
html.film #s-delivered .dlv__stamp {
  inset-block-start: var(--dlv-sy, 0);
  inset-inline-end: var(--dlv-sx, 0);
  font-size: var(--dlv-s, 12vw);
  transform: none;
  visibility: hidden;
}
html.film #s-delivered .dlv__head {
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--ink);
  opacity: 0;
}

/* Beside the word it counts: the one place the conceit pays off. */
html.film #s-delivered .smsc {
  position: absolute;
  inset-block-start: calc(var(--dlv-it, 0px) - 1.7em);
  inset-inline-start: 0;
}

html.film #s-delivered .dlv__report {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(100% - var(--dlv-y) + 22px);
  max-inline-size: 74%;
  gap: clamp(8px, 1.5svh, 14px);
}
html.film #s-delivered .dlv__line {
  max-inline-size: none;
  font-size: clamp(1.5rem, min(2.9vw, 5.2svh), 3rem);
  line-height: 1.16;
  text-wrap: pretty;
}
html.film[dir=rtl] #s-delivered .dlv__line { line-height: 1.34; }

html.film #s-delivered .dlv__wire {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--dlv-y) + 12px);
  gap: 3px;
}
html.film #s-delivered .dlv__src { font-size: .75rem; }
html.film #s-delivered .dlv__dlr { position: relative; color: var(--ash-light); }
html.film #s-delivered .dlv__dlr i { font-style: normal; color: transparent; }
html.film #s-delivered .dlv__caret { position: relative; display: inline-block; inline-size: 0; }
html.film #s-delivered .dlv__caret[hidden] { display: none; }
html.film #s-delivered .dlv__caret::after {
  content: "";
  position: absolute;
  inset-block-end: -.14em;
  inset-inline-start: 1px;
  inline-size: .58em;
  block-size: 1.06em;
  background: var(--ink);
}
/* Over the Row's own cell when the full table is on screen. */
html.film #s-delivered .dlv__held.is-pinned { position: absolute; white-space: nowrap; }
html.film #s-delivered .dlv__held.is-pinned::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 6px;
  background: var(--hairline-strong);
}
html.film[dir=rtl] #s-delivered .dlv__held.is-pinned::after { inset-inline: auto 0; } /* Pinned to a cell of the LTR Row. */

/* Portrait: the column ends short of the thread, the handset bleeds off the reading end. */
html.film #s-delivered[data-fit=tall] .dlv__phone {
  --ph: clamp(210px, 54vw, 420px);
  inset-block-start: 77%;
  inset-inline-end: calc(5.5% - var(--ph) / 4);
}
html.film #s-delivered[data-fit=tall] .dlv__sms {
  inset-block-start: 15%;
  translate: none;
  inset-inline: 7% 36%;
  font-size: clamp(.6875rem, 2.8vw, .9375rem);
}
#s-delivered[data-fit=tall] .dlv__sms span { -webkit-line-clamp: 3; }
html.film #s-delivered[data-fit=tall] .dlv__report {
  inset-block: var(--dlv-rt, 40%) auto;
  max-inline-size: none;
  inset-inline-end: var(--thread-clear);
}
html.film #s-delivered[data-fit=tall] .dlv__wire {
  inset-block-start: var(--dlv-wt, 70%);
  inset-inline-end: var(--thread-clear);
}
html.film #s-delivered[data-fit=tall] .dlv__line { font-size: clamp(1.1875rem, 5.2vw, 2.25rem); }
html.film[dir=rtl] #s-delivered[data-fit=tall] .dlv__line { font-size: clamp(1.4375rem, 6.4vw, 2.625rem); }
html.film #s-delivered[data-fit=tall] .dlv__night { padding-block-start: 27svh; }
html.film #s-delivered[data-fit=tall] .dlv__ask { font-size: clamp(2.75rem, 13.5vw, 6rem); line-height: 1.12; }
html.film #s-delivered[data-fit=tall] .dlv__ask.is-long { font-size: var(--fs-h2); }
html.film #s-delivered[data-fit=tall] .dlv__ask.is-longer { font-size: var(--fs-h3); }

/* Short landscape: the word and the report side by side, the Row is gone. */
html.film #s-delivered[data-fit=short] .dlv__report {
  inset-block: 0 auto;
  inset-inline: auto 0;
  inline-size: 48%;
  max-inline-size: none;
}
html.film #s-delivered[data-fit=short] .dlv__line { font-size: 1.125rem; }
html.film #s-delivered[data-fit=short] .dlv__body { font-size: .875rem; line-height: 1.45; }
html.film #s-delivered[data-fit=short] .dlv__src span:not(.tag) { display: none; }

/* A low window: one row under the thread. */
html.film #s-delivered[data-tight] .dlv__wire { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; inset-block-start: calc(var(--dlv-y) + 9px); }
html.film #s-delivered[data-tight] .dlv__meta { flex: none; flex-wrap: nowrap; gap: 12px; }
html.film #s-delivered[data-tight] .dlv__src span:not(.tag) { display: none; }
html.film #s-delivered[data-tight] .dlv__dlr { white-space: nowrap; }

/* ---- scene: invoice ---- */
/* Scene: invoice. Every selector starts with #s-invoice.
   The base rules are the finished document. The film adds to it from "Film" down. */

#s-invoice{--sp:clamp(14px,3.1vw,44px);--rh:clamp(30px,5.2svh,52px)}
#s-invoice .inv__strip,#s-invoice .inv__fly,#s-invoice .inv__line,#s-invoice .inv__marks,#s-invoice .inv__wall,#s-invoice .inv__shade,#s-invoice .inv__veil{display:none}

/* ---- Copy ---- */
#s-invoice .frame{min-block-size:0;justify-content:flex-start;padding-block-end:clamp(20px,4svh,36px)}
#s-invoice .inv__copy{display:grid;gap:clamp(12px,2.4svh,22px)}
#s-invoice .inv__head{display:flex;flex-direction:column;gap:6px}
#s-invoice .inv__beat{display:block}
#s-invoice .inv__status{display:grid;gap:6px;font-size:var(--fs-small);color:var(--fg-2);line-height:1.45}
#s-invoice .inv__status li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.75em;align-items:baseline}
html[lang=ar] #s-invoice .inv__status{line-height:1.6}

/* ---- Paper ---- */
#s-invoice .inv__desk{display:grid;gap:clamp(20px,4svh,36px);padding-inline:var(--gutter);padding-block-end:clamp(32px,8svh,72px)}
#s-invoice .inv__sheet,#s-invoice .inv__edr{position:relative;min-inline-size:0;background:var(--paper-2);color:var(--ink);box-shadow:0 0 0 1px var(--hairline);container-type:inline-size}
#s-invoice .inv__in,#s-invoice .inv__ein{display:flex;flex-direction:column;gap:clamp(14px,2.6svh,26px);padding:var(--sp)}

#s-invoice .inv__top,#s-invoice .inv__etop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 24px}
#s-invoice .inv__ref{min-inline-size:0}
#s-invoice .inv__no{font-size:clamp(3rem,10.5cqi,5.75rem);color:var(--ink);letter-spacing:.01em;white-space:nowrap}
/* On a narrow sheet the number takes the full measure: thirteen characters at 5.2em. */
@container (max-width:520px){
  #s-invoice .inv__no{font-size:calc((100cqi - 2*var(--sp))/5.28);letter-spacing:-.012em}
}
#s-invoice .inv__meta{display:grid;justify-items:start;gap:4px}

/* The line. Latin, mono and left to right on both pages: it is what the query returns. */
#s-invoice .inv__sql{display:block;margin-block-end:8px;overflow-wrap:anywhere;font-size:.6875rem}
#s-invoice .inv__tbl{direction:ltr;inline-size:100%;border-collapse:collapse;color:var(--ink);font-size:clamp(.8125rem,2.3cqi,1.3125rem);line-height:1.3}
#s-invoice .inv__tbl th{font-weight:400;font-size:var(--fs-mono);color:var(--ash-light);text-align:start;padding-block:.5em}
#s-invoice .inv__tbl td{padding-block:.55em;text-align:start}
#s-invoice .inv__tbl .inv__n{text-align:end}
/* The layout mirrors, the values inside it stay LTR. */
html[dir=rtl] #s-invoice .inv__tbl,html[dir=rtl] #s-invoice .inv__sumk{direction:rtl}
html[dir=rtl] #s-invoice .inv__sql{text-align:right}
html[dir=rtl] #s-invoice .inv__facts{justify-content:flex-end}
#s-invoice .inv__tbl thead th{border-block-start:1.5px solid var(--ink);border-block-end:1px solid var(--hairline-strong)}
#s-invoice .inv__tbl tbody td{border-block-end:1px solid var(--hairline-strong)}
#s-invoice .inv__tbl tfoot th{padding-block:.6em 0}
#s-invoice .inv__tbl tfoot td{padding-block:.6em 0;font-size:var(--fs-mono);color:var(--ash-light)}
#s-invoice .inv__why{font-family:var(--font-text);margin-inline-start:.6em}
#s-invoice .inv__was{display:none}

/* The total. Solid, because it was earned. Fitted to the sheet by msg and build. */
#s-invoice .inv__sum{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(4px,1svh,10px);direction:ltr}
#s-invoice .inv__sumk{display:flex;justify-content:space-between}
#s-invoice .inv__total{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,27cqi,17rem);line-height:.74;letter-spacing:-.018em;color:var(--ink);white-space:nowrap;text-align:end;text-shadow:0 1px 0 var(--paper)}
#s-invoice .inv__tv{display:inline-block}

/* The bookkeeper's double rule: the film's stroke, and a printed hairline under it. */
#s-invoice .inv__foot{position:relative;padding-block-start:clamp(12px,1.9svh,18px);margin-block-start:clamp(6px,1svh,10px)}
#s-invoice .inv__rule{position:absolute;inset-block-start:-1.5px;inset-inline:0;block-size:3px;background:var(--signal)}
#s-invoice .inv__rule2{position:absolute;inset-block-start:5px;inset-inline:0;block-size:1px;background:var(--ink)}
#s-invoice .inv__plate{align-items:baseline;font-size:.8125rem;line-height:1.5;max-inline-size:44rem}
html[lang=ar] #s-invoice .inv__plate{font-size:.875rem;line-height:1.65}

/* ---- The partner's file ---- */
#s-invoice .inv__edr{background:var(--paper)}
#s-invoice .inv__file{font-size:clamp(.875rem,2.2cqi,1.25rem);color:var(--ink)}
#s-invoice .inv__etbl{inline-size:100%;table-layout:fixed;border-collapse:collapse;color:var(--ink);font-size:clamp(.75rem,2.1cqi,1.1875rem);line-height:1.3}
html[dir=rtl] #s-invoice .inv__etbl{direction:rtl}
#s-invoice .inv__etbl th:nth-child(1),#s-invoice .inv__etbl th:nth-child(2){inline-size:22%}
#s-invoice .inv__etbl th:nth-child(3){inline-size:20%}
#s-invoice .inv__etbl th:nth-child(4){inline-size:15%}
#s-invoice .inv__etbl th{font-weight:400;font-size:var(--fs-mono);color:var(--ash-light);text-align:start;padding-block:.5em;border-block-start:1.5px solid var(--ink);border-block-end:1px solid var(--hairline-strong)}
#s-invoice .inv__etbl td{block-size:var(--rh);padding:0;padding-inline-end:clamp(6px,2cqi,20px);border-block-end:1px solid var(--hairline);text-align:start;vertical-align:middle;white-space:nowrap}
#s-invoice .inv__etbl span{display:inline-block;direction:ltr;unicode-bidi:isolate}
#s-invoice .inv__diff td{border-block-end:3px solid var(--signal)}
#s-invoice .inv__act{position:relative}
#s-invoice .inv__disp{font-size:clamp(3rem,7.6cqi,4.25rem);color:var(--ink);line-height:.8}
html[lang=ar] #s-invoice .inv__disp{direction:rtl}
#s-invoice .inv__efoot{display:grid;gap:4px}
#s-invoice .inv__facts{display:flex;flex-wrap:wrap;gap:2px 1.6em;direction:ltr}
#s-invoice .inv__facts b{font-weight:400;color:var(--ink)}
#s-invoice .inv__tallonly{display:none}
#s-invoice .inv__enote{color:var(--ash-light)}

@media (min-width:1100px){
  html:not(.film) #s-invoice .inv__desk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}
@media (min-width:900px){
  html:not(.film) #s-invoice .frame{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(16px,3svh,28px) clamp(24px,4vw,64px);align-items:end}
}
/* A phone has room for the number and its status. The label and value pairs keep all five columns. */
@media (max-width:639px){
  #s-invoice .inv__tbl,#s-invoice .inv__tbl tbody,#s-invoice .inv__tbl tfoot,#s-invoice .inv__tbl tr{display:block}
  #s-invoice .inv__tbl thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  #s-invoice .inv__tbl tbody{border-block-start:1.5px solid var(--ink)}
  #s-invoice .inv__tbl tbody td,#s-invoice .inv__tbl tfoot th,#s-invoice .inv__tbl tfoot td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-block:.34em;text-align:end}
  #s-invoice .inv__tbl tbody td{border-block-end:1px solid var(--hairline)}
  #s-invoice .inv__tbl tbody td::before{content:attr(data-l);color:var(--ash-light);font-size:var(--fs-mono)}
  #s-invoice .inv__tbl tfoot tr{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  #s-invoice .inv__tbl tfoot th,#s-invoice .inv__tbl tfoot td{display:block;padding-block:.34em 0}
  #s-invoice .inv__etbl th:nth-child(2),#s-invoice .inv__etbl td:nth-child(2),#s-invoice .inv__etbl th:nth-child(4),#s-invoice .inv__etbl td:nth-child(4){display:none}
  #s-invoice .inv__etbl th:nth-child(1){inline-size:40%}
  #s-invoice .inv__etbl th:nth-child(3){inline-size:22%}
  #s-invoice .inv__tallonly{display:inline}
}

/* ---- Film ---- */
html.film #s-invoice{--top:calc(var(--hdr-h) + 8px);--bot:calc(var(--rail-h) + 8px);--foot:calc(20svh - var(--bot));--start:34.5%;--end:var(--gutter)}
html.film #s-invoice .frame{inset-inline-end:calc(100% - var(--start) + 2.2%);padding:0;display:grid;grid-template-rows:calc(80svh - var(--hdr-h)) minmax(0,1fr);gap:0}
html.film #s-invoice .inv__copy{align-self:start;align-content:start;padding-block-start:clamp(8px,2.4svh,24px)}
html.film #s-invoice .inv__status{align-self:start;padding-block-start:clamp(8px,1.6svh,16px);font-size:clamp(.6875rem,1.5svh,.8125rem);gap:clamp(1px,.3svh,3px);line-height:1.35}
html.film #s-invoice .inv__body{max-inline-size:none}

html.film #s-invoice .inv__desk{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
html.film #s-invoice .inv__sheet,html.film #s-invoice .inv__edr,html.film #s-invoice .inv__wall,html.film #s-invoice .inv__marks{position:absolute;inset-block:var(--top) var(--bot);inset-inline:var(--start) var(--end)}
html.film #s-invoice .inv__sheet,html.film #s-invoice .inv__wall{background:var(--paper-2)}
html.film #s-invoice .inv__wall{inset-block-start:var(--inv-wall,var(--top))}
html.film #s-invoice[data-nowall] .inv__wall{display:none}

/* The print shop's corner marks hold the place the paper turns in. */
html.film #s-invoice .inv__marks{display:block}
html.film #s-invoice[data-cover] .inv__marks{display:none}
html.film #s-invoice .inv__marks i{position:absolute;inline-size:10px;block-size:10px;border-block-start:1px solid var(--hairline-strong);border-inline-start:1px solid var(--hairline-strong)}
html.film #s-invoice .inv__marks i:nth-child(1){inset-block-start:-5px;inset-inline-start:-5px}
html.film #s-invoice .inv__marks i:nth-child(2){inset-block-start:-5px;inset-inline-end:-5px;border-inline-start:0;border-inline-end:1px solid var(--hairline-strong)}
html.film #s-invoice .inv__marks i:nth-child(3){inset-block-end:-5px;inset-inline-start:-5px;border-block-start:0;border-block-end:1px solid var(--hairline-strong)}
html.film #s-invoice .inv__marks i:nth-child(4){inset-block-end:-5px;inset-inline-end:-5px;border-block-start:0;border-block-end:1px solid var(--hairline-strong);border-inline-start:0;border-inline-end:1px solid var(--hairline-strong)}

/* The front of the sheet: continuous stationery, ruled in bands, punched down both edges. */
html.film #s-invoice .inv__wall{display:block;overflow:hidden;font-size:clamp(.625rem,.76vw,.875rem);--lh:1.36em;background-image:repeating-linear-gradient(to bottom,var(--paper-2) 0 calc(var(--lh)*3),var(--paper) calc(var(--lh)*3) calc(var(--lh)*6));box-shadow:0 0 0 1px var(--hairline)}
html.film #s-invoice .inv__wall::before,html.film #s-invoice .inv__wall::after{content:"";position:absolute;inset-block:0;inline-size:22px;background:radial-gradient(circle,var(--bg) 3.6px,transparent 4.2px) 0 0/22px 20px repeat-y;z-index:1}
html.film #s-invoice .inv__wall::before{inset-inline-start:0;border-inline-end:1px dotted var(--hairline-strong)}
html.film #s-invoice .inv__wall::after{inset-inline-end:0;border-inline-start:1px dotted var(--hairline-strong)}
html.film #s-invoice .inv__rows{position:absolute;inset:calc(var(--lh)*2) 30px 0;margin:0;overflow:hidden;direction:ltr;text-align:start;font-family:var(--font-mono);font-size:1em;line-height:var(--lh);color:var(--ash-light);white-space:pre}
/* Its own strip above the rows, so it never sits on top of live text. */
html.film #s-invoice .inv__wall-src{position:absolute;inset-block-start:0;inset-inline:30px;block-size:calc(var(--lh)*2);display:flex;align-items:center;justify-content:flex-end;gap:.6em;z-index:1;border-block-end:1px solid var(--hairline)}
html.film #s-invoice .inv__wall-src .t-label{color:var(--ink)}
html.film #s-invoice .inv__shade{display:block;position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none;z-index:2}

/* The sheet reads down to the line at .8: everything above it, the plate below it. */
html.film #s-invoice .inv__in{block-size:100%;gap:clamp(8px,1.7svh,18px);padding-block:clamp(12px,2.2svh,24px) 0}
html.film #s-invoice .inv__bill{margin-block-start:auto}
html.film #s-invoice .inv__sum{margin-block-start:auto}
html.film #s-invoice .inv__foot{flex:none;display:flex;flex-direction:column;justify-content:flex-end;block-size:var(--foot);margin-block-start:clamp(4px,.8svh,8px);padding-block-end:clamp(10px,2svh,20px)}
html.film #s-invoice .inv__rule{visibility:hidden}
html.film #s-invoice .inv__total{font-size:min(27cqi,26svh)}
html.film #s-invoice .inv__roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
html.film #s-invoice .inv__was{display:block;position:absolute;inset-block-start:0;inset-inline-end:0}
html.film #s-invoice .inv__now{display:block}

/* The partner's sheet is paper over paper: the veil is the sheet's body, the multiply its surface,
   so the invoice dims only where the sheet really covers it. They travel together. */
html.film #s-invoice .inv__veil{display:block;position:absolute;background:var(--paper-2);opacity:.96}
html.film #s-invoice .inv__veil,html.film #s-invoice .inv__edr{inset-block:calc(var(--top) - 6px) var(--bot);inset-inline:calc(var(--start) - 8px) calc(var(--end) + 8px)}
html.film #s-invoice .inv__edr{mix-blend-mode:multiply;box-shadow:0 0 0 1px var(--hairline-strong)}
html.film #s-invoice .inv__ein{block-size:100%;gap:clamp(6px,1.4svh,14px);padding-block:clamp(12px,2.2svh,24px) 0}
html.film #s-invoice .inv__etop{margin-block-start:auto}
html.film #s-invoice .inv__etbl tbody tr:last-child td{border-block-end:0}
html.film #s-invoice .inv__disp{position:absolute;inset-block-end:.26em;inset-inline-end:0}
html.film #s-invoice .inv__efoot{flex:none;block-size:calc(var(--foot) + 6px);padding-block-start:clamp(12px,1.9svh,18px);align-content:start}

/* The strip wears the Row's own classes, so at every width it is the Row, cell for cell. */
html.film #s-invoice .inv__strip{display:flex;position:absolute;inset-inline:0;inset-block-end:var(--rail-h);block-size:var(--row-h);direction:ltr;align-items:stretch;font-family:var(--font-mono);font-size:.6875rem;line-height:1.35;color:var(--fg)}
html.film #s-invoice .inv__strip-bg{position:absolute;inset:0;background:var(--raised);border-block-start:1px solid var(--hairline)}
html.film #s-invoice .inv__strip>span,html.film #s-invoice .inv__strip>div{position:relative}
html.film #s-invoice .inv__fly{display:block;position:absolute;inset:0;direction:ltr;overflow:hidden;pointer-events:none}
html.film #s-invoice .inv__fly span{position:absolute;inset-block-start:0;inset-inline-start:0;font-size:.6875rem;line-height:1.35;color:var(--ink);white-space:nowrap;transform-origin:0 0;visibility:hidden}
html.film #s-invoice .inv__fly [data-f=sub]{padding-inline:.35em;background:var(--ink);color:var(--paper)}
html.film #s-invoice .inv__line{position:absolute;display:none;block-size:3px;background:var(--signal);transform-origin:0 50%}
html[dir=rtl].film #s-invoice .inv__line{transform-origin:100% 50%}

/* Tall: the sheet takes the column, and the partner's file replaces it. */
@media (max-aspect-ratio:9/10){
  html.film #s-invoice{--foot:calc(24svh - var(--bot));--start:var(--gutter);--end:calc(var(--gutter) + var(--thread-clear));--top:var(--inv-top,calc(var(--hdr-h) + 6px));--rh:clamp(26px,4.5svh,42px)}
  html.film #s-invoice .frame{inset-inline-end:var(--gutter);display:flex;flex-direction:column;gap:clamp(10px,1.8svh,18px)}
  html.film #s-invoice .inv__copy{padding-block-start:clamp(6px,1.2svh,12px);align-self:stretch}
  html.film #s-invoice .inv__status{align-self:stretch;padding-block-start:0}
  html.film #s-invoice .inv__body{max-inline-size:var(--measure)}
  html.film #s-invoice .inv__veil{display:none}
  html.film #s-invoice .inv__edr{mix-blend-mode:normal;background:var(--paper-2);inset-block-start:var(--top);inset-inline:var(--start) var(--end);box-shadow:0 0 0 1px var(--hairline)}
  html.film #s-invoice .inv__etbl th:nth-child(1){inline-size:42%}
  html.film #s-invoice .inv__etbl th:nth-child(3){inline-size:24%}
  html.film #s-invoice .inv__efoot{block-size:var(--foot)}
  html.film #s-invoice .inv__line{display:block}
  html.film #s-invoice .inv__etbl th:nth-child(2),html.film #s-invoice .inv__etbl td:nth-child(2),html.film #s-invoice .inv__etbl th:nth-child(4),html.film #s-invoice .inv__etbl td:nth-child(4){display:none}
  html.film #s-invoice .inv__tallonly{display:inline}
}
@media (min-aspect-ratio:9/10){
  html.film[lang=en] #s-invoice .inv__h{font-size:min(var(--fs-h2),3.8vw)}
}
@media (max-width:639px){
  html.film #s-invoice .inv__marks{display:none}
  html.film #s-invoice .inv__wall::before,html.film #s-invoice .inv__wall::after{inline-size:14px;background-size:14px 18px}
  html.film #s-invoice .inv__rows{inset-inline:20px 18px}
}
/* Short pages keep every word and lose the furniture. */
@media (max-aspect-ratio:9/10) and (max-height:640px){
  html.film #s-invoice{--sp:12px}
  html.film #s-invoice .inv__sql,html.film #s-invoice .inv__meta .t-label,html.film #s-invoice .inv__etop .t-label{display:none}
  html.film #s-invoice .inv__in{gap:6px}
  html.film #s-invoice .inv__ein{gap:6px}
  html.film #s-invoice .inv__tbl{font-size:.8125rem}
  html.film #s-invoice .inv__tbl tbody td{padding-block:.14em}
  html.film #s-invoice .inv__tbl tfoot th,html.film #s-invoice .inv__tbl tfoot td{padding-block:.14em 0}
  html.film #s-invoice .inv__plate{font-size:.6875rem;line-height:1.35}
  html.film[lang=ar] #s-invoice .inv__plate{font-size:.75rem;line-height:1.5}
  html.film #s-invoice .inv__facts{font-size:.625rem;gap:0 1em}
  html.film #s-invoice .inv__enote{font-size:.75rem;line-height:1.35}
  html.film #s-invoice .inv__efoot{padding-block-start:8px;gap:2px}
}
/* The narrowest column: the row that differs and its stamp still have to share a line. */
@container (max-width:310px){
  html.film #s-invoice .inv__etbl{font-size:.6875rem}
  html.film #s-invoice .inv__etbl th:nth-child(1){inline-size:34.5%}
  html.film #s-invoice .inv__disp{font-size:2.75rem}
}
@media (max-height:650px){
  html.film #s-invoice .inv__status{padding-block-start:6px;gap:0;line-height:1.25}
  html.film #s-invoice .inv__sql,html.film #s-invoice .inv__meta .t-label{display:none}
  html.film #s-invoice .inv__body{font-size:.875rem;line-height:1.4}
}
/* Under 650px tall the zone below the line is too thin for the status, so it joins the copy above it. */
@media (min-height:521px) and (max-height:650px) and (min-aspect-ratio:9/10){
  html.film #s-invoice .frame{display:flex;flex-direction:column;gap:8px}
  html.film #s-invoice .inv__status{padding-block-start:0}
  html.film[lang=en] #s-invoice .inv__h{font-size:min(var(--fs-h2),3.4vw)}
}
@media (max-height:520px){
  html.film #s-invoice{--rh:21px;--bot:calc(var(--rail-h) + 5px);--top:calc(var(--hdr-h) + 3px)}
  html.film #s-invoice .inv__strip{display:none}
  html.film[lang] #s-invoice .inv__h{font-size:1.1875rem}
  html.film #s-invoice .inv__body{font-size:.75rem;line-height:1.35}
  html.film #s-invoice .inv__copy{gap:6px;padding-block-start:4px}
  html.film #s-invoice .inv__head{position:relative}
  html.film #s-invoice .smsc{position:absolute;inset-block-start:0;inset-inline-end:0}
  html.film #s-invoice .inv__status{font-size:.625rem}
  html.film #s-invoice .inv__sql,html.film #s-invoice .inv__meta .t-label,html.film #s-invoice .inv__ref .t-label,html.film #s-invoice .inv__etop .t-label,html.film #s-invoice .inv__sumk{display:none}
  html.film #s-invoice .inv__in{gap:4px;padding-block-start:6px}
  html.film #s-invoice .inv__ein{gap:3px;padding-block-start:6px}
  html.film #s-invoice .inv__no{font-size:2.5rem}
  html.film #s-invoice .inv__tbl{font-size:.75rem}
  html.film #s-invoice .inv__tbl th{padding-block:.2em}
  html.film #s-invoice .inv__tbl td{padding-block:.2em}
  html.film #s-invoice .inv__foot{padding-block-end:4px}
  html.film #s-invoice .inv__plate{font-size:.625rem;line-height:1.25}
  html.film[lang=ar] #s-invoice .inv__plate{font-size:.6875rem;line-height:1.35}
  html.film #s-invoice .inv__efoot{padding-block-start:5px;gap:0}
  html.film #s-invoice .inv__facts{font-size:.625rem}
  html.film #s-invoice .inv__enote{font-size:.6875rem;line-height:1.25}
}
/* A landscape phone on the small side: the words keep clear of the line. What the status says, the manifest says again. */
@media (max-height:400px) and (max-width:760px) and (min-aspect-ratio:9/10){
  html.film #s-invoice .inv__status{display:none}
  html.film[lang] #s-invoice .inv__h{font-size:1rem}
  html.film #s-invoice .inv__body{font-size:.6875rem;line-height:1.3}
  html.film[lang=ar] #s-invoice .inv__body{font-size:.75rem;line-height:1.45}
}

/* ---- scene: dashboard ---- */
/* Scene: dashboard. Every selector starts with #s-dashboard. */

/* ---- Base: the readable document, which is also the no-JS page. Five stills, nothing moves. ---- */
#s-dashboard{--dir:1;--dash-h:clamp(1.625rem,min(3.35vw,6.6svh),3.375rem)}
html[dir=rtl] #s-dashboard{--dir:-1}
#s-dashboard .dash__defs{position:absolute;inline-size:0;block-size:0;overflow:hidden}

/* THE ONE-COLOUR RULE. Only the message has colour and the product UI has blues and purples, so
   the stills are printed in Ink on Paper until the visitor looks at them. Every other rule reads
   --print: the grayscale, the paper tone, the Signal mark and the chip. .is-look comes from JS on
   hover, on focus inside, on pointer down and on Pause.
   To reverse it, delete this one rule: the shots then stay in full colour, unmarked. */
#s-dashboard .dash:not(.is-look){--print:1}

#s-dashboard .dash__ctl,#s-dashboard .dash__tabs{display:none}
#s-dashboard .dash__slides{display:grid;gap:clamp(40px,7svh,64px);margin-block-start:clamp(12px,3svh,32px)}
#s-dashboard .dash__slide{display:grid;gap:16px;min-inline-size:0}

/* The sheet: a plain hairline on Paper. No chrome, no radius, no shadow. */
#s-dashboard .dash__pic{position:relative;aspect-ratio:16/10;border:1px solid var(--ink);overflow:hidden;overflow:clip}
/* Each frame clips itself, so a frame the camera has pushed in on still meets the next one on a clean seam. */
#s-dashboard .dash__reel{position:absolute;inset:0;overflow:hidden;overflow:clip}
#s-dashboard .dash__cam{position:absolute;inset:0;isolation:isolate}
/* The screenshot is an LTR image in both languages, so the marks on it are placed against it. */
#s-dashboard .dash__cam,#s-dashboard .dash__reel{direction:ltr}
#s-dashboard .dash__skel{position:absolute;inset:0;inline-size:100%;block-size:100%;color:var(--paper-2);stroke:var(--hairline)}
#s-dashboard .dash__img{position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;filter:grayscale(var(--print,0));-webkit-user-drag:none;user-select:none}
html:not(.js) #s-dashboard img[data-src]{display:none}
/* Multiplying by Paper prints the shot into the page: its white becomes the ground exactly. */
#s-dashboard .dash__cam::after{content:"";position:absolute;inset:0;z-index:1;background:var(--paper);mix-blend-mode:multiply;opacity:var(--print,0);pointer-events:none}
html.js #s-dashboard .dash__pic:not(.is-in) .dash__cam::after{opacity:0}
#s-dashboard .dash__veil{display:none}

/* The message inside the product. In the long page it is one Signal line under the record it
   would touch. In the film the same line is a branch of the thread, see below. */
#s-dashboard .dash__mark{position:absolute;z-index:2;inset-block-start:var(--my);inset-inline-start:var(--ms);inline-size:calc(var(--me) - var(--ms));block-size:2px;margin-block-start:-1px;background:var(--signal);opacity:var(--print,0)}
#s-dashboard .dash__rise,#s-dashboard .dash__join{display:none}
/* Each still, in percent of the 1600 by 1000 shot: the record's start, its end and its foot. In the
   film each still is cropped to its panel and JS restates these against the crop. */
#s-dashboard #dash-s1{--ms:18.06%;--me:57.38%;--my:18%}
#s-dashboard #dash-s2{--ms:18.1%;--me:97.9%;--my:50.5%}
#s-dashboard #dash-s3{--ms:34.25%;--me:49.25%;--my:23.7%}
#s-dashboard #dash-s4{--ms:19.3%;--me:96.7%;--my:47.3%}
#s-dashboard .dash__cam{transform-origin:0 0}

/* What this screen does with the message the visitor followed. The column is real, the value live. */
#s-dashboard .dash__chip{position:absolute;z-index:3;inset-block-start:calc(var(--my) + 9px);inset-inline-start:var(--cx,auto);inset-inline-end:var(--ce,auto);display:inline-flex;align-items:stretch;max-inline-size:calc(100% - 12px);border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-size:.6875rem;line-height:1.5;white-space:nowrap;opacity:var(--print,0)}
#s-dashboard .dash__chip code,#s-dashboard .dash__chip b{font:inherit;padding:.14em .55em}
#s-dashboard .dash__chip code{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}
#s-dashboard .dash__chip b{flex:none;border-inline-start:1px solid var(--ink)}
#s-dashboard .dash__chip b.is-solid{background:var(--ink);color:var(--paper)}
#s-dashboard #dash-s1 .dash__chip{--cx:18.06%}
#s-dashboard #dash-s2 .dash__chip{--cx:66.8%}
#s-dashboard #dash-s3 .dash__chip{--cx:34.25%}
#s-dashboard #dash-s4 .dash__chip{--ce:3.3%}

#s-dashboard .dash__text{display:grid;gap:10px;justify-items:start;min-inline-size:0}
#s-dashboard .dash__cap{display:grid;gap:6px;justify-items:start}
#s-dashboard .dash__src{flex-wrap:wrap}
#s-dashboard .dash__note::before{content:"· "}
/* The Arabic note reads once in the long page. In the film each still carries it. */
html:not(.film) #s-dashboard .dash__slide:not(:first-child) .dash__note{display:none}
html:not(.film) #s-dashboard .dash__pic:hover{--print:0}

@media (min-width:900px){
  html:not(.film) #s-dashboard .dash__slide{grid-template-columns:minmax(14rem,1fr) minmax(0,2.5fr);column-gap:clamp(24px,4vw,56px);align-items:end}
  html:not(.film) #s-dashboard .dash__pic{grid-column:2;grid-row:1}
  html:not(.film) #s-dashboard .dash__text{grid-column:1;grid-row:1}
}

/* ---- The film. Wide: the sheet stands on the thread, the column stands beside it. ---- */
html.film #s-dashboard{
  --sheet-w:min(70vw,calc(100vw - 2 * var(--gutter) - 17rem),calc((80svh - var(--hdr-h) - 16px) * 1.6));
  --sheet-h:calc(var(--sheet-w) * .625);
  --foot:clamp(10px,1.6svh,14px);
  /* The thread's height inside the frame. It is the film's .8, or higher on a squarer screen, so
     the sheet and its foot sit centred instead of low. */
  --line:min(calc(80svh - var(--hdr-h)),calc((100svh - var(--hdr-h) - var(--rail-h) - var(--sheet-h) - 44px - var(--foot)) / 2 + var(--sheet-h)));
  --col-w:calc(100% - var(--sheet-w) - clamp(20px,3vw,48px));
}
/* The Row is away for this whole scene, so the frame takes back its band. */
html.film #s-dashboard .frame{inset-block-end:var(--rail-h);justify-content:flex-start;gap:6px;padding-block-start:calc(var(--line) - var(--sheet-h))}
html.film #s-dashboard .t-h2{font-size:var(--dash-h);inline-size:var(--col-w)}
html.film #s-dashboard .dash{position:absolute;inset:0;pointer-events:none}
html.film #s-dashboard .dash__slides{position:absolute;inset:0;display:block;margin:0}
html.film #s-dashboard .dash__slide{position:absolute;inset:0;display:block;visibility:hidden}
html.film #s-dashboard .dash__slide.is-cur,html.film #s-dashboard .dash__slide.is-out,html.film #s-dashboard .dash__slide.is-peek{visibility:visible}
html.film #s-dashboard .dash__slide.is-measure .dash__chip{visibility:hidden}
/* Two frames share the sheet in a change or a swipe, but only one speaks. */
html.film #s-dashboard .dash__slide.is-peek .dash__text,html.film #s-dashboard .dash__slide.is-out .dash__src{visibility:hidden}
html.film #s-dashboard .dash__reel{outline:1px solid var(--ink)}
html.film #s-dashboard .dash__pic{position:absolute;inset-block-start:calc(var(--line) - var(--sheet-h));inset-inline-end:0;inline-size:var(--sheet-w);block-size:var(--sheet-h);aspect-ratio:auto;pointer-events:auto;touch-action:pan-y pinch-zoom;cursor:pointer;-webkit-touch-callout:none}
html.film #s-dashboard .dash__veil{display:block;position:absolute;inset:0;z-index:4;background:var(--paper);opacity:0;pointer-events:none}

/* Fades over the skeleton when it arrives, turns over the print tone when the visitor looks. */
html.film #s-dashboard .dash__img{opacity:0;transition:opacity .5s linear,filter .3s linear}
html.film #s-dashboard .is-in .dash__img{opacity:1}
html.film #s-dashboard .dash__cam::after{transition:opacity .3s linear}
/* The line the visitor has followed leaves the track at the corner of the sheet, climbs its
   reading-start edge and turns into the product, ending on the record. The turn sits on the height
   the camera leans at, so the two pieces stay joined under the push. */
html.film #s-dashboard .dash__rise{display:block;position:absolute;z-index:3;inset-block:var(--my) 0;inset-inline-start:0;inline-size:2px;background:var(--signal);opacity:var(--print,0);transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s var(--ease-swift),opacity .3s linear}
html[dir=rtl].film #s-dashboard .dash__rise{inset-inline:auto 0}
html.film #s-dashboard .is-set .dash__rise{transform:none}
html.film #s-dashboard .dash__mark{inset-inline-start:-10%;inline-size:calc(var(--me) + 10%);transform:scaleX(0);transform-origin:0 50%;transition:transform .62s var(--ease-draw),opacity .3s linear}
html[dir=rtl].film #s-dashboard .dash__mark{inset-inline-start:var(--ms);inline-size:calc(110% - var(--ms));transform-origin:100% 50%}
html.film #s-dashboard .is-set .dash__mark{transform:none;transition-delay:.2s,0s}
html.film #s-dashboard .dash__chip{visibility:hidden;transform:translateY(6px);transition:transform .3s var(--ease-draw),opacity .3s linear;pointer-events:none}
html.film #s-dashboard .is-set .dash__chip{visibility:visible;transform:none;transition:visibility 0s linear .58s,transform .3s var(--ease-draw) .58s,opacity .3s linear}

html.film #s-dashboard .dash__text{position:absolute;inset-inline-start:0;inset-block-end:calc(100% - var(--line) + clamp(14px,2.4svh,24px));inline-size:var(--col-w);pointer-events:auto}
html.film #s-dashboard .t-body{font-size:clamp(.9375rem,min(1.2vw,2.3svh),1.1875rem);line-height:1.5}
html[lang=ar].film #s-dashboard .t-body{line-height:1.7}

/* The foot of the frame: the thread is the track, the tabs hang from it. */
html.film #s-dashboard .dash__tabs{display:flex;position:absolute;inset-block-start:var(--line);inset-inline-end:0;inline-size:var(--sheet-w);border-block-start:1px solid var(--hairline-strong);pointer-events:auto}
html.film #s-dashboard .dash__tab{position:relative;flex:1 1 0;min-inline-size:0;min-block-size:44px;display:flex;align-items:baseline;gap:.5em;padding-block:calc(var(--foot) + 13px) 6px;padding-inline-end:10px;color:var(--fg-2);font-size:var(--fs-small);line-height:1.3;text-align:start;outline-offset:-2px;transition:color .16s linear}
html.film #s-dashboard .dash__tab::before{content:"";position:absolute;inset-block-start:-5px;inset-inline-start:0;inline-size:1px;block-size:9px;background:var(--hairline-strong)}
html.film #s-dashboard .dash__tab:hover .dash__name{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
html.film #s-dashboard .dash__tab[aria-selected=true]{color:var(--fg-strong);font-weight:600}
html.film #s-dashboard .dash__no{flex:none;font-family:var(--font-mono);font-size:.6875rem;font-weight:400;color:var(--fg-2)}

html.film #s-dashboard .dash__ctl{display:flex;position:absolute;z-index:1;inset-block-start:calc(var(--line) + var(--foot));inset-inline-start:0;gap:6px;pointer-events:auto}
html.film #s-dashboard .dash__pause{min-block-size:44px;font-weight:400;font-size:var(--fs-small);color:var(--fg-2)}
html.film #s-dashboard .dash__ic{flex:none;inline-size:14px;block-size:14px;fill:currentColor}
html.film #s-dashboard .dash__flip{transform:scaleX(var(--dir))}
html.film #s-dashboard .dash__ic--play,html.film #s-dashboard .dash__say-play{display:none}
html.film #s-dashboard .is-held .dash__ic--pause,html.film #s-dashboard .is-held .dash__say-pause{display:none}
html.film #s-dashboard .is-held .dash__ic--play{display:block}
html.film #s-dashboard .is-held .dash__say-play{display:inline}

/* ---- Tall: headline, shot, words, controls. The thread keeps to its edge, so the screens are
   numbered ticks on it, level with the sheet. ---- */
@media (max-aspect-ratio:9/10){
  html.film #s-dashboard{--dash-h:clamp(1.5rem,min(7.2vw,4.6svh),3.25rem);--tall-w:calc(100vw - 2 * var(--gutter) - var(--thread-clear));--sheet-h:calc(var(--tall-w) * .625)}
  html.film #s-dashboard .frame{justify-content:center;gap:clamp(4px,1svh,10px);padding-block-start:0}
  html.film #s-dashboard .t-h2{inline-size:auto}
  html.film #s-dashboard .dash{position:relative;inset:auto;flex:none;display:flex;flex-direction:column;gap:clamp(10px,2svh,20px);margin-block-start:clamp(4px,1.2svh,14px);pointer-events:auto}
  html.film #s-dashboard .dash__slides{position:relative;inset:auto;display:grid;order:1}
  html.film #s-dashboard .dash__slide{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;gap:clamp(10px,2svh,20px)}
  html.film #s-dashboard .dash__pic{position:relative;inset:auto;inline-size:100%;block-size:auto;aspect-ratio:16/10}
  html.film #s-dashboard .dash__text{position:static;inline-size:auto}
  html.film #s-dashboard .t-body{font-size:var(--fs-body)}
  /* The thread runs beside the sheet here, so the branch comes straight in from that edge. */
  html.film #s-dashboard .dash__rise{display:none}
  html.film #s-dashboard .dash__mark{inset-inline-start:var(--ms);inline-size:calc(110% - var(--ms));transform-origin:100% 50%}
  html[dir=rtl].film #s-dashboard .dash__mark{inset-inline-start:-10%;inline-size:calc(var(--me) + 10%);transform-origin:0 50%}
  /* The last 20px, from the sheet's edge out to the thread, so the branch visibly leaves the line. */
  html.film #s-dashboard .dash__join{display:block;position:absolute;inset-block-start:0;inset-inline-end:-20px;inline-size:21px;block-size:var(--sheet-h);pointer-events:none}
  html.film #s-dashboard .dash__join::after{content:"";position:absolute;inset-inline:0;inset-block-start:var(--my);block-size:2px;margin-block-start:-1px;background:var(--signal);opacity:var(--print,0);transform:scaleX(0);transform-origin:100% 50%;transition:transform .2s var(--ease-swift),opacity .3s linear}
  html[dir=rtl].film #s-dashboard .dash__join::after{transform-origin:0 50%}
  html.film #s-dashboard .is-set .dash__join::after{transform:none}
  html.film #s-dashboard .is-out .dash__join::after{opacity:0}
  html.film #s-dashboard .dash__ctl{position:static;order:2}

  html.film #s-dashboard .dash__tabs{inset-block-start:0;inset-inline-end:calc(-1 * (var(--gutter) + var(--thread-clear)));inline-size:calc(var(--gutter) + var(--thread-clear));block-size:max(220px,var(--sheet-h));flex-direction:column;border-block-start:0}
  html.film #s-dashboard .dash__tabs::before{content:"";position:absolute;inset-block:0;inset-inline-end:5.5vw;inline-size:1px;background:var(--hairline-strong)}
  html.film #s-dashboard .dash__tab{flex:1 1 0;inline-size:100%;min-inline-size:44px;min-block-size:44px;align-items:center;justify-content:flex-start;padding:0}
  html.film #s-dashboard .dash__tab::before{inset-block-start:50%;inset-inline-start:auto;inset-inline-end:calc(5.5vw - 5px);inline-size:11px;block-size:1px}
  html.film #s-dashboard .dash__no{position:absolute;inset-block-start:50%;inset-inline-end:calc(5.5vw + 9px);margin-block-start:-.75em;line-height:1.5}
  html.film #s-dashboard .dash__tab[aria-selected=true] .dash__no{color:var(--fg-strong)}
  html.film #s-dashboard .dash__name{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Under about 720px of sheet, the chip that starts far along it would run off its edge. */
@media (max-width:1159px){
  #s-dashboard #dash-s2 .dash__chip{--cx:auto;--ce:2.1%}
}
/* On a phone the chips are wide for the shot, so each one tucks in from the nearer edge. */
@media (max-width:639px){
  #s-dashboard .dash__chip{font-size:.625rem}
  #s-dashboard #dash-s3 .dash__chip{--cx:6%}
}
/* The narrowest phones: the Arabic note takes its own line, so it needs no separator. */
@media (max-width:360px){
  #s-dashboard .dash__note{flex-basis:100%}
  #s-dashboard .dash__note::before{content:none}
}
/* A short tall screen has no room to spare. */
@media (max-aspect-ratio:9/10) and (max-height:620px){
  html.film #s-dashboard .dash__idx{display:none}
  html.film #s-dashboard .dash__cap{gap:2px}
  html.film #s-dashboard .dash__text{gap:4px}
  html.film #s-dashboard .frame{gap:0}
  html.film #s-dashboard .dash__slide,html.film #s-dashboard .dash{gap:6px}
  html.film #s-dashboard .dash__src{row-gap:0}
  html.film #s-dashboard .t-body{font-size:.9375rem;line-height:1.4}
  html[lang=ar].film #s-dashboard .t-body{line-height:1.55}
}
/* A short wide screen: the names give way to numbered ticks, the current title is in the column. */
@media (min-aspect-ratio:9/10) and (max-height:560px){
  html.film #s-dashboard .dash__tab{align-items:center;padding-block:var(--foot) 0}
  html.film #s-dashboard .dash__no{font-size:.8125rem}
  html.film #s-dashboard .dash__tab[aria-selected=true] .dash__no{color:var(--fg-strong)}
  html.film #s-dashboard .dash__name{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html.film #s-dashboard .dash__idx{display:none}
  html.film #s-dashboard .dash__text{gap:4px}
  html.film #s-dashboard .t-body{line-height:1.4}
  html[lang=ar].film #s-dashboard .t-body{line-height:1.5}
}
/* A narrow wide window: the column is as tall as the sheet and no taller, so the headline shrinks a
   step and the index gives way, because the tabs under the sheet say the same thing. */
@media (min-aspect-ratio:9/10) and (max-width:900px){
  html.film #s-dashboard .dash__idx{display:none}
  html.film #s-dashboard .t-h2{font-size:min(var(--dash-h),3.05vw + .55rem)}
  html[lang=ar].film #s-dashboard .t-h2{font-size:min(var(--dash-h),2.8vw + .5rem)}
}
/* A landscape phone on the small side: one line of headline, and the column tightens around it. */
@media (min-aspect-ratio:9/10) and (max-width:760px) and (max-height:430px){
  html.film #s-dashboard .t-h2{font-size:.9375rem;line-height:1.25}
  html.film #s-dashboard .smsc{display:none}
  html.film #s-dashboard .t-h3{font-size:1rem}
  html.film #s-dashboard .t-body{font-size:.8125rem;line-height:1.3}
  html[lang=ar].film #s-dashboard .t-body{line-height:1.4}
  html.film #s-dashboard .dash__text{gap:2px}
  html.film #s-dashboard .dash__src{font-size:.75rem;row-gap:0}
}
/* Chromium softens a downscaled image under a transform, and at 1x the shot's text is what a buyer
   came to read, so on those desktops it keeps plain bilinear. Scoped to Chromium through a property
   only it parses: Safari reads this value as nearest neighbour. */
@supports (-webkit-app-region:drag){
  @media (max-resolution:1.4dppx) and (min-width:1100px){
    html.film #s-dashboard .dash__img{image-rendering:-webkit-optimize-contrast}
  }
}

/* ---- scene: trace ---- */
/* Scene: trace. Every selector starts with #s-trace. */

/* ---- Base: the readable document. This is also the no-JS page. ---- */
#s-trace{--mark-fs:var(--fs-mark);--stub:calc(var(--mark-fs) * .05);--m-fs:clamp(.75rem,.92vw,.875rem)}
html[lang=ar] #s-trace{--m-fs:clamp(.8125rem,.98vw,.9375rem)}

#s-trace .trace__strip,#s-trace .trace__lay,#s-trace .trace__run,#s-trace .trace__slot{display:none}

/* The finished name, edge to edge. Letters sit on the text edge, not on their side bearings. */
#s-trace .trace__word{padding-block-start:calc(var(--hdr-h) + clamp(24px,5svh,56px));padding-inline:var(--gutter)}
#s-trace .mark{font-size:var(--mark-fs);margin-inline:-.068em -.0725em;margin-block-end:.12em;color:var(--fg-strong)}
html[lang=ar] #s-trace .mark{margin-inline:-.054em -.04em;margin-block-end:.22em}
#s-trace .mark__bar{position:relative;background:none;margin-inline:-.07em -.075em}
html[lang=ar] #s-trace .mark__bar{margin-inline:-.024em}
#s-trace .trace__ink{position:absolute;inset-block:0;inset-inline:-.03em;background:currentColor}
/* The i's dot, placed from the bar's own start so it needs no measuring. Latin only. */
#s-trace .trace__tittle{position:absolute;inline-size:.188em;block-size:.188em;inset-inline-start:-.18em;inset-block-end:.601em;border-radius:50%;background:currentColor}
html[lang=ar] #s-trace .trace__tittle{display:none}

/* Eight ticks on the bar. The tick's own box has no width, so its labels center on it in both directions. */
#s-trace .trace__ticks{position:absolute;inset:0;display:flex;justify-content:space-evenly}
#s-trace .trace__tick{position:relative;flex:none;inline-size:0}
#s-trace .trace__tick::before{content:"";position:absolute;inset-block:calc(var(--stub) * -1);inset-inline-start:-.75px;inline-size:1.5px;background:currentColor}
#s-trace .trace__cut{position:absolute;inset-block:0;inset-inline-start:-1px;inline-size:2px;background:var(--bg)}
#s-trace .trace__n,#s-trace .trace__t{position:absolute;inset-inline-start:-4em;inline-size:8em;text-align:center;white-space:nowrap}
#s-trace .trace__n>span,#s-trace .trace__t>span{padding-inline:.3em;background:var(--bg)}
#s-trace .trace__n{inset-block-end:calc(100% + var(--stub) + 3px);font-family:var(--font-mono);font-size:var(--fs-mono);font-weight:400;line-height:1.2;color:var(--fg-2)}
#s-trace .trace__t{inset-block-start:calc(100% + var(--stub) + 4px);font-family:var(--font-text);font-size:var(--fs-mono);font-weight:600;line-height:1.3;color:var(--fg)}
html[lang=ar] #s-trace .trace__t{font-size:var(--m-fs)}

/* The frame: what is said, the room for the word in the film, the manifest and the way in. */
#s-trace .frame{min-block-size:0;justify-content:flex-start;padding-block-start:0}
#s-trace .trace__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(30em,46%));gap:clamp(16px,2.4vw,40px);align-items:start}
#s-trace .trace__head{display:flex;align-items:flex-start;gap:.75em;min-inline-size:0}
#s-trace .trace__head h2{min-inline-size:0;max-inline-size:8.4em}
html[lang=ar] #s-trace .trace__head h2{max-inline-size:none}
#s-trace .trace__head .smsc{margin-block-start:.5em}
#s-trace .trace__about{display:flex;flex-direction:column;gap:4px;min-inline-size:0}
#s-trace .trace__src{margin-block-start:6px}
#s-trace .trace__pcap{padding-block:.9em;margin-block:-.9em;color:var(--fg-strong);text-underline-offset:.25em;text-decoration-thickness:1px}
#s-trace .trace__pcap:hover,#s-trace .trace__pcap:focus-visible{text-decoration-thickness:2px}
#s-trace .trace__nb{white-space:nowrap}

/* The manifest. Two columns in SMPP's own words, and every row in the second is a blank to fill in. */
#s-trace .trace__low{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,48px);align-items:start}
#s-trace .trace__sheet{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(20px,2.8vw,44px);font-size:var(--m-fs);line-height:1.45}
#s-trace .trace__col{min-inline-size:0}
#s-trace .stat{gap:0;font-size:.92em}
#s-trace .trace__mh{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .75em;margin:0 0 .55em;padding-block-end:.4em;border-block-end:1px solid var(--hairline-strong);font-family:var(--font-text);font-size:inherit;font-weight:600;line-height:1.35;color:var(--fg-strong)}
#s-trace .trace__on{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.12em clamp(14px,2vw,28px);color:var(--fg)}
#s-trace .trace__wait{display:grid;gap:.12em;color:var(--fg-2)}
#s-trace .trace__need{color:var(--fg)}

/* Short of width but not of height: one list, so the blanks stay on one line. */
@media (min-width:860px) and (max-width:1179px) and (min-height:680px){
  #s-trace .trace__sheet{grid-template-columns:minmax(0,.66fr) minmax(0,1fr)}
  #s-trace .trace__on{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto}
}

@media (max-width:479px){
  html:not(.film) #s-trace .trace__on{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto}
}

/* Calls to action. */
#s-trace .trace__cta{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-inline-size:calc(var(--mark-fs) * 1.02)}
html[lang=ar] #s-trace .trace__cta{min-inline-size:calc(var(--mark-fs) * 1.16)}
#s-trace .trace__go{min-block-size:clamp(48px,7svh,60px);padding-inline:1.2em;font-family:var(--font-display);font-weight:700;font-size:clamp(1.0625rem,1.3vw,1.25rem)}
#s-trace .trace__cta .btn--plain{justify-content:flex-start}

/* Eight labels on a shorter bar: step every other one down, and past that keep only the numbers. */
@media (max-width:1060px) and (min-aspect-ratio:9/10){
  #s-trace .trace__tick:nth-child(even) .trace__t{margin-block-start:1.3em}
}
@media (max-width:759px) and (min-aspect-ratio:9/10){
  html:not(.film) #s-trace .trace__t{display:none}
}

/* The calm page on narrow screens: natural width, short bar, stacked columns. */
@media (max-aspect-ratio:9/10){
  #s-trace{--fit:3.65;--mark-fs:min(calc((100vw - 2 * var(--gutter)) / var(--fit)),24svh)}
  html[lang=ar] #s-trace{--fit:3.32}
  #s-trace .mark{margin-block-end:.1em}
  #s-trace .mark__bar{flex:none;inline-size:.14em}
  html[lang=ar] #s-trace .mark__bar{inline-size:.04em;margin-inline:-.2em}
  html[lang=ar] #s-trace .trace__ink{inset-inline:-.2em}
  #s-trace .trace__ticks{display:none}
}
@media (max-aspect-ratio:9/10),(max-width:859px){
  #s-trace .trace__top{grid-template-columns:minmax(0,1fr)}
  #s-trace .trace__low{grid-template-columns:minmax(0,1fr)}
  #s-trace .trace__sheet{grid-template-columns:minmax(0,1fr)}
}

/* ---- The film adds to it. ---- */
/* The Row is hidden here, so the frame runs down to the band the footer takes on the last frame. */
html.film #s-trace .frame{inset-block-end:var(--foot-h);justify-content:space-between;gap:clamp(6px,1.4svh,16px);padding-block:clamp(4px,1.4svh,16px) clamp(10px,2.4svh,26px);pointer-events:none}
html.film #s-trace .trace__slot{display:block;flex:none;block-size:calc(var(--mark-fs) * 1.1)}
html[lang=ar].film #s-trace .trace__slot{block-size:calc(var(--mark-fs) * 1.2)}

/* The word lives under the header line: at nine times its size it must not swallow the logo. */
html.film #s-trace .trace__word{position:absolute;inset:var(--hdr-h) 0 0;padding:0;overflow:hidden;overflow:clip}
html.film #s-trace .mark{position:absolute;inset-block-start:0;inset-inline:var(--gutter);margin-block-end:0}
html.film #s-trace .trace__ink,html.film #s-trace .trace__run{transform-origin:0 50%}
html.film #s-trace .trace__run{display:block;position:absolute;inset:0;background:var(--signal);transform-origin:100% 50%}
html[dir=rtl].film #s-trace .trace__ink{transform-origin:100% 50%}
html[dir=rtl].film #s-trace .trace__run{transform-origin:0 50%}
html.film #s-trace .trace__tick::before{display:none}

/* The strip: one path for all eight frames, redrawn as they shrink, so the stroke never scales. */
html.film #s-trace .trace__strip{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;max-inline-size:none;overflow:hidden;pointer-events:none}
html.film #s-trace .trace__hair{fill:none;stroke:var(--hairline-strong);stroke-width:1px}
html.film #s-trace .trace__boxes{fill:none;stroke:var(--fg-strong);stroke-width:1.5px}

/* Thread look-alikes. Boxes of 100px, placed by transform from the top left, as the thread itself is. */
html.film #s-trace .trace__lay{display:block;position:absolute;inset:0;direction:ltr;pointer-events:none;overflow:hidden}
html.film #s-trace .trace__stem,html.film #s-trace .trace__srun,html.film #s-trace .trace__pour{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100px;block-size:100px;transform-origin:0 0;opacity:0}
html.film #s-trace .trace__stem{background:var(--fg-strong)}
html.film #s-trace .trace__srun,html.film #s-trace .trace__pour{background:var(--signal)}

/* What each integration needs is always printed. The dotted rule is the leader between the two. */
html.film #s-trace .trace__wait li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.4em}
html.film #s-trace .trace__wait li::after{content:"";order:1;flex:1 1 1.5em;min-inline-size:1.5em;border-block-end:1px dotted var(--hairline-strong);transform:translateY(-.25em)}
html.film #s-trace .trace__need{order:2;margin-inline-start:auto}

/* The button is a working link from the moment it prints. The Signal arrives as a layer behind its text. */
html.film #s-trace .trace__go{position:relative;isolation:isolate;background:none;border-color:var(--ink)}
html.film #s-trace .trace__go::before{content:"";position:absolute;inset:-1.5px;z-index:-1;background:var(--signal);clip-path:inset(0 var(--fr,100%) 0 var(--fl,0%))}
html.film #s-trace .trace__go:hover,html.film #s-trace .trace__go:focus-visible{background:var(--ink);border-color:var(--ink)}
html.film #s-trace .trace__go:hover::before,html.film #s-trace .trace__go:focus-visible::before{visibility:hidden}

/* The manifest gets its own frame where it cannot share one with the word. */
@media (max-aspect-ratio:9/10),(max-height:639px),(max-width:859px){
  html.film #s-trace .trace__low{display:block}
  html.film #s-trace .trace__cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px clamp(14px,3vw,24px);min-inline-size:0}
  /* A page of its own: it comes up from below, opaque, and leaves over the top. The gate keeps it inside the frame. */
  html.film #s-trace .trace__manifest{position:absolute;z-index:3;inset-block:0;inset-inline:calc(var(--gutter) * -1);overflow:hidden;overflow:clip}
  html.film #s-trace .trace__sheet{block-size:100%;padding:clamp(10px,2.6svh,28px) var(--gutter);background:var(--bg);border-block:1px solid var(--hairline-strong);align-content:start;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.6svh,32px)}
  html.film #s-trace .frame{padding-inline-end:0}
}
@media (max-height:639px) and (min-aspect-ratio:901/1000){
  html.film #s-trace .trace__sheet{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:8px}
  html.film #s-trace .trace__on{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto}
}
/* Wide but cramped: one row of buttons, the Signal one at the reading end, under the end of the bar. */
@media (max-height:639px) and (min-aspect-ratio:901/1000),(max-width:859px) and (min-aspect-ratio:901/1000){
  html.film #s-trace .trace__cta{flex-direction:row-reverse;flex-wrap:nowrap}
  html.film #s-trace .trace__go{flex:none;min-inline-size:calc(var(--mark-fs) * 1.16)}
}
@media (max-height:559px){
  /* A landscape phone: the sentence beside the headline, the buttons in one row under the word. */
  html.film #s-trace .trace__top{grid-template-columns:minmax(0,1fr) minmax(0,25em);gap:12px 24px}
  html.film #s-trace .trace__about{gap:2px}
  html.film #s-trace .trace__about .t-body{font-size:.8125rem;line-height:1.42;max-inline-size:none}
  html.film #s-trace .trace__about .t-small{font-size:.75rem}
  html.film #s-trace .trace__go{min-block-size:44px;font-size:1rem}
  html.film #s-trace .frame{gap:2px}
  html.film #s-trace .trace__slot,html[lang=ar].film #s-trace .trace__slot{block-size:calc(var(--mark-fs) * 1.2)}
}

/* The smallest landscape phones: the word gives up some height, because the button must stay on screen. */
@media (max-height:379px) and (min-aspect-ratio:901/1000){
  #s-trace{--mark-fs:min(13vw,21svh);--m-fs:.6875rem}
  html[lang=ar] #s-trace{--m-fs:.6875rem}
  html.film #s-trace .trace__sheet{gap:10px;padding-block:6px;overflow:hidden;overflow:clip;line-height:1.3}
  html.film #s-trace .t-h2{font-size:1.25rem}
  html.film #s-trace .smsc{display:none}
  html.film #s-trace .trace__top{grid-template-columns:auto minmax(0,1fr)}
  html.film #s-trace .trace__about .t-body{font-size:.75rem;line-height:1.35}
  html.film #s-trace .trace__about .src{font-size:.75rem}
  html.film #s-trace .trace__about .t-small{font-size:.6875rem}
  html.film #s-trace .trace__go{min-inline-size:0}
}

/* Tall: the thread comes down the reading-end edge and lands on the last letter's stem. */
@media (max-aspect-ratio:9/10){
  #s-trace{--stem:calc(var(--mark-fs) * .178);--m-fs:clamp(.8125rem,min(3.6vw,2.1svh),1.375rem)}
  html[lang=ar] #s-trace{--stem:calc(var(--mark-fs) * .154);--m-fs:clamp(.8125rem,min(3.8vw,2.1svh),1.4375rem)}
  html.film #s-trace .trace__go{flex:1 0 100%}
  html.film #s-trace .trace__ticks{display:block}
  html.film #s-trace .trace__tick{position:absolute;inset-block-start:0;inset-inline-start:0;block-size:0}
  html.film #s-trace .trace__cut{inset-inline-start:calc(var(--stem) / -2);inline-size:var(--stem);inset-block:-1px auto;block-size:2px}
  /* The numbers stand on the side of the stem with the room: left in English, right in Arabic. So they never cross it. */
  html.film #s-trace .trace__n{inset-block:-.6em auto;inset-inline:auto calc(var(--stem) / 2 + var(--stub) + 3px);inline-size:auto;font-size:.6875rem}
  html.film #s-trace .trace__t{inset-block:-.65em auto;inset-inline:auto calc(var(--stem) / 2 + var(--stub) + 3px + 2.1em);inline-size:auto;text-align:end}
  html[lang=ar].film #s-trace .trace__t{inset-inline:auto calc(var(--stem) / 2 + 8px)}
  html.film #s-trace .trace__top{gap:clamp(8px,1.6svh,16px)}
  /* The text column stops short of the stem, which in Arabic stands well inside the word. */
  html.film #s-trace .frame{justify-content:flex-end;gap:0}
  html.film #s-trace .trace__top{position:absolute;inset-block-start:clamp(10px,2svh,22px);inset-inline:0;padding-inline-end:calc(var(--mark-fs) * .24 + 24px)}
  html[lang=ar].film #s-trace .trace__top{padding-inline-end:calc(var(--mark-fs) * .8 + 12px)}
  html.film #s-trace .trace__head{flex-direction:column;gap:2px}
  html.film #s-trace .trace__head .smsc{margin-block-start:0}
}
@media (max-aspect-ratio:9/10) and (max-width:479px) and (min-height:700px){
  html.film #s-trace .trace__on{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto}
}
@media (max-aspect-ratio:9/10) and (max-height:640px),(max-aspect-ratio:9/10) and (max-width:319px){
  #s-trace{--m-fs:.75rem}
  html[lang=ar] #s-trace{--m-fs:.8125rem}
  html.film #s-trace .trace__top{gap:6px}
  html.film #s-trace .trace__about .t-body{font-size:.875rem;line-height:1.46}
  html[lang=ar].film #s-trace .trace__about .t-body{font-size:.9375rem;line-height:1.56}
  html.film #s-trace .trace__about .t-small,html.film #s-trace .trace__src{font-size:.8125rem;line-height:1.4}
  /* The hero's own note already says the text stays here, and this column cannot hold it twice. */
  html.film #s-trace .trace__typed{display:none}
}