.lab-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:.75rem;padding:.45rem 1rem;padding-top:max(.45rem,env(safe-area-inset-top));background:color-mix(in oklch,var(--surface-0, #0a0a0c) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in oklch,var(--border, #333) 50%,transparent);font-size:.8rem}.lab-nav__home{color:inherit;text-decoration:none;font-weight:600;opacity:.9}.lab-nav__home:hover{text-decoration:underline}.lab-nav__poc{font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;opacity:.65}body.has-lab-nav{padding-top:2.5rem}:root{color-scheme:dark;--font-sans: "SF Pro Text", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;--surface-0: oklch(.14 .012 265);--surface-1: oklch(.18 .014 265);--surface-2: oklch(.22 .016 265);--border: oklch(.32 .02 265);--text-0: oklch(.96 .01 265);--text-1: oklch(.78 .02 265);--text-2: oklch(.62 .03 265);--accent: oklch(.72 .12 250);--accent-dim: oklch(.55 .1 250);--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: 1rem;--space-xs: .35rem;--space-sm: .55rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.25rem;--header-h: 3.25rem;--safe-bottom: env(safe-area-inset-bottom, 0px);font-family:var(--font-sans);font-size:100%;line-height:1.45;background:var(--surface-0);color:var(--text-0)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--surface-0);-webkit-font-smoothing:antialiased}#app{min-height:100dvh;display:flex;flex-direction:column}.shell{flex:1;display:flex;flex-direction:column;container-type:inline-size;container-name:shell}.shell__header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:var(--header-h);padding:0 var(--space-md);padding-top:max(var(--space-sm),env(safe-area-inset-top));background:color-mix(in oklch,var(--surface-0) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in oklch,var(--border) 55%,transparent)}.shell__brand{font-size:clamp(.95rem,2.8cqi,1.05rem);font-weight:600;letter-spacing:-.02em;color:var(--text-0);display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs)}.shell__poc-badge{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.2rem .45rem;border-radius:4px;background:color-mix(in oklch,var(--accent) 22%,var(--surface-2));color:var(--accent);border:1px solid color-mix(in oklch,var(--accent) 35%,transparent)}.shell__meta{font-size:.8rem;color:var(--text-2);white-space:nowrap}.shell__main{flex:1;padding:var(--space-md);padding-bottom:calc(var(--space-lg) + var(--safe-bottom));width:100%;max-width:120rem;margin-inline:auto}.panel{border-radius:var(--radius-lg);border:1px dashed var(--border);background:var(--surface-1);padding:var(--space-lg);color:var(--text-1);font-size:.95rem;max-width:40rem}.panel code{font-size:.85em;color:var(--accent)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));gap:var(--space-sm)}@container shell (min-width: 40rem){.gallery{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:var(--space-md)}}@container shell (min-width: 64rem){.gallery{grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr))}}.tile{display:block;border:none;padding:0;margin:0;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:var(--surface-1);color:inherit;text-align:left;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 0 0 1px color-mix(in oklch,var(--border) 40%,transparent)}.tile:hover,.tile:focus-visible{transform:translateY(-2px);box-shadow:0 8px 28px #00000273;outline:none}.tile:focus-visible{box-shadow:0 0 0 2px var(--accent)}.tile__img{aspect-ratio:1;width:100%;height:auto;object-fit:cover;display:block;background:var(--surface-2)}.tile__cap{padding:var(--space-xs) var(--space-sm) var(--space-sm)}.tile__title{font-size:.8rem;font-weight:500;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text-0)}.tile__date{font-size:.68rem;color:var(--text-2);margin-top:.15rem}.detail{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;grid-template-rows:auto 1fr;background:var(--surface-0);animation:detail-in .22s ease-out}@keyframes detail-in{0%{opacity:0}to{opacity:1}}.detail__bar{display:flex;align-items:center;gap:var(--space-md);min-height:var(--header-h);padding:0 var(--space-sm) 0 var(--space-md);padding-top:max(var(--space-sm),env(safe-area-inset-top));border-bottom:1px solid color-mix(in oklch,var(--border) 45%,transparent);background:var(--surface-1)}.detail__back{flex:0 0 auto;border:none;background:var(--surface-2);color:var(--text-0);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;cursor:pointer;transition:background .15s ease}.detail__back:hover,.detail__back:focus-visible{background:color-mix(in oklch,var(--accent) 22%,var(--surface-2));outline:none}.detail__title{flex:1;min-width:0;font-size:clamp(.9rem,2.5cqi,1.1rem);font-weight:600;line-height:1.25;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail__scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-md);padding-bottom:calc(var(--space-xl) + var(--safe-bottom))}.detail__hero-wrap{max-width:min(100%,72rem);margin:0 auto var(--space-lg);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-1);box-shadow:0 12px 48px #00000180}.detail__hero{width:100%;height:auto;max-height:min(85vh,56rem);object-fit:contain;display:block}.detail__meta{max-width:min(100%,42rem);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-lg)}.meta-block h3{margin:0 0 var(--space-xs);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-2)}.meta-block p,.meta-block ul{margin:0;font-size:.92rem;color:var(--text-1);line-height:1.55}.meta-block ul{padding-left:1.1rem}.chips{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.chip{font-size:.75rem;padding:.2rem .5rem;border-radius:999px;background:var(--surface-2);color:var(--text-1);border:1px solid color-mix(in oklch,var(--border) 50%,transparent)}@media(prefers-reduced-motion:reduce){.tile,.detail{transition:none;animation:none}}
