/* ═══════════════ e'thix — the front door (GET /welcome) ═══════════════
   Art direction: the engine of the text. Deep night, one champagne gold, a cold steel for the machine, bone paper for the
   law's own pages. Four architecture hairlines run the length of the page; big type is layered (outlined ghosts behind,
   solid statements in front); the recurring graphic is the gold thread from a fact to its text to its number.
   Three voices of type, each with one job:
     Ethix Display (Alexandria)          Ethix speaking: the giant statements, heavy, geometric, legible;
     Ethix Naskh (Noto Naskh Arabic)    the law speaking, and the second voice of a statement (in gold);
     Plex Arabic                        the small print: short, quiet, placed in the gaps of the big type.
   Two states of every chapter:
     html.x-js     (welcome-early.js: script on, motion allowed)  the choreographed story;
     otherwise     (no script, or prefers-reduced-motion)          the same story at rest, every chapter finished. */

@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

:root{
  --night:#0E1116;
  --night-1:#12161D;
  --night-2:#171C24;
  --night-3:#1E242E;
  --bone:#ECE7DE;
  --bone-2:#E3DDD2;
  --ink:#1D232C;
  --ink-soft:#434C59;
  --ash:#8F97A3;
  --ash-2:#5F6874;
  --gold:#C9AE7E;
  --gold-2:#E2CCA2;
  --gold-3:#9A7E51;
  --steel:#A8B7CC;
  --hair:rgba(236,231,222,.12);
  --hair-2:rgba(236,231,222,.2);
  --hair-ink:rgba(29,35,44,.16);
  --danger:#B04A3E;
  --warn:#9A6B1E;
  --disp:'Ethix Display','IBM Plex Sans Arabic',system-ui,sans-serif;
  --naskh:'Ethix Naskh','Noto Naskh Arabic','IBM Plex Sans Arabic',serif;
  --plex:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --latin:'Montserrat','IBM Plex Sans Arabic',system-ui,sans-serif;
  --gut:clamp(18px,4.2vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
  --inout:cubic-bezier(.76,0,.24,1);
  color-scheme:dark;
}
html[lang="en"]{--disp:'Montserrat','IBM Plex Sans Arabic',system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px;background:var(--night) url("/ethixd/img/noise-240.svg")}
body.w{margin:0;min-block-size:100dvh;overflow-x:clip;font-family:var(--plex);font-size:16px;line-height:1.8;color:var(--bone);
  background:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
html[lang="en"] body.w{line-height:1.65}
::selection{background:rgba(201,174,126,.4);color:var(--bone)}
a{color:inherit}
p,h1,h2,h3,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
[hidden]{display:none !important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.x-sr{position:absolute !important;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.w-skip{position:fixed;inset-block-start:10px;inset-inline-start:10px;z-index:200;padding:10px 16px;border-radius:10px;background:var(--bone);color:var(--ink);font-weight:600;text-decoration:none;transform:translateY(-180%);transition:transform .3s var(--out)}
.w-skip:focus{transform:none}
#w-main{outline:none}
.x-i{inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
html[dir="ltr"] .x-flip{transform:scaleX(-1)}

/* the architecture: four hairlines the length of the page, behind everything */
.x-arch{position:fixed;inset:0;z-index:-1;pointer-events:none;display:flex;justify-content:space-between;padding-inline:var(--gut)}
.x-arch i{inline-size:1px;block-size:100%;background:linear-gradient(to bottom,transparent,rgba(236,231,222,.05) 18%,rgba(236,231,222,.05) 82%,transparent)}

/* ── shared furniture ── */
.x-kicker{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:500;color:var(--ash);letter-spacing:0;line-height:1.5}
.x-kicker::before{content:"";inline-size:32px;block-size:1px;background:var(--gold);order:1}
.x-num{order:0;font-family:var(--latin);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold)}
.x-kicker > span:last-child{order:2}
html[lang="en"] .x-kicker{font-family:var(--latin);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.x-small{font-size:14.5px;line-height:1.95;color:var(--ash);max-inline-size:30rem}
html[lang="en"] .x-small{line-height:1.7}
.x-h2{font-family:var(--disp);font-weight:800;font-size:clamp(2.4rem,1.2rem + 4.8vw,6.4rem);line-height:1.12;letter-spacing:0;text-wrap:balance}
html[lang="en"] .x-h2{letter-spacing:-.035em;line-height:1}
.x-h3{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,1.1rem + 2.4vw,3.4rem);line-height:1.15}
html[lang="en"] .x-h3{letter-spacing:-.03em}
.x-naskh{font-family:var(--naskh);font-weight:600;color:var(--gold);font-style:normal}
html[lang="en"] .x-naskh{font-family:var(--latin);font-style:italic;font-weight:500;letter-spacing:-.02em}
.x-btn{display:inline-flex;align-items:center;gap:14px;min-block-size:56px;padding:0 26px 0 22px;border-radius:999px;background:var(--bone);color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap;
  transition:transform .45s var(--out),background-color .3s var(--ease),box-shadow .45s var(--out);box-shadow:0 14px 40px -18px rgba(236,231,222,.45)}
html[dir="rtl"] .x-btn{padding:0 22px 0 26px}
.x-btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,#B8976A);color:#15181E;box-shadow:0 18px 50px -16px rgba(201,174,126,.65),inset 0 1px 0 rgba(255,255,255,.35)}
@media (hover:hover){.x-btn:hover{transform:translateY(-2px)}.x-btn:not(.x-btn-gold):hover{background:var(--gold-2)}.x-btn-gold:hover{box-shadow:0 24px 60px -14px rgba(201,174,126,.85),inset 0 1px 0 rgba(255,255,255,.35)}.x-btn:hover .x-i{transform:translateX(-4px)}html[dir="ltr"] .x-btn:hover .x-i{transform:scaleX(-1) translateX(-4px)}}
.x-btn .x-i{transition:transform .45s var(--out)}
.x-btn:active{transform:scale(.97)}
.x-btn-xl{min-block-size:64px;font-size:17px;padding-inline:30px}
.x-ghostbtn{display:inline-flex;align-items:center;gap:12px;min-block-size:56px;padding:0 22px;border-radius:999px;border:1px solid var(--hair-2);font-size:15px;font-weight:600;text-decoration:none;background:rgba(14,17,22,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s var(--ease),background-color .3s var(--ease)}
@media (hover:hover){.x-ghostbtn:hover{border-color:var(--gold);background:rgba(201,174,126,.08)}}
.x-live{inline-size:8px;block-size:8px;border-radius:50%;background:#7FD1A8;box-shadow:0 0 0 3px rgba(127,209,168,.18);flex:none}
.x-js .x-live{animation:x-live 1.8s var(--ease) infinite}
@keyframes x-live{50%{box-shadow:0 0 0 7px rgba(127,209,168,0)}}

/* ── the progress hairline and the header ── */
.x-progress{position:fixed;inset-block-start:0;inset-inline:0;block-size:2px;z-index:90;pointer-events:none}
.x-progress i{display:block;block-size:100%;background:linear-gradient(to left,var(--gold-2),var(--gold));transform-origin:right;transform:scaleX(var(--sp,0))}
html[dir="ltr"] .x-progress i{transform-origin:left}
.x-nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:80;display:flex;align-items:center;gap:28px;padding:calc(12px + env(safe-area-inset-top)) var(--gut) 12px;color:var(--bone);transition:color .4s var(--ease)}
.x-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,17,22,.72);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-block-end:1px solid var(--hair);opacity:0;transition:opacity .4s var(--ease),background-color .4s var(--ease)}
.x-nav.is-scrolled::before{opacity:1}
body[data-under="paper"] .x-nav{color:var(--ink)}
body[data-under="paper"] .x-nav::before{background:rgba(236,231,222,.78);border-color:var(--hair-ink)}
.x-brand{display:inline-flex;align-items:center;min-block-size:44px;text-decoration:none}
.x-mark{font-family:var(--latin);font-weight:600;font-size:24px;line-height:1;letter-spacing:.02em;display:inline-flex;align-items:flex-start;white-space:nowrap}
.x-tick{display:inline-block;inline-size:.28em;block-size:.42em;margin:.02em .05em 0;position:relative}
.x-tick::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--gold-2),var(--gold-3));clip-path:polygon(30% 0,100% 0,55% 100%,0 100%);border-radius:2px;transform:skewX(-6deg)}
.x-links{display:flex;gap:4px;margin-inline:auto}
.x-links a{position:relative;display:inline-flex;align-items:center;min-block-size:44px;padding:0 12px;font-size:13.5px;font-weight:500;text-decoration:none;opacity:.78;transition:opacity .25s var(--ease)}
.x-links a::after{content:"";position:absolute;inset-inline:12px;inset-block-end:10px;block-size:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--out)}
@media (hover:hover){.x-links a:hover{opacity:1}.x-links a:hover::after{transform:scaleX(1)}}
.x-nav-end{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.x-links + .x-nav-end{margin-inline-start:0}
.x-lang{min-inline-size:44px;min-block-size:44px;border-radius:999px;font-family:var(--latin);font-size:12px;font-weight:700;letter-spacing:.06em;opacity:.8}
.x-lang:lang(ar){font-family:var(--plex);font-size:15px;letter-spacing:0}
.x-signin{display:inline-flex;align-items:center;min-block-size:44px;padding:0 12px;font-size:13.5px;font-weight:600;text-decoration:none}
.x-cta{display:inline-flex;align-items:center;min-block-size:40px;padding:0 18px;border-radius:999px;border:1px solid currentColor;font-size:13.5px;font-weight:700;text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
@media (hover:hover){.x-cta:hover{background:var(--gold);border-color:var(--gold);color:var(--night)}}

/* ═══════════ I. Hero: the engine ═══════════ */
.x-hero{position:relative;min-block-size:100svh;overflow:hidden;isolation:isolate;display:grid;grid-template-rows:1fr auto;
  background:radial-gradient(42% 60% at 28% 50%,rgba(168,183,204,.13),transparent 70%),radial-gradient(26% 36% at 28% 50%,rgba(201,174,126,.12),transparent 72%),linear-gradient(to bottom,#0B0E12,var(--night))}
html[dir="ltr"] .x-hero{background:radial-gradient(42% 60% at 72% 50%,rgba(168,183,204,.13),transparent 70%),radial-gradient(26% 36% at 72% 50%,rgba(201,174,126,.12),transparent 72%),linear-gradient(to bottom,#0B0E12,var(--night))}
.x-ghost{position:absolute;inset-block-start:66%;inset-inline-end:-5vw;z-index:0;transform:translateY(-54%);pointer-events:none;user-select:none;-webkit-user-select:none;
  font-family:var(--disp);font-weight:800;font-size:clamp(10rem,21vw,24rem);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(201,174,126,.13);white-space:nowrap}
html[lang="en"] .x-ghost{letter-spacing:-.06em;font-size:clamp(9rem,27vw,30rem)}
.x-engine{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:1;display:block}
.x-hero-in{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);align-content:center;padding:clamp(88px,12vh,130px) var(--gut) clamp(16px,3vh,32px)}
.x-hero .x-kicker{grid-column:1/8;margin-block-end:clamp(14px,3vh,34px)}
.x-title{grid-column:1/8;display:grid;font-weight:400;margin:0}
.x-l{display:block;overflow:hidden;padding-block:.06em .16em;margin-block:-.12em}
.x-l > span{display:block}
.x-l3 > span{inline-size:fit-content;max-inline-size:100%}
.x-l1{font-family:var(--disp);font-weight:800;font-size:min(clamp(5.4rem,1rem + 11.4vw,15rem),21vh);line-height:1;color:var(--bone)}
.x-l2{font-family:var(--disp);font-weight:800;font-size:min(clamp(4.2rem,.8rem + 8.8vw,11.6rem),16.5vh);line-height:1;color:var(--bone);padding-inline-start:.5em}
.x-l3{font-family:var(--naskh);font-weight:600;font-size:min(clamp(1.9rem,.9rem + 2.8vw,3.8rem),6.6vh);line-height:1.5;color:var(--gold);margin-block-start:.15em}
.x-l1 > span,.x-l2 > span{text-shadow:0 20px 60px rgba(0,0,0,.45)}
html[lang="en"] .x-l1,html[lang="en"] .x-l2{letter-spacing:-.05em;line-height:.92}
html[lang="en"] .x-l1{font-size:clamp(3.8rem,.6rem + 9vw,11rem)}
html[lang="en"] .x-l2{font-size:clamp(3.2rem,.6rem + 7.6vw,9.4rem);padding-inline-start:.3em}
html[lang="en"] .x-l3{font-family:var(--latin);font-weight:500;font-style:italic;letter-spacing:-.02em}
.x-hero-copy{grid-column:1/6;font-size:15.5px;line-height:2;color:rgba(236,231,222,.74);max-inline-size:30rem;margin-block-start:clamp(18px,3vh,30px)}
html[lang="en"] .x-hero-copy{line-height:1.7}
.x-hero-act{grid-column:1/8;display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-block-start:clamp(22px,3.6vh,38px)}
.x-hero-foot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 var(--gut) clamp(22px,4vh,36px)}
.x-stats{display:flex;gap:clamp(20px,3.6vw,56px)}
.x-stats div{display:grid;gap:2px;padding-block-start:12px;border-block-start:1px solid var(--hair-2);min-inline-size:7.5rem}
.x-stats dd{font-family:var(--latin);font-weight:600;font-size:clamp(1.6rem,1rem + 1.4vw,2.6rem);line-height:1.1;color:var(--bone);letter-spacing:-.02em}
.x-stats div:nth-child(2) dd{color:var(--gold-2)}
.x-stats dt{font-size:12.5px;color:var(--ash);line-height:1.6}
.x-engine-cap{display:flex;align-items:center;gap:10px;font-size:12.5px;line-height:1.7;color:var(--ash);max-inline-size:22rem}
.x-engine-cap i{inline-size:7px;block-size:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 2px rgba(201,174,126,.6);flex:none}

/* entry: the thesis is set line by line from under a mask; the engine assembles from scattered points (welcome.js) */
.x-js .x-l > span{transform:translateY(110%) rotate(2deg);transition:transform 1.2s var(--out)}
.x-js .x-hero-copy,.x-js .x-hero-act,.x-js .x-hero .x-kicker,.x-js .x-hero-foot{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--out)}
.x-js .x-ghost{opacity:0;transform:translateY(-50%) scale(1.06);transition:opacity 2.4s var(--ease),transform 2.4s var(--out)}
.x-js.x-in .x-ghost{opacity:1;transform:translateY(-54%)}
.x-js.x-in .x-l > span{transform:none}
.x-js.x-in .x-l1 > span{transition-delay:.15s}
.x-js.x-in .x-l2 > span{transition-delay:.3s}
.x-js.x-in .x-l3 > span{transition-delay:.5s}
.x-js.x-in .x-hero .x-kicker{opacity:1;transform:none;transition-delay:.05s}
.x-js.x-in .x-hero-copy{opacity:1;transform:none;transition-delay:.8s}
.x-js.x-in .x-hero-act{opacity:1;transform:none;transition-delay:.95s}
.x-js.x-in .x-hero-foot{opacity:1;transform:none;transition-delay:1.25s}
.x-noengine .x-engine{display:none}

/* ═══════════ II. The case (pinned) ═══════════ */
.x-case{position:relative;background:radial-gradient(50% 50% at 70% 50%,rgba(201,174,126,.06),transparent 70%)}
.x-pin{position:relative;padding:clamp(92px,12vh,120px) var(--gut) clamp(40px,6vh,64px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,72px)}
.x-bignum{display:none}
.x-case-head{position:relative;z-index:1;display:grid;align-content:start;gap:clamp(16px,3vh,36px)}
.x-phases{display:grid;gap:26px}
.x-phases li{display:grid;gap:6px}
.x-phases b{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,1rem + 5.4vw,7rem);line-height:1.05;color:var(--bone)}
html[lang="en"] .x-phases b{letter-spacing:-.04em}
.x-phases span{font-size:15px;line-height:1.95;color:var(--ash);max-inline-size:24rem}
.x-desk{position:relative;z-index:1;display:grid;gap:18px;align-content:start;min-inline-size:0}
.x-frags{display:none}
.x-threads{position:absolute;inset:0;inline-size:100%;block-size:100%;overflow:visible;pointer-events:none;z-index:3}
.x-threads path{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--out) .1s;opacity:.9;filter:drop-shadow(0 0 4px rgba(201,174,126,.5))}
.x-threads path.on{stroke-dashoffset:0}
.x-threads circle{fill:var(--gold);opacity:0;transition:opacity .4s var(--ease) .8s}
.x-threads circle.on{opacity:1}
.x-q{position:relative;padding:18px 22px;border-radius:22px 22px 22px 6px;background:var(--night-3);border:1px solid var(--hair);max-inline-size:36rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
html[dir="rtl"] .x-q{border-radius:22px 22px 6px 22px}
.x-q-who{display:block;font-size:11.5px;color:var(--ash);margin-block-end:4px}
.x-q-text{font-size:clamp(16px,1.1vw + 10px,19px);line-height:1.9;color:var(--bone)}
.x-q mark{background:none;color:inherit;border-radius:4px;box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .5s var(--ease),color .5s var(--ease)}
.x-desk.ph-1 .x-q mark,.x-desk.ph-2 .x-q mark,.x-desk.ph-3 .x-q mark,.x-desk.ph-4 .x-q mark{box-shadow:inset 0 -2px 0 var(--gold);color:var(--gold-2)}
.x-facts{display:flex;flex-wrap:wrap;gap:10px}
.x-facts li{display:inline-flex;align-items:baseline;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid rgba(201,174,126,.45);background:rgba(201,174,126,.08);font-size:14px}
.x-facts span{color:var(--ash)}
.x-facts b{font-weight:700;color:var(--bone)}
.x-laws{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.x-law{padding:16px 18px 18px;border-radius:4px;background:var(--bone);color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);display:grid;gap:6px}
.x-law:nth-child(1){transform:rotate(-1.2deg)}
.x-law:nth-child(2){transform:rotate(.8deg)}
.x-law-ref{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-soft)}
.x-law-ref b{font-family:var(--naskh);font-weight:600;font-size:15px;color:var(--gold-3)}
.x-law-text{font-family:var(--naskh);font-weight:500;font-size:15.5px;line-height:2}
.x-law-text [data-t]{transition:background-color .5s var(--ease),box-shadow .5s var(--ease);border-radius:2px}
.x-desk.ph-2 .x-law-text [data-t],.x-desk.ph-3 .x-law-text [data-t],.x-desk.ph-4 .x-law-text [data-t]{background:rgba(201,174,126,.22);box-shadow:inset 0 -1.5px 0 var(--gold-3)}
.x-calc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.x-calc div{display:flex;flex-direction:column-reverse;gap:2px;padding:12px 14px;border-radius:14px;border:1px solid var(--hair);background:var(--night-2);min-inline-size:0}
.x-calc dt{font-size:12px;color:var(--ash);line-height:1.5}
.x-calc dd{font-family:var(--plex);font-weight:700;font-size:clamp(17px,.8vw + 12px,22px);font-variant-numeric:tabular-nums;color:var(--bone);text-align:start}
.x-calc [data-c="two"]{border-color:var(--gold);background:rgba(201,174,126,.1);box-shadow:0 0 40px -10px rgba(201,174,126,.35)}
.x-calc [data-c="two"] dd{color:var(--gold-2)}
.x-answer{display:grid;gap:10px;padding:clamp(20px,2.4vw,32px);border-radius:6px;background:var(--bone);color:var(--ink);box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(201,174,126,.5),0 0 80px -20px rgba(201,174,126,.3)}
.x-answer-tag{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--gold-3)}
.x-sample{font-weight:600;color:var(--ink-soft);padding:2px 10px;border-radius:999px;background:rgba(29,35,44,.07)}
.x-answer-fig{display:flex;align-items:baseline;gap:10px;font-size:18px;font-weight:600;color:var(--ink-soft)}
.x-answer-fig b{font-family:var(--plex);font-weight:700;font-size:clamp(3rem,1.6rem + 3vw,5.2rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.x-answer-text{font-size:15.5px;line-height:1.9}
.x-answer-note{font-size:13.5px;line-height:1.85;color:var(--ink-soft);padding-block-start:10px;border-block-start:1px solid var(--hair-ink)}
.x-answer-note b{color:var(--gold-3)}
.x-case-foot{position:relative;z-index:1;grid-column:1/-1;font-size:12px;color:var(--ash-2)}

/* the choreographed case: a pinned desk that assembles as you scroll, over a giant numeral of the stage */
.x-js .x-case{block-size:520vh}
.x-js .x-pin{position:sticky;inset-block-start:0;block-size:100svh;overflow:hidden;align-content:stretch;grid-template-rows:minmax(0,1fr) auto}
.x-js .x-bignum{display:block;position:absolute;inset-block-end:-5vh;inset-inline:var(--gut);block-size:1em;z-index:0;pointer-events:none;font-family:var(--latin);font-weight:700;font-size:clamp(14rem,30vw,34rem);line-height:.8;letter-spacing:-.06em}
.x-js .x-bignum span{position:absolute;inset-block-end:0;inset-inline-start:0;color:transparent;-webkit-text-stroke:1px rgba(201,174,126,.2);opacity:0;transform:translateY(12%);transition:opacity .8s var(--ease),transform 1.1s var(--out)}
.x-js .x-bignum span.is-on{opacity:1;transform:none}
.x-js .x-bignum span.is-past{opacity:0;transform:translateY(-12%)}
.x-js .x-phases{position:relative;display:block;block-size:clamp(220px,34vh,300px)}
.x-js .x-phases li{position:absolute;inset-inline:0;inset-block-start:0;opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .9s var(--out);pointer-events:none}
.x-js .x-phases li.is-on{opacity:1;transform:none;pointer-events:auto}
.x-js .x-phases li.is-past{opacity:0;transform:translateY(-40px)}
.x-js .x-phases b{display:block;overflow:hidden}
.x-js .x-case-head::after{content:"";display:block;inline-size:100%;max-inline-size:22rem;block-size:1px;background:linear-gradient(to left,var(--gold) calc(var(--p,0)*100%),var(--hair) calc(var(--p,0)*100%))}
html[dir="ltr"].x-js .x-case-head::after{background:linear-gradient(to right,var(--gold) calc(var(--p,0)*100%),var(--hair) calc(var(--p,0)*100%))}
.x-ticks{display:none}
.x-js .x-ticks{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--ash)}
.x-ticks li{display:inline-flex;align-items:baseline;gap:7px;transition:color .5s var(--ease)}
.x-ticks i{font-style:normal;font-family:var(--latin);font-weight:600;font-size:10px;letter-spacing:.08em;opacity:.7}
.x-ticks li.is-past{color:var(--bone-2)}
.x-ticks li.is-on{color:var(--gold)}
.x-js .x-desk{block-size:100%;align-content:center}
.x-js .x-desk [data-g]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform 1s var(--out),filter .7s var(--ease)}
.x-js .x-desk [data-g].on{opacity:1;transform:none}
.x-js .x-desk .x-law{opacity:0;transform:translateX(-60px) rotate(-6deg);transition:opacity .7s var(--ease),transform 1.1s var(--out)}
html[dir="ltr"].x-js .x-desk .x-law{transform:translateX(60px) rotate(6deg)}
.x-js .x-desk .x-laws.on .x-law:nth-child(1){opacity:1;transform:rotate(-1.2deg)}
.x-js .x-desk .x-laws.on .x-law:nth-child(2){opacity:1;transform:rotate(.8deg);transition-delay:.15s}
.x-js .x-desk .x-facts li{transform:translate(var(--fx,0px),var(--fy,0px));transition:transform .9s var(--out),opacity .5s var(--ease)}
.x-js .x-desk .x-facts li.x-flying{transition:none}
.x-js .x-desk .x-calc div{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .7s var(--out)}
.x-js .x-desk .x-calc.on div{opacity:1;transform:none}
.x-js .x-desk .x-calc.on div:nth-child(2){transition-delay:.12s}
.x-js .x-desk .x-calc.on div:nth-child(3){transition-delay:.24s}
.x-js .x-desk .x-calc.on div:nth-child(4){transition-delay:.4s}
.x-js .x-desk .x-answer{position:absolute;inset-inline:6%;inset-block-start:50%;z-index:4;opacity:0;transform:translateY(-40%) scale(.94);transition:opacity .7s var(--ease),transform 1s var(--out)}
.x-js .x-desk .x-answer.on{opacity:1;transform:translateY(-50%)}
.x-js .x-desk.ph-4 [data-g]:not([data-g="4"]){opacity:.14;filter:blur(1.5px)}
.x-js .x-desk.ph-4 .x-threads{opacity:.15}
.x-js .x-threads{transition:opacity .6s var(--ease)}
.x-js .x-frags{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.x-js .x-frags li{position:absolute;inset-inline-start:50%;inset-block-start:10%;white-space:nowrap;font-size:clamp(14px,.7vw + 9px,18px);color:var(--bone);padding:6px 14px;border-radius:999px;border:1px solid var(--hair);background:rgba(30,36,46,.7);
  transform:translate(calc(-50% + var(--dx) * (1 - var(--conv,0))),calc(var(--dy) * (1 - var(--conv,0)))) scale(calc(1 - .35 * var(--conv,0)));opacity:calc(1 - var(--conv,0));will-change:transform}
html[dir="rtl"].x-js .x-frags li{transform:translate(calc(50% + var(--dx) * (1 - var(--conv,0))),calc(var(--dy) * (1 - var(--conv,0)))) scale(calc(1 - .35 * var(--conv,0)))}
.x-frags li:nth-child(1){--dx:-34vw;--dy:6vh}
.x-frags li:nth-child(2){--dx:-8vw;--dy:26vh}
.x-frags li:nth-child(3){--dx:14vw;--dy:48vh}
.x-frags li:nth-child(4){--dx:-26vw;--dy:58vh}
.x-frags li:nth-child(5){--dx:10vw;--dy:14vh}
.x-frags li:nth-child(6){--dx:-18vw;--dy:40vh}

/* ═══════════ III. Rules, read as you scroll over a giant «لا» ═══════════ */
.x-rules{position:relative;isolation:isolate;overflow:hidden;padding:clamp(110px,18vh,200px) var(--gut) clamp(110px,16vh,180px);display:grid;gap:clamp(28px,5vh,56px)}
.x-ghost-la{position:absolute;inset-block-start:50%;inset-inline-end:0;z-index:-1;pointer-events:none;font-family:var(--naskh);font-weight:600;font-size:clamp(18rem,46vw,50rem);line-height:1;color:rgba(201,174,126,.035);-webkit-text-stroke:1.2px rgba(201,174,126,.3);transform:translateY(-50%)}
html[lang="en"] .x-ghost-la{letter-spacing:-.08em}
.x-js .x-ghost-la{transform:translateY(calc(-50% + (.5 - var(--sp,.5)) * 24vh)) rotate(calc((var(--sp,.5) - .5) * -6deg))}
.x-rule-list{display:grid;gap:clamp(18px,4vh,44px)}
.x-rule-list li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:clamp(12px,2vw,28px);font-family:var(--disp);font-weight:800;font-size:clamp(2rem,.8rem + 4.6vw,6rem);line-height:1.22;text-wrap:balance;max-inline-size:20ch}
.x-rule-list li i{font-style:normal;font-family:var(--latin);font-weight:600;font-size:clamp(12px,.4vw + 10px,15px);letter-spacing:.14em;color:var(--gold);transform:translateY(-1.2em)}
html[lang="en"] .x-rule-list li{letter-spacing:-.04em;line-height:1.02;max-inline-size:17ch}
.x-rule-list li:nth-child(even){margin-inline-start:auto}
.x-js .x-rule-list li span{background:linear-gradient(to left,var(--bone) calc(var(--r,0) * 100%),rgba(236,231,222,.13) calc(var(--r,0) * 100%));-webkit-background-clip:text;background-clip:text;color:transparent}
html[dir="ltr"].x-js .x-rule-list li span{background-image:linear-gradient(to right,var(--bone) calc(var(--r,0) * 100%),rgba(236,231,222,.13) calc(var(--r,0) * 100%))}

/* ═══════════ IV. Sources: a bone sheet rises over the night; a shelf measured in articles ═══════════ */
.x-sources{position:relative;padding-block:clamp(24px,4vh,40px) 0}
.x-sheet{position:relative;margin-inline:clamp(8px,1.4vw,20px);padding:clamp(84px,12vh,140px) var(--gut) clamp(80px,12vh,140px);background:var(--bone) url("/ethixd/img/noise-240.svg");color:var(--ink);border-radius:clamp(20px,3vw,44px);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,90px);align-items:start;box-shadow:0 -40px 120px -40px rgba(0,0,0,.6)}
.x-js .x-sheet{transform:translateY(calc((1 - var(--rise,1)) * 12vh)) scale(calc(.94 + .06 * var(--rise,1)));transform-origin:50% 0;border-radius:calc(44px * (1.2 - var(--rise,1)))}
.x-sources .x-kicker{color:var(--ink-soft)}
.x-src-head{display:grid;gap:22px;align-content:start;position:relative;z-index:1}
.x-src-head .x-h2{font-size:clamp(3rem,1.2rem + 7vw,9rem);line-height:1.05}
.x-src-head .x-naskh{color:var(--gold-3);display:block}
.x-sources .x-small{color:var(--ink-soft)}
.x-total{display:grid;justify-items:start;gap:0;margin-block-start:clamp(10px,4vh,50px)}
.x-total b{font-family:var(--latin);font-weight:700;font-size:clamp(4.6rem,2rem + 8vw,11rem);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--gold-3)}
.x-total span{font-size:13px;color:var(--ink-soft)}
.x-index{position:relative;z-index:1;display:grid;border-block-start:1px solid var(--hair-ink)}
.x-index li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name count" "ref ref";align-items:baseline;gap:2px 20px;padding-block:14px 16px;border-block-end:1px solid var(--hair-ink)}
.x-law-name{grid-area:name;font-family:var(--naskh);font-weight:600;font-size:clamp(1.25rem,.8rem + 1.3vw,2.1rem);line-height:1.45;color:var(--ink)}
.x-index li:nth-child(even) .x-law-name{font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,.7rem + 1.2vw,1.9rem)}
html[lang="en"] .x-law-name,html[lang="en"] .x-index li:nth-child(even) .x-law-name{font-family:var(--latin);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.1rem,.7rem + 1vw,1.7rem);line-height:1.3}
html[lang="en"] .x-index li:nth-child(even) .x-law-name{font-weight:500;font-style:italic}
.x-law-ref2{grid-area:ref;font-size:12px;color:var(--ink-soft);direction:rtl;unicode-bidi:isolate;justify-self:start}
.x-law-count{grid-area:count;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.x-law-count b{font-family:var(--latin);font-weight:600;font-size:clamp(1.1rem,.8rem + .6vw,1.5rem);color:var(--ink);letter-spacing:-.02em}
.x-bar{position:absolute;inset-block-end:-1px;inset-inline-start:0;inline-size:100%;block-size:3px;background:linear-gradient(to left,var(--gold-3),var(--gold));transform-origin:right;transform:scaleX(calc(var(--w,0) * var(--grow,1)));transition:transform 1.2s var(--out)}
html[dir="ltr"] .x-bar{transform-origin:left;background:linear-gradient(to right,var(--gold-3),var(--gold))}
.x-marquee{position:relative;overflow:hidden;padding-block:clamp(22px,4vh,40px);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.x-marquee-track{display:flex;gap:clamp(28px,4vw,64px);inline-size:max-content;padding-inline:var(--gut)}
.x-js .x-marquee-track{animation:x-marq 90s linear infinite}
html[dir="rtl"].x-js .x-marquee-track{animation-name:x-marq-rtl}
@keyframes x-marq{to{transform:translateX(-50%)}}
@keyframes x-marq-rtl{to{transform:translateX(50%)}}
@media (hover:hover){.x-marquee:hover .x-marquee-track{animation-play-state:paused}}
.x-ex{display:grid;gap:6px;inline-size:clamp(260px,30vw,420px);flex:none}
.x-ex blockquote{font-family:var(--naskh);font-weight:500;font-size:clamp(15px,.5vw + 12px,18px);line-height:2;color:var(--bone)}
.x-ex figcaption{font-size:11.5px;color:var(--gold)}

/* ═══════════ V. The Agent, working in front of you ═══════════ */
.x-agent{position:relative;overflow:hidden;padding:clamp(110px,16vh,180px) var(--gut) clamp(90px,14vh,160px);display:grid;gap:clamp(34px,6vh,64px);
  background:radial-gradient(60% 50% at 50% 60%,rgba(168,183,204,.09),transparent 70%)}
.x-ag-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:18px clamp(24px,4vw,64px)}
.x-ag-head .x-kicker{grid-column:1/-1}
.x-ag-title{display:grid;font-weight:400;line-height:1}
.x-ag-a{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,.9rem + 2.6vw,3.8rem);color:transparent;-webkit-text-stroke:1px rgba(236,231,222,.45);line-height:1.2}
.x-ag-b{font-family:var(--disp);font-weight:800;font-size:clamp(3.6rem,1rem + 9vw,11rem);line-height:1.1;color:var(--bone);margin-block-start:.02em}
.x-ag-b em{font-size:.62em}
html[lang="en"] .x-ag-a,html[lang="en"] .x-ag-b{letter-spacing:-.045em}
.x-ag-p{font-size:15.5px;line-height:1.95;color:rgba(236,231,222,.72);max-inline-size:26rem;padding-block-end:1.2em}
html[lang="en"] .x-ag-p{line-height:1.7}

.x-console{position:relative;border-radius:24px;background:linear-gradient(180deg,rgba(30,36,46,.94),rgba(15,18,24,.98));border:1px solid rgba(236,231,222,.12);
  box-shadow:0 80px 160px -60px rgba(0,0,0,.9),0 0 0 1px rgba(201,174,126,.07) inset,0 0 160px -40px rgba(201,174,126,.18);overflow:hidden}
.x-console::before{content:"";position:absolute;inset-inline:10%;inset-block-start:0;block-size:1px;background:linear-gradient(to right,transparent,rgba(226,204,162,.7),transparent)}
.x-con-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;border-block-end:1px solid var(--hair);background:rgba(14,17,22,.5)}
.x-con-dots{display:flex;gap:6px}
.x-con-dots i{inline-size:10px;block-size:10px;border-radius:50%;background:rgba(236,231,222,.14)}
.x-con-name{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--bone-2)}
.x-con-tabs{display:flex;gap:4px;margin-inline-start:auto;padding:4px;border-radius:999px;background:rgba(236,231,222,.05);border:1px solid var(--hair)}
.x-tab{position:relative;overflow:hidden;min-block-size:38px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ash);transition:color .3s var(--ease),background-color .3s var(--ease)}
.x-tab[aria-selected="true"]{background:var(--bone);color:var(--ink)}
.x-tab i{position:absolute;inset-inline:14px;inset-block-end:5px;block-size:2px;border-radius:2px;background:var(--gold-3);transform-origin:right;transform:scaleX(0)}
html[dir="ltr"] .x-tab i{transform-origin:left}
.x-js .x-tab[aria-selected="true"] i{transform:scaleX(var(--tp,0))}
@media (hover:hover){.x-tab[aria-selected="false"]:hover{color:var(--bone)}}

.x-sc{display:grid;grid-template-columns:minmax(250px,.36fr) minmax(0,1fr);min-block-size:clamp(460px,62vh,600px)}
.x-sc + .x-sc{border-block-start:1px solid var(--hair)}
.x-con-log{display:grid;align-content:start;gap:18px;padding:clamp(18px,2vw,26px);border-inline-end:1px solid var(--hair);background:rgba(14,17,22,.35)}
.x-task{display:grid;gap:4px;padding:14px 16px;border-radius:16px 16px 4px 16px;background:var(--night-3);border:1px solid var(--hair);font-size:14.5px;line-height:1.8}
html[dir="rtl"] .x-task{border-radius:16px 16px 16px 4px}
.x-task-who{font-size:11px;color:var(--gold)}
.x-trace{display:grid;gap:0;counter-reset:tr}
.x-trace li{position:relative;display:flex;align-items:center;gap:12px;padding-block:11px;border-block-end:1px solid var(--hair);font-size:14px;color:var(--bone-2);transition:color .4s var(--ease),opacity .4s var(--ease)}
.x-trace li::before{content:"";box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:50%;flex:none;background:var(--gold);box-shadow:0 0 0 4px rgba(201,174,126,.12)}
.x-trace li::after{content:"";position:absolute;inset-inline-start:4.5px;inset-block-start:calc(50% - 3.5px);inline-size:7px;block-size:3.5px;border-left:1.7px solid var(--night);border-bottom:1.7px solid var(--night);transform:rotate(-45deg)}
.x-trace i{margin-inline-start:auto;font-style:normal;font-size:11.5px;color:var(--steel);font-family:var(--plex);text-align:end;max-inline-size:55%}
.x-js .x-trace li[data-at]:not(.is-on){color:var(--ash-2)}
.x-js .x-trace li[data-at]:not(.is-on)::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ash-2)}
.x-js .x-trace li[data-at]:not(.is-on)::after{display:none}
.x-js .x-trace li.is-now{color:var(--bone)}
.x-js .x-trace li.is-now::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(201,174,126,.25);border:1.5px solid transparent;border-block-start-color:var(--gold);animation:x-spin .8s linear infinite}
.x-js .x-trace li.is-now::after{display:none}
@keyframes x-spin{to{transform:rotate(360deg)}}

.x-con-stage{position:relative;overflow:hidden;padding:clamp(20px,2.6vw,36px);min-inline-size:0;
  background:radial-gradient(circle at center,rgba(236,231,222,.07) 1px,transparent 1.5px) 0 0/22px 22px,radial-gradient(70% 70% at 50% 50%,rgba(201,174,126,.06),transparent 70%)}
.x-js .x-con-stage [data-at]{transition:opacity .6s var(--ease),transform .8s var(--out),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.x-js .x-con-stage [data-at]:not(.is-on){opacity:0;transform:translateY(10px)}
.x-scan{display:none}
.x-js .x-sc.is-playing .x-scan{display:block;position:absolute;inset-inline:0;block-size:70px;inset-block-start:-70px;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(201,174,126,.16) 70%,rgba(226,204,162,.8) 98%,transparent);animation:x-scan 2.6s var(--inout) 2}
@keyframes x-scan{to{transform:translateY(calc(100% + 520px))}}
.x-asks{display:flex;flex-wrap:wrap;gap:10px}
.x-asks li{padding:10px 18px;border-radius:999px;border:1px solid var(--hair-2);font-size:14px;color:var(--bone);background:rgba(23,28,36,.8)}
.x-asks li::before{content:"↗";margin-inline-end:8px;color:var(--gold);font-family:var(--latin)}
html[dir="rtl"] .x-asks li::before{content:"↖"}
.x-note{font-size:13px;color:var(--ash)}
.x-con-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;border-block-start:1px solid var(--hair);font-size:12px;color:var(--ash)}
.x-con-prog{display:none}
.x-js .x-con-prog{display:block;inline-size:min(180px,30%);block-size:2px;border-radius:2px;background:var(--hair);overflow:hidden}
.x-con-prog i{display:block;block-size:100%;background:var(--gold);transform-origin:right;transform:scaleX(var(--cp,0));transition:transform .3s linear}
html[dir="ltr"] .x-con-prog i{transform-origin:left}

/* the made document: bone paper that lands over the work, layered */
.x-made{position:relative;z-index:2;display:grid;gap:10px;padding:clamp(18px,2vw,26px);border-radius:10px;background:var(--bone) url("/ethixd/img/noise-240.svg");color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(201,174,126,.45)}
.x-made-k{font-size:11px;font-weight:700;color:var(--gold-3);letter-spacing:.02em}
.x-made-t{font-family:var(--disp);font-weight:800;font-size:clamp(1.2rem,.8rem + 1vw,1.7rem);line-height:1.3;padding-block-end:8px;border-block-end:1px solid var(--hair-ink)}
.x-made-list,.x-rep-secs{display:grid;gap:8px}
.x-made-list li{display:grid;gap:2px;padding-inline-start:12px;border-inline-start:3px solid rgba(29,35,44,.12);font-size:13px;line-height:1.7}
.x-made-list li b{font-size:14px}
.x-made-list li span{color:var(--ink-soft)}
.x-made-list .sev-high{border-color:var(--danger)}.x-made-list .sev-mid{border-color:#C28A2E}.x-made-list .sev-low{border-color:#6C7F99}
.x-rep-secs li{display:grid;gap:1px;font-size:13px;line-height:1.7;padding-block-end:6px;border-block-end:1px dashed var(--hair-ink)}
.x-rep-secs li b{font-size:13.5px;color:var(--gold-3)}
.x-rep-secs li span{color:var(--ink)}

/* scenario 1: contract */
.x-st-contract{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:0}
.x-paper-stack{position:relative}
.x-paper{position:relative;overflow:hidden;display:grid;gap:10px;padding:clamp(20px,2.4vw,32px);border-radius:6px;background:var(--bone) url("/ethixd/img/noise-240.svg");color:var(--ink);transform:rotate(-1.5deg);box-shadow:0 40px 90px -40px rgba(0,0,0,.85),14px 12px 0 -2px #D9D2C5,26px 24px 0 -4px #C8C0B2,38px 36px 0 -6px rgba(184,175,160,.8)}
.x-paper-title{font-family:var(--naskh);font-weight:600;font-size:18px;padding-block-end:8px;border-block-end:1px solid var(--hair-ink)}
.x-pl{display:block;block-size:8px;border-radius:4px;background:rgba(29,35,44,.09)}
.x-pl-s{inline-size:62%}
.x-paper-page{position:absolute;inset-block-end:10px;inset-inline-start:14px;font-size:11px;color:var(--ink-soft)}
.x-st-contract .x-made{margin-inline-start:-14%;transform:rotate(1.4deg)}
.x-js .x-st-contract .x-made:not(.is-on){transform:translate(-24px,20px) rotate(4deg)}
html[dir="rtl"].x-js .x-st-contract .x-made:not(.is-on){transform:translate(24px,20px) rotate(-4deg)}
.x-clause{display:flex;align-items:center;gap:12px;font-size:13.5px;min-block-size:34px;border-radius:6px;padding-inline:4px}
.x-clause i{inline-size:4px;align-self:stretch;border-radius:2px;background:rgba(29,35,44,.1);flex:none}
.x-clause span{flex:1}
.x-clause em{font-style:normal;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.sev-high i{background:var(--danger)}.sev-high em{color:var(--danger);background:rgba(176,74,62,.12)}
.sev-mid i{background:#C28A2E}.sev-mid em{color:var(--warn);background:rgba(194,138,46,.14)}
.sev-low i{background:#6C7F99}.sev-low em{color:#4F617A;background:rgba(79,97,122,.12)}
.x-paper .x-clause.sev-high{background:rgba(176,74,62,.07)}
.x-paper .x-clause.sev-mid{background:rgba(194,138,46,.08)}
.x-paper .x-clause.sev-low{background:rgba(79,97,122,.07)}
.x-js .x-paper .x-clause[data-at]:not(.is-on){opacity:.35;transform:none;background:transparent}
.x-js .x-paper .x-clause[data-at]:not(.is-on) em{opacity:0}
.x-js .x-paper .x-clause[data-at]:not(.is-on) i{background:rgba(29,35,44,.1)}

/* scenario 2: a website, then its privacy page in the same design */
.x-st-site{display:grid;align-items:center;justify-items:center}
.x-browser{position:relative;inline-size:min(100%,640px);border-radius:12px;overflow:hidden;background:#0B0D11;border:1px solid var(--hair-2);box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.x-url{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:12px;color:var(--ash);border-block-end:1px solid var(--hair)}
.x-url i{inline-size:8px;block-size:8px;border-radius:50%;border:1.5px solid var(--ash-2)}
.x-url span{flex:1;padding:4px 12px;border-radius:999px;background:rgba(236,231,222,.06);font-family:var(--latin);font-size:11.5px;text-align:center}
.x-url em{font-style:normal;font-size:10.5px;color:var(--gold)}
.x-site{--brand:#2E5E4A;--brand-2:#F4E6DC;display:grid;background:#FBF7F2;color:#253029;font-family:var(--naskh)}
.x-site-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--brand);color:#F7F1EA;font-size:12px}
.x-site-head b{font-size:16px;font-weight:600}
.x-site-home,.x-site-legal{display:grid;gap:10px;padding:18px;min-block-size:250px;align-content:start}
.x-site-hero{padding:22px 16px;border-radius:8px;background:var(--brand-2);font-size:19px;font-weight:600;color:var(--brand)}
.x-site-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.x-site-tiles i{block-size:42px;border-radius:6px;background:#EADFD5}
.x-site-form{display:flex;gap:6px;flex-wrap:wrap}
.x-site-form span{flex:1;min-inline-size:60px;padding:6px 8px;border-radius:5px;border:1px solid #D9CEC3;font-family:var(--plex);font-size:11px;color:#8A7F76;background:#fff}
.x-site-pay{justify-self:start;padding:6px 16px;border-radius:999px;background:var(--brand);color:#fff;font-family:var(--plex);font-size:11.5px}
.x-site-badge{justify-self:start;padding:3px 10px;border-radius:999px;border:1px solid currentColor;font-family:var(--plex);font-size:10.5px;color:#8A5A2B}
.x-site-h{font-size:21px;font-weight:600;color:var(--brand);padding-block-end:6px;border-block-end:2px solid var(--brand-2)}
.x-site-sec{display:grid;gap:1px;font-size:12.5px;line-height:1.8}
.x-site-sec b{font-size:13.5px;color:var(--brand)}
.x-site-foot{padding:10px 18px;background:#EFE6DC;font-family:var(--plex);font-size:10.5px;color:#7A6F66}
.x-found{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(14,17,22,.92);border:1px solid var(--gold);color:var(--gold-2);font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.x-found::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(201,174,126,.7)}
.x-js .x-found{position:absolute;z-index:4}
.x-js .x-found-form{inset-block-start:66%;inset-inline-end:4%}
.x-js .x-found-ana{inset-block-start:14%;inset-inline-start:4%}
.x-js .x-found-pay{inset-block-start:80%;inset-inline-start:30%}
.x-js .x-found-clone{inset-block-start:13%;inset-inline-end:4%}
.x-js .x-site:has(.x-site-legal.is-on) .x-site-home{display:none}
.x-js .x-browser:has(.x-site-legal.is-on) .x-found:not(.x-found-clone){opacity:0;transform:scale(.9)}
.x-js .x-site-legal:not(.is-on){display:none}
.x-js .x-browser:not(:has(.x-site-legal.is-on)) .x-found-clone{opacity:0}
html:not(.x-js) .x-found{margin:8px 0 0 8px}

/* scenario 3: the case report */
.x-st-report{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(14px,2vw,26px)}
.x-rep-left{display:grid;gap:10px}
.x-rep-facts{display:flex;flex-wrap:wrap;gap:8px}
.x-rep-facts span{padding:6px 12px;border-radius:999px;border:1px solid rgba(201,174,126,.45);background:rgba(201,174,126,.08);font-size:13px;font-weight:600}
.x-rep-art{display:grid;gap:6px;padding:12px 14px;border-radius:8px;background:rgba(236,231,222,.06);border:1px solid var(--hair)}
.x-rep-art b{font-family:var(--naskh);font-weight:600;font-size:14px;color:var(--gold-2)}
.x-rep-art .x-pl{background:rgba(236,231,222,.1)}
.x-rep-art em{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11px;font-weight:700;color:#7FD1A8}
.x-rep-art em::before{content:"";inline-size:10px;block-size:5px;border-inline-start:1.6px solid currentColor;border-block-end:1.6px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.x-rep-calc{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 8px;padding:12px;border-radius:8px;border:1px solid var(--gold);background:rgba(201,174,126,.08);font-family:var(--latin);font-weight:600;font-size:14px}
.x-rep-calc i{font-style:normal;color:var(--ash)}
.x-rep-calc b{font-size:20px;color:var(--gold-2)}
.x-st-report .x-made{transform:rotate(-1deg)}
.x-js .x-st-report .x-made:not(.is-on){transform:translateY(24px) rotate(-3deg)}


/* ═══════════ Ethix's own figure (the product's Buddy, js/buddy.js), drawn as static SVG ═══════════
   It blinks and floats; in the Agent console it walks to what the Agent works on, and its arms and eyes say what it does. */
.x-bot{display:block;inline-size:100%;block-size:auto;overflow:visible}
.x-bot *{transform-box:view-box}
.x-bot-float,.x-bot-halo,.x-bot-eyes,.x-bot-eye,.x-bot-armL,.x-bot-armR,.x-bot-head{transition:transform .7s var(--out)}
.x-bot-eye{transform-origin:0 0}
.x-bot-armL,.x-bot-armR{transform-origin:0 0}
.x-bot-eyes{transform:translate(var(--ex,0px),var(--ey,0px))}
.x-js .x-bot-float{animation:x-bob 3.2s var(--inout) infinite}
.x-js .x-bot-eye > ellipse:first-child{transform-box:fill-box;transform-origin:center;animation:x-blink 4.6s linear infinite}
.x-js .x-bot-halo ellipse{transform-box:fill-box;transform-origin:center;animation:x-halo 5s var(--inout) infinite}
@keyframes x-bob{50%{transform:translateY(-12px)}}
@keyframes x-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes x-halo{50%{transform:translateY(-6px) scaleX(.94)}}

/* the file line: the figure carries the file along the line as the chapter is read */
.x-flow-bot{position:absolute;inset-block-start:-78px;inset-inline-start:calc(var(--r,1) * (100% - 58px));inline-size:58px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(201,174,126,.25));transition:inset-inline-start .15s linear}
html[dir="ltr"] .x-flow-bot .x-bot{transform:scaleX(-1)}

/* ── the operator in the Agent console ── */
.x-op{position:absolute;inset-block-end:6px;inset-inline-end:14px;z-index:6;inline-size:34px;pointer-events:none}
.x-js .x-op{inset:auto;left:0;top:0;inline-size:clamp(58px,5.4vw,80px);transform:translate(var(--ox,40px),var(--oy,90px));transition:transform 1s var(--out),opacity .5s var(--ease);filter:drop-shadow(0 18px 26px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(201,174,126,.28))}
.x-op .x-bot{transition:transform .5s var(--out)}
.x-op.is-flip .x-bot{transform:scaleX(-1)}
.x-op.is-read{--ey:10px}
.x-op.is-think{--ey:-8px;--ex:8px}
.x-op.is-think .x-bot-armR{transform:rotate(-150deg)}
.x-op.is-point .x-bot-armR,.x-op.is-pin .x-bot-armR{transform:rotate(-112deg)}
.x-op.is-read .x-bot-armR{transform:rotate(-60deg)}
.x-op.is-write .x-bot-armR{transform:rotate(-78deg)}
.x-js .x-op.is-write .x-bot-armR{animation:x-write .32s var(--inout) infinite alternate}
@keyframes x-write{from{transform:rotate(-70deg)}to{transform:rotate(-88deg)}}
.x-js .x-op.is-scan .x-bot-eyes{animation:x-look 1.6s var(--inout) infinite alternate}
@keyframes x-look{from{transform:translate(-9px,4px)}to{transform:translate(9px,4px)}}
.x-js .x-op.is-scan .x-bot-halo ellipse{animation:x-scanhalo 1.1s linear infinite}
@keyframes x-scanhalo{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.2)}}
.x-op.is-happy .x-bot-armL{transform:rotate(38deg)}
.x-op.is-happy .x-bot-armR{transform:rotate(-38deg)}
.x-op.is-happy{--ey:-2px}
.x-beam,.x-frame{display:none}
.x-js .x-beam{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:5;pointer-events:none;overflow:visible}
.x-beam path{fill:none;stroke:var(--gold-2);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;filter:drop-shadow(0 0 5px rgba(226,204,162,.8))}
.x-beam.on path{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--out) .75s}
.x-js .x-beam circle{fill:var(--gold-2);opacity:0;filter:drop-shadow(0 0 6px rgba(226,204,162,.9))}
.x-beam.on circle{opacity:1;transition:opacity .3s var(--ease) 1.3s}
.x-js .x-frame{display:block;position:absolute;left:0;top:0;z-index:5;pointer-events:none;inline-size:var(--tw,0px);block-size:var(--th,0px);transform:translate(var(--tx,0px),var(--ty,0px));opacity:0;
  transition:transform .9s var(--out),inline-size .9s var(--out),block-size .9s var(--out),opacity .4s var(--ease);border-radius:8px;box-shadow:0 0 0 1px rgba(226,204,162,.35),0 0 40px -6px rgba(201,174,126,.35);background:rgba(201,174,126,.05)}
.x-frame.on{opacity:1}
.x-frame i{position:absolute;inline-size:12px;block-size:12px;border:2px solid var(--gold-2)}
.x-frame i:nth-child(1){top:-5px;left:-5px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.x-frame i:nth-child(2){top:-5px;right:-5px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.x-frame i:nth-child(3){bottom:-5px;left:-5px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.x-frame i:nth-child(4){bottom:-5px;right:-5px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.x-frame-tag{position:absolute;inset-block-end:calc(100% + 10px);inset-inline-start:-4px;display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:999px;background:rgba(14,17,22,.92);border:1px solid rgba(226,204,162,.6);color:var(--gold-2);font-size:11.5px;font-weight:600;white-space:nowrap}
.x-frame-tag:empty{display:none}
.x-frame-tag::before{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(201,174,126,.7);animation:x-live 1.4s var(--ease) infinite}
.x-js .x-frame.is-top .x-frame-tag{inset-block-end:auto;inset-block-start:calc(100% + 10px)}

/* typing: text arrives in keystrokes, from the reading edge */
@keyframes x-type{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes x-type-ltr{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.x-js .x-sc.is-playing .x-task .x-type{display:inline-block;animation:x-type 1.2s steps(26) .15s both}
.x-js .x-sc.is-playing .x-url .x-type{animation:x-type-ltr .9s steps(15) .5s both}
.x-js .x-con-stage .is-on .x-type,.x-js .x-con-stage .x-type.is-on{display:inline-block;animation:x-type 1.1s steps(24) .35s both}
html[dir="ltr"].x-js .x-sc.is-playing .x-task .x-type,html[dir="ltr"].x-js .x-con-stage .is-on .x-type{animation-name:x-type-ltr}

/* skeleton lines shimmer while the Agent is still reading */
.x-js .x-sc.is-playing:not(.is-done) .x-pl{background:linear-gradient(90deg,rgba(29,35,44,.08) 0 38%,rgba(201,174,126,.45) 50%,rgba(29,35,44,.08) 62% 100%) 0 0/300% 100%;animation:x-shim 1.6s linear infinite}
.x-js .x-sc.is-playing:not(.is-done) .x-rep-art .x-pl{background-image:linear-gradient(90deg,rgba(236,231,222,.08) 0 38%,rgba(226,204,162,.4) 50%,rgba(236,231,222,.08) 62% 100%)}
@keyframes x-shim{from{background-position:100% 0}to{background-position:-50% 0}}
.x-rep-art.is-on em{animation:x-pop .5s var(--out) .5s both}
@keyframes x-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* the contract: a clause lights as it is read; a verbatim quote is pinned; the risk map unfolds */
.x-js .x-paper .x-clause.is-on{animation:x-glow 1.2s var(--ease)}
@keyframes x-glow{0%{box-shadow:0 0 0 0 rgba(201,174,126,0)}30%{box-shadow:0 0 0 3px rgba(201,174,126,.55)}100%{box-shadow:0 0 0 0 rgba(201,174,126,0)}}
.x-qpin{position:absolute;z-index:3;inset-block-start:12%;inset-inline-start:calc(50% - 70px);display:grid;gap:1px;padding:8px 14px 9px;border-radius:8px;background:var(--ink);color:var(--bone);font-size:11.5px;line-height:1.5;box-shadow:0 20px 40px -14px rgba(0,0,0,.8),0 0 0 1px rgba(201,174,126,.5);transform:rotate(-3deg)}
.x-qpin::before{content:"";position:absolute;inset-block-start:-6px;inset-inline-start:calc(50% - 6px);inline-size:12px;block-size:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--gold-2),var(--gold-3));box-shadow:0 3px 6px rgba(0,0,0,.5)}
.x-qpin b{color:var(--gold-2);font-size:12px}
.x-js .x-qpin:not(.is-on){transform:translateY(-20px) rotate(-12deg)}
.x-js .x-made{transform-origin:50% 0}
.x-js .x-st-contract .x-made:not(.is-on),html[dir="rtl"].x-js .x-st-contract .x-made:not(.is-on){transform:perspective(900px) rotateX(-62deg) translateY(10px);opacity:0}
.x-js .x-st-report .x-made:not(.is-on){transform:perspective(900px) rotateX(-62deg) translateY(10px);opacity:0}
.x-js .x-made{transition:transform 1.1s var(--out),opacity .6s var(--ease)}

/* the website: sections are outlined as the Agent reads them, its design is lifted into tokens, the page is rewritten */
.x-zone{transition:outline-color .4s var(--ease),box-shadow .4s var(--ease);outline:1.5px dashed transparent;outline-offset:3px}
.x-js .x-sc[data-b="2"] .x-zone[data-z="3"],.x-js .x-sc[data-b="3"] .x-zone[data-z="3"],
.x-js .x-sc[data-b="4"] .x-zone,.x-js .x-sc[data-b="5"] .x-zone{outline-color:rgba(201,174,126,.9)}
.x-js .x-sc[data-b="4"] .x-zone{box-shadow:inset 0 0 0 999px rgba(201,174,126,.06)}
.x-tokens{position:absolute;z-index:4;inset-block-end:16px;inset-inline-end:14px;display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(14,17,22,.94);border:1px solid rgba(226,204,162,.45);box-shadow:0 24px 50px -18px rgba(0,0,0,.85);min-inline-size:150px}
.x-tokens-k{font-size:11px;font-weight:700;color:var(--gold-2)}
.x-swatches{display:flex;gap:6px}
.x-swatches i{inline-size:22px;block-size:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.x-sw-1{background:#2E5E4A}.x-sw-2{background:#F4E6DC}.x-sw-3{background:#FBF7F2}.x-sw-4{background:#253029}
.x-js .x-tokens.is-on .x-swatches i{animation:x-pop .45s var(--out) both}
.x-js .x-tokens.is-on .x-swatches i:nth-child(2){animation-delay:.12s}
.x-js .x-tokens.is-on .x-swatches i:nth-child(3){animation-delay:.24s}
.x-js .x-tokens.is-on .x-swatches i:nth-child(4){animation-delay:.36s}
.x-tokens-row{display:flex;flex-wrap:wrap;gap:4px}
.x-tokens-row span{font-size:10.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--hair-2);color:var(--bone-2)}
.x-js .x-site-legal.is-on{animation:x-rise .8s var(--out)}
@keyframes x-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.x-js .x-site-sec:not(.is-on) b{opacity:.25}

/* ═══════════ VI. Outputs: a gallery that travels sideways ═══════════ */
.x-outputs{position:relative}
.x-hpin{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(24px,5vh,48px);padding-block:clamp(100px,14vh,150px) clamp(40px,8vh,90px);overflow:hidden}
.x-out-head{display:grid;gap:18px;padding-inline:var(--gut);max-inline-size:72rem}
.x-out-head .x-h2 span{display:block}
.x-outputs .x-out-head .x-h2{font-size:clamp(2.2rem,1rem + 4vw,5.4rem)}
.x-out-head .x-h2 .x-naskh{font-size:.5em;line-height:1.5;margin-block-start:.2em}
.x-hview{min-inline-size:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--gut);padding-block:10px 20px}
.x-hview::-webkit-scrollbar{display:none}
.x-htrack{display:flex;gap:clamp(16px,2vw,28px);inline-size:max-content}
.x-panel{position:relative;flex:none;inline-size:min(80vw,1040px);min-block-size:min(52svh,500px);scroll-snap-align:center;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,48px);align-items:stretch;
  padding:clamp(20px,2.6vw,40px);border-radius:28px;background:linear-gradient(160deg,var(--night-3),var(--night-1));border:1px solid var(--hair);box-shadow:0 60px 120px -60px rgba(0,0,0,.9);
  transform:scale(calc(1 - .06 * var(--d,0)));filter:brightness(calc(1 - .4 * var(--d,0)));transition:filter .2s linear}
.x-panel-text{display:grid;align-content:space-between;gap:18px}
.x-panel-text p{font-size:15.5px;line-height:1.95;color:rgba(236,231,222,.72);max-inline-size:28rem}
html[lang="en"] .x-panel-text p{line-height:1.7}
.x-card-n{font-family:var(--latin);font-weight:700;font-size:clamp(4rem,7vw,8rem);line-height:.9;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--gold)}
.x-card-art{position:relative;overflow:hidden;display:grid;align-content:center;gap:14px;padding:clamp(22px,3vw,44px);border-radius:16px;background:var(--bone) url("/ethixd/img/noise-240.svg");color:var(--ink);box-shadow:inset 0 0 0 1px rgba(29,35,44,.06);min-inline-size:0}
.x-art-q{justify-self:end;max-inline-size:85%;padding:12px 16px;border-radius:16px 16px 4px 16px;background:var(--ink);color:var(--bone);font-size:15px}
html[dir="rtl"] .x-art-q{justify-self:start;border-radius:16px 16px 16px 4px}
.x-art-big{display:flex;align-items:baseline;gap:10px;font-size:18px;font-weight:600;color:var(--ink-soft)}
.x-art-big b{font-family:var(--plex);font-weight:700;font-size:clamp(3rem,2rem + 3vw,5.6rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.x-art-lead{padding:14px 16px;border-radius:10px;border:1px solid rgba(154,126,81,.4);background:rgba(201,174,126,.14);font-size:15px}
.x-art-lead b{color:var(--gold-3)}
.x-art-cite{display:flex;gap:8px;flex-wrap:wrap}
.x-art-cite span{font-family:var(--naskh);font-size:13.5px;padding:4px 12px;border-radius:999px;border:1px solid var(--hair-ink)}
.x-art-bar{display:grid;gap:8px}
.x-art-bar i,.x-line{display:block;block-size:9px;border-radius:5px;background:rgba(29,35,44,.09)}
.x-art-bar i:nth-child(2){inline-size:84%}.x-art-bar i:nth-child(3){inline-size:62%}
.x-short{inline-size:58%}
.x-art-row{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-block-end:1px solid var(--hair-ink);font-size:14.5px}
.x-art-row b{font-family:var(--disp);font-weight:600;font-size:clamp(17px,.6vw + 13px,22px)}
.x-art-row span{color:var(--ink-soft);text-align:end}
.x-art-ask{border:0;padding:14px 16px;border-radius:10px;background:var(--ink);color:var(--bone)}
.x-art-ask span{color:var(--gold-2)}
.x-art-title{font-family:var(--naskh);font-weight:600;font-size:19px;padding-block-end:8px;border-block-end:1px solid var(--hair-ink)}
.x-art-page{position:absolute;inset-block-end:12px;inset-inline-start:16px;font-size:11px;color:var(--ink-soft)}
.x-art-versions{display:flex;gap:6px;flex-wrap:wrap}
.x-art-versions span{font-size:12px;padding:4px 12px;border-radius:999px;border:1px solid var(--hair-ink);color:var(--ink-soft)}
.x-art-versions .on{border-color:var(--gold-3);color:var(--ink);background:rgba(201,174,126,.18)}
.x-art-body{font-size:15px;line-height:2}
.x-art-body del{color:var(--danger);background:rgba(176,74,62,.1);text-decoration-thickness:1.5px}
.x-art-body ins{color:#2F6B45;background:rgba(78,138,94,.14);text-decoration:none}
.x-art-export{display:flex;gap:8px}
.x-art-export span{font-family:var(--latin);font-size:11px;font-weight:700;padding:5px 12px;border-radius:6px;background:var(--ink);color:var(--bone)}
.x-art-site{background:#FBF7F2;padding:0;gap:12px;align-content:start}
.x-art-site > *:not(.x-mini-head):not(.x-mini-foot){margin-inline:22px}
.x-mini-head{display:flex;align-items:center;gap:8px;padding:14px 22px;background:#2E5E4A;color:#F7F1EA;font-family:var(--naskh)}
.x-mini-head b{font-size:17px;font-weight:600;margin-inline-end:auto}
.x-mini-head i{inline-size:34px;block-size:6px;border-radius:3px;background:rgba(247,241,234,.35)}
.x-mini-h{font-family:var(--naskh);font-weight:600;font-size:24px;color:#2E5E4A}
.x-art-site .x-site-badge{margin-block-start:18px}
.x-mini-foot{margin-block-start:auto;padding:12px 22px;background:#EFE6DC;font-size:11px;color:#7A6F66}
.x-hbar{display:none}

/* choreographed on large screens: the vertical scroll carries the gallery sideways */
@media (min-width:821px) and (min-height:521px){
  .x-js .x-outputs{block-size:var(--hh,420vh)}
  .x-js .x-hpin{position:sticky;inset-block-start:0;block-size:100svh;padding-block:clamp(96px,13vh,130px) clamp(20px,4vh,44px);gap:clamp(18px,3.5vh,36px)}
  .x-js .x-hview{overflow:visible;scroll-snap-type:none}
  .x-js .x-htrack{transform:translateX(var(--hx,0px));will-change:transform}
  .x-js .x-hbar{display:block;margin-inline:var(--gut);block-size:2px;background:var(--hair);max-inline-size:360px}
  .x-js .x-hbar i{display:block;block-size:100%;background:var(--gold);transform-origin:right;transform:scaleX(var(--hp,0))}
  html[dir="ltr"].x-js .x-hbar i{transform-origin:left}
}

/* ═══════════ VII. A file ═══════════ */
.x-files{position:relative;padding:clamp(90px,14vh,160px) var(--gut) clamp(100px,16vh,180px);display:grid;gap:clamp(30px,6vh,64px)}
.x-flow-wrap{position:relative}
.x-flow-line{position:relative;block-size:1px;background:var(--hair-2);margin-block-end:40px}
.x-flow-line i{position:absolute;inset:0;background:var(--gold);transform-origin:right;transform:scaleX(var(--r,1))}
html[dir="ltr"] .x-flow-line i{transform-origin:left}
.x-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.x-flow li{display:grid;gap:8px;align-content:start;position:relative}
.x-flow-n{font-family:var(--latin);font-weight:700;font-size:clamp(3.4rem,5vw,6rem);line-height:.9;color:transparent;-webkit-text-stroke:1px rgba(201,174,126,.6)}
.x-flow b{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,1rem + 2vw,3rem);line-height:1.2}
.x-flow span:not(.x-flow-n){font-size:14.5px;line-height:1.95;color:var(--ash)}
.x-js .x-flow li{opacity:calc(.2 + .8 * var(--r,0));transform:translateY(calc((1 - var(--r,0)) * 24px))}

/* ═══════════ VIII. Depths ═══════════ */
.x-depths{position:relative;overflow:hidden;padding:clamp(90px,14vh,160px) var(--gut);background:var(--bone) url("/ethixd/img/noise-240.svg");color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vh,52px) clamp(24px,4vw,64px);align-items:center}
.x-depths .x-kicker{color:var(--ink-soft)}
.x-dep-head{display:grid;gap:22px}
.x-dep-head .x-naskh{color:var(--gold-3);display:block}
.x-planes{position:relative;display:grid;place-items:center;block-size:clamp(260px,34vw,420px);perspective:1200px}
.x-plane{grid-area:1/1;position:relative;inline-size:clamp(200px,24vw,340px);aspect-ratio:1.5;border-radius:14px;
  transform:rotateX(60deg) rotateZ(-38deg) translateZ(var(--z,0px));display:grid;place-items:end start;padding:14px 18px;transition:transform 1s var(--out)}
.x-plane b{font-family:var(--latin);font-weight:700;font-size:15px;letter-spacing:.02em}
.x-plane-1{--z:110px;background:rgba(29,35,44,.05);border:1px solid rgba(29,35,44,.22);color:var(--ink-soft)}
.x-plane-2{--z:30px;background:var(--ink);color:var(--bone);box-shadow:0 40px 60px -20px rgba(29,35,44,.45)}
.x-plane-3{--z:-50px;background:linear-gradient(135deg,var(--gold-2),var(--gold-3));color:var(--ink);box-shadow:0 60px 80px -30px rgba(154,126,81,.5)}
.x-plane-3 span{position:absolute;inset-inline:18px;block-size:1px;background:rgba(29,35,44,.35)}
.x-plane-3 span:nth-of-type(1){inset-block-start:26%}.x-plane-3 span:nth-of-type(2){inset-block-start:44%}.x-plane-3 span:nth-of-type(3){inset-block-start:62%}
.x-js .x-plane-1{animation:x-float 7s var(--inout) infinite}
.x-js .x-plane-2{animation:x-float 7s var(--inout) -2.3s infinite}
.x-js .x-plane-3{animation:x-float 7s var(--inout) -4.6s infinite}
@keyframes x-float{50%{transform:rotateX(60deg) rotateZ(-38deg) translateZ(calc(var(--z,0px) + 16px))}}
.x-gauge{grid-column:1/-1;display:grid;border-block-start:1px solid var(--hair-ink)}
.x-gauge li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:baseline;gap:8px 32px;padding-block:clamp(18px,3vh,30px);border-block-end:1px solid var(--hair-ink);position:relative}
.x-g-name{font-family:var(--latin);font-weight:600;font-size:clamp(2rem,1rem + 3.4vw,4.6rem);letter-spacing:-.03em;line-height:1;color:rgba(29,35,44,.35);transition:color .4s var(--ease)}
.x-gauge li.on .x-g-name{color:var(--ink)}
@media (hover:hover){.x-gauge li:hover .x-g-name{color:var(--ink)}}
.x-g-role{font-size:15px;line-height:1.9;color:var(--ink-soft)}
.x-g-role em{font-style:normal;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--bone);margin-inline-start:6px;white-space:nowrap}

/* ═══════════ IX. Begin ═══════════ */
.x-start{position:relative;overflow:hidden;isolation:isolate;padding:clamp(120px,18vh,200px) var(--gut) clamp(90px,14vh,150px);display:grid;justify-items:center;text-align:center;gap:clamp(20px,4vh,40px);
  background:radial-gradient(46% 50% at 50% 46%,rgba(201,174,126,.14),transparent 72%)}
.x-start .x-kicker{justify-content:center}
.x-orbits{position:absolute;inset-inline-start:50%;inset-block-start:46%;z-index:-1;inline-size:min(120vw,1200px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
html[dir="rtl"] .x-orbits{transform:translate(50%,-50%)}
.x-orbits i{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(201,174,126,.18)}
.x-orbits i:nth-child(2){inset:14%;border-style:solid;border-color:rgba(168,183,204,.12)}
.x-orbits i:nth-child(3){inset:28%;border-color:rgba(201,174,126,.22)}
.x-orbits b{display:none}
.x-orbits i:nth-child(1)::after,.x-orbits i:nth-child(3)::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:-5px;inline-size:9px;block-size:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px 4px rgba(201,174,126,.6)}
.x-orbits i:nth-child(3)::after{inset-block-start:auto;inset-block-end:-4px;inline-size:6px;block-size:6px;background:var(--steel);box-shadow:0 0 12px 3px rgba(168,183,204,.5)}
.x-js .x-orbits i:nth-child(1){animation:x-spin 90s linear infinite}
.x-js .x-orbits i:nth-child(3){animation:x-spin 60s linear infinite reverse}
.x-giant{font-family:var(--disp);font-weight:800;font-size:clamp(3.6rem,1rem + 10vw,12rem);line-height:1.05;color:var(--bone);text-wrap:balance}
.x-giant-b{font-family:var(--naskh);font-weight:600;color:var(--gold);font-size:.8em}
html[lang="en"] .x-giant{letter-spacing:-.05em}
html[lang="en"] .x-giant-b{font-family:var(--latin);font-style:italic;font-weight:500}
.x-js .x-giant span{display:inline-block;transform:translateY(calc((1 - var(--r,1)) * 30%));opacity:calc(.25 + .75 * var(--r,1))}
.x-ask{position:relative;z-index:1;inline-size:100%;max-inline-size:820px;border-radius:28px;background:rgba(23,28,36,.92);text-align:start;box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 90px -30px rgba(201,174,126,.4);transition:box-shadow .3s var(--ease)}
.x-ask::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),rgba(201,174,126,.25),var(--gold-2) 12%,rgba(201,174,126,.25) 30%,rgba(168,183,204,.3) 60%,rgba(201,174,126,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.x-js .x-ask::before{animation:x-ang 6s linear infinite}
@keyframes x-ang{to{--ang:360deg}}
.x-ask:focus-within{box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 6px rgba(201,174,126,.14),0 0 110px -20px rgba(201,174,126,.55)}
.x-ask-label{display:block;padding:20px 26px 0;font-size:13px;font-weight:600;color:var(--gold)}
.x-ask textarea{display:block;inline-size:100%;min-block-size:120px;resize:none;border:0;outline:none;background:none;color:var(--bone);padding:8px 26px 10px;font:inherit;font-size:clamp(17px,.5vw + 14px,20px);line-height:1.85}
.x-ask textarea::placeholder{color:var(--ash-2)}
.x-ask-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 14px 14px 26px}
html[dir="rtl"] .x-ask-foot{padding:10px 26px 14px 14px}
.x-ask-foot .x-small{font-size:12.5px;line-height:1.8;max-inline-size:26rem}

/* ── footer and the leave curtain ── */
.x-foot{border-block-start:1px solid var(--hair);background:var(--night);padding:36px var(--gut) calc(28px + env(safe-area-inset-bottom))}
.x-foot-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 40px}
.x-foot .x-small{font-size:12.5px}
.x-foot-nav{display:flex;flex-wrap:wrap;gap:0 4px}
.x-foot-nav a{display:inline-flex;align-items:center;min-block-size:44px;padding:0 10px;font-size:13px;color:var(--ash);text-decoration:none}
@media (hover:hover){.x-foot-nav a:hover{color:var(--bone)}}
.x-copy{grid-column:1/-1;font-size:12px;color:var(--ash);padding-block-start:14px;border-block-start:1px solid var(--hair)}
.x-leave{position:fixed;inset:0;z-index:300;background:var(--night);pointer-events:none;clip-path:circle(0 at var(--lx,50%) var(--ly,50%));transition:clip-path .6s var(--inout)}
.x-leave.on{clip-path:circle(150% at var(--lx,50%) var(--ly,50%));pointer-events:auto}

/* ═══════════ Tablets ═══════════ */
@media (max-width:1100px){
  .x-links{display:none}
  .x-sc{grid-template-columns:minmax(0,1fr)}
  .x-con-log{border-inline-end:0;border-block-end:1px solid var(--hair)}
  .x-trace{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));column-gap:18px}
  .x-ag-head{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════ Phones: their own compositions ═══════════ */
@media (max-width:820px){
  .x-nav{gap:10px}
  .x-signin{display:none}
  .x-arch i:nth-child(2),.x-arch i:nth-child(3){display:none}

  .x-hero{grid-template-rows:auto;background:radial-gradient(80% 44% at 50% 26%,rgba(168,183,204,.14),transparent 72%),radial-gradient(50% 26% at 50% 26%,rgba(201,174,126,.12),transparent 72%),linear-gradient(to bottom,#0B0E12,var(--night))}
  html[dir="ltr"] .x-hero{background:radial-gradient(80% 44% at 50% 26%,rgba(168,183,204,.14),transparent 72%),radial-gradient(50% 26% at 50% 26%,rgba(201,174,126,.12),transparent 72%),linear-gradient(to bottom,#0B0E12,var(--night))}
  .x-ghost{inset-block-start:24%;inset-inline-end:-10vw;font-size:62vw}
  .x-hero-in{grid-template-columns:minmax(0,1fr);padding-block:calc(40svh + 58px) 22px;align-content:end}
  .x-hero .x-kicker,.x-title,.x-hero-copy,.x-hero-act{grid-column:1/-1}
  .x-l1{font-size:clamp(4.6rem,27vw,9rem)}
  .x-l2{font-size:clamp(3.6rem,20vw,7.4rem);padding-inline-start:.3em}
  .x-l3{font-size:clamp(1.6rem,7.4vw,2.6rem)}
  .x-hero-copy{font-size:14.5px;margin-block-start:14px}
  .x-hero-act .x-btn,.x-hero-act .x-ghostbtn{flex:1 1 auto;justify-content:center}
  .x-hero-foot{flex-direction:column;align-items:stretch;gap:16px}
  .x-stats{gap:14px}
  .x-stats div{min-inline-size:0;flex:1}
  .x-stats dd{font-size:1.5rem}
  .x-stats dt{font-size:11.5px}
  .x-engine-cap{max-inline-size:none}

  .x-pin{grid-template-columns:minmax(0,1fr);padding-block:84px 24px;gap:14px}
  .x-js .x-pin{grid-template-rows:auto minmax(0,1fr) auto}
  .x-js .x-case{block-size:480vh}
  .x-js .x-bignum{font-size:52vw;inset-block-end:-3vh}
  .x-js .x-phases{block-size:clamp(116px,17vh,146px)}
  .x-phases b{font-size:clamp(2.6rem,12vw,4rem)}
  .x-phases span{font-size:14px;line-height:1.85}
  .x-js .x-desk{position:relative}
  .x-js .x-desk [data-g]{position:absolute;inset-inline:0;inset-block-start:50%;transform:translateY(-44%)}
  .x-js .x-desk [data-g].on{transform:translateY(-50%)}
  .x-js .x-desk [data-g].on.is-past{opacity:0;transform:translateY(-60%);pointer-events:none}
  .x-js .x-desk .x-answer{inset-inline:0}
  .x-js .x-desk.ph-1 .x-q{inset-block-start:4%;transform:none}
  .x-js .x-desk.ph-1 .x-facts{inset-block-start:auto;inset-block-end:6%;transform:none}
  .x-js .x-pin:has(.ph-4) .x-case-foot{opacity:0}
  .x-ticks{gap:4px 14px;font-size:12px}
  .x-js .x-desk.ph-4 [data-g]:not([data-g="4"]){opacity:0}
  .x-threads{display:none}
  .x-laws{grid-template-columns:minmax(0,1fr);gap:10px}
  .x-law-text{font-size:14.5px;line-height:1.9}
  .x-calc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-js .x-frags li{font-size:14px;inset-block-start:4%}
  .x-frags li:nth-child(1){--dx:-18vw;--dy:4vh}
  .x-frags li:nth-child(2){--dx:10vw;--dy:14vh}
  .x-frags li:nth-child(3){--dx:-14vw;--dy:25vh}
  .x-frags li:nth-child(4){--dx:16vw;--dy:36vh}
  .x-frags li:nth-child(5){--dx:-6vw;--dy:46vh}
  .x-frags li:nth-child(6){--dx:8vw;--dy:56vh}

  .x-ghost-la{display:none}
  .x-rule-list li{max-inline-size:none;grid-template-columns:minmax(0,1fr);gap:4px}
  .x-rule-list li i{transform:none}
  .x-rule-list li:nth-child(even){margin-inline-start:0}

  .x-sheet{grid-template-columns:minmax(0,1fr)}
  .x-total b{font-size:26vw}

  .x-ag-b{font-size:clamp(3.2rem,18vw,5.6rem);margin-block-start:.12em}
  .x-ag-a{font-size:clamp(1.6rem,8vw,2.4rem)}
  .x-con-bar{flex-wrap:wrap;gap:10px}
  .x-con-dots{display:none}
  .x-con-tabs{inline-size:100%;margin-inline-start:0}
  .x-tab{flex:1;padding:0 8px;font-size:12.5px}
  .x-trace{grid-template-columns:minmax(0,1fr)}
  .x-sc{min-block-size:0}
  .x-con-stage{padding:18px 14px 22px}
  .x-st-contract,.x-st-report{grid-template-columns:minmax(0,1fr);gap:14px}
  .x-st-contract .x-made{margin-inline-start:0;margin-block-start:-24px;transform:rotate(1deg)}
  .x-js .x-found{font-size:10.5px;padding:4px 9px}
  .x-js .x-found-form{inset-block-start:60%;inset-inline-end:2%}
  .x-js .x-found-ana{inset-block-start:17%;inset-inline-start:2%}
  .x-js .x-found-pay{inset-block-start:79%;inset-inline-start:6%}
  .x-js .x-found-clone{inset-block-start:17%;inset-inline-end:2%;white-space:normal;max-inline-size:70%}
  .x-con-foot{flex-direction:column;align-items:flex-start;gap:8px}
  .x-js .x-op{inline-size:40px}
  .x-con-log{gap:12px;padding:14px}
  .x-trace li{padding-block:7px;font-size:13px}
  .x-task{font-size:13.5px;padding:10px 12px}
  .x-tokens{inset-block-end:8px;inset-inline-end:8px;padding:9px 10px;min-inline-size:0}
  .x-swatches i{inline-size:16px;block-size:16px}
  .x-tokens-row{display:none}
  .x-qpin{inset-inline-start:auto;inset-inline-end:6%;inset-block-start:auto;inset-block-end:40%}
  .x-frame-tag{font-size:10.5px}
  .x-flow-bot{display:none}

  .x-panel{inline-size:86vw;grid-template-columns:minmax(0,1fr);min-block-size:0;padding:16px;border-radius:22px;transform:none;filter:none}
  .x-panel-text{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:14px;align-content:start}
  .x-card-n{font-size:3.2rem}
  .x-panel-text p{grid-column:1/-1;font-size:14.5px}
  .x-card-art{padding:18px;gap:10px}
  .x-art-site{padding:0}
  .x-art-site > *:not(.x-mini-head):not(.x-mini-foot){margin-inline:16px}

  .x-flow-line{display:none}
  .x-flow{grid-template-columns:minmax(0,1fr);gap:28px}
  .x-flow li{grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline}
  .x-flow li span:not(.x-flow-n){grid-column:2}
  .x-flow-n{grid-row:1/3;font-size:3.4rem}

  .x-depths{grid-template-columns:minmax(0,1fr)}
  .x-planes{block-size:250px;order:2}
  .x-gauge{order:3}
  .x-gauge li{grid-template-columns:minmax(0,1fr)}

  .x-giant{font-size:clamp(3rem,16vw,5.4rem)}
  .x-ask-foot,html[dir="rtl"] .x-ask-foot{flex-direction:column;align-items:stretch;padding:4px 14px 14px}
  .x-ask-foot .x-btn{justify-content:center}
  .x-ask-label{padding:18px 18px 0}
  .x-ask textarea{padding:8px 18px 10px}
  .x-foot-in{grid-template-columns:minmax(0,1fr)}
  .x-foot-nav{margin-inline:-10px}
}
@media (max-width:380px){
  .x-cta{padding:0 12px}
  .x-mark{font-size:21px}
  .x-calc dd{font-size:16px}
  .x-q{padding:14px 16px}
  .x-stats dd{font-size:1.25rem}
  .x-tab{font-size:11.5px;padding:0 4px}
}
@media (max-height:520px) and (orientation:landscape){
  .x-hero-in{padding-block:90px 20px}
  .x-js .x-case{block-size:auto}
  .x-js .x-pin{position:relative;block-size:auto;overflow:visible}
  .x-js .x-bignum{display:none}
  .x-js .x-phases{block-size:auto}
  .x-js .x-phases li{position:static;opacity:1;transform:none}
  .x-js .x-ticks{display:none}
  .x-js .x-desk [data-g],.x-js .x-desk .x-law,.x-js .x-desk .x-calc div{position:static;opacity:1;transform:none;filter:none}
  .x-js .x-desk .x-answer{position:static;transform:none;opacity:1}
  .x-js .x-frags{display:none}
  .x-threads{display:none}
}