.project-hero{text-align:center;margin-bottom:1rem}.project-hero .tagline{color:var(--text-muted);font-style:italic;font-size:1.1rem;margin-bottom:1rem}.tag-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}.tag-row span{display:inline-block;padding:.15rem .6rem;border-radius:var(--radius-sm);background:var(--accent-glow);border:1px solid var(--border-color);color:var(--accent);font-size:var(--text-label-sm);font-family:var(--font-mono);line-height:1.4}.section{margin-bottom:2.5rem}.section h2{color:var(--heading-color);font-family:var(--font-display);margin:0 0 .75rem;padding-bottom:.25rem;border-bottom:1px solid var(--border-color)}.section h3{color:var(--accent);margin-top:1.5rem;margin-bottom:.5rem;font-family:var(--font-mono);font-size:1rem}.section p{margin:.75rem 0;color:var(--text-color)}.section ul{margin:.5rem 0 1rem 1.5rem;padding:0;color:var(--text-color)}.section ul li{margin-bottom:.5rem}.section a{color:var(--accent)}.decision-card{background:var(--surface-container-low);border:1px solid var(--border-color);border-left:3px solid var(--accent);border-radius:0 var(--radius-md) var(--radius-md) 0;padding:1.25rem;margin:1rem 0;transition:border-color .2s ease}.decision-card:hover{border-color:var(--accent)}.decision-card h4{color:var(--heading-color);font-family:var(--font-display);margin:0 0 .5rem}.decision-card p{margin:.4rem 0}.decision-card .why{color:var(--accent);font-weight:600}.decision-card .tradeoff{color:var(--error);font-style:italic}.toc{margin:0 0 1.5rem;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-container-low)}.toc summary{cursor:pointer;font-weight:600;font-family:var(--font-mono);font-size:var(--text-label-md);color:var(--accent)}.toc nav ul{list-style:none;padding:.5rem 0 0;margin:0}.toc nav li{margin:.25rem 0;line-height:1.4}.toc nav a{color:var(--heading-color);text-decoration:none;font-size:.9rem}.toc nav a:hover{color:var(--accent);text-decoration:underline}code{background:var(--surface-container-low);padding:.15em .4em;border-radius:var(--radius-sm);font-size:.9em;font-family:var(--font-mono)}pre{background:var(--surface-code);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.5;color:#c3d2f2}pre code{background:none;padding:0;color:inherit}.flow-diagram{background:var(--surface-code);border:1px dashed var(--border-color);border-radius:var(--radius-md);padding:1rem;font-family:var(--font-mono);font-size:.8rem;line-height:1.6;white-space:pre;overflow-x:auto;color:#cfe2ff}.model-arch{background:var(--surface-code);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;font-family:var(--font-mono);font-size:.8rem;line-height:1.6;white-space:pre;overflow-x:auto;color:var(--accent)}.screenshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1rem}.screenshot-figure{margin:0;background:var(--surface-container-low);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}.screenshot-figure:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow)}.screenshot-figure img{display:block;width:100%;height:auto;border-bottom:1px solid var(--border-color)}.screenshot-figure figcaption{font-family:var(--font-mono);font-size:var(--text-label-sm);color:var(--text-muted);padding:.6rem .9rem}.screenshot-open{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in}.screenshot-open img{display:block;width:100%;height:auto;transition:opacity .2s ease}.screenshot-open:hover img,.screenshot-open:focus-visible img{opacity:.92}.screenshot-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.lightbox{border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-container-low);padding:0;max-width:min(92vw,1100px);width:auto;color:var(--text-color);overflow:visible}.lightbox[open]{animation:lightbox-in .25s ease-out;@starting-style{opacity:0;transform:scale(.96)}}.lightbox{transition-property:opacity,transform,display,overlay;transition-duration:.25s;transition-timing-function:ease-out;transition-behavior:allow-discrete}.lightbox::backdrop{background-color:#060814b8;transition:background-color .25s ease-out}.lightbox-body{margin:0;padding:1.25rem 1.25rem .75rem}.lightbox-img{display:block;width:auto;max-width:100%;max-height:80vh;height:auto;margin:0 auto;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.lightbox-caption{font-family:var(--font-mono);font-size:var(--text-label-sm);color:var(--text-muted);text-align:center;padding:.75rem 0 0}.lightbox-close{position:absolute;top:.6rem;right:.75rem;width:2rem;height:2rem;line-height:1;font-size:1.4rem;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--surface);color:var(--text-color);cursor:pointer;transition:border-color .2s ease,color .2s ease}.lightbox-close:hover{border-color:var(--accent);color:var(--accent)}@keyframes lightbox-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.lightbox[open]{animation:none}.lightbox{transition-duration:.1s;transition-property:display,overlay}.lightbox::backdrop{transition:none}}@media(max-width:720px){.project-hero{margin-bottom:1.25rem;padding-bottom:1.25rem}.section{margin-bottom:2rem}.section ul{margin-left:1rem}.decision-card{padding:1rem}.screenshot-grid{grid-template-columns:1fr}.lightbox-body{padding:.75rem .75rem .5rem}}
