/* MEET KAI: a printed stage, a persistent character and seven chapters on the native page scroll. */
.mk { --mk-ease: cubic-bezier(.16,1,.3,1); position: relative; scroll-margin-top: var(--bar); background: var(--paper); }
.mk [data-kai-status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.mk__stage { position: relative; isolation: isolate; outline: none; color: var(--navy); }
.mk__mast { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--edge); font: 500 12px/1.3 var(--mono); }
.mk__mast > span { text-transform: uppercase; letter-spacing: .06em; }
.mk__mast > div { display: flex; align-items: center; gap: 24px; }
.mk__mast a, .mk__mast button { padding: 8px 0; color: inherit; background: none; border: 0; font: 500 13px/1.3 var(--font); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.mk__backdrops, .mk__halo, .mk__kai { display: none; }
.mk__panel { scroll-margin-top: var(--bar); position: relative; padding: 38px var(--edge) 48px; text-align: center; }
.mk__panel:nth-child(odd) { background: #EEF0EB; }
.mk__heading { position: relative; z-index: 3; }
.mk__eyebrow { margin: 0 0 12px; font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mk__title { margin: 0 auto; max-width: 1000px; font: 700 clamp(34px,4.4vw,66px)/1.03 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.mk__title span { display: block; }
.mk__panel:first-child .mk__title { font-size: clamp(68px,8vw,116px); }
.mk__caption { position: relative; z-index: 3; max-width: 740px; margin: 0 auto; }
.mk__caption p { margin: 0; font: 400 clamp(16px,1.35vw,20px)/1.5 var(--font); text-wrap: pretty; }
.mk__caption strong { display: block; margin-top: 12px; font: 600 16px/1.4 var(--font); }
.mk__day { display: inline-block; margin-top: 14px; }
.mk__props { position: relative; width: min(960px,100%); height: 340px; margin: 24px auto; }
.mk__fallback-kai { position: absolute; left: 50%; top: 50%; width: 190px; height: auto; transform: translate(-50%,-50%); z-index: 2; }
.mk__paper { position: absolute; width: 250px; padding: 22px; background: var(--paper); color: var(--navy); border: 1.5px solid var(--navy); box-shadow: 4px 5px 0 #17223D33; text-align: left; }
.mk__paper--left { left: 2%; top: 50%; transform: translateY(-50%) rotate(-6deg); }
.mk__paper--right { right: 2%; top: 50%; transform: translateY(-50%) rotate(5deg); }
.mk__paper-label { display: block; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #17223D33; font: 400 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.mk__paper b { display: block; font: 600 25px/1.08 var(--display); letter-spacing: -.03em; }
.mk__paper > span:not(.mk__paper-label), .mk__paper em { display: block; margin-top: 16px; font: 500 13px/1.5 var(--font); font-style: normal; }
.mk__sources b { font-size: 20px; }
.mk__sources i { display: block; height: 5px; margin: 12px 0 18px; background: #17223D15; }
.mk__sources em { padding-top: 12px; border-top: 1px dashed #17223D44; color: var(--leaf-ink); }
.mk__brain { background: #F6D784; box-shadow: 6px 7px 0 #F7EFE144; }
.mk__brain b { font-size: 33px; }
.mk__brain::before { content: ""; position: absolute; height: 17px; width: 110px; top: -17px; left: -1.5px; border: 1.5px solid var(--navy); border-bottom: 0; border-radius: 5px 8px 0 0; background: #F6D784; }
.mk__news { background: #F4E9D4; }
.mk__news-lines { height: 44px; margin-top: 16px; background: repeating-linear-gradient(0deg, #17223D22 0 2px, transparent 2px 11px); }
.mk__signals p { display: flex; justify-content: space-between; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #17223D22; font: 500 13px/1.2 var(--font); }
.mk__signals p i { color: var(--orange-ink); font-style: normal; }
.mk__goals hr { border: 0; border-top: 1px solid #17223D33; margin: 16px 0; }
.mk__plan { background: #F8EDC6; }
.mk__tickline::before { content: "✓"; margin-right: 8px; color: var(--leaf-ink); }
.mk__plan em { display: inline-block; padding: 5px 8px; color: var(--orange-ink); border: 1px solid currentColor; transform: rotate(-3deg); }
.mk__messages { border-radius: 10px; padding-bottom: 14px; }
.mk__messages p { margin: 8px 0; width: max-content; max-width: 100%; padding: 10px 12px; border-radius: 9px 9px 9px 2px; background: #E5EBD8; font: 500 14px/1.2 var(--font); }
.mk__messages p:nth-of-type(2) { margin-left: auto; background: var(--navy); color: var(--paper); border-radius: 9px 9px 2px 9px; }
.mk__messages > span:last-child { font-size: 11px; margin-top: 12px; }
.mk__receipt { border-bottom: 3px dashed var(--navy); }
.mk__learning { background: #DDE6CB; }
.mk__learning svg { width: 140px; height: 90px; display: block; margin: 0 auto 14px; color: var(--orange-ink); }
.mk__learning b { font-size: 22px; text-align: center; }
.mk__person { position: absolute; height: 320px; width: 250px; object-fit: contain; object-position: bottom; bottom: 0; }
.mk__person--left { left: 9%; transform: rotate(-3deg); }
.mk__person--right { right: 9%; transform: rotate(3deg); }
.mk__controls[hidden], .mk__scroll-track[hidden], [data-kai-reading][hidden] { display: none; }
/* Enhanced presentation. Without JavaScript or with reduced motion every chapter stays in normal flow. */
.mk--slides { --mk-height: calc(100svh - var(--bar) - var(--mbar)); }
.mk--slides .mk__stage { position: sticky; top: var(--bar); height: var(--mk-height); min-height: 500px; overflow: hidden; display: flex; flex-direction: column; }
.mk--slides .mk__backdrops { display: block; position: absolute; inset: 0; z-index: -2; background: var(--paper); }
.mk__backdrops span { position: absolute; inset: 0; opacity: 0; transition: opacity .65s var(--mk-ease); background: var(--paper); }
.mk__backdrops span.is-active { opacity: 1; }
.mk__backdrops span:nth-child(1), .mk__backdrops span:nth-child(6) { background: var(--navy); }
.mk__backdrops span:nth-child(3) { background: #E5EDF3; }
.mk__backdrops span:nth-child(4) { background: #F2E8CF; }
.mk__backdrops span:nth-child(7) { background: #E7EBDC; }
.mk--slides .mk__stage[data-dark="true"] { color: var(--paper); }
.mk--slides .mk__stage[data-dark="true"] .mk__eyebrow { color: var(--amber); }
.mk--slides .mk__viewport { position: relative; flex: 1; min-height: 0; container-type: size; }
.mk--slides .mk__panel { position: absolute; inset: 0; padding: 0 var(--edge); background: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(50px); transition: opacity .4s var(--mk-ease), transform .65s var(--mk-ease), visibility 0s .65s; }
.mk--slides .mk__panel.is-before { transform: translateY(-50px); }
.mk--slides .mk__panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
.mk--slides .mk__heading { position: absolute; top: 2cqh; left: var(--edge); right: var(--edge); }
.mk--slides .mk__title { font-size: clamp(34px, min(4.4vw, 9.5cqh), 66px); }
.mk--slides .mk__panel:first-child .mk__title { font-size: clamp(68px, min(8vw, 17cqh), 116px); }
.mk--slides .mk__caption { position: absolute; bottom: 2cqh; left: var(--edge); right: var(--edge); }
.mk--slides .mk__caption p { font-size: clamp(16px, min(1.35vw, 3cqh), 20px); }
.mk--slides .mk__props { position: absolute; left: 50%; top: 51%; width: min(960px, calc(100% - 2 * var(--edge))); height: 50cqh; margin: 0; transform: translate(-50%,-50%); }
.mk--slides .mk__fallback-kai { display: none; }
.mk--slides .mk__kai { display: block; position: absolute; left: 50%; top: 50%; z-index: 2; width: 80cqh; height: 80cqh; transform: translate(-50%,-50%); pointer-events: none; transition: transform .8s var(--mk-ease); }
.mk--slides .mk__stage[data-chapter="0"] .mk__kai { transform: translate(-50%,-48%) scale(1.14); }
.mk__kai canvas { display: block; width: 100%; height: 100%; }
.mk__standin { position: absolute; width: 44%; height: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.mk__kai.is-rendered .mk__standin, .mk__kai.is-flat .mk__standin { display: none; }
.mk__kai.is-flat { display: grid; place-items: center; }
.mk__kai.is-flat ocally-kai { --kai-size: 240px; }
.mk--slides .mk__halo { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 43cqh; aspect-ratio: 1; border-radius: 50%; background: #F4DDAB; transform: translate(-50%,-50%) rotate(-12deg); transition: transform .9s var(--mk-ease), opacity .6s var(--mk-ease); opacity: .7; }
.mk__halo::after { content: ""; position: absolute; inset: -12px 8px 8px -10px; border-radius: 50%; border: 1px solid currentColor; opacity: .4; }
.mk--slides .mk__stage[data-chapter="0"] .mk__halo { transform: translate(-50%,-48%) rotate(10deg) scale(1.12); opacity: 1; }
.mk--slides .mk__stage[data-chapter="2"] .mk__halo, .mk--slides .mk__stage[data-chapter="4"] .mk__halo { transform: translate(-50%,-50%) rotate(40deg) scale(.9); }
.mk--slides .mk__paper { transition: transform .8s var(--mk-ease); }
.mk--slides .mk__panel:not(.is-active) .mk__paper--left { transform: translate(-28px,calc(-50% + 45px)) rotate(-12deg); }
.mk--slides .mk__panel:not(.is-active) .mk__paper--right { transform: translate(28px,calc(-50% + 65px)) rotate(12deg); }
.mk--slides .mk__person { height: 45cqh; width: 32cqh; }
.mk--slides .mk__controls { position: relative; z-index: 5; display: flex; align-items: center; gap: 18px; padding: 12px var(--edge) 16px; }
.mk__chapters { flex: 1; display: flex; justify-content: center; gap: clamp(12px,2vw,32px); }
.mk__chapters button, .mk__arrow { color: inherit; background: none; border: 0; cursor: pointer; font: 500 13px/1.3 var(--font); }
.mk__chapters button { position: relative; padding: 8px 3px; min-height: 44px; }
.mk__chapters small { margin-right: 7px; opacity: .6; font: 400 10px/1.3 var(--mono); }
.mk__chapters button::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--mk-ease); }
.mk__chapters button[aria-current]::after { transform: scaleX(1); }
.mk__arrow { border: 1px solid currentColor; width: 44px; height: 44px; flex: none; border-radius: 50%; font-size: 22px; }
.mk__arrow:disabled { opacity: .25; cursor: default; }
.mk__arrow:not(:disabled):hover { transform: translateY(-2px); }
.mk__select { display: none; }
.mk--slides .mk__scroll-track { position: relative; z-index: -3; margin-top: calc(-1 * var(--mk-height)); pointer-events: none; padding-bottom: 35svh; }
.mk__scroll-track > div { height: 85svh; }
.mk :is(button,select,a):focus-visible { outline: 3px solid var(--orange); outline-offset: 5px; }
@media(max-width: 760px) {
 .mk__mast { padding: 10px 20px; min-height: 48px; }
 .mk__mast > span { font-size: 10px; }
 .mk__mast > div { gap: 18px; }
 .mk__mast a, .mk__mast button { font-size: 12px; }
 .mk__props { height: 240px; }
 .mk__paper { width: 128px; padding: 12px; box-shadow: 3px 4px 0 #17223D22; }
 .mk__paper--left { left: 0; }
 .mk__paper--right { right: 0; }
 .mk__paper-label { font-size: 7px; letter-spacing: 0; padding-bottom: 7px; margin-bottom: 10px; }
 .mk__paper b, .mk__learning b { font-size: 16px; }
 .mk__brain b { font-size: 21px; }
 .mk__paper > span:not(.mk__paper-label), .mk__paper em { font-size: 9px; margin-top: 10px; }
 .mk__sources i { margin: 8px 0 12px; height: 3px; }
 .mk__brain::before { width: 80px; height: 12px; top: -12px; }
 .mk__signals p { margin-top: 8px; padding-top: 7px; font-size: 9px; }
 .mk__news-lines { height: 33px; margin-top: 10px; }
 .mk__tickline::before { margin-right: 4px; }
 .mk__plan em { padding: 4px; }
 .mk__messages p { padding: 7px; font-size: 10px; }
 .mk__messages > span:last-child { font-size: 8px; }
 .mk__learning svg { width: 80px; height: 60px; }
 .mk__person { height: 230px; width: 160px; }
 .mk__person--left { left: -10px; }
 .mk__person--right { right: -10px; }
 .mk__fallback-kai { width: 130px; }
 .mk__caption strong { font-size: 14px; margin-top: 10px; }
 .mk--slides .mk__heading { top: 1cqh; }
 .mk--slides .mk__title { font-size: clamp(30px, 5.8cqh, 38px); }
 .mk--slides .mk__panel:first-child .mk__title { font-size: clamp(64px, 13cqh, 84px); }
 .mk__eyebrow { margin-bottom: 8px; font-size: 10px; }
 .mk--slides .mk__props { top: 44%; width: calc(100% - 32px); height: 40cqh; }
 .mk--slides .mk__kai { top: 44%; width: 71cqh; height: 71cqh; }
 .mk--slides .mk__halo { top: 44%; width: 34cqh; }
 .mk--slides .mk__caption { bottom: 2cqh; left: 24px; right: 24px; }
 .mk--slides .mk__caption p { font-size: 15px; line-height: 1.45; }
 .mk--slides .mk__paper--left { transform: translateY(-50%) rotate(-5deg); }
 .mk--slides .mk__paper--right { transform: translateY(-50%) rotate(4deg); }
 .mk--slides .mk__person { height: 39cqh; width: 28cqh; }
 .mk--slides .mk__controls { gap: 14px; padding: 8px 20px 12px; }
 .mk__chapters { display: none; }
 .mk__select { display: block; flex: 1; min-width: 0; border: 0; padding: 12px 10px; color: inherit; background: transparent; font: 500 13px/1.3 var(--font); }
 .mk__select option { color: var(--navy); background: var(--paper); }
 .mk--slides .mk__scroll-track { padding-bottom: 45svh; }
}
@media(prefers-reduced-motion:reduce) {
 .mk *, .mk *::before, .mk *::after { animation: none !important; transition: none !important; }
}