/* parts/engine/ink.css */
#inkolega{display:block;max-width:none;min-height:0;padding:0}
.ik-top{max-width:1440px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end}
.ik-top-b{display:block;padding-bottom:clamp(28px,5svh,48px)}
.ik-top-b .lead{max-width:44em}
.ik-say{padding-bottom:clamp(28px,6svh,60px)}
#inkolega h3{font-size:clamp(34px,3.9vw,56px);line-height:1.04;letter-spacing:-.03em}
#inkolega .ik-say .lead{margin-top:16px;max-width:28.5em}
.ik-team{display:flex;justify-content:flex-end;align-items:flex-end;gap:clamp(8px,1.4vw,20px);overflow:hidden;padding-top:8px}
.ik-team img{display:block;height:auto}
.mv .ik-team img{transition:transform .75s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i)*90ms)}
.mv .ik-team:not(.in) img{transform:translateY(104%)}
.ik-m{width:clamp(50px,6vw,86px)}.ik-r{width:clamp(110px,13.9vw,200px)}.ik-t{width:clamp(76px,10.2vw,147px)}.ik-s{width:clamp(72px,9.8vw,141px)}
.ik-deck{position:relative;z-index:3;color:var(--m-300);background:radial-gradient(90% 60% at 50% 62%,#14307f 0%,var(--m-950) 70%)}
.ik-in{max-width:calc(1440px - 2*var(--pad));margin:0 auto;padding:clamp(36px,6svh,60px) var(--pad) clamp(40px,7svh,72px);box-sizing:content-box}
.ik-claim{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.ik-claim h4{font:600 clamp(38px,4.9vw,70px)/1.03 var(--display);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.ik-claim p{font-size:clamp(17px,1.25vw,18px);line-height:1.42;color:var(--m-100);text-wrap:pretty}
.ik-claim a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--m-500)}
/* the diagram: four jobs run left to right through one sealed AI */
.ix{--cols:minmax(0,1.32fr) minmax(0,1.05fr) minmax(0,.7fr) minmax(0,1.3fr) minmax(0,.86fr);position:relative;margin-top:clamp(32px,6svh,52px);display:grid;grid-template-columns:var(--cols);column-gap:clamp(20px,2.3vw,34px);row-gap:12px}
.ix code{display:block;font:400 12.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--m-500)}
.ix-w{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
.ix-wire path{fill:none;stroke:rgba(181,202,250,.45);stroke-width:1.25}
.ix-atk path{fill:none;stroke:var(--c-400);stroke-width:2}
.ix-dot{fill:var(--c-400);stroke:#fff;stroke-width:1.5}
.ix-h{grid-column:1/-1;display:grid;grid-template-columns:var(--cols);column-gap:clamp(20px,2.3vw,34px);font:500 12.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--m-300);padding-bottom:2px}
.ix-lane{display:contents}
.ix-job{grid-column:1;display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--r);padding:8px 14px 8px 8px;color:var(--t2);position:relative;z-index:1}
.ix-job img{flex:none;display:block;width:82px;height:82px}
#j-mail img{width:clamp(96px,10vw,142px);height:auto}
#j-mail b{font-size:22px}
#j-mail span{font-size:14.5px}
.ix-job b{display:block;font:600 18px/1.15 var(--display);letter-spacing:-.015em;color:var(--m-950)}
.ix-job span{display:block;margin-top:3px;font-size:13.5px;line-height:1.28}
.ix-c{position:relative;z-index:1;border:1px solid rgba(181,202,250,.22);border-radius:var(--r);background:rgba(10,26,78,.78);padding:11px 13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);display:flex;flex-direction:column;justify-content:center}
.ix-c p{margin:0;font-size:14px;line-height:1.3;color:var(--m-100)}
.ix-c p b{color:#fff;font-weight:700}
.ix-c code{margin-top:6px}
.ix-pre{grid-column:2}.ix-post{grid-column:4}.ix-you{grid-column:5}
.ix-you p{color:#fff}
.ix-ai{grid-column:3;grid-row:2/6;position:relative;z-index:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:14px 12px;border:1px solid rgba(255,255,255,.5);border-radius:var(--r);background:linear-gradient(180deg,#2f6fe0,#1752bd);box-shadow:0 0 0 5px rgba(92,157,245,.14),0 0 70px rgba(92,157,245,.45),inset 0 1px 0 rgba(255,255,255,.3);color:#fff;transition:box-shadow .35s ease,border-color .35s ease}
.ix-ai h5{margin:0;display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;font:600 19px/1.2 var(--display);letter-spacing:-.015em;color:#fff}
.ix-ai h5 em{font:600 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:#C8361A;background:#fff;border-radius:4px;padding:4px 5px;opacity:0;transition:opacity .3s ease}
.ix-ai>b{display:block;margin-top:14px;font:700 clamp(40px,4vw,58px)/1 var(--display);letter-spacing:-.03em}
.ix-ai>span{display:block;margin-top:6px;font-size:14px;line-height:1.3;color:#eaf1ff}
.ix-ai code{margin-top:12px;color:#cfe0ff}
.ix.l2 .ix-ai{border-color:var(--c-400);box-shadow:0 0 0 5px rgba(255,140,115,.22),0 0 70px rgba(92,157,245,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.ix.l2 .ix-ai h5 em{opacity:1}
.ix-gate{padding:9px 0 4px}
.ix-g{padding:0 13px 7px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;color:#fff!important}
.ix-g code{margin:0}
.ix-gate ol{list-style:none;counter-reset:r;padding:0;margin:0}
.ix-gate li{counter-increment:r;display:flex;gap:8px;align-items:baseline;padding:4px 13px;font-size:13.5px;line-height:1.25;color:var(--m-100);border-top:1px solid rgba(181,202,250,.14)}
.ix-gate li::before{content:counter(r);font:500 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--m-500)}
.ix-gate .hit{transition:background .3s ease,color .3s ease}
.ix.l3 .hit{color:#fff;background:rgba(255,140,115,.16)}
.ix.l3 .hit::before{color:var(--c-400)}
.ix-gate em{margin-left:auto;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-400);font-style:normal;opacity:0;transition:opacity .3s ease}
.ix.l3 .ix-gate em{opacity:1}
.ix-door{grid-column:2/-1;flex-direction:row;align-items:center;gap:18px;padding:11px 14px;border-style:dashed;border-color:rgba(181,202,250,.38)}
.ix-door h5{margin:0;flex:none;font:600 16px/1.2 var(--display);color:#fff;white-space:nowrap}
.ix-door p{flex:1}.ix-door code{margin:0;flex:none;text-align:right}
.ix-base{grid-column:1/-1;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(181,202,250,.22);margin-top:2px}
.ix-base li{padding:10px 14px 0 0}
.ix-base b{display:block;font:600 14.5px/1.2 var(--body);color:#fff}
.ix-base span{display:block;margin-top:2px;font-size:13.5px;line-height:1.25}
.ix-base code{margin-top:3px}
.ix-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);margin-top:22px;font-size:17px;line-height:1.38;color:var(--m-100)}
.ix-story i{display:block;font:600 13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:var(--c-400);margin-bottom:6px}
.ik-proofs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(32px,6svh,56px);padding-top:22px;border-top:1px solid rgba(181,202,250,.22)}
.ik-proofs b{display:block;font:700 clamp(34px,3.4vw,50px)/1.04 var(--display);letter-spacing:-.03em;color:var(--c-400)}
.ik-proofs span{display:block;margin-top:6px;font-size:16px;line-height:1.32;color:#fff}
.ik-limits{margin-top:20px;font-size:15px;line-height:1.45;color:var(--m-300);max-width:60em}
.ik-more{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,40px);margin-top:6px}
.ik-more .more{margin-top:0;flex:1 1 320px;color:var(--m-100);font-size:16px}
.ik-more .more summary{color:var(--m-300)}.ik-more .more summary:hover{color:#fff}
@media (max-width:900px){
  .ik-top{display:block;padding:40px 16px 0}
  .ik-say{padding-bottom:20px}
  .ik-team{justify-content:center;gap:8px}
  .ik-m{width:13vw}.ik-r{width:28vw}.ik-t{width:21vw}.ik-s{width:20vw}
  .ik-in{padding:32px 16px 36px}
  .ik-claim{display:block}.ik-claim p{margin-top:14px}
  .ix{display:block;margin-top:24px}
  .ix-w,.ix-h{display:none}
  .ix-ai{display:block;margin-bottom:14px;padding:14px}
  .ix-ai h5{justify-content:flex-start;gap:10px}
  .ix-ai>b{display:inline-block;margin:8px 12px 0 0;font-size:44px;vertical-align:middle}
  .ix-ai>span{display:inline-block;width:calc(100% - 60px);vertical-align:middle;margin:8px 0 0}
  .ix-ai code{margin-top:10px}.ix-ai code br{display:none}
  .ix-lane{display:block;margin-top:14px;border:1px solid rgba(181,202,250,.22);border-radius:var(--r);overflow:hidden;background:rgba(10,26,78,.78)}
  .ix-job{border-radius:0}
  .ix-lane .ix-c{border:0;border-radius:0;box-shadow:none;background:none;border-top:1px solid rgba(181,202,250,.14);padding:10px 13px}
  .ix-lane .ix-c::before{content:attr(data-l);display:block;margin-bottom:4px;font:500 11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--m-300)}
  .ix-lane .ix-gate{padding:10px 0 4px}.ix-lane .ix-gate::before{margin:0 13px 4px}
  #j-mail img{width:82px}#j-mail b{font-size:18px}#j-mail span{font-size:13.5px}
  .ix-lane code,.ix-base code{display:none}
  .ix-c p{font-size:15px}.ix-gate li{font-size:14.5px;padding:5px 13px}
  .ix-door{display:block;margin-top:14px}.ix-door h5{white-space:normal}.ix-door p{margin-top:6px}.ix-door code{margin-top:6px;text-align:left}.ix-door code br{display:none}
  .ix-base{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
  .ix-story{display:block}.ix-story p+p{margin-top:16px}
  .ik-proofs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .ik-proofs span{font-size:15px}
  .ik-more{display:block}.ik-more .more{margin-top:4px}
}
/* file paths stay out of the reader's way: the AI card alone keeps its size */
.ix-c code,.ix-g code{display:none}
@media (max-width:760px){
  /* on a phone the mail lane is the worked example; the others show the job and what comes back */
  #l-res .ix-pre,#l-res .ix-post,#l-bro .ix-pre,#l-bro .ix-post,#l-rou .ix-pre,#l-rou .ix-post{display:none}
}

/* parts/kumi/kumi.css */
/* KumiCoach: the video is the thing, centred, as big as a laptop screen lets it be. */
.kumi{color:var(--t3,#525B6C)}
.kumi-stage{position:relative;display:block;width:100%;max-width:calc(72svh*1280/540);margin:0 auto;aspect-ratio:1280/540;background:#0A1A4E;border-radius:var(--r,12px);overflow:hidden;cursor:default}
.kumi-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.kumi-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kumi-stage:focus-visible{outline:3px solid var(--s-500,#5C9DF5);outline-offset:2px}
/* phone: edge to edge in a taller crop. 16:10 at 74% keeps both whole fighters in 3 of 4 frames (counted from kumi-pose.json); 4:3 only in about half. */
@media (max-width:760px){
  .kumi-stage{aspect-ratio:16/10;max-width:none;border-radius:0}
  .kumi-stage video{object-position:74% 50%}
}
/* under the video: an afterword, not a section. Same tile look as Inkolega's cards. */
.ku-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(20px,3.5svh,32px);list-style:none}
.ku-cards li{min-width:0;padding:22px 20px 24px;border-radius:20px;background:var(--m-50)}
.ku-cards h4{margin:0;font:600 clamp(21px,1.75vw,25px)/1.16 var(--display);letter-spacing:-.015em;color:var(--t1);text-wrap:balance}
.ku-cards p{margin:10px 0 0;font-size:16.5px;line-height:1.45;color:var(--t2);text-wrap:pretty}
@media (max-width:760px){
  .ku-cards{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* parts/library/library.css */
/* Part: the library as a 3D graph. Everything scoped under .flib; uses the page's tokens (E's names). */
.flib{--flib-ink:#fff;--flib-dim:var(--m-300,#B5CAFA);--flib-faint:var(--m-500,#7796E0);--flib-line:rgba(181,202,250,.18);
  font-family:var(--font-body,system-ui,sans-serif);color:var(--flib-dim)}
.flib *{box-sizing:border-box}
.flib-stage{position:relative;overflow:hidden;border-radius:var(--r,12px);height:min(68vh,620px);min-height:460px;
  background:var(--m-950,#0A1A4E);
  user-select:none;-webkit-user-select:none;isolation:isolate}
.flib-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain,none);
  background-size:220px;mix-blend-mode:overlay;opacity:.14}
.flib canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;z-index:0;outline-offset:-3px}
.flib canvas.is-drag{cursor:grabbing}
.flib canvas.is-point{cursor:pointer}

/* floating titles, anchored to dots in 3D */
.flib-tags{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.flib-tag{position:absolute;left:0;top:0;white-space:nowrap;font-size:12.5px;line-height:1.2;color:#fff;
  padding:3px 8px;border-radius:7px;background:rgba(7,16,50,.78);will-change:transform;transition:opacity .18s;opacity:0;
  max-width:440px;overflow:hidden;text-overflow:ellipsis}
.flib-tag.is-main{font-family:var(--font-display,system-ui,sans-serif);font-size:15px;font-weight:600;background:rgba(7,16,50,.82);padding:5px 10px}

/* counts: a soft scrim so dots passing behind never eat the numbers */
.flib-stage::before{content:"";position:absolute;left:0;right:0;top:0;height:96px;z-index:2;pointer-events:none;background:linear-gradient(rgba(7,16,50,.72),rgba(7,16,50,0))}
.flib-counts{position:absolute;left:24px;top:20px;z-index:3;display:flex;gap:26px;pointer-events:none}
.flib-counts div{display:flex;align-items:baseline;gap:7px}
.flib-counts b{font-family:var(--font-display,system-ui,sans-serif);font-weight:600;font-size:34px;letter-spacing:-.02em;line-height:1.1;color:#fff;font-variant-numeric:normal}
.flib-counts span{font-size:15px;color:var(--flib-dim)}

/* legend */
.flib-legend{position:absolute;left:14px;bottom:10px;z-index:3;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 2px}
.flib-legend button{appearance:none;background:none;border:0;color:#fff;font:inherit;font-size:17px;line-height:1.2;
  display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer;transition:color .15s,background .15s;text-align:left;min-height:32px}
.flib-legend button:hover{color:#fff;background:rgba(181,202,250,.1)}
.flib-legend button[aria-pressed="true"]{color:#fff;background:rgba(181,202,250,.16)}
.flib-legend i{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 8px 1px currentColor}
.flib-legend em{font-style:normal;font-variant-numeric:normal;color:var(--flib-faint);margin-left:2px}

/* controls */
.flib-ctl{position:absolute;right:16px;top:16px;z-index:3;display:flex;gap:6px}
.flib-ctl button{appearance:none;height:36px;min-width:36px;padding:0 11px;border:1px solid var(--flib-line);border-radius:9px;
  background:rgba(7,16,50,.55);color:#fff;font:inherit;font-size:14px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
.flib-ctl button:hover{background:rgba(52,127,224,.32);border-color:rgba(181,202,250,.42)}
.flib a:focus-visible,.flib button:focus-visible,.flib canvas:focus-visible{outline:3px solid var(--s-500,#5C9DF5);outline-offset:2px}
.flib-hint{position:absolute;right:20px;bottom:18px;z-index:3;font-size:13px;color:var(--flib-faint);pointer-events:none;transition:opacity .4s}

/* the lessons: the brightest and largest things on the panel. Wide: still columns either side of the graph, placed by the script. */
.flib-leads{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
.flib-leads line{stroke:#fff;stroke-width:1;opacity:0;transition:opacity .35s}
.flib-leads circle{fill:none;stroke:#fff;stroke-width:1.5;opacity:0;transition:opacity .35s}
.flib-lessons{position:absolute;inset:0;z-index:3;list-style:none;margin:0;padding:0;pointer-events:none}
.flib-lesson{position:absolute;left:14px;width:clamp(170px,19vw,262px);transform:translateY(-50%);opacity:0;transition:opacity .75s}
.flib-lesson.is-r{left:auto;right:14px;text-align:right}
.flib-lesson.is-on{opacity:1}
.flib-lesson.is-on button{pointer-events:auto}
.flib-lesson button{appearance:none;background:none;border:0;margin:0;padding:5px 8px;border-radius:8px;cursor:pointer;text-align:inherit;
  font-family:var(--font-display,system-ui,sans-serif);font-weight:600;font-size:clamp(16px,1.36vw,19.5px);line-height:1.2;letter-spacing:-.01em;color:#fff;
  text-shadow:0 0 12px var(--m-950,#0A1A4E),0 0 3px var(--m-950,#0A1A4E);text-wrap:balance;transition:background .15s,opacity .15s}
.flib-lesson button:hover{background:rgba(181,202,250,.1)}
.flib-lesson.is-active button,.flib-lesson button[aria-pressed="true"]{background:rgba(181,202,250,.16)}
.flib-stage.has-pin .flib-lesson:not(.is-active) button{opacity:.6}
.flib-stage.has-pin .flib-lesson.is-r{visibility:hidden}

/* the page card */
.flib-card{position:absolute;right:16px;top:64px;z-index:4;width:340px;max-height:calc(100% - 118px);overflow:auto;
  padding:18px 20px 16px;border-radius:12px;border:1px solid var(--flib-line);background:rgba(7,16,50,.84);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s,transform .18s;user-select:text;-webkit-user-select:text}
.flib-card.is-on{opacity:1;transform:none}
.flib-card.is-pin{pointer-events:auto}
/* .flib in front: the page styles every h3 inside a section, and that was winning here (dark on dark) */
.flib .flib-card h3{max-width:none;font-family:var(--font-display,system-ui,sans-serif);font-weight:600;font-size:20.4px;line-height:1.24;letter-spacing:-.01em;color:#fff;margin:0;padding-right:22px;text-wrap:balance}
.flib .flib-card h3.is-hid{color:var(--flib-dim);font-weight:500;font-size:17px}
.flib-card p{margin:10px 0 0;font-size:14.5px;line-height:1.46;color:var(--flib-dim)}
.flib-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:9px;font-size:13px;line-height:1.35;color:var(--flib-faint)}
.flib-meta i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.flib-meta b{font-weight:500;color:var(--flib-dim)}
.flib-x{position:absolute;right:8px;top:7px;appearance:none;background:none;border:0;color:var(--flib-faint);font-size:18px;line-height:1;
  width:32px;height:32px;border-radius:7px;cursor:pointer;display:none}
.flib-card.is-pin .flib-x{display:block}
.flib-x:hover{color:#fff}

.flib-cap{margin:12px 2px 0;font-size:14.2px;line-height:1.5;color:var(--t3,#525B6C);max-width:760px;text-wrap:pretty}
.flib-note{position:absolute;inset:auto 0 50% 0;text-align:center;font-size:14.5px;color:var(--flib-faint);z-index:3;pointer-events:none;transition:opacity .4s}

@media (max-width:900px){
  .flib-stage{height:auto;min-height:0}
  .flib canvas{height:300px;bottom:auto}
  .flib-leads{height:300px;bottom:auto}
  .flib-lessons{position:static;margin:0;padding:300px 10px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 12px}
  .flib-lesson,.flib-lesson.is-r{position:static;width:auto;transform:none;text-align:left;opacity:.0}
  .flib-lesson.is-on,.flib-lesson.is-r.is-on{opacity:1}
  .flib-stage.has-pin .flib-lesson.is-r{visibility:visible}
  .flib-lesson button{display:block;width:100%;font-size:16px;padding:7px 8px;min-height:36px;text-wrap:pretty}
  .flib-counts{left:14px;top:12px;gap:16px}
  .flib-counts b{font-size:25px}
  .flib-counts span{font-size:13.5px}
  .flib-ctl{right:10px;top:10px}
  .flib-ctl button{height:38px;min-width:38px}
  .flib-ctl button:not(:last-child){display:none} /* pinch zooms on a phone; the counts need the room */
  .flib-legend{display:none}
  .flib-hint{display:none}
  .flib-card{left:10px;right:10px;width:auto;top:auto;bottom:10px;max-height:60%;padding:14px 16px}
  .flib .flib-card h3{font-size:18px}
  .flib-tag{font-size:11.5px;max-width:190px}
  .flib-tag.is-main{font-size:13px}
  .flib-stage.has-card .flib-ctl{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){
  .flib-card,.flib-tag,.flib-note,.flib-hint,.flib-lesson,.flib-lesson button,.flib-leads line,.flib-leads circle{transition:none}
}
/* the larger labels take the row on a small laptop */
@media (max-width:1360px){.flib-hint{display:none}}

/* parts/navikit/navikit.css */
/* NaviKit, what it is made of: a bento of what it does, on the map's navy. Grey chrome and hairlines from the dark techy look (unslop by Damir Sokolovsky, github.com/heydamir/unslop, CC BY 4.0), fitted to this page's navy, with coral as the one accent.
   Counted 31 October 2026.
   Final state is the plain state: motion only exists under .mv, and a card runs once, when navikit.js gives it .on. */
#navikit{--nk-card:#10245F;--nk-deep:#0C1D52;--nk-line:rgba(181,202,250,.16);--nk-line2:rgba(181,202,250,.28);--nk-hot:var(--c-400);--nk-ease:cubic-bezier(.22,1,.36,1);background:var(--m-950);color:var(--m-300);padding:clamp(40px,7svh,72px) var(--pad) clamp(56px,9svh,96px)}
.nk{max-width:calc(1440px - 2*var(--pad));margin:0 auto}
#navikit h3{margin:0 0 clamp(18px,3svh,28px);color:var(--s-500);font:500 clamp(22px,1.95vw,28px)/1.3 var(--display);letter-spacing:-.012em}

/* the grid */
.nkb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.nkb{position:relative;display:flex;flex-direction:column;min-width:0;padding:10px 10px 18px;border-radius:18px;background:linear-gradient(180deg,#14296C,#0F2159);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px var(--nk-line),0 14px 34px rgba(4,12,44,.35)}
.nkb>h4,.nkb>p{margin-left:12px;margin-right:12px}
.nkb-12{grid-column:span 12}.nkb-7{grid-column:span 7}.nkb-6{grid-column:span 6}.nkb-5{grid-column:span 5}.nkb-4{grid-column:span 4}.nkb-3{grid-column:span 3}
.nkb-viz{position:relative;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-width:0;margin-bottom:16px;padding:16px;border-radius:12px;background:var(--nk-deep);box-shadow:inset 0 0 0 1px var(--nk-line)}
.nkb h4{margin:0 12px;color:#fff;font:600 21px/1.2 var(--display);letter-spacing:-.015em}
.nkb-line{margin-top:6px;font-size:16px;line-height:1.38;color:var(--m-300);text-wrap:pretty}
.nkb-tag{margin-top:8px;font:400 12.5px/1.35 var(--font-body);color:var(--m-500)}
.nkb-small{margin-top:12px;font:400 12.5px/1.45 var(--font-body);color:var(--m-300)}
.nkb-small b{font-weight:400;color:#fff}

/* corner brackets inside the screens of the two cards that hold measured scores */
.nkb-scored .nkb-viz::before{--b:var(--nk-line2);content:"";position:absolute;inset:7px;pointer-events:none;background:linear-gradient(var(--b),var(--b)) 0 0/11px 1px,linear-gradient(var(--b),var(--b)) 0 0/1px 11px,linear-gradient(var(--b),var(--b)) 100% 0/11px 1px,linear-gradient(var(--b),var(--b)) 100% 0/1px 11px,linear-gradient(var(--b),var(--b)) 0 100%/11px 1px,linear-gradient(var(--b),var(--b)) 0 100%/1px 11px,linear-gradient(var(--b),var(--b)) 100% 100%/11px 1px,linear-gradient(var(--b),var(--b)) 100% 100%/1px 11px;background-repeat:no-repeat}
.nkb-scored .nkb-viz{padding:22px 24px}
.nkb-scored::before{top:-5px;left:-5px;border-width:1px 0 0 1px}
.nkb-scored::after{right:-5px;bottom:-5px;border-width:0 1px 1px 0}

/* Proves the bug: three bars */
.nkb-cap{margin-bottom:12px;font:400 12.5px/1.3 var(--font-body);color:var(--m-500)}
.nkb-big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin-bottom:14px;font:400 15px/1.2 var(--font-body);color:var(--m-300)}
.nkb-big b{font:600 clamp(58px,6.6vw,92px)/.98 var(--display);letter-spacing:-.04em;color:#fff}
.nkb-big .hot b{color:var(--nk-hot)}
.nkb-big span{display:block;margin-top:6px;font:400 15px/1.3 var(--font-body);color:var(--m-300)}
.nkb-big .hot span{color:#fff}
.nkb-bars li{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr) 5.6em;align-items:center;gap:12px;padding:9px 0;font-size:15px;line-height:1.25;color:var(--m-300)}
.nkb-track{position:relative;height:22px;border-radius:5px;background:rgba(181,202,250,.08)}
.nkb-fill{display:block;height:100%;min-width:3px;width:var(--w);border-radius:5px;background:var(--m-300);opacity:.62}
.nkb-val{font:400 13px/1.2 var(--font-body);text-align:right;white-space:nowrap}
.nkb-bars .hot{color:#fff}
.nkb-bars .hot .nkb-fill{background:var(--nk-hot);opacity:1;box-shadow:0 0 16px rgba(255,140,115,.45)}
.mv .nkb-fill{transition:width 1.1s var(--nk-ease);transition-delay:calc(var(--i)*140ms + .1s)}
.mv .nkb:not(.on) .nkb-fill{width:0;min-width:0}

/* Tests itself: one tile per judged pair */
.nkb-match+.nkb-match{margin-top:20px}
.nkb-who{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:12px;margin-bottom:9px;font-size:15px;line-height:1.25;color:var(--m-300)}
.nkb-who>span:last-child{text-align:right}
.nkb-score{display:flex;gap:10px;font:600 26px/1 var(--display);letter-spacing:-.02em}
.nkb-score b{font-weight:600;color:#fff}
.nkb-score i{font-style:normal;color:var(--nk-hot)}
.nkb-tiles{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.nkb-tiles i{aspect-ratio:1;border-radius:4px}
.nkb-tiles .a{background:#fff}.nkb-tiles .b{background:var(--nk-hot)}.nkb-tiles .t{box-shadow:inset 0 0 0 1px var(--nk-line2)}
.mv .nkb-tiles i{transition:opacity .28s ease,transform .36s var(--nk-ease);transition-delay:calc(var(--n)*45ms + .1s)}
.mv .nkb:not(.on) .nkb-tiles i{opacity:0;transform:scale(.6)}

/* Remembers corrections: a real message becoming a real rule */
.nkb-said{padding:12px 14px;border-radius:12px 12px 12px 3px;background:#16296B;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font-size:16px;line-height:1.38;color:#fff}
.nkb-said .ch{transition:none}
.mv .nkb:not(.typed) .nkb-said .ch{opacity:0}
.nkb-meta{display:block;margin-bottom:6px;font:400 12.5px/1.2 var(--font-body);color:var(--m-500)}
.nkb-wire{display:block;width:1px;height:22px;margin-left:22px;background:var(--nk-line2);transform-origin:top}
.nkb-rule{padding:12px 14px;border-radius:12px;background:rgba(255,140,115,.09);box-shadow:0 0 0 1px rgba(255,140,115,.42)}
.nkb-rule .nkb-meta{color:var(--nk-hot)}
.nkb-rule b{display:block;font:600 18px/1.25 var(--display);letter-spacing:-.01em;color:#fff}
.mv .nkb-wire{transition:transform .3s ease 1.5s}
.mv .nkb-rule{transition:opacity .4s ease 1.75s,transform .5s var(--nk-ease) 1.75s}
.mv .nkb:not(.on) .nkb-wire{transform:scaleY(0)}
.mv .nkb:not(.on) .nkb-rule{opacity:0;transform:translateY(8px)}

/* Guardrails: what code stops */
.nkb-guards li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--nk-line);font-size:15px;line-height:1.3;color:var(--m-300)}
.nkb-guards li:first-child{border-top:0}
.nkb-guards em{flex:none;padding:3px 7px;border-radius:5px;font:500 12.5px/1.2 var(--font-body);font-style:normal;color:var(--nk-hot);background:rgba(255,140,115,.1);box-shadow:inset 0 0 0 1px rgba(255,140,115,.38)}
.mv .nkb-guards span{transition:opacity .3s ease;transition-delay:calc(var(--n)*260ms + .1s)}
.mv .nkb-guards em{transition:opacity .2s ease,transform .3s var(--nk-ease);transition-delay:calc(var(--n)*260ms + .34s)}
.mv .nkb:not(.on) .nkb-guards span{opacity:0}
.mv .nkb:not(.on) .nkb-guards em{opacity:0;transform:scale(1.5)}

/* Wakes itself: one Sunday, 06:00 to 24:00, x = (hour-6)/18 */
.nkb-day{--lab:8.2em}
.nkb-axis{position:relative;height:16px;margin:0 0 6px var(--lab);font:400 12px/16px var(--font-body);color:var(--m-500)}
.nkb-axis span{position:absolute;left:calc(var(--x)*100%);transform:translateX(-50%)}
.nkb-axis span:first-child{transform:none}.nkb-axis span:last-child{transform:translateX(-100%)}
.nkb-sched{position:relative}
.nkb-sched::before{content:"";position:absolute;top:0;bottom:0;left:var(--lab);right:0;background:linear-gradient(90deg,var(--nk-line) 1px,transparent 1px) 0 0/33.333% 100%;box-shadow:inset -1px 0 0 var(--nk-line)}
.nkb-job{position:relative;display:flex;align-items:center;height:29px;font-size:14px;line-height:1.1;color:var(--m-300)}
.nkb-job>span{flex:none;width:var(--lab);padding-right:8px;white-space:nowrap}
.nkb-job>div{position:relative;flex:1;height:100%}
.nkb-job i{position:absolute;top:50%;left:calc(var(--x)*100%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff}
.nkb-job.hot i{background:var(--nk-hot);box-shadow:0 0 10px rgba(255,140,115,.6)}
.nkb-head{display:none}
.mv .nkb-head{display:block;position:absolute;top:-4px;bottom:0;left:var(--lab);right:0;pointer-events:none}
.mv .nkb-head::after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:#fff;opacity:0}
.mv .nkb.on .nkb-head::after{animation:nkb-sweep 2.4s linear .15s 1 both}
@keyframes nkb-sweep{0%{left:0;opacity:0}4%{opacity:.75}94%{opacity:.75}100%{left:100%;opacity:0}}
.mv .nkb-job i{transition:opacity .18s ease,transform .3s var(--nk-ease);transition-delay:calc(var(--x)*2.4s + .15s)}
.mv .nkb:not(.on) .nkb-job i{opacity:0;transform:scale(.3)}

/* Whole jobs: one job, step by step */
.nkb-jobs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.nkb-jobs li{padding:5px 10px;border-radius:8px;font-size:14px;line-height:1.2;color:var(--m-300);box-shadow:inset 0 0 0 1px var(--nk-line)}
.nkb-jobs .on-job{color:#fff;background:rgba(181,202,250,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px var(--nk-line2)}
.nkb-flow{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 6px;font-size:14px;line-height:1.2;color:#fff}
.nkb-flow small{display:block;margin-top:3px;font:400 12px/1.3 var(--font-body);color:var(--m-500)}
.nkb-flow::before,.nkb-flow::after{content:"";position:absolute;top:5px;left:10%;right:10%;height:1px;background:var(--nk-line2)}
.nkb-flow::after{background:#fff;transform-origin:left}
.nkb-flow li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.nkb-flow li::before{content:"";width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--nk-card)}
.nkb-flow .hot::before{background:var(--nk-hot)}
.mv .nkb-flow::after{transition:transform 1.8s linear .15s}
.mv .nkb:not(.on) .nkb-flow::after{transform:scaleX(0)}
.mv .nkb-flow li{transition:opacity .25s ease;transition-delay:calc(var(--n)*.45s + .15s)}
.mv .nkb:not(.on) .nkb-flow li{opacity:.3}

/* Library: most-read sources */
.nkb-rank li{padding:9px 0;border-top:1px solid var(--nk-line);font-size:15px;line-height:1.25;color:var(--m-300)}
.nkb-rank li:first-child{border-top:0}
.nkb-rank div{display:flex;justify-content:space-between;gap:10px}
.nkb-rank span:last-child{font:400 13px/1.25 var(--font-body);color:#fff}
.nkb-rank u{display:block;height:2px;margin-top:7px;background:rgba(181,202,250,.12);text-decoration:none}
.nkb-rank u s{display:block;height:100%;width:var(--w);background:var(--m-300)}
.mv .nkb-rank u s{transition:width .9s var(--nk-ease);transition-delay:calc(var(--i)*120ms + .1s)}
.mv .nkb:not(.on) .nkb-rank u s{width:0}

/* Daily use: one square per day, weeks as columns, Monday on top */
.nkb-weeks,.nkb-cal{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
.nkb-weeks{margin-bottom:6px;font:400 14px/1.2 var(--font-body);color:var(--m-500)}
.nkb-weeks span{grid-row:1;white-space:nowrap}
.nkb-cal{grid-template-rows:repeat(7,auto);grid-auto-flow:column}
.nkb-cal i,.nkb-scale i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(255,140,115,var(--a));--a:0}
.nkb-cal .p{visibility:hidden}
.nkb-cal .l0,.nkb-scale .l0{box-shadow:inset 0 0 0 1px var(--nk-line2)}
.nkb-cal .l1,.nkb-scale .l1{--a:.26}.nkb-cal .l2,.nkb-scale .l2{--a:.48}.nkb-cal .l3,.nkb-scale .l3{--a:.74}.nkb-cal .l4,.nkb-scale .l4{--a:1}
.nkb-scale{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:9px;font:400 12px/1.2 var(--font-body);color:var(--m-500)}
.nkb-scale i{flex:none;width:11px}
.nkb-scale span:first-child{margin-right:4px}.nkb-scale span:last-child{margin-left:4px}
.mv .nkb-cal{transition:clip-path 1.3s var(--nk-ease) .1s}
.mv .nkb:not(.on) .nkb-cal{clip-path:inset(0 100% 0 0)}
.nkb-ends{display:flex;justify-content:space-between;margin-top:6px;font:400 12px/1.2 var(--font-body);color:var(--m-500)}

/* Found the cause: flat at zero, then the fix */
.nkb-jump{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;font:600 44px/1 var(--display);letter-spacing:-.03em;color:var(--m-300)}
.nkb-jump i{font:400 13px/1 var(--font-body);font-style:normal;letter-spacing:0;color:var(--m-500)}
.nkb-jump .hot{color:var(--nk-hot)}
.nkb-jump b{font-weight:600}
.nkb-step{display:block;width:100%;height:42px;overflow:visible}
.nkb-step path{fill:none;stroke:var(--nk-hot);stroke-width:1.5;stroke-linejoin:round}
.mv .nkb-step{transition:clip-path 1.2s linear .1s}
.mv .nkb:not(.on) .nkb-step{clip-path:inset(-2px 100% -2px 0)}

/* Cuts itself: each row on one scale, 0 to 21 */
.nkb-keys{display:flex;gap:16px;margin-bottom:10px;font:400 12.5px/1.3 var(--font-body);color:var(--m-500)}
.nkb-keys li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--m-300)}
.nkb-keys .hot::before{background:var(--nk-hot);box-shadow:none}
.nkb-keys .now::before{background:#fff;box-shadow:none}
.nkb-cuts li{display:grid;grid-template-columns:5.2em minmax(0,1fr);align-items:center;padding:6px 14px 6px 0;font-size:15px;line-height:1.25;color:var(--m-300)}
.nkb-cuts div{position:relative;height:40px}
.nkb-cuts s{position:absolute;top:27px;left:var(--a);width:calc(var(--b) - var(--a));height:1px;background:var(--nk-line2);text-decoration:none}
.nkb-cuts i{position:absolute;top:0;left:var(--x);transform:translateX(-50%);font:400 13px/16px var(--font-body);font-style:normal;color:var(--m-300)}
.nkb-cuts i::after{content:"";position:absolute;top:22px;left:50%;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--nk-deep);box-shadow:inset 0 0 0 1px var(--m-300)}
.nkb-cuts i.hot{color:var(--nk-hot)}
.nkb-cuts i.hot::after{background:var(--nk-hot);box-shadow:0 0 10px rgba(255,140,115,.5)}
.nkb-cuts i.now{color:#fff}
.nkb-cuts i.now::after{background:#fff;box-shadow:none}
.mv .nkb-cuts s{transition:transform .9s var(--nk-ease) .1s;transform-origin:right}
.mv .nkb:not(.on) .nkb-cuts s{transform:scaleX(0)}
.mv .nkb-cuts i{transition:opacity .3s ease .2s}
.mv .nkb:not(.on) .nkb-cuts i{opacity:0}

/* All features: the plain list */
.nkb-parts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 22px}
.nkb-parts h5{margin:0 0 6px;font:500 12.5px/1.2 var(--font-body);color:#fff}
.nkb-parts li{padding:7px 0;border-top:1px solid var(--nk-line);font-size:14.5px;line-height:1.25;color:var(--m-300)}


/* what is still open: plain words, under the cards */
.nkb-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(22px,3.4svh,34px);font-size:16px;line-height:1.42;color:var(--m-300)}
.nkb-foot i{display:block;margin-bottom:5px;font:500 12.5px/1.2 var(--font-body);font-style:normal;color:#fff}
.nkb-foot p{text-wrap:pretty}
.nkb-counted{margin-top:16px;font:400 12.5px/1.3 var(--font-body);color:var(--m-500)}

@media (max-width:1100px){
  .nkb-7,.nkb-5{grid-column:span 12}
  .nkb-4{grid-column:span 6}
  .nkb-guardcard{grid-column:span 6}
  .nkb-daycard{grid-column:span 12}
  .nkb-jobcard{grid-column:span 12}
  .nkb-3,.nkb-usecard{grid-column:span 6}
  .nkb-parts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  #navikit{padding:40px 16px 48px}
  .nkb-7,.nkb-6,.nkb-5,.nkb-4,.nkb-3,.nkb-guardcard,.nkb-daycard,.nkb-jobcard,.nkb-usecard{grid-column:span 12}
  .nkb-parts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .nkb-bars li{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:8px 0}
  .nkb-bars .nkb-track{grid-column:1/-1;grid-row:2;height:18px}
  .nkb-tiles{gap:3px}
  .nkb-foot{grid-template-columns:1fr;gap:16px}
  .nkb-flow{font-size:13px}
  .nkb-flow small{display:none}
  .nkb-scored .nkb-viz{padding:18px 16px}
}

/* the harness, after his edit list 31-10: number cards, three big scores, and the 36 parts */
.nkb-8{grid-column:span 8}
.nkb-numviz{justify-content:center}
.nkb-num{font:700 clamp(92px,10vw,148px)/.95 var(--display);letter-spacing:-.05em;color:#fff}
.nkb-big3{grid-template-columns:1.25fr 1fr 1fr;align-items:end;margin-bottom:4px}
.nkb-big3 p:not(.hot) b{font-size:clamp(44px,4.6vw,66px)}
.nkb-big3 .hot b{font-size:clamp(76px,9vw,128px)}
.fx .fx-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px}
.fx .fx-top h4{margin:0}
.fx .fx-top .nkb-tag{margin:0}
.fx button{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;transition:color .12s linear}
.fx button:hover,.fx button.on{color:var(--nk-hot)}
.fx button:focus-visible{color:var(--nk-hot);outline:1px solid var(--nk-hot);outline-offset:2px;border-radius:2px}
.fx h5{margin:0}
/* the map: one line of stations, the rail under them */
.fx-map{--dot:9px;--up:14px;position:relative;margin-top:clamp(10px,1.2vw,16px);padding-top:var(--up)}
.fx-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 clamp(12px,1.6vw,24px)}
.fx-s{position:relative;min-width:0}
.fx-line .fx-s{padding-top:24px}
/* station and the wire to the next one */
.fx-line .fx-s::before{content:"";position:absolute;z-index:1;top:0;left:0;width:var(--dot);height:var(--dot);border-radius:50%;background:#fff}
.fx-line .fx-s::after{content:"";position:absolute;top:calc(var(--dot)/2);left:var(--dot);right:calc(-1*clamp(12px,1.6vw,24px));height:1px;background:var(--m-300)}
.fx-line .fx-s:last-child::after{display:none}
.fx-wire{position:absolute;top:-12px;left:0;right:calc(-1*clamp(12px,1.6vw,24px));padding-left:20px;font:400 14px/1 var(--font-body);color:var(--m-500);white-space:nowrap;pointer-events:none}
.fx-wire::after{content:"";position:absolute;right:calc(var(--dot) + 3px);top:13px; /* 05-11 Matt: arrows were 3px above the line; 13px puts the arrow centre on it (wire top -12 + 13 + 4 = line centre 5) */border:4px solid transparent;border-left:6px solid var(--m-300);border-right:0}
.fx .fx-st{display:block;font:600 19px/1.2 var(--display);letter-spacing:-.015em;color:#fff}
.fx .fx-st:hover,.fx .fx-st.on,.fx .fx-st:focus-visible{color:var(--nk-hot)}
.fx-st i{display:none}
.fx-s ul{margin-top:8px}
.fx-s li{font:400 14.5px/26px var(--font-body);color:var(--m-300)}
.fx-s li.fx-lead{color:#fff}
/* the rail: runs under every station */
.fx-rail{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:4px 24px;margin-top:clamp(14px,1.4vw,20px);padding:10px 14px;border-radius:6px;background:rgba(181,202,250,.07);box-shadow:inset 0 0 0 1px var(--nk-line)}
.fx-rail ul{display:flex;flex-wrap:wrap;gap:0 clamp(12px,1.5vw,22px);margin:0}
.fx .fx-say{position:sticky;z-index:2;bottom:10px;min-height:2.4em;margin:clamp(10px,1vw,14px) 0 0;padding:8px 0;background:var(--nk-deep);font-size:16px;line-height:1.35;color:#DCE6FF;text-wrap:pretty}
.fx-say b{font-weight:600;color:var(--nk-hot)}
/* the signal runs the line once; the plain state is the finished state */
.mv .fx-line .fx-s::before{transition:opacity .2s ease;transition-delay:calc(var(--n)*.3s + .1s)}
.mv .fx-line .fx-s::after{transform-origin:left;transition:transform .3s linear;transition-delay:calc(var(--n)*.3s + .2s)}
.mv .fx:not(.on) .fx-line .fx-s::before{opacity:.25}
.mv .fx:not(.on) .fx-line .fx-s::after{transform:scaleX(0)}
@media (max-width:1100px){
  .nkb-8{grid-column:span 12}
  .nkb-libcard{grid-column:span 6}
}
@media (max-width:760px){
  .nkb-libcard{grid-column:span 12}
  .nkb-big3{grid-template-columns:1fr}
  /* phone: the line runs down, each station folds */
  .fx-map{--up:0px;margin-top:12px;padding-top:0}
  .fx-line{display:block}
  .fx-line .fx-s{padding:0 26px 0 22px}
  .fx-line .fx-s::before{top:19px}
  .fx-line .fx-s::after{top:23px;bottom:-23px;left:4px;right:auto;width:1px;height:auto}
  .fx-line .fx-s:last-child::after{display:none}
  .fx-wire{display:none}
  .fx .fx-st{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:12px 0;font-size:18px}
  .fx-st i{display:block;font:400 12.5px/1 var(--font-body);font-style:normal;color:var(--m-500)}
  .fx-st i::after{content:"+";display:inline-block;width:1.2em;text-align:right;color:var(--m-300)}
  .fx-open>h5 .fx-st i::after{content:"−"}
  .fx-s ul{margin:0 0 8px}
  .fx-fold .fx-s:not(.fx-open) ul{display:none}
  .fx-s li{line-height:34px;font-size:15.5px}
  .fx-s li button{display:block;width:100%}
  .fx-rail{display:block;margin-top:8px;padding:0 12px}
  .fx-rail ul{display:block;margin:0 0 8px}
  .fx .fx-say{min-height:5.6em;bottom:0;margin-top:8px;padding:10px 0 4px;font-size:15.5px;box-shadow:0 -1px 0 var(--nk-line)}
}

/* the card: four parts on the front, all 36 on the back */
.fx [hidden]{display:none}
.fx.open{background:var(--nk-deep)}
.fx .fx-top{margin:6px 12px clamp(14px,1.4vw,18px);padding-right:40px}
.fx-rear{padding:0 clamp(6px,1.4vw,22px)}
.fx .fx-turn{position:absolute;z-index:3;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:rgba(181,202,250,.12)}
.fx .fx-turn:hover{background:rgba(181,202,250,.26)}
.fx-turn::before,.fx-turn::after{content:"";position:absolute;top:14px;left:9px;width:12px;height:2px;border-radius:1px;background:#fff;transition:transform .2s var(--nk-ease)}
.fx-turn::after{transform:rotate(90deg)}
.fx.open .fx-turn::before{transform:rotate(45deg)}
.fx.open .fx-turn::after{transform:rotate(135deg)}
.mv .fx{transition:transform .2s ease-in-out}
.fx.fx-turning{transform:perspective(1800px) rotateY(90deg)}
.fx-four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;cursor:pointer}
.fx-four>li{display:flex;flex-direction:column;min-width:0}
.fx-four .nkb-viz{flex:none;align-items:center}
.fx-four h4{margin:0 12px;text-wrap:balance}
.fx-four .nkb-line{margin:6px 12px 0}
/* the drawings: one stroke, one ink, one coral mark each, mono tags on real things */
.fx-four svg{display:block;width:100%;max-width:264px;height:auto;overflow:visible;fill:none;stroke:none}
.fx-four svg path,.fx-four svg .ln{vector-effect:non-scaling-stroke;stroke-width:1}
.fx-four svg text{font:400 11px/1 var(--font-body);fill:var(--m-300)}
.fx-four svg text.th{fill:var(--nk-hot)}
.fx-four svg .ln{stroke:var(--m-300)}
.fx-four svg .d{stroke-dasharray:3 3}
.fx-four svg .hair{stroke:var(--nk-line2)}
.fx-four svg .bar{fill:var(--m-300)}
.fx-four svg .sk{fill:var(--m-300);opacity:.45}
.fx-four svg .tl{fill:rgba(181,202,250,.16)}
.fx-four svg .hf{fill:var(--nk-hot)}
.fx-four svg .hl{stroke:var(--nk-hot)}
/* each drawing runs once, then its coral mark lands */
.mv .fx-four .bar{transform-box:fill-box;transform-origin:left;transition:transform .5s var(--nk-ease);transition-delay:calc(var(--n)*90ms + .1s)}
.mv .fx:not(.on) .fx-four .bar{transform:scaleX(0)}
.mv .fx-four .hi{transition:opacity .25s ease .75s}
.mv .fx:not(.on) .fx-four .hi{opacity:0}
@media (max-width:1100px){
  .fx-four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .fx-four{gap:16px 10px}
  .fx-four .nkb-viz{margin-bottom:10px;padding:10px}
  .fx-four svg text{display:none}
  .fx-four h4{margin:0 4px;font-size:16.5px}
  .fx-four .nkb-line{margin:4px 4px 0;font-size:14.5px}
}
/* Daily use sits beside the critic now, his cuts 31-10: full width once the critic is */
@media (max-width:1100px){.nkb-usecard{grid-column:span 12}}

/* UNSLOP pass, his 31-10 "looks especially ai": signs and fixes from unslop by Damir Sokolovsky (github.com/heydamir/unslop, CC BY 4.0), the page's navy and type kept. No cards: one sheet split by hairlines, text on the page margin. Coral only on the critic's score and small marks. */
#nk-made{--nk-card:var(--m-950)}
#navikit{padding-top:clamp(64px,12svh,112px);padding-bottom:clamp(64px,12svh,112px)}
#nk-made .nkb-grid{gap:0;border-top:1px solid var(--nk-line2)}
#nk-made .nkb{padding:clamp(24px,2.8vw,40px);border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--nk-line2)}
#nk-made .nkb-8,#nk-made .nkb-7{padding-left:0;border-right:1px solid var(--nk-line2)}
#nk-made .nkb-usecard,#nk-made .nkb-5{padding-right:0}
#nk-made .nkb-viz{justify-content:flex-start;margin:0 0 24px;padding:0;border-radius:0;background:none;box-shadow:none}
#nk-made .nkb-scored .nkb-viz::before{display:none}
#nk-made .nkb h4{margin:0}
#nk-made .nkb>p{margin-left:0;margin-right:0}
/* the critic: the score first, what it counts under it */
#nk-made .nkb-cap{order:2;margin:12px 0 0}
#nk-made .nkb-big3{margin-bottom:0}
#nk-made .nkb-big3 .hot b{font-size:clamp(64px,7vw,104px)}
#nk-made .nkb-scored .nkb-tag{font:400 13.5px/1.4 var(--font-body)}
#nk-made .nkb-num{font-size:clamp(64px,7vw,104px)}
/* the calendar in the page's blue: coral stays for the score */
#nk-made .nkb-cal i,#nk-made .nkb-scale i{border-radius:2px;background:rgba(181,202,250,var(--a))}
/* the jobs are words, not buttons; the steps start at the margin */
#nk-made .nkb-jobs{gap:4px 16px;margin-bottom:24px}
#nk-made .nkb-jobs li{padding:0;background:none;box-shadow:none}
#nk-made .nkb-jobs .on-job{color:#fff}
#nk-made .nkb-flow::before,#nk-made .nkb-flow::after{left:0;right:20%}
#nk-made .nkb-flow li{align-items:flex-start;text-align:left}
/* the harness: same sheet, four columns on hairlines, no boxes inside */
#nk-made .fx{padding-left:0;padding-right:0;border-bottom:0;background:none}
#nk-made .fx.open{background:none}
#nk-made .fx .fx-top{margin:0 0 24px}
#nk-made .fx .fx-turn{top:clamp(20px,2.4vw,36px);right:0;background:none;box-shadow:inset 0 0 0 1px var(--nk-line2)}
#nk-made .fx .fx-turn:hover{background:rgba(181,202,250,.14)}
.mv #nk-made .fx{transition:opacity .2s linear}
#nk-made .fx.fx-turning{transform:none;opacity:0}
#nk-made .fx-rear{padding:0}
#nk-made .fx-rail{border-radius:0;background:none;box-shadow:none;padding:10px 0;border-top:1px solid var(--nk-line)}
#nk-made .fx-four{gap:24px 0}
#nk-made .fx-four>li{padding:0 clamp(16px,1.8vw,28px);border-left:1px solid var(--nk-line2)}
#nk-made .fx-four>li:first-child{padding-left:0;border-left:0}
#nk-made .fx-four>li:last-child{padding-right:0}
#nk-made .fx-four .nkb-viz{margin:0 0 16px;align-items:flex-start}
#nk-made .fx-four .nkb-line{margin:6px 0 0}
@media (max-width:1100px){
  #nk-made .nkb-8,#nk-made .nkb-7{padding-right:0;border-right:0}
  #nk-made .nkb-usecard,#nk-made .nkb-5{padding-left:0}
  #nk-made .fx-four>li:nth-child(odd){padding-left:0;border-left:0}
  #nk-made .fx-four>li:nth-child(even){padding-right:0}
}
@media (max-width:760px){
  #navikit{padding:56px 16px}
  #nk-made .nkb{padding:24px 0}
  #nk-made .fx-four>li{padding:0 10px}
  #nk-made .fx-four .nkb-viz{padding:0}
  #nk-made .fx-four h4,#nk-made .fx-four .nkb-line{margin-left:0;margin-right:0}
}
@media print{#nk-made .fx{opacity:1!important}}

/* What it can do, his word 31-10: same sheet, type and colours. Each block says what it does first, the picture is the evidence under it. Order follows what the readers ask for. */
#nk-made .nkb>h4{margin:0 0 clamp(18px,2vw,26px);font-size:clamp(22px,2vw,28px);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
#nk-made .nkb-viz{flex:none}
#nk-made .nkb-cap{order:0;margin:0 0 14px;font:400 16px/1.3 var(--font-body);color:#fff}
#nk-made .nkb-big span{font-size:16px}
#nk-made .nkb>.nkb-tag{margin-top:auto;font:400 13.5px/1.4 var(--font-body)}
#nk-made .nkb-usecard .nkb-viz{margin-bottom:12px}
#nk-made .nkb>.nkb-line{margin-top:auto;padding-top:14px}
#nk-made .nkb-big3{grid-template-rows:auto auto;gap:0 24px}
#nk-made .nkb-big3 p{display:grid;grid-row:span 2;grid-template-rows:subgrid}
#nk-made .nkb-big .nkd-n{display:block;align-self:end;margin:0;font:400 15px/1.2 var(--font-body);color:var(--m-300)}
#nk-made .nkb-jobcard .nkb-viz{margin-bottom:18px}
.nkd-words li{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--nk-line);font-size:16px;line-height:1.3;color:var(--m-300)}
.nkd-words b{font:500 15px/1.4 var(--font-body);color:#fff}
.nkd-words b::before{content:"> ";color:var(--m-500)}
.nkd-word{margin-bottom:22px;font:500 18px/1.2 var(--font-body);color:#fff}
.nkd-word::before{content:"> ";color:var(--m-500)}
#nk-made .nkb-flow{font-size:16px}
.nkd-sched{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(14px,1.6vw,24px)}
.nkd-sched p{margin-bottom:8px;font:600 16px/1.2 var(--display);color:#fff}
.nkd-sched li{padding:7px 0;border-top:1px solid var(--nk-line);font-size:16px;line-height:1.25;color:var(--m-300)}
#nk-made .nkd-sched{margin-bottom:0}
#nk-made .fx:not(.open) .fx-top h4{display:none}
#nk-made .fx .fx-top{min-height:30px;margin-bottom:20px}
#nk-made .fx-four h4{margin:0 0 16px;font:600 clamp(18px,1.5vw,21px)/1.22 var(--display);letter-spacing:-.015em;color:#fff;text-wrap:pretty;min-height:3.66em}
.fx-turn span{position:absolute;top:0;right:38px;font:500 16px/30px var(--font-body);color:#fff;white-space:nowrap}
.fx.open .fx-turn .nkd-open{display:none}
@media (max-width:760px){
  .nkd-sched{grid-template-columns:1fr;gap:18px}
  #nk-made .fx-four h4{margin:0 0 10px;font-size:16.5px;min-height:0}
  #nk-made .nkb-flow{font-size:14px}
  #nk-made .nkb-big3 p{margin-bottom:18px}
}
/* row one is three cells, the schedule under them */
#nk-made .nkb-4.nkd-orch{padding-right:0}
#nk-made .nkb-5{padding-left:0;padding-right:clamp(24px,2.8vw,40px);border-right:1px solid var(--nk-line2)}
#nk-made .nkd-word-card{border-right:1px solid var(--nk-line2)}
#nk-made .nkb-3.nkb-usecard{padding-right:0}
#nk-made .nkd-word-card .nkb-flow{font-size:15px}
#nk-made .nkd-word-card>.nkb-line{margin-top:0;padding-top:0}
#nk-made .nkb-usecard>.nkb-tag{margin-top:0}
#nk-made .nkd-word-card .nkb-flow span{display:block;padding-right:4px}
#nk-made .nkb-usecard>h4,#nk-made .nkd-word-card>h4{font-size:clamp(20px,1.7vw,24px)}
.nkd-svg{display:block;width:100%;height:auto;overflow:visible;fill:none}
.nkd-svg path,.nkd-svg .ln{stroke:var(--m-300);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.nkd-svg text{font:400 11px/1 var(--font-body);fill:var(--m-300)}
.nkd-svg text.th{fill:var(--nk-hot)}
.nkd-svg .sk{fill:var(--m-300);opacity:.45}
.nkd-svg .nd{fill:var(--m-950);stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke}
.nkd-svg .hf{fill:var(--nk-hot)}
@media (max-width:1100px){
  #nk-made .nkb-4.nkd-orch,#nk-made .nkb-5,#nk-made .nkd-word-card,#nk-made .nkb-3.nkb-usecard{grid-column:span 12;padding-left:0;padding-right:0;border-right:0}
  #nk-made .nkb-8{border-right:0}
}
#nk-made .nkb>.nkb-line+.nkb-tag{margin-top:8px}
#nk-made .nkb-tag a{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media (min-width:1101px){
  #nk-made .nkb-4.nkd-orch{padding-left:0;padding-right:clamp(24px,2.8vw,40px);border-right:1px solid var(--nk-line2)}
  #nk-made .nkd-orch>h4{font-size:clamp(20px,1.7vw,24px)}
  #nk-made .nkb-3.nkb-usecard{grid-column:span 4}
  #nk-made .nkb-5{grid-column:span 12;padding-right:0;border-right:0}
}
/* the parts as a moving list: names only, the map stays behind the turn. Without motion the rows just wrap. */
.fx-mq{display:grid;gap:clamp(8px,1vw,14px);padding:clamp(8px,1.2vw,18px) 0 clamp(4px,.8vw,10px);overflow:hidden;cursor:pointer}
.fx-mq ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.fx-mq li{padding-right:clamp(28px,3.4vw,56px);font:600 clamp(20px,2.1vw,30px)/1.25 var(--display);letter-spacing:-.02em;color:#fff;white-space:nowrap}
.fx-mq ul.rev li{color:var(--m-300)}
.mv .fx-mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mv .fx-mq ul{flex-wrap:nowrap;width:max-content;animation:fx-mq 70s linear infinite}
.mv .fx-mq ul.rev{animation-direction:reverse;animation-duration:80s}
.mv .fx-mq:hover ul{animation-play-state:paused}
@keyframes fx-mq{to{transform:translateX(-50%)}}

/* His lab picks 02-11: eleven cards, each a headline, his one-line description, and a drawing under it. Same sheet and hairlines; drawings sit on the bottom so a row lines up. Coral only on the critic and the one thing each drawing is about. */
#nk-made .nk4 .nkb:not(.fx){padding:clamp(28px,3vw,44px) clamp(22px,2.6vw,38px);border-right:1px solid var(--nk-line2)}
#nk-made .nk4 .nkr-l:not(.fx){padding-left:0}
#nk-made .nk4 .nkr-r:not(.fx){padding-right:0;border-right:0}
#nk-made .nk4 .nkb>h4{margin:0 0 10px;font-size:clamp(22px,1.8vw,26px);letter-spacing:-.015em;line-height:1.15}
#nk-made .nk4 .nkb-3>h4{font-size:clamp(19px,1.5vw,22px)}
.nkd-desc{margin:0 0 clamp(24px,2.6vw,34px);max-width:36em;font:400 clamp(17px,1.25vw,18.5px)/1.38 var(--font-body);color:var(--m-300);text-wrap:pretty}
#nk-made .nk4 .nkb-3 .nkd-desc{font-size:15.5px}
#nk-made .nk4 .nkb:not(.fx)>.nkb-viz{margin:auto 0 0;padding:0}
#nk-made .nk4 .nkb.nkd-cal4:not(.fx)>.nkb-viz{margin:0 0 clamp(22px,2.4vw,30px)} /* was out-ranked by the :not(.fx) rule above, so the heading sat on the calendar */
#nk-made .nk4 .nkd-cal4>h4{margin-top:auto}
#nk-made .nk4 .nkd-cal4>.nkd-desc{margin:0}
.nkd-svg .hl{fill:none;stroke:var(--nk-hot);stroke-width:1.2;vector-effect:non-scaling-stroke}
.nkd-svg .hl.d{stroke-dasharray:3 3}
.nkd-svg .hl.x{stroke-width:2;stroke-linecap:round}
.nkd-svg .ok{stroke:#fff!important;stroke-width:1.5!important;stroke-linecap:round;stroke-linejoin:round}
.nkd-svg .hair{stroke:var(--nk-line2)!important}
.nkd-svg .lf{fill:#fff}
.nkd-svg text.dim{fill:var(--m-500)}
.nkd-orch4{max-width:820px}
.nkd-tree{max-width:340px}
.nkd-audit,.nkd-venn{max-width:300px}
/* commits: the calendar runs to today */
.nk4 .nkb-weeks,.nk4 .nkb-cal{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
/* self-review: four steps */
#nk-made .nk4 .nkd-flow4{grid-template-columns:repeat(4,minmax(0,1fr));font-size:15px}
#nk-made .nk4 .nkd-flow4 span{display:block;padding-right:8px}
/* planted faults: a coral fault in each check, a white ring when it is caught */
.nkd-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
.nkd-tiles i{position:relative;aspect-ratio:1;border-radius:3px;box-shadow:inset 0 0 0 1.5px #fff}
.nkd-tiles i::after{content:"";position:absolute;inset:32%;border-radius:50%;background:var(--m-300)}
/* a fault shows coral while it is planted, then goes quiet once its check catches it */
.mv .nkb:not(.on) .nkd-tiles i::after{background:var(--nk-hot)}
.mv .nkd-tiles i::after{transition:opacity .2s ease,transform .3s var(--nk-ease),background .3s ease;transition-delay:calc(var(--n)*40ms + .1s),calc(var(--n)*40ms + .1s),calc(var(--n)*40ms + 1.2s)}
.nkd-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0;font:400 12.5px/1.3 var(--font-body);color:var(--m-500)}
.nkd-key span{display:inline-flex;align-items:center;gap:6px}
.nkd-key b{margin-left:auto;font-weight:500;color:#fff}
.nkd-key i{display:inline-block;width:9px;height:9px;border-radius:2px}
.nkd-key i.f{border-radius:50%;background:var(--m-300)}
.nkd-key i.c{box-shadow:inset 0 0 0 1.5px #fff}
.mv .nkd-tiles i{transition:box-shadow .3s ease;transition-delay:calc(var(--n)*40ms + 1.2s)}
.mv .nkb:not(.on) .nkd-tiles i{box-shadow:inset 0 0 0 1px var(--nk-line2)}
.mv .nkb:not(.on) .nkd-tiles i::after{opacity:0;transform:scale(.3)}
/* silent failures: every run says it ran, one result was not sound */
.nkd-runs{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px;font:400 12.5px/1.2 var(--font-body);color:var(--m-300)}
.nkd-runs div{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:3px}
.nkd-runs i{aspect-ratio:1;border-radius:50%;background:#fff}
.nkd-runs i.bad{background:none;box-shadow:inset 0 0 0 1.5px var(--nk-hot),0 0 8px rgba(255,140,115,.55)}
.mv .nkd-runs i{transition:opacity .15s ease,transform .25s var(--nk-ease);transition-delay:calc(var(--n)*30ms + .1s)}
.mv .nkd-runs div+span+div i{transition-delay:calc(var(--n)*30ms + 1.1s)}
.mv .nkb:not(.on) .nkd-runs i{opacity:0;transform:scale(.4)}
/* rules in code: no coral, these are the plain state */
#nk-made .nkd-guards em{color:#fff;background:none;box-shadow:inset 0 0 0 1px var(--nk-line2)}
#nk-made .nkd-guards li{font-size:14.5px}
/* the drawings: the work flows left to right once, the tree grows down, the circles fade in */
.mv .nkd-orch4{transition:clip-path 2.4s linear .15s}
.mv .nkb:not(.on) .nkd-orch4{clip-path:inset(-4px 100% -4px 0)}
.mv .nkd-tree path{transition:opacity .5s ease .1s}
.mv .nkb:not(.on) .nkd-tree path{opacity:0}
.mv .nkd-tree .lf{transition:opacity .2s ease,transform .3s var(--nk-ease);transition-delay:calc(var(--n)*35ms + .5s);transform-box:fill-box;transform-origin:center}
.mv .nkb:not(.on) .nkd-tree .lf{opacity:0;transform:scale(.2)}
.mv .nkd-venn .ln,.mv .nkd-audit .hl{transition:opacity .5s ease .1s}
.mv .nkd-venn .x{transition:opacity .3s ease .8s}
.mv .nkb:not(.on) .nkd-venn .ln,.mv .nkb:not(.on) .nkd-audit .hl{opacity:0}
.mv .nkb:not(.on) .nkd-venn .x{opacity:0}
@media (max-width:1100px){
  #nk-made .nk4 .nkb:not(.fx){grid-column:span 12;padding-left:0;padding-right:0;border-right:0}
  #nk-made .nk4 .nkb-3:not(.fx){grid-column:span 6}
  #nk-made .nk4 .nkt-l{padding-right:clamp(20px,2.6vw,32px)!important;border-right:1px solid var(--nk-line2)!important}
  #nk-made .nk4 .nkt-r{padding-left:clamp(20px,2.6vw,32px)!important}
}
@media (max-width:760px){
  #nk-made .nk4 .nkb:not(.fx),#nk-made .nk4 .nkb-3:not(.fx){grid-column:span 12;padding:28px 0!important;border-right:0!important}
  .nkd-orch4 text{display:none}
  #nk-made .nk4 .nkd-flow4{font-size:13.5px}
  .nkd-tiles{grid-template-columns:repeat(8,minmax(0,1fr))}
  .nkd-runs div{gap:2px}
}
/* full-width rows on a tablet: the small drawings keep their laptop size */
.nkd-cal4 .nkb-viz{max-width:440px}
.nkd-tiles,.nkd-tiles+.nkd-key{max-width:440px}
.nkd-runs,.nkd-runs+.nkd-key{max-width:520px}
#nk-made .nk4 .nkd-flow4{max-width:560px}
/* evidence pass 02-11 (drafts/navikit-evidence/build_cards.py), redrawn in the calendar's own language:
   rounded squares, one blue scale, sans text, coral only for the one thing that matters */
#nk-made .nkb-viz+.nkb-tag{margin-top:14px}
#nk-made .nkb-8 .nkb-viz{justify-content:flex-start}
#nk-made .nkd-venn+.nkb-tag,#nk-made .nkb-viz:has(.nkd-venn)+.nkb-tag{margin-top:22px}
#nk-made .nkb-grid.nk4 article.nkb-8:has(.nkd-guards)>.nkb-viz{flex:0 0 auto;margin-top:28px}
.nkx-note{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--m-500);text-wrap:pretty}
.nkx-sq{display:inline-block;width:10px;height:10px;border-radius:3px;background:rgba(181,202,250,.74)}
.nkx-runs+.nkx-key .nkx-sq:not(.bad){background:rgba(181,202,250,.48)}
.nkx-sq.x{background:none;box-shadow:inset 0 0 0 1.5px rgba(181,202,250,.5)}
.nkx-sq.m,.nkx-sq.bad{background:var(--nk-hot)}
.nkx-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;font-size:13.5px;line-height:1.3;color:var(--m-500)}
.nkx-key span{display:inline-flex;align-items:center;gap:7px}
/* Notes to results: note -> build -> check -> me, with the loop that sends work back */
.nkx-flow{max-width:none}
.nkx-flow ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin:0;padding:0;list-style:none}
.nkx-flow li{position:relative;padding:18px 16px 16px;border-radius:14px;background:rgba(181,202,250,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px var(--nk-line2);font-size:clamp(16px,1.4vw,19px);font-weight:500;line-height:1.2;color:#fff}
.nkx-flow li small{display:block;margin-top:6px;font-size:14.5px;font-weight:400;color:var(--m-300)}
.nkx-flow li:not(:last-child)::after{content:"\2192";position:absolute;top:50%;right:-28px;transform:translateY(-50%);font-size:18px;font-weight:400;color:var(--m-500)}
.nkx-loop{position:relative;height:40px;margin-left:calc((100% - 108px)/4*1.5 + 36px);width:calc((100% - 108px)/4 + 36px);border:1.5px solid var(--nk-hot);border-top:0;border-radius:0 0 14px 14px}
.nkx-loop::before{content:"";position:absolute;left:-6px;top:-1px;border:5px solid transparent;border-bottom:7px solid var(--nk-hot);border-top:0}
.nkx-loop span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:7px;white-space:nowrap;font-size:15px;color:var(--nk-hot)}
.nkx-flow{padding-bottom:34px}
/* big numbers, the 94-of-97 way */
.nkx-big{margin:0 0 14px;font:600 clamp(28px,2.6vw,38px)/1 var(--display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.nkx-big small{display:block;margin-top:6px;font:400 15px/1.3 var(--font-body);letter-spacing:0;color:var(--m-300)}
.nkx-mail+.nkx-did+.nkx-big{margin:18px 0 0}
/* Trustworthy testing */
.nkx-tests{margin:0;padding:0;list-style:none}
.nkx-tests li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--nk-line);font-size:14.5px;line-height:1.3;color:var(--m-300)}
.nkx-tests em{flex:none;font-style:normal;color:#fff}
.nkx-tests em::before{content:"\2713\00a0";color:var(--m-300)}
/* Silent failures: what the job said, what happened */
.nkx-said{display:grid;gap:8px}
.nkx-said>p{margin:0 0 2px;font:400 12px/1.2 var(--font-body);color:var(--m-500)}
.nkx-said div{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(181,202,250,.08);box-shadow:inset 0 0 0 1px var(--nk-line2)}
.nkx-said i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-weight:600;font-size:15px}
.nkx-said .ok i{background:rgba(181,202,250,.22);color:#fff}
.nkx-said .no{box-shadow:inset 0 0 0 1px rgba(255,140,115,.55)}
.nkx-said .no i{background:var(--nk-hot);color:var(--nk-deep)}
.nkx-said small{display:block;font-size:13px;color:var(--m-500)}
.nkx-said b{display:block;margin-top:2px;font-size:17px;font-weight:500;color:#fff}
/* Privacy: a planted mail */
.nkx-mail{padding:14px 16px;border-radius:12px;background:#F3F6FF;color:#24305E;font-size:14.5px;line-height:1.45}
.nkx-mail p{margin:0}
.nkx-mail .h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-size:13px;color:#5B6895}
.nkx-mail .h b{color:#121A3D;font-size:14px}
.nkx-mail mark{padding:1px 3px;border-radius:3px;background:rgba(255,140,115,.28);color:#121A3D}
.nkx-did{margin:12px 0 0;font-size:14.5px;line-height:1.4;color:var(--m-300)}
.nkx-did b{font-weight:500;color:#fff}
/* Self-improving and auditors: dated rows */
.nkx-sun,.nkx-aud{margin:0;padding:0;list-style:none}
.nkx-sun li,.nkx-aud li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:3px 12px;padding:12px 0;border-top:1px solid var(--nk-line);font-size:15px;line-height:1.35}
.nkx-sun li:first-child,.nkx-aud li:first-child{border-top:0;padding-top:0}
.nkx-sun span,.nkx-aud span{grid-row:span 2;font:400 12px/1.6 var(--font-body);color:var(--m-500)}
.nkx-sun b,.nkx-aud p{margin:0;font-weight:400;color:#fff}
.nkx-sun em,.nkx-aud em{font-style:normal;color:var(--m-300)}
.nkx-aud em::before{content:"\2192\00a0";color:var(--m-500)}
/* Silent failures: 32 runs as squares, the one that lied in coral */
.nkx-runs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;max-width:300px}
.nkx-runs i{aspect-ratio:1;border-radius:4px;background:rgba(181,202,250,.48)}
.nkx-runs i.bad{background:var(--nk-hot);box-shadow:0 0 14px rgba(255,140,115,.5)}
.mv .nkx-runs i{transition:opacity .2s ease,transform .3s var(--nk-ease);transition-delay:calc(var(--n)*22ms + .1s)}
.mv .nkb:not(.on) .nkx-runs i{opacity:0;transform:scale(.5)}
/* Trustworthy testing: the self-test's own terminal */
.nkx-term{margin:0;padding:14px 16px;border-radius:10px;background:#06102F;box-shadow:inset 0 0 0 1px var(--nk-line);font:400 12px/1.65 var(--font-body);color:#DCE5FF;white-space:pre-wrap;overflow-wrap:anywhere}
.nkx-term .d{color:var(--m-500)}.nkx-term .ok{color:#7FD4A8}.nkx-term .hot{color:var(--nk-hot);font-weight:600}
/* 36 parts: the six stations, still */
.mv .fx-mq.nkx-st ul{animation:none;width:auto;flex-wrap:wrap}
.mv .fx-mq.nkx-st{-webkit-mask-image:none;mask-image:none}
.fx-mq.nkx-st li[aria-hidden]{display:none}
.fx-mq.nkx-st li{font-size:clamp(18px,1.7vw,24px);color:var(--m-300)}
.fx-mq.nkx-st li i{font:500 14px/1 var(--font-body);font-style:normal;color:var(--m-500);vertical-align:4px}
@media (max-width:760px){.nkx-flow ol{gap:18px}.nkx-flow li{padding:10px 9px;font-size:14px}.nkx-flow li small{font-size:12px}.nkx-flow li:not(:last-child)::after{right:-15px;font-size:13px}.nkx-loop{margin-left:calc((100% - 54px)/4*1.5 + 18px);width:calc((100% - 54px)/4 + 18px)}}

/* Notes to results: the context engineering build of 3-4 Nov as a timeline */
#nk-made .cx-wrap{padding:8px 20px 16px}
.cx{margin:0;padding:0;list-style:none}
.cx-row{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.05fr);gap:6px 22px;align-items:center;padding:14px 0;border-top:1px solid var(--nk-line)}
.cx-row:first-child{border-top:0}
.cx-row time{align-self:start;padding-top:2px;font:400 12.5px/1.4 var(--font-body);color:var(--m-500)}
.cx-t b{display:block;font-weight:500;font-size:16px;line-height:1.3;color:#fff}
.cx-t span{display:block;margin-top:2px;font-size:14.5px;line-height:1.4;color:var(--m-300);text-wrap:pretty}
.cx-t q{display:block;margin-top:2px;font-size:15px;line-height:1.4;color:#fff;font-style:italic;quotes:"\201C" "\201D"}
.cx-v{display:flex;flex-wrap:wrap;gap:6px}
.cx-box,.cx-chip{padding:4px 9px;border-radius:6px;font:400 12.5px/1.2 var(--font-body);color:var(--m-300);background:rgba(181,202,250,.07);box-shadow:inset 0 0 0 1px var(--nk-line2)}
.cx-chip{color:#fff}
.cx-chip.no{color:var(--nk-hot);background:rgba(255,140,115,.1);box-shadow:inset 0 0 0 1px rgba(255,140,115,.45)}
.cx-end{border-top:1px solid var(--nk-line2)}
.cx-end .cx-t b{color:var(--nk-hot)}
.cx-bars{display:block}
.cx-bars p{display:grid;grid-template-columns:52px minmax(0,1fr) 54px;align-items:center;gap:10px;margin:0 0 7px;font:400 14px/1.2 var(--font-body);color:var(--m-500);font-variant-numeric:tabular-nums}
.cx-bars i{display:block;height:12px;width:calc(var(--w)*1%);border-radius:3px;background:rgba(181,202,250,.45)}
.cx-bars .hot i{background:var(--nk-hot);box-shadow:0 0 14px rgba(255,140,115,.4)}
.cx-bars em{font-style:normal;text-align:right;color:#fff}
.cx-bars small{display:block;margin-top:4px;font:500 15px/1.3 var(--font-body);color:#fff}
.cx-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--nk-line);font:400 12.5px/1.4 var(--font-body);color:var(--m-500)}
@media (max-width:760px){.cx-row{grid-template-columns:52px minmax(0,1fr)}.cx-v{grid-column:2}}
.mv #nk-made .nkb:not(.on) .cx-row{opacity:0;transform:translateY(6px)}
.mv #nk-made .on .cx-row{transition:opacity .4s ease calc(var(--n)*.12s),transform .5s var(--nk-ease) calc(var(--n)*.12s)}
.mv #nk-made .nkb:not(.on) .cx-bars i{width:0}
.mv #nk-made .on .cx-bars i{transition:width 1s var(--nk-ease) 1.1s}
/* Checks it can trust: the fault count beside the backup story */
.nkx-pair{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:28px;align-items:end}
.nkx-pair .nkx-big{margin:0}
@media (max-width:760px){.nkx-pair{grid-template-columns:1fr;gap:22px}}
/* The parts row: one centred line of words, the last one opens all 36 */
#nk-made .fx:not(.open) .fx-turn{display:none}
#nk-made .fx:not(.open) .fx-top{min-height:0;margin:0}
.fx-mq.nkx-st ul{justify-content:center;gap:8px clamp(22px,2.8vw,44px)}
.fx-mq.nkx-st li{padding-right:0}
.fx-mq.nkx-st li.fx-all{color:#fff}
.fx-mq.nkx-st li.fx-all i{color:var(--nk-hot);font:500 clamp(18px,1.7vw,24px)/1 var(--display);vertical-align:0}
/* hovering a word lifts that one word to white (his ask 04-11); no underline */
.fx-mq.nkx-st li,.fx-mq.nkx-st li i{transition:color .15s ease}
.fx-mq.nkx-st li:hover{color:#fff}
.fx-mq.nkx-st li:hover i{color:var(--m-300)}
.fx-mq.nkx-st li.fx-all:hover i{color:var(--nk-hot)}

/* Notes to results, draft A (three beats), his pick 04-11 */
#nk-made .nr-card>.nkd-desc{margin-bottom:clamp(22px,2.6vw,34px)}
.nr-foot{margin:clamp(22px,2.6vw,30px) 0 0;padding-top:12px;border-top:1px solid var(--nk-line);font:400 15px/1.5 var(--font-body);color:var(--m-300);font-variant-numeric:tabular-nums}
.nr-foot b{font-weight:600;color:#fff}
.nr-svg{display:block;width:100%;height:auto;overflow:visible}
.nr-svg .e{fill:none;stroke:var(--nk-line2);stroke-width:1.2}
.nr-svg .e.f{stroke:rgba(181,202,250,.12);stroke-width:1}
.nr-svg .e.w{stroke:rgba(255,255,255,.55)}
.nr-svg .e.d{stroke:var(--nk-hot);stroke-dasharray:4 5;stroke-width:1.5}
.nr-svg .n{fill:var(--m-300)}
.nr-svg .n.w{fill:#fff}
.nr-svg .n.h{fill:var(--nk-hot);filter:drop-shadow(0 0 8px rgba(255,140,115,.6))}
.nr-svg .halo{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.nr-svg text{font:500 12.5px/1 var(--font-body);fill:var(--m-300);paint-order:stroke;stroke:var(--m-950);stroke-width:5px;stroke-linejoin:round}
.nr-svg text.wt{fill:#fff}
.nr-svg text.dim{fill:var(--m-500)}
.nr-svg text.hot{fill:var(--nk-hot)}
.nr-svg text.big{font:600 34px/1 var(--display);letter-spacing:-.03em;fill:var(--nk-hot)}
.nr-svg .env{fill:rgba(181,202,250,.045);stroke:none}

/* A: three beats */
.nr-a{display:grid;grid-template-columns:minmax(0,.8fr) 28px minmax(0,1.35fr) 28px minmax(0,1fr);gap:0 clamp(12px,1.6vw,24px);align-items:stretch}
.nr-beat{display:flex;flex-direction:column;min-width:0}
.nr-beat>:last-child{margin-top:auto;margin-bottom:auto}
.nr-h text{font-size:14px}.nr-h text.big{font-size:38px}
.nr-beat>h5{margin:0 0 16px;font:500 14px/1.2 var(--font-body);color:var(--m-500)}
.nr-beat>h5 i{font-style:normal;color:#fff;margin-right:6px;font-variant-numeric:tabular-nums}
.nr-arrow{align-self:center;font:400 22px/1 var(--display);color:var(--m-500);text-align:center}
.nr-note{margin:0;padding:18px 18px 20px;border-radius:10px;background:rgba(181,202,250,.07);box-shadow:inset 0 0 0 1px var(--nk-line2);font:500 clamp(19px,1.6vw,23px)/1.3 var(--display);letter-spacing:-.01em;color:#fff}
.nr-note span{display:block}
.nr-res{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.nr-num{margin:0 0 14px;font:600 clamp(52px,5vw,72px)/.95 var(--display);letter-spacing:-.04em;color:var(--nk-hot);font-variant-numeric:tabular-nums}
.nr-num small{margin-left:.15em;font-size:.32em;font-weight:600;letter-spacing:-.01em;color:#fff}
#nk-made .nr-res .cx-bars p{grid-template-columns:54px minmax(0,1fr) 48px}
.nr-res .cx-bars small{font:400 14px/1.4 var(--font-body);color:var(--m-500);margin-top:8px}
.nr-a .nr-svg{max-width:440px}

@media (max-width:760px){
  .nr-a{grid-template-columns:minmax(0,1fr);gap:0}
  .nr-arrow{padding:14px 0;transform:rotate(90deg);width:22px;justify-self:start;margin-left:6px}
  .nr-note{padding:16px}
  .nr-a .nr-svg{max-width:none}
  .nr-svg text{font-size:14.5px} /* the drawing shrinks on a phone; this keeps its labels at the 14px floor */
}
/* motion, only under .mv, once, when the card gets .on (same as the live cards) */
.mv #nk-made .nkb:not(.on) .nr-beat,.mv #nk-made .nkb:not(.on) .nr-arrow,.mv #nk-made .nkb:not(.on) .nr-c li{opacity:0;transform:translateY(8px)}
.mv #nk-made .on .nr-beat,.mv #nk-made .on .nr-arrow,.mv #nk-made .on .nr-c li{transition:opacity .45s ease calc(var(--n)*.14s),transform .55s var(--nk-ease) calc(var(--n)*.14s)}
.mv #nk-made .nkb:not(.on) .nr-draw{clip-path:inset(-20px 100% -20px -20px)}
.mv #nk-made .on .nr-draw{transition:clip-path 2s linear .35s}
.mv #nk-made .nkb:not(.on) .nr-v.nr-draw{clip-path:inset(-20px -20px 100% -20px)}

/* NK2 05-11 (Matt: NaviKit rework), the default (?v=nk1 = old section); the script block at the top of navikit.js builds it. Undo: delete this block. */
html.v-nk2 #nk-made .nr-card>.nkd-desc{margin-bottom:clamp(26px,3vw,44px)}
html.v-nk2 .nk2-flow{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:center}
html.v-nk2 .nk2-svg{max-width:none}
html.v-nk2 .nk2-svg text{font-size:14.5px}
html.v-nk2 .nk2-svg text.big{font:600 52px/1 var(--display);letter-spacing:-.035em;fill:#fff;stroke-width:22px}
html.v-nk2 .nk2-svg text.sub{font-size:16px;stroke-width:12px;fill:var(--m-300)}
html.v-nk2 .nk2-svg text.rl{font-size:16px;font-weight:600}
html.v-nk2 .nk2-svg text.mask{fill:var(--m-950);stroke:var(--m-950);stroke-linejoin:round}
html.v-nk2 .nk2-svg text.top{stroke:none}
html.v-nk2 .nk2-svg .e.k{stroke:rgba(181,202,250,.22);stroke-width:.9}
html.v-nk2 .nk2-svg .n.k{fill:rgba(220,230,255,.85)}
html.v-nk2 .nk2-svg .halo.h{stroke:rgba(255,140,115,.45)}
html.v-nk2 .nk2-strip{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:0;padding:0!important}
html.v-nk2 .nk2-cell{padding:clamp(16px,1.6vw,22px) clamp(20px,2.4vw,34px);border-right:1px solid var(--nk-line2);display:flex;flex-direction:column;justify-content:center}
html.v-nk2 .nk2-c1{flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(16px,2vw,28px)} /* 05-11 Matt: the strip must be thin; calendar beside its number, not above it */
html.v-nk2 .nk2-cell:first-child{padding-left:0}
html.v-nk2 .nk2-cell:last-child{padding-right:0;border-right:0}
html.v-nk2 .nk2-cell .nkb-viz{margin:0!important;flex:0 0 auto;width:clamp(150px,15vw,210px)}
html.v-nk2 .nk2-cell .nkb-weeks{font-size:12px;margin-bottom:4px}
html.v-nk2 .nk2-cell .nkb-cal{gap:2px}
html.v-nk2 .nk2-cell .nkx-big{margin:0}
html.v-nk2 .nk2-more{grid-column:span 12;border-top:1px solid var(--nk-line2)}
html.v-nk2 .nk2-open{display:block;width:100%;padding:clamp(24px,2.6vw,34px) 0;background:none;border:0;cursor:pointer;font:600 clamp(20px,1.67vw,24px)/1.2 var(--display);letter-spacing:-.01em;color:#fff;text-align:center}
html.v-nk2 .nk2-open i{font-style:normal;color:var(--nk-hot);display:inline-block;margin-left:.3em;transition:transform .3s var(--nk-ease)}
html.v-nk2 .nk2-open:hover i,html.v-nk2 .nk2-open:focus-visible i{transform:translateX(4px)}
html.v-nk2 .nk2-more.is-open .nk2-open i{transform:rotate(90deg)}
html.v-nk2 .nk2-rest{border-top:0}
html.v-nk2 .nk2-rest[hidden]{display:none}
.fx-wire::after{display:none} /* 05-11 Matt: 'still ugly' - the arrowhead jammed against the next dot; the line and dots already show the direction */
html.v-nk2 .nk2-rest .fx .fx-turn,html.v-nk2 .nk2-rest .fx .fx-tag-f,html.v-nk2 .nk2-rest .fx .fx-tag-b{display:none}
@media (max-width:760px){
  html.v-nk2 .nk2-flow{grid-template-columns:minmax(0,1fr);gap:22px}
  html.v-nk2 .nk2-svg text.big{font-size:38px;stroke-width:16px}
  html.v-nk2 .nk2-svg text.sub{font-size:14.5px}
  html.v-nk2 .nk2-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html.v-nk2 .nk2-c1{grid-column:span 2;padding-right:0!important;border-right:0!important;border-bottom:1px solid var(--nk-line2)}
  html.v-nk2 .nk2-cell{padding:16px}
  html.v-nk2 .nk2-c1{padding:16px 0!important}
  html.v-nk2 .nk2-cell:nth-child(2){padding-left:0}
}

/* parts/inkolega/ink-versions.css */
/* Inkolega, the grid: one claim per card in the reader's words, the rest behind a click. Insight, goal and stage on top, the track at the end.
   Final state is the plain state: motion only exists under .mv, and each card runs once, when ink-versions.js gives it .on.
   Sources: side-session note inkolega-versions-sources.md; recounted 31-10 at navis-hq 13f406b. */
.ika{--nk-card:#10245F;--nk-deep:#0C1D52;--nk-line:rgba(181,202,250,.16);--nk-line2:rgba(181,202,250,.28);--nk-mono:ui-monospace,SFMono-Regular,Menlo,monospace;--nk-hot:var(--c-400);--nk-ease:cubic-bezier(.22,1,.36,1)}
.ink-grid{margin-top:clamp(20px,3.4svh,32px)}
.ika-12{grid-column:span 12}
.ika-6{grid-column:span 6}
@media (max-width:1100px){.ika-6{grid-column:span 12}}
.ika .nkb-viz em{font-style:normal}

/* insight, goal, stage */
.ika-band{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(18px,2.6vw,40px)}
.ika-band i{display:block;margin-bottom:8px;font:500 12.5px/1.2 var(--nk-mono);font-style:normal;color:var(--nk-hot)}
.ika-band p{font:600 clamp(20px,1.7vw,25px)/1.22 var(--display);letter-spacing:-.015em;color:#fff;text-wrap:pretty}
.ika-band a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}

/* a card opens over itself, so nothing on the page moves */
.ikc{cursor:pointer}
.ikc-b{position:absolute;z-index:3;bottom:14px;right:14px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(181,202,250,.12);cursor:pointer}
.ikc-b::before,.ikc-b::after{content:"";position:absolute;top:14px;left:9px;width:12px;height:2px;border-radius:1px;background:#fff;transition:transform .2s var(--nk-ease)}
.ikc-b::after{transform:rotate(90deg)}
.ikc.open .ikc-b::before{transform:rotate(45deg)}
.ikc.open .ikc-b::after{transform:rotate(135deg)}
.ikc-b:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ikc:hover .ikc-b{background:rgba(181,202,250,.26)}
.ikc-m{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;gap:10px;padding:20px 22px 48px;overflow:auto;border-radius:18px;background:#10245F;box-shadow:inset 0 0 0 1px var(--nk-line2)}
.ikc-m[hidden]{display:none}
.ikc-m h4{margin:0;font-size:19px}
.ikc-m p{font-size:16px;line-height:1.38;color:#DCE6FF;text-wrap:pretty}
.ikc .nkb-tag{margin:6px 44px 0 12px}
.ikc>h4{padding-right:38px}

/* the one big number */
.ika-big{font:700 clamp(64px,6.6vw,96px)/1 var(--display);letter-spacing:-.04em;color:#fff}

/* the 468 attack mails that ran */
.ika-tiles{display:grid;grid-template-columns:repeat(52,minmax(0,1fr));gap:2px;margin-top:16px}
.ika-tiles i{aspect-ratio:1;border-radius:1px;background:rgba(181,202,250,.55)}
@media (max-width:760px){.ika-tiles{grid-template-columns:repeat(39,minmax(0,1fr))}}

/* who we are talking to */
.ika-owners{display:flex;flex-wrap:wrap;gap:8px}
.ika-owners li{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:9px;font:500 clamp(15px,1.25vw,18px)/1.15 var(--display);color:#fff;box-shadow:inset 0 0 0 1px var(--nk-line2)}
.ika-owners em{font:500 11.5px/1 var(--nk-mono);color:var(--nk-hot)}
.ika-owners .s-in-use{color:var(--m-950);background:var(--nk-hot);box-shadow:none}
.ika-owners .s-in-use em{color:var(--m-950)}
.ika-owners .s-building{background:rgba(92,157,245,.16);box-shadow:inset 0 0 0 1px rgba(92,157,245,.6)}
.ika-owners .s-building em{color:#9CC4FA}
.ika-owners .s-talks{box-shadow:inset 0 0 0 1px rgba(92,157,245,.6)}
.ika-owners .s-talks em{color:#9CC4FA}
.mv .ika-owners li{transition:opacity .2s linear;transition-delay:calc(var(--n)*70ms + .1s)}
.mv .nkb:not(.on) .ika-owners li{opacity:0}

/* one thing against another */
.ika-vs{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--nk-line);font-size:15.5px;line-height:1.2;color:var(--m-300)}
.ika-vs:first-child,.nkb-cap+.ika-vs{border-top:0}
.ika-vs b{font:600 clamp(28px,2.6vw,38px)/1 var(--display);letter-spacing:-.02em;color:#fff}
.ika-vs b.hot{color:var(--nk-hot)}

/* the climb, from the git history */
.ika-curve-h{display:flex;gap:clamp(20px,3vw,40px)}
.ika-curve-h b{display:block;font:700 clamp(36px,3.4vw,50px)/1 var(--display);letter-spacing:-.04em;color:#fff}
.ika-curve-h span{display:block;margin-top:4px;font:400 12.5px/1.2 var(--nk-mono);color:var(--m-300)}
.ikc svg{display:block;width:100%;height:clamp(70px,10svh,100px);margin-top:12px}
.ikc svg .a{fill:rgba(255,140,115,.14)}
.ikc svg .l{fill:none;stroke:var(--nk-hot);stroke-width:2}
.mv .ikc svg{transition:clip-path 1.4s var(--nk-ease) .1s}
.mv .nkb:not(.on) svg{clip-path:inset(0 100% 0 0)}

/* the scored rounds */
.ika-rounds li{display:grid;grid-template-columns:minmax(0,1fr) 2.6em;align-items:center;gap:10px;padding:7px 0;color:var(--m-300)}
.ika-rounds u{display:block;height:24px;border-radius:5px;background:rgba(181,202,250,.08);text-decoration:none}
.ika-rounds s{display:block;height:100%;width:var(--w);border-radius:5px;background:var(--m-300);opacity:.62}
.ika-rounds b{font:500 15px/1 var(--nk-mono);text-align:right;color:#fff}
.ika-rounds .hot s{background:var(--nk-hot);opacity:1;box-shadow:0 0 16px rgba(255,140,115,.45)}
.mv .ika-rounds s{transition:width 1s var(--nk-ease);transition-delay:calc(var(--i)*160ms + .1s)}
.mv .nkb:not(.on) .ika-rounds s{width:0}

/* the stage: what is done, where we are, what is next */
.ika-stage{padding:20px 24px 22px}
.ika-stage-h{margin-bottom:20px;font-size:17px;line-height:1.2;color:var(--m-300)}
.ika-stage-h b{font:600 21px/1.2 var(--display);letter-spacing:-.015em;color:#fff}
.ika-track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 6px;font-size:14.5px;line-height:1.2;color:var(--m-300)}
.ika-track::before,.ika-track::after{content:"";position:absolute;top:6px;left:8.33%;height:2px}
.ika-track::before{right:8.33%;background:var(--nk-line2)}
.ika-track::after{width:66.67%;background:#fff;transform-origin:left}
.ika-track li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ika-track li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--nk-card);box-shadow:inset 0 0 0 2px var(--nk-line2),0 0 0 4px var(--nk-card)}
.ika-track small{display:block;margin-top:3px;font:400 12px/1.3 var(--nk-mono);color:var(--m-500)}
.ika-track .done{color:#fff}
.ika-track .done::before{background:#fff;box-shadow:0 0 0 4px var(--nk-card)}
.ika-track .now{font-weight:600;color:var(--nk-hot)}
.ika-track .now small{color:var(--nk-hot)}
.ika-track .now::before{background:var(--nk-hot);box-shadow:0 0 0 4px var(--nk-card),0 0 0 7px rgba(255,140,115,.35)}
.mv .ika-track::after{transition:transform 1.4s linear .15s}
.mv .nkb:not(.on) .ika-track::after{transform:scaleX(0)}

@media (max-width:1100px){.ika-band{grid-template-columns:1fr}}
@media (max-width:760px){
  .ikc{min-height:240px}
  .ika-stage{padding:16px}
  .ika-track{grid-template-columns:1fr;gap:14px;padding-left:2px}
  .ika-track::before,.ika-track::after{top:8px;bottom:8px;left:8px;right:auto;width:2px;height:auto}
  .ika-track::after{width:2px;height:76%;bottom:auto;transform-origin:top}
  .mv .nkb:not(.on) .ika-track::after{transform:scaleY(0)}
  .ika-track li{flex-direction:row;align-items:flex-start;gap:14px;text-align:left}
  .ika-track li::before{flex:none}
  .ika-track small{display:inline;margin:0 0 0 8px}
}

/* the stage points at the table that shows it */
.ika-essay{text-decoration:underline}
#ika-owners{scroll-margin-top:24px}
/* 26 systems: the names are the board, a name opens what we took from it */
.ikt{padding:10px}
.ikt .nkb-viz{margin:0;padding:clamp(18px,2.4vw,32px)}
.ikt-head{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.ikt-head h4{margin:0;font:600 clamp(24px,2.3vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.ikt-head .nkb-tag{margin:6px 0 0}
.ikt-names{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,2vw,24px)}
.ikt-names li{flex:1 1 auto}
.ikt-names.mes li{flex:none}
.ikt-names .ikt-brk{flex:0 0 100%;height:0;margin-top:-8px}
.ikt-names button{width:100%}
.ikt-names.mes button{width:auto}
.ikt-names button{appearance:none;border:0;padding:9px 13px;border-radius:9px;font:500 clamp(15px,1.25vw,18px)/1.15 var(--display);color:#fff;background:transparent;box-shadow:inset 0 0 0 1px var(--nk-line2);cursor:pointer;transition:background .12s linear}
.ikt-names button:hover{background:rgba(181,202,250,.14)}
.ikt-names button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ikt-names button.on{color:var(--m-950);background:var(--nk-hot);box-shadow:none}
.ikt-say{min-height:5.2em;margin-top:clamp(16px,2vw,24px);padding-top:16px;border-top:1px solid var(--nk-line);font-size:clamp(17px,1.5vw,21px);line-height:1.35;color:#DCE6FF;text-wrap:pretty}
.ikt-say i{display:block;margin-bottom:6px;font:500 12.5px/1.2 var(--nk-mono);font-style:normal;color:var(--nk-hot)}
.ikt-say b{font-weight:600;color:#fff}
/* the journey: date, stop, what it taught */
.ika-track small{margin:0 0 5px}
.ika-track b{display:block;font:600 clamp(15px,1.2vw,17px)/1.2 var(--display);letter-spacing:-.01em}
.ika-track em{display:block;margin-top:5px;padding:0 6px;font:400 13.5px/1.32 var(--font-body);font-style:normal;color:var(--m-300);text-wrap:balance}
@media (max-width:760px){
  .ika-track small{display:block;margin:0 0 3px}
  .ika-track em{padding:0}
  .ikt-say{min-height:7em}
}

/* every company, by where it really stands: the board is the signal, so the honest "no" stays on it */
#ika-owners{padding-bottom:10px}
#ika-owners>h4{margin:8px 12px 14px;padding-right:38px}
#ika-owners .nkb-viz{margin-bottom:0}
#ika-owners .ikc-b{top:10px;bottom:auto}
.ikb{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(14px,2vw,28px)}
.ikb-c{min-width:0}
.ikb h5{display:flex;align-items:baseline;gap:9px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--nk-line2);font:500 13px/1.2 var(--nk-mono);color:var(--m-300)}
.ikb h5 b{font:700 clamp(30px,2.8vw,42px)/1 var(--display);letter-spacing:-.03em;color:#fff}
.ikb-use h5 b{color:var(--nk-hot)}
.ikb ul{display:flex;flex-direction:column;gap:7px}
.ikb li{padding:10px 12px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--nk-line2)}
.ikb li b{display:block;font:600 clamp(16px,1.3vw,19px)/1.15 var(--display);letter-spacing:-.01em;color:#fff}
.ikb li span{display:block;margin-top:4px;font-size:13.5px;line-height:1.32;color:var(--m-300);text-wrap:pretty}
.ikb .ikb-pay{background:var(--nk-hot);box-shadow:none}
.ikb .ikb-pay b,.ikb .ikb-pay span{color:var(--m-950)}
@media (max-width:760px){.ikb{grid-template-columns:1fr}.ikc#ika-owners{min-height:0}}

/* ROUGH 4, direction not confirmed, his 31-10 "too much blue wall with cards": the section is the page's white, one navy panel holds the companies and the robots stand on it. Everything else is ink on white with hairlines. The 468 tiles are hidden here, not deleted. */
#ika{--nk-line:rgba(10,26,78,.12);--nk-line2:rgba(10,26,78,.22);--m-300:var(--n-700);--m-500:var(--n-600);background:none;color:var(--t2)}
#ika #ika-owners,#ika .ikc-m{--nk-line:rgba(181,202,250,.16);--nk-line2:rgba(181,202,250,.28);--m-300:#B5CAFA;--m-500:#7796E0;color:#B5CAFA}
#ika .ik-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(64px,12svh,112px) clamp(24px,4vw,64px);padding-top:0;padding-bottom:clamp(64px,12svh,112px)}
#ika .ink-grid{display:contents}
#ika #ika-owners{order:1}
#ika .ika-band{order:2;grid-column:span 12}
#ika .nkb-7{order:3;grid-column:span 5}
#ika .nkb-5{order:3;grid-column:span 7}
#ika .ikt{order:4}
#ika .ika-stage{order:5}
#ika .nkb-counted{order:6;grid-column:span 12;margin-top:-32px}

#ika .ika-band i{color:var(--t4)}
#ika .ika-band p{color:var(--t1)}

#ika .nkb{padding:0;border-radius:0;background:none;box-shadow:none}
#ika .nkb-viz{flex:1 1 auto;justify-content:flex-start;margin:0 0 16px;padding:0;border-radius:0;background:none;box-shadow:none}
#ika .nkb h4{margin:0;color:var(--t1)}
#ika .ikc .nkb-tag{margin:6px 40px 0 0}
.mv #ika .nkb{transition:opacity .4s var(--nk-ease),transform .4s var(--nk-ease)}
.mv #ika .nkb:not(.on){opacity:0;transform:translateY(8px)}

#ika .ikc-b{right:0;bottom:0;background:rgba(10,26,78,.07)}
#ika .ikc-b::before,#ika .ikc-b::after{background:var(--m-950)}
#ika .ikc:hover .ikc-b{background:rgba(10,26,78,.14)}
#ika .ikc-m{padding:24px 24px 56px;border-radius:16px;background:var(--m-950);box-shadow:0 12px 32px rgba(10,26,78,.22)}
#ika .ikc-m h4{color:#fff}
#ika .ikc.open{z-index:5}
#ika .ikc.open .ikc-b{right:12px;bottom:12px;background:rgba(181,202,250,.16)}
#ika .ikc.open .ikc-b::before,#ika .ikc.open .ikc-b::after{background:#fff}
#ika .nkb-7 .ikc-m,#ika .nkb-5 .ikc-m{bottom:auto;min-height:320px;max-height:460px}

/* the one navy panel; the robots stand on its top edge */
#ika #ika-owners{padding:0;border-radius:16px;background:var(--m-950)}
#ika #ika-owners>h4{margin:0;padding:20px 24px;border-bottom:1px solid var(--nk-line);color:#fff}
#ika #ika-owners .nkb-viz{margin:0}
#ika #ika-owners .ikc-b{top:16px;right:16px;bottom:auto;background:rgba(181,202,250,.12)}
#ika #ika-owners .ikc-b::before,#ika #ika-owners .ikc-b::after{background:#fff}
#ika .ikb{gap:0}
#ika .ikb-c{padding:20px 24px 16px;border-left:1px solid var(--nk-line)}
#ika .ikb-c:first-child{border-left:0}
#ika .ikb h5{margin:0 0 8px;padding:0;border:0}
#ika .ikb ul{gap:0}
#ika .ikb li{padding:12px 0;border-radius:0;box-shadow:none;outline:0;border-top:1px solid var(--nk-line)}
#ika .ikb li:first-child{border-top:0}
#ika .ikb .ikb-pay{margin:0 -12px;padding:12px;border-radius:9px}
#ika .ikb .ikb-pay+li{border-top:0}

/* the numbers: type on white, a hairline above */
#ika .nkb-7,#ika .nkb-5,#ika .ikt{padding-top:24px;border-top:1px solid var(--nk-line2)}
#ika .ika-big{font-size:clamp(48px,5.4vw,80px);color:var(--t1)}
#ika .ika-tiles{display:none}
#ika .ika-curve-h b{color:var(--t1)}
#ika .ikc svg{height:clamp(56px,8svh,80px)}

#ika .ikt .nkb-viz{margin:0;padding:0}
#ika .ikt-names{gap:2px 4px}
#ika .ikt-names .ikt-brk{margin-top:-2px}
#ika .ikt-names button{color:var(--t1);box-shadow:none;transition:background-color .15s var(--nk-ease),color .15s var(--nk-ease)}
#ika .ikt-names button:hover{background:rgba(10,26,78,.06)}
#ika .ikt-names button.on{color:var(--m-950);background:var(--nk-hot)}
#ika .ikt-say{color:var(--t2)}
#ika .ikt-say i{color:var(--t4)}
#ika .ikt-say b{color:var(--t1)}

#ika .ika-stage{padding:0;--nk-card:#fff}
#ika .ika-stage-h{margin:0 0 24px}
#ika .ika-stage-h b{color:var(--t1)}
#ika .ika-track::after{background:var(--m-950)}
#ika .ika-track .done{color:var(--t1)}
#ika .ika-track .done::before{background:var(--m-950)}
#ika .ika-track .now,#ika .ika-track .now small{color:var(--c-500)}

@media (max-width:1100px){
  #ika .nkb-7,#ika .nkb-5{grid-column:span 12}
}
@media (max-width:760px){
  #ika .ik-in{gap:56px 0}
  #ika #ika-owners>h4{padding:16px 20px}
  #ika .ikb-c{padding:16px 20px 12px;border-left:0}
  #ika .ikb-c+.ikb-c{border-top:1px solid var(--nk-line)}
  #ika .ikc{min-height:0}
}
@media print{
  #ika *,.mv #ika .nkb{transition:none!important}
  .mv #ika .nkb{opacity:1!important;transform:none!important}
}

/* UNSLOP pass on the white section, same source. One pattern for every figure, everything starts at the left margin. */
#ika .ika-band{grid-template-columns:minmax(0,1fr);gap:0}
#ika .ika-band>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);column-gap:clamp(24px,4vw,64px);align-items:baseline;padding:20px 0;border-top:1px solid var(--nk-line2)}
#ika .ika-band>div:last-child{border-bottom:1px solid var(--nk-line2)}
#ika .ika-band i{margin:0}
#ika .ika-band p{font-size:clamp(23px,2.5vw,36px);line-height:1.18;letter-spacing:-.02em}
#ika .ika-big,#ika .ika-curve-h b{font-size:clamp(40px,4.2vw,60px);line-height:1;letter-spacing:-.04em}
#ika .ikc svg .a{fill:none}
#ika .ikc svg{margin-top:20px;height:clamp(48px,7svh,72px)}
#ika .ikc-b{background:none}
#ika .ikc:hover .ikc-b{background:rgba(10,26,78,.07)}
#ika #ika-owners .ikc-b{background:none}
#ika .ikb .ikb-pay{margin-top:4px}
/* 26 reads like the other figures */
#ika .ikt-head{display:block}
#ika .ikt-head h4{margin-top:16px;font:600 21px/1.2 var(--display);letter-spacing:-.015em}
/* the names: each row starts and ends exactly on the margins, the chosen one is underlined */
#ika .ikt-names{justify-content:space-between;gap:0 8px}
#ika .ikt-names li:not(.ikt-brk){flex:none}
#ika .ikt-names button{width:auto;padding:6px 0;border-radius:0;color:var(--t3)}
#ika .ikt-names button:hover{background:none;color:var(--t1)}
#ika .ikt-names button.on{color:var(--t1);background:none;box-shadow:inset 0 -2px 0 var(--nk-hot)}
/* the journey starts at the margin like everything else */
@media (min-width:761px){
  #ika .ika-track::before{left:0;right:16.67%}
  #ika .ika-track::after{left:0;width:66.67%}
  #ika .ika-track li{align-items:flex-start;text-align:left}
  #ika .ika-track em{padding:0 16px 0 0;text-wrap:pretty}
}
#ika .ika-stage-h b{font-size:21px}
@media (max-width:760px){
  #ika .ika-band>div{grid-template-columns:minmax(0,1fr);row-gap:6px}
}
@media (min-width:1101px){#ika .nkb-7>h4{margin-bottom:22px}}

/* First customers: the strongest signal in the section, so it gets the room to match */
#ika #ika-owners{margin-top:0;margin-bottom:clamp(24px,6svh,64px)}
#ika #ika-owners>h4{padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,48px) 0;border-bottom:0;font:600 clamp(34px,3.6vw,52px)/1.06 var(--display);letter-spacing:-.025em;color:#fff}
#ika #ika-owners .nkb-viz{border-top:1px solid var(--nk-line)}
#ika .ikb-lead{margin:0;padding:14px clamp(24px,26vw,420px) clamp(28px,3vw,40px) clamp(24px,3.4vw,48px);font-size:clamp(17px,1.5vw,21px);line-height:1.4;color:#DCE6FF;text-wrap:pretty}
#ika #ika-owners .ikc-b{top:clamp(24px,3vw,40px);right:clamp(20px,3vw,40px)}
#ika .ikb-c{padding:clamp(24px,2.8vw,40px) clamp(24px,3.4vw,48px) clamp(24px,2.8vw,40px)}
#ika .ikb h5{margin-bottom:14px;font-size:14.5px}
#ika .ikb h5 b{font-size:clamp(46px,4.6vw,68px)}
#ika .ikb li{padding:18px 0}
#ika .ikb .ikb-pay{margin:4px -14px 0;padding:16px 14px}
#ika .ikb li b{font-size:clamp(20px,1.7vw,25px)}
#ika .ikb li span{margin-top:6px;font-size:clamp(15px,1.15vw,16.5px);line-height:1.38}
/* the "why" behind the customers card: a short text, set large, clear of the close button */
#ika-owners .ikc-m{padding-right:64px}
#ika-owners .ikc-m h4{font-size:clamp(24px,2.2vw,32px)}
#ika-owners .ikc-m p{max-width:34em;font-size:clamp(18px,1.6vw,23px);line-height:1.4}
@media (min-width:761px){#ika-owners .ikc-m{justify-content:center;gap:14px;padding:32px clamp(64px,7vw,110px)}}

/* parts/inkolega/world.css */
/* Inkolega section: little robots at work, cards in a Marblism-style grid */
#inkolega{padding-bottom:clamp(48px,8svh,96px)}
.fe-wrap{max-width:calc(1440px - 2*var(--pad));margin:0 auto;padding:0 var(--pad);box-sizing:content-box}
.fe-head h3{font-size:clamp(34px,3.9vw,56px);line-height:1.04;letter-spacing:-.03em}
.fe-head .lead{margin-top:16px;max-width:34em}
.fe-try{margin-top:10px;font-size:16px;line-height:1.35}
.fe-goal{margin-top:8px;font-size:clamp(18px,1.4vw,20px);line-height:1.42;color:var(--t3);max-width:40em}
.fe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(28px,5svh,48px)}
.fe-card{display:flex;flex-direction:column;min-width:0;padding:clamp(12px,1.1vw,16px) clamp(12px,1.1vw,16px) clamp(20px,1.7vw,26px);border-radius:20px;background:var(--m-50)}
.fe-art{aspect-ratio:16/9}
.fe-art img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fe-txt{display:flex;flex-direction:column;flex:1;padding:12px clamp(6px,.7vw,12px) 0}
.fe-wide{grid-column:span 2;flex-direction:row;align-items:center;gap:clamp(12px,1.5vw,24px)}
.fe-wide .fe-art{flex:2.1;min-width:0}
.fe-wide .fe-txt{flex:1;min-width:0;padding-top:0}
.fe-wide .fe-txt .fe-real{margin-top:16px}
.fe-card h4{margin:0;font:600 clamp(22px,1.8vw,26px)/1.15 var(--display);letter-spacing:-.015em;color:var(--t1)}
.fe-line{margin-top:8px;font-size:clamp(17px,1.25vw,18.5px);line-height:1.38;color:var(--t2);text-wrap:pretty}
.fe-real{margin-top:auto;padding-top:16px;display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.35;color:var(--t3)}
.fe-pill{flex:none;display:inline-block;padding:3px 10px;border-radius:99px;font:600 13px/1.35 var(--body);color:var(--t2);background:#fff;box-shadow:inset 0 0 0 1px var(--n-300)}
.fe-pill.live{color:#fff;background:var(--s-700);box-shadow:none}
.fe-pill.now{color:var(--s-700);box-shadow:inset 0 0 0 1px var(--s-500)}
.fe-note{margin-top:16px;max-width:52em;font-size:16px;line-height:1.42;color:var(--t3)}
.fe-cust{margin-top:clamp(56px,10svh,104px)}
.fe-cust-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end}
.fe-cust-top h4{margin:0;font:600 clamp(30px,3.2vw,46px)/1.08 var(--display);letter-spacing:-.025em;color:var(--t1)}
.fe-cust-top p{margin-top:12px;font-size:clamp(18px,1.4vw,20px);line-height:1.42;max-width:34em;padding-bottom:clamp(20px,3svh,32px)}
.fe-cust-top .fe-stage{margin-top:0;color:var(--t3)}
.fe-cust-top p.fe-first{padding-bottom:8px}
.fe-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fe-tile{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:20px;border-radius:20px;background:var(--m-50)}
.fe-tile h5{margin:0;font:600 clamp(19px,1.5vw,22px)/1.2 var(--display);color:var(--t1)}
.fe-tile p{margin:6px 0 14px;font-size:16.5px;line-height:1.45;color:var(--t2);text-wrap:pretty}
.fe-tile .fe-pill{margin-top:auto}
.fe-more{margin-top:clamp(48px,9svh,88px)}
.fe-more>h4{margin:0 0 12px;font:600 clamp(24px,2.2vw,32px)/1.1 var(--display);letter-spacing:-.02em;color:var(--t1)}
.fe-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1vw,14px)}
.fe-cards details{min-width:0;border-radius:20px;background:var(--m-50)}
.fe-cards details[open]{grid-column:1/-1;order:-1}
.fe-cards summary{position:relative;display:block;list-style:none;cursor:pointer;padding:22px 20px 24px}
.fe-cards summary::-webkit-details-marker{display:none}
.fe-cards summary::after{content:"+";position:absolute;right:18px;bottom:14px;font:500 20px/1 var(--display);color:var(--t3)}
.fe-cards details[open] summary::after{content:"\00d7"}
.fe-n{display:block;font:600 clamp(32px,3.1vw,46px)/1.05 var(--display);letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums}
.fe-t{display:block;margin-top:12px;font:600 clamp(18px,1.4vw,20px)/1.25 var(--display);color:var(--t1)}
.fe-s{display:block;margin-top:6px;padding-right:20px;font-size:15px;line-height:1.38;color:var(--t2);text-wrap:pretty}
.fe-cards details>div{padding:0 20px 24px;max-width:56em;font-size:17px;line-height:1.45}
@media (max-width:980px){.fe-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fe-cards{grid-template-columns:minmax(0,1fr)}}
.fe-td{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.fe-td b{display:block;color:var(--t1);font-weight:600}
.fe-td span{font-size:15.5px;line-height:1.38}
.fe-tl{display:grid;gap:10px}
.fe-tl small{display:block;font-size:14.5px;color:var(--t3)}
.fe-tl b{display:block;color:var(--t1);font-weight:600}
.fe-tl span{font-size:16px}
.fe-count{margin-top:16px;font-size:14px;color:var(--t4)}
@media (max-width:980px){
  .fe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fe-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fe-wide{flex-direction:column;align-items:stretch}
  .fe-wide .fe-art{flex:none}
  .fe-wide .fe-txt{padding-top:12px}
}
@media (max-width:640px){
  .fe-grid,.fe-tiles,.fe-td{grid-template-columns:minmax(0,1fr)}
  .fe-wide{grid-column:auto}
}
/* ink.css makes the robots 82vw wide up to 900px, which leaves the words no column at all */
@media (max-width:900px){
  .fe-cust-top{display:block}
  .fe-cust-top .ik-team{justify-content:center;margin-top:12px}
}
/* the same gutter as every other section on a phone */
@media (max-width:760px){.fe-wrap{padding:0 16px}}
.fe-more>.fe-why{max-width:52em;margin:0 0 24px;font-size:17px;line-height:1.45}
/* Inkolega change list, 01-11: First customers leads, features under their own heading, five work cards. */
.fe-head+.fe-cust{margin-top:clamp(28px,5svh,48px)}
.fe-feat-h{margin:clamp(48px,9svh,88px) 0 0;font:600 clamp(24px,2.2vw,32px)/1.1 var(--display);letter-spacing:-.02em;color:var(--t1)}
.fe-feat-h+.fe-grid{margin-top:20px}
.fe-cust>.fe-why{max-width:52em;margin:20px 0 0;font-size:17px;line-height:1.45}
.fe-more>h4{margin-bottom:20px}
@media (min-width:1181px){.fe-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:981px) and (max-width:1180px){.fe-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.fe-mine-h{margin:26px 0 0;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--t3)}
.fe-mine{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:44em}
.fe-mine li{font-size:clamp(16px,1.2vw,18px);line-height:1.45}
.fe-mine b{font-weight:600;color:var(--t1)}
/* One owner's team: six jobs, one manager each, 04-11-2026 */
.fe-team{margin-top:clamp(56px,10svh,104px)}
.fe-team-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end}
.fe-team-top h4{margin:0;font:600 clamp(30px,3.2vw,46px)/1.08 var(--display);letter-spacing:-.025em;color:var(--t1)}
.fe-team-top p{margin-top:12px;font-size:clamp(18px,1.4vw,20px);line-height:1.42;max-width:34em;padding-bottom:clamp(20px,3svh,32px)}
.fe-jobs{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:job}
.fe-jobs .fe-tile{counter-increment:job}
.fe-jobs .fe-tile h5::before{content:counter(job) ". ";color:var(--t3);font-weight:500}
.fe-jobs .fe-tile p.fe-test{margin-top:-4px;color:var(--t1);font-weight:500}
.fe-jobs .fe-tile:nth-child(n+4){background:transparent;box-shadow:inset 0 0 0 1px var(--n-300)}
.fe-jobs .fe-tile:nth-child(n+4) h5{margin-bottom:14px}
.fe-team>.fe-count{margin-top:14px}
@media (max-width:980px){.fe-jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fe-jobs{grid-template-columns:minmax(0,1fr)}.fe-team-top{display:block}}
.fe-team-top{grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.fe-team-art img{display:block;width:100%;height:auto;margin-bottom:clamp(16px,2.5svh,28px)}
@media (max-width:900px){.fe-team-top{display:block}.fe-team-art img{max-width:520px;margin:4px auto 20px}}
/* The grid answers the essay: each card names the slip it covers, 04-11-2026 */
.fe-feat-sub{margin:8px 0 20px;font-size:clamp(18px,1.4vw,20px);line-height:1.42;color:var(--t3);max-width:40em}

.fe-feat-sub+.fe-grid{margin-top:0}
.fe-feat-h{font:600 clamp(30px,3.2vw,46px)/1.08 var(--display);letter-spacing:-.025em}
/* Inkolega opener, his pick 04-11 (was draft ?f=1): one big heading, Inkolega line under it, the manager drawing, his four parts in a row */
.fe-head-art{display:none}
.fe-head-art img{display:block;width:100%;height:auto}
.now-h{padding-bottom:0;text-align:center}
.fe-head{display:flex;flex-direction:column;align-items:center;text-align:center}
#inkolega .fe-head h3{order:-1;margin-top:14px;max-width:none;font:500 clamp(22px,2vw,28px)/1.3 var(--display);letter-spacing:-.012em;color:var(--acc)}
.fe-goal{order:-1;margin-top:14px;max-width:38em;color:var(--t2)}
.fe-head .fe-head-art{display:block;width:min(620px,100%);margin-top:clamp(28px,5svh,48px)}
.fe-mine-h{margin-top:clamp(36px,6svh,56px);font:600 clamp(20px,1.6vw,24px)/1.2 var(--display);letter-spacing:-.01em;text-transform:none;color:var(--t1)}
.fe-mine{margin-top:18px;max-width:none;width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px clamp(20px,2.5vw,40px);text-align:left}
.fe-mine b{display:block;margin-bottom:4px}
.fe-feat-h,.fe-cust-top h4,.fe-team-top h4{font:600 clamp(26px,2.4vw,34px)/1.1 var(--display);letter-spacing:-.02em}
.fe-team-art{display:none}
.fe-team-top{display:block}
@media (max-width:980px){.fe-mine{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.fe-mine{grid-template-columns:minmax(0,1fr)}.fe-goal{text-align:left}}
.fe-full{grid-column:1/-1}
.fe-full .fe-art{flex:0 1 44%}
.fe-full .fe-txt{max-width:30em}
@media (min-width:1180px){.fe-cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fe-card-pill{align-self:flex-start;margin-top:14px}
.fe-workln{margin-top:clamp(36px,6svh,56px);font-size:clamp(17px,1.2vw,18px);line-height:1.4}
.fe-workln a{font-weight:400}
@media (min-width:641px) and (max-width:980px){.fe-grid>.fe-card:nth-last-child(2){grid-column:span 2}}

/* DESIGN 05-11 night: phone density. Feature cards: drawing beside the text (grid 2,721px -> 1,309px at 390). Customers: a ruled list, status on the right (1,658px -> 1,106px). Undo: delete this block. */
@media (max-width:640px){
 #inkolega .fe-grid{gap:10px}
 #inkolega .fe-card,#inkolega .fe-card.fe-full,#inkolega .fe-card.fe-wide{flex-direction:row;align-items:center;gap:12px;padding:12px 14px 12px 8px}
 #inkolega .fe-art,#inkolega .fe-full .fe-art,#inkolega .fe-wide .fe-art{flex:0 0 42%;aspect-ratio:4/3;height:auto}
 #inkolega .fe-txt{padding:0}
 #inkolega .fe-card h4{font-size:19px}
 #inkolega .fe-line{font-size:16px;line-height:1.4;margin-top:6px}
}
@media (max-width:640px){
 #inkolega .fe-tiles{grid-template-columns:minmax(0,1fr);gap:0}
 #inkolega .fe-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:14px 2px;border-radius:0;background:none;border-top:1px solid var(--line)}
 #inkolega .fe-tile:last-child{border-bottom:1px solid var(--line)}
 #inkolega .fe-tile h5{grid-column:1;grid-row:1}
 #inkolega .fe-tile .fe-pill{grid-column:2;grid-row:1;margin:0}
 #inkolega .fe-tile p{grid-column:1/-1;grid-row:2;margin:4px 0 0}
}

/* parts/mentions/mentions.css */
/* Honorable mentions: one navy panel holding a watch-style dot grid and a stacked deck; the still wall below it is for reduced motion and print. One palette: navy, white, the page's blue. Scoped to .ma. */
#part-mentions{margin-top:clamp(56px,10svh,96px);background:var(--paper-f)}
.ma{max-width:1440px;margin:0 auto;padding:clamp(80px,16svh,160px) var(--pad)}
.ma h2{margin:0 0 clamp(24px,4svh,44px);font:600 clamp(30px,3.2vw,46px)/1.1 var(--font-display);letter-spacing:-.025em;color:var(--m-950)}
.ma-wall{display:flex;flex-wrap:wrap;gap:clamp(22px,3svh,32px) clamp(14px,1.6vw,24px)}
.ma-card{flex:var(--a) 1 0;min-width:0}
.ma-br{flex:0 0 100%;height:0;margin-top:calc(-1*clamp(22px,3svh,32px));display:none}
.ma-br.d{display:block}
.ma-wall .ma-card{max-width:480px}
.ma-frame,.ma-term{position:relative;aspect-ratio:var(--a);border-radius:12px;overflow:hidden;background:var(--n-100)}
.ma-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:scale .5s cubic-bezier(.2,.7,.2,1)}
.ma-frame.is-move img{transform:scale(1.12);will-change:transform}
@media (hover:hover){.ma-card:hover .ma-frame img{scale:1.03}}
.ma-frame.is-bd{background:#fff;box-shadow:inset 0 0 0 1px var(--n-200)}
.ma-frame.is-bd img{mix-blend-mode:multiply}
.ma-tag{position:absolute;z-index:1;right:8px;top:8px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.88);font:400 12px/1.4 var(--font-body);color:var(--n-700)}
/* the lock's own output */
.ma-term{background:var(--m-950);color:var(--m-100);padding:clamp(14px,1.2vw,18px);display:flex;align-items:flex-end}
.ma-term pre{margin:0;font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.ma-term b{font-weight:400;color:#fff}
.ma-term em{font-style:normal;color:var(--c-400)}
.ma-card p{margin:10px 0 0;font:400 16px/1.38 var(--font-body);color:var(--n-800);text-wrap:pretty}
.ma-card p b{font-weight:600;color:var(--m-950)}
.ma-plain{margin-top:clamp(24px,3.4svh,36px);padding-top:clamp(16px,2svh,22px);border-top:1px solid var(--n-200)}
.ma-plain li{font:400 16px/1.38 var(--font-body);color:var(--n-800);text-wrap:pretty}
@media (max-width:760px){
  .ma{padding:72px 16px}
  .ma h2{font-size:28px;margin-bottom:18px}
  .ma-wall{gap:20px 12px}
  .ma-br.d{display:none}
  .ma-br.p{display:block;margin-top:-20px}
  .ma-term{padding:10px}
  .ma-term pre{font-size:11.5px}
  .ma-card p{font-size:15px;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.ma-frame img{transition:none}.ma-frame.is-move img{transform:none}}
@media print{.ma-wall{display:block}.ma-card{break-inside:avoid;margin-bottom:18px}.ma-frame{height:160px;aspect-ratio:auto}.ma-frame.is-move img{transform:none}}
/* the panel */
.ma-still{display:none}
.ma.is-still .ma-wd{display:none}
.ma.is-still .ma-still{display:block}
.ma-plain li+li{margin-top:6px}
.ma-wd{position:relative;height:clamp(660px,78svh,720px)}
.ma-dot{position:absolute;left:0;top:0;z-index:2;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(10,26,78,.035);line-height:1;cursor:pointer;will-change:transform,opacity;filter:saturate(.8);transition:filter .6s cubic-bezier(.16,1,.3,1),background .6s cubic-bezier(.16,1,.3,1);opacity:0}
.ma-dot.is-feat{background:rgba(10,26,78,.06);filter:none}
.ma-dot.is-hot{filter:none;background:rgba(10,26,78,.08)}
.ma-ic{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.ma-dot .ma-ic{width:78%;height:78%}
.ma-dot:focus-visible{outline:2px solid var(--s-500);outline-offset:3px}
.ma-sl{position:absolute;z-index:1;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(10,26,78,.12);opacity:0;transition:opacity 1.2s cubic-bezier(.16,1,.3,1) .5s}
.ma-sl{transform-origin:50% 0}
.ma-sl.s1{transform:translateY(-12px) scale(.955)}
.ma-sl.s2{transform:translateY(-24px) scale(.91)}
.ma-wd.is-in .ma-sl{opacity:1}
.ma-dk{position:absolute;left:0;top:0;z-index:4;background:#fff;color:var(--n-800);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(10,26,78,.14),0 2px 6px rgba(10,26,78,.06);cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform,opacity;opacity:0}
.ma-dk.is-drag{cursor:grabbing}
.ma-in{display:flex;flex-direction:column;height:100%;opacity:0}
/* one card for everything: what it shows fills the top, the small line and the sentence sit at the foot in one style */
.ma-ph{position:relative;flex:1 1 0;min-height:0;margin:8px 8px 0;border-radius:6px;overflow:hidden;background:var(--m-50)}
.ma-pr{position:absolute;inset:0}
.ma-pr img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ma-ph.is-bd .ma-pr img{object-fit:contain;mix-blend-mode:multiply}
.ma-ph.is-term{background:var(--m-950)}
.ma-ph.is-term .ma-term{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;padding:20px;align-items:center}
.ma-ph.is-term pre{font-size:13.5px}
.ma-em{display:block;flex:none;width:104px;height:104px;margin:20px 0 0 16px}
.ma-when{display:block;margin-top:auto;padding:0 22px;font:400 14px/1 var(--font-body);color:var(--m-500)}
.ma-dk p{margin:auto 0 0;padding:16px 22px 0;font:600 clamp(22px,1.9vw,27px)/1.2 var(--font-display);letter-spacing:-.018em;color:var(--m-950);text-wrap:pretty}
.ma-when+p{margin-top:0;padding-top:10px}
.ma-dk p b{font-weight:600;color:inherit}
.ma-dk a{color:var(--s-700)}
.ma-dk footer{display:flex;justify-content:flex-end;padding:12px 22px 14px}
.ma-dk footer small{font:400 12.5px/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--n-500,#8a93a6)}
@media (max-width:900px){
  .ma-dk p{padding:12px 16px 0;font-size:21px}
  .ma-when{padding:0 16px}
  .ma-when+p{padding-top:8px}
  .ma-em{width:84px;height:84px;margin:16px 0 0 12px}
  .ma-dk footer{padding:9px 16px 11px}
  .ma-ph.is-term .ma-term{padding:12px}
  .ma-ph.is-term pre{font-size:11.5px}
}
@media print{.ma-wd{display:none}.ma-still{display:block}}

/* parts/rails/rails.css */
/* A small curved lineup of event photos inside a chapter. The photos ride a drum that bends away from the reader as the page scrolls. Scoped to .rail. */
.rail{position:relative;height:clamp(108px,9.4vw,124px);margin-top:clamp(26px,4svh,38px);overflow:hidden;perspective:800px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.rail-c{position:absolute;left:50%;top:50%;width:clamp(132px,11vw,156px);aspect-ratio:3/2;margin-left:calc(clamp(132px,11vw,156px)/-2);border-radius:10px;overflow:hidden;background:var(--n-100);will-change:transform}
.rail-c img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.rail{height:92px;margin-top:22px;perspective:560px}.rail-c{width:112px;margin-left:-56px}}
@media print{.rail{display:none}}

/* parts/hero/hero.css */
/* The first screen. Plain, this file's first half is the whole thing: the words on white, then the four photos in their layout. No script and reduced motion get that.
   Behind .mv the same pieces are stacked in one pinned screen and hero.js opens the photos over the words. Where each photo sits lives here and only here. */
.hero{position:relative;background:#fff;color:var(--m-950)}
.hero-words{position:relative;display:flex;flex-direction:column;min-height:calc(100svh - 60px)}
.hero-photos{position:relative;height:100svh}
.hero-cell{position:absolute;overflow:hidden;clip-path:inset(4px round 12px)}
.hero-cell img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-red{left:0;top:0;width:33%;height:100%}
.hero-red img{width:calc(100%/.33);transform:translateX(-36.5%)} /* laid out as wide as the screen, then shifted so he stands in the cell */
.hero-election{left:33%;top:0;width:39%;height:48%}
.hero-podium{left:33%;top:48%;width:39%;height:52%}
.hero-podium img{object-position:62% 40%}
.hero-portrait{left:72%;top:0;width:28%;height:100%}
.hero-portrait img{object-position:50% 30%}
.hero-name{position:absolute;left:clamp(16px,1.9vw,28px);bottom:clamp(16px,1.9vw,28px);font:700 clamp(20px,3.3vw,50px)/.98 var(--display);letter-spacing:-.03em;color:#fff}
@media (max-width:760px){
  .hero-red{width:100%;height:40%}
  /* a tight crop shows this photo's softness: as little zoom as still gives head and shoulders. It scales from a point inside the cell, so it always reaches both edges */
  .hero-red img{width:100%;transform:scale(1.4);transform-origin:93% 59%}
  .hero-podium{left:0;top:40%;width:50%;height:30%}
  .hero-podium img{object-position:72% 40%}
  .hero-portrait{left:50%;top:40%;width:50%;height:30%}
  .hero-portrait img{object-position:50% 28%}
  .hero-election{left:0;top:70%;width:100%;height:30%}
}

/* ---- the move: all of it sits behind .mv, so reduced motion gets the plain version with no pin.
   Matt 05-11: the pin used to hold about a third of a screen after the last photo landed. Now it is 289svh (was 320) and hero.js lands the last photo exactly as the pin lets go, at the same speed as before. ?v=herohold shows the old hold. ---- */
@media screen{
  .mv .hero{height:289svh}
  .mv.v-herohold .hero{height:320svh}
  .mv .hero-pin{position:sticky;top:0;height:100svh;overflow:hidden;background:#fff}
  .mv .hero-pin>.hnav{position:absolute;left:0;right:0;top:0;z-index:3}
  .mv .hero-words{position:absolute;inset:0;min-height:0;z-index:1}
  .mv .hero-photos{position:absolute;inset:0;height:auto;z-index:2;pointer-events:none}
  .mv .hero-cell{clip-path:inset(0 0 100% 0);will-change:clip-path} /* shut until hero.js opens it */
  .mv .hero-cell img{will-change:transform}
  .mv .hero-name{opacity:0}
  .mv .hero-pin>.hnav,.mv .hero-words{animation:hero-focus 1.1s cubic-bezier(.16,1,.3,1) .5s backwards}
}
@keyframes hero-focus{from{opacity:0;filter:blur(14px);transform:scale(.98)}}
@media print{.hero-cell{clip-path:inset(4px round 12px)!important}.hero-words,.hero-pin>.hnav,.hero-name{opacity:1!important;visibility:visible!important}}