/* AI for Thriving Cities, the four-layer page (/framework, /framework-ru).
   Loaded after hub.css: tokens, header, footer, buttons, glass, reveal and the grid background come from the hub.
   Here: the layer bar, hero, map of the four layers, Why, the layers themselves, the invitation and the pictures.
   Source: src/framework/ (build-page.py writes public/framework*.html). Content stays readable without JS. */

:root{
  --bar:48px;--fw-head:var(--head);--top:calc(var(--fw-head) + var(--bar));
  --glass-2:rgba(255,255,255,.07);--rgb:41,240,255;
  --rose:#FFB8EC;--ice:#BFF8FF;
}
html{scroll-padding-top:calc(var(--top) + 14px)}
/* pictures leave the columns and the window edge; main clips them. Not body: its overflow is handed to the viewport,
   where clip turns into hidden and the page still scrolls sideways by script (anchors, scrollIntoView).
   clip, not hidden: no scroll container, so the sticky contents column keeps sticking */
main{overflow-x:clip}
.l1{--rgb:41,240,255}.l2{--rgb:255,43,214}.l3{--rgb:255,181,71}.l4{--rgb:74,222,128}
code{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:.88em}
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-weight:600;font-size:var(--fs-micro);letter-spacing:.18em;line-height:1.5;text-transform:uppercase;color:var(--caption)}
.kicker::before{content:"";flex:none;width:28px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--magenta))}

/* ---------- primary button in cyan: the accent of this page (one per screen) ---------- */
.btn-cy{background:var(--cyan);color:var(--navy);box-shadow:0 10px 34px -12px rgba(41,240,255,.65)}
.btn-cy::after{flex:none}
.btn-cy:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(41,240,255,.2),0 16px 44px -12px rgba(41,240,255,.85)}
.btn-cy.chev::after{content:"";width:7px;height:7px;margin-right:2px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.btn-cy.chev-down::after{transform:translateY(-2px) rotate(135deg)}

/* ---------- layer bar: fixed under the hub header, appears once the hero title has scrolled away ---------- */
.fw-bar{position:fixed;left:0;right:0;top:var(--fw-head);z-index:45;height:var(--bar);
  background:rgba(11,16,32,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-2);transition:transform .45s var(--ease),opacity .35s,visibility 0s}
.fw-js .fw-bar:not(.is-on){transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .45s var(--ease),opacity .35s,visibility 0s .45s}
html:not(.fw-js) .fw-bar{position:sticky}
.fw-bar-in{max-width:var(--wrap);height:100%;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:14px}
.fw-name{display:flex;align-items:center;gap:10px;min-width:0;color:#fff;text-decoration:none;font-weight:750;font-size:14.5px;letter-spacing:-.005em}
.fw-name-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-n-short{display:none}
@media screen and (max-width:520px){.fw-n-full{display:none}.fw-n-short{display:inline}}
.fw-pill{flex:none;font-size:11.5px;font-weight:700;color:var(--navy);background:var(--caption);padding:2px 8px;border-radius:999px;white-space:nowrap}
.fw-layers{display:flex;gap:4px;flex:none;min-width:fit-content}
.fw-layers a{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 11px 0 6px;border-radius:999px;color:var(--caption);text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.fw-layers a b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:800;color:var(--navy);background:rgb(var(--rgb))}
.fw-layers a:hover{background:var(--glass-2);color:#fff}
.fw-layers a.on{background:rgba(var(--rgb),.13);color:#fff;box-shadow:inset 0 0 0 1px rgba(var(--rgb),.45)}
.fw-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.fw-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));transform-origin:0 50%;transform:scaleX(0)}

/* ---------- hero: eyebrow (status), H1 (name), subtitle (structure), line (purpose), slogan, call ---------- */
.fw-hero{position:relative;isolation:isolate;overflow:clip;padding:clamp(36px,5.6vw,88px) 0 clamp(36px,4vw,56px)}
.fw-hero-bg{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 40% 46% at 4% 6%,rgba(41,240,255,.13),transparent 70%),
             radial-gradient(ellipse 48% 58% at 86% 46%,rgba(255,43,214,.09),transparent 70%)}
.fw-hero-grid{position:relative;display:flex;align-items:center;min-height:min(560px,64vh)}
.fw-hero-copy{position:relative;z-index:2;max-width:620px}
.fw-h1{margin-top:24px;max-width:none}
.fw-h1 .c{color:var(--cyan);text-shadow:0 0 42px rgba(41,240,255,.32)}
.fw-hero .h-sub{margin-top:14px}
.fw-hero .h-lead{margin-top:clamp(24px,2.8vw,36px);max-width:54ch}
.fw-slogan{margin-top:clamp(22px,2.4vw,30px);font-size:var(--fs-lead);font-weight:700;line-height:1.45;letter-spacing:-.005em;color:#fff}
.fw-hero .hero-actions{margin-top:16px}
.fw-disclaimer{margin-top:26px;max-width:62ch;font-size:13.5px;line-height:1.55;color:var(--faint)}
/* the picture is mirrored so that the family looks towards the text; edges dissolve through masks on gradients */
.fw-hero-art{position:absolute;z-index:1;top:57%;right:calc((100% - 100vw) / 2 - 3vw);width:min(860px,57vw);aspect-ratio:1916/821;margin:0;translate:0 -50%;pointer-events:none;opacity:.86;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%);
  mask-composite:intersect}
.fw-hero-art img{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}

/* ---------- map of the four layers ---------- */
.fw-scheme{position:relative;padding:clamp(28px,3.4vw,48px) 0 clamp(64px,7vw,104px)}
.scheme-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.scheme-head h2{margin:14px 0 0;font-weight:800;font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.015em;color:#fff;max-width:24ch}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0;padding:0;font-size:13.5px;color:var(--muted);list-style:none}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:22px;height:12px;border-radius:4px;background:#fff}
.legend i.kp{background:transparent;border:1.5px dashed rgba(255,255,255,.75)}
.stack{display:flex;flex-direction:column;align-items:center}
.slab{width:var(--w,100%);max-width:100%}
.slab-in{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 22px;align-items:start;
  padding:22px 24px 20px 22px;border-radius:18px;color:#fff;
  background:linear-gradient(100deg,rgba(var(--rgb),.17),rgba(var(--rgb),.05) 52%,rgba(255,255,255,.025));
  border:1px solid rgba(var(--rgb),.42);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.slab-in::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(var(--rgb),.16),transparent 70%)}
.slab-in:hover{transform:translateY(-2px);border-color:rgba(var(--rgb),.85);box-shadow:0 18px 50px -20px rgba(var(--rgb),.6)}
.slab-in:hover::before{opacity:1}
.slab.kp .slab-in{border-style:dashed}
.slab-link{color:inherit;text-decoration:none}
.slab-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.slab-link:focus-visible{outline:none}
.slab-in:has(.slab-link:focus-visible){outline:2px solid var(--soft);outline-offset:3px}
.slab .num{grid-row:1 / span 2;width:58px;height:58px;border-radius:15px;display:grid;place-items:center;
  font-weight:900;font-size:30px;line-height:1;color:var(--navy);background:rgb(var(--rgb));box-shadow:0 0 28px rgba(var(--rgb),.45)}
.slab .kind{display:block;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--rgb))}
.slab h3{margin:4px 0 0;font-weight:800;font-size:22px;line-height:1.22;letter-spacing:-.01em}
.slab h3 small{font-weight:600;font-size:13px;letter-spacing:0;color:var(--muted);white-space:nowrap}
.slab .ans{margin:6px 0 0;font-size:15.5px;line-height:1.45;color:var(--caption)}
.slab .meta{grid-column:2 / -1;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;margin:14px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.1)}
.slab dt{font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.slab dd{margin:4px 0 0;font-size:15px;line-height:1.45;color:#fff}
.slab-cta{grid-column:3;grid-row:1;align-self:start;font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;white-space:nowrap}
.slab-cta.full{background:#fff;color:var(--navy)}
.slab-cta.kp{border:1.5px dashed rgba(255,255,255,.7);color:#fff}
.slab.has-extra .main{grid-row:1 / span 2}
.slab.has-extra .meta{grid-row:3}
.slab-extra{position:relative;z-index:2;grid-column:3;grid-row:2;justify-self:end;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--soft);
  text-decoration:underline;text-decoration-color:rgba(124,224,255,.45);text-underline-offset:4px;white-space:nowrap}
.slab-extra:hover{color:#fff;text-decoration-color:#fff}
.link-cap{position:relative;width:min(720px,100%);margin:0;padding:34px 0 30px;text-align:center;font-size:14.5px;line-height:1.5;color:var(--caption);font-style:italic}
.link-cap::before{content:"";position:absolute;left:50%;top:6px;width:2px;height:22px;transform:translateX(-50%);
  background:linear-gradient(rgba(var(--a),.9),rgba(var(--b),.9));border-radius:2px}
.link-cap::after{content:"";position:absolute;left:50%;bottom:8px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);
  border-right:2px solid rgba(var(--b),.95);border-bottom:2px solid rgba(var(--b),.95)}
.found{width:100%;margin:22px 0 0;display:flex;align-items:center;justify-content:center;gap:10px 14px;flex-wrap:wrap;
  padding:15px 20px;border-radius:14px;border:1px dashed rgba(255,255,255,.28);text-align:center;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px);font-size:14.5px;color:var(--caption)}
.found .tag{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.fw-chip{display:inline-block;font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#fff;white-space:nowrap}
.fractal{margin:34px auto 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;text-align:center;font-size:15px;color:var(--caption)}
.fractal strong{color:#fff;font-weight:700;margin-right:4px}
.fractal .fw-chip{font-weight:600;border-color:rgba(124,224,255,.4);background:rgba(124,224,255,.06)}

/* ---------- why ---------- */
.fw-why{padding-top:clamp(40px,5vw,72px)}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"pos neg goals" "paths paths goals" "gap gap gap";gap:20px;align-items:start}
.why-pos{grid-area:pos}.why-neg{grid-area:neg}.why-goals{grid-area:goals}.paths{grid-area:paths}.why-gap{grid-area:gap}
.why-col.card{display:block;padding:clamp(22px,2.2vw,30px)}
.why-col-h{display:flex;align-items:baseline;gap:12px;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em}
.why-n{flex:none;font-size:15px;font-weight:300;letter-spacing:0;color:rgb(var(--acc,124,224,255))}
.why-goals .why-n{color:var(--amber)}
.why-item{border-top:1px solid var(--line-2);padding:14px 0 12px}
.why-col-h + .why-item{margin-top:16px}
.why-item > summary{display:block;list-style:none;font-size:16.5px;font-weight:750;line-height:1.35;color:#fff;cursor:default}
.why-item > summary::-webkit-details-marker{display:none}
.why-item > p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--muted)}
.why-line{margin-top:10px;padding:14px 0 0 16px;border-top:1px solid var(--line-2);box-shadow:inset 2px 0 0 rgba(255,43,214,.7);font-size:15.5px;font-weight:650;line-height:1.5;color:#fff}
.why-goals{padding:clamp(22px,2.2vw,30px) 4px 0}
.goals-intro{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.goals{margin-top:14px;counter-reset:g}
.goal{counter-increment:g;position:relative;padding:14px 0 14px 50px;border-top:1px solid var(--line);font-size:15px;line-height:1.58;color:var(--text)}
.goal::before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:10px;font-size:28px;font-weight:200;line-height:1.1;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--cyan),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.goal.l1::after,.goal.l2::after,.goal.l3::after,.goal.l4::after{content:"";position:absolute;left:3px;top:50px;width:8px;height:8px;border-radius:50%;background:rgb(var(--rgb));box-shadow:0 0 10px rgba(var(--rgb),.7)}
.paths{padding:clamp(22px,2.4vw,32px)}
.paths-head{display:flex;align-items:center;justify-content:flex-start;margin-bottom:10px}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--rose);transition:transform .45s var(--ease),background-color .45s}
.paths[data-side="deliberate"] .seg::before{transform:translateX(100%);background:var(--soft)}
.seg button{position:relative;z-index:1;min-height:42px;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--caption);font:inherit;font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:color .3s}
.seg button[aria-checked="true"]{color:var(--navy)}
.seg button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.prow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:6px 24px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line-2)}
.prow-name{font-size:15.5px;font-weight:700;line-height:1.4;color:#fff}
.prow-vals{display:grid}
.prow-v{grid-area:1 / 1;font-size:15.5px;line-height:1.5;transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s}
.prow-drift{color:var(--rose)}
.prow-del{color:var(--ice)}
.prow-lab{font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.fw-ready .prow-lab{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fw-ready .paths[data-side="drift"] .prow-del,.fw-ready .paths[data-side="deliberate"] .prow-drift{opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .3s,transform .3s,visibility 0s .3s}
html:not(.fw-ready) .prow-vals{gap:6px}
html:not(.fw-ready) .prow-v{grid-area:auto}
.paths-line{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:15px;line-height:1.6;color:var(--muted)}
.why-gap{margin-top:clamp(12px,2vw,28px);max-width:900px;padding:4px 0 4px 22px;box-shadow:inset 2px 0 0 0 rgba(124,224,255,.6)}
.why-gap h3{font-size:var(--fs-h3);line-height:1.25}
.why-gap p{margin-top:12px;font-size:var(--fs-lead);line-height:1.62;color:var(--muted)}

/* ---------- layer sections ---------- */
.layer{position:relative;padding:112px 0 100px;border-top:1px solid var(--line-2)}
.layer::before{content:"";position:absolute;left:0;right:0;top:0;height:620px;pointer-events:none;
  background:radial-gradient(ellipse 58% 100% at 0% 0%,rgba(var(--rgb),.12),transparent 70%)}
.layer.l3::before{background:radial-gradient(ellipse 58% 100% at 100% 0%,rgba(var(--rgb),.12),transparent 70%)}
.layer.alt{background:linear-gradient(180deg,rgba(13,20,48,.7),rgba(11,16,32,.18) 70%)}
.layer > .wrap{position:relative}
.layer > .wrap > :not(.lart){position:relative;z-index:1}
.layer-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 30px;align-items:start;margin-bottom:56px;max-width:1000px}
.layer-big{font-weight:900;font-size:128px;line-height:.9;color:rgb(var(--rgb));user-select:none;
  background:linear-gradient(180deg,rgb(var(--rgb)) 10%,rgba(var(--rgb),.18) 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 28px rgba(var(--rgb),.28))}
.layer-head .kicker{color:rgb(var(--rgb))}
.mode{display:inline-block;font-size:11.5px;letter-spacing:.12em;padding:3px 9px;border-radius:999px;color:var(--navy);background:#fff}
.mode.kp{background:transparent;color:#fff;border:1.5px dashed rgba(255,255,255,.7)}
.layer-title{margin:14px 0 0;font-weight:800;font-size:clamp(30px,3.9vw,52px);line-height:1.07;letter-spacing:-.02em;color:#fff}
.layer-sub{display:block;margin-top:12px;font-size:.5em;font-weight:700;line-height:1.2;letter-spacing:-.005em;color:var(--caption)}
.doc-note{margin:18px 0 0;max-width:760px;padding:2px 0 2px 16px;border-left:2px solid rgba(var(--rgb),.65);font-size:15.5px;line-height:1.6;color:var(--muted)}
.doc-note + .doc-note{margin-top:6px}
.doc-note em{font-style:normal}
.l1-frame{margin-top:12px;max-width:60ch;font-size:14.5px;line-height:1.55;color:var(--faint)}
.l1-frame a,.th-note a,.fw-status a{color:var(--soft);text-decoration:underline;text-decoration-color:rgba(124,224,255,.4);text-underline-offset:4px}
.l1-frame a:hover,.th-note a:hover,.fw-status a:hover{color:#fff;text-decoration-color:#fff}
.to-layers{display:inline-flex;align-items:center;gap:8px;margin-top:56px;font-size:14px;font-weight:600;color:var(--caption);text-decoration:none;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line)}
.to-layers:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.to-layers::before{content:"";width:7px;height:7px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg) translate(2px,2px)}

/* ---------- layer 1: declaration ---------- */
.decl-pre{max-width:800px}
.decl-pre p{margin:0 0 18px;font-size:20px;line-height:1.62;color:#fff}
.decl-pre p:first-child{font-size:25px;line-height:1.42;font-weight:500;letter-spacing:-.006em}
.block-h{display:flex;align-items:center;gap:16px;margin:64px 0 24px;font-weight:700;font-size:13px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:var(--caption)}
.block-h::after{content:"";flex:1;height:1px;background:var(--line)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.pcard{position:relative;padding:24px 24px 18px;border-radius:18px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);overflow:hidden}
.pcard::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(41,240,255,0))}
.pcard .n{display:block;font-weight:900;font-size:46px;line-height:1.1;color:var(--cyan);text-shadow:0 0 30px rgba(41,240,255,.3)}
.pcard h4{margin:10px 0 8px;font-weight:800;font-size:19.5px;line-height:1.25;letter-spacing:-.005em;color:#fff}
.pcard > p{margin:0;font-size:15.5px;line-height:1.58;color:var(--text)}
/* "how it is shown": one line from layer 3, visibly outside the Declaration text (amber = layer 3) */
.shown{margin-top:14px;padding-top:10px;border-top:1px dashed rgba(255,181,71,.38)}
.shown-btn{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:0;border:0;background:none;color:var(--amber);font:inherit;font-size:13.5px;font-weight:700;letter-spacing:.01em;cursor:pointer}
.shown-btn::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.shown.is-open .shown-btn::after{transform:translateY(2px) rotate(225deg)}
.shown-btn:hover{color:#fff}
.shown-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease),visibility .45s}
.shown-body > div{min-height:0;overflow:hidden}
.fw-ready .shown:not(.is-open) .shown-body{grid-template-rows:0fr;visibility:hidden}
.pcard .shown-line{margin:6px 0 4px;padding-left:12px;box-shadow:inset 2px 0 0 rgba(255,181,71,.7);font-size:14.5px;line-height:1.5;color:var(--caption)}
.shown-tag{display:block;margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.shown-l4{box-shadow:inset 2px 0 0 rgba(74,222,128,.7)!important}
.shown-l4 .shown-tag{color:var(--green)}
.shown-l4 a{color:var(--caption);text-decoration:underline;text-decoration-color:rgba(74,222,128,.55);text-underline-offset:4px}
.shown-l4 a:hover{color:#fff}
.decl-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 56px}
.decl-text p{margin:0 0 16px;font-size:17px;line-height:1.66}
.join{display:grid;gap:12px}
.jcard{padding:18px 20px;border-radius:14px;background:rgba(41,240,255,.06);border:1px solid rgba(41,240,255,.28);font-size:16px;line-height:1.55}
.jcard strong{display:block;margin-bottom:4px;color:var(--cyan);font-weight:800}
.join-intro{margin:14px 0 14px;font-size:17px;line-height:1.66}
.join-close{margin:16px 0 0;font-size:17px;line-height:1.66;color:#fff}

/* ---------- layer 2: white paper ---------- */
.wp{display:grid;grid-template-columns:250px minmax(0,1fr);gap:64px;align-items:start}
.wp-toc{position:sticky;top:calc(var(--top) + 24px);max-height:calc(100vh - var(--top) - 48px);overflow:auto;padding:2px 6px 8px 0;font-size:14px;scrollbar-width:thin}
.toc-t{margin:0 0 10px;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.wp-toc a{display:flex;gap:9px;padding:7px 10px;border-radius:8px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;line-height:1.35}
.wp-toc a b{flex:none;width:16px;color:var(--faint);font-weight:800}
.wp-toc a:hover{color:#fff;background:var(--glass-2)}
.wp-toc a.on{color:#fff;background:rgba(255,43,214,.09);border-left-color:var(--magenta)}
.wp-toc a.on b{color:var(--magenta)}
.wp-toc .sub{display:none;margin:2px 0 8px 26px}
.wp-toc li.open > .sub{display:block}
.wp-toc .sub a{font-size:13px;padding:5px 10px}
.tbtn{font:inherit;font-weight:700;font-size:14px;color:#fff;background:var(--glass-2);border:1px solid rgba(255,255,255,.24);border-radius:999px;min-height:40px;padding:0 16px;cursor:pointer;transition:background-color .2s,border-color .2s}
.tbtn:hover{background:rgba(255,43,214,.14);border-color:rgba(255,43,214,.6)}
.tbtn-sm{margin-top:16px;font-size:13px;min-height:36px;padding:0 13px}
.wp-body{max-width:780px;min-width:0}
.wp-body p{margin:0 0 1.05em;font-size:18px;line-height:1.72}
.wp-body em{font-style:italic}
.wp-body blockquote{margin:0 0 1.2em;padding-left:18px;border-left:2px solid rgba(255,43,214,.5)}
.wp-h{margin:0 0 18px;font-weight:800;font-size:30px;line-height:1.15;letter-spacing:-.015em;color:#fff}
.wp-open + .wp-open{margin-top:52px}
#wp-key{position:relative}
#wp-key > :not(.lart){position:relative;z-index:1}
.km{padding:28px 30px 18px;border-radius:20px;background:linear-gradient(135deg,rgba(38,14,58,.66),rgba(12,22,50,.62));
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid rgba(255,43,214,.36);box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.km-title{margin:0 0 6px!important;font-weight:700;font-size:12.5px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--caption)}
.km-list{counter-reset:k;margin:10px 0 0}
.km-list li{counter-increment:k;position:relative;padding:14px 0 14px 50px;border-top:1px solid rgba(255,255,255,.1);font-size:17px;line-height:1.6;color:#fff}
.km-list li::before{content:counter(k);position:absolute;left:0;top:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:var(--navy);background:var(--magenta)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:64px 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.toolbar-t{margin:0!important;font-weight:700;font-size:12.5px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--caption)}
.chapter{border-bottom:1px solid var(--line)}
.chapter > summary{list-style:none;display:grid;grid-template-columns:48px minmax(0,1fr) 34px;gap:16px;align-items:start;padding:24px 2px;cursor:pointer;border-radius:12px}
.chapter > summary::-webkit-details-marker{display:none}
.chapter > summary:hover .ch-title{color:var(--magenta)}
.ch-num{font-weight:900;font-size:28px;line-height:1.1;color:var(--magenta)}
.ch-head{min-width:0}
.ch-title{display:block;font-weight:800;font-size:23px;line-height:1.25;letter-spacing:-.01em;color:#fff;transition:color .2s}
.ch-subs{display:block;margin-top:7px;font-size:14px;line-height:1.5;color:var(--faint)}
.chapter[open] .ch-subs{display:none}
.ch-toggle{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.26)}
.ch-toggle::before,.ch-toggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:1px;background:#fff;transform:translate(-50%,-50%)}
.ch-toggle::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.chapter[open] .ch-toggle{border-color:rgba(255,43,214,.7)}
.chapter[open] .ch-toggle::after{transform:translate(-50%,-50%) rotate(0deg)}
.ch-body{padding:0 0 40px 64px}
.wp-sub{margin:38px 0 12px;font-weight:800;font-size:20px;line-height:1.3;letter-spacing:-.005em;color:#fff}
.ch-body > p:first-child{font-size:19.5px;line-height:1.66;color:#fff}
.tbl-wrap{margin:26px 0 30px;border-radius:14px;border:1px solid var(--line);overflow:hidden;background:rgba(11,16,32,.35)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.tbl th{text-align:left;vertical-align:bottom;font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--caption);background:rgba(255,255,255,.055);padding:12px 16px}
.tbl td{padding:13px 16px;border-top:1px solid var(--line-2);vertical-align:top;color:var(--text)}
.tbl td:first-child{font-weight:700;color:#fff}
.tbl-path td:nth-child(2){color:var(--rose)}
.tbl-path td:nth-child(3){color:var(--ice)}
.tbl-layers td:first-child{border-left:3px solid rgb(var(--rgb))}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin:24px 0 28px!important;padding:20px;border-radius:16px;background:var(--glass);border:1px solid var(--line)}
.chain-step{font-size:14px;font-weight:600;line-height:1.3;padding:7px 12px;border-radius:999px;background:rgba(255,43,214,.1);border:1px solid rgba(255,43,214,.36);color:#fff}
.chain .arr{color:var(--magenta);font-family:system-ui,"Segoe UI Symbol","Segoe UI",sans-serif;font-size:15px}
html[lang="ru"] .chain .arr::before{content:"\2192"}
.illustration{margin:40px 0 10px;padding:22px 26px 6px;border-radius:18px;border:1px dashed rgba(255,255,255,.32);background:rgba(255,255,255,.028)}
.illustration .wp-sub{margin-top:14px}
.ill-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:var(--caption);padding:4px 10px;border-radius:999px}
.plist,.olist{counter-reset:p;margin:20px 0 26px}
.plist li,.olist li{counter-increment:p;position:relative;padding:12px 0 12px 46px;border-top:1px solid var(--line-2);font-size:17px;line-height:1.66}
.plist li::before,.olist li::before{content:counter(p);position:absolute;left:0;top:13px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-weight:800;font-size:13.5px;color:var(--navy);background:var(--cyan)}
.plist .lead{color:#fff}
.ulist{margin:0 0 20px;padding-left:22px;list-style:disc}
.ulist li{margin-bottom:4px}
.refs{margin:4px 0 0;padding-left:24px;list-style:decimal;font-size:15px;line-height:1.6;color:var(--muted)}
.refs li{margin:0 0 10px;padding-left:4px}
.refs a{color:var(--soft);overflow-wrap:anywhere;word-break:break-word}
/* white paper of Pavel Luksha (23-10-2026): authors block, glossary, RU stub */
#wp-front{margin-bottom:44px}
#wp-front p{font-size:17px;line-height:1.66}
.wp-authors{padding-left:16px;border-left:2px solid rgba(var(--rgb),.5);color:var(--muted)}
.wp-body .wp-authors strong{color:#fff}
.wp-body .gl-item{margin:0;padding:14px 0;border-top:1px solid var(--line-2);font-size:17px;line-height:1.62}
.wp-body .gl-item strong{color:#fff}
.wp-solo{display:block}
.wp-stub{max-width:780px;padding:26px 28px 8px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.wp-stub .wp-stub-t{margin:0 0 18px;font-size:18px;line-height:1.66}
.wp-stub .wp-stub-a{margin:0 0 18px}

/* ---------- layers 3 and 4: key points ---------- */
.essence{max-width:880px;margin:0 0 48px}
.essence p{margin:0 0 14px;font-size:21px;line-height:1.58;color:#fff}
.tgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.th{grid-column:span 6;min-width:0;padding:24px 24px 22px;border-radius:18px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line)}
.th.w12{grid-column:1 / -1}.th.w4{grid-column:span 4}.th.w8{grid-column:span 8}.th.w7{grid-column:span 7}.th.w5{grid-column:span 5}.th.w6{grid-column:span 6}
.th .src{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--rgb))}
.th h3{margin:6px 0 14px;font-weight:800;font-size:20px;line-height:1.25;letter-spacing:-.005em;color:#fff}
.th p{margin:0 0 10px;font-size:15.5px;line-height:1.56}
.th p.th-note{margin:12px 0 0;font-size:14.5px;color:var(--caption)}
.th p.fw-add{padding-top:12px;border-top:1px dashed rgba(var(--rgb),.4);color:#fff}
.fsteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.fsteps li{counter-increment:s;position:relative;padding:44px 14px 16px;border-radius:14px;background:rgba(var(--rgb),.07);border:1px solid rgba(var(--rgb),.28);font-size:15px;line-height:1.45;color:#fff}
.fsteps li::before{content:counter(s);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--navy);background:rgb(var(--rgb))}
.p9{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;counter-reset:q}   /* ten principles: 2 columns, 5 rows, no lone item */
.p9 li{counter-increment:q;position:relative;padding:10px 0 10px 34px;border-top:1px solid var(--line-2);font-size:14.5px;line-height:1.5;color:var(--muted)}
.p9 li::before{content:counter(q);position:absolute;left:0;top:11px;font-weight:900;font-size:17px;color:rgb(var(--rgb))}
.p9 li b{display:block;color:#fff;font-weight:700;font-size:15.5px;margin-bottom:2px}
.rows li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:4px 18px;padding:10px 0;border-top:1px solid var(--line-2);font-size:15px;line-height:1.5}
.rows li b{color:#fff;font-weight:700}
.risk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.risk li{padding:14px 12px;border-radius:12px;border:1px solid rgba(var(--rgb),.3);font-size:13.5px;line-height:1.45;color:var(--caption)}
.risk li b{display:block;font-size:16px;color:#fff;margin-bottom:4px}
.risk li b small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:rgb(var(--rgb));text-transform:uppercase;margin-top:2px}
.risk li:nth-child(1){background:rgba(var(--rgb),.04)}.risk li:nth-child(2){background:rgba(var(--rgb),.08)}
.risk li:nth-child(3){background:rgba(var(--rgb),.13)}.risk li:nth-child(4){background:rgba(var(--rgb),.19)}
.risk li:nth-child(5){background:rgba(var(--rgb),.27);border-color:rgba(var(--rgb),.6)}
.ladder li{position:relative;padding:10px 0 10px 18px;border-left:2px solid rgba(var(--rgb),.35);font-size:15px;line-height:1.5}
.ladder li + li{margin-top:2px}
.ladder li:last-child{border-left-color:rgb(var(--rgb))}
.ladder li b{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.chips .fw-chip{font-weight:600;border-color:rgba(var(--rgb),.45);background:rgba(var(--rgb),.07)}
.x li,.ok li,.qs li{position:relative;padding:8px 0 8px 30px;font-size:15px;line-height:1.5;border-top:1px solid var(--line-2)}
.x li::before,.x li::after{content:"";position:absolute;left:4px;top:18px;width:14px;height:2px;background:#ff6b8b;transform:rotate(45deg)}
.x li::after{transform:rotate(-45deg)}
.ok li::before{content:"";position:absolute;left:5px;top:13px;width:6px;height:11px;border-right:2px solid rgb(var(--rgb));border-bottom:2px solid rgb(var(--rgb));transform:rotate(40deg)}
.qs li::before{content:"?";position:absolute;left:3px;top:7px;font-weight:900;color:rgb(var(--rgb))}
.cases li{padding:10px 0;border-top:1px solid var(--line-2);font-size:15px;line-height:1.5}
.cases li b{display:block;color:#fff}
.kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kinds li{padding:14px;border-radius:12px;background:rgba(var(--rgb),.07);border:1px solid rgba(var(--rgb),.28);font-size:14px;line-height:1.45;color:var(--caption)}
.kinds li b{display:block;color:#fff;font-size:15px;margin-bottom:4px}
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;counter-reset:r}
.rules li{counter-increment:r;position:relative;padding:9px 0 9px 38px;border-top:1px solid var(--line-2);font-size:15.5px;font-weight:600;color:#fff;line-height:1.4}
.rules li::before{content:counter(r);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--navy);background:rgb(var(--rgb))}
.card-mock{margin:6px 0 0;padding:14px 16px;border-radius:12px;background:#070b17;border:1px solid rgba(var(--rgb),.35);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:13px;line-height:1.75;color:rgb(var(--rgb))}
.card-mock span{display:inline-block;margin-right:14px}
.card-mock span::after{content:":";color:var(--faint)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.duo div{padding:12px 14px;border-radius:12px;font-size:14.5px;line-height:1.5;border:1px solid var(--line)}
.duo .yes{background:rgba(var(--rgb),.07);border-color:rgba(var(--rgb),.35)}
.duo .no{background:rgba(255,107,139,.06);border-color:rgba(255,107,139,.35)}
.msg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.msg li{padding:10px 12px;border-radius:10px;text-align:center;font-weight:700;font-size:15px;color:#fff;background:rgba(var(--rgb),.08);border:1px solid rgba(var(--rgb),.3)}
.bridge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 8px}
.bridge div{padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:14px;line-height:1.45}
.bridge div b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.th p.bridge-out{padding:12px 14px;border-radius:10px;background:rgba(var(--rgb),.09);border:1px solid rgba(var(--rgb),.4);font-size:14.5px;line-height:1.5;color:#fff}
.bridge-out b{color:rgb(var(--rgb))}
.fit li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line-2);font-size:14.5px;line-height:1.45}
.fit li b{color:#fff}
.fit li.us b{color:rgb(var(--rgb))}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.tools code{font-size:12.5px;padding:4px 9px;border-radius:7px;background:#070b17;border:1px solid rgba(var(--rgb),.3);color:rgb(var(--rgb))}
.gate{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.gate span{font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid var(--line)}
.gate .g1{color:#0B1020;background:var(--green);border-color:var(--green)}
.gate .g2{color:#fff;background:rgba(255,107,139,.2);border-color:rgba(255,107,139,.6)}
.gate .g3{color:#0B1020;background:var(--amber);border-color:var(--amber)}
.th p.credit{margin:12px 0 0;font-size:13px;color:var(--faint)}

/* ---------- invitation ---------- */
.fw-invite > .wrap{position:relative}
.fw-invite > .wrap > :not(.lart){position:relative;z-index:1}
.fw-invite .sec-head{max-width:min(780px,66%)}
.inv-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.inv-card{transition:transform .35s var(--ease)}
.inv-card .card-title{margin-top:10px}
.inv-card .card-label{font-size:28px;font-weight:200;letter-spacing:-.03em;line-height:1.1}
@media (hover:hover) and (pointer:fine){
  .inv-card:hover{transform:translateY(-4px)}
  .inv-card .card-actions{opacity:.62;transition:opacity .35s}
  .inv-card:hover .card-actions,.inv-card:focus-within .card-actions{opacity:1}
}
.inv-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 48px;margin-top:clamp(40px,5vw,64px)}
.inv-two > div{padding-top:20px;border-top:1px solid var(--line)}
.inv-two h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.inv-two p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.inv-close{margin-top:clamp(48px,6vw,84px);max-width:30em;font-size:clamp(23px,1.7vw + 14px,38px);font-weight:400;line-height:1.3;letter-spacing:-.02em;color:#E8EDF7}
.inv-actions{margin-top:30px}

/* ---------- status ---------- */
.fw-status{padding:clamp(48px,5vw,80px) 0 0}
.fw-status-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px 56px;padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line-2)}
.st-line{display:flex;gap:12px;margin:14px 0 0;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.45}
.fw-status .dot{flex:none;width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(255,181,71,.18)}
.st-sub{font-weight:700;font-size:12px;letter-spacing:.12em;color:var(--caption)}
.fw-status p.small{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--caption)}
.srcs{margin:12px 0 0;padding-left:20px;list-style:decimal;font-size:15px;line-height:1.55;color:var(--caption)}
.srcs li{margin-bottom:8px}

/* ---------- layer pictures: beside the head of each layer, the head reserves the room (layout B, 20-10-2026) ----------
   The picture is the last child of .layer-head (build-page.py, ART). The head keeps padding on the right and a minimum
   height, so the title and the document never run under the picture; edges dissolve by a gradient mask.
   --ar     width / height of the picture of the layer (layerN.webp: 1024x1536, 1672x940, 1254x1254, 1086x1448)
   --fig-w  picture width: up to 420 px and 32vw, and no taller than 440 px
   --bleed  how far the picture may hang into the page gutter: up to 120 px, always 32 px inside the window */
.layer.l1 .layer-head{--ar:.667}
.layer.l2 .layer-head{--ar:1.779}
.layer.l3 .layer-head{--ar:1}
.layer.l4 .layer-head{--ar:.75}
.layer .layer-head{position:relative;max-width:none;
  --fig-w:min(420px,32vw,calc(440px * var(--ar,.8)));
  --bleed:max(calc((100% - 100vw) / 2 + 32px),-120px);
  padding-right:calc(var(--fig-w) + var(--bleed) + 40px);
  min-height:calc(var(--fig-w) / var(--ar,.8) - 24px)}
.layer-head > .lart{position:absolute;top:-6px;right:var(--bleed);z-index:0;width:var(--fig-w);margin:0;opacity:.9;
  pointer-events:none;user-select:none;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
.lart img{display:block;width:100%;height:auto}
.fw-par{transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform 1.1s var(--ease)}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  .fw-par{transform:none!important}
  .fw-bar,.fw-js .fw-bar:not(.is-on){transition:none}
  .inv-card:hover,.slab-in:hover{transform:none}
}

/* ---------- four nested layers: picture with live labels (EN, 23-10-2026) ----------
   Mobile first: picture on top, labels 2 x 2 under it, leaders hidden, numbered badges on the rings.
   From 961 px: labels left (38%), picture right (60%); the leaders overlay uses a 1000 x 600 box, so every
   coordinate scales with the picture. Ring edges and badges use the picture's own 1000 x 1000 box. */
.rings{margin:0 0 30px}
.re1,.rb1,.rd1{--rgb:41,240,255}.re2,.rb2,.rd2{--rgb:255,43,214}.re3,.rb3,.rd3{--rgb:255,181,71}.re4,.rb4,.rd4{--rgb:74,222,128}
.rings-art{position:relative;margin:0 auto 20px;width:100%;max-width:560px;aspect-ratio:1}
.rings-art img{display:block;width:100%;height:100%}
.rings-edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.re{opacity:.85;transition:opacity .25s ease}
.re ellipse{fill:none;stroke:rgb(var(--rgb));stroke-width:3}
.re ellipse.re-halo{stroke:rgba(11,16,32,.45);stroke-width:6.5}
.rb circle{fill:var(--navy);stroke:rgb(var(--rgb));stroke-width:4}
.rb text{fill:rgb(var(--rgb));font:800 40px Inter,system-ui,sans-serif;text-anchor:middle;dominant-baseline:central}
.rings-leaders{display:none}
.rings-stage{display:flex;flex-direction:column}
.rings-stage .rings-art{order:-1}
.rings-labels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rl{position:relative;display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(100deg,rgba(var(--rgb),.15),rgba(var(--rgb),.04) 60%,rgba(255,255,255,.02));
  border:1px solid rgba(var(--rgb),.42);transition:border-color .25s ease,box-shadow .25s ease}
.rl:hover{border-color:rgba(var(--rgb),.85);box-shadow:0 14px 40px -22px rgba(var(--rgb),.7)}
.rl-num{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:19px;line-height:1;color:var(--navy);background:rgb(var(--rgb));box-shadow:0 0 22px rgba(var(--rgb),.4)}
.rl-body{min-width:0;display:flex;flex-direction:column;gap:3px}
.rl-kind{font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--rgb))}
.rl-name{color:#fff;font-weight:800;font-size:16.5px;line-height:1.25;letter-spacing:-.005em;text-decoration:none}
.rl-name::after{content:"";position:absolute;inset:0;border-radius:inherit}
.rl-name:focus-visible{outline:none}
.rl:has(.rl-name:focus-visible){outline:2px solid var(--soft);outline-offset:3px}
.rl-who{font-size:13.5px;line-height:1.4;color:var(--muted)}
.rl-who b{font-weight:700;color:rgb(var(--rgb))}
.rings-sum{margin:18px 0 0;max-width:46ch;font-size:15.5px;line-height:1.5;color:var(--caption)}
.stack-legend{margin:0 0 18px}
.rings:has(.rl:hover,.rl:focus-within) .re{opacity:.3}
.rings:has(.rl:nth-child(1):is(:hover,:focus-within)) .re1,.rings:has(.rl:nth-child(2):is(:hover,:focus-within)) .re2,
.rings:has(.rl:nth-child(3):is(:hover,:focus-within)) .re3,.rings:has(.rl:nth-child(4):is(:hover,:focus-within)) .re4{opacity:1}
@media screen and (max-width:560px){
  .rings-labels{grid-template-columns:minmax(0,1fr)}
  .rl{padding:12px 14px}
}
@media screen and (min-width:961px){
  .rings{margin-bottom:38px}
  .rings-stage{display:block;position:relative;aspect-ratio:1000 / 600}
  .rings-labels{position:absolute;left:0;top:0;width:38%;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,1fr);gap:0}
  .rings-labels .rl{align-self:center;padding:12px 14px}
  .rl-name{font-size:clamp(14.5px,1.35vw,16.5px)}
  .rings-art{position:absolute;left:40%;top:0;width:60%;height:100%;margin:0;max-width:none}
  .rings-leaders{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .rings-sum{margin-top:22px;max-width:none;text-align:left}
  .rb{display:none}
}
.rd path{fill:none;stroke:rgb(var(--rgb));stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rd path.rd-halo{stroke:rgba(11,16,32,.55);stroke-width:4;stroke-linecap:round}
.rd .rd-dot{fill:rgb(var(--rgb));stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke}

/* ---------- medium screens (screen only, so print never takes these branches) ---------- */
@media screen and (max-width:1100px){
  .wp{grid-template-columns:minmax(0,1fr);gap:28px}
  .wp-toc{position:static;max-height:none;overflow:visible;padding:18px 20px;border-radius:16px;background:var(--glass);border:1px solid var(--line)}
  .wp-toc .sub,.wp-toc li.open > .sub{display:none}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .th,.th.w4,.th.w5,.th.w6,.th.w7,.th.w8{grid-column:1 / -1}
  .fw-layers a span{display:none}
  .fw-layers a{padding:0 6px}
  .slab{--w:100%!important}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"pos neg" "paths paths" "goals goals" "gap gap"}
  .inv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-cards .inv-card:last-child{grid-column:1 / -1}
}
@media screen and (max-width:960px){
  .fw-hero-grid{display:block;min-height:0}
  .fw-hero-art{position:relative;top:auto;right:auto;translate:none;width:116%;margin:22px -8% -10px;opacity:.9;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%)}
  /* tablet and phone: the layer picture moves above the layer number, the title stays next to its text */
  .layer .layer-head{padding-right:0;min-height:0}
  .layer-head > .lart{position:relative;top:auto;right:auto;grid-column:1 / -1;order:-1;transform:none!important;
    width:min(100%,calc(320px * var(--ar,.8)),360px);margin:0 0 18px}
  .fw-invite .sec-head{max-width:none;margin-left:0}
}
@media screen and (max-width:760px){
  :root{--bar:44px}
  .fw-bar-in{gap:8px}
  .fw-name{gap:8px;font-size:13.5px}
  .fw-pill{display:none}
  .fw-layers{gap:2px}
  .fw-layers a{min-height:36px;padding:0 4px}
  .fw-layers a b{width:28px;height:28px;font-size:13px}
  .fw-hero .hero-actions .btn{width:100%}
  .fw-slogan{font-size:17.5px}
  .scheme-head{margin-bottom:22px}
  .slab-in{grid-template-columns:auto minmax(0,1fr);padding:18px 16px 16px;gap:4px 14px}
  .slab .num{grid-row:auto;width:44px;height:44px;font-size:23px;border-radius:12px}
  .slab-cta,.slab-extra{grid-column:1 / -1;grid-row:auto;justify-self:start;margin-top:10px}
  .slab-extra{margin-top:4px}
  .slab.has-extra .main,.slab.has-extra .meta{grid-row:auto}
  .slab .meta{grid-column:1 / -1;grid-template-columns:1fr;gap:10px}
  .slab h3{font-size:19px}
  .slab .ans{font-size:15px}
  .link-cap{font-size:13.5px;padding:30px 4px 28px}
  .why-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"pos" "neg" "paths" "goals" "gap"}
  .why-item > summary{position:relative;padding-right:30px;cursor:pointer}
  .fw-ready .why-item > summary::after{content:"";position:absolute;right:6px;top:6px;width:8px;height:8px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg);transition:transform .3s var(--ease)}
  .fw-ready .why-item[open] > summary::after{transform:translateY(4px) rotate(225deg)}
  .prow{grid-template-columns:minmax(0,1fr);gap:4px}
  .seg{width:100%}
  .seg button{padding:0 10px}
  .layer{padding:72px 0 64px}
  .layer-head{grid-template-columns:minmax(0,1fr);margin-bottom:36px}
  .layer-big{font-size:84px}
  .decl-pre p{font-size:18px}
  .decl-pre p:first-child{font-size:20px}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .decl-two{grid-template-columns:minmax(0,1fr)}
  .wp-body p{font-size:17px;line-height:1.68}
  .wp-h{font-size:25px}
  .km{padding:20px 18px 10px}
  .km-list li{padding-left:42px;font-size:16px}
  .chapter > summary{grid-template-columns:34px minmax(0,1fr) 30px;gap:10px;padding:20px 0}
  .ch-num{font-size:22px}
  .ch-title{font-size:19px}
  .ch-toggle{width:30px;height:30px}
  .ch-body{padding:0 0 32px}
  .ch-body > p:first-child{font-size:18px}
  .tbl-wrap{border:0;border-radius:0;overflow:visible;background:none}
  .tbl,.tbl thead,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{margin:0 0 10px;padding:6px 0;border-radius:12px;border:1px solid var(--line);background:var(--glass)}
  .tbl td{border:0;padding:8px 14px}
  .tbl td::before{content:attr(data-label);display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
  .tbl-layers td:first-child{border-left:0}
  .tbl-layers tr{border-left:3px solid rgb(var(--rgb))}
  .essence p{font-size:18px}
  .th{padding:20px 16px 18px}
  .fsteps,.risk,.kinds,.msg,.bridge{grid-template-columns:minmax(0,1fr)}
  .fsteps li{padding:12px 14px 12px 48px}
  .fsteps li::before{top:12px}
  .p9,.rules{grid-template-columns:minmax(0,1fr)}
  .rows li,.fit li{grid-template-columns:minmax(0,1fr)}
  .duo{grid-template-columns:minmax(0,1fr)}
  .found{font-size:13.5px}
  .inv-cards,.inv-two{grid-template-columns:minmax(0,1fr)}
  .inv-cards .inv-card:last-child{grid-column:auto}
  .inv-actions .btn{width:100%}
  .fw-status-grid{grid-template-columns:minmax(0,1fr)}
}
/* ---------- audiences (20-10-2026): "For" rows and "Find your layer" ---------- */
/* For rows: a label and plain chips in the existing chip style; in the map under the meta list, for layers 3 and 4 also in the layer head */
.fd-for{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:14px 0 0}
.slab.has-extra .fd-for{grid-row:4}
.fd-for-l{flex:none;font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.fd-for-list{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none}
.fd-for .fw-chip{font-weight:600;white-space:normal;border-color:rgba(var(--rgb),.45);background:rgba(var(--rgb),.07)}
.fd-for-head{grid-column:auto;margin-top:16px}

/* Find your layer. Without JS: a list of disclosures (first open). With JS: a radiogroup over one panel */
.fw-find{padding-top:clamp(8px,2vw,24px);padding-bottom:clamp(36px,4.4vw,64px)}
.fd-roles{display:grid;gap:12px;max-width:980px}
.fd-role{--rgb:41,240,255;padding:0}
.fd-role[data-lead="2"]{--rgb:255,43,214}
.fd-role[data-lead="3"]{--rgb:255,181,71}
.fd-role[data-lead="4"]{--rgb:74,222,128}
.fd-role > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 22px;cursor:pointer;list-style:none;font-weight:700;font-size:17px;line-height:1.3;color:#fff}
.fd-role > summary::-webkit-details-marker{display:none}
.fd-role > summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid rgb(var(--rgb));border-bottom:2px solid rgb(var(--rgb));transform:rotate(45deg);transition:transform .3s var(--ease)}
.fd-role[open] > summary::after{transform:translateY(3px) rotate(225deg)}
.fd-role > summary:focus-visible{outline:2px solid var(--soft);outline-offset:-2px;border-radius:inherit}
.fd-body{position:relative;padding:4px 22px 24px}
.fd-pips{display:flex;gap:6px;margin:0 0 14px}
.fd-pips i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;font-style:normal;font-weight:800;font-size:13px;color:var(--faint);border:1px dashed rgba(255,255,255,.28)}
.fd-pips i.on{color:var(--navy);border:1px solid transparent}
.fd-pips .q1.on{background:rgb(41,240,255)}.fd-pips .q2.on{background:rgb(255,43,214)}.fd-pips .q3.on{background:rgb(255,181,71)}.fd-pips .q4.on{background:rgb(74,222,128)}
.fd-rows{display:grid;gap:14px;margin:0}
.fd-rows > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 22px;align-items:baseline}
.fd-rows dt{font-weight:700;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:rgb(var(--rgb))}
.fd-rows dd{margin:0;font-size:16px;line-height:1.6;color:var(--text);max-width:68ch}
.fd-btns{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:22px}
.fd-btns .btn{min-height:46px;padding:0 20px;font-size:15px}
.fd-agents{max-width:980px;margin:22px 0 0;padding:14px 18px;border:1px dashed rgba(255,255,255,.28);border-radius:12px;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:13.5px;line-height:1.65;color:var(--caption)}
.fd-agents .text-link{font-family:inherit}

/* with the script: role buttons over one panel */
.fd-ready .fd-tabs{display:flex;flex-wrap:wrap;gap:10px;max-width:980px;margin:0 0 16px}
.fd-tab{--rgb:41,240,255;display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:15px;line-height:1.25;color:#fff;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1.5px rgba(var(--rgb),.5);text-align:left;
  transition:background .25s,box-shadow .25s,color .25s}
.fd-tab[data-lead="2"]{--rgb:255,43,214}.fd-tab[data-lead="3"]{--rgb:255,181,71}.fd-tab[data-lead="4"]{--rgb:74,222,128}
.fd-tab:hover{background:rgba(var(--rgb),.14);box-shadow:inset 0 0 0 1.5px rgb(var(--rgb))}
.fd-tab[aria-checked="true"]{background:rgb(var(--rgb));color:var(--navy);box-shadow:none}
.fd-tab:focus-visible{outline:2px solid var(--soft);outline-offset:3px}
.fd-ready .fd-role > summary{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;min-height:0}
.fd-ready .fd-role > summary::after{display:none}
.fd-ready .fd-body{padding-top:24px}
.fd-ready .fd-role{border-radius:22px}
.fd-ready .fd-role[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .fd-ready .fd-role.fd-in{animation:fd-in .28s var(--ease)}
}
@keyframes fd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* the map slab lit by the chosen role: the same glow as on hover */
.slab-in.fd-lit{border-color:rgba(var(--rgb),.85);box-shadow:0 18px 50px -20px rgba(var(--rgb),.6)}
.slab-in.fd-lit::before{opacity:1}

@media screen and (max-width:760px){
  .fd-for,.fd-for-head{grid-column:1 / -1;grid-row:auto!important}
  .slab.has-extra .fd-for{grid-row:auto}
  .fd-rows > div{grid-template-columns:minmax(0,1fr)}
  .fd-role > summary{padding:12px 16px}
  .fd-body{padding:4px 16px 20px}
  .fd-btns .btn{width:100%}
  .fd-tab{min-height:44px;padding:8px 14px;font-size:14.5px}
}

/* ---------- card checkerboard (generated by tasks/20-10-2026/thriving-name/gen-checker.py) ---------- */
:root{--card-a:var(--glass);--card-b:rgba(70,92,180,.22)}
@media screen{
.pgrid > .pcard:nth-child(2n){background:var(--card-b)}
.inv-cards > .inv-card:nth-child(2n){background:var(--card-b)}
.fsteps > li:nth-child(2n){background:rgba(var(--rgb),.12)}
.kinds > li:nth-child(8n+2),.kinds > li:nth-child(8n+4),.kinds > li:nth-child(8n+5),.kinds > li:nth-child(8n+7){background:rgba(var(--rgb),.12)}
.msg > li:nth-child(2n){background:rgba(var(--rgb),.14)}
.bridge > div:nth-child(2n){background:rgba(255,255,255,.085)}
.layer.l3 .tgrid > div.th:nth-of-type(2),.layer.l3 .tgrid > div.th:nth-of-type(4),.layer.l3 .tgrid > div.th:nth-of-type(7),.layer.l3 .tgrid > div.th:nth-of-type(9),.layer.l3 .tgrid > div.th:nth-of-type(11),.layer.l3 .tgrid > div.th:nth-of-type(13){background:var(--card-b)}
.layer.l4 .tgrid > div.th:nth-of-type(2),.layer.l4 .tgrid > div.th:nth-of-type(5),.layer.l4 .tgrid > div.th:nth-of-type(6),.layer.l4 .tgrid > div.th:nth-of-type(8),.layer.l4 .tgrid > div.th:nth-of-type(11),.layer.l4 .tgrid > div.th:nth-of-type(13){background:var(--card-b)}
.why-grid > .why-neg,.why-grid > .paths{background:var(--card-b)}
@media (max-width:1100px){
.pgrid > .pcard:nth-child(4n+1),.pgrid > .pcard:nth-child(4n+4){background:var(--card-a)}
.pgrid > .pcard:nth-child(4n+2),.pgrid > .pcard:nth-child(4n+3){background:var(--card-b)}
.inv-cards > .inv-card:nth-child(4n+1),.inv-cards > .inv-card:nth-child(4n+4){background:var(--card-a)}
.inv-cards > .inv-card:nth-child(4n+2),.inv-cards > .inv-card:nth-child(4n+3){background:var(--card-b)}
.layer.l3 .tgrid > div.th:nth-of-type(2n+1){background:var(--card-a)}
.layer.l3 .tgrid > div.th:nth-of-type(2n){background:var(--card-b)}
.layer.l4 .tgrid > div.th:nth-of-type(2n+1){background:var(--card-a)}
.layer.l4 .tgrid > div.th:nth-of-type(2n){background:var(--card-b)}
}
@media (max-width:760px){
.pgrid > .pcard:nth-child(2n+1){background:var(--card-a)}
.pgrid > .pcard:nth-child(2n){background:var(--card-b)}
.inv-cards > .inv-card:nth-child(2n+1){background:var(--card-a)}
.inv-cards > .inv-card:nth-child(2n){background:var(--card-b)}
.fsteps > li:nth-child(2n+1){background:rgba(var(--rgb),.07)}
.fsteps > li:nth-child(2n){background:rgba(var(--rgb),.12)}
.kinds > li:nth-child(2n+1){background:rgba(var(--rgb),.07)}
.kinds > li:nth-child(2n){background:rgba(var(--rgb),.12)}
.msg > li:nth-child(2n+1){background:rgba(var(--rgb),.08)}
.msg > li:nth-child(2n){background:rgba(var(--rgb),.14)}
.bridge > div:nth-child(2n+1){background:rgba(255,255,255,.04)}
.bridge > div:nth-child(2n){background:rgba(255,255,255,.085)}
.why-grid > .why-pos,.why-grid > .paths{background:var(--card-a)}
.why-grid > .why-neg,.why-grid > .why-gap{background:var(--card-b)}
}
}
/* ---------- end card checkerboard ---------- */

/* ---------- print: white paper, everything open, no pictures (kept at the very end) ---------- */
@page{margin:16mm 14mm}
/* ---------- the map (23-10-2026, spec 03): layer 2 as an entrance, the Documents strip. Own classes start with fwm- ---------- */
.fwm-from{margin-top:14px;max-width:46ch;font-size:var(--fs-lead);font-weight:600;line-height:1.45;color:var(--caption)}
.fwm-intro{margin-top:12px;max-width:60ch;font-size:var(--fs-lead);line-height:1.5;color:var(--muted)}
a.slab-cta{text-decoration:none}
.fwm-anchor{display:block;height:0;overflow:hidden}
.fwm-l2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px clamp(28px,4vw,64px);align-items:start;margin-top:8px}
.fwm-l2 .wp-h{font-size:24px;margin-bottom:12px}
.fwm-km{grid-column:1}
.fwm-contents{grid-column:2;grid-row:1}
.fwm-contents ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fwm-contents li{border-bottom:1px solid var(--line-2)}
.fwm-contents a{display:block;padding:11px 4px;font-size:14.5px;font-weight:600;line-height:1.4;letter-spacing:.01em;color:var(--caption);text-decoration:none}
.fwm-contents a:hover,.fwm-contents a:focus-visible{color:#fff;background:rgba(255,255,255,.04)}
.fwm-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:900px){.fwm-l2{grid-template-columns:minmax(0,1fr)}.fwm-km,.fwm-contents,.fwm-actions{grid-column:1;grid-row:auto}.fwm-actions .btn{width:100%}}
.fwm-build-h{margin-top:22px;font-size:var(--fs-h3);line-height:1.25}
.fwm-paths-h{font-size:var(--fs-h3);line-height:1.25;margin-bottom:14px}
.fwm-docs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fwm-doc{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)}
.fwm-doc-n{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-weight:800;color:var(--navy);background:rgb(var(--c,41,240,255))}
.fwm-doc.l1{--c:41,240,255}.fwm-doc.l2{--c:255,43,214}.fwm-doc.l3{--c:255,181,71}.fwm-doc.l4{--c:74,222,128}
.fwm-doc-name{font-size:var(--fs-h3);font-weight:700;line-height:1.25;color:#fff}
.fwm-doc-ver{margin-top:2px;font-size:var(--fs-small);color:var(--muted)}
.fwm-doc-act{display:flex;flex-wrap:wrap;gap:10px}
.fwm-doc-act .btn{min-height:44px;padding:0 20px;font-size:15px}
@media (max-width:760px){.fwm-doc{grid-template-columns:auto minmax(0,1fr)}.fwm-doc-act{grid-column:1 / -1}.fwm-doc-act .btn{flex:1 1 auto}}

/* ---------- one spacing scale for the whole page (spec 06, 23-10-2026) ----------
   section top and bottom      --sp-sec    56-88 px
   eyebrow (label) to heading  --sp-eb     14 px
   heading to intro text       --sp-h2     18 px
   intro text to the content   --sp-intro  36 px
   card inner padding          --sp-card   26 px
   gap of a card grid          --sp-gap    18 px
   Neighbouring sections do not add their paddings: a section without its own edge (map, find, documents, invitation) takes the
   scale on top only, a section with an edge (why before layer 1, the layers) takes it on both sides.
   Only values above the scale were pulled down to it. One container width: .wrap (1200 px) in every section. */
:root{
  --sp-sec:clamp(56px,7vw,88px);--sp-eb:14px;--sp-h2:18px;--sp-intro:36px;--sp-card:26px;--sp-gap:18px;
}
body.fw .section{padding:var(--sp-sec) 0}
body.fw .fw-scheme{padding:32px 0 0}
body.fw .fw-find{padding-top:var(--sp-sec);padding-bottom:0}
body.fw .fw-why{padding-top:var(--sp-sec);padding-bottom:var(--sp-sec)}
body.fw .fwm-documents{padding-top:0;padding-bottom:0}
body.fw .fw-invite{padding-top:var(--sp-sec);padding-bottom:0}
body.fw .fw-status{padding-top:var(--sp-sec)}
body.fw .fw-status-grid{padding-top:var(--sp-intro)}
body.fw .layer{padding:var(--sp-sec) 0}
body.fw .layer-head{margin-bottom:var(--sp-intro)}
body.fw .to-layers{margin-top:var(--sp-intro)}
body.fw .sec-head{margin-bottom:var(--sp-intro)}
body.fw .sec-head .h2{margin-top:var(--sp-eb)}
body.fw .sec-head .intro{margin-top:var(--sp-h2)}
body.fw .scheme-head{margin-bottom:var(--sp-intro)}
body.fw .essence{margin-bottom:var(--sp-intro)}
body.fw .fractal{margin-top:28px}
body.fw .card,body.fw .why-col.card,body.fw .paths{padding:var(--sp-card)}
body.fw .th{padding:var(--sp-card)}
body.fw .tgrid{gap:var(--sp-gap)}
body.fw .why-grid{gap:var(--sp-gap)}
body.fw .inv-cards{gap:var(--sp-gap)}
body.fw .inv-two{margin-top:var(--sp-intro);gap:var(--sp-gap) clamp(28px,4vw,48px)}
body.fw .inv-close{margin-top:var(--sp-sec)}
body.fw .why-gap{margin-top:var(--sp-gap)}
@media screen and (max-width:760px){
  body.fw .layer{padding:var(--sp-sec) 0}
  body.fw .layer-head{margin-bottom:var(--sp-intro)}
  body.fw .th{padding:20px 16px 18px}
}

/* ---------- hero of /framework (EN, class fw-hero-sm): text only, a four-rings sign centred in the right field with faint concentric arcs around it ---------- */
.fw-hero.fw-hero-sm{padding:clamp(32px,4vw,56px) 0 clamp(24px,3vw,40px)}
.fw-hero-sm .fw-hero-grid{min-height:0;align-items:flex-start;gap:clamp(24px,4vw,64px)}
.fw-hero-sm .fw-hero-copy{flex:1 1 auto;max-width:640px}
.fw-hero-sm .fw-h1{margin-top:var(--sp-eb)}
.fw-hero-sm .h-sub{margin-top:14px}
.fw-hero-sm .fwm-from{margin-top:14px}
.fw-hero-sm .h-lead{margin-top:24px;max-width:58ch}
.fw-hero.fw-hero-sm .hero-actions{margin-top:24px}
.fw-hero-sm .fw-disclaimer{margin-top:24px}
.fw-hero-rings{position:relative;z-index:0;flex:1 1 0;align-self:center;display:grid;place-items:center;min-width:264px;pointer-events:none;user-select:none}
.fw-emblem{position:relative;width:264px;aspect-ratio:1}
.fw-emblem-svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.fw-emblem-svg .emb-outer{transform-box:view-box;transform-origin:48px 48px}
.fw-emblem-svg .emb-core{transform-box:view-box;transform-origin:48px 48px}
.fw-hero-arcs{position:absolute;left:50%;top:50%;width:530%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);overflow:visible;
  -webkit-mask-image:linear-gradient(to right,transparent 22%,#000 46%);mask-image:linear-gradient(to right,transparent 22%,#000 46%)}
.fw-hero-arcs .arc-spin{transform-box:view-box;transform-origin:700px 700px}
@media (prefers-reduced-motion:no-preference){
  .fw-hero-arcs .arc-spin{animation:arc-spin 240s linear infinite}
  .fw-emblem-svg .emb-outer{animation:emb-spin 200s linear infinite}
  .fw-emblem-svg .emb-core{animation:emb-breathe 9s ease-in-out infinite alternate}
}
@keyframes arc-spin{to{transform:rotate(360deg)}}
@keyframes emb-spin{to{transform:rotate(360deg)}}
@keyframes emb-breathe{from{opacity:.82;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@media screen and (min-width:961px){
  /* the first screen holds the whole hero text and the top of the next section peeks out by about 70 px */
  .fw-hero.fw-hero-sm{display:grid;align-content:center;min-height:min(calc(100vh - var(--fw-head) - 72px),780px);min-height:min(calc(100svh - var(--fw-head) - 72px),780px)}
  .fw-hero-sm > .wrap{width:100%}
  .fw-hero-sm .fw-hero-grid{align-items:stretch}
}
@media screen and (max-width:960px){
  .fw-hero-sm .fw-hero-grid{display:flex;flex-direction:column-reverse;align-items:stretch;gap:0}
  .fw-hero-sm .fw-hero-copy{max-width:none;position:relative;z-index:2}
  .fw-hero-rings{flex:none;min-width:0;margin:0 0 22px}
  .fw-emblem{width:192px}
  .fw-hero-arcs{-webkit-mask-image:radial-gradient(circle closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 35%,transparent 100%)}
}
@media screen and (max-width:560px){
  .fw-emblem{width:156px}
  .fw-hero-rings{margin:0 0 18px}
}

/* ---------- layer 1 on the map: the ten principle names as chips in the colours of their families, two buttons ---------- */
.l1-compact{--ar:.667;--fig-w:min(420px,32vw,calc(440px * .667));--bleed:max(calc((100% - 100vw) / 2 + 32px),-120px)}
.layer.l1-compact .layer-head{min-height:0}
.l1-compact .l1-list,.l1-compact .l1-actions{padding-right:calc(var(--fig-w) + var(--bleed) + 40px)}
.l1-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--sp-gap);margin:0;padding:0;list-style:none;
  --f-sky-bg:#DCEBF5;--f-sky-ac:#0A6A89;--f-sage-bg:#DDEBDD;--f-sage-ac:#2A6D47;--f-sand-bg:#F3E6CC;--f-sand-ac:#8C5300;--f-rose-bg:#F2DCE8;--f-rose-ac:#9E1478}
.l1p{display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 18px 10px 12px;border-radius:14px;background:var(--fam-bg);color:var(--fam-ac);font-weight:750;font-size:16px;line-height:1.3}
.l1p[data-fam="together"]{--fam-bg:var(--f-sky-bg);--fam-ac:var(--f-sky-ac)}
.l1p[data-fam="planet"]{--fam-bg:var(--f-sage-bg);--fam-ac:var(--f-sage-ac)}
.l1p[data-fam="capability"]{--fam-bg:var(--f-sand-bg);--fam-ac:var(--f-sand-ac)}
.l1p[data-fam="charge"]{--fam-bg:var(--f-rose-bg);--fam-ac:var(--f-rose-ac)}
.l1p-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fam-ac);color:var(--fam-bg);font-weight:800;font-size:14px;line-height:1}
.l1-actions{margin-top:var(--sp-card)}
@media screen and (max-width:960px){
  .l1-compact .l1-list,.l1-compact .l1-actions{padding-right:0}
}
@media screen and (max-width:760px){
  .l1-list{grid-template-columns:minmax(0,1fr)}
  .l1-actions .btn{width:100%}
}

/* ---------- layers 3 and 4: the essence and one key block first, the rest opens on demand (without the script everything is visible) ---------- */
.fw-ready .layer:not(.is-full) .th-more{display:none}
.fw-ready .layer:not(.is-full) .th-key{grid-column:1 / -1}
.lfull{margin:var(--sp-gap) 0 0}
.lfull-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;font-size:15px}
.lfull-btn::after{content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.layer.is-full .lfull-btn::after{transform:translateY(2px) rotate(225deg)}
@media screen and (max-width:760px){.lfull-btn{width:100%;justify-content:center}}

/* ---------- layer 4 v0.5: task-state and annex tables (27-10-2026); scroll inside the box, the page never moves sideways ---------- */
.th p.tbl-lead{margin:18px 0 10px}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:0 0 4px;border:1px solid var(--line);border-radius:12px;background:rgba(11,16,32,.35)}
.tscroll:focus-visible{outline:2px solid var(--soft);outline-offset:2px}
.tstates{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.tstates.tannex{min-width:860px}
.tstates th{text-align:left;vertical-align:bottom;font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--caption);background:rgba(255,255,255,.055);padding:10px 14px}
.tstates td{padding:11px 14px;border-top:1px solid var(--line-2);vertical-align:top;color:var(--text)}
.tstates td:first-child{font-weight:700;color:#fff}
.tstates td code{font-size:12.5px;padding:2px 7px;border-radius:6px;background:#070b17;border:1px solid rgba(var(--rgb),.3);color:rgb(var(--rgb));white-space:nowrap}
.tstates.tannex td code{white-space:normal;overflow-wrap:anywhere}
.tstates a{color:var(--soft);text-decoration:underline;text-decoration-color:rgba(124,224,255,.4);text-underline-offset:4px}
.tstates a:hover{color:#fff;text-decoration-color:#fff}
@media print{
  :root{color-scheme:light}
  .th-more{display:block!important}
  .lfull,.l1-actions,.fw-hero-rings,.fw-hero-arcs{display:none!important}
  .l1p{background:#fff!important;border:1px solid #bbb}
  .l1-compact .l1-list{padding-right:0}
  html,body{background:#fff!important}
  body{color:#111;font-size:11pt}
  main{overflow:visible}
  .layer .layer-head{padding-right:0;min-height:0}
  .fw-bar,.skip,.fw-hero-bg,.fw-hero-art,.lart,.tbtn,.to-layers,.ch-toggle,.wp-toc,.legend,.layer::before,.shown-btn,.seg,.hero-actions,.inv-actions,.card-actions,.slab-extra{display:none!important}
  .glass::before,.glass::after,.slab-in::before,.link-cap::before,.link-cap::after,.kicker::before{display:none!important}
  .fw-hero,.layer,.layer.alt,.fw-scheme,.fw-why,.fw-invite,.fw-status,.site-foot{background:#fff!important;padding:18pt 0!important;border:0!important;margin:0!important}
  .foot-marks{filter:invert(1) grayscale(1)}
  .wrap{max-width:none;padding:0}
  *{color:#111!important;text-shadow:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .h-display,.layer-title,.wp-h,.ch-title,.wp-sub,.slab h3,.pcard h4,.th h3,.h2,.why-col-h{color:#000!important}
  .h-display{font-size:30pt}
  .fw-h1 .c{color:#008a99!important}
  .layer-big{background:none!important;-webkit-text-fill-color:#999!important;filter:none!important;font-size:60pt}
  .goal::before{background:none!important;-webkit-text-fill-color:#777!important}
  .slab-in,.pcard,.jcard,.th,.km,.chain,.illustration,.tbl-wrap,.tbl tr,.found,.paths,.why-col,.inv-card{background:#fff!important;border-color:#bbb!important}
  .slab .num,.km-list li::before,.plist li::before,.olist li::before,.fsteps li::before,.rules li::before,.mode,.ill-tag,.slab-cta.full,.fw-pill,.status-chip{background:#eee!important;color:#000!important}
  .chain-step,.chips .fw-chip,.fw-chip,.msg li,.kinds li,.fsteps li,.risk li,.tools code,.card-mock,.bridge div,.bridge-out,.duo div,.gate span{background:#fff!important;border-color:#bbb!important}
  .slab,.wp{width:100%!important}
  .wp{display:block}
  .wp-body{max-width:none}
  .fw-hero-grid,.decl-two,.fw-status-grid,.why-grid,.inv-cards,.inv-two{display:block}
  .why-col,.paths,.inv-card{margin-bottom:10pt}
  details.chapter > *,details.why-item > *{display:block}
  details.chapter::details-content,details.why-item::details-content{content-visibility:visible;display:block}
  .chapter[open] .ch-subs{display:none}
  .ch-body{padding-left:0}
  .fw-ready .shown .shown-body{grid-template-rows:1fr!important;visibility:visible!important}
  .fw-ready .prow-lab{position:static!important;width:auto;height:auto;overflow:visible;clip:auto}
  .fw-ready .paths .prow-v{opacity:1!important;visibility:visible!important;transform:none!important;grid-area:auto}
  .pcard,.jcard,.th,.slab,.km-list li,.tbl tr,.fsteps li,.risk li,.illustration,.why-item,.prow,.goal{break-inside:avoid}
  .tbl-wrap,.tbl{break-inside:auto}
  .tbl thead{display:table-header-group}
  .layer{break-before:page}
  .wp-sub,.wp-h,.block-h,.ch-title,.h2{break-after:avoid}
  a{text-decoration:none}
  .refs a{color:#004f7a!important}
  .reveal.pre{opacity:1!important;transform:none!important}
  /* audiences */
  .fd-tabs,.fd-pips{display:none!important}
  .fd-role[hidden]{display:block!important}
  .fd-ready .fd-role > summary{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;color:#000!important}
  .fd-role,.fd-agents{background:#fff!important;border-color:#bbb!important}
  .fd-rows dt{color:#000!important}.fd-rows dd{color:#222!important}
  .fd-btns{display:none}
  .fd-for .fw-chip{background:#fff!important;color:#000!important}
  .fd-role{break-inside:avoid}
  /* nested layers picture: labels stay, picture and leaders go */
  .rings-art,.rings-leaders{display:none!important}
  .rl{background:#fff!important;border-color:#bbb!important;break-inside:avoid}
  .rl-num{background:#eee!important;color:#000!important}
  .rings-labels{gap:8pt}
  .fwm-actions,.fwm-docs .btn{display:none!important}
  .tscroll{overflow:visible;background:#fff!important;border-color:#bbb!important}
  .tstates{min-width:0}
  .tstates th,.tstates td{background:#fff!important;color:#000!important}
  .tstates td code{background:#fff!important;border-color:#bbb!important;color:#000!important}
  .tstates a{color:#000!important}
}