/* FAIM real-time 3D experiences: full-screen stage, large type, one active chapter. Figtree, FAIM tokens. */
:root{--ink:#F2F5F0;--ink2:#C9D3CF;--mute:#93A19D;--line:rgba(255,255,255,.14);--glass:rgba(10,14,15,.78);--glass2:rgba(255,255,255,.06);--go:#6FBD44;--go-t:#8DD866;--gold:#D9B26A;--teal:#7CC3C9;--r:18px;--e:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#07090a;color:var(--ink);font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#000;padding:8px 12px;border-radius:8px}.skip:focus{left:8px}
.xp-app{position:fixed;inset:0;overflow:hidden}
.xp-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none;outline:none}
.xp-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.45) 100%)}

/* top bar */
.xp-top{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px clamp(12px,2vw,24px);background:linear-gradient(180deg,rgba(5,7,8,.82),rgba(5,7,8,0));pointer-events:none}
.xp-top>*{pointer-events:auto}
.xp-logo img{height:30px;width:auto;display:block}
.xp-crumbs{display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13.5px;color:var(--mute);min-width:0}
.xp-crumbs a{color:var(--ink2);text-decoration:none}.xp-crumbs a:hover{color:#fff;text-decoration:underline}
.xp-crumbs span[aria-current]{color:#fff;font-weight:600}
.xp-tools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.xb{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:rgba(12,16,17,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s var(--e)}
.xb:hover{border-color:rgba(255,255,255,.4)}.xb:active{transform:scale(.97)}
.xb.pri{background:var(--go);border-color:var(--go);color:#07120a}
.xb.gold{background:var(--gold);border-color:var(--gold);color:#140f06}
.xb[aria-pressed="true"]{background:#fff;color:#0b0d0f;border-color:#fff}
.xb.ic{width:44px;padding:0;justify-content:center}
.xb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xsel{min-height:44px;border-radius:99px;border:1px solid var(--line);background:rgba(12,16,17,.7);color:#fff;padding:0 14px;font-weight:600;font-size:14px}
.xsel option{color:#000}
.xb:focus-visible,.xsel:focus-visible,.xp-chip:focus-visible,.xp-pin:focus-visible,.tab:focus-visible{outline:3px solid var(--go);outline-offset:2px}

/* opening title */
.xp-intro{position:absolute;inset:0;z-index:15;display:flex;align-items:flex-end;padding:clamp(20px,5vw,72px);padding-bottom:clamp(120px,16vh,180px);background:linear-gradient(90deg,rgba(4,6,7,.86) 0%,rgba(4,6,7,.55) 45%,rgba(4,6,7,0) 75%);transition:opacity .9s var(--e),visibility .9s}
.xp-intro.out{opacity:0;visibility:hidden}
.xp-intro .in{max-width:760px}
.eb{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--go-t);display:flex;align-items:center;gap:12px}
.eb::before{content:"";width:28px;height:1px;background:currentColor}
.xp-intro h1{font-size:clamp(2.6rem,7vw,6rem);line-height:.95;letter-spacing:-.035em;font-weight:300;margin:14px 0 0}
.xp-intro h1 b{font-weight:700}
.xp-intro .lede{font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.45;color:var(--ink2);margin:18px 0 0;max-width:46ch}
.xp-intro .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.xp-intro .row .xb{min-height:54px;padding:0 24px;font-size:16px}
.xp-intro .facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;color:var(--mute);font-size:14px}
.xp-intro .facts b{display:block;color:#fff;font-size:26px;font-weight:700;letter-spacing:-.02em}

/* 3D pins */
.xp-pins{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.xp-pin{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 4px;border-radius:99px;border:1px solid rgba(255,255,255,.22);background:rgba(10,13,14,.72);backdrop-filter:blur(8px);color:#fff;font-weight:600;font-size:13.5px;cursor:pointer;translate:-50% -50%;white-space:nowrap;transition:background .2s,opacity .3s}
.xp-pin .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b0d0f;font-weight:700;font-size:13px}
.xp-pin:hover,.xp-pin.on{background:var(--go);border-color:var(--go);color:#07120a}
.xp-pin.on .n{background:#07120a;color:#fff}
.xp-app.focus .xp-pin:not(.on){opacity:.35}
@media(max-width:760px){.xp-pin .l{display:none}.xp-pin{padding:4px}}

/* chapter rail */
.xp-rail{position:absolute;left:0;right:0;bottom:0;z-index:18;padding:10px clamp(12px,2vw,24px) calc(12px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;background:linear-gradient(0deg,rgba(5,7,8,.9),rgba(5,7,8,0))}
.xp-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;scroll-snap-type:x proximity}
.xp-chips::-webkit-scrollbar{display:none}
.xp-chip{flex:none;scroll-snap-align:center;min-height:48px;display:flex;align-items:center;gap:10px;padding:4px 16px 4px 4px;border-radius:99px;border:1px solid var(--line);background:rgba(12,16,17,.72);color:var(--ink2);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.xp-chip .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:13px;color:#fff}
.xp-chip[aria-current="step"]{background:#fff;color:#0b0d0f;border-color:#fff}.xp-chip[aria-current="step"] .n{background:var(--go);color:#07120a}
.xp-prog{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.08)}.xp-prog i{display:block;height:100%;width:0;background:var(--go);transition:width .6s var(--e)}

/* story panel: the one active section */
.xp-panel{position:absolute;right:clamp(10px,1.6vw,22px);top:76px;bottom:94px;z-index:16;width:min(600px,44vw);display:flex;flex-direction:column;background:var(--glass);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.45);transform:translateX(0);transition:transform .7s var(--e),opacity .5s}
.xp-panel[hidden]{display:flex!important;transform:translateX(calc(100% + 40px));opacity:0;pointer-events:none}
.xp-ph{padding:22px 24px 0}
.xp-ph .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.st{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);color:var(--ink2)}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.live{color:var(--go-t);border-color:rgba(141,216,102,.4)}.st.proto{color:#f1c76a;border-color:rgba(241,199,106,.4)}.st.sim{color:#7cc3c9;border-color:rgba(124,195,201,.4)}.st.concept{color:#c9b6ff;border-color:rgba(201,182,255,.35)}.st.pending{color:#ff9f8a;border-color:rgba(255,159,138,.4)}
.xp-ph h2{font-size:clamp(2rem,3.4vw,3.1rem);line-height:1;letter-spacing:-.03em;font-weight:700;margin:14px 0 0}
.xp-ph .prom{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.35;color:var(--ink2);margin:10px 0 0;font-weight:300}
.tabs{display:flex;gap:6px;margin-top:18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tab{border:0;background:none;padding:12px 12px 14px;font-weight:600;font-size:15px;color:var(--mute);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab[aria-selected="true"]{color:#fff;border-color:var(--go)}
.xp-pb{flex:1;overflow:auto;padding:20px 24px 24px;overscroll-behavior:contain;scrollbar-width:thin}
.xp-pb h3{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--go-t);margin:22px 0 10px}
.xp-pb h3:first-child{margin-top:0}
.xp-pb p{font-size:17.5px;line-height:1.6;color:var(--ink2);margin:0 0 12px}
.xp-pb p.big{font-size:20px;color:#fff;line-height:1.45}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--glass2)}
.card b{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.card p{margin:0;font-size:16.5px;color:#fff}
.ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ul li{position:relative;padding-left:22px;font-size:17px;line-height:1.5;color:var(--ink2)}
.ul li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--go)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:46px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.45;color:#fff}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-weight:700;color:var(--go-t);font-variant-numeric:tabular-nums}
.steps li small{display:block;color:var(--mute);font-size:14.5px;margin-top:4px}
/* technical flow diagram */
.flow{display:grid;gap:8px}
.fn{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;position:relative;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--glass2)}
.fn i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(111,189,68,.14);color:var(--go-t);font-style:normal;font-weight:700;font-size:13px}
.fn b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.fn span{display:block;color:#fff;font-size:16px;line-height:1.4;margin-top:3px}
.fn:not(:last-child)::after{content:"";position:absolute;left:35px;bottom:-9px;width:2px;height:9px;background:var(--go)}
.fn.pulse i{animation:pul 1.6s ease-in-out infinite}
@keyframes pul{50%{background:rgba(111,189,68,.45)}}
@media (prefers-reduced-motion:reduce){.fn.pulse i{animation:none}}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.specs .card p{font-size:15.5px}
/* interactive controls inside a chapter */
.do{border:1px solid rgba(111,189,68,.35);background:rgba(111,189,68,.07);border-radius:16px;padding:16px;margin:0 0 18px}
.do h4{margin:0 0 10px;font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.do h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--go);box-shadow:0 0 0 4px rgba(111,189,68,.25)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font-weight:600;font-size:14.5px;cursor:pointer}
.opt[aria-pressed="true"]{background:#fff;color:#0b0d0f;border-color:#fff}
.opt.sw{width:44px;padding:0;border-width:2px}
.result{margin-top:12px;padding:14px;border-radius:12px;background:rgba(0,0,0,.35);font-size:16px;line-height:1.5;color:#fff;min-height:1em}
.result:empty{display:none}
.result b{color:var(--go-t)}
/* QR */
.qr{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center}
.qr .code{background:#fff;border-radius:14px;padding:10px;width:180px;height:180px}
.qr .code svg{width:100%;height:100%;display:block}
.qr p{font-size:16px}
.qr a{word-break:break-all;color:var(--teal);font-size:14px}
@media(max-width:520px){.qr{grid-template-columns:1fr}.qr .code{width:200px;height:200px}}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.thumbs img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.ref{font-size:12.5px;color:var(--mute)}
.xp-panel .foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px 24px 18px;border-top:1px solid var(--line)}
.xp-x{position:absolute;right:14px;top:14px}

/* loading and fallback */
.xp-load{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#07090a;transition:opacity .8s,visibility .8s}
.xp-load.done{opacity:0;visibility:hidden}
.xp-load .in{text-align:center;display:grid;gap:16px;justify-items:center}
.xp-load img{height:40px}
.xp-load .bar{width:min(320px,70vw);height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}.xp-load .bar i{display:block;height:100%;width:0;background:var(--go);transition:width .3s}
.xp-load p{color:var(--mute);font-size:14px;margin:0}
.xp-fallback{position:absolute;inset:0;z-index:12;background-size:cover;background-position:center}
.xp-toast{position:absolute;left:50%;top:84px;transform:translateX(-50%);z-index:40;background:#fff;color:#0b0d0f;font-weight:600;border-radius:99px;padding:12px 20px;box-shadow:0 20px 50px rgba(0,0,0,.4);transition:opacity .4s;max-width:90vw;text-align:center}
.xp-toast[hidden]{display:block!important;opacity:0;pointer-events:none}
.xp-cap{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);z-index:17;max-width:min(760px,90vw);text-align:center;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.45;background:rgba(5,7,8,.72);border-radius:14px;padding:12px 18px;color:#fff}
.xp-cap:empty{display:none}

/* presentation mode: hide chrome except the story */
.present .xp-top .xp-crumbs,.present .xp-pins{opacity:.0;pointer-events:none}
.present .xp-panel{width:min(640px,46vw)}

/* phones and narrow tablets: the panel becomes a bottom sheet */
@media(max-width:860px){
  .xp-panel{left:8px;right:8px;width:auto;top:auto;bottom:84px;height:min(58svh,560px);border-radius:18px 18px 14px 14px}
  .xp-panel.min{height:132px}
  .xp-panel[hidden]{transform:translateY(calc(100% + 100px))}
  .xp-ph{padding:16px 18px 0}.xp-pb{padding:14px 18px 18px}
  .xp-ph h2{font-size:1.75rem}
  .pair,.specs{grid-template-columns:1fr}
  .xp-tools .lbl{display:none}.xp-tools .xb:not(.ic){padding:0 12px}
  .xp-crumbs{display:none}
  .xp-intro{padding-bottom:110px;background:linear-gradient(0deg,rgba(4,6,7,.92) 0%,rgba(4,6,7,.6) 55%,rgba(4,6,7,.1) 100%)}
  .xp-rail{grid-template-columns:auto minmax(0,1fr) auto}
  .xp-chip{padding-right:12px}.xp-chip .t{display:none}
}
@media(max-width:420px){.xp-tools .opt-hide{display:none}}
.sheet-h{display:none}
@media(max-width:860px){.sheet-h{display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.3);margin:8px auto 0;border:0;padding:0;cursor:pointer}}

.xp-app.intro .xp-pins{opacity:0;pointer-events:none}
.xp-pins{transition:opacity .6s}
#ph:focus{outline:none}
@media(max-width:480px){.xp-panel .foot{flex-wrap:nowrap;overflow-x:auto}.xp-panel .foot .xb{min-height:42px;padding:0 12px;font-size:14px}}
/* live system button and signal trace */
.live-go{display:inline-flex;margin-top:2px}
.xp-trace{position:absolute;left:16px;bottom:96px;z-index:16;width:min(330px,calc(100vw - 32px));background:rgba(8,7,6,.88);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;font-size:12px;color:#cfc6b6;backdrop-filter:blur(8px);pointer-events:none}
.xp-trace .th{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}.xp-trace .th b{color:#fff;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.xp-trace .th span{font-family:ui-monospace,Menlo,monospace;color:var(--go,#D9B26A);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-trace ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.xp-trace li{display:grid;grid-template-columns:22px 1fr;column-gap:6px;opacity:.35;transition:opacity .2s}.xp-trace li i{font-style:normal;color:#8a8070;grid-row:span 2}
.xp-trace li b{color:#fff;font-weight:500;font-size:12px}.xp-trace li span{font-size:11px;line-height:1.3;display:none}
.xp-trace li.done{opacity:.8}.xp-trace li.on{opacity:1}.xp-trace li.on span{display:block}.xp-trace li.on i{color:#8dd866}
.xp-trace li.on b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8dd866;margin-left:6px;box-shadow:0 0 8px #8dd866}
.xp-trace pre{margin:8px 0 0;font:10.5px/1.35 ui-monospace,Menlo,monospace;color:#9fd38a;white-space:pre-wrap;max-height:110px;overflow:hidden}
@media (max-width:860px){.xp-trace{top:64px;bottom:auto;width:min(280px,calc(100vw - 32px))}.xp-trace pre{display:none}}

/* minimal shell (24 Oct): two sections, the 3D with one compact panel, and a thumbnail strip with a slider */
.xp-crumbs{display:none}
.xp-tools .more{display:none}.xp-tools.open .more{display:inline-flex}
.xp-panel .meta,.xp-panel .foot #enq,.xp-panel .foot #wa{display:none}
.xp-panel{top:70px;bottom:146px;width:min(440px,36vw)}
.xp-panel h2{font-size:clamp(1.4rem,2.2vw,2rem)!important;line-height:1.1}
.xp-panel .prom{font-size:15px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xp-panel .tabs .tab{font-size:13px;padding:8px 10px}
.xp-panel .foot{padding:10px 18px 12px}
.xp-rail{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px}
.xp-chip{flex-direction:column;align-items:stretch;gap:4px;min-height:0;padding:4px;border-radius:12px;width:118px}
.xp-chip .th{display:block;height:64px;border-radius:9px;background:#14100c center/cover no-repeat}
.xp-chip .n{display:none}.xp-chip .t{font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block!important}
.xp-chip[aria-current="step"]{background:var(--go);border-color:var(--go)}
.xp-slide{grid-column:1/-1;width:100%;height:4px;accent-color:var(--go);margin:0}
@media(max-width:760px){.xp-panel{bottom:150px;height:auto;max-height:46svh;width:auto}.xp-chip{width:92px}.xp-chip .th{height:50px}}

.xp-panel .pwin{position:absolute;top:12px;right:12px;z-index:3;display:flex;gap:6px}
.xp-panel .pw{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.xp-panel .pw:hover{background:rgba(255,255,255,.18)}.xp-panel .pw:focus-visible{outline:3px solid var(--go)}
.xp-panel .xp-ph h2{padding-right:84px}
.xp-panel.pmin{bottom:auto}.xp-panel.pmin .tabs,.xp-panel.pmin .xp-pb,.xp-panel.pmin .foot,.xp-panel.pmin .prom{display:none!important}

/* edge tab: the panel stays hidden until this is pressed */
.xp-edge{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:17;border:1px solid var(--line);border-right:0;border-radius:14px 0 0 14px;background:rgba(12,14,14,.78);backdrop-filter:blur(10px);color:#fff;padding:16px 9px;cursor:pointer;writing-mode:vertical-rl;font:600 13px Figtree,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.xp-edge::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--go);margin:0 auto 8px}
.xp-edge:hover{background:rgba(30,26,20,.9)}.xp-edge:focus-visible{outline:3px solid var(--go)}
/* minimised: a small card, half-size text */
.xp-panel.pmin{width:min(260px,70vw)!important;padding:0;border-radius:16px}
.xp-panel.pmin .xp-ph{padding:12px 14px!important}.xp-panel.pmin h2{font-size:15px!important;padding-right:62px;margin:0}
.xp-panel.pmin .pwin{top:8px;right:8px;gap:4px}.xp-panel.pmin .pw{width:24px;height:24px;font-size:13px}