:root{--tile: min(44vmin, 420px);--stepX: calc(var(--tile) * .86);--stepY: calc(var(--tile) * .58);--ease: cubic-bezier(.22, .61, .36, 1);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;width:100%}body{background:#000;color:#fff;overflow:hidden;-webkit-font-smoothing:antialiased}.stage{position:fixed;inset:0;background:radial-gradient(120% 100% at 50% 22%,#0d0d12,#000 75%);-webkit-user-select:none;user-select:none}.stage:after{content:"";position:fixed;left:0;right:0;bottom:0;height:58%;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,.9) 62%,#000 100%);pointer-events:none;z-index:1}.wordmark{position:fixed;top:clamp(16px,3vh,28px);left:clamp(18px,3vw,36px);font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:#ffffff73;font-weight:500;z-index:5}.track{position:fixed;top:30%;left:0;right:0;height:var(--tile);transform:translateY(-50%);pointer-events:none;z-index:2}.tile{position:absolute;top:50%;left:50%;width:var(--tile);height:var(--tile);padding:0;border:none;background:#111;border-radius:18px;overflow:hidden;cursor:pointer;pointer-events:auto;transform:translate(-50%,-50%) translate(calc(var(--dc) * var(--stepX))) translateY(calc(var(--dr) * var(--stepY))) scale(.72);opacity:.55;transition:transform .45s var(--ease),opacity .45s var(--ease),box-shadow .45s var(--ease);box-shadow:0 20px 60px #0009}.tile.center{transform:translate(-50%,-50%) translate(0) translateY(0) scale(1);opacity:1;z-index:2;box-shadow:0 40px 120px #000000bf,0 0 0 1px #ffffff0f}.tile.center:hover{transform:translate(-50%,-50%) translate(0) translateY(0) scale(1.025)}.tile.far{opacity:.18}.tile:not(.center):not(.far){opacity:.62}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile .frame{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff14}.placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.placeholder-title{font-size:clamp(24px,6vmin,54px);font-weight:700;letter-spacing:-.02em;color:#ffffffeb;text-shadow:0 2px 30px rgba(0,0,0,.45);text-align:center;padding:0 24px}.accent-astar .placeholder{background:radial-gradient(120% 120% at 60% 20%,#e8a83c,#9a6418 55%,#2a1d08)}.accent-harmonics .placeholder{background:radial-gradient(120% 120% at 50% 30%,#4fd8ff,#1f7fd1 55%,#062036)}.accent-atom3 .placeholder{background:radial-gradient(120% 120% at 30% 20%,#58d8a0,#1f8f6a 55%,#062a1e)}.accent-maxwell .placeholder{background:radial-gradient(120% 120% at 40% 25%,#4f8ff7,#1f5fd1 55%,#0a1a3f)}.accent-sort .placeholder{background:radial-gradient(120% 120% at 50% 25%,#c77cff,#6a2fbf 55%,#1a0a2e)}.accent-proteins .placeholder{background:radial-gradient(120% 120% at 45% 30%,#ff7a7a,#c0392b 55%,#2e0a0a)}.accent-dna .placeholder{background:radial-gradient(120% 120% at 50% 30%,#6ee7ff,#1e6bb8 55%,#051a2e)}.accent-virology .placeholder{background:radial-gradient(120% 120% at 50% 30%,#ff8a4d,#b44a18 55%,#2a1408)}.accent-mesoscale .placeholder,.accent-mesosphere .placeholder{background:radial-gradient(120% 120% at 50% 30%,#a8e6a3,#3a8a4a 55%,#0a1f12)}.accent-solvation .placeholder{background:radial-gradient(120% 120% at 50% 30%,#7fb8ff,#2a6bc9 55%,#0a1a3a)}.open-overlay{position:absolute;left:0;right:0;bottom:0;padding:40px 0 16px;display:flex;justify-content:center;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);opacity:0;transition:opacity .3s ease;pointer-events:none}.tile.center:hover .open-overlay{opacity:1}.open-overlay span{font-size:14px;font-weight:600;letter-spacing:.06em;padding:8px 16px;border-radius:999px;background:#ffffff1f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18)}.nav-arrow{position:fixed;z-index:3;width:52px;height:52px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:#14141499;color:#ffffffb3;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,color .2s ease}.nav-arrow:hover{background:#ffffff1f;color:#fff}.nav-arrow:focus-visible{outline:2px solid #b8b8b8;outline-offset:2px}.nav-arrow svg{width:24px;height:24px}.nav-arrow.prev{top:46%;left:clamp(12px,3vw,28px);transform:translateY(-50%)}.nav-arrow.next{top:46%;right:clamp(12px,3vw,28px);transform:translateY(-50%)}.nav-arrow.up{left:50%;top:calc(46% - var(--tile) * .5 - 52px);transform:translate(-50%)}.nav-arrow.down{left:50%;top:calc(46% + var(--tile) * .5 + 12px);transform:translate(-50%)}@media(max-width:700px){.nav-arrow{width:44px;height:44px}.nav-arrow.prev{left:8px}.nav-arrow.next{right:8px}.nav-arrow.up{top:calc(46% - var(--tile) * .5 - 40px)}.nav-arrow.down{top:calc(46% + var(--tile) * .5 + 8px)}}.caption{position:fixed;left:0;right:0;bottom:clamp(64px,12vh,110px);text-align:center;min-height:64px;pointer-events:none;z-index:3}.caption-kicker{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#ffffff6b;margin-bottom:6px}.caption h1{margin:0;font-size:clamp(22px,3.6vmin,34px);font-weight:650;letter-spacing:-.01em}.caption p{margin:6px 0 0;font-size:clamp(13px,1.8vmin,16px);color:#ffffff8c}.grid-dots{position:fixed;left:0;right:0;bottom:clamp(44px,7vh,64px);display:flex;justify-content:center;gap:14px}.grid-col{display:flex;flex-direction:column;gap:8px;align-items:center;opacity:.6;transition:opacity .2s ease}.grid-col.active-col{opacity:1}.dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#ffffff40;cursor:pointer;transition:background .25s ease,transform .25s ease}.dot:hover{background:#ffffff80}.dot.active{background:#fff;transform:scale(1.35)}.hint{position:fixed;left:0;right:0;bottom:clamp(16px,3vh,28px);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;color:#fff6;flex-wrap:wrap;z-index:3}.hint .sep{opacity:.5}.hint-group{display:inline-flex;align-items:center;gap:6px}kbd{font:inherit;font-size:11px;line-height:1;padding:4px 7px;border-radius:6px;background:#ffffff14;border:1px solid rgba(255,255,255,.14);color:#ffffffb3}@media(max-width:600px){:root{--stepX: calc(var(--tile) * .86);--stepY: calc(var(--tile) * .62)}.open-overlay{opacity:1}}@media(prefers-reduced-motion:reduce){.tile{transition:opacity .2s linear}}