html{scroll-behavior:smooth}
.lab-page{background:var(--bg);color:var(--text)}
.lab-shell{width:min(100% - 40px,980px);margin-inline:auto}
.lab-nav{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border-subtle);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px)}
.lab-nav__inner{min-height:66px;display:flex;align-items:center;gap:22px}
.lab-brand{margin-right:auto;color:var(--text);text-decoration:none;font-weight:720;letter-spacing:-.02em}
.lab-brand b{color:var(--accent)}
.lab-nav nav{display:flex;gap:18px}
.lab-nav nav a{color:var(--text-secondary);text-decoration:none;font-size:.82rem}
.lab-nav nav a:hover{color:var(--text)}
.lab-hero{padding:110px 0 88px;border-bottom:1px solid var(--border-subtle)}
.lab-kicker{color:var(--text-muted);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.lab-hero h1{max-width:9ch;margin:22px 0 24px;font-size:clamp(4rem,9vw,8.5rem);line-height:.86;letter-spacing:-.065em;font-variation-settings:var(--type-display)}
.lab-hero h1 em{display:block;color:var(--accent);font-style:normal}
.lab-hero .lead{max-width:760px;margin:0;color:var(--text-secondary);font-size:clamp(1.15rem,1.4vw,1.55rem);line-height:1.62}
.lab-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.lab-note{margin-top:54px;padding:22px 0 0;border-top:1px solid var(--border);color:var(--text-muted);font-family:var(--font-mono);font-size:.78rem;line-height:1.65}
.lab-section{padding:88px 0;border-bottom:1px solid var(--border-subtle)}
.lab-section__id{color:var(--accent);font-family:var(--font-mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase}
.lab-section h2{max-width:17ch;margin:12px 0 24px;font-size:clamp(2.4rem,5vw,4.8rem);line-height:.98;letter-spacing:-.05em}
.lab-section>.lab-shell>p{max-width:760px;color:var(--text-secondary);font-size:1.04rem;line-height:1.78}
.lab-stream{margin-top:42px;border-top:1px solid var(--border)}
.lab-entry{display:grid;grid-template-columns:160px minmax(0,1fr);gap:34px;padding:34px 0;border-bottom:1px solid var(--border-subtle)}
.lab-entry__meta{color:var(--text-muted);font-family:var(--font-mono);font-size:.7rem;line-height:1.6}
.lab-entry h3{margin:0 0 10px;font-size:1.5rem;letter-spacing:-.02em}
.lab-entry p{margin:0;color:var(--text-secondary);line-height:1.72}
.lab-entry ul{margin:18px 0 0;padding-left:1.1em;color:var(--text-secondary)}
.lab-entry li{margin:.38em 0}
.lab-entry a{color:inherit;text-decoration:none}
.lab-entry a:hover h3{color:var(--accent)}
.lab-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lab-rail>div{padding:26px 24px;border-left:1px solid var(--border-subtle)}
.lab-rail>div:first-child{border-left:0;padding-left:0}
.lab-rail b{display:block;color:var(--accent);font-family:var(--font-mono);font-size:.72rem}
.lab-rail strong{display:block;margin:18px 0 8px;font-size:1.08rem}
.lab-rail span{color:var(--text-muted);font-size:.82rem;line-height:1.55}
.lab-model{margin-top:36px;padding:28px;border:1px solid var(--border);border-radius:18px;background:var(--bg-card-solid)}
.lab-model code{display:block;color:var(--text-secondary);font-size:.84rem;line-height:1.95;white-space:pre-wrap}
.lab-callout{margin-top:36px;padding:24px 0 0;border-top:1px dashed var(--border-strong);color:var(--text-secondary)}
.lab-callout strong{color:var(--text)}
.lab-footer{padding:54px 0 70px}
.lab-footer__inner{display:flex;justify-content:space-between;gap:30px;color:var(--text-muted);font-size:.78rem}
.lab-footer a{color:var(--text-secondary)}
@media(max-width:760px){
  .lab-shell{width:min(100% - 28px,980px)}
  .lab-nav nav{display:none}
  .lab-hero{padding:78px 0 64px}
  .lab-hero h1{font-size:clamp(3.5rem,17vw,6rem)}
  .lab-section{padding:66px 0}
  .lab-entry{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .lab-rail{grid-template-columns:1fr}
  .lab-rail>div{padding:22px 0;border-left:0;border-top:1px solid var(--border-subtle)}
  .lab-rail>div:first-child{border-top:0}
  .lab-footer__inner{flex-direction:column}
}
.vector{position:relative;color:var(--text);font-weight:720;white-space:nowrap}
.vector::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.18em;border-radius:999px;opacity:.52;z-index:-1}
.vector--answer::after{background:var(--accent)}
.vector--files::after{background:var(--cyan)}
.vector--web::after{background:var(--green)}
.vector--apps::after{background:var(--orange)}
@media(max-width:600px){.vector{white-space:normal}}

.lab-section--map{background:color-mix(in srgb,var(--bg-deep) 56%,transparent)}
.ai-vector-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ai-vector-legend .vector{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--border);border-radius:999px;background:var(--bg-card-solid);font-size:.76rem;color:var(--text-secondary)}
.ai-vector-legend b{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em}
.ai-vector-legend i{font-style:normal;font-size:.62rem;color:var(--text-muted)}
.vector-kn{box-shadow:inset 3px 0 0 #7c5cff}.vector-kn b{color:#7c5cff}
.vector-cp{box-shadow:inset 3px 0 0 #2563eb}.vector-cp b{color:#2563eb}
.vector-wb{box-shadow:inset 3px 0 0 #0f9fa8}.vector-wb b{color:#0f9fa8}
.vector-hm{box-shadow:inset 3px 0 0 #e07a1f}.vector-hm b{color:#e07a1f}
.vector-ag{box-shadow:inset 3px 0 0 #d14f8a}.vector-ag b{color:#d14f8a}
.lab-mermaid-wrap{margin-top:28px;padding:22px;border:1px solid var(--border);border-radius:20px;background:var(--bg-card-solid);overflow:auto}
.lab-mermaid-wrap .mermaid{min-width:760px;margin:0}
.lab-map-note{max-width:820px!important;margin-top:22px!important;font-size:.9rem!important;color:var(--text-muted)!important}
@media(max-width:760px){.lab-mermaid-wrap{padding:14px}.ai-vector-legend{gap:7px}.ai-vector-legend .vector{font-size:.7rem}}

.vector-ph{box-shadow:inset 3px 0 0 #2f855a}.vector-ph b{color:#2f855a}

/* Responsive AI Interaction Map */
.lab-mermaid-wrap{max-width:100%;overflow:hidden}
.lab-mermaid-wrap .mermaid{min-width:0;width:100%;max-width:100%}
.lab-mermaid-wrap .mermaid svg{display:block;width:100%!important;height:auto!important;max-width:100%!important}
@media(max-width:760px){.lab-mermaid-wrap{padding:10px}}

/* AIV bird's-eye model */
.aiv-overview{display:grid;grid-template-columns:.85fr 1.35fr 1fr;gap:12px;margin-top:34px}
.aiv-group{padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--bg-card-solid);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.aiv-group:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.aiv-group>span,.aiv-pae>span{display:block;margin-bottom:12px;color:var(--text-muted);font:600 .62rem/1.2 var(--font-mono);letter-spacing:.09em}
.aiv-group strong{display:block;font-size:.95rem;line-height:1.6}.aiv-group p{margin:8px 0 0;color:var(--text-muted);font-size:.8rem;line-height:1.55}
.aiv-group b{font-family:var(--font-mono)}.aiv-kn{color:#7c5cff}.aiv-cp{color:#2563eb}.aiv-wb{color:#0f9fa8}.aiv-ph{color:#2f855a}.aiv-hm{color:#e07a1f}.aiv-ag{color:#d14f8a}
.aiv-rule{margin-top:14px;padding:17px 20px;border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--text-secondary);font-size:.88rem;line-height:1.65}.aiv-rule code{font-family:var(--font-mono);color:var(--text)}
.aiv-pae{display:grid;grid-template-columns:150px 260px minmax(0,1fr);align-items:center;gap:18px;margin-top:14px;padding:18px 20px;border:1px dashed var(--border-strong);border-radius:14px}.aiv-pae>span{margin:0}.aiv-pae strong{font-family:var(--font-mono);font-size:.82rem}.aiv-pae p{margin:0;color:var(--text-muted);font-size:.82rem;line-height:1.55}
.aiv-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}.aiv-reveal.is-visible{opacity:1;transform:none}
@media(max-width:820px){.aiv-overview{grid-template-columns:1fr}.aiv-pae{grid-template-columns:1fr;gap:8px}.aiv-pae>span{margin-bottom:2px}}
@media(prefers-reduced-motion:reduce){.aiv-group,.aiv-reveal{transition:none!important;transform:none!important;opacity:1!important}}

/* Microinteractions: informative, restrained, variable-font driven */
.lab-page strong,.lab-page .lab-entry h3,.lab-page .lab-brand{
  font-variation-settings:"wght" 650,"slnt" 0,"FLAR" 8,"VOLM" 2;
  transition:font-variation-settings .28s var(--ease-out),color .2s ease;
}
.lab-page strong:hover,.lab-page .lab-entry a:hover h3,.lab-page .lab-brand:hover{
  font-variation-settings:"wght" 790,"slnt" -1,"FLAR" 28,"VOLM" 12;
}
.lab-section h2{transition:font-variation-settings .34s var(--ease-out),letter-spacing .34s var(--ease-out)}
.lab-section h2:hover{font-variation-settings:"wght" 790,"slnt" -1,"FLAR" 46,"VOLM" 30;letter-spacing:-.054em}
.lab-nav nav a{position:relative;transition:color .18s ease}
.lab-nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .26s var(--ease-out)}
.lab-nav nav a:hover::after{right:0}
.lab-entry{transition:background .26s ease}
.lab-entry>div:last-child{transition:none}
.lab-entry:hover{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 4%,transparent),transparent)}

.lab-entry__meta{transition:color .2s ease}
.lab-entry:hover .lab-entry__meta{color:var(--accent)}
.aiv-group b{transition:font-weight .24s ease,text-shadow .24s ease}
.aiv-group:hover b{font-weight:900;text-shadow:0 0 18px currentColor}
.ai-vector-legend .vector{cursor:default;transition:transform .22s var(--ease-out),border-color .22s ease,box-shadow .22s ease,background .22s ease}
.ai-vector-legend .vector:hover,.ai-vector-legend .vector:focus-visible{transform:translateY(-2px) scale(1.018);border-color:var(--border-strong);box-shadow:var(--shadow-sm);background:color-mix(in srgb,var(--bg-card-solid) 92%,var(--accent-soft))}
.aiv-rule code{padding:.1em .3em;border-radius:6px;transition:background .2s ease,color .2s ease}
.aiv-rule code:hover{background:var(--bg-card-solid);color:var(--accent)}
.aiv-pae strong{transition:letter-spacing .3s var(--ease-out),color .2s ease}
.aiv-pae:hover strong{letter-spacing:.035em;color:var(--accent)}
.lab-mermaid-wrap{transition:border-color .28s ease,box-shadow .28s ease,background .28s ease}
.lab-mermaid-wrap:hover{border-color:var(--border-strong);box-shadow:0 18px 52px -38px color-mix(in srgb,var(--accent) 55%,transparent)}
.lab-mermaid-wrap .node rect{transition:opacity .28s ease,filter .28s ease,stroke-width .28s ease}
.lab-mermaid-wrap .node.is-vector-source:hover rect{filter:drop-shadow(0 4px 9px rgba(0,0,0,.14));stroke-width:2px}
.lab-mermaid-wrap .link{transition:opacity .28s ease}
@media(hover:none){.lab-section h2:hover{font-variation-settings:var(--type-heading);letter-spacing:-.05em}.lab-entry:hover>div:last-child,.lab-entry:hover .lab-entry__meta{transform:none}}
@media(prefers-reduced-motion:reduce){.lab-page strong,.lab-page .lab-entry h3,.lab-page .lab-brand,.lab-section h2,.lab-nav nav a::after,.lab-entry,.lab-entry>div:last-child,.lab-entry__meta,.aiv-group b,.ai-vector-legend .vector,.aiv-pae strong,.lab-mermaid-wrap{transition:none!important}}

/* No-reflow typography: visual emphasis without changing glyph metrics */
.lab-page strong,.lab-page .lab-entry h3,.lab-page .lab-brand,.lab-section h2{
  transition:color .2s ease,text-shadow .24s ease,transform .24s var(--ease-out)!important;
}
.lab-page strong:hover{
  font-variation-settings:"wght" 650,"slnt" 0,"FLAR" 8,"VOLM" 2!important;
  text-shadow:.28px 0 currentColor,-.28px 0 currentColor;
}
.lab-page .lab-entry a:hover h3,.lab-page .lab-brand:hover{
  font-variation-settings:"wght" 650,"slnt" 0,"FLAR" 8,"VOLM" 2!important;
  text-shadow:.32px 0 currentColor,-.32px 0 currentColor;
}
.lab-section h2:hover{
  font-variation-settings:var(--type-heading)!important;
  letter-spacing:-.05em!important;
  text-shadow:.34px 0 currentColor,-.34px 0 currentColor;
}
.aiv-group b{transition:text-shadow .24s ease,color .2s ease!important}
.aiv-group:hover b{font-weight:700!important;text-shadow:.3px 0 currentColor,-.3px 0 currentColor,0 0 14px color-mix(in srgb,currentColor 30%,transparent)}
.aiv-pae strong{transition:color .2s ease,text-shadow .24s ease!important}
.aiv-pae:hover strong{letter-spacing:normal!important;color:var(--accent);text-shadow:.25px 0 currentColor,-.25px 0 currentColor}

/* Stable hover emphasis: paint-only, zero reflow */
.lab-page strong,.lab-page .lab-entry h3,.lab-page .lab-brand,.lab-section h2,.aiv-group b,.aiv-pae strong{
  text-shadow:none!important;
  -webkit-text-stroke-width:0;
  -webkit-text-stroke-color:currentColor;
  transition:color .2s ease,-webkit-text-stroke-width .22s var(--ease-out),transform .22s var(--ease-out)!important;
}
.lab-page strong:hover,.lab-page .lab-entry a:hover h3,.lab-page .lab-brand:hover,.lab-section h2:hover,.aiv-group:hover b,.aiv-pae:hover strong{
  text-shadow:none!important;
  -webkit-text-stroke-width:.28px;
}
.lab-page strong:hover,.lab-page .lab-entry a:hover h3,.lab-page .lab-brand:hover{
  font-variation-settings:"wght" 650,"slnt" 0,"FLAR" 8,"VOLM" 2!important;
}
.lab-section h2:hover{font-variation-settings:var(--type-heading)!important;letter-spacing:-.05em!important}
.aiv-group:hover b{font-weight:700!important}
.aiv-pae:hover strong{letter-spacing:normal!important}

/* Stable hover: no horizontal layout movement */
.lab-entry>div:last-child{transition:none!important;transform:none!important}
.lab-entry:hover>div:last-child{transform:none!important}
.lab-entry__meta{transition:color .2s ease!important;transform:none!important}
.lab-entry:hover .lab-entry__meta{color:var(--accent);transform:none!important}

/* Ambient interaction: no flying elements, no layout movement */
.lab-scroll-progress{position:fixed;z-index:80;left:0;top:0;width:100%;height:2px;pointer-events:none;transform:scaleX(var(--progress,0));transform-origin:left center;background:linear-gradient(90deg,var(--accent),var(--cyan));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 35%,transparent)}
.lab-section{position:relative;isolation:isolate;--spot-x:50%;--spot-y:50%}
.lab-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(520px circle at var(--spot-x) var(--spot-y),color-mix(in srgb,var(--accent) 7%,transparent),transparent 72%);transition:opacity .3s ease}
.lab-section.is-pointer-inside::before{opacity:1}
.lab-section>.lab-shell{position:relative;z-index:1}
.reactive-border{position:relative;isolation:isolate;--rx:50%;--ry:50%}
.reactive-border::after{content:"";position:absolute;inset:-1px;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;background:radial-gradient(190px circle at var(--rx) var(--ry),color-mix(in srgb,var(--accent) 58%,transparent),transparent 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s ease}
.reactive-border.is-pointer-inside::after{opacity:1}
.lab-mermaid-wrap .link path{transition:opacity .2s ease,filter .22s ease}
.lab-mermaid-wrap .node{transition:opacity .2s ease}
.lab-mermaid-wrap .node.is-output-node{cursor:default}
.lab-mermaid-wrap .node.is-output-node:hover rect,.lab-mermaid-wrap .node.is-vector-source:hover rect{filter:drop-shadow(0 3px 8px color-mix(in srgb,var(--accent) 22%,transparent))}
.lab-mermaid-wrap .link.is-active path{filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--accent) 28%,transparent))}
@media(pointer:coarse){.lab-section::before,.reactive-border::after{display:none}}
@media(prefers-reduced-motion:reduce){.lab-section::before,.reactive-border::after{transition:none!important}}