/* The Lab (lab/, lab/ai/, lab/autonomous/, lab/quantum/), reskinned 13 Oct 2026 into the REKA look.
   Paper, white cards, ink text, one orange. "Technical" comes from structure: JetBrains Mono for small data labels,
   units and layer IDs only; 1px rules; plain tables; diagrams in ink and orange. Text never wider than ~68ch.
   Seth Linton appears once, on /lab, inside his own dark panel (his render is dark-ground only).
   14 Oct 2026: the whole of <main> now wears the Blueprint style (dark instrument panel); see the block at the end. */

body.lab{background:var(--white);color:var(--ink)}
.lab main{padding-top:103px}
.lab-w{width:min(1120px,calc(100% - 2*var(--gut)));margin-inline:auto}
.lab section[id]{scroll-margin-top:170px}

/* type */
.lab main h1{font:500 clamp(40px,5.2vw,60px)/1.05 var(--sans);letter-spacing:-.03em;max-width:16ch}
.lab main h2{font:500 clamp(30px,3.4vw,42px)/1.15 var(--sans);letter-spacing:-.02em;max-width:24ch}
.lab main h3{font:600 19px/1.35 var(--sans);letter-spacing:-.01em}
.lab main p{max-width:68ch;line-height:1.7}
.lab .lead{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--ink)}
.lab .intro{margin-top:16px;font-size:17px;color:var(--ink)}
.lab .intro + .intro{margin-top:12px}
.lab .mono,.lab code{font-family:var(--mono);font-size:.86em}
.lab a.tx{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.lab a.tx:hover{color:var(--ink)}
.lab .note{font-size:15px;color:var(--muted);margin-top:16px}

/* buttons */
.lab .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.lab .btn-line{background:transparent;box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
.lab .go{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font:500 15px var(--sans);color:var(--ink);border-bottom:1px solid var(--brand);padding-bottom:2px}
.lab .go:hover{color:var(--brand-text)}

/* sections: one rule between them, nothing else */
.lab .sec{padding:88px 0}
.lab .sec + .sec{border-top:1px solid var(--line)}
.lab .sec-h{margin-bottom:40px}

/* hero */
.lab .hero{padding:56px 0 64px;position:relative}
.lab .hero .lab-w{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.lab .hero .lead{margin-top:20px}
.lab .hero .intro{margin-top:14px}
.lab .hero-img{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--oat)}
.lab .hero-img img{width:100%;height:100%;object-fit:cover}
.lab .hero-img.ph{box-shadow:inset 0 0 0 1px var(--line)}
/* the one blueprint grid: /lab hero only, very faint */
.lab .hero.bp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/32px 32px;
  opacity:.55;-webkit-mask:linear-gradient(180deg,#000,transparent 85%);mask:linear-gradient(180deg,#000,transparent 85%)}
/* key facts */
.lab .facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:8px 0 0;border-top:1px solid var(--line)}
.lab .facts div{padding:18px 20px 0 0}
.lab .facts div + div{padding-left:20px;border-left:1px solid var(--line)}
.lab .facts dt{font:500 12px/1.4 var(--mono);color:var(--muted);letter-spacing:.02em}
.lab .facts dd{margin:6px 0 0;font:500 15px/1.5 var(--sans);color:var(--ink)}
.lab .facts dd b{font:500 22px/1.2 var(--mono);color:var(--ink);display:block;margin-bottom:2px;letter-spacing:-.02em}

/* sticky sub-nav: this page's sections, then the three frontiers */
.lab .subnav{position:sticky;top:103px;z-index:40;background:rgba(247,246,243,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block:1px solid var(--line)}
.lab .subnav .lab-w{display:flex;align-items:center;gap:24px;min-height:52px}
.lab .subnav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.lab .subnav .on-page{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.lab .subnav .on-page::-webkit-scrollbar{display:none}
.lab .subnav a{display:block;white-space:nowrap;font:500 14px/1 var(--sans);padding:9px 10px;border-radius:8px;color:var(--ink)}
.lab .subnav a:hover{background:var(--oat)}
.lab .subnav .on-page a[aria-current="true"]{color:var(--brand-text);box-shadow:inset 0 -2px 0 var(--brand);border-radius:0}
.lab .subnav .fr{flex:none;border-left:1px solid var(--line);padding-left:16px}
.lab .subnav .fr a[aria-current="page"]{background:var(--ink);color:#fff}
.lab .subnav .up{flex:none;font-weight:600}

/* plain 2x2 of ideas, no numbers, no cards */
.lab .ideas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.lab .ideas > div{padding:28px 0;border-top:1px solid var(--line)}
.lab .ideas p{margin-top:10px;color:var(--ink)}
.lab .after{margin-top:32px;font-size:17px}

/* white panel for widgets and diagrams */
.lab .panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px}
.lab .panel + .panel{margin-top:24px}
.lab .panel-h{font:600 19px/1.35 var(--sans)}
.lab .lbl{font:500 12px/1.4 var(--mono);color:var(--muted);letter-spacing:.02em}

/* tables */
.lab .tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6}
.lab .tbl th{text-align:left;font:500 12px/1.4 var(--mono);color:var(--muted);padding:0 16px 12px 0;border-bottom:1px solid var(--ink)}
.lab .tbl td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.lab .tbl td:last-child,.lab .tbl th:last-child{padding-right:0}
.lab .tbl .id{font:500 14px/1.6 var(--mono);color:var(--brand-text);white-space:nowrap;width:56px}
.lab .tbl .nm{font-weight:600;width:28%}
.lab .tbl .tg{font:400 13px/1.6 var(--mono);color:var(--muted);width:26%}
.lab .tbl td p{max-width:none}

/* specification list */
.lab .specs{margin:0;border-top:1px solid var(--ink)}
.lab .specs div{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.lab .specs dt{font:500 13px/1.7 var(--mono);color:var(--muted)}
.lab .specs dd{margin:0;font-size:15px;line-height:1.7}

/* status label */
.lab .st{display:inline-block;font:500 12px/1 var(--mono);padding:6px 8px;border-radius:6px;background:var(--oat);color:var(--ink);white-space:nowrap}
.lab .st.prod{background:var(--brand-tint);color:var(--brand-text)}
.lab .st.ok{background:var(--ink);color:#fff}
.lab .st.mid{background:var(--brand-tint);color:#9A4A00}
.lab .st.no{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}

/* now / near / far */
.lab .hz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:40px}
.lab .hz > div{border-top:2px solid var(--ink);padding-top:16px}
.lab .hz > div:first-child{border-top-color:var(--brand)}
.lab .hz .lbl{display:block;margin-bottom:8px}
.lab .hz p{margin-top:8px;font-size:15px}

/* simple flows (ink boxes joined by orange arrows); wrap to a vertical list on phones */
.lab .flow{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:0}
.lab .flow li{flex:1 1 0;min-width:0;display:flex;align-items:center}
.lab .flow li + li::before{content:"";flex:none;width:28px;height:12px;background:no-repeat center/22px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23FB9800' stroke-width='1.6'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5'/%3E%3C/svg%3E")}
.lab .flow .bx{flex:1;min-width:0;border:1px solid var(--ink);border-radius:12px;background:#fff;padding:14px 14px;height:100%}
.lab .flow .bx b{display:block;font:600 15px/1.3 var(--sans)}
.lab .flow .bx span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.lab .flow .bx.end{background:var(--ink);color:#fff;border-color:var(--ink)}
.lab .flow .bx.end span{color:#D9D7D2}
.lab .flow .bx.start{background:var(--oat);border-color:var(--oat)}

/* /lab: four filters funnel */
.lab .funnel .bx.gate{border-color:var(--brand)}
.lab .funnel-note{margin-top:14px;font:500 13px/1.5 var(--mono);color:var(--muted)}

/* /lab: method */
.lab .ety{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;font:500 15px var(--mono)}
.lab .ety i{font-style:normal;color:var(--brand-text)}
.lab .ety b{color:var(--brand-text);font-weight:700}
.lab .principles{margin-top:40px}
.lab .principle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;padding:32px 0;border-top:1px solid var(--line)}
.lab .principle p{margin-top:10px}
.lab blockquote{margin:0;padding:4px 0 4px 22px;border-left:3px solid var(--brand);font-size:16px;line-height:1.7;color:var(--ink);max-width:62ch;align-self:start}

/* /lab: frontier row */
.lab .fronts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lab .front{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:border-color .2s}
.lab .front:hover{border-color:var(--ink)}
.lab .front h3{font-size:22px}
.lab .front .div{margin-top:4px;font-size:14px;color:var(--muted)}
.lab .front p{margin-top:14px;font-size:15px}
.lab .front q{display:block;margin-top:16px;padding-left:14px;border-left:2px solid var(--brand);font-size:15px;line-height:1.6;quotes:"\201C" "\201D"}
.lab .front .mini{margin:20px 0 0;border-top:1px solid var(--line)}
.lab .front .mini div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.5}
.lab .front .mini dt{font:500 12px/1.6 var(--mono);color:var(--muted)}
.lab .front .mini dd{margin:0}
.lab .front .go{margin-top:auto;padding-top:20px;border:0;align-self:flex-start}
.lab .front .go span{border-bottom:1px solid var(--brand)}

/* /lab: five questions + Seth */
.lab .qhead{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:center;margin-bottom:40px}
.lab .seth{background:#07090F;border-radius:20px;padding:28px 28px 24px;color:#E9EDF3}
.lab .seth img{width:240px;height:240px;margin:0 auto;display:block}
.lab .seth figcaption{margin-top:16px;border-top:1px solid rgba(255,255,255,.14);padding-top:14px}
.lab .seth .who{font:500 12px/1.5 var(--mono);color:#B9C2D0}
.lab .seth .who b{color:#fff;font-weight:500}
.lab .seth .line{margin-top:6px;font:500 17px/1.5 var(--sans);color:#fff}
.lab .checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.lab .checks li{position:relative;padding:24px 0 24px 36px;border-top:1px solid var(--line)}
.lab .checks li::before{content:"";position:absolute;left:0;top:27px;width:18px;height:18px;border:1.5px solid var(--ink);border-radius:4px;background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23E65D01' stroke-width='2'%3E%3Cpath d='M2 6.5l2.6 2.5L10 3'/%3E%3C/svg%3E")}
.lab .checks p{margin-top:8px;font-size:15.5px}

/* /lab: experiment record */
.lab .pipe{display:grid;gap:10px;margin-top:24px;max-width:520px}
.lab .pipe div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;font:500 14px var(--mono)}
.lab .pipe i{height:1px;background:var(--brand);position:relative}
.lab .pipe i::after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--brand);border-right:0}
.lab .pipe .wait i{background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 9px)}
.lab .pipe .wait i::after{border-left-color:var(--line-2)}
.lab .pipe .p{color:var(--brand-text)}
.lab .rec .tbl td:nth-child(2){width:24%}
.lab .rec h3{font-size:17px}
.lab .rec .dis{display:block;margin-top:4px;font:400 12.5px/1.5 var(--mono);color:var(--muted)}
.lab .rec .st{margin-top:8px}
.lab .rec .to{display:block;margin-top:8px;font:500 13px var(--mono);color:var(--brand-text)}

/* AI: architecture router */
.lab .rr{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px}
.lab .rr-g{display:grid;gap:22px}
.lab .rr-g .lbl{display:block;margin-bottom:8px}
.lab .opts{display:flex;flex-wrap:wrap;gap:8px}
.lab .opts button{border:1px solid var(--line-2);background:#fff;border-radius:10px;padding:9px 14px;font:500 14px/1.2 var(--sans);cursor:pointer;transition:background .15s,border-color .15s}
.lab .opts button:hover{border-color:var(--ink)}
.lab .opts button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.lab .rr-out{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;align-self:start}
.lab .rr-a{margin-top:8px;font:600 22px/1.3 var(--sans)}
.lab .rr-w{margin-top:10px;font-size:15px}
.lab .rr-k{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.lab .rr-k span{font:400 12.5px/1 var(--mono);padding:7px 9px;border-radius:6px;background:#fff;border:1px solid var(--line)}
.lab .rr-f{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;font-weight:500}
.lab .rr-f::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--dot,var(--ink));vertical-align:1px}

/* lifecycle / cycle diagram (SVG) */
.lab .cyc{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:center}
.lab .cyc svg{width:100%;height:auto;display:block}
.lab .cyc svg text{font-family:var(--sans)}
.lab .cyc .tbl td{padding:11px 16px 11px 0}

/* Autonomous: ODD slider */
.lab .odd{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:start}
.lab .odd svg{width:100%;height:auto;display:block}
.lab .odd input[type=range]{-webkit-appearance:none;appearance:none;width:calc(90.6% + 22px);margin:18px 0 0 calc(4.7% - 11px);height:28px;background:transparent;cursor:pointer}
.lab .odd input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--line-2)}
.lab .odd input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-2)}
.lab .odd input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 1px var(--ink)}
.lab .odd input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 0 0 1px var(--ink)}
.lab .odd-ticks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:6px;font:500 11.5px/1.35 var(--mono);color:var(--muted)}
.lab .odd-ticks span{text-align:center}
.lab .odd-ticks span:first-child{text-align:left}.lab .odd-ticks span:last-child{text-align:right}
.lab .odd-ticks span.on{color:var(--ink)}
.lab .odd-read{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px}
.lab .odd-lvl{margin-top:8px;font:600 22px/1.3 var(--sans)}
.lab .odd-x{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.lab .odd-xv{font:500 34px/1 var(--mono);letter-spacing:-.02em}
.lab .odd-x small{font-size:13.5px;color:var(--muted)}
.lab .odd-read .st{margin-top:14px}
.lab .odd-v{margin-top:14px;font-size:15px}

/* Autonomous: boundary rings */
.lab .bnd{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;align-items:center}
.lab .bnd>svg{width:100%;height:auto;display:block}
.lab .bnd:has(>.dgm){grid-template-columns:minmax(0,440px) minmax(0,1fr)}
.lab .bnd .car{transition:transform .5s var(--ease)}
.lab .bnd-s{display:grid;gap:10px}
.lab .bnd-s button{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:border-color .15s}
.lab .bnd-s button:hover{border-color:var(--ink)}
.lab .bnd-s button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 3px 0 0 var(--brand)}
.lab .bnd-s b{display:block;font:600 16px/1.35 var(--sans);margin-top:8px}
.lab .bnd-s span.d{display:block;margin-top:6px;font-size:14.5px;line-height:1.6;color:var(--ink)}

/* Autonomous: timeline */
.lab .tl{list-style:none;margin:0;padding:0;border-left:1px solid var(--ink);margin-left:6px}
.lab .tl li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:0 0 32px 28px}
.lab .tl li:last-child{padding-bottom:0}
.lab .tl li::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--white);border:2px solid var(--brand)}
.lab .tl .y{font:500 18px/1.4 var(--mono);color:var(--brand-text)}
.lab .tl p{margin-top:6px;font-size:15.5px}

/* Quantum: honest comparison matrix */
.lab .qm{width:100%;border-collapse:collapse;font-size:15px}
.lab .qm th{text-align:left;font:500 12px/1.4 var(--mono);color:var(--muted);padding:0 12px 12px 0;border-bottom:1px solid var(--ink)}
.lab .qm td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.lab .qm td:first-child{padding-right:16px}
.lab .qm tr.on td{background:var(--white)}
.lab .qm button.row{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 0;font:600 15px/1.35 var(--sans);cursor:pointer;color:var(--ink)}
.lab .qm button.row::after{content:" \2192";color:var(--brand-text);opacity:.3;transition:opacity .15s}
.lab .qm tr.on button.row::after,.lab .qm button.row:hover::after{opacity:1}
.lab .qm tr.on td:first-child{box-shadow:inset 3px 0 0 var(--brand);padding-left:12px}
.lab .qm-v{margin-top:20px;padding:20px 22px;background:var(--white);border:1px solid var(--line);border-radius:14px;font-size:15.5px;line-height:1.7}
.lab .qm-v p{max-width:72ch}
.lab .qm-key{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:13.5px;color:var(--muted)}
.lab .qm-key span{display:inline-flex;align-items:center;gap:6px}

/* Quantum: hero diagram */
.lab .qd{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px}
.lab .qd svg{width:100%;height:auto;display:block}
.lab .qd svg text{font-family:var(--mono)}
.lab .qd figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}

/* connects-to link */
.lab .cx{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:40px;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:16px}
.lab .cx:hover{border-color:var(--ink)}
.lab .cx b{font:600 17px/1.4 var(--sans)}
.lab .cx p{margin-top:4px;font-size:15px}
.lab .cx .ar{font-size:20px;color:var(--brand-text)}

/* end of a frontier page: the other two frontiers and the Lab */
.lab .nextfr{padding:0 0 88px}
.lab .nextfr .lab-w{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid var(--line);padding-top:40px}
.lab .nextfr a{display:block;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:16px}
.lab .nextfr a:hover{border-color:var(--ink)}
.lab .nextfr b{font:600 17px/1.35 var(--sans)}
.lab .nextfr b::after{content:" \2192";color:var(--brand-text)}
.lab .nextfr span{display:block;margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* placeholders on these pages: sized to their ratio */
.lab .ph[data-ratio="4:3"]{aspect-ratio:4/3}
.lab .ph[data-ratio="16:9"]{aspect-ratio:16/9}

/* responsive */
@media (max-width:1000px){
  .lab .hero .lab-w{grid-template-columns:1fr;gap:32px}
  .lab .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab .facts div:nth-child(3){padding-left:0;border-left:0}
  .lab .facts div{padding-bottom:16px}
  .lab .fronts{grid-template-columns:1fr}
  .lab .qhead{grid-template-columns:1fr;gap:32px}
  .lab .seth{max-width:380px}
  .lab .rr,.lab .odd,.lab .bnd,.lab .bnd:has(>.dgm),.lab .cyc{grid-template-columns:1fr}
  .lab .bnd>svg,.lab .cyc svg{max-width:360px}
  .lab .subnav .fr{display:none}
  .lab .flow{flex-direction:column}
  .lab .flow li{flex-direction:column;align-items:stretch}
  .lab .flow li + li::before{width:100%;height:26px;background-size:12px 22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none' stroke='%23FB9800' stroke-width='1.6'%3E%3Cpath d='M6 0v20M1 15l5 5 5-5'/%3E%3C/svg%3E")}
}
@media (max-width:760px){
  .lab .sec{padding:64px 0}
  .lab .sec-h{margin-bottom:28px}
  .lab .ideas,.lab .checks,.lab .principle,.lab .hz{grid-template-columns:1fr}
  .lab .ideas > div{padding:22px 0}
  .lab .hz{gap:24px}
  .lab .panel{padding:20px;border-radius:16px}
  .lab .specs div{grid-template-columns:1fr;gap:4px}
  .lab .tl li{grid-template-columns:1fr;gap:2px}
  /* tables become stacked rows */
  .lab .tbl.stack thead{display:none}
  .lab .tbl.stack,.lab .tbl.stack tbody,.lab .tbl.stack tr,.lab .tbl.stack td{display:block;width:auto}
  .lab .tbl.stack tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .lab .tbl.stack tr:first-child{border-top:1px solid var(--ink)}
  .lab .tbl.stack td{border:0;padding:3px 0}
  .lab .rec .tbl.stack td:nth-child(2){width:auto}
  .lab .tbl.stack td[data-h]{padding-top:10px}
  .lab .tbl.stack td[data-h]::before{content:attr(data-h);display:block;font:500 12px/1.5 var(--mono);color:var(--muted);margin-bottom:2px}
  .lab .qmx{padding:16px 12px}
  .lab .qm{font-size:13.5px;table-layout:fixed}
  .lab .qm th:first-child{width:34%}
  .lab .qm button.row::after{display:none}
  .lab .qm tr.on td:first-child{padding-left:8px}
  .lab .qm th{font-size:10.5px;padding-right:6px}
  .lab .qm td{padding-right:6px}
  .lab .qm button.row{font-size:13.5px}
  .lab .qm .st{font-size:10.5px;padding:5px 5px;white-space:normal;text-align:center}
  .lab .cx{grid-template-columns:1fr}
  .lab .nextfr{padding-bottom:64px}
  .lab .nextfr .lab-w{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.lab .bnd .car{transition:none}}

/* Colour with meaning (14 Oct 2026). Each frontier wears its REKA division's colour (base.css tokens): AI & LLMs
   Heuristik blue, Autonomous Driving Kinetik teal, Quantum Esoterik plum, and the Lab's own research method Harmonik
   purple. A frontier page sets data-tone on <main>, so its accents (rules, IDs, buttons, diagram strokes) follow it;
   links to another frontier wear that frontier's colour. Tinted cards lift on hover; lists rise in as they scroll in
   (data-reveal, motion.js). Status labels (ok / mid / no) keep their own meaning and are not recoloured. */

/* sub-nav: the frontier links in their own colours, this page's marker in its frontier's colour */
.lab .subnav .fr a{transition:background .2s,color .2s}
.lab .subnav .fr a[data-tone]:hover{background:var(--t-bg);color:var(--t-ink)}
.lab main[data-tone] .subnav .fr a[aria-current="page"]{background:var(--t-btn);color:var(--t-btn-fg)}
.lab main[data-tone] .subnav .on-page a[aria-current="true"]{color:var(--t-ink);box-shadow:inset 0 -2px 0 var(--t)}

/* /lab: the frontier cards, tinted in their division's colour, lift and deepen on hover */
.lab .front[data-tone]{background:var(--t-bg);border-color:transparent;transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.lab .front[data-tone]:hover{background:var(--t-2);border-color:transparent;transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--t) 70%,transparent)}
.lab .front[data-tone] .div{color:var(--t-ink);font-weight:500}
.lab .front[data-tone] q{border-left-color:var(--t)}
.lab .front[data-tone] .mini{border-top-color:color-mix(in srgb,var(--t) 28%,transparent)}
.lab .front[data-tone] .mini div{border-bottom-color:color-mix(in srgb,var(--t) 28%,transparent)}
.lab .front[data-tone] .mini dt{color:var(--t-ink)}
.lab .front[data-tone] .go{color:var(--t-ink)}
.lab .front[data-tone] .go span{border-bottom-color:var(--t)}

/* the four filters: the Lab's research method, so Harmonik; the boxes stay white on the tint */
.lab .panel.tone-panel .flow .bx{background:#fff;border-color:transparent}
.lab .panel.tone-panel .flow .bx.start{background:rgba(255,255,255,.55)}
.lab .panel.tone-panel .flow .bx.end{background:var(--t-btn);color:var(--t-btn-fg)}
.lab .panel.tone-panel .flow .bx.end span{color:rgba(255,255,255,.82)}
.lab .panel.tone-panel .funnel-note{color:var(--t-ink)}
.lab [data-tone] .flow .bx.gate{border-color:var(--t)!important}
/* flow arrows take the colour of the part they sit in */
.lab [data-tone] .flow li+li::before{background:var(--t);-webkit-mask:no-repeat center/22px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5'/%3E%3C/svg%3E");mask:no-repeat center/22px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 6h20M15 1l5 5-5 5'/%3E%3C/svg%3E")}
@media (max-width:1000px){.lab [data-tone] .flow li+li::before{-webkit-mask:no-repeat center/12px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 0v20M1 15l5 5 5-5'/%3E%3C/svg%3E");mask:no-repeat center/12px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 22' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M6 0v20M1 15l5 5 5-5'/%3E%3C/svg%3E")}}

/* /lab record: an experiment that graduated wears the colour of the division it went to */
.lab .pipe [data-tone] i,.lab .pipe div[data-tone] i{background:var(--t)}
.lab .pipe div[data-tone] i::after{border-left-color:var(--t)}
.lab .pipe div[data-tone] .p{color:var(--t-ink)}
.lab .rec tr:not([data-tone]) .id{color:var(--ink)}
.lab .rec tr[data-tone] .id,.lab .rec tr[data-tone] .to{color:var(--t-ink)}
.lab .rec tr[data-tone] .st.prod{background:var(--t-bg);color:var(--t-ink)}
.lab main:not([data-tone]) .rec tr[data-tone] td:first-child{box-shadow:inset 3px 0 0 var(--t)}
.lab main:not([data-tone]) .rec tr[data-tone] td:first-child{padding-left:12px}
.lab .tbl tbody tr td{transition:background .2s}
.lab .tbl tbody tr[data-tone]:hover td,.lab main[data-tone] .tbl tbody tr:hover td{background:color-mix(in srgb,var(--t-bg) 70%,#fff)}

/* frontier pages: accents in the frontier's colour */
.lab main[data-tone] a.tx{color:var(--t-ink)}
.lab main[data-tone] a.tx:hover{color:var(--ink)}
.lab main[data-tone] .go{border-bottom-color:var(--t)}
.lab main[data-tone] .go:hover{color:var(--t-ink)}
.lab main[data-tone] .tbl .id{color:var(--t-ink)}
.lab main[data-tone] .st.prod{background:var(--t-bg);color:var(--t-ink)}
.lab main[data-tone] .rec .to{color:var(--t-ink)}
.lab main[data-tone] .ideas>div{border-top-color:color-mix(in srgb,var(--t) 35%,transparent)}
.lab main[data-tone] .ideas h3{color:var(--t-ink)}
.lab main[data-tone] .hz>div{border-top-color:color-mix(in srgb,var(--t) 35%,transparent)}
.lab main[data-tone] .hz>div:first-child{border-top-color:var(--t)}
.lab main[data-tone] .hz .lbl{color:var(--t-ink)}
.lab main[data-tone] .specs{border-top-color:var(--t)}
.lab main[data-tone] svg [stroke="#FB9800"]{stroke:var(--t)}
.lab main[data-tone] svg [fill="#FB9800"]{fill:var(--t)}
.lab main[data-tone] svg [fill="#FBF4EA"]{fill:var(--t-bg)}
/* AI: the constraint router */
.lab main[data-tone] .opts button:hover{border-color:var(--t)}
.lab main[data-tone] .opts button[aria-pressed="true"]{background:var(--t-btn);border-color:var(--t-btn);color:var(--t-btn-fg)}
.lab main[data-tone] .rr-out{background:var(--t-bg);border-color:transparent}
.lab main[data-tone] .rr-out .lbl{color:var(--t-ink)}
/* Autonomous: the slider, the zones and the record */
.lab main[data-tone] .odd input[type=range]::-webkit-slider-thumb{background:var(--t)}
.lab main[data-tone] .odd input[type=range]::-moz-range-thumb{background:var(--t)}
.lab main[data-tone] .odd-ticks span.on{color:var(--t-ink)}
.lab main[data-tone] .odd-read{background:var(--t-bg);border-color:transparent}
.lab main[data-tone] .bnd-s button{transition:border-color .15s,background .2s,box-shadow .2s}
.lab main[data-tone] .bnd-s button:hover{border-color:var(--t)}
.lab main[data-tone] .bnd-s button[aria-pressed="true"]{border-color:var(--t);background:var(--t-bg);box-shadow:inset 3px 0 0 var(--t)}
.lab main[data-tone] .tl{border-left-color:var(--t)}
.lab main[data-tone] .tl li::before{border-color:var(--t)}
.lab main[data-tone] .tl .y{color:var(--t-ink)}
/* Quantum: the honest comparison */
.lab main[data-tone] .qm tr.on td:first-child{box-shadow:inset 3px 0 0 var(--t)}
.lab main[data-tone] .qm tr.on td{background:var(--t-bg)}
.lab main[data-tone] .qm button.row::after{color:var(--t-ink)}
.lab main[data-tone] .qm button.row:hover{color:var(--t-ink)}
.lab main[data-tone] .qm-v{background:var(--t-bg);border-color:transparent}

/* links to the other frontiers (and the Lab, Harmonik research): tinted cards that lift on hover */
.lab .nextfr a[data-tone],.lab .cx[data-tone]{background:var(--t-bg);border-color:transparent;transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.lab .nextfr a[data-tone]:hover,.lab .cx[data-tone]:hover{background:var(--t-2);border-color:transparent;transform:translateY(-4px);box-shadow:0 18px 40px -22px color-mix(in srgb,var(--t) 70%,transparent)}
.lab .nextfr a[data-tone] b::after,.lab .cx[data-tone] .ar{color:var(--t-ink)}
.lab .cx[data-tone] .ar{transition:transform .3s var(--ease)}
.lab .cx[data-tone]:hover .ar{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.lab .front[data-tone],.lab .nextfr a[data-tone],.lab .cx[data-tone],.lab .cx[data-tone] .ar{transition:none}.lab .front[data-tone]:hover,.lab .nextfr a[data-tone]:hover,.lab .cx[data-tone]:hover,.lab .cx[data-tone]:hover .ar{transform:none}}

/* Section grammar, Lab edition (14 Oct 2026, phase 2). The Lab keeps its technical look (left-set headings, mono
   labels, experiment IDs, the record table, the frontier sub-nav) and takes the site's grammar where it reads better:
   no hairlines between sections, groups of items as white cards in a tray, and pictures beside the words.
   A frontier page tints one or two trays in its division's colour; the rest stay oat. */
.lab .sec{padding:80px 0 0}
.lab .sec + .sec{border-top:0}
.lab main>.sec:last-of-type{padding-bottom:80px}
.lab .sec-h>.lead:first-child{margin-top:0}
.lab .tray>.panel,.lab .tray .panel{border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:20px}
.lab .tray>*+*{margin-top:16px}
.lab .tray>.after{margin-top:24px}
.lab .tray .note{margin-top:14px}
/* the four filters panel becomes a tray in Harmonik */
.lab .panel.tray{border:0;box-shadow:none;border-radius:40px;padding:48px}

/* words one side, a picture the other; .flip puts the picture first */
.lab .lx-split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center;margin-bottom:40px}
.lab .lx-split>.sec-h,.lab .lx-split>.qhead{margin-bottom:0}
.lab .lx-split.flip{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.lab .lx-split.flip>.lx-pic{order:-1}
.lab .lx-pic{margin:0;border-radius:24px;overflow:hidden;background:var(--t-bg,var(--oat))}
.lab .lx-pic .ph{width:100%;aspect-ratio:4/3}
.lab .lx-pic.wide .ph{aspect-ratio:16/9}
/* a picture inside a tray, beside a short run of words */
.lab .lx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.lab .lx-row>.lx-pic{border-radius:20px}
.lab .lx-row>.lx-pic .ph{height:100%;min-height:240px;aspect-ratio:auto}
.lab .lx-row>.card{justify-content:center;padding:32px}
.lab .lx-row>.card p{font-size:17px;line-height:1.7;color:var(--ink)}

/* white cards in a tray (the four filters, approach ideas, Now / Near / Far) */
.lab .ideas{gap:16px}
.lab .ideas>div{background:#fff;border-top:0;border-radius:20px;padding:26px 28px;box-shadow:inset 0 0 0 1px var(--line)}
.lab .tray[data-tone] .ideas h3{color:var(--t-ink)}
.lab .ideas p{font-size:15.5px}
.lab .hz{gap:16px;margin-top:0}
.lab .hz>div{background:#fff;border-top:0;border-radius:20px;padding:24px 26px;box-shadow:inset 0 0 0 1px var(--line)}
.lab .hz>div:first-child .lbl{color:var(--t-ink,var(--brand-text))}
.lab .tray>.hz{margin-top:16px}

/* method: each principle a white card, the proof beside it */
.lab .principles{display:grid;gap:16px;margin-top:0}
.lab .principle{background:#fff;border-top:0;border-radius:20px;padding:30px 32px;box-shadow:inset 0 0 0 1px var(--line)}

/* five questions: white cards, three then two */
.lab .checks{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.lab .checks li{grid-column:span 2;background:#fff;border-top:0;border-radius:20px;padding:26px 26px 26px 62px;box-shadow:inset 0 0 0 1px var(--line)}
.lab .checks li:nth-child(n+4){grid-column:span 3}
.lab .checks li::before{left:26px;top:30px}

/* the frontier cards: white, the picture frame in the division's colour, the name in it too */
.lab .fronts{gap:16px}
.lab .front[data-tone]{background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line);padding:24px 26px 26px}
.lab .front[data-tone]:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--t),0 16px 32px -24px color-mix(in srgb,var(--t) 80%,transparent);transform:translateY(-3px)}
.lab .front .frame{display:block;margin:-12px -14px 20px;border-radius:14px;overflow:hidden;background:var(--t-bg)}
.lab .front .frame .ph{width:100%;aspect-ratio:4/3}
.lab .front[data-tone] h3{color:var(--t-ink)}

/* the record and the stacks: the table sits on a white card in the tray */
.lab .tray .panel>.tbl:first-child thead th{padding-top:0}
.lab .tray .cyc{background:#fff;border-radius:20px;padding:32px;box-shadow:inset 0 0 0 1px var(--line)}
.lab .tray .specs{background:#fff;border-radius:20px;padding:8px 32px;box-shadow:inset 0 0 0 1px var(--line);border-top:0}
.lab .tray .specs div:last-child{border-bottom:0}
.lab .tray .tl{background:#fff;border-radius:20px;padding:32px 32px 32px 0;box-shadow:inset 0 0 0 1px var(--line);border-left:0;margin-left:0}
.lab .tray .tl li{margin-left:38px;border-left:1px solid var(--t,var(--ink));padding-bottom:28px}
.lab .tray .tl li:last-child{padding-bottom:0;border-left-color:transparent}
.lab .tray .tl li::before{left:-6px}
.lab .tray>.go{margin-top:24px}

/* links on: white cards, the frontier's name in its colour */
.lab .cx[data-tone]{background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line);margin-top:16px}
.lab .cx[data-tone]:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--t),0 16px 32px -24px color-mix(in srgb,var(--t) 80%,transparent);transform:translateY(-3px)}
.lab .cx[data-tone] b{color:var(--t-ink)}
.lab .nextfr{padding:80px 0}
.lab .nextfr .lab-w{border-top:0;padding:48px;background:var(--oat);border-radius:40px}
.lab .nextfr a[data-tone]{background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:20px;padding:22px 24px}
.lab .nextfr a[data-tone]:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--t),0 16px 32px -24px color-mix(in srgb,var(--t) 80%,transparent);transform:translateY(-3px)}
.lab .nextfr a[data-tone] b{color:var(--t-ink)}

@media (max-width:1000px){
  .lab .lx-split,.lab .lx-split.flip{grid-template-columns:1fr;gap:28px}
  .lab .lx-split.flip>.lx-pic{order:0}
  .lab .lx-pic .ph{aspect-ratio:16/10}
  .lab .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab .checks li,.lab .checks li:nth-child(n+4){grid-column:auto}
  .lab .lx-row{grid-template-columns:1fr}
  .lab .lx-row>.lx-pic .ph{aspect-ratio:16/10;min-height:0;height:auto}
}
@media (max-width:760px){
  .lab .sec{padding:56px 0 0}
  .lab main>.sec:last-of-type{padding-bottom:56px}
  .lab .panel.tray{padding:24px;border-radius:28px}
  .lab .lx-split{margin-bottom:24px}
  .lab .lx-pic{border-radius:20px}
  .lab .lx-pic .ph{aspect-ratio:4/3}
  .lab .ideas>div{padding:22px 22px}
  .lab .principle{padding:22px}
  .lab .checks{grid-template-columns:1fr}
  .lab .checks li{padding:22px 22px 22px 56px}
  .lab .checks li::before{left:22px;top:26px}
  .lab .front[data-tone]{padding:20px}
  .lab .tray .panel{padding:20px}
  .lab .tray .cyc{padding:20px}
  .lab .tray .specs{padding:4px 20px}
  .lab .tray .tl{padding:22px 20px 22px 0}
  .lab .tray .tl li{margin-left:26px;padding-left:22px}
  .lab .lx-row>.card{padding:22px}
  .lab .nextfr{padding:56px 0}
  .lab .nextfr .lab-w{padding:24px;border-radius:28px}
  .lab .tbl.stack tr:first-child{border-top:0}
  .lab .tray .tbl.stack tr:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.lab .front[data-tone]:hover,.lab .cx[data-tone]:hover,.lab .nextfr a[data-tone]:hover{transform:none}}
/* the experiment record reads widest with a slimmer tray edge */
.lab .rec .tray{padding:24px}
.lab .rec .tray .panel{padding:28px 28px 12px}
.lab .rec .tray>.go{margin:20px 0 4px 8px}
@media (max-width:760px){.lab .rec .tray{padding:16px}.lab .rec .tray .panel{padding:8px 18px}}
/* a wide picture across the top of a tray */
.lab .lx-pic.band{border-radius:20px;margin-bottom:16px}
.lab .lx-pic.band .ph{aspect-ratio:21/9}
@media (max-width:760px){.lab .lx-pic.band .ph{aspect-ratio:4/3}}
.lab .nextfr{padding:16px 0 80px}
.lab .tray .cyc{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px}
@media (max-width:1000px){.lab .tray .cyc{grid-template-columns:1fr}}
@media (max-width:760px){.lab .nextfr{padding:16px 0 56px}}
/* the stack tables, like the record, read widest with a slimmer tray edge */
.lab #stack .tray{padding:24px}
@media (max-width:760px){.lab #stack .tray{padding:16px}}
/* a tall picture beside a column of cards, inside one tray */
.lab .lx-side{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;align-items:stretch}
.lab .tray.lx-side>*+*{margin-top:0}
.lab .lx-side>.lx-pic{border-radius:20px}
.lab .lx-side>.lx-pic .ph{height:100%;aspect-ratio:auto;min-height:420px}
.lab .lx-side .ideas{grid-template-columns:1fr}
@media (max-width:1000px){.lab .lx-side{grid-template-columns:1fr}.lab .lx-side>.lx-pic .ph{min-height:0;height:auto;aspect-ratio:16/10}}
@media (max-width:760px){.lab .lx-side>.lx-pic .ph{aspect-ratio:4/3}}
.lab main>.sec:has(+.nextfr){padding-bottom:0}

/* Phones (owner, 14 Oct 2026: "fix the phone gaps too"). On a phone everything stacks, so the Lab's long runs of
   cards ran two to three screens without a picture. Trays and cards take a slimmer edge so the words run wider and
   shorter; a picture can sit in the middle of a stack (.lx-mid, ordered among the cards, or moved there by realm.js
   from data-phone-after); and a long record shows its names first with a "Show all" button (realm.js adds the
   collapsed class, so without the script everything shows). */
@media (max-width:760px){
  .lab .tray,.lab .panel.tray{padding:16px}
  .lab .ideas>div{padding:20px 18px}
  .lab .principle{padding:20px 18px;gap:18px}
  .lab blockquote{font-size:15px;padding-left:16px}
  .lab .checks li{padding:20px 18px 20px 50px}
  .lab .checks li::before{left:18px;top:24px}
  .lab .front[data-tone]{padding:16px 18px 20px}
  .lab .front .frame{margin:-6px -8px 18px}
  .lab .tray .panel{padding:18px}
  .lab .hz>div{padding:20px 18px}
  .lab .lx-row>.card{padding:20px 18px}
  .lab .tray .specs{padding:4px 18px}
  .lab .tray .cyc{padding:18px}
  .lab .nextfr .lab-w{padding:16px}
}
/* the record, collapsed on phones: every experiment keeps its row (ID, name, status); the question and where it
   stands open with the button */
.lab .rec-more{display:none}
@media (max-width:760px){
  .lab .rec-more{display:inline-flex;margin-top:12px}
  .lab .tbl.is-short td[data-h]{display:none}
  .lab .tbl.stack.is-short tr{padding:12px 0}
  .lab .tbl.stack.is-short td{padding:2px 0}
  .lab .tbl.stack.is-short td:nth-child(2){display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
  .lab .tbl.stack.is-short td:nth-child(2) h3{flex:1 1 100%}
  .lab .tbl.stack.is-short .st{margin-top:0}
}
/* a picture that sits among the cards of a stack: beside them on a desktop, between them on a phone */
.lab .lx-mid{margin:0;border-radius:20px;overflow:hidden}
.lab .lx-mid .ph{width:100%;height:100%;min-height:240px;aspect-ratio:auto}
/* the four filters: two by two, the picture standing beside them */
.lab .ideas:has(>.lx-mid){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.86fr)}
.lab .ideas>.lx-mid{grid-column:3;grid-row:1/3;padding:0;box-shadow:none}
/* five questions: three, then two and the picture */
.lab .checks li.lx-mid{grid-column:span 2;padding:0;background:none;box-shadow:none}
.lab .checks:has(>.lx-mid) li:nth-child(n+4){grid-column:span 2}
.lab .checks li.lx-mid::before{content:none}
.lab .checks li.lx-mid .lx-pic{height:100%;border-radius:20px}
@media (max-width:1000px){
  .lab .ideas:has(>.lx-mid){grid-template-columns:repeat(2,minmax(0,1fr))}
  .lab .ideas>.lx-mid{grid-column:1/-1;grid-row:auto}
  .lab .ideas>.lx-mid .ph,.lab .checks li.lx-mid .ph{min-height:0;height:auto;aspect-ratio:16/10}
  .lab .checks:has(>.lx-mid) li:nth-child(n+4){grid-column:auto}
  .lab .checks li.lx-mid{grid-column:1/-1}
}
@media (max-width:760px){
  .lab .ideas:has(>.lx-mid){grid-template-columns:minmax(0,1fr)}
  .lab .ideas>.lx-mid .ph,.lab .checks li.lx-mid .ph{aspect-ratio:4/3}
  /* the question picture moves between the cards, after the third question */
  .lab .checks li.lx-mid{order:1}.lab .checks li:nth-child(n+4):not(.lx-mid){order:2}
  /* flow steps read as one short line each */
  .lab .flow .bx{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding:10px 14px}
  .lab .flow .bx span{margin-top:0}
  .lab .flow li+li::before{height:20px}
}
@media (max-width:760px){
  /* a picture moved among the cards keeps a card's corners and a sensible height */
  .lab .lx-pic.is-moved{border-radius:20px}
  .lab .lx-pic.is-moved .ph{height:auto;min-height:0;aspect-ratio:4/3}
  .lab .lx-row>.card .after{margin-top:0}
  /* stacked tables: the ID sits beside the name, not on a line of its own */
  .lab .tbl.stack tr:has(>td.id){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline}
  .lab .tbl.stack tr:has(>td.id)>td{grid-column:1/-1}
  .lab .tbl.stack tr:has(>td.id)>td.id{grid-column:1;width:auto}
  .lab .tbl.stack tr:has(>td.id)>td.id+td{grid-column:2}
  /* the constraint router: tighter buttons */
  .lab .rr{gap:20px}.lab .rr-g{gap:16px}
  .lab .opts{gap:6px}.lab .opts button{padding:8px 12px}
  .lab .rr-out{padding:18px}
}
/* Autonomous record: a picture beside the timeline; on a phone it follows the timeline, between it and Now / Near / Far */
.lab .lx-tl>.tl{align-self:start}
@media (max-width:760px){.lab .lx-tl>.lx-pic{order:2}}
@media (max-width:760px){
  /* stacked product tables: the family sits beside the product's name */
  .lab .tbl.stack tr:has(>td.nm+td.tg):not(:has(>td.id)){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
  .lab .tbl.stack tr:has(>td.nm+td.tg):not(:has(>td.id))>td{flex:1 1 100%}
  .lab .tbl.stack tr:has(>td.nm+td.tg):not(:has(>td.id))>td.nm,.lab .tbl.stack tr:has(>td.nm+td.tg):not(:has(>td.id))>td.tg{flex:0 1 auto}
}
@media (max-width:760px){
  /* the honest comparison fits a phone: a slimmer card edge, and long words break with a hyphen, never past their cell */
  .lab #try .tray:has(>.qmx){padding:10px}
  .lab .tray .panel.qmx{padding:14px 6px}
  .lab .qm td:first-child{padding-right:6px}
  .lab .qm td{padding-right:4px}
  .lab .qm button.row{font-size:13px}
  .lab .qm button.row,.lab .qm .st{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .lab .qm .st{padding:5px 3px}
}
/* phones: the operating-domain diagram runs to the panel edges, so its words stay readable */
@media (max-width:760px){.lab .tray .panel.bnd>.dgm{margin-inline:-18px}}

/* ==========================================================================================================
   Blueprint (owner, 14 Oct 2026: special pages get their own style; the Lab is "Blueprint").
   The brand kit's instrument-panel look across the whole of <main>, not just the diagram plates: the void
   #07090F with a 20px dot grid, dark cards #11151C with #2A303A lines, mono labels for IDs and figures, HUD
   corner brackets (the frontier's accent, or orange on /lab, at 40%) on the key panels, and each frontier's
   light accent (the .dgm.dark accents in diagram.css). The light header card and the light footer stay as they
   are: the dark page sits between them, as Our story does. Everything below is scoped to .lab main.
   ========================================================================================================== */
.lab main{
  --bp-void:#07090F; --bp-tray:rgba(15,19,27,.78); --bp-card:#11151C; --bp-card2:#161B24; --bp-line:#2A303A; --bp-line2:#3A4250;
  --bp-text:#C3CAD5; --bp-head:#F1F3F6;
  /* the site's tokens, read again for a dark ground, so every Lab rule above follows without a rewrite */
  --ink:#E6E9EE; --muted:#9AA3B2; --line:#2A303A; --line-2:#3A4250; --white:#0B0E14; --oat:#0D1118; --oat-btn:#1A2029;
  --brand-text:#FFB347; --brand-tint:#2E2210;
  background:radial-gradient(circle,rgba(255,255,255,.075) 1px,transparent 1.3px) 0 0/20px 20px,var(--bp-void);
  color:var(--bp-text);color-scheme:dark}
/* each frontier's light accent on the dark ground; buttons keep the division's full colour under white words */
.lab main[data-tone=heuristik],.lab main [data-tone=heuristik]{--t:#6EA6FF;--t-ink:#9DC2FF;--t-bg:#131D31;--t-2:#1B2943;--t-btn:#1268F7;--t-btn-fg:#fff}
.lab main[data-tone=kinetik],.lab main [data-tone=kinetik]{--t:#3CCBB0;--t-ink:#7FE0CD;--t-bg:#0E2420;--t-2:#11302A;--t-btn:#0C8A73;--t-btn-fg:#fff}
.lab main[data-tone=harmonik],.lab main [data-tone=harmonik]{--t:#A48BFF;--t-ink:#C6B7FF;--t-bg:#1B1631;--t-2:#241D3F;--t-btn:#6040CC;--t-btn-fg:#fff}
.lab main[data-tone=esoterik],.lab main [data-tone=esoterik]{--t:#E08BC8;--t-ink:#F0B5DF;--t-bg:#26131F;--t-2:#33192C;--t-btn:#8D3F7A;--t-btn-fg:#fff}
.lab main[data-tone=orange],.lab main [data-tone=orange]{--t:#FB9800;--t-ink:#FFB347;--t-bg:#241A0C;--t-2:#3A2A12;--t-btn:#FB9800;--t-btn-fg:#1D1D1D}
.lab main ::selection{background:rgba(251,152,0,.35);color:#fff}

/* type */
.lab main h1,.lab main h2{color:var(--bp-head)}
.lab main h3{color:var(--ink)}
.lab main .lead{color:var(--bp-head)}
.lab main .intro,.lab main p{color:var(--bp-text)}
.lab main .ideas p,.lab main .checks p,.lab main .principle p,.lab main .front p,.lab main .hz p,.lab main .tl p,.lab main .cx p{color:var(--bp-text)}
.lab main blockquote{color:var(--ink)}
.lab .hero.bp::before{content:none}

/* buttons: the primary reads light on the void, its arrow block stays orange; outlines follow the ink */
.lab main .btn-black{background:var(--bp-head);color:var(--bp-void)}
.lab main .btn-black:hover{background:#fff}
.lab main .btn-line:hover{background-color:rgba(255,255,255,.06)}
.lab main .btn:focus-visible{box-shadow:inset 0 0 0 2px var(--t,#FB9800),inset 0 0 0 4px var(--bp-void)}

/* the hero picture and the quantum hero drawing: a line, and HUD brackets like a viewfinder */
.lab main .hero-img,.lab main .qd{position:relative;box-shadow:inset 0 0 0 1px var(--bp-line)}
.lab main .hero-img img{position:relative;z-index:0}
.lab main .qd{background:var(--bp-card)}
.lab main .facts{border-top-color:var(--bp-line)}
.lab main .facts div+div{border-left-color:var(--bp-line)}
.lab main .facts dd b{color:var(--bp-head)}

/* sticky sub-nav: a dark bar with the void showing through */
.lab main .subnav{background:rgba(7,9,15,.9);border-block-color:var(--bp-line)}
.lab main .subnav a{color:var(--ink)}
.lab main .subnav a:hover{background:var(--bp-card2)}
.lab main .subnav .fr{border-left-color:var(--bp-line)}
.lab main:not([data-tone]) .subnav .fr a[aria-current="page"]{background:var(--bp-head);color:var(--bp-void)}
.lab main .subnav a:focus-visible{outline:2px solid var(--t,#FB9800);outline-offset:-2px}

/* trays become instrument panels: the dot grid shows through, a 1px line, HUD brackets in the corners */
.lab main .tray{position:relative;background:var(--bp-tray);border-radius:24px;box-shadow:inset 0 0 0 1px var(--bp-line)}
.lab main .tray[data-tone],.lab main .panel.tray.tone-panel{background:color-mix(in srgb,var(--t) 6%,rgba(11,14,20,.86))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t) 30%,var(--bp-line))}
.lab main .panel.tray{border-radius:24px}
.lab main :is(.tray,.hero-img:not(.ph),.qd,.seth)::after{content:"";position:absolute;inset:9px;pointer-events:none;z-index:2;
  --c:color-mix(in srgb,var(--t,#FB9800) 40%,transparent);
  background:linear-gradient(var(--c),var(--c)) 0 0/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 16px no-repeat}
.lab main .hero-img:not(.ph)::after{--c:rgba(255,255,255,.55);inset:12px}

/* dark cards with a line: every white surface the Lab had */
.lab main :is(.ideas>div,.hz>div,.principle,.checks li:not(.lx-mid),.front[data-tone],.cx[data-tone],.nextfr a[data-tone],.tray .panel,.tray .cyc,.cyc,.tray .specs,.tray .tl,.lx-row>.card){
  background:var(--bp-card);box-shadow:inset 0 0 0 1px var(--bp-line)}
.lab main .panel{background:var(--bp-card);border-color:var(--bp-line)}
.lab main .tray .panel.tone-panel{background:var(--bp-card)!important}
.lab main .cyc{border-radius:20px;padding:32px}
.lab main .tray .cyc{padding:32px}

/* hover and focus, visible on the dark: a ring in the accent and a small lift */
.lab main .front[data-tone]:hover,.lab main .cx[data-tone]:hover,.lab main .nextfr a[data-tone]:hover{background:var(--bp-card2);box-shadow:inset 0 0 0 1.5px var(--t),0 18px 36px -24px color-mix(in srgb,var(--t) 60%,transparent)}
.lab main :is(.front,.cx,.nextfr a,.go,a.tx):focus-visible{outline:2px solid var(--t,#FB9800);outline-offset:3px}
.lab main .front .frame{background:var(--t-bg)}

/* placeholders: a dark slot, tinted by the part it belongs to, its caption readable on the dark */
.lab main .ph{background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(160deg,color-mix(in srgb,var(--t,#8C94A3) 12%,#161B24),color-mix(in srgb,var(--t,#8C94A3) 6%,#0E1219));box-shadow:inset 0 0 0 1px var(--bp-line)}
.lab main .ph::after{color:#B4BCC8}
.lab main .ph::before{background-color:rgba(255,255,255,.14);filter:invert(1)}
.lab main .lx-pic{background:var(--bp-card)}

/* the four filters and the quantum method: boxes on the dark, the end box in the colour */
.lab main .flow .bx{background:var(--bp-card);border-color:var(--bp-line2);color:var(--ink)}
.lab main .flow .bx span{color:var(--muted)}
.lab main .panel.tone-panel .flow .bx{background:var(--bp-card);border-color:var(--bp-line2)}
.lab main .flow .bx.start,.lab main .panel.tone-panel .flow .bx.start{background:var(--bp-card2);border-color:transparent}
.lab main .flow .bx.end,.lab main .panel.tone-panel .flow .bx.end{background:var(--t-btn,#FB9800);border-color:transparent;color:var(--t-btn-fg,#1D1D1D)}
.lab main .flow .bx.end b{color:inherit}
.lab main .flow .bx.end span,.lab main .panel.tone-panel .flow .bx.end span{color:color-mix(in srgb,var(--t-btn-fg,#1D1D1D) 82%,transparent)}
.lab main .checks li::before{border-color:var(--muted)}

/* Seth Linton: his own dark panel, edged so it reads as a panel on the void */
.lab main .seth{position:relative;background:var(--bp-void);box-shadow:inset 0 0 0 1px var(--bp-line)}

/* status labels keep their meaning: ships today (solid), effort (orange), not yet (outline) */
.lab main .st{background:var(--bp-card2);color:var(--ink)}
.lab main .st.ok{background:var(--bp-head);color:var(--bp-void)}
.lab main .st.mid{background:#2E2210;color:#FFB347}
.lab main .st.no{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--bp-line2)}

/* tables: quiet lines, a tint of the accent on hover */
.lab main .tbl th,.lab main .qm th{border-bottom-color:var(--bp-line2)}
.lab main .tbl tbody tr[data-tone]:hover td,.lab main[data-tone] .tbl tbody tr:hover td{background:color-mix(in srgb,var(--t) 9%,transparent)}
.lab main .tbl tbody tr:not([data-tone]):hover td{background:rgba(255,255,255,.03)}

/* AI: the constraint router */
.lab main .opts button{background:var(--bp-card2);border-color:var(--bp-line2);color:var(--ink)}
.lab main .opts button:hover{border-color:var(--t,var(--ink))}
.lab main .opts button:focus-visible,.lab main .bnd-s button:focus-visible,.lab main .qm button.row:focus-visible,.lab main .rec-more:focus-visible{outline:2px solid var(--t,#FB9800);outline-offset:2px}
.lab main .rr-out,.lab main[data-tone] .rr-out,.lab main .odd-read,.lab main[data-tone] .odd-read,.lab main .qm-v,.lab main[data-tone] .qm-v{background:var(--bp-card2);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t,#FB9800) 40%,transparent);border-color:transparent}
.lab main .rr-k span{background:var(--bp-card);border-color:var(--bp-line2);color:var(--ink)}
.lab main .rr-f{border-top-color:var(--bp-line)}

/* hand-drawn SVGs on these pages (the delivery and driving loops, the difficulty curve, the quantum routes) */
.lab main :is(.cyc,.odd,.qd) svg [fill="#fff"]{fill:var(--bp-card2)}
.lab main :is(.cyc,.odd,.qd) svg [stroke="#1D1D1D"]{stroke:var(--ink)}
.lab main :is(.cyc,.odd,.qd) svg [fill="#1D1D1D"]{fill:var(--ink)}
.lab main :is(.cyc,.odd,.qd) svg [fill="#565656"]{fill:var(--muted)}
.lab main :is(.cyc,.odd,.qd) svg [stroke="#E5E4E1"]{stroke:var(--bp-line)}
.lab main:not([data-tone]) :is(.cyc,.odd,.qd) svg [fill="#FBF4EA"]{fill:#2E2210}
.lab main .odd input[type=range]::-webkit-slider-thumb{border-color:var(--bp-void);box-shadow:0 0 0 1px var(--ink)}
.lab main .odd input[type=range]::-moz-range-thumb{border-color:var(--bp-void);box-shadow:0 0 0 1px var(--ink)}
.lab main .odd input[type=range]:focus-visible{outline:2px solid var(--t,#FB9800);outline-offset:4px}

/* Autonomous: the zones, the record */
.lab main .bnd-s button{background:var(--bp-card2);border-color:var(--bp-line);color:var(--ink)}
.lab main .bnd-s span.d{color:var(--bp-text)}
.lab main .tl li::before{background:var(--bp-void)}

/* Quantum: the honest comparison */
.lab main .qm button.row{color:var(--ink)}

/* the kit diagrams are already dark plates; here they get a lighter plate and an edge in their accent, so a
   plate still reads as a plate on the void */
.lab main .dgm.dark{--dg-plate:#0B0F17;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 34%,var(--bp-line))}

/* the end of a frontier page: the other frontiers in an instrument panel */
.lab main .nextfr .lab-w{position:relative;background:var(--bp-tray);border-radius:24px;box-shadow:inset 0 0 0 1px var(--bp-line)}

@media (max-width:760px){
  .lab main .tray,.lab main .panel.tray,.lab main .nextfr .lab-w{border-radius:20px}
  .lab main :is(.tray,.qd,.seth)::after{inset:6px;background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px}
  .lab main .cyc,.lab main .tray .cyc{padding:18px}
}
@media (prefers-reduced-motion:reduce){.lab main .front[data-tone]:hover,.lab main .cx[data-tone]:hover,.lab main .nextfr a[data-tone]:hover{transform:none}}
.lab main :is(.rr-a,.odd-lvl,.odd-xv){color:var(--bp-head)}