.nav-menu a.is-active{color:var(--brand-2);font-weight:800;background:oklch(0.324 0.077 265.5 / 70%);box-shadow:0 0 24px -8px var(--brand-light);outline:1px solid oklch(0.72 0.095 258 / 40%)}
/* Fixed browser viewport: only its natural-ratio screenshot moves. */
.portfolio-panel,.portfolio-panel:hover{transform:none}
.panel-media{--frame-height:420px;height:var(--frame-height);overflow:hidden}
.panel-media img,.portfolio-panel:hover .panel-media img{height:auto;max-width:100%;object-fit:initial;transform:none;animation:website-pan 26s ease-in-out infinite alternate}
.portfolio-panel:hover .panel-media img{animation-play-state:paused}
@keyframes website-pan{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(min(0px,calc(var(--frame-height) - 100%)))}}
/* Scrolling belongs to the viewport; the JS wraps identical image sets. */
.drag-carousel.auto-marquee{width:100%;max-width:100%;animation:none;transform:none;direction:ltr;touch-action:pan-y;overscroll-behavior-x:contain;scroll-behavior:auto;overflow-x:auto}
.auto-marquee img{width:288px;height:288px;user-select:none}
.auto-marquee.is-dragging{cursor:grabbing}
.mini-card{background:var(--card)}
.panel-browser{background:oklch(0.26 0.05 266 / 70%)}
.panel-browser strong{background:oklch(0.16 0.035 266 / 60%);color:var(--muted-foreground);padding:4px 12px;border-radius:6px}
.panel-browser span:nth-child(2){background:oklch(0.72 0.095 258 / 25%)}
.panel-browser span:nth-child(3){background:oklch(0.72 0.095 258 / 15%)}
.story-card strong{color:oklch(0.949 0.015 245 / 90%)}
.story-result{direction:ltr;text-align:right}
.video-player{position:relative}
.video-card video{object-fit:contain}
.video-play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;color:white;font-size:40px;cursor:pointer;text-shadow:0 2px 12px black}
.video-play[hidden]{display:none}
.video-play:focus-visible{outline:3px solid var(--brand-light);outline-offset:-4px}
.seo-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.seo-image{display:block;overflow:hidden;border-radius:12px;background:var(--card)}
.seo-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.seo-lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:60px 64px;border:0;background:rgb(0 0 0 / 90%);color:var(--foreground);overflow:hidden}
.seo-lightbox::backdrop{background:rgb(0 0 0 / 80%)}
.seo-lightbox[open]{display:flex;align-items:center;justify-content:center}
.seo-lightbox img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;touch-action:pan-y pinch-zoom}
.seo-lightbox button{position:absolute;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--foreground);min-width:44px;min-height:44px;cursor:pointer;font:inherit}
.seo-close{top:12px;right:16px}.seo-prev{left:10px;top:50%}.seo-next{right:10px;top:50%}
.seo-caption{position:absolute;bottom:10px;left:16px;right:16px;text-align:center;margin:0;font-size:13px}
@media(min-width:640px){.auto-marquee img{width:320px;height:320px}.stories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.panel-media{--frame-height:360px}.seo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.seo-grid{grid-template-columns:1fr}.seo-lightbox{padding:64px 48px}}