:root{--ink:#1B2A3A;--sky:#0EA5E9;--amber:#F4B740;--cream:#FBF8F1;--pblue:#EAF4FB;--soft:rgba(27,42,58,.72);--r:255px 15px 225px 15px/15px 225px 15px 255px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:16px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--cream) radial-gradient(rgba(27,42,58,.07) 1.4px,transparent 1.4px);background-size:26px 26px;-webkit-font-smoothing:antialiased}
::selection{background:var(--sky);color:var(--cream)}
a{color:inherit}img{max-width:100%;display:block}
h1,h2,h3{font-family:"Poppins","Inter",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0}
.hand{font-family:"Architects Daughter","Comic Sans MS","Bradley Hand",cursive;color:var(--sky);font-size:1.35rem;margin:0 0 .4rem;transform:rotate(-1deg);display:inline-block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:40;background:rgba(251,248,241,.95);backdrop-filter:blur(6px);border-bottom:2.5px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 1.5rem "Poppins",system-ui,sans-serif}.logo b{color:var(--sky)}
.nav-links{display:flex;gap:22px;align-items:center;font-weight:600;font-size:.92rem}
.nav-links a{text-decoration:none;opacity:.8}.nav-links a:hover{color:var(--sky);opacity:1}
.lang{font-weight:700;font-size:.9rem}.lang span{color:var(--sky)}.lang a{opacity:.45;text-decoration:none}
@media(max-width:820px){.nav-links .hide-m{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--ink);border-radius:255px 12px 225px 14px/14px 225px 12px 255px;padding:13px 24px;font:700 1rem "Poppins",system-ui,sans-serif;text-decoration:none;transition:transform .12s,box-shadow .12s;cursor:pointer}
.btn:hover{transform:translate(-1px,-1px)}.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn-ink{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--sky)}.btn-sky{background:var(--sky);color:var(--cream);box-shadow:4px 4px 0 var(--ink)}.btn-cream{background:var(--cream);box-shadow:4px 4px 0 var(--ink)}
.btn-sm{padding:9px 16px;font-size:.88rem}
.marker{background:linear-gradient(104deg,transparent 1%,rgba(14,165,233,.26) 2.4%,rgba(14,165,233,.22) 95%,transparent 98%);padding:0 .15em;border-radius:.2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.marker-a{background:linear-gradient(104deg,transparent 1%,rgba(244,183,64,.4) 2.4%,rgba(244,183,64,.34) 95%,transparent 98%);padding:0 .15em;border-radius:.2em}
/* hero */
.hero{padding:64px 0 72px;border-bottom:2.5px solid var(--ink)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.3rem)}
.lede{font-size:1.15rem;color:var(--soft);max-width:560px;margin:22px 0 28px}
.tag{display:inline-flex;gap:8px;align-items:center;background:var(--amber);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:3px 3px 0 var(--ink);padding:6px 14px;font:700 .75rem "Poppins",sans-serif;text-transform:uppercase;letter-spacing:.08em;transform:rotate(-2deg);margin-bottom:20px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}
.collage{position:relative;height:460px}
.ph{position:absolute;border:3px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:6px 7px 0 var(--ink);background:var(--pblue);margin:0}
.ph img{width:100%;height:100%;object-fit:cover}
.ph figcaption{position:absolute;left:10px;bottom:10px;background:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700}
.ph1{width:66%;height:62%;left:0;top:0;transform:rotate(-2deg)}
.ph2{width:48%;height:44%;right:0;top:6%;transform:rotate(3deg)}
.ph3{width:44%;height:40%;left:8%;bottom:0;transform:rotate(2deg)}
.ph4{width:50%;height:46%;right:2%;bottom:3%;transform:rotate(-3deg)}
.stamp{position:absolute;right:38%;top:47%;z-index:3;background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--r);padding:8px 14px;font:700 .82rem "Poppins",sans-serif;box-shadow:3px 3px 0 var(--sky);transform:rotate(-6deg)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.collage{height:380px}}
/* legend */
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pill{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:700;background:var(--cream)}
.dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink)}
.k-local{background:var(--amber)}.k-demo{background:var(--sky)}.k-int{background:repeating-linear-gradient(45deg,var(--cream) 0 3px,var(--ink) 3px 5px)}
section.blk{padding:84px 0;border-bottom:2.5px solid var(--ink)}
.blue{background:var(--pblue) radial-gradient(rgba(14,165,233,.1) 1.4px,transparent 1.4px);background-size:26px 26px}
.head{max-width:720px;margin-bottom:44px}.head h2{font-size:clamp(1.9rem,3.8vw,3rem)}.head p{color:var(--soft);font-size:1.08rem}
/* paths */
.paths{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.path{grid-column:span 6;background:var(--cream);border:2.5px solid var(--ink);border-radius:26px;box-shadow:5px 6px 0 var(--ink);display:flex;flex-direction:column;overflow:hidden;transition:transform .2s,box-shadow .2s}
.path:hover{transform:translateY(-3px);box-shadow:8px 10px 0 var(--ink)}
.path.wide{grid-column:span 12;flex-direction:row}.path.wide .pimg{width:42%;min-height:100%;border-right:2.5px solid var(--ink);border-bottom:0}
.path.third{grid-column:span 4}
.pimg{height:200px;border-bottom:2.5px solid var(--ink);overflow:hidden}.pimg img{width:100%;height:100%;object-fit:cover}
.pbody{padding:26px;display:flex;flex-direction:column;gap:12px;flex:1}
.pbody h3{font-size:1.4rem}.pbody p{margin:0;color:var(--soft)}
.num{font:800 .85rem "Poppins",sans-serif;color:var(--sky)}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:.94rem}
.steps li{display:flex;gap:10px}.steps li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13 C 7 15, 9 18, 10 20 C 13 12, 17 6, 22 3' stroke='%230EA5E9' stroke-width='2.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:8px}
.note{font-size:.82rem;color:var(--soft);border-left:3px solid var(--amber);padding-left:10px}
@media(max-width:900px){.path,.path.third{grid-column:span 12}.path.wide{flex-direction:column}.path.wide .pimg{width:100%;height:220px;border-right:0;border-bottom:2.5px solid var(--ink)}}
/* task explorer */
.explorer{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.tasks{display:grid;gap:10px}
.task{text-align:left;font:600 .98rem "Inter",system-ui,sans-serif;color:var(--ink);background:var(--cream);border:2.5px solid var(--ink);border-radius:16px;padding:12px 16px;cursor:pointer;transition:transform .12s,box-shadow .12s}
.task:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.task[aria-selected=true]{background:var(--ink);color:var(--cream);box-shadow:4px 4px 0 var(--sky)}
.panel{background:var(--cream);border:3px solid var(--ink);border-radius:28px;box-shadow:7px 8px 0 var(--ink);padding:30px}
.panel[hidden]{display:none}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}
.col{border:2.5px dashed rgba(27,42,58,.35);border-radius:18px;padding:18px}.col.now{border-style:solid;border-color:var(--ink);background:var(--pblue)}
.col h4{margin:0 0 8px;font:700 .8rem "Poppins",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.col ul{margin:0;padding-left:18px;font-size:.94rem}
@media(max-width:860px){.explorer{grid-template-columns:1fr}.tasks{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}}
/* truth table */
.table-wrap{overflow-x:auto;border:3px solid var(--ink);border-radius:24px;box-shadow:6px 7px 0 var(--ink);background:var(--cream)}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:.94rem}
th,td{text-align:left;padding:14px 18px;border-bottom:2px solid rgba(27,42,58,.15);vertical-align:top}
th{font:700 .78rem "Poppins",sans-serif;text-transform:uppercase;letter-spacing:.07em;background:var(--pblue);border-bottom:2.5px solid var(--ink)}
tr:last-child td{border-bottom:0}
/* next */
.next{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}
.dark{background:var(--ink);color:var(--cream);border:3px solid var(--ink);border-radius:30px;box-shadow:8px 10px 0 var(--sky);padding:40px}
.dark h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}.dark p{color:rgba(251,248,241,.8)}.dark .hand{color:var(--amber)}
.dark .btn-cream{color:var(--ink)}
@media(max-width:860px){.next{grid-template-columns:1fr}}
footer{padding:40px 0;font-size:.88rem;color:var(--soft)}footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}footer a{text-decoration:none;font-weight:600}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}