and delete the query string. Nothing about it ships to a normal visitor. */ .wp-tuner { position: fixed; right: clamp(0.6rem, 2vw, 1.2rem); /* Clear of the jay switch, which sits in the same corner. */ bottom: 3.6rem; z-index: 80; width: min(17rem, calc(100vw - 1.6rem)); padding: 0.85rem 0.9rem 0.7rem; background: rgba(6, 12, 14, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--pw-rule); font-family: var(--pw-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--pw-bone-dim); } .wp-tuner h2 { margin: 0 0 0.6rem; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp-frost); } .wp-tuner label { display: block; margin-bottom: 0.55rem; } .wp-tuner label span { display: flex; justify-content: space-between; margin-bottom: 0.2rem; } .wp-tuner input[type="range"] { width: 100%; accent-color: var(--wp-frost); } .wp-tuner button { width: 100%; margin-top: 0.3rem; padding: 0.4rem; font: inherit; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp-frost); background: transparent; border: 1px solid var(--pw-brass-dim); cursor: pointer; } .wp-tuner button:hover { background: var(--wp-frost); color: var(--pw-void); } .wp-tuner code { display: block; margin-top: 0.5rem; color: var(--pw-bone-faint); word-break: break-all; line-height: 1.5; } /* ------------------------------------------------------------ fallback */ /* If WebGL is missing entirely, pines.js adds this class and the fog becomes two slowly-sliding CSS gradients. Not the same thing, but the page still reads as a foggy forest instead of a bare video. */ .wp-nogl .wp-fog { display: none; } .wp-nogl .wp-stage::after, .wp-nogl .wp-stage::before { content: ""; position: absolute; left: -30%; right: -30%; height: 70%; pointer-events: none; background: radial-gradient(60% 100% at 30% 60%, rgba(190, 215, 222, 0.16), transparent 70%), radial-gradient(50% 100% at 75% 40%, rgba(150, 180, 190, 0.13), transparent 70%); filter: blur(22px); } .wp-nogl .wp-stage::before { bottom: -6%; animation: wp-drift 68s linear infinite; } .wp-nogl .wp-stage::after { bottom: 22%; opacity: 0.6; animation: wp-drift 104s linear infinite reverse; } @keyframes wp-drift { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(8%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .wp-plate { transform: scale(1.04); } .wp-nogl .wp-stage::before, .wp-nogl .wp-stage::after { animation: none; } /* Still lit, still there — just not moving. */ .wp-mark { transform: none; } .wp-mark__img { animation: none; } } /* ------------------------------------------------------------- narrow */ /* On a phone the text spans the full width, so a left-weighted scrim protects nothing. Swap it for a bottom-up one. */ @media (max-width: 48rem) { .wp-vignette { background: linear-gradient(to top, rgba(2, 6, 8, 0.86) 0%, rgba(2, 6, 8, 0.52) 34%, transparent 68%), radial-gradient(130% 80% at 50% 30%, transparent 40%, rgba(2, 5, 7, 0.6) 100%), linear-gradient(to bottom, rgba(2, 5, 7, 0.55) 0%, transparent 24%); } } /* Under 80rem "whatever is left after the title" is under 220px and still shrinking, so the mark moves rather than dwindling into a smudge. It goes to the band between the strip and the eyebrow, which is dead space at every width below this — still the top RIGHT, so it is the same mark in the same corner of the eye. THAT BAND IS SET BY VIEWPORT HEIGHT, NOT WIDTH. The hero is bottom-aligned in a full-height frame, so a short window squeezes the gap from above and below at once: measured across ten sizes it runs from 42% of the viewport height on a tall tablet down to 20% on a 640px-high laptop. Hence the third term. 23vh is that 20% floor expressed as a WIDTH through the art's 1.376 aspect, with room left over for the gap — which is why a height limit is doing its work in a width property. Drop it and the mark lands on the eyebrow on any short screen. */ @media (max-width: 79.99rem) { .wp-mark { top: calc(var(--pw-chrome-h) + clamp(0.75rem, 2.5vh, 2rem)); right: clamp(1.25rem, 3.4vw, 3.5rem); bottom: auto; width: min(42vw, 18rem, 23vh); --wp-mark-travel-x: 9px; --wp-mark-travel-y: 6px; } } @media (max-width: 34rem) { .wp-roster__link { grid-template-columns: auto 1fr; } .wp-roster__status { grid-column: 2; justify-self: start; margin-top: 0.3rem; } }