@font-face {
  font-family: 'Qomra';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/itfQomraArabic-Light.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Qomra';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/itfQomraArabic-Regular.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Qomra';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/itfQomraArabic-Medium.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Qomra';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/itfQomraArabic-Bold.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Qomra';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/itfQomraArabic-Black.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Signal Console, underground. Six floors of one facility. Painted steel, CRT phosphor, oxblood lamps. All colors are shades of the five brand colors. */
:root{
  --void:#0b0c05; --deep:#121407; --steel:#23260f; --steel-2:#2c3016; --steel-3:#383c20; --edge:#4b4e33;
  --paint:#dbd5ba; --cream:#f2efdf; --muted:#8f8c76; --dim:#5d5c47;
  --phos:#ead9a7; --phos-dim:#7f7a5c; --ox:#4c0000; --lamp:#a3241a; --meter:#ead9a7;
  --sans:"Plus Jakarta Sans","Qomra",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono","Qomra",ui-monospace,"SF Mono",Menlo,"Geeza Pro","SF Arabic","Noto Sans Arabic","Segoe UI",Tahoma,monospace;
  --sten:"Geist Mono","Qomra",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(16px,3.4vw,48px);
  --sec:clamp(60px,8vw,112px);  /* above and below every floor (two of them between floors), and between blocks inside a floor */
  --gap:clamp(32px,3.4vw,46px);  /* floor header to headline, headline to its content */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void)}
body{margin:0;background:var(--void);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--phos);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* atmosphere */
.defs{position:absolute;width:0;height:0;overflow:hidden}
/* hardware keeps its own light text in both modes */
.device,.rack,.reel,.source,.elev{color:var(--cream)}
.grain{position:fixed;inset:-50%;z-index:40;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-2%)}80%{transform:translate(3%,4%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:39;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(0,0,0,.6) 100%)}
.descent-shade{position:fixed;inset:0;z-index:38;pointer-events:none;background:#000;opacity:0}
@media (prefers-reduced-motion: reduce){.grain{animation:none}}

/* header */
:root{--bar:color-mix(in srgb,#000 calc(var(--depth,0) * 100%),#0b0c05)}
.top{position:fixed;inset:0 0 auto 0;z-index:41;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 14px;background-color:var(--bar)}
/* a solid bar, then a short soft fade. Safari on iOS 26 runs the page under the clock and under its bottom toolbar, and
   fills those strips with the colour of a fixed bar it finds at that edge by hit testing: so the bar takes taps (no
   pointer-events:none), sits above the grain, vignette and depth shade, and carries the shade in its own colour (--bar
   follows --depth), so the strip and the bar are one colour (Yasir 18 and 21 Oct 2026). A matching bar at the bottom
   showed as a thin line under Safari's minimised toolbar, so the bottom is left to Safari. */
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;pointer-events:none;background:linear-gradient(180deg,var(--bar),transparent);transition:opacity .9s ease}

.top > *{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:680;font-size:18px;letter-spacing:-.01em;color:var(--cream)}
.brand svg{width:auto;height:38px;display:block}
.readout{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--phos);text-shadow:0 0 8px rgba(234,217,167,.4);display:flex;gap:18px;align-items:center;white-space:nowrap}
.readout .si{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-shadow:none}
.readout .si b{font-weight:500;color:var(--phos);text-shadow:0 0 8px rgba(234,217,167,.4)}
.readout .lmp{width:7px;height:7px}
@media(max-width:1280px){.readout .si-dp,.readout .si-acc{display:none}}
@media(max-width:1060px){.readout .si-sys{display:none}}
@media(max-width:820px){.readout .si-core,.readout .rn{display:none}}
.top-r{display:flex;gap:8px;align-items:center}
.tbtn{display:inline-flex;align-items:center;gap:8px;background:var(--steel-2);border:1px solid var(--edge);color:var(--paint);padding:9px 14px;border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.tbtn:hover{border-color:var(--paint)}
.tbtn i{width:8px;height:8px;border-radius:2px;background:var(--dim)}
.tbtn.on i{background:var(--lamp);box-shadow:0 0 10px var(--lamp)}
@media(max-width:430px){.tbtn{padding:9px 10px}}
/* the elevator: four squares like a rack unit's lamps, lit one after another (clockwise, the second one red); all lit
   while the elevator is open (Yasir, 21 Oct 2026) */
.tbtn.elev-btn{padding:9px 11px;align-self:stretch}
.elev-btn .sq{display:grid;grid-template-columns:repeat(2,6px);gap:4px}
.elev-btn .sq i{width:6px;height:6px;border-radius:1.5px;background:#1a1c0d;box-shadow:inset 0 0 0 1px #000;--lit:var(--phos);animation:sqLit 2.4s ease-in-out infinite}
.elev-btn .sq i:nth-child(2){--lit:var(--lamp);animation-delay:.6s}
.elev-btn .sq i:nth-child(4){animation-delay:1.2s}
.elev-btn .sq i:nth-child(3){animation-delay:1.8s}
@keyframes sqLit{0%,36%,100%{background:#1a1c0d;box-shadow:inset 0 0 0 1px #000}8%,24%{background:var(--lit);box-shadow:0 0 7px var(--lit)}}
.elev-btn.open .sq i,.elev-btn:hover .sq i{animation:none;background:var(--lit);box-shadow:0 0 7px var(--lit)}
@media(prefers-reduced-motion:reduce){.elev-btn .sq i{animation:none}.elev-btn .sq i:first-child{background:var(--lit);box-shadow:0 0 7px var(--lit)}}
/* the header keys are icons, all the same height: lights, sound (a speaker, crossed out when off, like a silent
   switch), the language, and the elevator at the outer edge (Yasir, 22 Oct 2026) */
.top-r .tbtn{align-self:stretch;justify-content:center;min-width:40px}
.tbtn.icon{padding:9px 11px}
.tbtn .spk{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tbtn .spk .w{display:none}
#tSound.on .spk .x{display:none}#tSound.on .spk .w{display:inline}
#tSound.on{color:#fff3cf}#tSound.on .spk{filter:drop-shadow(0 0 4px rgba(234,217,167,.8))}
/* the language switch: ع on the English page, EN on the Arabic one */
.tbtn.lang{justify-content:center;min-width:40px;padding:9px 10px;text-decoration:none;align-self:stretch}
.tbtn.lang[lang="ar"]{font-family:"Qomra",var(--sans);font-size:16px;line-height:1;letter-spacing:0;text-transform:none}
.tbtn.lang[lang="ar"] span{display:block;transform:translateY(-2px)}   /* the letter sits low on its line: lifted to the middle */

/* depth gauge */
.gauge-v{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:29;height:56vh;width:54px;display:none}
@media(min-width:1180px){.gauge-v{display:block}}
.gauge-v .trk{position:absolute;right:0;top:0;bottom:0;width:2px;background:var(--edge)}
.gauge-v .tk{position:absolute;right:0;height:1px;width:10px;background:var(--dim)}
.gauge-v .lv{position:absolute;right:16px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--dim);transform:translateY(-50%);transition:color .3s}
.gauge-v .lv.on{color:var(--phos);text-shadow:0 0 8px rgba(234,217,167,.5)}
.gauge-v .ind{position:absolute;right:-5px;width:12px;height:12px;background:var(--lamp);box-shadow:0 0 12px var(--lamp);transform:translateY(-50%) rotate(45deg)}

/* elevator */
.elev{position:fixed;inset:0;z-index:35;visibility:hidden;overflow:hidden}
.elev .shaft{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#1c1f0d,#0b0c05 72%)}
.elev .shaft::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 180px,rgba(234,217,167,.05) 180px 182px,transparent 182px 250px,rgba(0,0,0,.28) 250px 300px);background-position:0 var(--sy,0px)}
.elev .shaft::after{content:"";position:absolute;top:0;bottom:0;left:7%;right:7%;border-left:1px solid rgba(219,213,186,.06);border-right:1px solid rgba(219,213,186,.06)}
.elev .door{position:absolute;top:0;bottom:0;width:50.5%;z-index:2;overflow:hidden;background:repeating-linear-gradient(90deg,#2c3016 0 6px,#262a13 6px 7px),var(--steel-2);box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.elev .door.l{left:0;border-right:2px solid #11130a}.elev .door.r{right:0;border-left:2px solid #11130a}
.elev .door::after{content:"";position:absolute;left:0;right:0;top:46%;height:3px;background:rgba(0,0,0,.35);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.elev .streaks{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;background:repeating-linear-gradient(180deg,transparent 0 150px,rgba(234,217,167,.16) 150px 153px,transparent 153px 260px,rgba(234,217,167,.07) 260px 262px,transparent 262px 330px)}
.elev .seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:3;opacity:0;background:linear-gradient(180deg,transparent,rgba(234,217,167,.55),transparent);box-shadow:0 0 18px rgba(234,217,167,.45)}
.eind{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:4;opacity:0;display:flex;gap:14px;align-items:center;padding:8px 18px 6px;border-radius:8px;background:#0c0d06;box-shadow:0 0 0 2px #2a2e15,0 0 0 3px #0a0b05,inset 0 0 20px rgba(0,0,0,.9);font-family:var(--sten);font-weight:800;font-size:44px;line-height:1;color:var(--phos);text-shadow:0 0 12px rgba(234,217,167,.6)}
.eind .dir{font-size:20px;color:var(--lamp);text-shadow:0 0 10px var(--lamp)}
.elev .panel{position:absolute;inset:0;display:grid;place-items:center;padding:90px var(--pad) 40px;background:transparent}
.ep-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ep-x{background:transparent;border:1px solid var(--edge);color:var(--paint);border-radius:6px;padding:8px 12px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.ep-x:hover{border-color:var(--paint)}
.ep{width:min(560px,100%);background:linear-gradient(180deg,#30341a,#23260f);border-radius:18px;padding:26px;box-shadow:0 0 0 1px var(--edge),0 40px 80px -20px #000,inset 0 1px 0 rgba(255,255,255,.06);display:grid;gap:20px}
.ep h2{margin:0;font-family:var(--sten);font-weight:800;font-size:clamp(22px,3.4vw,34px);letter-spacing:.02em;white-space:nowrap;color:var(--paint)}
.ep-x{white-space:nowrap}
.ep .eg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ebtn{display:flex;align-items:center;gap:14px;background:transparent;border:0;cursor:pointer;padding:8px;border-radius:10px;text-align:left;color:var(--paint)}
.ebtn:hover{background:rgba(219,213,186,.06)}
.ebtn .rb{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--sten);font-weight:800;font-size:22px;color:var(--paint);
  background:radial-gradient(circle at 40% 35%,#4a4e30,#1c1f0d);box-shadow:0 0 0 3px #11130a,0 0 0 5px var(--edge),0 6px 10px rgba(0,0,0,.5)}
.ebtn.on .rb{color:#fff;box-shadow:0 0 0 3px #11130a,0 0 0 5px var(--lamp),0 0 22px var(--lamp)}
.ebtn small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.ebtn small.nt{margin-top:3px;text-transform:none;letter-spacing:.02em}
.ebtn span.n{font-size:17px;font-weight:620}
.ep .ef{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

/* levels: every floor uses the same spacing (--sec, --gap) */
.level{position:relative;padding:var(--sec) var(--pad)}
.floor{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:6px 18px;margin-bottom:var(--gap);padding-bottom:14px;border-bottom:1px solid var(--edge);position:relative}
.floor .fn{font-family:var(--sten);font-weight:800;font-size:clamp(54px,8vw,120px);line-height:.8;letter-spacing:.02em;color:var(--steel-3);-webkit-text-stroke:1px var(--edge)}
.floor .fl{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--phos);text-shadow:0 0 8px rgba(234,217,167,.35);padding-bottom:6px}
.floor .fl em{display:block;margin-top:5px;font-style:normal;text-transform:none;letter-spacing:.02em;font-size:12.5px;color:var(--muted);text-shadow:none}
.floor .fd{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted);padding-bottom:6px}
.floor::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:5px;background:repeating-linear-gradient(-45deg,var(--ox) 0 10px,transparent 10px 20px);opacity:.75}
.h2{margin:0;font-size:clamp(36px,4.8vw,80px);font-weight:700;line-height:1.02;letter-spacing:-.03em}
.lead{color:var(--paint);max-width:46ch;margin:0}
.head2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:var(--gap)}
@media(min-width:900px){.head2{grid-template-columns:1fr 1fr;align-items:end}}

/* LEVEL 01: control room */
.hero{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center;padding:100px var(--pad) var(--sec);perspective:1600px;overflow:hidden}
@media(min-width:1100px){.hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding-right:96px}}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 38% 72% at 66% -8%,rgba(234,217,167,.16),transparent 70%),radial-gradient(ellipse 30% 40% at 66% 60%,rgba(234,217,167,.06),transparent 70%)}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-copy{position:relative;z-index:1;container-type:inline-size}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--phos);margin:0 0 18px;text-shadow:0 0 8px rgba(234,217,167,.35)}
.h1{margin:0;font-size:min(16cqi,max(6.6vw,46px),112px);font-weight:700;line-height:1.02;letter-spacing:-.03em;padding-bottom:.06em}
.h1 .line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.14em}
/* the hero copy and console wait unseen until the intro sets their first frame, so nothing shows before its motion
   (Yasir, 18 Oct 2026); if the script never runs they appear after 4 s */
.hero.intro .hero-copy>*,.hero.intro #device{visibility:hidden;animation:introSafe 0s 4s forwards}
/* word masks (made by the split): room around each word so no letter is ever clipped, without moving the layout.
   Aligned by their top: Safari puts a clipped inline-block's baseline at its bottom edge, so baseline-aligned masks
   made the headline 20 to 33 px taller until they opened, and the hero jumped up (Yasir's "tick", 18 Oct 2026) */
.h1 .w-mask{vertical-align:top;padding:0 .08em .2em;margin:0 -.08em -.2em}
@keyframes introSafe{to{visibility:visible}}
.h1 em{font-style:normal;color:var(--phos);transition:text-shadow .9s ease}
/* once the letters have landed the masks open and the glow comes up, so it is never cut into boxes */
.h1.lit .line{overflow:visible}.h1.lit em{text-shadow:0 0 24px rgba(234,217,167,.25)}
.hero-copy .lead{margin-top:22px;font-size:18px}
.howto{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.howto span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border:1px dashed var(--edge);padding:6px 10px;border-radius:4px;color:var(--muted)}

/* the console */
.device{position:relative;z-index:1;border-radius:22px;padding:20px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr);
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px),
    radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(180deg,#30341a,#23260f 60%,#1d200c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px #11130a,0 60px 100px -40px #000,0 20px 40px -20px rgba(0,0,0,.8)}
.device.console{grid-template-areas:"plate" "screen" "keys"}   /* no hazard stripe under Ask (Yasir, 25 Oct 2026) */
/* the console's screen keeps one height in the page and the conversation scrolls inside it (Yasir, 25 Oct 2026: it
   grew with every answer); only the phone's chat mode lets it fill the screen */
.device.console .crt{height:290px}
@media(min-width:760px){.device{padding:24px}.device.console .crt{height:300px}}
@media(max-width:759px){.device > *{grid-area:auto !important}.device{padding:18px 14px}}
.rivet{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#6d7050,#1a1c0c);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.r1{left:10px;top:10px}.r2{right:10px;top:10px}.r3{left:10px;bottom:10px}.r4{right:10px;bottom:10px}
.plate{grid-area:plate;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 14px 0}
.plate .st{font-family:var(--sten);font-weight:800;font-size:16px;letter-spacing:.05em;white-space:nowrap;color:var(--paint);opacity:.9}
/* Geist Mono runs wider than the stencil it replaced: the plates stay on one line */
@media(max-width:430px){.plate .st{font-size:13.5px;letter-spacing:.03em}}
.feed .plate .st{font-size:14px;letter-spacing:.03em}
.lamps{display:flex;gap:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted)}
.lamps span{display:inline-flex;align-items:center;gap:6px}
.lmp{display:inline-block;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3c28,#16170b);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.lmp.on{background:radial-gradient(circle at 40% 35%,#e8806e,var(--lamp) 60%);box-shadow:0 0 10px var(--lamp),0 0 2px #fff}
.lmp.amb.on{background:radial-gradient(circle at 40% 35%,#fff6d8,var(--phos) 60%);box-shadow:0 0 10px var(--phos)}
/* AGENT lamp: green and breathing slowly while the agent is live (Yasir, 17 Oct 2026) */
.lmp.live{position:relative;background:radial-gradient(circle at 40% 35%,#e4ffd9,#5cc463 60%)}
/* breathing animates opacity only (the glow fades, a dimmer covers the bulb), so it runs on the compositor */
.lmp.live::before,.lmp.live::after,.fo.tr i::before,.fo.tr i::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.lmp.live::before{box-shadow:0 0 10px #5cc463,0 0 2px #fff;animation:breathe 2.8s ease-in-out infinite}
.lmp.live::after,.fo.tr i::after{background:#16170b;opacity:0;animation:dim 2.8s ease-in-out infinite}
@keyframes breathe{50%{opacity:.15}}
@keyframes dim{50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){.lmp.live::before,.lmp.live::after{animation:none}}
/* CRT */
.screen{grid-area:screen;position:relative;border-radius:20px;padding:10px;background:#0c0d06;box-shadow:0 0 0 2px #11130a,0 0 0 8px #2a2e15,0 0 0 9px #11130a,inset 0 0 0 1px #000}
.crt{position:relative;border-radius:16px;overflow:hidden;min-height:250px;padding:14px 16px 12px;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% 45%,#1d1a0c 0%,#0f0e06 70%,#070703 100%);box-shadow:inset 0 0 50px rgba(0,0,0,.9),inset 0 0 12px rgba(234,217,167,.08)}
.crt::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:16px;background:radial-gradient(ellipse at 30% 15%,rgba(255,255,255,.07),transparent 40%);box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.crt .flick{position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(234,217,167,.025);animation:flick 4s steps(1) infinite}
@keyframes flick{0%,97%{opacity:1}98%{opacity:.4}99%{opacity:1}}
.crt .on-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:5;background:#fff8e2;box-shadow:0 0 18px #fff3cc;transform:scaleX(0);pointer-events:none}
.scr-top{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--phos-dim)}
.scr-body{position:relative;z-index:1;flex:1;min-height:0;overflow:auto;padding:10px 0 6px;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--phos);text-shadow:0 0 6px rgba(234,217,167,.55),0 0 16px rgba(234,217,167,.18)}
.scr-body p{margin:0 0 6px;white-space:pre-wrap}
.scr-body .you{color:var(--phos-dim)}
.scr-body a.lnk{color:var(--phos);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.scr-body a.lnk:hover,.scr-body a.lnk:focus-visible{background:rgba(234,217,167,.12);outline:none}
.scr-body .cur{display:inline-block;width:8px;height:15px;background:var(--phos);vertical-align:-2px;animation:blink 1s steps(2) infinite;margin-left:2px;box-shadow:0 0 8px var(--phos)}
@keyframes blink{50%{opacity:0}}
/* one input bar with Ask inside it, flat (Yasir, 25 Oct 2026: like a pill in a pill, no shadow, no 3D); the bar has the
   screen's 20px corners and Ask the same curve, 6px in */
.keys{grid-area:keys;display:flex;gap:6px;align-items:flex-end;margin-top:12px;padding:6px;border-radius:20px;background:#0c0d06;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.06);transition:box-shadow .2s}
.keys:focus-within{box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px rgba(234,217,167,.3)}
.keys .key{flex:none;height:40px;min-width:72px;border-radius:14px;transform:none;box-shadow:none}
.keys .key.red{background:#4c0000;color:#f6e3dd;box-shadow:none;transition:background-color .15s}
.keys .key.red:hover{background:#5e0a05}
.keys .key.red:active,.keys .key.red.down{transform:none;box-shadow:none;background:#6e120a}
/* Phones: the grain stands still (a moving layer over the whole page slows typing). */
@media (pointer:coarse){.grain{animation:none}}
.keys #q{flex:1;min-width:0;height:40px;min-height:40px;max-height:106px;border-radius:0;border:0;padding:9px 6px 9px 10px;margin:0;display:block;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;line-height:22px;-webkit-appearance:none;appearance:none;background:transparent;color:var(--phos);font-family:var(--mono);font-size:14px;letter-spacing:.02em;outline:none;box-shadow:none;text-shadow:0 0 6px rgba(234,217,167,.4)}
.keys #q::placeholder{color:var(--phos-dim)}
@media (hover:none),(pointer:coarse),(max-width:759px){.keys #q{font-size:16px}} /* iOS zooms into fields under 16px */
.scr-body [lang="ar"]{letter-spacing:0;line-height:1.85}

.key{position:relative;border:0;border-radius:9px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.12em;padding:0 16px;min-width:72px;color:#1b1c0e;
  background:linear-gradient(180deg,#e6dfc4,#c7bf9f);box-shadow:0 5px 0 #7f775a,0 8px 14px -4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6);transform:translateY(-3px);transition:transform .07s,box-shadow .07s}
.key:active,.key.down{transform:translateY(2px);box-shadow:0 0 0 #7f775a,0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.key.dark{color:var(--paint);background:linear-gradient(180deg,#3c4022,#262913);box-shadow:0 5px 0 #0f1007,0 8px 14px -4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08)}
.key.dark:active,.key.dark.down{box-shadow:0 0 0 #0f1007,0 2px 4px rgba(0,0,0,.6)}
.key.red{color:#f6e3dd;background:linear-gradient(180deg,#7a1a10,#4c0000);box-shadow:0 5px 0 #220000,0 8px 14px -4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.15)}
.key.red:active,.key.red.down{box-shadow:0 0 0 #220000,0 2px 4px rgba(0,0,0,.6)}
.hazard{grid-area:hazard;height:10px;border-radius:3px;background:repeating-linear-gradient(-45deg,var(--paint) 0 9px,#1c1e0e 9px 18px);opacity:.5;margin:2px 18px 0}

/* LEVEL 02: the operator (server rack) */
.rack{position:relative;max-width:1000px;margin-inline:auto;padding:22px 46px;border-radius:10px;background:linear-gradient(180deg,#191b0c,#0f1107);box-shadow:0 0 0 2px #0a0b05,0 0 0 6px #23260f,0 0 0 7px #0a0b05,0 50px 80px -30px #000;display:grid;gap:12px}
.rail{position:absolute;top:14px;bottom:14px;width:22px;background:repeating-linear-gradient(180deg,#2c3016 0 8px,#0a0b05 8px 12px,#2c3016 12px 22px);border-radius:3px}
.rail.l{left:12px}.rail.r{right:12px}
.unit{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:16px 18px;border-radius:6px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 5px),linear-gradient(180deg,#363a1e,#272a14);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 12px -6px #000,0 0 0 1px #0a0b05}
@media(min-width:760px){.unit{grid-template-columns:auto 120px minmax(0,1fr) auto}}
.unit .leds{display:grid;grid-template-columns:repeat(2,10px);gap:6px}
.unit .leds i{width:10px;height:10px;border-radius:2px;background:#1a1c0d;box-shadow:inset 0 0 0 1px #000}
.unit.live .leds i{animation:led 1.2s steps(2) infinite}
.unit.live .leds i:nth-child(1){background:var(--phos);box-shadow:0 0 8px var(--phos);animation-duration:.9s}
.unit.live .leds i:nth-child(2){background:var(--lamp);box-shadow:0 0 8px var(--lamp);animation-duration:1.7s;animation-delay:-.4s}
.unit.live .leds i:nth-child(3){background:var(--phos);box-shadow:0 0 8px var(--phos);animation-duration:2.3s;animation-delay:-1s}
.unit.live .leds i:nth-child(4){background:var(--phos);box-shadow:0 0 8px var(--phos);animation-duration:.6s}
@keyframes led{50%{opacity:.25}}
.unit .uid{font-family:var(--sten);font-weight:800;font-size:28px;letter-spacing:.06em;color:var(--paint);opacity:.85;display:none}
@media(min-width:760px){.unit .uid{display:block}}
.unit h3{margin:0;font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.01em;line-height:1.1}
.unit p{margin:4px 0 0;color:var(--paint);font-size:15.5px;max-width:56ch}
.unit p a{color:var(--phos)}
.unit .certs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.unit .certs span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--phos);border:1px solid rgba(234,217,167,.25);border-radius:4px;padding:4px 8px;text-shadow:0 0 6px rgba(234,217,167,.3)}
.unit .ports{display:none;grid-template-columns:repeat(4,12px);gap:5px}
@media(min-width:760px){.unit .ports{display:grid}}
@media(max-width:759px){.rack{padding:14px 26px}.rail{top:10px;bottom:10px;width:12px}.rail.l{left:7px}.rail.r{right:7px}.unit{padding:14px;gap:14px}}  /* phones: more room for the text */
.unit .ports i{width:12px;height:9px;border-radius:2px;background:#0a0b05;box-shadow:inset 0 1px 2px #000,0 0 0 1px #4b4e33}

/* LEVEL 02: the operator feed (CAM 02): Yasir's masked character at his console, beside the rack */
.op-grid{display:grid;gap:var(--gap)}
.op-grid .feed{width:100%;max-width:520px;margin-inline:auto}
@media(min-width:1100px){.op-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px);grid-template-areas:"rack feed";align-items:start;column-gap:clamp(24px,3vw,40px)}
  .op-grid .rack{grid-area:rack;max-width:none;margin:0}.op-grid .feed{grid-area:feed;position:sticky;top:96px;max-width:none;margin:0}}
.device.feed{grid-template-areas:"plate" "screen" "note" "hazard"}
.feed-screen{grid-area:screen;position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#0c0d06;
  box-shadow:0 0 0 2px #11130a,0 0 0 8px #2a2e15,0 0 0 9px #11130a}
.feed-screen video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
#feedLook{opacity:0}#feedLook.on{opacity:1}
.feed-screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,0,.55) 100%)}
.feed-screen::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 30% 12%,rgba(255,255,255,.07),transparent 42%);box-shadow:inset 0 0 40px rgba(0,0,0,.65);animation:flick 4s steps(1) infinite}
.feed-screen:focus-visible{outline:2px solid var(--phos);outline-offset:4px}
#feedStatic{position:absolute;inset:0;z-index:3;width:100%;height:100%;opacity:0;image-rendering:pixelated;pointer-events:none}
#feedStatic.on{opacity:.9}
.fo{position:absolute;z-index:4;pointer-events:none;font-family:var(--mono);font-size:clamp(9.5px,1vw,11px);letter-spacing:.14em;text-transform:uppercase;color:#f2ead2;text-shadow:0 0 6px rgba(0,0,0,.9),0 0 10px rgba(255,237,204,.25)}
.fo.tl{left:14px;top:12px}.fo.tr{right:14px;top:12px;display:flex;align-items:center;gap:7px}.fo.bl{left:14px;bottom:12px}.fo.br{right:14px;bottom:12px}
.fo.tr i{position:relative;width:8px;height:8px;border-radius:50%;background:#5cc463}
.fo.tr i::before{box-shadow:0 0 8px #5cc463;animation:breathe 2.8s ease-in-out infinite}
.fo.tr{color:#bff0b8}
.feed-note{grid-area:note;margin:0;padding:0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* until the first tap the line calls for it: a terminal cursor blinks before it and the words glow slowly (Yasir, 25 Oct 2026) */
.feed-note.cue{color:var(--phos);animation:cue 2s ease-in-out infinite}
.feed-note.cue::before{content:"";display:inline-block;width:7px;height:11px;margin-inline-end:9px;vertical-align:-1px;background:var(--phos);box-shadow:0 0 8px var(--phos);animation:blink 1s steps(2) infinite}
@keyframes cue{0%,100%{opacity:.6;text-shadow:none}50%{opacity:1;text-shadow:0 0 10px rgba(234,217,167,.65)}}
@media(prefers-reduced-motion:reduce){.feed-note.cue,.feed-note.cue::before{animation:none}}
@media (prefers-reduced-motion: reduce){.fo.tr i::before,.fo.tr i::after,.feed-screen::after{animation:none}}

/* LEVEL 03: test chain */

/* LEVEL 03: screening room (film card, same frame as the channel cards) */
.reel{border-radius:14px;padding:16px;display:grid;gap:14px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.016) 0 1px,transparent 1px 9px),linear-gradient(180deg,#2c3016,#1d200c);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #0a0b05,0 30px 50px -30px #000}
.rscreen{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0c0d06;box-shadow:0 0 0 6px #191b0c,0 0 0 7px #0a0b05,inset 0 0 40px rgba(0,0,0,.8)}
.rscreen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.rscreen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)}
.rtag,.rtime{position:absolute;top:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--phos);text-shadow:0 0 6px rgba(234,217,167,.5);pointer-events:none}
.rtag{left:14px}.rtime{right:14px}
.rbig{position:absolute;left:50%;top:50%;z-index:3;width:76px;height:76px;margin:-38px 0 0 -38px;border:1px solid rgba(234,217,167,.5);border-radius:4px;background:rgba(11,12,5,.55);cursor:pointer;display:grid;place-items:center;transition:opacity .25s,transform .25s}
.rbig span{width:0;height:0;margin-left:6px;border-left:20px solid var(--phos);border-top:12px solid transparent;border-bottom:12px solid transparent;filter:drop-shadow(0 0 6px rgba(234,217,167,.6))}
.reel.playing .rbig{opacity:0;transform:scale(.9);pointer-events:none}
.rmute{position:absolute;right:12px;bottom:12px;z-index:3;width:42px;height:42px;padding:0;border:1px solid rgba(234,217,167,.45);border-radius:4px;background:rgba(11,12,5,.55);display:grid;place-items:center;cursor:pointer}
.rmute svg{width:22px;height:22px;overflow:visible}.rmute .b{fill:var(--phos)}.rmute .x path,.rmute .w path{fill:none;stroke:var(--phos);stroke-width:1.8;stroke-linecap:round}
.rmute .w{display:none}.rmute.on .w{display:inline}.rmute.on .x{display:none}.rmute:hover,.rmute:focus-visible{border-color:var(--phos);outline:none}
.rdeck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play track full";gap:12px;align-items:center}
.rdeck .key{height:36px;font-size:10.5px;min-width:0;padding:0 12px;white-space:nowrap}
#reelPlay{grid-area:play;min-width:76px}#reelTrack{grid-area:track}#reelFull{grid-area:full}
@media(max-width:600px){.rdeck{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"track track track" "play full ."}}
.rtrack{position:relative;height:36px;cursor:pointer;touch-action:none}
.rtrack::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#0c0d06;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.rtrack:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.rfill{position:absolute;left:0;top:50%;width:0;height:4px;margin-top:-2px;border-radius:2px;background:var(--phos);box-shadow:0 0 8px rgba(234,217,167,.6)}
.rcap{position:absolute;left:0;top:50%;width:12px;height:22px;margin:-11px 0 0 -6px;border-radius:2px;background:linear-gradient(180deg,#e6dfc4,#b9b192);box-shadow:0 2px 4px rgba(0,0,0,.6)}
.rinfo{display:grid;gap:22px;padding:8px 4px 4px}
@media(min-width:900px){.rinfo{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px}}
.rkick{display:block;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rmain h3{margin:0 0 10px;font-size:clamp(26px,3vw,44px);font-weight:700;letter-spacing:-.02em;line-height:1.02}
.rmain p{margin:0;max-width:560px;color:var(--paint);font-size:16px}
.rcred ol{list-style:none;margin:0;padding:0;counter-reset:c}
.rnote{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(219,213,186,.12);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rcred li{counter-increment:c;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid rgba(219,213,186,.12);font-size:15px}
@media(min-width:1100px){.reel{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);grid-template-areas:"screen info" "deck info";column-gap:30px;align-items:start}
  .reel .rscreen{grid-area:screen}.reel .rdeck{grid-area:deck}.reel .rinfo{grid-area:info;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:6px}}
.rcred li::before{content:counter(c,decimal-leading-zero);font-family:var(--sten);font-weight:800;font-size:16px;letter-spacing:.06em;color:var(--paint);opacity:.8}

/* LEVEL 04: the source room (one dial writes the code and builds the mark) */
.source{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"code" "mark" "ctrl";border-radius:14px;padding:16px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.016) 0 1px,transparent 1px 9px),linear-gradient(180deg,#2c3016,#1d200c);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #0a0b05,0 30px 50px -30px #000}
@media(min-width:900px){.source{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"code mark" "ctrl ctrl"}}
.src-scr{position:relative;min-height:300px;border-radius:12px;overflow:hidden;background:#0c0d06;box-shadow:0 0 0 6px #191b0c,0 0 0 7px #0a0b05,inset 0 0 40px rgba(0,0,0,.8)}
.src-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.src-code{grid-area:code}.src-mark{grid-area:mark}
.src-scr .val{position:absolute;right:12px;top:10px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--phos);text-shadow:0 0 6px rgba(234,217,167,.5)}
.src-code pre{position:absolute;inset:0;margin:0;padding:38px 16px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--phos);white-space:pre;overflow:hidden;text-shadow:0 0 6px rgba(234,217,167,.45)}
@media(min-width:900px){.src-code pre{font-size:14px;padding:42px 22px 20px}.src-scr{min-height:350px}}
.src-code pre .k{color:#e7a698}.src-code pre .c{color:var(--phos-dim)}
.src-code pre .cur{display:inline-block;width:7px;height:14px;margin-left:1px;background:var(--phos);vertical-align:-2px;animation:blink 1s steps(2) infinite;box-shadow:0 0 8px var(--phos)}
.src-mark svg{position:absolute;left:18px;right:18px;top:36px;bottom:44px;width:calc(100% - 36px);height:calc(100% - 80px);overflow:visible;filter:drop-shadow(0 0 3px rgba(234,217,167,.35))}
.src-mark .g line{stroke:rgba(234,217,167,.32);stroke-width:.3;stroke-dasharray:1;stroke-dashoffset:1}
.src-mark .g rect{fill:rgba(234,217,167,.08);opacity:0}
.src-mark .b rect{fill:var(--phos)}
.src-tag{position:absolute;left:0;right:0;bottom:14px;z-index:2;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--phos);opacity:0;transition:opacity .4s}
.src-tag.on{opacity:1;text-shadow:0 0 8px rgba(234,217,167,.6)}
.src-ctrl{grid-area:ctrl;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;padding:4px}
.src-ctrl h3{margin:4px 0 6px;font-size:clamp(22px,2.1vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.02}
.src-ctrl p{margin:0;max-width:620px;color:var(--paint);font-size:15px}
.dial-wrap{position:relative;padding:9px;border-radius:50%;background:repeating-conic-gradient(from 210deg,var(--dim) 0 1.5deg,transparent 1.5deg 20deg)}
.dial{width:80px;height:80px;border-radius:50%;position:relative;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 35% 30%,#3c3f2b,#0e0f07 72%);box-shadow:0 0 0 3px #0a0b05,0 10px 20px -6px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1)}
.dial::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:20px;margin-left:-1.5px;background:var(--phos);border-radius:2px;box-shadow:0 0 6px var(--phos)}

/* LEVEL 04: The Nook, Fazaa's room (Yasir, 26 Oct 2026, the approved mock). His face is drawn in code (cream phosphor
   lines) on the screen of one still image; the body never moves and the face never hops. States: idle (blinks, eyes
   follow the pointer and the question under it), think, read, happy. The eight questions are keys under him. */
.fz{position:absolute;left:0;top:0;width:0;height:0;z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.fz>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fz-face{filter:drop-shadow(0 0 4px rgba(255,237,204,.9)) drop-shadow(0 0 14px rgba(234,217,167,.4));transition:opacity .4s}
.fz-face .b,.fz-happy,.fz-closed,.fz-m{fill:none;stroke:#ffedcc;stroke-width:9;stroke-linecap:round;transition:stroke-width .5s,opacity .18s}
.fz-eyes ellipse{fill:#ffedcc}
.fz-brows .b{transition:transform .35s cubic-bezier(.2,.7,.2,1),stroke-width .5s}
.fz-look{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.fz-eyes{transform-box:fill-box;transform-origin:center;transition:transform .07s,opacity .18s}
.fz-happy,.fz-closed,.fz-m{opacity:0}
.fz-m.line,.fz-m.soft{transform-box:fill-box;transform-origin:center}
.fz-scan{opacity:0}
.fz.blink .fz-eyes{transform:scaleY(.1)}
.fz.s-idle .fz-m.soft,.fz.s-read .fz-m.soft{opacity:1}
.fz.s-happy .fz-m.big{opacity:1}
.fz.s-think .fz-m.line{opacity:1}
.fz.s-think .fz-brows .r{transform:translateY(-10px) rotate(-7deg)}
.fz.s-think .fz-m.line{transform:scaleX(.55) translateX(14px)}
.fz.s-think .fz-scan{opacity:1;animation:fzScan 1.05s linear infinite}
@keyframes fzScan{from{transform:translateY(0)}to{transform:translateY(210px)}}
.fz.s-happy .fz-eyes{opacity:0}
.fz.s-happy .fz-happy{opacity:1}
.fz.s-happy .fz-brows .b{transform:translateY(-9px)}
/* the room (v51, Yasir picked layout A of three on 26 Oct 2026: on phones the floating questions crowded each other
   and the bubble): Fazaa at the start, standing on his dock (--bh: his height, --fw: his width), his answers in a
   bubble beside his head that pops up and closes by itself, and the eight questions as even keys under him, within
   the thumb's reach. Nothing floats; on a phone the whole room fits one screen. On wider screens Fazaa and his bubble
   take the first half and the keys the second, under the lead (the floor headline's two columns), the keys' top on
   the line of his head and the bubble. */
.field{--bh:clamp(340px,28vw,400px);--fw:calc(var(--bh) * .565);position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
.tape{position:absolute;left:calc(var(--fw) + 18px);top:calc(var(--bh) * .03);z-index:3;margin:0;width:min(420px,calc(50% - 8px - var(--fw) - 18px));padding:14px 16px;border-radius:12px;text-align:start;
  font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--phos);text-shadow:0 0 6px rgba(234,217,167,.55),0 0 16px rgba(234,217,167,.18);
  background:radial-gradient(ellipse at 50% 40%,#1d1a0c,#0c0b05 80%);box-shadow:0 0 0 2px #11130a,0 0 0 6px #2a2e15,0 0 0 7px #11130a,inset 0 0 24px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;transform:translateX(-10px) scale(.94);transform-origin:0 calc(var(--bh) * .12);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.tape.show{opacity:1;pointer-events:auto;transform:none}
.tape::after{content:"";position:absolute;left:-13px;top:calc(var(--bh) * .09);width:14px;height:16px;background:#2a2e15;clip-path:polygon(100% 0,100% 100%,0 50%)}
html[dir="rtl"] .tape{left:auto;right:calc(var(--fw) + 18px);transform:translateX(10px) scale(.94);transform-origin:100% calc(var(--bh) * .12)}
html[dir="rtl"] .tape.show{transform:none}
html[dir="rtl"] .tape::after{left:auto;right:-13px;clip-path:polygon(0 0,0 100%,100% 50%)}
html[lang="ar"] .tape,.tape[dir="rtl"]{font-family:"Qomra",var(--sans);letter-spacing:0;line-height:1.85;font-size:15px}
.who{position:relative;display:grid;grid-template-columns:auto 1fr;justify-items:start;align-items:end;z-index:1}
.body{position:relative;height:var(--bh);aspect-ratio:595/1053;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.body img{position:absolute;inset:0;width:100%;height:100%;user-select:none;filter:drop-shadow(0 16px 16px rgba(0,0,0,.55))}
.body .glass{position:absolute;left:26.9%;top:7.9%;width:30.8%;height:15.1%;border-radius:16%/19%;background:radial-gradient(ellipse at 50% 45%,rgba(234,217,167,.12),rgba(234,217,167,0) 70%);pointer-events:none}
.body .fz{position:absolute;left:29%;top:9.8%;width:26.5%;height:11.2%;cursor:pointer;outline:none}
.body .fz-face .b,.body .fz-happy,.body .fz-closed,.body .fz-m{stroke-width:11}
.pad{grid-column:1/-1;justify-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:-4px;padding:9px 16px;border-radius:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);white-space:nowrap;
  background:linear-gradient(180deg,#30341a,#1d200c);box-shadow:0 0 22px -4px rgba(234,217,167,.18),0 10px 24px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.07)}
.pad .st{font-family:var(--sten);font-weight:800;font-size:13px;letter-spacing:.05em;color:var(--paint)}
.pad .bat{color:var(--phos-dim)}
html[dir="rtl"] .pad{direction:ltr}
.lmp.chg{background:radial-gradient(circle at 40% 35%,#fff2c8,var(--phos) 60%);box-shadow:0 0 10px rgba(234,217,167,.8);animation:nkChg 1.6s ease-in-out infinite}
@keyframes nkChg{50%{opacity:.25;box-shadow:none}}
/* the questions: eight even keys under him, each with a lamp that lights while its answer is on; the lamps blink on
   one after another the first time the room comes into view */
.qs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.q{position:relative;display:flex;align-items:center;min-height:58px;text-align:start;font-family:var(--mono);font-size:12.5px;line-height:1.35;color:var(--paint);padding:10px 14px 10px 32px;border:0;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#2a2e15,#1d200c);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(234,217,167,.12),0 6px 14px -8px rgba(0,0,0,.9);transition:color .2s,box-shadow .2s,background .2s}
.q::before{content:"";position:absolute;left:14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:rgba(234,217,167,.2);transition:background .2s,box-shadow .2s}
.q:hover{color:var(--cream);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(234,217,167,.34),0 6px 14px -8px rgba(0,0,0,.9)}
.q.on{color:var(--phos);background:linear-gradient(180deg,#5a0b06,#3a0300);text-shadow:0 0 8px rgba(234,217,167,.45)}
.q.on::before{background:var(--phos);box-shadow:0 0 8px rgba(234,217,167,.95)}
.q.boot::before{animation:nkLamp .7s ease-out}
@keyframes nkLamp{0%,35%{background:var(--phos);box-shadow:0 0 10px rgba(234,217,167,.95)}}
html[dir="rtl"] .q{padding:10px 32px 10px 14px}
html[dir="rtl"] .q::before{left:auto;right:14px}
html[lang="ar"] .q{font-family:"Qomra",var(--sans);letter-spacing:0;font-size:15px}
@media (max-width:899px){
  .field{--bh:clamp(266px,40vw,330px);display:block;max-width:640px}
  .tape{width:min(420px,calc(100% - var(--fw) - 18px));font-size:12.5px;padding:12px 14px}html[lang="ar"] .tape,.tape[dir="rtl"]{font-size:14px}
  .qs{gap:8px;margin-top:14px}
  .q{min-height:54px;font-size:11.5px;padding:10px 12px 10px 30px}
  html[dir="rtl"] .q{padding:8px 30px 10px 12px}
  .q::before{left:13px}
  html[dir="rtl"] .q::before{left:auto;right:13px}
  html[lang="ar"] .q{font-size:13px}
  .pad{gap:10px;padding:8px 12px;font-size:9.5px}
}
.nook-bench{margin-top:var(--gap)}   /* his bench sits in his room, no heading of its own (Yasir, 30 Oct 2026) */
@media (prefers-reduced-motion: reduce){.lmp.chg,.q.boot::before,.fz.s-think .fz-scan{animation:none}}

/* LEVEL 05: the uplink (intercom, the links with FOURP®'s works, the last line) */
.device.intercom{grid-template-areas:"plate" "grille" "ic" "links" "hazard";gap:20px}
@media(min-width:760px){.device.intercom{grid-template-columns:240px minmax(0,1fr);grid-template-areas:"plate plate" "grille ic" "links links" "hazard hazard";column-gap:28px}}
@media(min-width:1000px){.device.intercom{grid-template-columns:280px minmax(0,1fr) minmax(0,340px);grid-template-areas:"plate plate plate" "grille ic links" "hazard hazard hazard";column-gap:36px}}
.grille{grid-area:grille;position:relative;overflow:hidden;height:200px;border-radius:10px;background-color:#0f1107;background-image:radial-gradient(#000 38%,transparent 42%);background-size:12px 12px;box-shadow:inset 0 2px 8px #000}
@media(max-width:759px){.grille{height:110px}}
.ic-wave{position:absolute;inset:0;display:block;width:100%;height:100%}
.grille.talk{animation:talk .12s steps(2) infinite}
@keyframes talk{50%{box-shadow:inset 0 2px 8px #000,inset 0 0 30px rgba(234,217,167,.2)}}
.ic{grid-area:ic;display:grid;gap:14px;align-content:center;justify-items:start}
.ic .label{margin-top:8px}
.ic .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ic .key{height:56px;font-size:13px}
.mail{max-width:100%;overflow-wrap:anywhere;font-size:clamp(24px,2.6vw,38px);font-weight:650;letter-spacing:-.01em;color:var(--cream);text-decoration:none;border-bottom:1px solid var(--edge)}
.mail:hover{color:var(--phos);border-color:var(--phos)}
.ic [hidden]{display:none!important}
#icLamp.blink{animation:blink 1s steps(2) infinite}
.ic-msg{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--phos);text-shadow:0 0 6px rgba(234,217,167,.4)}
.uplinks{grid-area:links;display:grid;align-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.uplinks .label{padding-bottom:10px}
.uplinks>a{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--edge);color:var(--phos);text-decoration:none}
.uplinks>a span:first-child{color:var(--paint)}
.uplinks>a:hover,.uplinks>a:focus-visible{color:var(--cream);outline:none}.uplinks>a:hover span:first-child{color:var(--cream)}
/* under FOURP®, its published works as a quiet list of names (each opens its page on fourp.co), then all works.
   A static list (Yasir, 26 Oct 2026): add a name when FOURP® publishes a new work. */
.works{padding:0 0 14px;border-bottom:1px solid var(--edge);text-transform:none;letter-spacing:.02em}
.works-note{margin:0 0 9px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.works ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 16px}
.works li a{font-size:12px;line-height:2;color:var(--paint);text-decoration:none}
.works li a:hover,.works li a:focus-visible{color:var(--phos);outline:none}
.works .all{display:inline-block;margin-top:8px;color:var(--phos);text-decoration:none;text-transform:uppercase;letter-spacing:.1em}
.works .all:hover,.works .all:focus-visible{color:var(--cream);outline:none}
.uplink-lead{max-width:54ch;margin:var(--sec) 0 0;font-size:19px;color:var(--paint)}

footer{position:relative;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding:26px var(--pad) 34px;border-top:1px solid var(--edge);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
footer a{text-decoration:none}
footer a:hover{color:var(--phos)}

/* ---------- Level 00: the hidden floor, lit by one caged lamp; always dark, whatever the lights upstairs ---------- */
.l00{position:fixed;inset:0;z-index:34;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;color:var(--cream);background:#050602}
.l00::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(ellipse 46% 62% at 50% 0%,rgba(234,217,167,.16),transparent 72%),radial-gradient(ellipse at 50% 120%,#14170a,transparent 60%)}
.l00.lit::before{opacity:1}
.l00[hidden]{display:none}
.l00:focus{outline:none}
html.in-l00{overflow:hidden}
.l00-lamp{position:absolute;top:0;left:50%;width:44px;margin-left:-22px;pointer-events:none}
.l00-lamp::before{content:"";display:block;width:2px;height:70px;margin:0 auto;background:#1c1e0e}
.l00-lamp .lamp{width:44px;height:70px}
.l00-in{position:relative;max-width:1100px;margin:0 auto;padding:190px var(--pad) 90px;display:grid;gap:clamp(28px,4vw,48px)}
.l00-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--edge)}
.l00-lv{font-family:var(--sten);font-weight:800;font-size:clamp(70px,11vw,150px);line-height:.8;color:var(--steel-3);-webkit-text-stroke:1px var(--edge)}
.l00-stamp{padding:8px 12px 6px;border:2px solid #a3241a;border-radius:4px;transform:rotate(-3deg);font-family:var(--sten);font-weight:800;font-size:clamp(16px,2.2vw,24px);letter-spacing:.12em;color:#c9442f;text-shadow:0 0 10px rgba(163,36,26,.45);white-space:nowrap}
.l00-letters{display:grid;gap:clamp(36px,5vw,64px)}
@media(min-width:900px){.l00-letters{grid-template-columns:1fr 1fr;grid-template-areas:"en ar"}.l00-letter.ar{grid-area:ar}.l00-letter.en{grid-area:en;padding-right:clamp(24px,4vw,56px);border-right:1px solid var(--edge)}}
.l00-letter p{margin:0 0 16px}
.l00-letter .to{font-weight:700;color:var(--phos)}
.l00-letter .sign{margin-top:26px;font-weight:700;color:var(--phos)}
.l00-letter.ar{font-family:var(--sans);font-size:clamp(19px,1.9vw,23px);line-height:1.95}
.l00-letter.en{font-size:clamp(16px,1.5vw,18px);line-height:1.7;color:var(--paint)}
.l00-end{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--phos-dim)}
.l00-end .cur{display:inline-block;width:8px;height:14px;margin-left:6px;vertical-align:-2px;background:var(--phos);animation:blink 1s steps(2) infinite}
#l00Back{justify-self:start;height:44px}

/* ---------- prayer time: the agent screen pauses for visitors in Saudi Arabia; a soft green scanner sweeps the glass ---------- */
.pray{position:absolute;inset:0;z-index:2;display:grid;place-items:center;overflow:hidden;padding:20px 18px;text-align:center;background:radial-gradient(ellipse at 50% 45%,#13200f 0%,#0b1309 68%,#060a05 100%)}
.pray[hidden]{display:none}
.crt.praying .scr-top,.crt.praying .scr-body,.crt.granted .scr-top,.crt.granted .scr-body{visibility:hidden}
.grant-big{margin:4px 0 0;font-family:var(--mono);font-weight:600;font-size:clamp(26px,4.2vw,44px);letter-spacing:.14em;color:#d6f7cf;text-shadow:0 0 16px rgba(143,224,143,.65);animation:grantIn .9s steps(1,end)}
@keyframes grantIn{0%,20%,40%{opacity:0}10%,30%,50%,100%{opacity:1}}
.pray-scan{position:absolute;left:0;right:0;top:0;height:36%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(92,196,99,.08) 38%,rgba(143,224,143,.30) 50%,rgba(92,196,99,.08) 62%,transparent);animation:prayScan 3.4s ease-in-out infinite alternate}
@keyframes prayScan{from{transform:translateY(-100%)}to{transform:translateY(278%)}}
.pray-in{position:relative;display:grid;justify-items:center;gap:8px;max-width:100%}
.pray-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8fe08f;text-shadow:0 0 8px rgba(92,196,99,.7)}
.pray-ar{margin:6px 0 0;font-family:var(--sans);font-size:clamp(30px,4.6vw,50px);font-weight:700;line-height:1.35;color:var(--cream);text-shadow:0 0 16px rgba(143,224,143,.35)}
.pray-en{margin:0;font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--phos)}
.pray-back{display:grid;gap:2px;margin:12px 0 0;font-family:var(--mono);font-size:12px;color:var(--phos-dim)}
.pray-back [lang="ar"]{font-family:var(--sans);font-size:15px;color:var(--phos)}
.pray-city{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--phos-dim)}
.pray-change{padding:0 0 1px;border:0;background:none;font-family:var(--mono);font-size:11.5px;color:#8fe08f;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pray select{margin-top:4px;padding:8px 12px;border:1px solid rgba(143,224,143,.5);border-radius:6px;background:#0b1309;color:var(--phos);font-family:var(--mono);font-size:16px}
.keys #q:disabled{opacity:.55}.keys .key:disabled{opacity:.5;cursor:not-allowed;transform:none}
@media (prefers-reduced-motion: reduce){.pray-scan{animation:none;top:32%}}

/* ---------- lamps: caged lamps on every floor and one over the console; dim at night, full when the lights are on ---------- */
.lamp{--bulb:#4a4325;--fil:#c9a96a;display:block;flex:none;width:22px;height:35px;overflow:visible;filter:drop-shadow(0 0 3px rgba(234,190,110,.35))}
.lamp.on{--bulb:#fff6dc;--fil:#fffaf0;filter:drop-shadow(0 0 5px rgba(255,244,214,.95)) drop-shadow(0 0 16px rgba(234,217,167,.55))}
.lamp.flick{animation:lampOn .8s steps(1,end)}
@keyframes lampOn{0%,18%,34%{opacity:.5;filter:none}9%,26%,46%,100%{opacity:1}}
.floor .fd{display:flex;align-items:flex-end;gap:12px}
.hero-lamp{display:none}
@media(min-width:1100px){.hero-lamp{display:block;position:absolute;top:0;left:66%;width:44px;margin-left:-22px;pointer-events:none}
  .hero-lamp::before{content:"";display:block;width:2px;height:62px;margin:0 auto;background:#1c1e0e}.hero-lamp .lamp{width:44px;height:70px}}
.tbtn .bulb{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#tLight.on .bulb path:first-child{fill:#fff3cf;stroke:#fff3cf;filter:drop-shadow(0 0 4px rgba(234,217,167,.9))}
@media(max-width:380px){.readout .lvw{display:none}.top-r{gap:6px}}
@media(max-width:600px){#tLight span{display:none}#tLight{padding-left:11px;padding-right:11px}}
@media (prefers-reduced-motion: reduce){.lamp.flick{animation:none}}

/* ---------- lights on (day): the facility lit up. Walls turn cream paper, text night olive, accents oxblood;
   the hardware and its screens stay as they are. Toggled by the Lights switch, remembered in the browser. ---------- */
html[data-theme="day"]{color-scheme:light;background:#ece8d6}
html[data-theme="day"] body{background:#ece8d6;color:#161808}
html[data-theme="day"] :focus-visible{outline-color:#4c0000}
html[data-theme="day"] .lamp.on{--bulb:#ffe7a8;filter:drop-shadow(0 0 6px rgba(255,196,96,.95)) drop-shadow(0 0 24px rgba(240,180,90,.6))}  /* a lit bulb still reads on a light wall */
html[data-theme="day"] .grain{opacity:.06}
html[data-theme="day"] .vignette{background:radial-gradient(ellipse at 50% 40%,transparent 55%,rgba(35,38,15,.16) 100%)}
html[data-theme="day"] .descent-shade{background:rgba(35,38,15,.3)}
html[data-theme="day"]{--bar:color-mix(in srgb,#23260f calc(var(--depth,0) * 30%),#ece8d6)}
html[data-theme="day"] .brand{color:#161808}
html[data-theme="day"] .readout .si{color:#6e6c58}
html[data-theme="day"] .readout .si b{color:#4c0000;text-shadow:none}
html[data-theme="day"] .gauge-v .trk,html[data-theme="day"] .gauge-v .tk{background:rgba(35,38,15,.28)}
html[data-theme="day"] .gauge-v .lv{color:#8f8c76}
html[data-theme="day"] .gauge-v .lv.on{color:#4c0000;text-shadow:none}
html[data-theme="day"] .hero::before{background:radial-gradient(ellipse 38% 72% at 66% -8%,rgba(255,252,240,.7),transparent 70%)}  /* one soft beam that fades well before the floor below */
html[data-theme="day"] .kicker{color:#4c0000;text-shadow:none}
html[data-theme="day"] .h1 em{color:#4c0000;text-shadow:none}
html[data-theme="day"] .lead,html[data-theme="day"] .uplink-lead{color:#3a3c25}
html[data-theme="day"] .howto span{border-color:rgba(35,38,15,.32);color:#6e6c58}
html[data-theme="day"] .floor{border-bottom-color:rgba(35,38,15,.2)}
html[data-theme="day"] .floor .fn{color:#dbd5ba;-webkit-text-stroke:1px rgba(35,38,15,.35)}
html[data-theme="day"] .floor .fl{color:#4c0000;text-shadow:none}
html[data-theme="day"] .floor .fl em,html[data-theme="day"] .floor .fd{color:#6e6c58}
html[data-theme="day"] footer{border-top-color:rgba(35,38,15,.2);color:#6e6c58}
html[data-theme="day"] footer a:hover{color:#4c0000}
/* lit from above: hardware casts softer shadows on the light walls */
html[data-theme="day"] .device{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.4),0 0 0 1px #11130a,0 40px 70px -40px rgba(22,24,8,.6),0 14px 26px -16px rgba(22,24,8,.45)}
html[data-theme="day"] .reel,html[data-theme="day"] .source{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px #0a0b05,0 26px 40px -28px rgba(22,24,8,.6)}
html[data-theme="day"] .rack{box-shadow:0 0 0 2px #0a0b05,0 0 0 6px #23260f,0 0 0 7px #0a0b05,0 40px 60px -30px rgba(22,24,8,.6)}
/* switching: the walls fade while the lamps come on one by one */
html.theme-anim,html.theme-anim body{transition:background-color .9s ease}
html.theme-anim *{transition:color .9s ease,border-color .9s ease,stroke .9s ease,fill .9s ease}
html.theme-anim .top{transition:background-color .9s ease}
/* phones: chat mode, like the ChatGPT and Claude apps (Yasir, 25 Oct 2026). A tap on the input lifts the console out of
   the page to fill the screen above the keyboard: plate and a close key at the top, the screen in the middle, the
   input at the bottom. The page behind stays still; the conversation stays on the screen and scrolls. */
.chat-x{display:none}
.chat-back{position:fixed;inset:-160px 0;z-index:59;background:#1d200c}
html.chat-on,html.chat-on body{overflow:hidden}
.device.console.chat{position:fixed;left:0;right:0;top:var(--ct,0px);height:var(--ch,100vh);z-index:60;margin:0;border-radius:0;transform:none!important;opacity:1!important;visibility:visible!important;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 14px 14px;gap:10px;grid-template-rows:auto minmax(0,1fr) auto;box-shadow:none;touch-action:none}
/* iPhone's bars over the keyboard (address pill, ✓ bar, AutoFill) are see-through glass and the page showed behind
   them (Yasir, 25 Oct 2026): the console's colour runs on far below its bottom edge, and above its top */
.device.chat::after,.device.chat::before{content:"";position:absolute;left:0;right:0;height:120vh;pointer-events:none}
.device.chat::after{top:100%;background:#1d200c}
.device.chat::before{bottom:100%;background:#30341a}
.device.chat .rivet{display:none}
.device.chat .plate{padding:0 2px;gap:10px;margin-bottom:10px}
.device.chat .lamps{margin-left:auto;gap:10px}
/* the close key: small and flat, centred on the lamps, a thin white light running round its edge so it is found
   (Yasir, 25 Oct 2026) */
.device.chat .chat-x{display:inline-flex}
.chat-x{position:relative;align-items:center;justify-content:center;flex:none;width:32px;height:28px;padding:0;border:0;border-radius:8px;background:rgba(242,239,223,.06);color:var(--paint);cursor:pointer;-webkit-tap-highlight-color:transparent}
.chat-x .x{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.chat-x .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.chat-x .ring .base{stroke:rgba(242,239,223,.18);stroke-width:1}
.chat-x .ring .run{stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:18 82;filter:drop-shadow(0 0 2px rgba(255,255,255,.8));animation:xRun 2.6s linear infinite}
@keyframes xRun{to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.chat-x .ring .run{animation:none;stroke-dasharray:none;stroke:rgba(255,255,255,.45)}}
.device.chat .screen{min-height:0;display:flex;flex-direction:column}
.device.chat .crt{flex:1;min-height:0;height:auto}
.device.chat .scr-body{overscroll-behavior:contain;touch-action:pan-y}
.device.chat #q{touch-action:pan-y}
.device.chat .keys{margin-top:16px}   /* clear of the screen's outer ring */
/* Phones: Safari on iOS 26 draws the page under its bottom toolbar but not the fixed layers (grain, vignette, depth
   shade), so the strip under the toolbar showed lighter than the page (Yasir, 25 Oct 2026; running the layers on under
   the edge did not help). On phones the page's own background carries the depth (--bar, the colour the shade gave)
   and the grain, and the fixed layers are off. */
@media (pointer:coarse){
  .grain,.vignette,.descent-shade{display:none}
  html:root,html:root body,html:root[data-theme="day"],html:root[data-theme="day"] body{background-color:var(--bar)}
  html:root body,html:root[data-theme="day"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
}
/* the conversation stays on a phone's screen: each question starts a little lower than the answer before it */
.scr-body .ask:not(:first-child){margin-top:18px}



/* ---------- the Arabic page (yasir.ai/ar/, built from this page): the human copy is Arabic and right to left in
   Qomra; floor names, plates and hardware keys stay English, and the devices stay left to right ---------- */
html[lang="ar"] [lang="ar"]{letter-spacing:0!important;text-transform:none!important}
/* Qomra's stretched final letters (Stylistic Set 1) on the Arabic headlines only (Yasir, 24 Oct 2026) */
html[lang="ar"] :is(h1,h2,h3)[lang="ar"],html[lang="ar"] :is(h1,h2,h3) [lang="ar"]{font-feature-settings:"ss01"}
/* ...but words ending in ف ت ب ث, or holding a ك, stay natural: arabic.py marks them "nf" (Yasir, 25 Oct 2026) */
html[lang="ar"] .nf{font-feature-settings:normal}
html[lang="ar"] .h1[lang="ar"]{line-height:1.3;padding-bottom:.12em}
html[lang="ar"] .h2[lang="ar"]{line-height:1.3}
html[lang="ar"] .lead[lang="ar"],html[lang="ar"] .unit p[lang="ar"],html[lang="ar"] .rmain p[lang="ar"],html[lang="ar"] .src-ctrl p[lang="ar"]{line-height:1.85}
html[lang="ar"] .unit h3[lang="ar"]{line-height:1.35}
html[dir="rtl"] .ebtn{text-align:right}
/* right to left, anything that sticks out on the left (the rack units waiting to slide in, a fader cap) would widen
   the page and let it pan sideways: the floors clip it (clip, not hidden: no scroll box, sticky and the page scroll stay) */
html[dir="rtl"] main{overflow-x:clip}
/* English runs inside the right-to-left page keep their own order: the status readout and header keys, the depths,
   the certificate names and the links with an arrow */
html[dir="rtl"] .top .readout,html[dir="rtl"] .tbtn,html[dir="rtl"] .floor .fd,html[dir="rtl"] .certs span,html[dir="rtl"] .ef a{direction:ltr;unicode-bidi:isolate}
/* Arabic words run wider than the English headline: a smaller size keeps it to the same few lines */
html[lang="ar"] .h1[lang="ar"]{font-size:min(11.5cqi,max(5vw,40px),84px)}