:root{color-scheme:dark;--bg:#101114;--text:#edf0f4;--muted:#9298a3;--azure:#64bbff;--gold:#c6a66c;--line:#25272d;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:280px;min-height:100vh;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--azure);outline-offset:4px}
.site-header{height:60px;border-bottom:1px solid var(--line)}
.header-inner{max-width:1560px;height:100%;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
.wordmark{font-size:21px;line-height:1;font-weight:650;letter-spacing:-.8px}
.wordmark span{color:var(--azure)}
.header-link{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:500;color:var(--azure);padding:8px 10px;border-radius:7px;background:#64bbff0b}
.header-link svg{width:14px;height:14px;stroke-width:1.5}
.gallery-shell{max-width:1560px;margin:28px auto 60px;padding:0 28px}
.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
h1{margin:0;font-size:21px;line-height:1.3;font-weight:600;letter-spacing:-.45px}
.gallery-hint{font-size:11px;color:#767d89}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;align-items:start}
.project-card{min-width:0}
.thumbnail{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:11px;isolation:isolate;background:#191d21;box-shadow:0 0 0 1px #ffffff08;transition:box-shadow .18s ease}
.thumbnail:hover,.thumbnail:focus-within,.thumbnail.is-previewing{box-shadow:0 0 0 1px #64bbff60}
.thumbnail-link{position:absolute;inset:0;z-index:2;display:block}
.thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.thumbnail-action{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:7px;background:#101114d9;color:#edf0f4;border:1px solid #ffffff15;border-radius:6px;padding:6px 8px;font-size:10px;font-weight:500;opacity:0;transform:translateY(3px);transition:opacity .18s,transform .18s;pointer-events:none}
.thumbnail-action svg{width:12px;height:12px}
.thumbnail:hover .thumbnail-action,.thumbnail:focus-within .thumbnail-action{opacity:1;transform:none}
.preview-frame{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .18s}
.preview-frame iframe{display:block;width:1024px;height:576px;border:0;pointer-events:none;transform:scale(var(--preview-scale, .5));transform-origin:top left}
.is-ready .preview-frame{opacity:1}
/* The link remains above the noninteractive scene, so clicking opens the project. */
.is-ready .thumbnail-link{z-index:4}
.is-ready .thumbnail-link img{opacity:0}
.preview-status{position:absolute;z-index:5;top:10px;left:10px;display:none;align-items:center;gap:5px;max-width:calc(100% - 20px);border-radius:5px;padding:4px 6px;background:#101114dc;color:#c8e6ff;font-size:9px;line-height:1.3;pointer-events:none}
.is-previewing .preview-status,.has-preview-error .preview-status{display:flex}
.has-preview-error .preview-status{color:#d8c397}
.has-preview-error .preview-status::before{background:var(--gold)}
.preview-status::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--azure);flex:none}
.card-details{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:12px;padding:0 2px}
.card-identity{min-width:0}
h2{margin:0;font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.3px}
h2 a{display:flex;align-items:center;gap:7px;width:fit-content}
h2 svg{width:12px;height:12px;color:#666e7b;opacity:0;transition:opacity .18s}
h2 a:hover{color:var(--azure)}
h2 a:hover svg,h2 a:focus-visible svg{opacity:1}
.card-identity p{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.4;color:var(--muted);margin:5px 0 0}
.card-description{margin:9px 2px 0;color:var(--muted);font-size:13px;line-height:1.55;max-width:55ch}
.development-dot{height:4px;width:4px;border-radius:50%;background:var(--gold)}
.preview-toggle{display:flex;align-items:center;gap:5px;flex:none;margin-top:-1px;padding:5px 7px;min-height:30px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);font-size:11px;font-weight:500;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.preview-toggle:hover{color:var(--azure);background:#64bbff0a;border-color:#64bbff20}
.preview-toggle svg{height:12px;width:12px;stroke-width:1.7}
.preview-toggle .play-icon{fill:currentColor;stroke:none}
.preview-toggle .close-icon{display:none}
.preview-toggle[aria-pressed=true]{color:var(--azure)}
.preview-toggle[aria-pressed=true] .play-icon{display:none}
.preview-toggle[aria-pressed=true] .close-icon{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:12px;transform:translateY(-150%);z-index:10;padding:8px 12px;background:var(--text);color:var(--bg);border-radius:5px;font-size:13px}
.skip-link:focus{transform:none}
@media(min-width:1400px){.project-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:739px){.project-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:639px){.site-header{height:56px}.header-inner{padding:0 18px}.wordmark{font-size:20px}.gallery-shell{margin-top:22px;padding:0 18px}.gallery-heading{margin-bottom:17px}h1{font-size:20px}.gallery-hint{display:none}.project-grid{grid-template-columns:minmax(0,1fr);gap:24px}.card-details{margin-top:11px}.preview-toggle{min-height:36px;margin-top:-4px;padding:8px}.thumbnail-action{display:none}.thumbnail{border-radius:10px}}
@media(hover:none){.gallery-hint{display:none}.thumbnail-action{display:none}}
@media(prefers-reduced-motion:reduce){.gallery-hint{display:none}html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.project-card[data-preview-status-position="bottom"] .preview-status{top:auto;bottom:10px}