/* fonts — self-hosted (SIL OFL 1.1; licences in fonts/). No runtime request to a font service. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--bg:#0B1016;--s1:#10171F;--s2:#151E28;--s3:#1A2531;--line:#1F2A36;--line2:#2A3643;--ink:#E6ECF1;--ink2:#B9C4CE;--ink3:#93A0AC;--ink4:#7F8C99;--arr:#6FBF8B;--dep:#7FAEE6;--rem:#DCB667;--rec:#63BECB;--red:#EE8B7B;--amber:#DCB667;--sans:'Archivo',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--wrap:1320px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--rec)}
:focus-visible{outline:1px solid var(--rec);outline-offset:3px}
main:focus{outline:0}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:10px 14px;background:var(--ink);color:var(--bg);border-radius:3px}
.skip:focus{left:12px;color:var(--bg)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.mono{font-family:var(--mono)}
.k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--rec)}
.eb{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink4)}
p{text-wrap:pretty}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,16,22,.94);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2)}
.nav .wrap{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);height:64px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:30px;width:auto;display:block}
.brand span{font-weight:700;letter-spacing:.28em;font-size:15px}
.lk{display:flex;gap:clamp(14px,2vw,26px);font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--ink3)}
.lk a{color:var(--ink3)}.lk a:hover,.lk a.on{color:var(--ink)}
.grow{flex:1}
.clk{font-family:var(--mono);font-size:11px;color:var(--ink4);letter-spacing:.06em;white-space:nowrap}
.clk b{color:var(--ink2);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;padding:12px 17px;border-radius:3px;white-space:nowrap;min-height:44px}
.btn--p{background:var(--ink);color:var(--bg)}.btn--p:hover{background:#fff;color:var(--bg)}
.btn--g{border:1px solid var(--line2);color:var(--ink2)}.btn--g:hover{border-color:var(--ink4);color:var(--ink)}
.nav .btn{padding:9px 14px;min-height:36px;border:1px solid var(--ink2);color:var(--ink)}
@media (max-width:1240px){.clk{display:none}}
@media (max-width:900px){.lk{display:none}}
/* narrow-screen navigation: the same five links, behind a MENU control in the bar's own grammar */
.mnu{display:none;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink);background:none;border:1px solid var(--line2);border-radius:3px;padding:9px 12px;min-height:36px;cursor:pointer;flex:none}
.mnu:hover{border-color:var(--ink4)}
.mnav{display:none;border-top:1px solid var(--line);background:rgba(11,16,22,.98)}
.mnav a:not(.btn){display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.13em;color:var(--ink2)}
.mnav a:not(.btn):last-of-type{border-bottom:0}
.mnav a.on{color:var(--rec)}
.mnav .btn{display:none;margin:16px 0 20px;justify-content:center}
@media (max-width:900px){.mnu{display:inline-flex}.mnav:not([hidden]){display:block}}
@media (max-width:560px){.nav .nav__cta{display:none}.mnav .btn{display:flex}.mnav a:not(.btn):last-of-type{border-bottom:1px solid var(--line)}}
/* sections */
section{padding:clamp(72px,10vw,128px) 0;border-bottom:1px solid var(--line)}
h1{font-size:clamp(44px,6.4vw,88px);line-height:.98;letter-spacing:-.04em;font-weight:600;margin:18px 0 0}
.sub{font-size:clamp(20px,2.3vw,30px);line-height:1.2;letter-spacing:-.015em;color:var(--ink2);margin:20px 0 0;font-weight:500}
.lede{font-size:clamp(16px,1.4vw,18px);color:var(--ink3);max-width:58ch;margin:22px 0 0}
.ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
h2{font-size:clamp(32px,4vw,54px);line-height:1.04;letter-spacing:-.03em;font-weight:600;margin:14px 0 0;max-width:20ch}
.h2s{font-size:clamp(16px,1.35vw,18px);color:var(--ink3);max-width:60ch;margin:18px 0 0}
/* hero */
.hero{padding-top:clamp(56px,7vw,96px);padding-bottom:0;border-bottom:0}
.hero__top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.hero__aside{font-family:var(--mono);font-size:11.5px;color:var(--ink4);line-height:1.9;letter-spacing:.04em;border-left:1px solid var(--line2);padding-left:20px}
.hero__aside b{color:var(--ink2);font-weight:500}
@media (max-width:900px){.hero__top{grid-template-columns:1fr}.hero__aside{display:none}}
.hero .plate{margin-top:clamp(40px,5vw,64px)}
/* hero photograph — supplied by the product owner. It sits behind the hero text, darkened toward the left so the
   headline holds its contrast, runs on behind the forward plan and fades into the page there (kyber-home.js sets its height). */
.hero{position:relative}
.hero>.wrap,.hero>.plate{position:relative;z-index:1}
.hero__bg{position:absolute;left:0;right:0;top:0;height:clamp(520px,56vw,860px);z-index:0;pointer-events:none;background-color:var(--bg);
 background-image:linear-gradient(180deg,rgba(11,16,22,0) calc(100% - 420px),var(--bg) 100%),linear-gradient(180deg,rgba(11,16,22,.3) 0,rgba(11,16,22,.06) 24%,rgba(11,16,22,.1) 100%),linear-gradient(90deg,rgba(11,16,22,.86) 0,rgba(11,16,22,.66) 34%,rgba(11,16,22,.26) 60%,rgba(11,16,22,.1) 100%),url(assets/kyber-hero.jpg);
 background-size:cover;background-position:center top}
@media (max-width:900px){.hero__bg{background-image:linear-gradient(180deg,rgba(11,16,22,0) calc(100% - 300px),var(--bg) 100%),linear-gradient(180deg,rgba(11,16,22,.78) 0,rgba(11,16,22,.7) 100%),url(assets/kyber-hero-1200.jpg);background-size:auto 136%;background-position:60% 100%}}
/* on narrow screens the photograph is anchored to its lower three-quarters, so its own annotation labels (which would be cut mid-word) stay out of frame */
/* plates — pixel-exact product compositions scaled to their column */
.plate{position:relative;width:100%;border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--bg)}
.art{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:var(--bg)}
.pcap{display:flex;gap:14px;margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--ink4);letter-spacing:.04em;flex-wrap:wrap}
.pcap .grow{min-width:10px}
.pcap button{font:inherit;color:var(--ink3);background:none;border:1px solid var(--line2);border-radius:3px;padding:5px 10px;cursor:pointer;min-height:30px;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.pcap button:hover{color:var(--ink);border-color:var(--ink4)}
/* loop */
.loopg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(32px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,64px)}
@media (max-width:960px){.loopg{grid-template-columns:1fr}.loopg .plate{max-width:760px;margin:0 auto}}
.lpanel{border-top:1px solid var(--line2)}
.lrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;align-items:baseline}
.lrow .n{font-family:var(--mono);font-size:12px;color:var(--ink4)}
.lrow h4{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink3)}
.lrow p{margin:6px 0 0;font-size:14.5px;color:var(--ink3);display:none;max-width:52ch}
.lrow em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;padding:3px 6px;border:1px solid var(--line2);border-radius:2px;color:var(--ink4)}
.lrow.on h4{color:var(--ink)}.lrow.on p{display:block}.lrow.on em{border-color:var(--rec);color:var(--rec)}.lrow.on .n{color:var(--rec)}
.lrow:hover h4,.lrow:focus-visible h4{color:var(--ink)}
.lnote{margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--ink4);letter-spacing:.04em}
.lnote b{color:var(--amber);font-weight:500}
/* pillars */
.pils{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.pils>a{display:block;padding:clamp(22px,2.4vw,32px);border-right:1px solid var(--line);background:var(--s1);color:var(--ink)}
.pils>a:last-child{border-right:0}
.pils>a:hover{background:var(--s2);color:var(--ink)}
.pils h3{margin:14px 0 0;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;font-weight:600;line-height:1.15}
.pils .q{font-size:15px;color:var(--ink3);margin:14px 0 0}
.pils .go{margin-top:22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink4)}
.pils>a:hover .go{color:var(--rec)}
.pils .feeds{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--ink4);line-height:1.6}
@media (max-width:900px){.pils{grid-template-columns:1fr}.pils>a{border-right:0;border-bottom:1px solid var(--line)}.pils>a:last-child{border-bottom:0}}
/* chapters */
.chap{display:block}
.chap+.chap{margin-top:clamp(72px,9vw,120px)}
.chap__t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);column-gap:clamp(28px,5vw,80px);margin-bottom:clamp(24px,3vw,36px)}
.chap__t>*{grid-column:1}
.chap__t>ul{grid-column:2;grid-row:1/span 3;align-self:end}
.chap__t p{max-width:62ch}
.chap__ts{display:flex;align-items:center;gap:12px}
.chap__ts .t{font-family:var(--mono);font-size:clamp(28px,2.6vw,36px);letter-spacing:-.01em;color:var(--ink)}
.chap__ts .p{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;padding:3px 7px;border:1px solid var(--rec);color:var(--rec);border-radius:2px}
.chap h3{margin:16px 0 0;font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.025em;font-weight:600}
.chap p{color:var(--ink3);font-size:15.5px;margin:14px 0 0}
.chap ul{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.chap li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink2);display:flex;gap:10px}
.chap li::before{content:'—';color:var(--ink4);font-family:var(--mono)}
@media (max-width:900px){.chap__t{grid-template-columns:1fr}.chap__t>ul{grid-column:1;grid-row:auto}}
.pillarhead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.pillarhead .k{font-size:12px}
.pillarhead h2{max-width:24ch}
/* principles */
.prin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line2)}
.prin>div{padding:28px clamp(16px,2vw,28px) 0 0;border-right:1px solid var(--line);margin-right:clamp(16px,2vw,28px)}
.prin>div:last-child{border-right:0;margin-right:0}
.prin h3{margin:0;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;font-weight:600}
.prin p{color:var(--ink3);font-size:15px;margin:12px 0 0;max-width:38ch}
.spec{margin-top:20px;border:1px solid var(--line2);border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:11.5px}
.spec div{display:flex;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink2);background:var(--s1)}
.spec div:last-child{border-bottom:0}
.spec span{color:var(--ink4);width:96px;flex:none;letter-spacing:.06em}
.spec .rc{color:var(--rec)}.spec .ok{color:var(--arr)}.spec .un{color:var(--red)}
@media (max-width:900px){.prin{grid-template-columns:1fr}.prin>div{border-right:0;margin-right:0;padding-bottom:28px;border-bottom:1px solid var(--line)}}
/* platform */
.plat{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin-top:40px;border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.plat>div{padding:20px 18px;border-right:1px solid var(--line);background:var(--s1)}
.plat>div:last-child{border-right:0}
.plat b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink4);font-weight:500}
.plat span{display:block;margin-top:10px;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.plat i{display:block;font-style:normal;margin-top:8px;font-size:13px;color:var(--ink3)}
@media (max-width:1000px){.plat{grid-template-columns:repeat(3,1fr)}.plat>div:nth-child(3){border-right:0}.plat>div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:600px){.plat{grid-template-columns:1fr 1fr}}
/* cta */
.cta{border-bottom:0;text-align:left}
.cta h2{font-size:clamp(36px,5.4vw,76px);max-width:16ch}
/* document page (privacy policy): the same type and rules, set for reading */
.doc{padding-top:clamp(56px,7vw,96px)}
.doc h1{font-size:clamp(36px,5vw,64px);max-width:16ch}
.doc h2{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;margin:44px 0 0;max-width:none}
.doc p,.doc li{color:var(--ink2);font-size:16px;max-width:72ch}
.doc p{margin:14px 0 0}
.doc ul{margin:14px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);max-width:72ch}
.doc li{padding:12px 0;border-bottom:1px solid var(--line)}
.doc li b{color:var(--ink);font-weight:600}
.doc a,.enq__n a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.doc a:hover,.enq__n a:hover{color:var(--rec)}
.nav .nav__back{border-color:var(--line2);color:var(--ink2)}
/* demonstration request — the one form on the site, in the page's own grammar: mono labels, hairline fields */
.enq{margin-top:36px;max-width:820px}
.enq__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.enq__g[hidden]{display:none}
.fld{display:block}.fld--w{grid-column:1/-1}
.fld span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink4);margin-bottom:7px}
.fld input,.fld textarea{display:block;width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--s1);border:1px solid var(--line2);border-radius:3px;padding:12px 13px;min-height:46px}
.fld textarea{resize:vertical;line-height:1.5}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--rec);box-shadow:0 0 0 1px var(--rec)}
.enq__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
button.btn{border:0;cursor:pointer}
button.btn:disabled{opacity:.6;cursor:default}
.enq__n{font-size:13px;color:var(--ink4);margin:18px 0 0;max-width:62ch}
.enq__st{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.6;color:var(--ink3);margin:16px 0 0;min-height:1.6em}
.enq__st.ok{color:var(--arr)}.enq__st.err{color:var(--red)}
@media (max-width:640px){.enq__g{grid-template-columns:1fr}}
.foot{border-top:1px solid var(--line);padding:28px 0 40px}
.foot .wrap{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--ink4);letter-spacing:.06em}
.foot img{height:22px;width:auto}
.foot__co{margin-top:18px;gap:8px 24px!important;line-height:1.6}
.foot__co::before{content:'';flex-basis:100%;height:1px;background:var(--line);margin-bottom:10px}
/* the AMS Group logo is navy and gold, so it sits on a light tile to keep its own colours on the dark page */
.foot__ams{display:inline-flex;background:#fff;border-radius:4px;padding:8px 12px;flex:none}
.foot .foot__ams img{height:30px;width:auto;display:block}
.foot__co a{color:var(--ink3);letter-spacing:.12em}.foot__co a:hover{color:var(--ink)}

/* ═════ plate internals (1440-space) ═════ */
@keyframes rs{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rx{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes wid{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hgt{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dr{to{stroke-dashoffset:0}}
.art .a{opacity:0}.art .ax{opacity:0}
.run .a{animation:rs .42s cubic-bezier(.2,.7,.2,1) both}
.run .ax{animation:rx .42s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art .a,.art .ax{opacity:1}.run .a,.run .ax{animation:none!important}.art path{stroke-dashoffset:0!important;animation:none!important}.art .ldr,.art .arw,.art .bar,.art .frag{animation:none!important}.seg{transition:none}}
.tg{font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 6px;border:1px solid;border-radius:2px}
.tg.arr{color:var(--arr);border-color:#2E5238;background:#16281D}
.tg.dep{color:var(--dep);border-color:#2C4568;background:#141F31}
.av{width:28px;height:28px;border-radius:50%;border:1px dashed var(--rec);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--rec);flex:none}
.av.s{border:1px solid var(--line2);color:var(--ink3)}
.pl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink4)}
/* hero plate */
.rib{position:absolute;left:0;right:0;top:0;height:226px;border-bottom:1px solid var(--line);background:var(--s1)}
.rib .axl{position:absolute;left:0;right:0;top:0;height:26px;border-bottom:1px solid var(--line)}
.rib .tk{position:absolute;top:0;height:26px;line-height:26px;padding-left:6px;border-left:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--ink4)}
.rib .tk.d{color:var(--ink2);border-left-color:var(--line2)}
.rib .now{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:6}
.rib .now b{position:absolute;top:0;left:-2px;height:26px;line-height:26px;padding:0 6px;background:var(--red);color:var(--bg);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;font-weight:500;white-space:nowrap}
.rib .band{position:absolute;top:26px;bottom:0;background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(255,255,255,.025) 6px 12px);border-left:1px dashed var(--line2)}
.rib .bl{position:absolute;top:32px;font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--ink4);padding-left:8px}
.ch{position:absolute;height:30px;display:flex;align-items:center;gap:7px;padding:0 9px 0 7px;border:1px solid var(--line2);border-left-width:3px;border-radius:3px;background:var(--s2);font-family:var(--mono);font-size:10px;color:var(--ink3);white-space:nowrap;overflow:hidden}
.ch b{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink)}
.ch.arr{border-left-color:var(--arr)}.ch.dep{border-left-color:var(--dep)}.ch.rem{border-left-color:var(--rem)}
.ch.un{border-style:dashed;border-left-style:solid;background:transparent}
.ch.fo{border-color:var(--rec);box-shadow:0 0 0 1px var(--rec);background:#0F2328;z-index:5}
.ldr{position:absolute;width:1px;background:var(--rec);transform-origin:top;animation:hgt .5s cubic-bezier(.2,.7,.2,1) 900ms both}
.ctx{position:absolute;left:720px;top:262px;width:660px;border:1px solid var(--line2);border-radius:5px;background:var(--s1);z-index:8;overflow:hidden}
.ctx__h{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
.ctx__h b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.ctx__h i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink4)}
.ctx__r{padding:10px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px;color:var(--ink2);display:flex;gap:18px}
.ctx__rec{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);background:#0F2328}
.ctx__rec .kk{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--rec)}
.ctx__rec b{font-size:16px;font-weight:600}
.facts{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
.facts>div{padding:12px 14px;border-right:1px solid var(--line)}
.facts>div:last-child{border-right:0}
.facts .kk{font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--ink4)}
.facts .v{font-family:var(--mono);font-size:16px;color:var(--ink);margin-top:5px}
.facts .v.ok{color:var(--arr)}
.alt{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.alt b{font-size:13.5px;font-weight:600;color:var(--ink2)}
.alt .nr{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--amber);border:1px dashed var(--amber);padding:2px 6px;border-radius:2px}
.alt span{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.ctx__f{display:flex;align-items:center;gap:10px;padding:12px 18px;font-family:var(--mono);font-size:10.5px;color:var(--ink4);letter-spacing:.04em}
.ctx__f .g{flex:1}
.ctx__f .dc{font-size:10.5px;letter-spacing:.12em;padding:8px 12px;border:1px solid var(--ink2);color:var(--ink);border-radius:3px}
.vchain{position:absolute;left:56px;top:262px;width:560px}
.vchain .h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ink4)}
.vchain .s{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:10px 0 22px;line-height:1.2}
.vchain ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.vchain li{display:grid;grid-template-columns:32px 150px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--ink3);align-items:baseline}
.vchain li span:first-child{color:var(--ink4);font-size:10.5px}
.vchain li b{font-weight:500;letter-spacing:.1em;font-size:11px;color:var(--rec)}
/* changed */
.oc{position:absolute;inset:0;padding:36px 44px}
.oc__tl{position:relative;height:130px;border:1px solid var(--line2);border-radius:5px;background:var(--s1);overflow:hidden}
.oc__ax{position:absolute;left:0;right:0;top:0;height:24px;border-bottom:1px solid var(--line)}
.oc__ax span{position:absolute;top:0;line-height:24px;padding-left:6px;border-left:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--ink4)}
.ghost{position:absolute;top:52px;height:40px;border:1px dashed var(--ink4);border-radius:3px;display:flex;align-items:center;padding:0 10px;font-family:var(--mono);font-size:10.5px;color:var(--ink4)}
.real{position:absolute;top:52px;height:40px;border:1px solid var(--dep);border-left-width:3px;border-radius:3px;background:#141F31;display:flex;align-items:center;gap:9px;padding:0 10px;font-family:var(--mono);font-size:10.5px;color:var(--ink2)}
.real b{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}
.arw{position:absolute;top:70px;height:2px;background:var(--dep);transform-origin:left;animation:wid .6s cubic-bezier(.2,.7,.2,1) 600ms both}
.arw::after{content:'';position:absolute;right:-1px;top:-4px;border-left:7px solid var(--dep);border-top:5px solid transparent;border-bottom:5px solid transparent}
.dlt{position:absolute;top:30px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--dep)}
.oc__b{display:grid;grid-template-columns:400px minmax(0,1fr);gap:18px;margin-top:18px}
.hold{border:1px solid var(--line2);border-radius:5px;background:var(--s1);padding:18px 20px}
.hold .v{display:flex;align-items:center;gap:10px;margin-top:12px}
.hold .v b{font-size:17px;font-weight:600}
.hold .st{font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:3px 7px;border:1px solid var(--arr);color:var(--arr);border-radius:2px}
.hold p{margin:12px 0 0;font-size:13.5px;color:var(--ink3);line-height:1.5}
.hold .adopt{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;padding:10px 14px;border:1px solid var(--ink2);color:var(--ink);border-radius:3px}
.ds{border:1px solid var(--line2);border-radius:5px;overflow:hidden}
.ds__h{padding:11px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink4);background:var(--s1)}
.ds__r{display:grid;grid-template-columns:130px minmax(0,1fr) 160px;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center;font-size:13.5px;color:var(--ink2)}
.ds__r:last-child{border-bottom:0}
.ds__r .kk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink4)}
.ds__r .s{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-align:right}
.ds__r .s.ok{color:var(--arr)}.ds__r .s.w{color:var(--amber)}.ds__r .s.n{color:var(--ink4)}
.ds__r .m{font-family:var(--mono);font-size:12px}
.ds__r .m s{color:var(--ink4)}
/* counted */
.oj{position:absolute;inset:0;padding:36px 44px}
.oj__row{display:grid;grid-template-columns:270px repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--line2);border-radius:5px;overflow:hidden}
.oj__row>div{padding:18px;border-right:1px solid var(--line);background:var(--s1);min-height:250px}
.oj__row>div:last-child{border-right:0}
.oj__src{background:var(--s2)!important}
.oj .nm{font-size:19px;font-weight:600;margin:10px 0 4px}
.oj .sm{font-family:var(--mono);font-size:11px;color:var(--ink3);line-height:1.6}
.oj .done{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;padding:4px 8px;border:1px solid var(--arr);color:var(--arr);border-radius:2px}
.oj .was{font-family:var(--mono);font-size:13px;color:var(--ink4);text-decoration:line-through;margin-top:16px}
.oj .is{font-family:var(--mono);font-size:23px;color:var(--ink);margin-top:4px}
.oj .is.ok{color:var(--arr)}
.oj .why{font-size:12.5px;color:var(--ink3);margin-top:12px;line-height:1.5}
.oj .pil{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:3px 6px;border:1px solid var(--line2);border-radius:2px;color:var(--ink3)}
.oj .bar{height:2px;background:var(--rec);transform-origin:left;margin-top:-1px;animation:wid 1.5s cubic-bezier(.2,.7,.2,1) 500ms both}
.oj__ft{margin-top:22px;font-size:15.5px;color:var(--ink2)}
/* opportunity */
.op{position:absolute;inset:0;padding:36px 44px;display:grid;grid-template-columns:330px minmax(0,1fr) 300px;gap:18px}
.box{border:1px solid var(--line2);border-radius:5px;background:var(--s1);overflow:hidden}
.box__h{padding:11px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink4);display:flex;gap:8px}
.box__b{padding:16px}
.pp{display:flex;align-items:center;gap:12px}
.pp b{font-size:18px;font-weight:600}
.pp i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink4)}
.req{margin-top:16px;border:1px solid var(--rem);border-left-width:3px;border-radius:3px;padding:12px 14px;background:#211B10}
.req .pl{color:var(--amber)}
.req div{font-size:14px;color:var(--ink);margin-top:6px;font-weight:600}
.req span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink3);margin-top:6px}
.prog{margin-top:16px}
.prog .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.prog .trk{height:6px;border:1px solid var(--line2);border-radius:2px;margin-top:6px;position:relative;overflow:hidden}
.prog .trk i{position:absolute;left:0;top:0;bottom:0;background:var(--rec)}
.prog .trk em{position:absolute;top:0;bottom:0;border-left:1px dashed var(--ink2)}
.wk{position:relative;height:100%}
.wk__ax{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.wk__ax div{padding:9px 10px;font-family:var(--mono);font-size:10px;color:var(--ink4);border-right:1px solid var(--line);letter-spacing:.06em}
.wk__ax div:last-child{border-right:0}
.wk__ax div.t{color:var(--ink2)}
.wk__g{position:relative;height:292px}
.wk__col{position:absolute;top:0;bottom:0;border-right:1px solid var(--line)}
.mvb{position:absolute;height:26px;display:flex;align-items:center;gap:6px;padding:0 7px;border:1px solid var(--line2);border-left-width:3px;border-radius:3px;background:var(--s2);font-family:var(--mono);font-size:9.5px;color:var(--ink4);white-space:nowrap;overflow:hidden}
.mvb b{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink3)}
.mvb.arr{border-left-color:var(--arr)}.mvb.dep{border-left-color:var(--dep)}
.mvb.dim{opacity:.55}
.mvb.hit{border-color:var(--rec);box-shadow:0 0 0 1px var(--rec);background:#0F2328;opacity:1;z-index:4}
.mvb.hit b{color:var(--ink)}
.hitl{position:absolute;border:1px dashed var(--rec);border-radius:4px;pointer-events:none}
.mt{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px;color:var(--ink2)}
.mt span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink4);padding-top:2px}
.mt .ok{color:var(--arr);font-family:var(--mono);font-size:12px}
.sfc{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--ink4);line-height:1.6}
.sfc b{display:block;color:var(--rec);font-weight:500;letter-spacing:.12em;font-size:10px;margin-bottom:4px}
/* chart */
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.clbl{position:absolute;z-index:8;font-family:var(--mono);font-size:11px;color:var(--ink2);letter-spacing:.04em;line-height:1.5}
.clbl b{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--amber);font-weight:500}
.clbl.t b{color:var(--rec)}.clbl.w b{color:var(--ink)}
.cldr{position:absolute;z-index:7;width:1px;background:var(--ink3)}
.bnd{position:absolute;right:24px;bottom:18px;z-index:9;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink4);border:1px solid var(--line2);padding:6px 10px;border-radius:3px;background:var(--bg)}
.legend{position:absolute;left:24px;bottom:18px;z-index:9;display:flex;gap:18px;font-family:var(--mono);font-size:10px;color:var(--ink3);background:var(--bg);padding:6px 10px;border:1px solid var(--line2);border-radius:3px}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:22px;height:0;border-top:1.5px solid;display:inline-block}
.stats{position:absolute;left:24px;top:22px;z-index:9;display:flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden;background:var(--bg)}
.stats>div{padding:10px 16px;border-right:1px solid var(--line)}
.stats>div:last-child{border-right:0}
.stats b{display:block;font-family:var(--mono);font-size:19px;font-weight:400;color:var(--ink)}
.stats span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink4)}
/* vessels */
.vl{position:absolute;inset:0;padding:32px 44px}
.vl__in{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line2);border-radius:5px;background:var(--s1)}
.vl__in b{font-size:17px;font-weight:600}
.vl__in span{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.vl__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.vc{border:1px solid var(--line2);border-radius:5px;background:var(--s1);overflow:hidden}
.vc svg{display:block;width:100%;height:150px;background:var(--bg);border-bottom:1px solid var(--line)}
.vc__b{padding:11px 13px}
.vc__b b{font-size:13.5px;font-weight:600}
.vc__b div{font-family:var(--mono);font-size:10.5px;color:var(--ink3);margin-top:4px;line-height:1.55}
.pat{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px}
.pat__p{border:1px solid var(--line2);border-left:2px solid var(--amber);border-radius:0 5px 5px 0;background:var(--s1);padding:14px 18px}
.pat__p .pl{color:var(--amber)}
.pat__p p{margin:8px 0 0;font-size:15px;color:var(--ink);line-height:1.45}
.pat__p i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink4);margin-top:8px}
.hand{border:1px solid var(--line2);border-radius:5px;background:var(--s2);padding:14px 16px}
.hand .pl{color:var(--rec)}
.hand p{margin:8px 0 0;font-size:13px;color:var(--ink2);line-height:1.5}
/* loop plate */
.seg{fill:none;stroke:var(--line2);stroke-width:14;transition:stroke .5s cubic-bezier(.2,.7,.2,1)}
.seg.on{stroke:var(--rec)}.seg.done{stroke:#2C4A50}
.slab{position:absolute;width:180px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink4);line-height:1.45;cursor:pointer}
.slab b{display:block;font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink3);margin:2px 0 3px;letter-spacing:-.01em}
.slab.on b{color:var(--ink)}.slab.on span{color:var(--rec)}
.core{position:absolute;left:330px;top:160px;width:300px;height:300px;display:flex;align-items:center;justify-content:center}
.frag{width:236px;border:1px solid var(--line2);border-radius:4px;background:var(--s1);overflow:hidden;animation:rs .42s cubic-bezier(.2,.7,.2,1) both}
.frag__h{padding:8px 11px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--ink4)}
.frag__r{display:flex;align-items:center;gap:8px;padding:7px 11px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--ink2)}
.frag__r:last-child{border-bottom:0}
.frag__r .g{flex:1}
.frag__r .ok{color:var(--arr)}.frag__r .no{color:var(--amber)}.frag__r .rc{color:var(--rec)}
.frag__r b{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink)}

/* ═════ narrow-screen compositions ═════
   Below ~860px of plate width the 1440-space compositions would scale past legibility, so each one is
   rebuilt from the same atoms as a reflowed or cropped composition at natural size. Same story, same
   order of reveal, same certainty grammar. kyber-home.js chooses which builder runs. */
.plate--flow .art{position:static;overflow:visible}
.m{position:relative}
.m .a,.m .ax{will-change:opacity}
/* hero: the forward plan cropped to the hours around the job, then the decision context */
.m .rib{position:relative;height:160px}
.m .ch{gap:6px;padding:0 8px 0 6px}
.m-pad{padding:20px 16px 22px}
.m .vchain{position:static;width:auto}
.m .vchain .s{font-size:20px;margin:8px 0 18px}
.m .vchain ol{margin-top:20px}
.m .vchain li{grid-template-columns:24px 100px minmax(0,1fr);gap:8px;font-size:11.5px}
.m .ctx{position:static;width:auto}
.m .ctx__h{flex-wrap:wrap;gap:6px 10px;padding:12px 14px}
.m .ctx__r{flex-wrap:wrap;gap:4px 16px;padding:10px 14px;font-size:11px}
.m .ctx__rec{flex-wrap:wrap;gap:8px 10px;padding:12px 14px}
.m .facts>div{padding:10px 12px}
.m .alt{flex-wrap:wrap;gap:6px 10px;padding:11px 14px}
.m .ctx__f{flex-wrap:wrap;padding:12px 14px}
/* changed */
.m .oc,.m .oj,.m .vl{position:static;padding:16px}
.m .oc__ax span{white-space:nowrap}
.m .oc__tl{height:150px}
.m .dlt{left:10px;right:10px;line-height:1.5}
.m .ghost,.m .real{top:78px}
.m .real,.m .ghost{padding:0 8px;white-space:nowrap;overflow:hidden}
.m .oc__b{grid-template-columns:260px minmax(0,1fr);gap:12px;margin-top:12px}
.m .hold{padding:16px}
/* counted */
.m .oj__row{grid-template-columns:repeat(2,minmax(0,1fr))}
.m .oj__row>div{min-height:0;padding:14px;border-bottom:1px solid var(--line)}
.m .oj__row>div:nth-child(odd){border-right:0}
.m .oj__row>div:first-child,.m .oj__row>div:last-child{grid-column:1/-1;border-right:0}
.m .oj__row>div:last-child{border-bottom:0}
.m .oj .is{font-size:20px}
.m .oj .was{margin-top:12px}
.m .oj__ft{font-size:14.5px;margin-top:16px}
/* opportunity: the week reflowed from a grid into day rows */
.m .op{position:static;padding:16px;grid-template-columns:1fr;gap:12px}
.m-day{display:grid;grid-template-columns:62px minmax(0,1fr);border-bottom:1px solid var(--line)}
.m-day:last-child{border-bottom:0}
.m-day>span{padding:13px 0 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink4)}
.m-day.t>span{color:var(--ink2)}
.m-day>div{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 8px 0;align-items:center}
.m .mvb{position:relative}
.m-day em{flex-basis:100%;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--rec)}
/* chart: the corridor cropped to the pressure area, annotations set beneath it */
.m-chart{padding:16px;display:grid;gap:12px}
.m .stats,.m .legend,.m .bnd,.m .clbl{position:static}
.m .stats{justify-self:start}
.m .chart svg{position:static;display:block;height:auto;border:1px solid var(--line);border-radius:4px}
.m-notes{display:grid;gap:10px}
.m .clbl{padding-left:10px;border-left:2px solid var(--amber)}
.m .clbl.t{border-left-color:var(--rec)}.m .clbl.w{border-left-color:var(--ink)}
.m .legend{flex-wrap:wrap;gap:8px 16px;justify-self:start}
.m .bnd{justify-self:start;line-height:1.5}
/* vessels */
.m .vl__in{flex-wrap:wrap;gap:6px 12px;padding:12px 14px}
.m .vl__in span{line-height:1.5}
.m .vl__g{gap:10px;margin-top:12px}
.m .vc svg{height:auto}
.m .pat{grid-template-columns:1fr;gap:10px;margin-top:12px}
@media (max-width:639px){
 .m .facts{grid-template-columns:repeat(3,1fr)}
 .m .facts>div:nth-child(3){border-right:0}
 .m .facts>div:nth-child(-n+3){border-bottom:1px solid var(--line)}
 .m .facts .v{font-size:15px}
 .m .ctx__h i,.m .ctx__rec .kk{flex-basis:100%}
 .m .alt span:last-child{flex-basis:100%;padding-left:38px}
 .m .ctx__f .g{display:none}
 .m .ctx__f .dc{margin-top:10px}
 .m .oc__b{grid-template-columns:1fr}
 .m .ds__r{grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;padding:12px 14px}
 .m .ds__r>span:nth-child(2){grid-column:1/-1;grid-row:2}
 .m .vl__g{grid-template-columns:repeat(2,minmax(0,1fr))}
 .m .vl__in .grow{display:none}
}
@media (min-width:760px){
 .m .oj__row{grid-template-columns:repeat(5,minmax(0,1fr))}
 .m .oj__row>div:nth-child(odd){border-right:1px solid var(--line)}
 .m .oj__row>div:last-child{grid-column:auto;border-right:0}
 .m .oj__row>div:not(:first-child){border-bottom:0}
 .m .op{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
 .m .op>.box:nth-child(2){grid-column:2;grid-row:1/span 2}
}
/* the loop ring at phone width: the ring and its live fragment; the step names stay in the list above it */
.core.n{left:30px;top:30px}