/* Rigor — 3D world chapters on the home page: canvas layers, HUD (rail, meter), chapter copy,
   detail card, assistant. Uses the site's rem scale and brand tokens. */

.page-home{background:var(--carbon)}
.page-home main{position:relative;z-index:2}
.page-home .hero{position:relative;z-index:3}
.poster{position:fixed;inset:0;z-index:0;background:var(--carbon) center/cover no-repeat;opacity:0;transition:opacity .6s}
html.no-webgl .poster{opacity:1}
#world{position:fixed;inset:0;z-index:0;width:100vw;height:100vh;height:100lvh;display:block;opacity:0;transition:opacity 1.2s ease;touch-action:pan-y}
html.ready #world{opacity:1}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(28,29,33,.85) 0%,rgba(28,29,33,.5) 34%,rgba(28,29,33,0) 60%);opacity:0;transition:opacity .5s}
html[dir=rtl] .scrim{background:linear-gradient(270deg,rgba(28,29,33,.85) 0%,rgba(28,29,33,.5) 34%,rgba(28,29,33,0) 60%)}
html.in-world .scrim{opacity:1}

/* chapters */
.ch{position:relative;min-height:135vh;display:flex;align-items:center;padding-inline:var(--gutter) 15rem;color:var(--porcelain)}
.ch .copy{position:relative;width:min(44rem,100%);display:grid;gap:1.4rem;margin-inline-start:max(0px,calc((100vw - var(--wrap)) / 2))}
.ch .eyebrow{display:flex;align-items:center;gap:.8rem;color:var(--signal);margin:0}
.ch .eyebrow::before{content:"";flex:none;width:7px;height:7px;border:1.5px solid var(--signal);transform:rotate(45deg)}
.ch .eyebrow i{flex:0 0 4rem;height:1px;background:linear-gradient(90deg,rgba(215,38,61,.8),rgba(215,38,61,.1))}
html[dir=rtl] .ch .eyebrow i{background:linear-gradient(270deg,rgba(215,38,61,.8),rgba(215,38,61,.1))}
.ch .eyebrow .spec{color:var(--steel);letter-spacing:.14em;font-family:var(--font-en);font-size:.72rem;text-transform:uppercase}
.ch h2{font-size:clamp(2.4rem,5.6vw,5.4rem);line-height:.98;letter-spacing:-.035em;font-weight:300;color:#DCDBD6;margin:0}
html[lang=ar] .ch h2{line-height:1.25;letter-spacing:0;font-weight:400}
.ch h2 .hl{font-style:normal;font-weight:800;color:#fff;position:relative;display:inline-block}
.ch h2 .hl::after{content:"";position:absolute;inset-inline:0;bottom:.02em;height:max(3px,.06em);background:var(--signal);box-shadow:0 0 14px rgba(215,38,61,.8);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.3,.7,.2,1) .45s}
html[dir=rtl] .ch h2 .hl::after{transform-origin:right}
.ch.in h2 .hl::after{transform:scaleX(1)}
.ch .sheet{position:absolute;z-index:-1;top:-9rem;inset-inline-start:-1rem;font:100 17rem/1 var(--font-en);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(215,38,61,.45);pointer-events:none;user-select:none}
.ch .copy>p:not(.eyebrow){color:#B9BBC1;max-width:32em;font-size:1.1rem;line-height:1.65;margin:0;font-weight:300}
html[lang=ar] .ch .copy>p:not(.eyebrow){font-weight:400;font-size:1.15rem;line-height:1.8}
.sysbtns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.sysbtns button{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:.9rem;font-weight:600;padding:.6rem 1rem;border:1px solid rgba(215,38,61,.55);border-radius:999px;color:var(--porcelain);background:rgba(28,29,33,.45);backdrop-filter:blur(4px);cursor:pointer;min-height:44px}
.sysbtns button:hover,.sysbtns button:focus-visible{background:rgba(215,38,61,.18)}
.sysbtns button svg{width:1.15rem;height:1.15rem;color:var(--signal)}
/* words rise in */
.ch [data-split] .w>span{opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.ch.in [data-split] .w>span{opacity:1;transform:none;filter:none}
.ch .copy>:not(h2){opacity:0;transform:translateY(14px);transition:opacity .8s ease .25s,transform .8s ease .25s}
.ch.in .copy>:not(h2){opacity:1;transform:none}
html.no-webgl .ch .copy>*,html.no-motion .ch .copy>*,html.no-motion .ch [data-split] .w>span{opacity:1!important;transform:none!important;filter:none!important}

/* HUD */
.rail{position:fixed;z-index:5;inset-inline-end:2.4rem;top:50%;transform:translateY(-50%);display:grid;gap:.4rem;opacity:0;pointer-events:none;transition:opacity .4s}
html.in-world .rail{opacity:1;pointer-events:auto}
.rail button{all:unset;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:flex-end;padding:.4rem 0;font:500 .72rem/1 var(--font-en);letter-spacing:.14em;color:var(--steel)}
.rail button em{position:absolute;inset-inline-end:calc(100% + 10px);white-space:nowrap;font-style:normal;opacity:0;transform:translateX(6px);transition:.25s;text-transform:uppercase;font-family:inherit}
html[lang=ar] .rail button em{font-family:var(--font-ar);letter-spacing:0;font-size:.9rem;text-transform:none}
html[dir=rtl] .rail button em{transform:translateX(-6px)}
.rail button span{display:inline-block;min-width:3ch;padding-inline-end:.75rem;border-inline-end:2px solid rgba(242,241,238,.2);transition:.25s}
.rail button:hover em,.rail button:focus-visible em,.rail button.on em{opacity:1;transform:none}
.rail button.on{color:var(--porcelain)}
.rail button.on span{border-color:var(--signal);color:var(--signal)}
.meter{position:fixed;z-index:5;inset-inline-start:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));bottom:max(2rem,env(safe-area-inset-bottom));display:flex;align-items:center;gap:.6rem;font:500 .72rem/1 var(--font-en);letter-spacing:.14em;color:var(--steel);opacity:0;transition:opacity .4s;pointer-events:none}
html[lang=ar] .meter{font-family:var(--font-ar);letter-spacing:0;font-size:.85rem}
html.in-world .meter{opacity:1}
.meter-v{color:var(--signal);font-size:2rem;letter-spacing:0;font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:end;font-weight:300;font-family:var(--font-en)}
.meter i{display:block;width:10rem;height:2px;background:rgba(242,241,238,.15);margin-inline-start:.5rem}
.meter b{display:block;height:100%;width:0;background:var(--signal)}
.tip{position:fixed;z-index:6;pointer-events:none;background:rgba(28,29,33,.9);border:1px solid rgba(215,38,61,.6);border-radius:6px;padding:.45rem .65rem;font:500 .8rem/1.3 var(--font-en);color:var(--porcelain);transform:translate(14px,14px);white-space:nowrap}
html[lang=ar] .tip{font-family:var(--font-ar)}
.tip small{display:block;font-size:.68rem;color:var(--steel);margin-top:2px}
html.dragging,html.dragging *{cursor:grabbing!important}
body.world-hover{cursor:pointer}

/* detail card */
.card-pop{position:fixed;z-index:7;inset-inline-end:7rem;bottom:5.5rem;width:min(26rem,calc(100vw - 2rem));background:rgba(28,29,33,.95);border:1px solid rgba(215,38,61,.5);border-radius:14px;padding:1.5rem;display:grid;gap:.5rem;backdrop-filter:blur(8px);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);color:var(--porcelain)}
.card-pop[hidden]{display:none}
.card-x{all:unset;cursor:pointer;position:absolute;top:.4rem;inset-inline-end:.7rem;font-size:1.5rem;line-height:1;color:var(--steel);padding:.3rem;min-width:44px;min-height:44px;text-align:center}
.card-n{font:500 .72rem/1 var(--font-en);letter-spacing:.14em;color:var(--signal);text-transform:uppercase;margin:0}
html[lang=ar] .card-n{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.85rem}
.card-pop h3{font-size:1.4rem;line-height:1.25;margin:0;color:#fff}
.card-pop p{color:#B9BBC1;font-size:.95rem;margin:0}
.card-pop .card-b{font-size:.8rem;color:var(--steel);line-height:1.6}

/* after the world: solid panels */
.after-world{position:relative;z-index:2;background:var(--bg)}
.after-world .section{background:var(--bg)}
.after-world .section-dark{background:var(--carbon)}
html.clean .hero,html.clean .ch,html.clean .after-world,html.clean .site-header,html.clean .rail,html.clean .meter,html.clean .scrim,html.clean .grain,html.clean .tabbar,html.clean .bot{display:none!important}

/* world stills (capabilities) */
.stills{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.still{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--carbon);aspect-ratio:3/2}
.still img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.still:hover img{transform:scale(1.04)}
.still figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .7rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(28,29,33,.9));font-family:var(--font-en)}
html[lang=ar] .still figcaption{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.95rem}
@media (max-width:900px){.stills{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stills{grid-template-columns:1fr}}

/* assistant: robot in the corner + chat */
.bot{position:fixed;z-index:8;inset-inline-end:1.6rem;bottom:max(1rem,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;pointer-events:none}
.bot>*{pointer-events:auto}
.bot-body{all:unset;pointer-events:auto;box-sizing:border-box;cursor:pointer;position:relative;display:block;width:9rem;height:11rem;border-radius:18px}
.bot-body:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
#botStage{position:absolute;inset:0;width:100%;height:100%;display:block}
.bot-tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:4px 11px;border-radius:99px;background:rgba(28,29,33,.9);border:1px solid rgba(215,38,61,.5);font:600 .78rem/1.2 var(--font-en);color:var(--porcelain)}
html[lang=ar] .bot-tag{font-family:var(--font-ar)}
.bot-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.bot-body:hover .bot-tag{background:var(--signal);border-color:var(--signal);color:#fff}
.bot-bubble{position:relative;margin-bottom:10px;max-width:min(300px,70vw);padding:11px 14px;border-radius:14px;background:rgba(28,29,33,.95);border:1px solid rgba(215,38,61,.55);color:var(--porcelain);font:500 .9rem/1.45 var(--font-en);box-shadow:0 18px 40px -16px rgba(0,0,0,.7);cursor:pointer}
html[lang=ar] .bot-bubble{font-family:var(--font-ar)}
.bot-bubble::after{content:"";position:absolute;bottom:-7px;inset-inline-end:40%;width:12px;height:12px;background:inherit;border-right:1px solid rgba(215,38,61,.55);border-bottom:1px solid rgba(215,38,61,.55);transform:rotate(45deg)}
.bot-bubble[hidden]{display:none}
html.chat-open .bot-tag,html.chat-open .bot-bubble{display:none}
.chat{position:fixed;z-index:9;inset-inline-end:calc(9rem + 2.2rem);bottom:max(1.2rem,env(safe-area-inset-bottom));width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 140px));display:flex;flex-direction:column;background:rgba(28,29,33,.97);border:1px solid rgba(215,38,61,.45);border-radius:16px;box-shadow:0 40px 80px -24px rgba(0,0,0,.8);overflow:hidden;color:var(--porcelain);font-size:.95rem}
.chat[hidden]{display:none}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(215,38,61,.1),transparent)}
.chat-av{width:38px;height:38px;border-radius:12px;background:var(--signal);display:grid;place-items:center;flex:none}
.chat-av svg{width:22px;height:22px;color:#fff}
.chat-id{flex:1;min-width:0;display:grid;line-height:1.25}
.chat-id b{font-size:1rem}
.chat-id small{font-size:.75rem;color:var(--steel)}
.chat-btn{all:unset;cursor:pointer;display:grid;place-items:center;width:40px;height:40px;border-radius:9px;color:var(--steel)}
.chat-btn:hover{background:rgba(255,255,255,.07);color:#fff}
.chat-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.msg{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:88%}
.msg.me{align-self:flex-end;align-items:flex-end}
.bub{padding:10px 13px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);overflow-wrap:anywhere;line-height:1.5}
.msg.ai .bub{border-start-start-radius:4px}
.msg.me .bub{background:var(--signal);color:#fff;border-color:var(--signal);border-start-end-radius:4px}
.bub b{color:#F4D6DA}.msg.me .bub b{color:inherit}
.bub a{color:#F4D6DA}
.msg.typing .bub{color:var(--steel);font-style:italic;animation:pulseT 1.4s ease-in-out infinite}
@keyframes pulseT{50%{opacity:.5}}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.chat-chips[hidden]{display:none}
.chat-chips button{all:unset;cursor:pointer;font-size:.82rem;padding:8px 12px;border-radius:99px;border:1px solid rgba(215,38,61,.5);color:var(--porcelain);background:rgba(215,38,61,.06);min-height:36px}
.chat-chips button:hover{background:rgba(215,38,61,.2)}
.chat-form{display:flex;align-items:center;gap:6px;padding:10px;border-top:1px solid rgba(255,255,255,.08)}
.chat-form input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff}
.chat-form input:focus{outline:none;border-color:var(--signal)}
.chat-send{all:unset;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:var(--signal);color:#fff}
.chat-send svg{width:20px;height:20px}
.chat-note{font-size:.7rem;color:var(--steel);text-align:center;padding:0 12px 8px}
html.bot-static .bot-body{width:4rem;height:4rem;border-radius:50%;background:var(--signal);display:grid;place-items:center;color:#fff}
html.bot-static #botStage{display:none}
html.bot-static .bot-tag{display:none}
.bot-fallback{display:none;width:1.8rem;height:1.8rem}
html.bot-static .bot-fallback{display:block}

@media (max-width:900px){
  .ch{min-height:140vh;align-items:flex-end;padding:0 var(--gutter) calc(5.5rem + env(safe-area-inset-bottom))}
  .ch .copy{width:100%;margin:0;position:sticky;bottom:calc(5.5rem + env(safe-area-inset-bottom));gap:.9rem}
  .scrim,html[dir=rtl] .scrim{background:linear-gradient(0deg,rgba(28,29,33,.95) 0%,rgba(28,29,33,.65) 40%,rgba(28,29,33,0) 65%)}
  .ch h2{font-size:clamp(2rem,9vw,2.8rem)}
  .ch .sheet{font-size:9rem;top:-5rem}
  .ch .copy>p:not(.eyebrow){font-size:1rem}
  .rail{display:none}
  .meter{bottom:auto;top:calc(var(--head-h,3.75rem) + .6rem);inset-inline-start:auto;inset-inline-end:var(--gutter)}
  .meter i,.meter .meter-k{display:none}
  .meter-v{font-size:1.4rem}
  .card-pop{inset-inline:12px;bottom:calc(5rem + env(safe-area-inset-bottom));width:auto}
  .bot{bottom:calc(5rem + env(safe-area-inset-bottom));inset-inline-end:.8rem}
  .bot-body{width:6rem;height:7.5rem}
  .chat{inset-inline:12px;width:auto;bottom:calc(5rem + env(safe-area-inset-bottom));height:min(520px,calc(100vh - 160px))}
}
@media (prefers-reduced-motion:reduce){#world{transition:none}}

/* layout fixes + hero cue */
.ch{padding-bottom:7rem;padding-top:3rem}
.ch h2{font-size:clamp(2.2rem,5vw,4.6rem)}
.ch .copy>p:not(.eyebrow){font-size:1.02rem}
.hero .cue{display:flex;align-items:center;gap:12px;margin:1.4rem 0 0;font:500 .7rem/1 var(--font-en);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
html[lang=ar] .hero .cue{font-family:var(--font-ar);letter-spacing:0;font-size:.85rem;text-transform:none}
.hero .cue span{width:1px;height:2.6rem;background:linear-gradient(var(--signal),transparent);animation:cueline 1.8s ease-in-out infinite}
@keyframes cueline{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.hero .cue span{animation:none}}

html.clean .site-footer,html.clean .chat,html.clean .card-pop{display:none!important}
html.past-world .rail,html.past-world .meter{opacity:0!important;pointer-events:none}

/* chapter headings: words rise in (split by world.js, independent of the site-wide reveal) */
.ch h2.chh{overflow:visible}
.ch .cw{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease;will-change:transform}
.ch.in .cw{opacity:1;transform:none;filter:none}
html.no-webgl .ch .cw,html.no-motion .ch .cw{opacity:1;transform:none;filter:none}

/* city build: readable copy over the scene */
.scrim,html[dir=rtl] .scrim{background:linear-gradient(90deg,rgba(28,29,33,.78) 0%,rgba(28,29,33,.42) 32%,rgba(28,29,33,0) 56%)}
html[dir=rtl] .scrim{background:linear-gradient(270deg,rgba(28,29,33,.78) 0%,rgba(28,29,33,.42) 32%,rgba(28,29,33,0) 56%)}
.ch h2{color:#F2F1EE;font-weight:300}
.ch h2 .hl{color:#fff}
.ch .copy>p:not(.eyebrow){color:#D5D6DA}
@media (max-width:900px){.scrim,html[dir=rtl] .scrim{background:linear-gradient(0deg,rgba(28,29,33,.95) 0%,rgba(28,29,33,.62) 42%,rgba(28,29,33,0) 66%)}}

/* readable copy: a soft blurred panel behind the text block + stronger scrim */
.scrim,html[dir=rtl] .scrim{background:linear-gradient(90deg,rgba(28,29,33,.92) 0%,rgba(28,29,33,.6) 36%,rgba(28,29,33,.1) 58%,rgba(28,29,33,0) 70%)}
html[dir=rtl] .scrim{background:linear-gradient(270deg,rgba(28,29,33,.92) 0%,rgba(28,29,33,.6) 36%,rgba(28,29,33,.1) 58%,rgba(28,29,33,0) 70%)}
.ch .copy{padding:2rem 2.4rem 2rem 2.2rem;margin-inline-start:max(0px,calc((100vw - var(--wrap)) / 2 - 2.2rem));border-radius:18px;background:linear-gradient(90deg,rgba(28,29,33,.86) 0%,rgba(28,29,33,.78) 60%,rgba(28,29,33,.35) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
html[dir=rtl] .ch .copy{background:linear-gradient(270deg,rgba(28,29,33,.86) 0%,rgba(28,29,33,.78) 60%,rgba(28,29,33,.35) 100%)}
.ch h2{color:#F7F6F3;font-weight:400}
.ch .copy>p:not(.eyebrow){color:#E3E3E6}
.ch .sheet{top:-7rem;inset-inline-start:.2rem;-webkit-text-stroke:1px rgba(215,38,61,.35)}
@media (max-width:900px){.ch .copy{padding:1.2rem 1.1rem;background:rgba(28,29,33,.86)}}

/* full-strength text in the chapters */
.ch .copy h2.chh,.ch .copy h2.chh .cw{color:#FFFFFF!important;font-weight:500}
.ch .copy h2.chh .hl{font-weight:800}
.ch.in .copy h2.chh .cw{opacity:1!important;filter:none!important}
.ch.in .copy>p:not(.eyebrow){color:#F2F1EE!important;opacity:1!important;font-weight:400}
html[lang=ar] .ch.in .copy>p:not(.eyebrow){font-weight:500}
.ch .copy .eyebrow .spec{color:#B9BBC1}
.ch .copy{background:linear-gradient(90deg,rgba(20,21,24,.9) 0%,rgba(20,21,24,.82) 60%,rgba(20,21,24,.4) 100%)}
html[dir=rtl] .ch .copy{background:linear-gradient(270deg,rgba(20,21,24,.9) 0%,rgba(20,21,24,.82) 60%,rgba(20,21,24,.4) 100%)}

/* chapters paint above the scrim and grain layers */
.page-home .ch{position:relative;z-index:3}
.page-home .rail,.page-home .meter{z-index:5}

/* ---- node path: the brand's fiber line with hexagon nodes, replaces the rail, the meter and the sheet numbers ---- */
.nodepath{position:fixed;z-index:5;inset-inline-start:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));bottom:max(1.6rem,env(safe-area-inset-bottom));top:auto;transform:none;display:flex;align-items:center;gap:0;opacity:0;pointer-events:none;transition:opacity .4s}
html.in-world .nodepath{opacity:1;pointer-events:auto}
.nodepath .np-line{position:absolute;left:1.4rem;right:1.4rem;top:50%;height:2px;margin-top:-1px;background:rgba(242,241,238,.18);overflow:hidden;pointer-events:none}
html[dir=rtl] .nodepath .np-line{left:1.4rem;right:1.4rem}
.nodepath .np-line b{display:block;height:100%;width:0;background:var(--signal);box-shadow:0 0 10px rgba(215,38,61,.8)}
html[dir=rtl] .nodepath .np-line b{margin-inline-start:auto}
.nodepath button{all:unset;cursor:pointer;position:relative;display:grid;place-items:center;width:2.8rem;height:2.8rem;color:rgba(242,241,238,.55)}
.nodepath button svg{width:1rem;height:1rem;fill:#1C1D21;stroke:currentColor;stroke-width:1.6;transition:transform .3s var(--ease),fill .3s,stroke .3s}
.nodepath button.done{color:var(--signal)}
.nodepath button.done svg{fill:var(--signal)}
.nodepath button.on{color:#fff}
.nodepath button.on svg{fill:var(--signal);stroke:#fff;transform:scale(1.35);filter:drop-shadow(0 0 8px rgba(215,38,61,.9));animation:npPulse 1.6s ease-in-out infinite}
@keyframes npPulse{50%{transform:scale(1.15)}}
.nodepath button em{position:absolute;bottom:calc(100% + .1rem);left:50%;transform:translate(-50%,4px);font:600 .68rem/1 var(--font-en);letter-spacing:.14em;text-transform:uppercase;color:var(--porcelain);white-space:nowrap;opacity:0;transition:.25s;font-style:normal}
html[lang=ar] .nodepath button em{font-family:var(--font-ar);letter-spacing:0;text-transform:none;font-size:.85rem}
.nodepath button.on em,.nodepath button:hover em,.nodepath button:focus-visible em{opacity:1;transform:translate(-50%,0)}
.nodepath button:hover svg{transform:scale(1.2)}
.nodepath button.on:hover svg{transform:scale(1.35)}
.rail:not(.nodepath),.meter,.ch .sheet{display:none!important}
/* chapter eyebrow: hexagon node instead of a diamond */
.ch .eyebrow::before{width:9px;height:10px;border:0;transform:none;background:var(--signal);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@media (max-width:900px){
  .nodepath{display:flex;inset-inline-start:var(--gutter);inset-inline-end:var(--gutter);bottom:auto;top:calc(var(--head-h,3.75rem) + .4rem);justify-content:space-between}
  .nodepath .np-line{left:1.2rem;right:1.2rem}
  .nodepath button{width:2.2rem;height:2.2rem}
  .nodepath button em{display:none}
  .nodepath button.on em{display:block;bottom:auto;top:calc(100% - .2rem);font-size:.62rem;transform:translate(-50%,0)}
}

/* the bubble floats above the robot and never takes part in his layout: he cannot move when it appears */
.bot{align-items:flex-end}
.bot-bubble{position:absolute;bottom:100%;inset-inline-end:0;margin-bottom:10px;width:max-content;max-width:min(300px,70vw)}
.bot-bubble::after{inset-inline-end:calc(4.5rem - 6px)}
@media (max-width:900px){.bot-bubble{max-width:min(18rem,78vw)}.bot-bubble::after{inset-inline-end:calc(3rem - 6px)}}

/* robot: a little smaller, with a smaller bubble and tag */
.bot-body{width:7.4rem;height:9rem}
.bot-bubble{font-size:.8rem;padding:9px 12px;max-width:min(250px,64vw)}
.bot-bubble::after{inset-inline-end:calc(3.7rem - 6px)}
.bot-tag{font-size:.7rem;padding:3px 9px}
.chat{inset-inline-end:calc(7.4rem + 2.2rem)}
@media (max-width:900px){.bot-body{width:5rem;height:6.2rem}.bot-bubble{font-size:.76rem;max-width:min(15rem,70vw)}.bot-bubble::after{inset-inline-end:calc(2.5rem - 6px)}}