.works-gl-page, html:has(body.works-gl-page) { overflow: hidden; background: #050505; color: var(--paper); }
.works-gl-page .page-footer { display: none; }

.works-scene { position: fixed; inset: 0; touch-action: none; cursor: grab; }
.works-scene.is-dragging { cursor: grabbing; }
.works-scene.is-over-card:not(.is-dragging) { cursor: pointer; }
.works-scene canvas { display: block; width: 100%; height: 100%; }

.works-hover-label { position: absolute; top: 0; left: 0; margin: 0; padding: 6px 12px; border-radius: 0; background: var(--paper); color: var(--ink); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transform-origin: 0 0; translate: 18px 18px; opacity: 0; transition: opacity .2s ease; }
.works-scene.is-over-card .works-hover-label { opacity: 1; }

.works-hint { position: absolute; bottom: 148px; left: 50%; margin: 0; color: rgb(255 255 255 / .38); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; transform: translateX(-50%); animation: works-hint-fade 5.5s ease forwards; }
@keyframes works-hint-fade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

.works-top-actions { position: fixed; z-index: 30; top: calc(84px + env(safe-area-inset-top)); right: var(--page-gutter); left: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.works-top-actions > * { pointer-events: auto; }
.works-filter-trigger, .works-talk { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: 0; font: 500 12px General, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .35s var(--ease), background .24s ease, color .24s ease; }
.works-filter-trigger { background: rgb(255 255 255 / .1); color: var(--paper); backdrop-filter: blur(12px); }
.works-filter-trigger span { color: rgb(255 255 255 / .55); }
.works-filter-trigger:hover { background: rgb(255 255 255 / .18); transform: translateY(-2px); }
.works-talk { background: var(--paper); color: var(--ink); }
.works-talk:hover { transform: translateY(-2px); }

.works-filter-drawer { position: fixed; z-index: 31; top: calc(136px + env(safe-area-inset-top)); left: var(--page-gutter); width: min(300px, calc(100vw - var(--page-gutter) * 2)); padding: 18px; border: 1px solid rgb(255 255 255 / .14); border-radius: 0; background: rgb(12 12 12 / .92); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .26s ease, transform .42s var(--ease); }
.works-filter-drawer[aria-hidden="false"] { opacity: 1; pointer-events: auto; transform: none; }
.works-filter-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
.works-filter-heading button { border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.works-filter-options { display: grid; gap: 6px; }
.works-filter-options button { padding: 11px 14px; border: 0; border-radius: 0; background: transparent; color: rgb(255 255 255 / .72); font: 500 14px General, Arial, sans-serif; text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
.works-filter-options button:hover { background: rgb(255 255 255 / .07); color: var(--paper); }
.works-filter-options button.is-active { background: var(--paper); color: var(--ink); }


.works-noscript { position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }

@media (max-width: 700px) {
  .works-top-actions { top: calc(78px + env(safe-area-inset-top)); }
  .works-filter-drawer { top: calc(128px + env(safe-area-inset-top)); }
  .works-hover-label { display: none; }
}

/* Dock — same component as the home page, re-anchored bottom-centre and inverted for the dark scene. */
.works-gl-dock { --dock-scale: 1; position: fixed; z-index: 32; top: auto; right: auto; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; width: min(520px, calc(100vw - var(--page-gutter) * 2)); max-width: none; border: 1px solid rgb(255 255 255 / .22); background: rgb(10 10 10 / .82); color: var(--paper); backdrop-filter: blur(16px); transform: translate3d(-50%, 0, 0) scale(var(--dock-scale)); transform-origin: bottom center; transition: opacity .3s var(--ease), transform .42s var(--ease); }
.works-gl-dock.is-hidden, .works-gl-dock.is-menu-open, .works-gl-dock.is-search-open { --dock-scale: .9; opacity: 0; pointer-events: none; }
.works-gl-dock .dock-tabs button { border-color: rgb(255 255 255 / .28); background: transparent; color: rgb(255 255 255 / .74); transition: background .22s ease, color .22s ease, border-color .22s ease; }
.works-gl-dock .dock-tabs button:hover { border-color: var(--paper); color: var(--paper); }
.works-gl-dock .dock-tabs button.active { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.works-gl-dock .dock-row { min-height: 46px; border-top: 1px solid rgb(255 255 255 / .22); }
.works-gl-dock .dock-row p { color: rgb(255 255 255 / .82); }
.works-gl-dock .dock-open { border-color: rgb(255 255 255 / .3); color: var(--paper); }
.works-gl-dock .dock-hide { color: var(--paper); }

.works-gl-dock-toggle { position: fixed; z-index: 32; right: auto; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; border-radius: 0; border-color: rgb(255 255 255 / .3); background: rgb(10 10 10 / .82); color: var(--paper); backdrop-filter: blur(16px); transform: translate3d(-50%, 14px, 0) scale(.92); }
.works-gl-dock-toggle.is-visible { transform: translate3d(-50%, 0, 0) scale(1); }
.works-gl-dock-toggle:hover { transform: translate3d(-50%, -3px, 0) scale(1.02); }

@media (max-width: 700px) {
  .works-gl-dock { width: calc(100vw - 32px); }
}