:root { color-scheme: dark; --bg-0: #0c0b0a; --bg-1: #141312; --bg-2: #1b1a19; --bg-3: #201f1e; --bg-4: #2a2826; --bg-5: #34312e; --outline: #0a0908; --bevel-hi: rgba(255, 238, 214, .075); --bevel-lo: rgba(0, 0, 0, .42); --seam-hi: rgba(255, 236, 210, .09); --tx-0: #f4e9d3; --tx-1: #cfc4b2; --tx-2: #988f82; --tx-3: #6c655c; --lamp: #fedb86; --lamp-rgb: 254, 219, 134; --lamp-hi: color-mix(in srgb, var(--lamp), #fff 60%); --lamp-deep: #e8913a; --rtx: #c4ef1f; --rtx-deep: #6f9a07; --redstone: #ff3b2f; --amethyst: #b57bff; --diamond: #4be3ff; --rtx-rgb: 196, 239, 31; --redstone-rgb: 255, 59, 47; --amethyst-rgb: 181, 123, 255; --diamond-rgb: 75, 227, 255; --grn-face: #38a83d; --grn-hi: #7fdc7a; --grn-lo: #1e7426; --grn-glow: 120, 255, 110; --f-pixel: "Monocraft", ui-monospace, "Cascadia Mono", Consolas, monospace; --f-body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --px: 3px; --gutter: clamp(16px, 4vw, 40px); --w-narrow: 760px; --w-normal: 1180px; --w-wide: 1440px; --tb-h: 64px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --lamp-k: .3; --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM4 0h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM3 3h1v1h-1zM7 3h1v1h-1zM0 4h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM0 6h1v1h-1zM1 6h1v1h-1zM2 6h1v1h-1zM3 6h1v1h-1zM4 6h1v1h-1zM5 6h1v1h-1zM6 6h1v1h-1zM7 6h1v1h-1zM1 7h1v1h-1zM2 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM6 7h1v1h-1zM7 7h1v1h-1z'/%3E%3C/svg%3E"); } @media (max-width: 900px) { :root { --tb-h: 58px; --px: 2px; } } @font-face { font-family: "Monocraft"; src: url("/fonts/monocraft.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Monocraft"; src: url("/fonts/monocraft-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Monocraft"; src: url("/fonts/monocraft-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Rubik"; src: url("/fonts/rubik.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Rubik"; src: url("/fonts/rubik-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; } @property --sx { syntax: ""; inherits: false; initial-value: 0; } @property --sy { syntax: ""; inherits: false; initial-value: 0; } @property --sl { syntax: ""; inherits: false; initial-value: 0; } @property --sa { syntax: ""; inherits: false; initial-value: 0deg; } @property --k { syntax: ""; inherits: true; initial-value: 1; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tb-h) + 16px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } html { background: var(--bg-1); } html:root::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background: url("/assets/tex/dither.png") 0 0 / 64px 64px repeat; image-rendering: pixelated; } ::-webkit-scrollbar { width: 12px; height: 12px; background: var(--bg-1); } ::-webkit-scrollbar-track { background: url("/assets/tex/noise.png") 0 0 / 128px repeat, linear-gradient(180deg, #1b1a19 0 var(--tb-h), #141312 var(--tb-h) calc(var(--tb-h) + 6px), var(--bg-1) calc(var(--tb-h) + 6px)); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .35); } ::-webkit-scrollbar-thumb { --lift: 0%; background: linear-gradient(180deg, rgba(12, 11, 10, .5), transparent 3px, transparent calc(100% - 3px), rgba(12, 11, 10, .5)), linear-gradient(90deg, color-mix(in srgb, color-mix(in srgb, var(--sb-c, #fedb86), #fff var(--lift)) 80%, transparent), color-mix(in srgb, var(--sb-c, #fedb86), #fff var(--lift)) 3px calc(100% - 3px), color-mix(in srgb, color-mix(in srgb, var(--sb-c, #fedb86), #fff var(--lift)) 90%, transparent)); } ::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, rgba(12, 11, 10, .5), transparent 3px, transparent calc(100% - 3px), rgba(12, 11, 10, .5)), linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--sb-c, #fedb86), #fff var(--lift)) 80%, transparent), color-mix(in srgb, var(--sb-c, #fedb86), #fff var(--lift)) 3px calc(100% - 3px), color-mix(in srgb, color-mix(in srgb, var(--sb-c, #fedb86), #fff var(--lift)) 90%, transparent)); } ::-webkit-scrollbar-thumb:hover { --lift: 25%; } ::-webkit-scrollbar-thumb:active { --lift: 55%; } ::-webkit-scrollbar-corner { background: var(--bg-0); } .sb-glow, .lightfield, .hero__bg, .hero__motes, .hero__shafts { -webkit-user-select: none; user-select: none; } .sb-glow { position: fixed; z-index: 98; width: 0; pointer-events: none; mix-blend-mode: screen; --k: 1; transition: --k .2s; } .sb-glow.is-hot { --k: 1.45; } .sb-glow.is-held { --k: 2.1; } .sb-glow i { position: absolute; right: calc(var(--x) * 1px); width: calc(var(--w) * 1px); top: calc(var(--e) * -1px); bottom: calc(var(--e) * -1px); background: linear-gradient(to left, rgba(var(--sb), calc(var(--k) * 0.5)), rgba(var(--sb), calc(var(--k) * 0.36)) 2px, rgba(var(--sb), calc(var(--k) * 0.25)) 5px, rgba(var(--sb), calc(var(--k) * 0.17)) 9px, rgba(var(--sb), calc(var(--k) * 0.11)) 15px, rgba(var(--sb), calc(var(--k) * 0.07)) 23px, rgba(var(--sb), calc(var(--k) * 0.042)) 34px, rgba(var(--sb), calc(var(--k) * 0.024)) 48px, rgba(var(--sb), calc(var(--k) * 0.012)) 66px, rgba(var(--sb), calc(var(--k) * 0.005)) 88px, rgba(var(--sb), calc(var(--k) * 0.0015)) 112px, transparent 136px) right calc(var(--x) * -1px) top 0 / 136px 100% no-repeat; -webkit-mask: linear-gradient(transparent, #000 calc(var(--f) * 1px), #000 calc(100% - var(--f) * 1px), transparent); mask: linear-gradient(transparent, #000 calc(var(--f) * 1px), #000 calc(100% - var(--f) * 1px), transparent); } @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: rgb(var(--sb, 254, 219, 134)) var(--bg-0); scrollbar-width: thin; } } body { min-height: 100svh; font: 400 17px/1.65 var(--f-body); color: var(--tx-1); background: var(--bg-1); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(var(--lamp-rgb), .32); color: var(--tx-0); } :focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url("/assets/tex/grain.png") 0 0 / 192px repeat; image-rendering: pixelated; opacity: .55; } .lightfield { --mx: -999px; --my: -999px; --r: 360px; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .6s; } .lightfield.on { opacity: 1; } .lightfield::before { content: ""; position: absolute; inset: 0; background: url("/assets/tex/grain-lit.png") 0 0 / 192px repeat; image-rendering: pixelated; -webkit-mask: var(--halo) no-repeat; mask: var(--halo) no-repeat; -webkit-mask-size: calc(var(--r) * 2); mask-size: calc(var(--r) * 2); -webkit-mask-position: calc(var(--mx) - var(--r)) calc(var(--my) - var(--r)); mask-position: calc(var(--mx) - var(--r)) calc(var(--my) - var(--r)); } .lightfield i { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); background: var(--halo) center / contain no-repeat; opacity: .16; transform: translate(calc(var(--mx) - var(--r)), calc(var(--my) - var(--r))); } h1, h2, h3, h4, .h1, .h2, .h3 { font-family: var(--f-pixel); font-weight: 600; color: var(--tx-0); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; } h1, .h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 700; } h2, .h2 { font-size: clamp(1.6rem, 3.2vw, 2.55rem); } h3, .h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); } h4 { font-size: 1.05rem; } .lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--tx-1); text-wrap: pretty; } .muted { color: var(--tx-2); } .pixel { font-family: var(--f-pixel); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--f-pixel); letter-spacing: .16em; text-transform: uppercase; color: var(--lamp); } .eyebrow::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; box-shadow: 0 0 6px 1px currentColor, 0 0 18px 3px color-mix(in srgb, currentColor 45%, transparent); animation: led var(--led-dur, 4.5s) steps(1) var(--led-delay, 0s) infinite; } @keyframes led { 0%, 91%, 95%, 100% { opacity: 1; } 93%, 97% { opacity: .35; } } .sec-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 780px; } .sec-head.center { margin-inline: auto; text-align: center; justify-items: center; } .sec-head .lead { max-width: 680px; } .prose { color: var(--tx-1); max-width: 72ch; } .prose > * + * { margin-top: 1em; } .prose h2, .prose h3 { margin-top: 1.6em; } .prose strong { color: var(--tx-0); font-weight: 600; } .prose a, .link { color: var(--lamp); text-decoration: none; background: linear-gradient(currentColor 0 0) 0 100% / 100% 2px no-repeat; background-size: 100% 1px; transition: background-size .2s, color .2s; } .prose a:hover, .link:hover { color: var(--lamp-hi); background-size: 100% 2px; text-shadow: 0 0 12px rgba(var(--lamp-rgb), .45); } .prose ul { list-style: none; padding-left: 1.4em; } .prose ul > li { position: relative; } .prose ul > li + li { margin-top: .35em; } .prose ul > li::before { content: ""; position: absolute; left: -1.15em; top: .62em; width: 6px; height: 6px; background: var(--tx-3); } .prose ol { padding-left: 1.4em; } .prose ol > li::marker { font-family: var(--f-pixel); color: var(--lamp); } .prose code { font: .88em var(--f-pixel); background: var(--bg-0); color: var(--tx-0); padding: .12em .4em; border: 1px solid var(--bg-4); } .prose blockquote { padding: 14px 18px; background: rgba(0, 0, 0, .22); border-left: 4px solid var(--lamp-deep); color: var(--tx-1); } .prose hr { border: 0; height: 12px; background: var(--dither) 0 0 / 12px 12px repeat-x; opacity: .2; } .prose img { margin-block: 1em; border: var(--px) solid var(--outline); } .prose table { width: 100%; border-collapse: collapse; font-size: .95em; } .prose th, .prose td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--bg-4); } .prose th { font: 600 .8em var(--f-pixel); color: var(--tx-0); letter-spacing: .06em; text-transform: uppercase; } main { display: block; position: relative; } .blk { position: relative; overflow-x: clip; } .blk__in { position: relative; z-index: 1; margin-inline: auto; padding-inline: var(--gutter); } .w-narrow { max-width: calc(var(--w-narrow) + var(--gutter) * 2); } .w-normal { max-width: calc(var(--w-normal) + var(--gutter) * 2); } .w-wide { max-width: calc(var(--w-wide) + var(--gutter) * 2); } .w-full { max-width: none; } .sp-t-none { padding-top: 0; } .sp-b-none { padding-bottom: 0; } .sp-t-s { padding-top: 32px; } .sp-b-s { padding-bottom: 32px; } .sp-t-m { padding-top: clamp(56px, 8vw, 104px); } .sp-b-m { padding-bottom: clamp(56px, 8vw, 104px); } .sp-t-l { padding-top: clamp(80px, 12vw, 160px); } .sp-b-l { padding-bottom: clamp(80px, 12vw, 160px); } .sp-t-xl { padding-top: clamp(110px, 16vw, 220px); } .sp-b-xl { padding-bottom: clamp(110px, 16vw, 220px); } .blk { --sec-bg: transparent; } .bg-deep { --sec-bg: rgba(0, 0, 0, .28); background: var(--sec-bg); } .bg-raised { --sec-bg: var(--bg-2); background: var(--sec-bg); } .bg-image { --sec-bg: var(--bg-1); overflow: clip; } .blk__bg { position: absolute; inset: 0; z-index: 0; } .blk__bg img { width: 100%; height: 100%; object-fit: cover; } .blk__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-1) 0%, rgba(20, 19, 18, var(--dim)) 18%, rgba(20, 19, 18, var(--dim)) 82%, var(--bg-1) 100%); } .edge-dither::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; pointer-events: none; background: var(--sec-bg, var(--bg-1)); -webkit-mask: var(--dither) 0 0 / 32px 32px repeat-x; mask: var(--dither) 0 0 / 32px 32px repeat-x; } .edge-dither.bg-none::before { background: var(--bg-0); opacity: .6; } .edge-dither:not(.bg-none)::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 32px; pointer-events: none; background: var(--sec-bg); -webkit-mask: var(--dither) 0 0 / 32px 32px repeat-x; mask: var(--dither) 0 0 / 32px 32px repeat-x; transform: scaleY(-1); } .edge-seam { border-top: 1px solid var(--outline); box-shadow: inset 0 1px 0 var(--seam-hi); } .js [data-reveal] .blk__in > * { opacity: 0; transform: translateY(22px); } .js [data-reveal].is-in .blk__in > * { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); } .js [data-reveal].is-in .blk__in > :nth-child(2) { transition-delay: .08s; } .js [data-reveal].is-in .blk__in > :nth-child(3) { transition-delay: .16s; } .js [data-reveal].is-in .blk__in > :nth-child(n+4) { transition-delay: .24s; } .js [data-reveal] .blk__in > .btn-row { opacity: 1; } .js [data-reveal]:not(.is-in) .blk__in > .btn-row .pxb { opacity: 0; } .js [data-reveal].is-in .blk__in > .btn-row .pxb { animation: pxb-in .7s .2s var(--ease-out) backwards; } @keyframes pxb-in { from { opacity: 0; } } .js:not(.is-ready) [data-reveal] .blk__in > .btn-row .pxb { animation: failsafe .01s 2.5s forwards; } .js:not(.is-ready) [data-reveal] .blk__in > * { animation: failsafe .01s 2.5s forwards; } @keyframes failsafe { to { opacity: 1; transform: none; } } [data-stagger] > * { --i: 0; } .js [data-reveal] [data-stagger] > * { opacity: 0; transform: translateY(16px) scale(.985); } .js [data-reveal].is-in [data-stagger] > * { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(.12s + var(--i) * 55ms); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js [data-reveal] .blk__in > *, .js [data-reveal] [data-stagger] > * { opacity: 1 !important; transform: none !important; } } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; } ::view-transition-group(titlebar), ::view-transition-group(halo) { animation-duration: 0s; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .img-missing { display: grid; place-items: center; min-height: 120px; background: repeating-linear-gradient(45deg, #2a1a1a 0 10px, #241616 10px 20px); color: #ff8a80; font: 12px var(--f-pixel); padding: 12px; } [data-hidden] { opacity: .35; filter: grayscale(1); } .pxb { --face: var(--grn-face); --hi: var(--grn-hi); --lo: var(--grn-lo); --glow: var(--grn-glow); --ink: #fff; --lglow: 255, 220, 150; position: relative; isolation: isolate; display: inline-flex; align-items: stretch; vertical-align: middle; min-height: 50px; padding: 0; font: 600 15px/1.1 var(--f-pixel); letter-spacing: .02em; color: var(--ink); text-decoration: none; text-align: left; background: var(--face); border: var(--px) solid var(--outline); box-shadow: inset var(--px) var(--px) 0 var(--hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--lo), calc(var(--sx) * 16px) calc(var(--sy) * 16px + 3px) calc(4px + (1 - var(--sl)) * 20px) rgba(0, 0, 0, calc(var(--sl) * .6)), 0 3px 6px -1px rgba(0, 0, 0, .4); transition: transform .09s, filter .2s, box-shadow .25s var(--ease-out), --sx .35s, --sy .35s, --sl .5s var(--ease-out); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pxb::before { content: ""; position: absolute; inset: -120px -150px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow), .56), rgba(var(--glow), .41) 10%, rgba(var(--glow), .29) 20%, rgba(var(--glow), .2) 30%, rgba(var(--glow), .132) 40%, rgba(var(--glow), .083) 50%, rgba(var(--glow), .049) 60%, rgba(var(--glow), .025) 70%, rgba(var(--glow), .011) 80%, rgba(var(--glow), .003) 90%, rgba(var(--glow), 0)); opacity: 0; transform: scale(.7); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); } .pxb::after { content: ""; position: absolute; inset: calc(var(--px) * -1); padding: var(--px); pointer-events: none; --sl: inherit; --sa: inherit; --fall: calc((1.05 + var(--sl) * .5) * var(--fs, 1)); background: linear-gradient(var(--sa), rgba(var(--lglow), calc(var(--sl) * 0.312)), rgba(var(--lglow), calc(var(--sl) * 0.2434)) calc(6px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.181)) calc(13px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.1279)) calc(22px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0842)) calc(34px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0499)) calc(50px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0265)) calc(72px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0125)) calc(100px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0044)) calc(136px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0009)) calc(180px * var(--fall)), transparent calc(224px * var(--fall))); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mix-blend-mode: screen; } .pxb__face { --sl: inherit; --sa: inherit; --fall: calc((1.05 + var(--sl) * .5) * var(--fs, 1)); background: linear-gradient(var(--sa), rgba(var(--lglow), calc(var(--sl) * 0.624)), rgba(var(--lglow), calc(var(--sl) * 0.4867)) calc(6px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.3619)) calc(13px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.2558)) calc(22px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.1685)) calc(34px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0998)) calc(50px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.053)) calc(72px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.025)) calc(100px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0087)) calc(136px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0018)) calc(180px * var(--fall)), transparent calc(224px * var(--fall))); } .pxb__face::before { content: ""; position: absolute; inset: 0; padding: var(--px); pointer-events: none; --sl: inherit; --sa: inherit; --fall: calc((1.05 + var(--sl) * .5) * var(--fs, 1)); background: linear-gradient(var(--sa), rgba(var(--lglow), calc(var(--sl) * 1.0)), rgba(var(--lglow), calc(var(--sl) * 0.8112)) calc(6px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.6032)) calc(13px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.4264)) calc(22px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.2808)) calc(34px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.1664)) calc(50px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0884)) calc(72px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0416)) calc(100px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0146)) calc(136px * var(--fall)), rgba(var(--lglow), calc(var(--sl) * 0.0031)) calc(180px * var(--fall)), transparent calc(224px * var(--fall))); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mix-blend-mode: screen; } .pxb__face { display: flex; align-items: center; justify-content: center; gap: 12px; flex: 1; padding: 12px 22px; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); } .pxb__face .ico { width: var(--ico-w, 1.05em); height: var(--ico-h, 1.05em); flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); } .pxb__label { display: flex; flex-direction: column; gap: 4px; } .pxb__label small { font: 400 12.5px/1.2 var(--f-body); letter-spacing: 0; opacity: .88; text-shadow: none; } .pxb:hover { filter: brightness(1.1) saturate(1.05); } .pxb:active, .pxb.is-pressed { transform: translateY(var(--press-y, 0px)); box-shadow: inset var(--px) var(--px) 0 var(--lo), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--hi), 0 1px 0 rgba(0, 0, 0, .3); } .pxb.is-lit { filter: brightness(1.22) saturate(1.12); box-shadow: inset var(--px) var(--px) 0 var(--hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--lo), 0 0 0 1px rgba(var(--glow), .5), 0 0 10px 1px rgba(var(--glow), .6), 0 0 40px 8px rgba(var(--glow), .24); } .pxb.is-lit:active, .pxb.is-lit.is-pressed { box-shadow: inset var(--px) var(--px) 0 var(--lo), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--hi), 0 0 0 1px rgba(var(--glow), .5), 0 0 10px 1px rgba(var(--glow), .6), 0 0 40px 8px rgba(var(--glow), .24); } .pxb.is-lit::before { opacity: 1; transform: scale(1); transition-duration: .12s; } .pxb--sm { min-height: 40px; font-size: 13px; } .pxb--sm .pxb__face { padding: 8px 14px; gap: 9px; } .pxb--lg { min-height: 64px; font-size: 19px; } .pxb--lg .pxb__face { padding: 14px 30px; } .pxb--block { display: flex; width: 100%; } .pxb--icon .pxb__face { padding-inline: 12px; } .pxb--stone { --face: #57524c; --hi: #8c857c; --lo: #36322e; --glow: 255, 226, 180; --ink: var(--tx-0); } .pxb--dark { --face: #2b2927; --hi: #45413d; --lo: #1a1918; --glow: 255, 214, 150; --ink: var(--tx-0); } .pxb--gold { --face: #d6982f; --hi: #ffd77a; --lo: #93611a; --glow: 255, 205, 110; --ink: #2a1a05; } .pxb--gold .pxb__face { text-shadow: 0 1px 0 rgba(255, 240, 200, .5); } .pxb--rtx { --face: #8fbf0a; --hi: #d3f35e; --lo: #567805; --glow: 200, 255, 60; --ink: #142000; } .pxb--rtx .pxb__face { text-shadow: 0 1px 0 rgba(230, 255, 160, .5); } .pxb--purple { --face: #6f56d8; --hi: #a998ff; --lo: #4734a0; --glow: 170, 140, 255; } .pxb--blue { --face: #2f78d0; --hi: #7fb6ff; --lo: #1d4f93; --glow: 110, 180, 255; } .pxb--red { --face: #c2443c; --hi: #ff8b7f; --lo: #82241f; --glow: 255, 110, 90; } .pxb--ghost { --face: rgba(22, 21, 20, .62); --hi: rgba(255, 238, 214, .13); --lo: rgba(0, 0, 0, .35); --glow: 255, 214, 150; --ink: var(--tx-0); background: url("/assets/tex/noise.png") 0 0 / 128px repeat, var(--face); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); } .pxsplit { position: relative; display: inline-flex; gap: 6px; } .pxsplit > .pxb:first-child { flex: 1; } .pxsplit__more .pxb__face { padding-inline: 14px; } .pxsplit__more .ico { transition: transform .2s; } .pxsplit.is-open .pxsplit__more .ico { transform: rotate(180deg); } .pxmenu { position: absolute; z-index: 30; right: 0; top: calc(100% + 10px); min-width: 230px; display: grid; padding: 6px; gap: 2px; background: var(--bg-3); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 18px 40px -8px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s, transform .2s var(--ease-out); } .pxsplit.is-open .pxmenu { opacity: 1; transform: none; pointer-events: auto; } .pxmenu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font: 600 13px var(--f-pixel); color: var(--tx-1); text-decoration: none; } .pxmenu a:hover, .pxmenu a:focus-visible { background: rgba(255, 220, 160, .08); color: var(--lamp-hi); outline: none; } .pxmenu a .ico { width: 14px; height: 14px; color: var(--tx-2); } .pxmenu a:hover .ico { color: var(--lamp); } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; } .btn-row.center { justify-content: center; } .pxp { position: relative; background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 10px 30px -14px rgba(0, 0, 0, .8); } .rt { --cx: -999px; --cy: -999px; } .rt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--halo) no-repeat; background-size: 360px 360px; background-position: calc(var(--cx) - 180px) calc(var(--cy) - 180px); mix-blend-mode: screen; opacity: 0; transition: opacity .35s; } .rt:hover::after { opacity: .2; } .pxbadge { --c: var(--tx-1); display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 4px; font: 600 10.5px/1 var(--f-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 12%, rgba(0, 0, 0, .5)); border: 2px solid color-mix(in srgb, var(--c) 35%, var(--outline)); backdrop-filter: blur(6px); } .pxbadge::before { content: ""; width: 6px; height: 6px; background: var(--c); box-shadow: 0 0 8px var(--c); } .pxbadge--available { --c: var(--rtx); } .pxbadge--new { --c: var(--lamp); } .pxbadge--dev { --c: var(--amethyst); } .pxbadge--soon { --c: var(--diamond); } .pxbadge--legacy { --c: var(--tx-2); } .pxbadge--tool { --c: #ff9f5a; } .nametag { display: inline-block; padding: 3px 9px 2px; font: 400 14px/1.4 var(--f-pixel); color: #fff; background: rgba(0, 0, 0, .42); white-space: nowrap; transition: background .2s, color .2s, text-shadow .2s, transform .2s; } .nametag:hover { background: rgba(0, 0, 0, .6); color: var(--lamp-hi); text-shadow: 0 0 12px rgba(var(--lamp-rgb), .7); transform: translateY(-2px); } .frame { position: relative; overflow: hidden; background: var(--bg-0); border: var(--px) solid var(--outline); box-shadow: 0 0 0 1px rgba(255, 238, 214, .05), 0 24px 60px -24px rgba(0, 0, 0, .9); } .frame > img { width: 100%; height: 100%; object-fit: cover; } .cmp { --pos: 50%; position: relative; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; background: var(--bg-0); border: var(--px) solid var(--outline); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); } .cmp img { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; } .cmp__b { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); } .cmp__b img { height: 100%; object-fit: cover; } .cmp__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: linear-gradient(180deg, rgba(var(--lamp-rgb), .5), var(--lamp-hi) 3px, var(--lamp-hi) calc(100% - 3px), rgba(var(--lamp-rgb), .5)); filter: drop-shadow(0 0 1px rgba(var(--lamp-rgb), .85)) drop-shadow(0 0 4px rgba(var(--lamp-rgb), .45)) drop-shadow(0 0 11px rgba(var(--lamp-rgb), .24)) drop-shadow(0 0 26px rgba(var(--lamp-rgb), .1)); } .cmp__knob { position: absolute; top: 50%; left: var(--pos); width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; color: #2a1a05; background: var(--lamp); border: var(--px) solid var(--outline); box-shadow: inset 3px 3px 0 #fff3c4, inset -3px -3px 0 #b8741f, 0 0 26px 6px rgba(var(--lamp-rgb), .5); transition: transform .15s; } .cmp__knob .ico { width: 24px; height: 24px; } .cmp:hover .cmp__knob, .cmp.is-drag .cmp__knob { transform: scale(1.1); } .cmp__tag { position: absolute; bottom: 12px; padding: 4px 9px; font: 600 11px var(--f-pixel); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; } .cmp__tag--a { left: 12px; } .cmp__tag--b { right: 12px; } .lbx { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: 1fr auto; background: rgba(8, 7, 6, .94); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .25s; } .lbx.is-open { opacity: 1; pointer-events: auto; } .lbx__stage { position: relative; display: grid; place-items: center; padding: 64px 72px 12px; min-height: 0; } .lbx__img { max-width: 100%; max-height: 100%; object-fit: contain; border: var(--px) solid var(--outline); box-shadow: 0 30px 90px -20px #000; transition: opacity .2s, transform .35s var(--ease-out); } .lbx__img.is-swapping { opacity: 0; transform: scale(.985); } .lbx__bar { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 16px 22px; color: var(--tx-1); } .lbx__cap { font: 14px var(--f-body); text-align: center; max-width: 70ch; } .lbx__count { font: 600 12px var(--f-pixel); color: var(--tx-2); letter-spacing: .1em; } .lbx__close { position: absolute; top: 14px; right: 14px; } .lbx__nav { position: absolute; top: 50%; transform: translateY(-50%); } .lbx__prev { left: 14px; } .lbx__next { right: 14px; } @media (max-width: 700px) { .lbx__stage { padding: 60px 8px 8px; } .lbx__bar { padding-inline: 70px; min-height: 76px; } .lbx__nav { position: fixed; top: auto; bottom: 16px; transform: none; } } .cards { display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .cards--2 { --cols: 2; } .cards--3 { --cols: 3; } .cards--4 { --cols: 4; } @media (max-width: 1100px) { .cards--4 { --cols: 3; } } @media (max-width: 900px) { .cards--3, .cards--4 { --cols: 2; } } @media (max-width: 600px) { .cards { --cols: 1 !important; } } .card { --a: var(--lamp-rgb); position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 16px 36px -22px #000; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 0 0 1px rgba(var(--a), .3), 0 24px 50px -22px rgba(var(--a), .35); } .card__img { position: relative; aspect-ratio: var(--ar, 16/9); overflow: hidden; background: var(--bg-0); border-bottom: var(--px) solid var(--outline); } .card__img .zoom, .card__img img { display: block; width: 100%; height: 100%; } .card__img img { object-fit: cover; transition: transform 1s var(--ease-out), filter .5s; filter: brightness(.92); } .card:hover .card__img img { transform: scale(1.05); filter: brightness(1.04); } .card__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; background: linear-gradient(0deg, rgba(var(--a), .12), transparent); opacity: 0; transition: opacity .5s; } .card:hover .card__img::after { opacity: 1; } .card__badge { position: absolute; top: 12px; left: 12px; } .card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: clamp(18px, 2vw, 24px); } .card h3 { font-size: 1.15rem; } .card__text { font-size: 15.5px; line-height: 1.6; } .card__btns { margin-top: auto; padding-top: 10px; gap: 10px; } .card--wide { grid-column: span 2; } .card--full { grid-column: 1 / -1; flex-direction: row; } .card--full .card__img { flex: 1.45 1 0; aspect-ratio: auto; min-height: clamp(280px, 30vw, 420px); border-bottom: 0; border-right: var(--px) solid var(--outline); } .card--full .card__body { flex: 1 1 0; justify-content: center; gap: 14px; padding: clamp(22px, 3vw, 40px); } .card--full h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); } .card--full .card__text { font-size: 16.5px; } .card--full .card__btns { margin-top: 8px; } .card--full .card__badge { top: 16px; left: 16px; } @media (max-width: 760px) { .card--full { flex-direction: column; } .card--full .card__img { flex: none; aspect-ratio: var(--ar, 16/9); min-height: 0; border-right: 0; border-bottom: var(--px) solid var(--outline); } } @media (max-width: 600px) { .card--wide { grid-column: auto; } } .cta { --a: var(--lamp-rgb); position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: center; gap: 32px; padding: clamp(32px, 6vw, 72px); background: var(--bg-3); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 0 0 1px rgba(var(--a), .12), 0 30px 80px -30px rgba(var(--a), .25); } .cta.has-side { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .cta__bg { position: absolute; inset: 0; z-index: -2; } .cta__bg img { width: 100%; height: 100%; object-fit: cover; } .cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 19, 18, .95) 0%, rgba(20, 19, 18, .78) 50%, rgba(20, 19, 18, .35) 100%), radial-gradient(ellipse 60% 90% at 100% 100%, rgba(var(--a), .22), transparent 70%); } .cta__body { display: grid; gap: 16px; justify-items: start; max-width: 620px; } .cta__text { font-size: 17px; color: var(--tx-0); opacity: .9; } .cta__body .btn-row { margin-top: 8px; } .cta__side img { margin-left: auto; max-height: 340px; width: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px rgba(var(--a), .25)); animation: logo-float 8s ease-in-out infinite alternate; } @media (max-width: 900px) { .cta.has-side { grid-template-columns: 1fr; } .cta__side { order: -1; } .cta__side img { margin: 0 auto; max-height: 220px; } } .dvd { display: grid; place-items: center; } .dvd--space { height: 24px; } .dvd--seam i { display: block; width: 100%; height: 2px; border-top: 1px solid var(--outline); border-bottom: 1px solid var(--seam-hi); } .dvd--dither i { display: block; width: 100%; height: 16px; background: var(--bg-0); -webkit-mask: var(--dither) 0 0 / 16px 16px repeat-x; mask: var(--dither) 0 0 / 16px 16px repeat-x; opacity: .8; } .dvd--redstone i { display: block; width: min(560px, 80%); height: 4px; position: relative; background: linear-gradient(90deg, transparent, #7d1a12 12%, var(--redstone) 50%, #7d1a12 88%, transparent); box-shadow: 0 0 14px rgba(255, 60, 40, .45); } .dvd--redstone i::before, .dvd--redstone i::after { content: ""; position: absolute; top: -6px; width: 16px; height: 16px; left: 50%; margin-left: -8px; background: var(--redstone); box-shadow: 0 0 16px 4px rgba(255, 60, 40, .6), inset 3px 3px 0 #ff8a7a, inset -3px -3px 0 #9b1b12; border: 2px solid var(--outline); } .dvd--redstone i::after { width: 6px; height: 6px; top: -1px; margin-left: -3px; border: 0; background: #ffd0c0; box-shadow: 0 0 10px 2px #ff6b5a; animation: rs 2.6s ease-in-out infinite; } @keyframes rs { 50% { opacity: .5; } } .dls { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .dl { --a: 196, 239, 31; position: relative; display: flex; flex-direction: column; background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 20px 40px -24px #000; } .dl__img { position: relative; aspect-ratio: 16/9; overflow: hidden; border-bottom: var(--px) solid var(--outline); } .dl__img .zoom, .dl__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .dl__img img { transition: transform 1.2s var(--ease-out); } .dl:hover .dl__img img { transform: scale(1.05); } .dl__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: clamp(18px, 2.2vw, 26px); } .dl h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); } .dl__text { font-size: 15.5px; } .dl__action { margin-top: auto; padding-top: 16px; } .dl__action .pxsplit { display: flex; width: 100%; } .dl__action .pxb { min-height: 60px; } .dl__action .pxb__label { align-items: center; text-align: center; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; } .dl__action .pxb__face { justify-content: center; } .dl__action .pxmenu { left: 0; right: 0; } .dl__note { margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; color: var(--tx-2); font-size: 15px; } .eco { display: grid; gap: clamp(10px, 1.4vw, 16px); grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(112px, 8.6vw); grid-auto-flow: dense; } @media (min-width: 1500px) { .eco { grid-auto-rows: 128px; } } .eco__tile { --a: var(--lamp-rgb); position: relative; overflow: hidden; isolation: isolate; display: block; grid-column: span 2; grid-row: span 2; color: var(--tx-0); text-decoration: none; background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 16px 40px -20px #000; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); } .eco--m { grid-column: span 2; grid-row: span 4; } .eco--l { grid-column: span 4; grid-row: span 4; } .eco--wide { grid-column: span 4; grid-row: span 2; } .eco--tall { grid-column: span 2; grid-row: span 6; } .eco__tile.no-img { background: var(--bg-2); } .eco__tile.no-img::before { background: radial-gradient(ellipse 55% 90% at 88% 30%, rgba(var(--a), .2), transparent 70%), radial-gradient(ellipse 30% 60% at 70% 110%, rgba(var(--a), .12), transparent 70%); } .eco__tile.no-img .eco__img { display: block; inset: 0 0 0 40%; background: rgba(var(--a), .55); -webkit-mask: var(--dither) 0 0 / 24px 24px repeat; mask: var(--dither) 0 0 / 24px 24px repeat; -webkit-mask-image: var(--dither), linear-gradient(90deg, transparent, #000 60%); -webkit-mask-composite: source-in; mask-composite: intersect; mask-image: var(--dither), linear-gradient(90deg, transparent, #000 60%); mask-size: 24px 24px, 100% 100%; -webkit-mask-size: 24px 24px, 100% 100%; opacity: .22; animation: eco-shimmer 6s ease-in-out infinite alternate; } @keyframes eco-shimmer { to { opacity: .4; } } .eco__img { position: absolute; inset: 0; z-index: -2; } .eco__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease-out), filter .6s; filter: saturate(.9) brightness(.85); } .eco__tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(14, 13, 12, .96) 0%, rgba(14, 13, 12, .7) 40%, rgba(14, 13, 12, .1) 75%); } .eco__light { position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(var(--a), 0), inset 0 -60px 80px -40px rgba(var(--a), 0); transition: box-shadow .5s var(--ease-out); } .eco__tile:hover, .eco__tile:focus-visible { transform: translateY(-4px); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 0 0 1px rgba(var(--a), .35), 0 22px 60px -18px rgba(var(--a), .35), 0 30px 50px -30px #000; } .eco__tile:hover .eco__light { box-shadow: inset 0 0 0 2px rgba(var(--a), .55), inset 0 -80px 90px -50px rgba(var(--a), .35); } .eco__tile:hover .eco__img img { transform: scale(1.07); filter: saturate(1.05) brightness(1); } .eco__body { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 2vw, 26px); } .eco__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .eco__icon { display: grid; place-items: center; width: 40px; height: 40px; color: rgb(var(--a)); background: rgba(0, 0, 0, .45); border: 2px solid rgba(0, 0, 0, .6); backdrop-filter: blur(6px); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .06); } .eco__icon .ico { width: 18px; height: 18px; filter: drop-shadow(0 0 6px rgba(var(--a), .8)); } .eco__top .pxbadge { margin-left: auto; } .eco__text { display: grid; gap: 8px; } .eco__kicker { font: 600 11px var(--f-pixel); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--a)); text-shadow: 0 0 12px rgba(var(--a), .5); } .eco__tile h3 { font-size: clamp(1.1rem, 1.6vw, 1.45rem); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); } .eco--l h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); } .eco__tile p { font-size: 15px; line-height: 1.5; color: var(--tx-1); max-width: 52ch; } .eco--s p, .eco--wide p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .eco__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 12.5px var(--f-pixel); color: rgb(var(--a)); letter-spacing: .04em; } .eco__cta .ico { width: 12px; height: 12px; transition: transform .3s var(--ease-out); } .eco__tile:hover .eco__cta .ico { transform: translateX(5px); } @media (max-width: 1000px) { .eco { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(140px, auto); } .eco__tile, .eco--s, .eco--m, .eco--tall { grid-column: span 1; grid-row: span 2; } .eco--l, .eco--wide { grid-column: span 2; grid-row: span 2; } } @media (max-width: 600px) { .eco { grid-template-columns: 1fr; grid-auto-rows: auto; } .eco__tile, .eco--s, .eco--m, .eco--l, .eco--wide, .eco--tall { grid-column: span 1; grid-row: auto; min-height: 260px; } .eco--l { min-height: 340px; } } .faq__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 44px); } .faq__head .sec-head { margin-bottom: 0; } .faq__search { display: flex; align-items: center; gap: 10px; min-width: min(320px, 100%); padding: 0 14px; height: 46px; background: var(--bg-0); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .5), inset -2px -2px 0 var(--bevel-hi); color: var(--tx-2); transition: box-shadow .25s, color .25s; } .faq__search:focus-within { color: var(--lamp); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .5), 0 0 0 1px rgba(var(--lamp-rgb), .35), 0 0 22px -4px rgba(var(--lamp-rgb), .4); } .faq__search .ico { width: 16px; height: 16px; flex: none; } .faq__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 15px var(--f-body); color: var(--tx-0); } .faq__search input::placeholder { color: var(--tx-3); } .faq__list { display: grid; gap: 10px; } .faq__item { position: relative; background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); transition: background .3s, box-shadow .3s; } .faq__item::before { content: ""; position: absolute; left: -3px; top: -3px; bottom: -3px; width: 4px; background: linear-gradient(180deg, rgba(var(--lamp-rgb), .5), var(--lamp) 3px, var(--lamp) calc(100% - 3px), rgba(var(--lamp-rgb), .5)); filter: drop-shadow(0 0 1px rgba(var(--lamp-rgb), .85)) drop-shadow(0 0 4px rgba(var(--lamp-rgb), .45)) drop-shadow(0 0 11px rgba(var(--lamp-rgb), .24)) drop-shadow(0 0 26px rgba(var(--lamp-rgb), .1)); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease-out); } .faq__item[open] { background: var(--bg-3); } .faq__item[open]::before { transform: scaleY(1); } .faq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 20px clamp(16px, 2.4vw, 26px); } .faq__item summary::-webkit-details-marker { display: none; } .faq__n { font: 600 12px var(--f-pixel); color: var(--tx-3); letter-spacing: .08em; transition: color .3s; } .faq__q { font: 500 clamp(1rem, 1.4vw, 1.12rem)/1.4 var(--f-body); color: var(--tx-0); } .faq__item summary:hover .faq__q { color: var(--lamp-hi); } .faq__item[open] .faq__n { color: var(--lamp); text-shadow: 0 0 10px rgba(var(--lamp-rgb), .6); } .faq__pm { position: relative; width: 14px; height: 14px; flex: none; } .faq__pm i { position: absolute; left: 0; top: 6px; width: 14px; height: 3px; background: var(--tx-2); transition: transform .35s var(--ease-out), background .3s; } .faq__pm i + i { transform: rotate(90deg); } .faq__item[open] .faq__pm i { background: var(--lamp); } .faq__item[open] .faq__pm i + i { transform: rotate(0); } .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); } .faq__a > .prose { overflow: hidden; min-height: 0; padding: 0 clamp(16px, 2.4vw, 26px) 0 calc(clamp(16px, 2.4vw, 26px) + 40px); max-width: none; transition: padding-bottom .45s var(--ease-out); } .faq__item[open] .faq__a, .faq__item.is-opening .faq__a { grid-template-rows: 1fr; } .faq__item[open] .faq__a > .prose { padding-bottom: 24px; } .faq__item.is-closing .faq__a { grid-template-rows: 0fr; } .faq__item.is-closing .faq__a > .prose { padding-bottom: 0; } @starting-style { .faq__item[open] .faq__a { grid-template-rows: 0fr; } .faq__item[open] .faq__a > .prose { padding-bottom: 0; } } .faq__a mark { background: rgba(var(--lamp-rgb), .25); color: var(--tx-0); } .faq__none { color: var(--tx-2); padding: 18px 4px; } @media (max-width: 600px) { .faq__n { display: none; } .faq__item summary { grid-template-columns: 1fr auto; } .faq__a > .prose { padding-left: 16px; } } .fg { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .fg--2 { --cols: 2; } .fg--3 { --cols: 3; } .fg--4 { --cols: 4; } @media (max-width: 1100px) { .fg--4 { --cols: 3; } } @media (max-width: 900px) { .fg--3, .fg--4 { --cols: 2; } } @media (max-width: 600px) { .fg { --cols: 1 !important; } } .fg__item { --a: var(--lamp-rgb); position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2vw, 24px); background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 14px 32px -22px #000; transition: box-shadow .45s var(--ease-out), background .45s; } .fg__item::before { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 3px; pointer-events: none; background: linear-gradient(90deg, rgba(var(--a), .5), rgb(var(--a)) 3px, rgb(var(--a)) calc(100% - 3px), rgba(var(--a), .5)); filter: drop-shadow(0 0 1px rgba(var(--a), .85)) drop-shadow(0 0 5px rgba(var(--a), .45)) drop-shadow(0 0 14px rgba(var(--a), .22)); opacity: 0; transition: opacity .45s; } .fg__item:hover { background: color-mix(in srgb, var(--bg-2), rgb(var(--a)) 3%); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 0 0 1px rgba(var(--a), .22), 0 22px 50px -24px rgba(var(--a), .3); } .fg__item:hover::before { opacity: 1; } .fg__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .fg__slot { display: grid; place-items: center; flex: none; width: 52px; height: 52px; color: rgb(var(--a)); background: radial-gradient(closest-side, rgba(var(--a), .12), transparent), var(--bg-0); border: 2px solid var(--outline); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .55), inset -2px -2px 0 rgba(255, 238, 214, .06); transition: background .45s, box-shadow .45s; } .fg__slot .ico { width: 24px; height: 24px; filter: drop-shadow(0 0 5px rgba(var(--a), .7)); transition: filter .45s; } .fg__item:hover .fg__slot { background: radial-gradient(closest-side, rgba(var(--a), .3), transparent), var(--bg-0); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .55), inset -2px -2px 0 rgba(255, 238, 214, .06), 0 0 22px rgba(var(--a), .25); } .fg__item:hover .fg__slot .ico { filter: drop-shadow(0 0 4px rgba(var(--a), .95)) drop-shadow(0 0 12px rgba(var(--a), .6)); } .fg__tag--new { --c: var(--lamp); } .fg__tag--upgraded { --c: var(--rtx); } .fg__tag--fixed { --c: var(--diamond); } .fg__item h3 { font-size: 1.08rem; } .fg__text { font-size: 15px; line-height: 1.6; } .fg__btns { margin-top: clamp(22px, 3vw, 34px); } .fg { grid-auto-flow: dense; } .fg__item.is-wide { grid-column: span 2; } .fg__item.is-wide h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); } .fg__item.is-wide .fg__text { font-size: 15.5px; } .fg__item.has-img { isolation: isolate; } .fg__img { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .fg__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.78); transition: filter .6s, transform 1.2s var(--ease-out); } .fg__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(27, 26, 25, .97) 0%, rgba(27, 26, 25, .86) 45%, rgba(27, 26, 25, .35) 100%); } .fg__item.is-wide .fg__img::after { background: linear-gradient(90deg, rgba(27, 26, 25, .97) 0%, rgba(27, 26, 25, .9) 34%, rgba(27, 26, 25, .3) 72%, rgba(27, 26, 25, .12) 100%); } .fg__item.is-wide.has-img > :not(.fg__img) { max-width: min(100%, 440px); } .fg__item:hover .fg__img img { filter: saturate(1) brightness(.95); transform: scale(1.03); } @media (max-width: 600px) { .fg__item.is-wide { grid-column: auto; } .fg__item.is-wide.has-img { min-height: 300px; justify-content: flex-end; } .fg__item.is-wide .fg__img::after { background: linear-gradient(0deg, rgba(27, 26, 25, .97) 0%, rgba(27, 26, 25, .86) 50%, rgba(27, 26, 25, .25) 100%); } .fg__item.is-wide.has-img .fg__top { margin-bottom: auto; } } .ftr { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; } .ftr--media-right.ftr--wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); } .ftr--media-left.ftr--wide { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); } .ftr--media-right.ftr--half, .ftr--media-left.ftr--half { grid-template-columns: 1fr 1fr; } .ftr--media-left .ftr__media { order: -1; } .ftr--media-below { grid-template-columns: 1fr; } .ftr--media-below .ftr__text { max-width: 760px; } .ftr__text { display: grid; gap: 16px; justify-items: start; } .ftr__text .prose { font-size: 16.5px; } .ftr__media { display: grid; gap: 16px; } .ftr--media-below .ftr__media.is-multi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .ftr__fig { margin: 0; display: grid; gap: 10px; } .ftr__fig .frame .zoom, .ftr__fig .frame img { display: block; width: 100%; } .ftr__fig .frame img { transition: transform 1s var(--ease-out); } .ftr__fig .frame:hover img { transform: scale(1.025); } .ftr__fig figcaption { font-size: 14px; color: var(--tx-2); } @media (max-width: 900px) { .ftr--media-right.ftr--wide, .ftr--media-left.ftr--wide, .ftr--media-right.ftr--half, .ftr--media-left.ftr--half { grid-template-columns: 1fr; } .ftr--media-left .ftr__media { order: 0; } } .blk-footer { position: relative; margin-top: clamp(40px, 6vw, 80px); background: var(--bg-0); } .blk-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; background: var(--bg-0); -webkit-mask: var(--dither) 0 0 / 40px 40px repeat-x; mask: var(--dither) 0 0 / 40px 40px repeat-x; } .foot__in { max-width: calc(var(--w-normal) + var(--gutter) * 2); margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; } .foot__brand { display: grid; gap: 18px; align-content: start; justify-items: start; } .foot__logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font: 700 20px var(--f-pixel); color: var(--tx-0); } .foot__logo img { width: 40px; height: 40px; filter: drop-shadow(0 0 14px rgba(var(--lamp-rgb), calc(.15 + var(--lamp-k) * .5))); transition: filter .2s; } .foot__tag { font-size: 15px; color: var(--tx-2); max-width: 40ch; } .foot__socials { display: flex; flex-wrap: wrap; gap: 10px; } .foot__socials .ico { width: 16px; height: 16px; } .foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; } .foot__col h3 { font: 600 12px var(--f-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-2); margin-bottom: 14px; } .foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .foot__col a { font-size: 15px; color: var(--tx-1); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: color .2s, text-shadow .2s; } .foot__col a .ico { width: 10px; height: 10px; opacity: .45; } .foot__col a:hover { color: var(--lamp-hi); text-shadow: 0 0 12px rgba(var(--lamp-rgb), .45); } .foot__base { position: relative; border-top: 1px solid #050404; box-shadow: inset 0 1px 0 rgba(255, 236, 210, .045); } .foot__in--base { padding-top: 26px; padding-bottom: calc(26px + env(safe-area-inset-bottom)); grid-template-columns: 1fr auto; align-items: center; gap: 24px; } .foot__legal { display: grid; gap: 8px; font-size: 13.5px; color: var(--tx-3); } .foot__legal .prose { color: var(--tx-3); max-width: 80ch; } .foot__legal .prose a { color: var(--tx-2); } .foot__copy { font: 12px var(--f-pixel); letter-spacing: .06em; } .foot__ver { position: absolute; right: var(--gutter); bottom: calc(6px + env(safe-area-inset-bottom)); font: 10px/1 var(--f-pixel); letter-spacing: .06em; color: var(--tx-3); opacity: .6; white-space: nowrap; } .lever { --t: 4px; position: relative; display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lever__frame { position: relative; display: block; width: calc(var(--t) * 6); height: calc(var(--t) * 10); background: url("data:image/svg+xml,") 0 0 / 100% 100%; image-rendering: pixelated; box-shadow: 0 0 0 2px #151312, 0 3px 0 2px rgba(0, 0, 0, .5); transition: filter .2s, box-shadow .3s; } .lever__slot { position: absolute; left: calc(var(--t) * 2); top: var(--t); width: calc(var(--t) * 2); height: calc(var(--t) * 8); background: url("data:image/svg+xml,") 0 0 / 100% 100%; image-rendering: pixelated; box-shadow: inset 0 var(--t) 0 rgba(0, 0, 0, .45), inset 2px 0 0 rgba(0, 0, 0, .3); transition: box-shadow .25s; } .lever__knob { position: absolute; left: var(--t); top: calc(var(--t) * 6); width: calc(var(--t) * 4); height: calc(var(--t) * 3); background: url("data:image/svg+xml,") 0 0 / 100% 100%; image-rendering: pixelated; box-shadow: 0 calc(var(--t) * .75) 0 rgba(0, 0, 0, .5); transition: top .16s var(--ease-out); } .lever[aria-pressed="true"] .lever__knob { top: var(--t); } .lever[aria-pressed="true"] .lever__frame { box-shadow: 0 0 0 2px #151312, 0 3px 0 2px rgba(0, 0, 0, .5), 0 0 16px 2px rgba(var(--redstone-rgb), .22); } .lever:hover .lever__frame { filter: brightness(1.15); } .lever:focus-visible { outline: 2px solid var(--lamp); outline-offset: 4px; } .lever__label { font: 600 9.5px var(--f-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); } .lever:hover .lever__label { color: var(--lamp); } @media (prefers-reduced-motion: reduce) { .lever__knob { transition: none; } } html.lights-out body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: rgba(5, 4, 3, .38); animation: lights-out .35s ease-out backwards; } @keyframes lights-out { from { opacity: 0; } } html.lights-kept body::after { animation: none; } @media (max-width: 800px) { .foot__in { grid-template-columns: 1fr; gap: 36px; } .foot__in--base { grid-template-columns: 1fr auto; } } .totop.pxb { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom) + var(--lift, 0px)); z-index: 90; min-height: 44px; opacity: 0; visibility: hidden; translate: 0 10px; transition: opacity .3s, translate .3s var(--ease-out), visibility 0s .3s, transform .09s, filter .2s, box-shadow .25s var(--ease-out), --sx .35s, --sy .35s, --sl .5s var(--ease-out); } .totop.pxb.is-on { opacity: 1; visibility: visible; translate: none; transition-delay: 0s; } .totop .pxb__face { padding: 8px 10px; } .blk-hero { margin-top: calc(var(--tb-h) * -1); } .hero { position: relative; overflow: hidden; isolation: isolate; display: grid; place-items: center; min-height: 100svh; padding: calc(var(--tb-h) + 40px) var(--gutter) 120px; background: var(--bg-0); } .hero--tall { min-height: 82svh; } .hero--medium { min-height: 62svh; } .hero__bg { position: absolute; inset: -6% 0 0; z-index: -3; will-change: transform; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s var(--ease-in-out); animation: hero-drift 34s ease-in-out infinite alternate; } .hero__img.is-on { opacity: 1; } @keyframes hero-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.11) translate3d(-1.2%, -1%, 0); } } .hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(12, 11, 10, .72) 0%, rgba(12, 11, 10, 0) 22%), radial-gradient(ellipse 60% 50% at 50% 46%, rgba(12, 11, 10, calc(var(--dim) * .4)), transparent 80%), linear-gradient(0deg, var(--bg-1) 0%, rgba(20, 19, 18, .65) 16%, rgba(20, 19, 18, 0) 42%), rgba(12, 11, 10, var(--dim)); } .hero__shafts { position: absolute; inset: 0; z-index: -2; pointer-events: none; mix-blend-mode: screen; overflow: hidden; } .hero__shafts i { position: absolute; top: -20%; width: 18%; height: 140%; background: linear-gradient(180deg, rgba(255, 226, 170, .22), rgba(255, 220, 160, .05) 60%, transparent); filter: blur(26px); transform-origin: 50% 0; transform: rotate(22deg); animation: shaft 16s ease-in-out infinite alternate; } .hero__shafts i:nth-child(1) { left: 18%; } .hero__shafts i:nth-child(2) { left: 46%; width: 9%; opacity: .7; animation-duration: 21s; animation-delay: -6s; } .hero__shafts i:nth-child(3) { left: 70%; width: 13%; opacity: .55; animation-duration: 18s; animation-delay: -11s; } @keyframes shaft { from { transform: rotate(18deg); opacity: .55; } to { transform: rotate(26deg); opacity: 1; } } .hero__motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .hero__content { z-index: 1; } .hero__content { position: relative; display: grid; justify-items: center; gap: clamp(18px, 3vw, 28px); text-align: center; width: 100%; } .hero__eyebrow { color: var(--lamp-hi); } .hero__title { width: min(var(--tw), 92vw, (100svh - 330px) * 2.24); min-width: min(300px, 92vw); margin: 0; position: relative; } .hero__logo { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px rgba(196, 239, 31, .14)); animation: logo-in 1.2s var(--ease-out) backwards, logo-float 9s ease-in-out 1.2s infinite alternate; } @keyframes logo-in { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(6px); } } @keyframes logo-float { to { transform: translateY(-8px); } } .hero__title.has-sheen::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 38%, rgba(255, 252, 235, .55) 49%, rgba(255, 252, 235, .0) 60%) -150% 0 / 250% 100% no-repeat; mix-blend-mode: overlay; animation: sheen 7.5s ease-in-out 2s infinite, logo-float 9s ease-in-out 1.2s infinite alternate; } @keyframes sheen { 0%, 70% { background-position: 150% 0; } 100% { background-position: -150% 0; } } .hero__tagline { max-width: 640px; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.55; color: var(--tx-0); text-shadow: 0 2px 16px rgba(0, 0, 0, .7); animation: logo-in 1.2s .25s var(--ease-out) backwards; } .hero__btns { margin-top: 8px; } .hero__btns .pxb { animation: logo-in 1.2s .4s var(--ease-out) backwards; } .hero--no-intro .hero__tagline, .hero--no-intro .hero__btns .pxb { animation: none; } .hero--no-intro .hero__logo { animation: logo-float 9s ease-in-out infinite alternate; } .hero__cue { position: absolute; bottom: 64px; left: 50%; width: 40px; height: 40px; margin-left: -20px; display: grid; place-items: center; color: var(--tx-0); opacity: .75; animation: cue 2.4s ease-in-out infinite; } .hero__cue .ico { width: 20px; height: 20px; filter: drop-shadow(0 2px 6px #000); } .hero__cue:hover { opacity: 1; color: var(--lamp-hi); } @keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } .hero__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: var(--bg-1); -webkit-mask: var(--dither) 0 0 / 40px 40px repeat-x; mask: var(--dither) 0 0 / 40px 40px repeat-x; } @media (max-width: 700px) { .hero { padding-bottom: 100px; } .hero__cue { bottom: 48px; } .hero__shafts i:nth-child(3) { display: none; } } .hero__note { position: absolute; z-index: 2; left: var(--gutter); bottom: 22px; max-width: min(520px, 60%); margin: 0; font: 500 10.5px/1.5 var(--f-pixel); letter-spacing: .06em; color: var(--tx-2); opacity: .75; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); } .hero__note a { color: inherit; } @media (max-width: 700px) { .hero__note { left: 0; right: 0; max-width: none; padding-inline: var(--gutter); bottom: 14px; text-align: center; font-size: 9.5px; } } .bimg { margin: 0; display: grid; gap: 12px; } .bimg .frame .zoom, .bimg .frame img { display: block; width: 100%; } .bimg figcaption { font-size: 14.5px; color: var(--tx-2); text-align: center; } .blk-page-header { margin-top: calc(var(--tb-h) * -1); } .phd { --g: var(--lamp-rgb); position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--tb-h) + clamp(56px, 9vw, 120px)) 0 clamp(64px, 9vw, 120px); } .phd--compact { padding-top: calc(var(--tb-h) + 48px); padding-bottom: 56px; } .phd--tall { min-height: 88svh; display: grid; align-items: center; } .glow-none { --g: 0, 0, 0; } .phd__bg { position: absolute; inset: 0; z-index: -2; } .phd__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: phd-in 1.6s var(--ease-out) backwards; } @keyframes phd-in { from { transform: scale(1.12); opacity: 0; } } .phd__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 80% at 85% 40%, rgba(var(--g), .09), transparent 70%), linear-gradient(180deg, rgba(12, 11, 10, .7) 0%, transparent 30%), linear-gradient(0deg, var(--bg-1) 0%, rgba(20, 19, 18, 0) 45%), rgba(14, 13, 12, var(--dim)); } .phd__in { max-width: calc(var(--w-normal) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; } .phd.has-img .phd__in { grid-template-columns: minmax(min(600px, 50%), 1fr) minmax(0, var(--img-w, 52%)); } .phd.img-wide .phd__in { max-width: none; padding-left: max(var(--gutter), calc((100% - var(--w-normal)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--w-wide)) / 2)); } .phd.has-img .phd__lead { max-width: none; } .phd__media img, .phd__media .frame { max-width: min(100%, var(--img-max, 100%)); margin-inline: auto; } .phd__text { display: grid; gap: 20px; justify-items: start; } .phd__text > :not(.btn-row), .phd__text .btn-row .pxb { animation: phd-text .9s .1s var(--ease-out) backwards; } @keyframes phd-text { from { opacity: 0; transform: translateY(16px); } } .phd--center .phd__text { justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; } .phd h1 { text-shadow: 0 4px 24px rgba(0, 0, 0, .6); } .phd__title-img { width: 100%; } .phd__title-img img { width: min(560px, 100%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); } .phd--center .phd__title-img img { margin-inline: auto; } .phd__lead { max-width: 620px; color: var(--tx-0); opacity: .9; } .phd__lead p + p { margin-top: .7em; } .phd__btns { margin-top: 6px; } .phd__media { position: relative; animation: phd-media 1.2s .2s var(--ease-out) backwards; } @keyframes phd-media { from { opacity: 0; transform: translateY(24px) scale(.98); } } .phd__media::before { content: ""; position: absolute; inset: -18%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--g), .2), transparent); filter: blur(10px); } .phd__media--framed .frame { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transition: transform .8s var(--ease-out); } .phd__media--framed:hover .frame { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); } .phd__media--floating img { filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .6)); animation: logo-float 8s ease-in-out infinite alternate; } .phd__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: var(--bg-1); -webkit-mask: var(--dither) 0 0 / 32px 32px repeat-x; mask: var(--dither) 0 0 / 32px 32px repeat-x; } @media (max-width: 900px) { .phd.has-img .phd__in { grid-template-columns: 1fr; } .phd.img-wide .phd__in { padding-inline: var(--gutter); } .phd__media--framed .frame { transform: none; } } .prf { --g: var(--diamond-rgb); position: relative; display: grid; gap: 40px; align-items: end; padding-bottom: 0; } .prf.has-logo { grid-template-columns: minmax(0, 1fr) var(--logo); } .prf.glow-none { --g: 0, 0, 0; } .prf__main { display: grid; gap: 22px; justify-items: start; padding-bottom: clamp(48px, 7vw, 96px); } .prf__id { display: flex; align-items: center; gap: 20px; } .prf__avatar img { width: 88px; height: 88px; object-fit: cover; border: var(--px) solid var(--outline); box-shadow: 0 0 0 2px var(--bg-4); } .prf__name { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-top: 10px; } .prf__role { font-size: 1.08rem; color: var(--tx-1); margin-top: 6px; } .prf__body { font-size: 17px; } .prf__sig { font: italic 300 1.6rem/1 var(--f-body); color: var(--tx-2); letter-spacing: .02em; } .prf__logo { position: relative; align-self: end; width: var(--logo); } .prf__logo img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 0 30px rgba(var(--g), .25)); transform-origin: 50% 100%; transition: transform .6s var(--ease-out); } .prf__logo:hover .prf__img { transform: translateY(-6px) rotate(-2deg); } .prf__lightcone { position: absolute; left: 50%; bottom: 55%; width: 170%; height: 150%; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(var(--g), .32), rgba(var(--g), .08) 50%, transparent 72%); mix-blend-mode: screen; animation: cone 5.5s ease-in-out infinite; } @keyframes cone { 0%, 100% { opacity: .85; } 40% { opacity: 1; } 43% { opacity: .7; } 47% { opacity: 1; } } .prf__floor { position: absolute; left: 4%; right: 4%; bottom: -10px; height: 34px; z-index: 0; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); } .prf--stand .prf__img { display: block; } .prf--stand .prf__logo:hover .prf__img { transform: none; } .prf--stand .prf__logo:hover .prf__lightcone { opacity: 1; filter: brightness(1.25); } .prf--stand .prf__floor { left: 8%; right: 8%; bottom: -7px; height: 14px; z-index: 2; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 60%, transparent); } .prf__reflect { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; pointer-events: none; transform: scaleY(-1); opacity: .14; filter: blur(1.5px) saturate(1.2); -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 30%); mask-image: linear-gradient(0deg, #000 0%, transparent 30%); } .prf__reflect img { display: block; width: 100%; height: auto; filter: none !important; } body:has(main > .blk-profile:last-child .prf--stand) .blk-footer { margin-top: 0; background: linear-gradient(180deg, #181614 0, #0f0e0d 70px, var(--bg-0) 160px); box-shadow: inset 0 1px 0 rgba(255, 236, 210, .085), inset 0 2px 0 rgba(0, 0, 0, .5); } body:has(main > .blk-profile:last-child .prf--stand) .blk-footer::before { display: none; } main > .blk-profile:last-child:has(.prf--stand) { padding-bottom: 0; } main > .blk-profile:last-child:has(.prf--stand) .blk__in { overflow: visible; } @media (max-width: 800px) { .prf.has-logo { grid-template-columns: 1fr; } .prf__main { padding-bottom: 8px; } .prf__logo { justify-self: end; width: min(var(--logo), 60vw); margin-right: -8px; } } .prf__sig { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; font: 600 clamp(14px, 1.5vw, 16px)/1.5 var(--f-pixel); letter-spacing: .04em; color: var(--lamp); text-shadow: 0 0 14px rgba(var(--lamp-rgb), .35); } .prf__sig::before { content: ""; flex: none; width: 22px; height: 3px; background: currentColor; box-shadow: 0 0 8px rgba(var(--lamp-rgb), .6); } .blk-slider .blk__in { max-width: none; padding-inline: 0; } .blk-slider .sld { max-width: calc(var(--w-wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .sld__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(20px, 3vw, 32px); } .sld__head .sec-head { margin-bottom: 0; } .sld__ctrl { display: flex; align-items: center; gap: 10px; } .sld__count { font: 600 13px var(--f-pixel); color: var(--tx-3); letter-spacing: .08em; margin-right: 8px; } .sld__count b { color: var(--tx-0); font-weight: 600; } .sld__track { --slide: min(68vw, 1080px); display: flex; gap: clamp(10px, 1.4vw, 18px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px max(var(--gutter), calc((100vw - var(--w-wide)) / 2)) 22px; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--w-wide)) / 2)); cursor: grab; } .sld__track::-webkit-scrollbar { display: none; } .sld__track.is-dragging { cursor: grabbing; scroll-snap-type: none; } .sld__track.is-dragging .zoom { pointer-events: none; } .sld__track.sld--medium { --slide: min(46vw, 760px); } .sld__track.sld--small { --slide: min(30vw, 480px); } .sld__slide { position: relative; flex: 0 0 var(--slide); scroll-snap-align: start; margin: 0; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-0); border: var(--px) solid var(--outline); box-shadow: 0 0 0 1px rgba(255, 238, 214, .04), 0 22px 44px -22px #000; transition: opacity .5s, filter .5s, transform .6s var(--ease-out); } .sld__slide .zoom, .sld__slide img { display: block; width: 100%; height: 100%; } .sld__slide img { object-fit: cover; transition: transform 1.2s var(--ease-out); -webkit-user-drag: none; } .sld__slide:hover img { transform: scale(1.035); } .sld__slide.is-dim { opacity: .5; filter: saturate(.6) brightness(.8); } .sld__slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; pointer-events: none; font-size: 14px; color: var(--tx-0); background: linear-gradient(0deg, rgba(10, 9, 8, .85), transparent); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease-out); } .sld__slide:hover figcaption { opacity: 1; transform: none; } .sld__bar { max-width: var(--w-wide); margin: 0 auto; height: 3px; background: rgba(255, 255, 255, .06); margin-inline: max(var(--gutter), calc((100vw - var(--w-wide)) / 2)); } .sld__bar i { display: block; height: 100%; width: 10%; transform-origin: left; transition: width .25s, margin-left .25s; background: linear-gradient(90deg, rgba(var(--lamp-rgb), .5), var(--lamp) 3px, var(--lamp) calc(100% - 3px), rgba(var(--lamp-rgb), .5)); filter: drop-shadow(0 0 1px rgba(var(--lamp-rgb), .85)) drop-shadow(0 0 4px rgba(var(--lamp-rgb), .45)) drop-shadow(0 0 11px rgba(var(--lamp-rgb), .24)) drop-shadow(0 0 26px rgba(var(--lamp-rgb), .1)); } @media (max-width: 700px) { .sld__track, .sld__track.sld--medium { --slide: 86vw; } .sld__track.sld--small { --slide: 62vw; } .sld__slide figcaption { opacity: 1; transform: none; font-size: 13px; } .sld__slide.is-dim { opacity: .7; } } .specs { display: grid; gap: clamp(14px, 2vw, 22px); margin-inline: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); max-width: calc(var(--n, 2) * 460px); } .spec { --a: var(--lamp-rgb); position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(22px, 2.6vw, 32px); background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 18px 40px -24px #000; } .spec::before { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 3px; pointer-events: none; background: linear-gradient(90deg, rgba(var(--a), .5), rgb(var(--a)) 3px, rgb(var(--a)) calc(100% - 3px), rgba(var(--a), .5)); opacity: .35; transition: opacity .4s; } .spec.is-featured { background: color-mix(in srgb, var(--bg-2), rgb(var(--a)) 3%); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo), 0 0 0 1px rgba(var(--a), .3), 0 26px 70px -26px rgba(var(--a), .4), 0 18px 40px -24px #000; } .spec.is-featured::before, .spec:hover::before { opacity: 1; filter: drop-shadow(0 0 1px rgba(var(--a), .85)) drop-shadow(0 0 5px rgba(var(--a), .45)) drop-shadow(0 0 14px rgba(var(--a), .24)); } .spec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .spec__badge { --c: rgb(var(--a)); } .spec__gpu { display: flex; align-items: center; gap: 16px; } .spec__slot { display: grid; place-items: center; flex: none; width: 56px; height: 56px; color: rgb(var(--a)); background: radial-gradient(closest-side, rgba(var(--a), .14), transparent), var(--bg-0); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .55), inset -2px -2px 0 rgba(255, 238, 214, .06); border: 2px solid var(--outline); } .spec__slot .ico { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(var(--a), .75)); } .spec__gpu small { display: block; margin-bottom: 6px; font: 600 10.5px/1 var(--f-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); } .spec__gpu strong { display: block; font: 600 clamp(1.2rem, 2vw, 1.55rem)/1.15 var(--f-pixel); color: var(--tx-0); text-shadow: 0 0 26px rgba(var(--a), .28); } .spec__rows { margin: 0; display: grid; } .spec__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 2px solid rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 238, 214, .035); } .spec__row:last-child { padding-bottom: 0; } .spec__row dt { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--tx-2); } .spec__row dt .ico { width: 12px; height: 12px; flex: none; color: rgb(var(--a)); opacity: .85; } .spec__row dd { margin: 0; text-align: right; font-weight: 500; color: var(--tx-0); } .spec__meter { display: grid; gap: 10px; } .spec__mhead { display: flex; justify-content: space-between; align-items: baseline; font: 600 10.5px/1 var(--f-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); } .spec__mhead b { font-size: 15px; letter-spacing: 0; color: rgb(var(--a)); text-shadow: 0 0 10px rgba(var(--a), .6); } .spec__cells { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; } .spec__cells i { height: 18px; background: #24201d; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .45), inset -2px -2px 0 rgba(255, 238, 214, .04); } .spec__cells i.on { background: rgb(var(--a)); box-shadow: inset 2px 2px 0 color-mix(in srgb, rgb(var(--a)), #fff 50%), inset -2px -2px 0 color-mix(in srgb, rgb(var(--a)), #000 30%), 0 0 10px rgba(var(--a), calc(.55 * var(--glow-k, 1))), 0 0 26px rgba(var(--a), calc(.18 * var(--glow-k, 1))); } .js [data-reveal]:not(.is-in) .spec__cells i.on { background: #24201d; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .45), inset -2px -2px 0 rgba(255, 238, 214, .04); } .js [data-reveal].is-in .spec__cells i.on { transition: background .18s, box-shadow .35s; transition-delay: calc(.6s + var(--i, 0) * .25s + var(--c) * var(--cell-s, .06s)); } .spec__note { margin-top: auto; font-size: 14.5px; color: var(--tx-2); } .specs__note { margin: clamp(22px, 3vw, 34px) auto 0; text-align: center; font-size: 15px; color: var(--tx-2); } .spot { --a: var(--lamp-rgb); --side: 90deg; --glow-x: 18%; position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(520px, 82vh, 880px); padding: clamp(80px, 9vw, 128px) 0; } .spot--compact { min-height: clamp(440px, 64vh, 660px); } .spot--tall { min-height: 100svh; } .spot--right { --side: 270deg; --glow-x: 82%; } .spot__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--bg-0); } .spot__bg img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--py, 0%), 0) scale(calc(1.02 + var(--dk, 1) * .13)); } .spot__shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse 42% 70% at var(--glow-x) 52%, rgba(var(--a), calc(.15 * var(--glow-k, 1))), transparent 72%), linear-gradient(var(--side), rgba(14, 13, 12, var(--dim)) 0%, rgba(14, 13, 12, calc(var(--dim) * .55)) 38%, rgba(14, 13, 12, 0) 72%), linear-gradient(180deg, rgba(20, 19, 18, .85) 0%, rgba(20, 19, 18, 0) 18%, rgba(20, 19, 18, 0) 80%, rgba(20, 19, 18, .9) 100%); } .spot::before, .spot::after { content: ""; position: absolute; left: 0; right: 0; height: 32px; z-index: -1; pointer-events: none; background: var(--bg-1); -webkit-mask: var(--dither) 0 0 / 32px 32px repeat-x; mask: var(--dither) 0 0 / 32px 32px repeat-x; } .spot::before { top: 0; transform: scaleY(-1); } .spot::after { bottom: 0; } .spot__in { width: 100%; max-width: calc(var(--w-normal) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: flex-start; } .spot--right .spot__in { justify-content: flex-end; } .spot__panel { position: relative; width: min(100%, var(--panel-w, 520px)); display: grid; gap: 18px; justify-items: start; padding: clamp(24px, 3vw, 40px); background: url("/assets/tex/noise.png") 0 0 / 128px repeat, rgba(22, 21, 20, .58); -webkit-backdrop-filter: blur(var(--blur, 16px)) saturate(1.3); backdrop-filter: blur(var(--blur, 16px)) saturate(1.3); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 rgba(255, 238, 214, .1), inset -2px -2px 0 rgba(0, 0, 0, .35), 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 70px -12px rgba(var(--a), calc(.2 * var(--glow-k, 1))); } .spot__panel::before { content: ""; position: absolute; top: -3px; bottom: -3px; right: -3px; width: 4px; pointer-events: none; background: linear-gradient(180deg, rgba(var(--a), .5), rgb(var(--a)) 3px, rgb(var(--a)) calc(100% - 3px), rgba(var(--a), .5)); filter: drop-shadow(0 0 1px rgba(var(--a), calc(.85 * var(--glow-k, 1)))) drop-shadow(0 0 4px rgba(var(--a), calc(.45 * var(--glow-k, 1)))) drop-shadow(0 0 11px rgba(var(--a), calc(.24 * var(--glow-k, 1)))) drop-shadow(0 0 26px rgba(var(--a), calc(.1 * var(--glow-k, 1)))); transform-origin: top; transition: transform 1s .35s var(--ease-out); } .spot--right .spot__panel::before { right: auto; left: -3px; } .spot__panel h2 { text-shadow: 0 4px 24px rgba(0, 0, 0, .5); } .spot__text { color: var(--tx-0); opacity: .9; font-size: 16.5px; } .spot__chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .spot__chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 7px; font: 600 12px/1 var(--f-pixel); letter-spacing: .05em; color: var(--tx-0); background: rgba(0, 0, 0, .32); border: 2px solid rgba(var(--a), .3); box-shadow: inset 0 0 14px rgba(var(--a), .08); } .spot__chip .ico { width: 12px; height: 12px; flex: none; color: rgb(var(--a)); filter: drop-shadow(0 0 5px rgba(var(--a), .8)); } .spot__btns { margin-top: 6px; } .spot__zoom { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(48px, 5vw, 64px); } .spot--right .spot__zoom { right: auto; left: var(--gutter); } .spot__zoom .ico { --ico-w: 18px; --ico-h: 18px; } .js .spot__in[data-reveal]:not(.is-in) .spot__panel { opacity: 0; transform: translateY(26px); } .js .spot__in[data-reveal]:not(.is-in) .spot__panel::before { transform: scaleY(0); } .js .spot__in.is-in .spot__panel { transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); } .js:not(.is-ready) .spot__in .spot__panel, .js:not(.is-ready) .spot__in .spot__panel::before { animation: failsafe .01s 2.5s forwards; } @media (max-width: 900px) { .spot, .spot--right { --side: 0deg; --glow-x: 50%; align-items: end; min-height: 0; padding: clamp(220px, 64vw, 440px) 0 48px; } .spot--compact { padding-top: clamp(180px, 52vw, 360px); } .spot__panel { width: 100%; } .spot__panel::before, .spot--right .spot__panel::before { top: -3px; bottom: auto; left: -3px; right: -3px; width: auto; height: 4px; background: linear-gradient(90deg, rgba(var(--a), .5), rgb(var(--a)) 3px, rgb(var(--a)) calc(100% - 3px), rgba(var(--a), .5)); transform-origin: left; } .js .spot__in[data-reveal]:not(.is-in) .spot__panel::before { transform: scaleX(0); } .spot__zoom, .spot--right .spot__zoom { top: 44px; bottom: auto; right: var(--gutter); left: auto; } } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2px; background: var(--outline); border: var(--px) solid var(--outline); } .stat { --a: var(--lamp-rgb); display: grid; gap: 10px; align-content: center; justify-items: center; text-align: center; padding: clamp(24px, 3.4vw, 40px) 16px; background: var(--bg-2); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); } .stat__v { font: 700 clamp(2rem, 4.2vw, 3.2rem)/1 var(--f-pixel); color: rgb(var(--a)); text-shadow: 0 0 18px rgba(var(--a), .45), 0 0 50px rgba(var(--a), .2); font-variant-numeric: tabular-nums; } .stat__x { font-size: .55em; margin: 0 .08em; vertical-align: .35em; opacity: .85; } .stat__l { font-size: 14.5px; color: var(--tx-1); max-width: 22ch; } .steps-wrap { position: relative; } .steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .steps--fixed { grid-template-columns: repeat(var(--per-row), minmax(0, 1fr)); } @media (max-width: 900px) { .steps--fixed { grid-template-columns: repeat(min(var(--per-row), 2), minmax(0, 1fr)); } } @media (max-width: 560px) { .steps--fixed { grid-template-columns: 1fr; } } .steps--fill { display: flex; flex-wrap: wrap; } .steps--fill > .step { flex: 1 1 220px; min-width: min(100%, 220px); } .steps--fill.steps--fixed > .step { flex-basis: calc((100% - (var(--per-row) - 1) * 14px) / var(--per-row)); min-width: 0; } @media (max-width: 900px) { .steps--fill.steps--fixed > .step { flex-basis: calc((100% - 14px) / 2); } } @media (max-width: 560px) { .steps--fill > .step, .steps--fill.steps--fixed > .step { flex-basis: 100%; } } .step { position: relative; display: grid; gap: 14px; align-content: start; padding: 22px 20px 24px; background: var(--bg-2); border: var(--px) solid var(--outline); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); } .step__n { display: grid; place-items: center; width: 40px; height: 40px; font: 700 18px var(--f-pixel); color: #2a1a05; background: var(--lamp); border: var(--px) solid var(--outline); box-shadow: inset 3px 3px 0 #fff3c4, inset -3px -3px 0 #b8741f, 0 0 20px rgba(var(--lamp-rgb), .35); } .step__top { display: flex; align-items: center; gap: 12px; } .step--opt .step__n { position: relative; isolation: isolate; color: rgba(42, 26, 5, .8); background: color-mix(in srgb, var(--lamp) 46%, var(--bg-3)); box-shadow: inset 3px 3px 0 color-mix(in srgb, var(--lamp) 58%, var(--bg-3)), inset -3px -3px 0 color-mix(in srgb, #b8741f 45%, var(--bg-0)), 0 0 14px rgba(var(--lamp-rgb), .1); } .step--opt .step__n::before { content: ""; position: absolute; inset: calc(var(--px) * -1); z-index: -1; pointer-events: none; opacity: 0; background: var(--lamp); border: var(--px) solid var(--outline); box-shadow: inset 3px 3px 0 #fff3c4, inset -3px -3px 0 #b8741f, 0 0 20px rgba(var(--lamp-rgb), .35), 0 0 34px 4px rgba(var(--lamp-rgb), .18); } .step__tag { padding: 4px 8px 3px; font: 600 10.5px/1 var(--f-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); background: rgba(0, 0, 0, .25); border: 2px solid var(--bg-4); } .step__body { display: grid; gap: 10px; } .step h3 { font-size: 1.05rem; } .step .prose { font-size: 15px; } .steps__btns { margin-top: 28px; } .steps__wire { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; filter: brightness(var(--wire-bright)) drop-shadow(0 0 calc(var(--wire-glow) * 7px) color-mix(in srgb, var(--wire) calc(var(--wire-glow) * 90%), transparent)); } .steps__wire.is-on { opacity: 1; } .steps__wire path { fill: none; stroke-linecap: square; stroke-linejoin: miter; } .steps__wire .w { stroke: var(--wire); stroke-width: var(--wire-w); stroke-dasharray: calc(var(--len, 2000) * 1px) calc(var(--len, 2000) * 1px + 8px); stroke-dashoffset: calc(var(--len, 2000) * 1px); } .steps__wire.is-laid .w { stroke-dashoffset: 0; transition: stroke-dashoffset var(--lay-s, 2.5s) cubic-bezier(.3, .1, .6, .95); } .steps__wire .pulse { opacity: 0; transition: opacity .4s; } .steps__wire.is-live .pulse { opacity: 1; } .steps__wire:not(.is-live) .p { animation-play-state: paused; } .steps__wire .p { stroke: var(--wire); stroke-width: var(--wire-w); stroke-linecap: butt; stroke-dasharray: calc(var(--l) * 1px) calc((var(--len, 2000) + 56) * 1px); animation: steps-pulse var(--pulse-s) linear infinite; } .steps__wire .p:nth-child(1) { opacity: .35; } .steps__wire .p:nth-child(2) { opacity: .6; } .steps__wire .p:nth-child(3) { stroke: color-mix(in srgb, var(--wire), #fff 18%); } @keyframes steps-pulse { from { stroke-dashoffset: calc((var(--l) + (56 - var(--l)) / 2) * 1px); } to { stroke-dashoffset: calc((var(--l) + (56 - var(--l)) / 2 - var(--len, 2000) - 56) * 1px); } } @media (prefers-reduced-motion: reduce) { .steps__wire .pulse { display: none; } } .sup { display: grid; gap: clamp(28px, 4vw, 44px); justify-items: center; text-align: center; } .sup__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 10px; max-width: 1040px; } .sup__tags .nametag { animation: tag-bob 5s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -0.23s); } @keyframes tag-bob { to { transform: translateY(-3px); } } .sup__past { max-width: 900px; display: grid; gap: 14px; padding: 24px clamp(16px, 3vw, 32px); background: rgba(0, 0, 0, .22); border: 2px solid var(--outline); box-shadow: inset 0 1px 0 var(--seam-hi); } .sup__past-title { font: 600 12px var(--f-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-2); } .sup__past p { font-size: 14px; line-height: 1.9; color: var(--tx-2); } .sup__past span { white-space: nowrap; transition: color .2s; } .sup__past span:hover { color: var(--tx-0); } .sup__past i { display: inline-block; width: 4px; height: 4px; margin: 0 9px 2px; background: var(--tx-3); vertical-align: middle; } .txt--center { text-align: center; } .txt--center .prose { margin-inline: auto; } .txt--center .prose ul, .txt--center .prose ol { text-align: left; display: inline-block; } .txt--cols-2 .txt__body { max-width: none; } @media (min-width: 1000px) { .txt--cols-2 .txt__body { columns: 2; column-gap: 56px; } .txt--cols-2 .txt__body > * { break-inside: avoid; } } .txt--panel { padding: clamp(24px, 4vw, 48px); } .txt__btns { margin-top: 28px; } .blk-titlebar, .blk-titlebar * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .blk-titlebar { position: relative; height: var(--tb-h); --tb-tint: rgba(24, 23, 22, .6); } .blk-titlebar.is-scrolled { --tb-tint: rgba(20, 19, 18, .72); } .tb__bar { position: fixed; inset: 0 0 auto; z-index: 100; padding-bottom: 6px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .68); view-transition-name: titlebar; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); } .tb__glass { position: absolute; inset: 0; overflow: hidden; background: url("/assets/tex/noise.png") 0 0 / 128px repeat, var(--tb-tint); box-shadow: inset 0 1px 0 rgba(255, 238, 214, .045); transition: background-color .4s; } .tb__glass::before { content: ""; position: absolute; inset: 0; opacity: .25; background: url("/assets/tex/grain.png") 0 0 / 96px repeat; image-rendering: pixelated; } .tb__bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none; background: rgba(0, 0, 0, .2); } .tb__glass::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 340px calc(var(--tb-h) * 1.1) at 50% calc(var(--tb-h) / 2), rgba(var(--lamp-rgb), calc(var(--lamp-k) * .2)), transparent 70%); } .tb__nav { position: relative; height: var(--tb-h); max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr clamp(124px, 12vw, 180px) 1fr; align-items: center; } .tb__side { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(4px, 1.2vw, 18px); } .tb__side--l { justify-content: flex-end; } .tb__side--r { justify-content: flex-start; } .tb__link { --near: 0; position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; white-space: nowrap; font: 600 13.5px/1 var(--f-pixel); letter-spacing: .02em; text-decoration: none; color: color-mix(in srgb, var(--tx-1), var(--lamp-hi) calc(var(--lamp-k) * var(--near) * 45%)); text-shadow: 0 0 calc(4px + var(--lamp-k) * 16px) rgba(var(--lamp-rgb), calc(var(--lamp-k) * var(--near) * .75)); transition: color .2s; } .tb__link .ico { width: 15px; height: 15px; position: relative; top: -1px; opacity: .8; transition: opacity .2s, filter .2s; } .tb__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; background: linear-gradient(90deg, rgba(var(--lamp-rgb), .5), var(--lamp) 3px, var(--lamp) calc(100% - 3px), rgba(var(--lamp-rgb), .5)); transform: scaleX(0); transform-origin: 50% 50%; filter: drop-shadow(0 0 1px rgba(var(--lamp-rgb), .85)) drop-shadow(0 0 4px rgba(var(--lamp-rgb), .45)) drop-shadow(0 0 11px rgba(var(--lamp-rgb), .24)) drop-shadow(0 0 26px rgba(var(--lamp-rgb), .1)); transition: transform .28s var(--ease-out); } .tb__link:hover { color: var(--lamp-hi); } .tb__link:hover .ico { opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--lamp-rgb), .8)); } .tb__link:hover::after { transform: scaleX(.5); } .tb__link.is-here { color: var(--tx-0); } .tb__link.is-here .ico { opacity: 1; color: var(--lamp); filter: drop-shadow(0 0 6px rgba(var(--lamp-rgb), .7)); } .tb__link.is-here::after { transform: scaleX(1); } .tb__halo { --halo: 420px; position: fixed; z-index: 101; pointer-events: none; left: 50%; top: calc(var(--tb-h) / 2); width: var(--halo); height: var(--halo); margin: calc(var(--halo) / -2) 0 0 calc(var(--halo) / -2); opacity: .3; mix-blend-mode: screen; view-transition-name: halo; } @supports (mix-blend-mode: plus-lighter) { .tb__halo { mix-blend-mode: plus-lighter; } } .tb__halo img { width: 100%; height: 100%; will-change: transform; } .tb__lamp { --size: 46px; position: fixed; z-index: 102; left: 50%; top: calc((var(--tb-h) - var(--size)) / 2); width: var(--size); height: var(--size); margin-left: calc(var(--size) / -2); display: block; outline-offset: 6px; -webkit-tap-highlight-color: transparent; view-transition-name: lamp; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); } .tb__lamp img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; pointer-events: none; } .lamp__super, .lamp__off { opacity: 0; } .tb__lamp.is-charging { animation: lamp-shake .09s linear infinite; } @keyframes lamp-shake { 0% { translate: 0 0; } 25% { translate: .6px -.4px; } 50% { translate: -.5px .5px; } 75% { translate: .4px .6px; } } .tb__burger, .tb__mobile-icon { display: none; } .tb__menu { display: none; } @media (max-width: 900px) { .tb__nav { grid-template-columns: 1fr auto 1fr; } .tb__side { display: none; } .tb__burger, .tb__mobile-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; background: rgba(0, 0, 0, .2); border: 2px solid rgba(0, 0, 0, .5); color: var(--tx-1); box-shadow: inset 2px 2px 0 var(--bevel-hi); } .tb__burger { justify-self: start; } .tb__mobile-icon { justify-self: end; grid-column: 3; } .tb__burger .ico, .tb__mobile-icon .ico { width: 18px; height: 18px; } .tb__burger[aria-expanded="true"] { color: var(--lamp); background: rgba(var(--lamp-rgb), .08); } .tb__lamp { --size: 40px; } .tb__menu, .tb__menu[hidden] { display: grid; grid-template-rows: 0fr; position: relative; transition: grid-template-rows .38s var(--ease-out); } .tb__menu.is-open { grid-template-rows: 1fr; } .tb__menu ul { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; gap: 2px; align-content: start; min-height: 0; max-height: calc(100svh - var(--tb-h) - 6px); overflow: auto; visibility: hidden; transition: visibility 0s .38s, padding .38s var(--ease-out); } .tb__menu.is-open ul { visibility: visible; padding-block: 4px 6px; transition: padding .38s var(--ease-out); } .tb__menu ul { overflow: hidden; } .tb__menu.is-settled ul { overflow: auto; } .tb__menu .tb__link { display: flex; padding: 16px 6px; font-size: 16px; gap: 14px; border-bottom: 1px solid rgba(0, 0, 0, .45); box-shadow: 0 1px 0 rgba(255, 236, 210, .045); } .tb__menu .tb__link .ico { width: 18px; height: 18px; } .tb__menu li:last-child .tb__link { border-bottom: 0; box-shadow: none; } .tb__menu .tb__link::after { left: auto; right: 6px; top: 50%; bottom: auto; width: 8px; height: 8px; margin-top: -4px; transform: scale(0); } .tb__menu .tb__link.is-here::after { transform: scale(1); } .tb__menu .tb__link { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .4s var(--ease-out); } .tb__menu.is-open .tb__link { opacity: 1; transform: none; } .tb__menu.is-open li:nth-child(2) .tb__link { transition-delay: .03s; } .tb__menu.is-open li:nth-child(3) .tb__link { transition-delay: .06s; } .tb__menu.is-open li:nth-child(4) .tb__link { transition-delay: .09s; } .tb__menu.is-open li:nth-child(5) .tb__link { transition-delay: .12s; } .tb__menu.is-open li:nth-child(n+6) .tb__link { transition-delay: .15s; } } @media (min-width: 901px) and (max-width: 1100px) { .tb__link .ico { display: none; } .tb__link { padding-inline: 9px; font-size: 12.5px; } } .vs { --a: var(--rtx-rgb); --glow-k: 1; } .vs__legend { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 16px; font: 600 12px/1 var(--f-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-2); } .vs__key { display: inline-flex; align-items: center; gap: 10px; } .vs__key i { width: 14px; height: 14px; border: 2px solid var(--outline); background: #5a544d; box-shadow: inset 2px 2px 0 #8c857c; } .vs__key--b { color: var(--tx-0); } .vs__key--b i { background: rgb(var(--a)); box-shadow: inset 2px 2px 0 color-mix(in srgb, rgb(var(--a)), #fff 45%), 0 0 10px rgba(var(--a), .6); } .vs__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; background: var(--outline); border: var(--px) solid var(--outline); } .vs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) 116px; align-items: center; gap: clamp(16px, 2.6vw, 34px); padding: clamp(16px, 2vw, 22px) clamp(16px, 2.4vw, 28px); background: var(--bg-2); box-shadow: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo); transition: background .4s; } .vs__row:hover { background: color-mix(in srgb, var(--bg-2), rgb(var(--a)) 4%); } .vs__what h3 { font-size: 1.02rem; } .vs__what p { margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--tx-2); } .vs__bars { display: grid; gap: 8px; } .vs__bar { position: relative; height: 26px; background: var(--bg-0); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .5), inset -2px -2px 0 rgba(255, 238, 214, .04); } .vs__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); transform-origin: left; background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(0, 0, 0, .16) 10px 12px); } .vs__bar--a .vs__fill { background-color: #5a544d; box-shadow: inset 0 2px 0 #8c857c, inset 0 -2px 0 #36322e; } .vs__bar--b .vs__fill { background-color: rgb(var(--a)); box-shadow: inset 0 2px 0 color-mix(in srgb, rgb(var(--a)), #fff 45%), inset 0 -2px 0 color-mix(in srgb, rgb(var(--a)), #000 35%), 0 0 14px rgba(var(--a), calc(.5 * var(--glow-k))), 0 0 44px rgba(var(--a), calc(.22 * var(--glow-k))); } .vs__val { position: absolute; top: 50%; left: calc(var(--w) + 10px); transform: translateY(-50%); font: 600 13px/1 var(--f-pixel); color: var(--tx-1); white-space: nowrap; } .vs__val small { font-size: 11px; opacity: .75; } .vs__bar--in .vs__val { left: auto; right: calc(100% - var(--w) + 10px); color: var(--tx-0); text-shadow: 0 1px 0 rgba(0, 0, 0, .4); } .vs__bar--b.vs__bar--in .vs__val { color: color-mix(in srgb, rgb(var(--a)), #000 82%); text-shadow: 0 1px 0 rgba(255, 255, 255, .3); } .vs__bar--a:not(.vs__bar--in) .vs__val { color: var(--tx-2); } .vs__x { justify-self: end; font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-pixel); color: rgb(var(--a)); white-space: nowrap; text-shadow: 0 0 18px rgba(var(--a), calc(.45 * var(--glow-k))), 0 0 50px rgba(var(--a), calc(.2 * var(--glow-k))); } .vs__x small { font-size: .55em; margin-left: .06em; } .vs__new { font-size: .5em; letter-spacing: .12em; text-transform: uppercase; } .vs__note { margin-top: 18px; font-size: 14px; color: var(--tx-2); max-width: none; } .js [data-reveal] .vs__fill { transform: scaleX(0); } .js [data-reveal] .vs__val { opacity: 0; } .js [data-reveal].is-in .vs__fill { transform: none; transition: transform var(--fill-s, 1.4s) var(--ease-out) calc(.25s + var(--i) * 90ms); } .js [data-reveal].is-in .vs__bar--b .vs__fill { transition-delay: calc(.5s + var(--i) * 90ms); } .js [data-reveal].is-in .vs__val { opacity: 1; transition: opacity .5s calc(.5s + var(--fill-s, 1.4s) * .6 + var(--i) * 90ms); } @media (max-width: 700px) { .vs__row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; } .vs__bars { grid-column: 1 / -1; grid-row: 2; } .vs__x { font-size: 1.7rem; } } .vid { aspect-ratio: 16/9; display: grid; place-items: center; cursor: pointer; } .vid > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .4s, transform 1s var(--ease-out); } .vid:hover > img { filter: brightness(1.08); transform: scale(1.02); } .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vid__play { position: relative; width: 88px; height: 64px; display: grid; place-items: center; color: #fff; background: #c2443c; border: var(--px) solid var(--outline); box-shadow: inset 3px 3px 0 #ff8b7f, inset -3px -3px 0 #82241f, 0 0 40px rgba(255, 90, 70, .45); transition: transform .2s, filter .2s; } .vid__play .ico { width: 24px; height: 24px; margin-left: 4px; } .vid:hover .vid__play { transform: scale(1.08); filter: brightness(1.12); }