:root {
  --ink: #171816; --deep: #10110f; --panel: #242622; --paper: #eeede6; --white: #f6f4ec;
  --orange: #d5ff53; --orange-hover: #e5ffa0; --muted: #a3a69a; --paper-muted: #64665d;
  --line: #3d4037; --paper-line: #cfcec4; --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Space Grotesk', 'Helvetica Neue', sans-serif; --mono: 'IBM Plex Mono', monospace;
  --gutter: clamp(22px, 5.2vw, 96px); --green: #b7cb94;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--ink); color: var(--white); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
button, input, select { border-radius: 0; }
img { max-width: 100%; display: block; }
svg { display: block; }
p, h1, h2, h3 { margin: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
::selection { background: var(--orange); color: var(--deep); }
.shell { padding-inline: var(--gutter); }
.paper { background: var(--paper); color: var(--ink); }
.eyebrow { font: 500 10px/1.6 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 12px; color: var(--ink); background: var(--white); }
.muted { color: var(--muted); }
.paper .muted { color: var(--paper-muted); }
.announcement { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 34px; padding: 7px 16px; font: 9px/1.5 var(--mono); letter-spacing: .035em; background: var(--orange); color: var(--ink); }
.announcement a { margin-left: 20px; text-decoration: underline; text-underline-offset: 3px; }
.announcement-dot { width: 5px; height: 5px; background: var(--ink); border-radius: 50%; }
.site-header { min-height: 91px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 25px; font-weight: 700; letter-spacing: -1.3px; white-space: nowrap; }
.brand svg { width: 32px; height: 32px; }
.site-header nav { display: flex; gap: clamp(20px,2.7vw,44px); font-size: 12px; }
.site-header nav a { transition: color .2s; }
.site-header nav a:hover { color: var(--orange); }
.header-actions { display: flex; align-items: center; gap: 28px; font-size: 12px; }
.lab-link { color: var(--muted); }
.lab-link span { margin-left: 7px; }
.bag-button { padding: 0; display: flex; align-items: center; gap: 10px; background: none; border: 0; }
.bag-button span { display: grid; place-items: center; min-width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; font: 10px var(--mono); }
.hero { display: grid; grid-template-columns: 43% 57%; position: relative; padding-top: 72px; overflow: hidden; }
.hero-copy { position: relative; z-index: 3; padding-bottom: 73px; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.asterisk { font: 23px var(--body); color: var(--orange); }
h1 { font: 400 clamp(76px,8.35vw,152px)/.99 var(--display); letter-spacing: -.025em; margin: 23px 0 27px; }
h1 span { color: var(--orange); }
.hero-description { font-size: clamp(16px,1.6vw,25px); line-height: 1.4; letter-spacing: -.025em; }
.hero-small { color: var(--muted); font-size: 13px; margin-top: 14px; line-height: 1.6; }
.hero-actions { display: flex; gap: 29px; align-items: center; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 48px; padding: 15px 21px; border: 1px solid transparent; font-size: 12px; font-weight: 600; transition: background .2s, color .2s, transform .2s; }
.button span { font-size: 20px; line-height: 1; }
.button-orange { background: var(--orange); color: var(--deep); }
.button-orange:hover { background: var(--orange-hover); }
.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover { background: var(--panel); }
.button-outline { border-color: var(--line); background: transparent; }
.button-outline:hover { background: var(--panel); }
.hero-secondary { display: flex; gap: 15px; align-items: center; font-size: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.hero-scene { position: relative; min-width: 0; isolation: isolate; margin-left: -20px; margin-right: -50px; perspective: 1400px; }
.hero-relic { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .92; pointer-events: none; mix-blend-mode: screen; }
.hero-scene.no-webgl { background: radial-gradient(ellipse at 56% 43%, #a1da4528, transparent 24%),radial-gradient(ellipse at 65% 50%, #704bd42e, transparent 42%); }
.scene-grid { position: absolute; z-index: -1; inset: -15px -15px 68px -22px; background-image: linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 68px 68px; opacity: .28; mask-image: radial-gradient(ellipse, var(--deep) 20%, transparent 70%); }
.hero-plugin { position: absolute; width: 84%; border-radius: 7px; box-shadow: 0 27px 48px #0008, 0 1px 2px #0006; transform-origin: center; transition: translate .32s cubic-bezier(.2,.7,.2,1); will-change: translate; }
.hero-plugin-back { z-index: 1; width: 74%; top: 22px; right: 2%; transform: perspective(1300px) rotateY(-13deg) rotateX(12deg) rotateZ(8deg); opacity: .88; }
.hero-plugin-mid { z-index: 2; width: 81%; top: 182px; right: 11%; transform: perspective(1300px) rotateY(-12deg) rotateX(11deg) rotateZ(-8deg); }
.hero-plugin-front { z-index: 3; top: 309px; right: 0; transform: perspective(1300px) rotateY(-12deg) rotateX(10deg) rotateZ(5deg); }
.relic-index { position: absolute; z-index: 4; left: 5%; top: 15%; color: #d5ff53; font: 8px/1.8 var(--mono); letter-spacing: .08em; text-shadow: 0 0 18px #b5e45180; pointer-events: none; }
.scene-topline { position: absolute; top: -22px; left: 40px; font: 9px var(--mono); color: var(--muted); letter-spacing: .08em; }
.scene-topline b { margin-left: 12px; color: #bff4ec; font: inherit; font-weight: 500; }
.scene-topline b::before { display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; content: ''; }
.scene-topline b[data-signal="live"] { color: #ff8b70; }
.scene-coord { position: absolute; font: 8px var(--mono); color: var(--muted); }
.coord-a { top: 80px; left: -10px; writing-mode: vertical-rl; }
.coord-b { bottom: 105px; left: 30px; writing-mode: vertical-rl; }
.scene-caption { position: absolute; bottom: 26px; right: 5%; display: flex; align-items: center; gap: 10px; font: 9px var(--mono); }
.signal-icon { font-size: 33px; color: var(--orange); }
.scene-disclaimer { position: absolute; bottom: 12px; right: 5%; color: var(--muted); font: 7px var(--mono); letter-spacing: .035em; }
.hero-baseline { display: flex; justify-content: space-between; grid-column: 1/-1; border-top: 1px solid var(--line); padding-block: 19px; font: 8px var(--mono); letter-spacing: .06em; color: var(--muted); }
.genre-strip { display: flex; align-items: center; justify-content: space-around; gap: 25px; padding: 21px var(--gutter); background: var(--orange); color: var(--ink); font: 400 clamp(15px,1.75vw,30px) var(--display); letter-spacing: .01em; overflow: hidden; }
.genre-strip span { white-space: nowrap; }
.genre-strip i { font: normal 24px var(--body); }
.catalog-section { padding-block: 79px 35px; }
.section-kicker { display: flex; justify-content: space-between; gap: 20px; align-items: center; font: 9px var(--mono); letter-spacing: .035em; }
.catalog-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin: 29px 0 44px; }
h2 { font: 400 clamp(42px,5.5vw,86px)/1.03 var(--display); letter-spacing: -.015em; }
.catalog-heading h2 span { color: var(--paper-muted); }
.catalog-heading > p { font-size: 14px; line-height: 1.7; max-width: 350px; padding-right: 25px; padding-bottom: 8px; }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-block: 1px solid var(--paper-line); min-height: 76px; }
.filter-tabs { display: flex; align-items: center; gap: 10px; }
.filter-tabs button { color: var(--paper-muted); border: 0; padding: 11px 15px; background: transparent; font-size: 11px; white-space: nowrap; }
.filter-tabs button span { font: 8px var(--mono); margin-left: 12px; }
.filter-tabs button.active { background: var(--ink); color: var(--paper); }
.filter-tabs button:hover:not(.active) { background: var(--paper-line); color: var(--ink); }
.search-field { display: flex; align-items: center; gap: 10px; width: 235px; }
.search-field svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; }
.search-field input { width: 100%; border: 0; outline-offset: 2px; background: transparent; color: var(--ink); font-size: 11px; padding: 10px 3px; }
.search-field input::placeholder { color: var(--paper-muted); }
.catalog-status { font: 9px var(--mono); color: var(--paper-muted); min-height: 31px; padding-top: 12px; }
.product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 39px 25px; padding: 4px 0 38px; }
.product-card { min-width: 0; }
.product-card.is-tilting { transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(7px); transition: transform .16s ease-out; }
.product-card:not(.is-tilting) { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.product-art-button { position: relative; display: block; width: 100%; padding: 0; border: 0; color: var(--ink); aspect-ratio: 1.31; overflow: hidden; text-align: left; background: var(--product-color); }
.product-art-button::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent,transparent 3px,#00000006 3px,#00000006 4px); pointer-events: none; }
.product-art-button img { width: 89%; position: absolute; left: 5.5%; top: 23%; transform: perspective(900px) rotateX(11deg) rotateY(-8deg) rotateZ(-4deg); box-shadow: 0 22px 20px #0004; border-radius: 4px; transition: transform .35s; }
.product-art-button:hover img { transform: perspective(900px) rotateX(0) rotateY(0) rotateZ(0) translateY(-4px); }
.product-number { position: absolute; top: 15px; left: 17px; font: 10px var(--mono); }
.product-type { position: absolute; right: 16px; top: 15px; font: 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.product-study-label { position: absolute; bottom: 12px; left: 16px; font: 7px var(--mono); opacity: .7; letter-spacing: .04em; }
.product-explore { position: absolute; bottom: 12px; right: 14px; font-size: 25px; line-height: 1; }
.product-card-title { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 4px; gap: 12px; }
.product-card h3 { font: 400 31px var(--display); letter-spacing: -.02em; }
.product-card h3 button { border: 0; background: none; color: inherit; padding: 0; font: inherit; }
.product-price { font: 12px var(--mono); white-space: nowrap; }
.product-role { font-size: 11px; color: var(--paper-muted); margin-bottom: 13px; }
.product-description { font-size: 12px; line-height: 1.6; max-width: 340px; min-height: 39px; }
.product-card-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--paper-line); margin-top: 17px; padding-top: 12px; gap: 10px; }
.product-card-bottom > span { color: var(--paper-muted); font: 8px var(--mono); text-transform: uppercase; }
.add-button { border: 0; background: transparent; padding: 4px 0 4px 10px; color: var(--ink); font-size: 10px; }
.add-button span { margin-left: 17px; font-size: 15px; }
.add-button:hover { color: var(--orange); }
.collection-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 27px; background: var(--ink); color: var(--white); min-height: 430px; overflow: hidden; }
.collection-card > .eyebrow { color: var(--muted); }
.collection-card h3 { font: 400 clamp(37px,4vw,62px)/1.05 var(--display); position: relative; z-index: 1; }
.collection-card h3 span { color: var(--orange); }
.collection-card > p { font-size: 12px; max-width: 220px; color: var(--muted); position: relative; z-index: 1; }
.collection-card .text-link { color: var(--white); border-color: var(--line); }
.collection-card-cross { position: absolute; right: -15px; top: 60px; font: 240px/1 var(--body); color: var(--line); opacity: .7; transform: rotate(12deg); }
.catalog-footnote { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-top: 25px; border-top: 1px solid var(--paper-line); }
.catalog-footnote > span { display: flex; gap: 9px; align-items: center; font: 8px var(--mono); white-space: nowrap; }
.small-status-dot { width: 5px; height: 5px; background: var(--orange); border-radius: 50%; }
.catalog-footnote p { color: var(--paper-muted); font-size: 10px; max-width: 570px; text-align: right; }
.bundle-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 90px; }
.bundle-copy h2 { margin: 24px 0; }
.bundle-copy h2 span { color: var(--orange); }
.bundle-copy > p:not(.eyebrow) { font-size: 16px; max-width: 370px; }
.bundle-copy > p.muted { margin-top: 15px; font-size: 12px; line-height: 1.7; }
.bundle-decoration { display: flex; gap: 24px; margin-top: 24px; font-size: 48px; line-height: 1; color: var(--orange); }
.bundle-builder { align-self: center; border: 1px solid var(--line); padding: 24px; background: var(--deep); }
.builder-top { display: flex; justify-content: space-between; gap: 20px; font: 9px var(--mono); letter-spacing: .03em; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--muted); }
.bundle-option { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.bundle-option input { width: 16px; height: 16px; accent-color: var(--orange); flex-shrink: 0; }
.bundle-option .bundle-option-name { font-size: 14px; font-weight: 600; }
.bundle-option .bundle-option-name small { display: block; margin-top: 2px; font: 9px var(--mono); color: var(--muted); font-weight: 400; }
.bundle-option .bundle-option-price { font: 12px var(--mono); margin-left: auto; }
.bundle-option-icon { width: 33px; height: 33px; display: grid; place-items: center; color: var(--ink); background: var(--product-color); font: 20px var(--display); flex-shrink: 0; }
.bundle-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 25px; }
.bundle-total > div > span { display: block; font: 8px var(--mono); color: var(--muted); margin-bottom: 8px; }
.bundle-total strong { font: 400 41px/1 var(--display); }
.bundle-total strong span { font: 8px var(--mono); color: var(--muted); }
.bundle-total .button { font-size: 10px; padding-inline: 16px; gap: 18px; }
.builder-note { color: var(--muted); font-size: 9px; line-height: 1.5; margin-top: 20px; }
.studio-section { display: grid; grid-template-columns: 1fr 1fr; }
.studio-art { position: relative; overflow: hidden; isolation: isolate; perspective: 900px; background: radial-gradient(circle at 50% 50%, #eaff8b 0, #d5ff53 18%, #91b52c 72%, #718c25 100%); min-height: 570px; }
.studio-art::before { content: ''; position: absolute; z-index: -1; width: 150px; aspect-ratio: 1; left: calc(50% - 75px); top: calc(47% - 75px); border-radius: 50%; background: radial-gradient(circle at 33% 29%, #fff 0, #eaffae 5%, #b5eb49 19%, #647d21 54%, #141711 76%); box-shadow: 0 0 42px #f3ffb599, 0 0 130px #d5ff5380, inset -18px -22px 38px #1116; }
.studio-orbit { position: absolute; width: 80%; height: 35%; top: 30%; left: 10%; border: 1px solid #202516; border-radius: 50%; box-shadow: 0 0 0 8px #d5ff53,0 0 0 9px #202516,0 0 0 17px #d5ff53,0 0 0 18px #202516,0 0 0 26px #d5ff53,0 0 0 27px #202516,0 0 0 35px #d5ff53,0 0 0 36px #202516,0 0 0 44px #d5ff53,0 0 0 45px #202516; transform-style: preserve-3d; }
.orbit-one { transform: rotateX(67deg) rotateY(-24deg) rotateZ(-40deg); animation: orbit-drift 22s linear infinite; }
.orbit-two { transform: rotateX(55deg) rotateY(38deg) rotateZ(15deg); opacity: .68; animation: orbit-drift-reverse 28s linear infinite; }
.orbit-three { transform: rotateX(78deg) rotateY(-55deg) rotateZ(70deg); opacity: .54; animation: orbit-drift 34s linear infinite; }
@keyframes orbit-drift { to { transform: rotateX(67deg) rotateY(-24deg) rotateZ(320deg); } }
@keyframes orbit-drift-reverse { to { transform: rotateX(55deg) rotateY(38deg) rotateZ(-345deg); } }
.studio-art-a { position: absolute; top: 29px; left: 35px; color: var(--ink); font: 42px var(--display); }
.studio-art-label { position: absolute; bottom: 29px; left: 35px; font: 10px var(--mono); }
.studio-art-axis { position: absolute; top: 35px; right: 30px; writing-mode: vertical-rl; font: 9px var(--mono); }
.studio-copy { padding: 60px max(35px,7vw); }
.studio-copy h2 { font-size: clamp(43px,5vw,76px); margin: 27px 0; }
.studio-lead { font-size: 19px; line-height: 1.4; margin-bottom: 20px; }
.studio-copy > p:not(.eyebrow):not(.studio-lead) { font-size: 12px; color: var(--paper-muted); line-height: 1.7; margin-top: 12px; }
.text-link { display: inline-flex; gap: 28px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--paper-line); padding-block: 11px; font-size: 11px; }
.text-link span { font-size: 20px; }
.studio-copy .text-link { margin-top: 22px; }
.development-notice strong { display: block; margin-bottom: 3px; }
.download-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.download-controls label { display: flex; align-items: center; gap: 14px; font: 9px var(--mono); text-transform: uppercase; }
.download-controls select { border: 1px solid var(--paper-line); padding: 10px 25px 10px 12px; background: var(--paper); color: var(--ink); font-size: 11px; }
.text-button { border: 0; border-bottom: 1px solid var(--paper-line); padding: 9px 0; background: transparent; color: var(--ink); font-size: 10px; }
.text-button span { margin-left: 15px; }
.release-list { margin-top: 20px; border-top: 1px solid var(--paper-line); }
.loading-state, .empty-state { padding: 25px 0; font-size: 12px; color: var(--paper-muted); }
.empty-state strong { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ink); }
.release-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 20px; align-items: center; padding: 21px 0; border-bottom: 1px solid var(--paper-line); font-size: 11px; }
.release-name strong { font-size: 14px; display: block; }
.release-name small { color: var(--paper-muted); font: 8px var(--mono); }
.release-meta { color: var(--paper-muted); font: 9px/1.8 var(--mono); }
.release-status { color: var(--paper-muted); font-size: 9px; line-height: 1.6; }
.release-link { border: 1px solid var(--ink); padding: 9px 12px; font-size: 10px; display: flex; gap: 20px; align-items: center; }
.release-link:hover { background: var(--ink); color: var(--paper); }
.installation-guide { border-block: 1px solid var(--paper-line); margin-top: 25px; padding: 15px 0; }
.installation-guide summary { display: flex; justify-content: space-between; align-items: center; font-size: 12px; list-style: none; }
.installation-guide > div { max-width: 850px; font-size: 11px; color: var(--paper-muted); padding-top: 18px; }
.installation-guide code { overflow-wrap: anywhere; font: 10px var(--mono); }
.installation-guide li { margin: 6px 0; }
.support-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; padding-block: 55px 90px; }
.agent-section { position: relative; overflow: hidden; padding-block: 80px 42px; background: #111310; isolation: isolate; }
.agent-section::before { content: ''; position: absolute; z-index: -1; width: 50vw; aspect-ratio: 1; right: -7%; top: 4%; border-radius: 50%; background: radial-gradient(circle, #8ebb2730 0, #8ebb2712 34%, transparent 68%); filter: blur(10px); pointer-events: none; }
.agent-section-top, .agent-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted); font: 8px var(--mono); letter-spacing: .05em; }
.agent-layout { display: grid; grid-template-columns: 1fr .92fr; gap: clamp(44px,8vw,120px); padding-block: 48px 50px; }
.agent-copy { max-width: 560px; }
.agent-kicker { color: var(--orange); font: 400 clamp(20px,2.1vw,32px)/1.1 var(--display); }
.agent-copy h2 { margin: 24px 0; font-size: clamp(65px,8vw,118px); }
.agent-copy h2 span { color: var(--orange); }
.agent-copy > p:not(.agent-kicker) { max-width: 470px; color: #c7c9bf; font-size: 13px; line-height: 1.8; }
.agent-copy > .agent-small { margin-top: 17px; color: var(--muted); font-size: 10px; }
.agent-small code, .agent-build-command { color: var(--orange); font: 9px var(--mono); }
.agent-build-button { display: flex; align-items: center; gap: 28px; margin-top: 27px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--white); font: 9px var(--mono); }
.agent-build-button span { color: var(--orange); font-size: 18px; }
.agent-build-button:hover { color: var(--orange); }
.agent-build-command { display: block; margin-top: 12px; color: var(--muted); font-size: 8px; }
.agent-tool-stack { align-self: center; border-top: 1px solid var(--line); }
.agent-tool-stack article { position: relative; padding: 20px 75px 21px 0; border-bottom: 1px solid var(--line); }
.agent-tool-stack article > span { color: var(--muted); font: 8px var(--mono); }
.agent-tool-stack h3 { margin-top: 7px; font: 400 clamp(23px,2.5vw,35px)/1.05 var(--display); }
.agent-tool-stack article p { max-width: 380px; margin-top: 8px; color: #b5b8ac; font-size: 10px; line-height: 1.65; }
.agent-tool-stack article b { position: absolute; top: 23px; right: 0; color: var(--orange); font: 7px var(--mono); }
.agent-foot { border-top: 1px solid var(--line); padding-top: 17px; font-size: 7px; }
.agent-foot a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.agent-foot a span { color: var(--orange); font-size: 14px; vertical-align: -2px; margin-left: 6px; }
.agent-commerce-band { display: grid; grid-template-columns: .75fr 1.1fr auto; align-items: center; gap: 38px; margin-top: 39px; padding: 23px 26px; border: 1px solid #d5ff5338; background: linear-gradient(100deg,#d5ff530d,transparent 62%); }
.agent-commerce-band > div > span { color: var(--orange); font: 7px var(--mono); letter-spacing: .07em; }
.agent-commerce-band h3 { margin-top: 8px; font: 400 26px/1 var(--display); }
.agent-commerce-band > p { max-width: 520px; color: #b5b8ac; font-size: 10px; line-height: 1.7; }
.agent-commerce-band > a { max-width: 160px; color: var(--white); font: 7px/1.6 var(--mono); }
.agent-commerce-band > a span { margin-left: 5px; color: var(--orange); font-size: 13px; }
.machine-room { position: relative; overflow: hidden; padding-block: 78px 82px; background: radial-gradient(ellipse at 10% 17%, #444c2630, transparent 42%), #111310; }
.machine-room::before { content: 'NA'; position: absolute; right: -2vw; top: 4%; color: #ffffff05; font: 400 clamp(240px,42vw,670px)/.8 var(--display); pointer-events: none; }
.machine-room-shell { position: relative; z-index: 1; }
.machine-room-top, .machine-room-note { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: 8px var(--mono); letter-spacing: .07em; }
.machine-room-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin: 42px 0 34px; }
.machine-room-heading h2 { font: 400 clamp(54px,7.7vw,106px)/.92 var(--display); letter-spacing: -.025em; }
.machine-room-heading h2 span { color: var(--orange); }
.machine-room-heading > p { max-width: 370px; margin-bottom: 8px; color: #b5b8ac; font-size: 12px; line-height: 1.8; }
.machine-console { --machine-energy: .58; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(290px,.65fr); min-height: 485px; border: 1px solid #ffffff1d; background: #181a17; box-shadow: 0 28px 85px #0007; }
.machine-display { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; border-right: 1px solid #ffffff17; background: radial-gradient(ellipse at 48% 48%, color-mix(in srgb,var(--machine-accent) 15%,transparent), transparent 43%), linear-gradient(145deg,#1c1e1a,#10120f 65%); }
.machine-display-meta, .machine-display-footer { display: flex; justify-content: space-between; gap: 16px; padding: 14px 17px; color: #9fa296; font: 7px var(--mono); letter-spacing: .06em; }
.machine-artwell { position: relative; display: grid; min-height: 348px; flex: 1; place-items: center; overflow: hidden; perspective: 1100px; isolation: isolate; }
.machine-artwell::before { content: ''; position: absolute; width: 65%; aspect-ratio: 1; border: 1px solid color-mix(in srgb,var(--machine-accent) 36%,transparent); border-radius: 50%; transform: rotateX(68deg) rotateZ(-18deg); box-shadow: 0 0 80px color-mix(in srgb,var(--machine-accent) 13%,transparent),inset 0 0 60px color-mix(in srgb,var(--machine-accent) 12%,transparent); animation: machine-orbit 19s linear infinite; }
.machine-artwell::after { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(0deg,transparent,transparent 3px,#fff00005 3px,#fff00005 4px); mask-image: radial-gradient(ellipse at center,#000 15%,transparent 81%); }
.machine-artwell canvas { position: absolute; inset: 4% 6%; width: 88%; height: 92%; mix-blend-mode: screen; opacity: .75; }
.machine-artwell img { position: relative; z-index: 1; display: block; width: 72%; max-width: 640px; border: 1px solid #ffffff40; box-shadow: 0 29px 40px #000a,0 0 calc(48px * var(--machine-energy)) color-mix(in srgb,var(--machine-accent) 22%,transparent); transform: rotateY(-12deg) rotateX(5deg) rotateZ(-2deg) translateY(5px); transition: transform .8s cubic-bezier(.16,.75,.25,1),width .6s; }
.machine-console:hover .machine-artwell img { transform: rotateY(-5deg) rotateX(1deg) rotateZ(0deg) translateY(-8px); }
.machine-orbit { position: absolute; z-index: 0; width: 46%; height: 23%; left: 27%; top: 39%; border: 1px solid color-mix(in srgb,var(--machine-accent) 52%,transparent); border-radius: 50%; transform: rotateX(70deg); opacity: .6; pointer-events: none; }
.orbit-a { animation: orbit-pulse 4s ease-in-out infinite; }
.orbit-b { width: 55%; height: 30%; left: 22.5%; top: 35.5%; animation: orbit-pulse 6s ease-in-out -2s infinite reverse; }
.machine-console[data-machine="fracture"] .machine-artwell::before { border-radius: 2%; transform: rotateX(69deg) rotateZ(-35deg); }
.machine-console[data-machine="hollow"] .machine-artwell::before { border-radius: 50%; transform: rotateX(74deg) rotateZ(0deg); }
.machine-console[data-machine="lattice"] .machine-artwell::before { width: 82%; height: 43%; border-radius: 50%; transform: rotateX(68deg) rotateZ(-8deg); }
.machine-console[data-machine="undertow"] .machine-artwell::before { width: 78%; height: 34%; border-radius: 50%; transform: rotateX(71deg) rotateZ(8deg); }
.machine-console[data-machine="framecut"] .machine-artwell::before { width: 75%; height: 52%; border-radius: 0; transform: rotateX(57deg) rotateZ(-5deg); }
.machine-console[data-machine="rupture"] .machine-artwell::before { width: 66%; height: 50%; border-radius: 4px; transform: rotateX(0deg) rotateZ(-18deg); }
.machine-console[data-machine="hollow"] .machine-artwell img { transform: rotateY(-8deg) rotateX(1deg); }
.machine-console[data-machine="lattice"] .machine-artwell img { transform: rotateY(-9deg) rotateX(5deg) rotateZ(-2deg) translateY(2px); }
.machine-console[data-machine="undertow"] .machine-artwell img { transform: rotateY(11deg) rotateX(4deg) rotateZ(2deg) translateY(7px); }
.machine-console[data-machine="framecut"] .machine-artwell img { transform: rotateY(-9deg) rotateX(9deg) rotateZ(-4deg) translateY(4px); }
.machine-console[data-machine="rupture"] .machine-artwell img { transform: rotateY(8deg) rotateX(3deg) rotateZ(3deg) translateY(5px); }
.machine-controls { display: flex; flex-direction: column; padding: clamp(25px,3.2vw,46px); background: radial-gradient(ellipse at 95% 0%,color-mix(in srgb,var(--machine-accent) 10%,transparent),transparent 52%),#191b18; }
.machine-index, .machine-gesture > span, .machine-macro-row, .machine-energy > span, .machine-room-note { color: var(--muted); font: 8px var(--mono); letter-spacing: .07em; }
.machine-index { color: var(--machine-accent); }
.machine-controls h3 { margin-top: 18px; font: 400 clamp(48px,5.3vw,74px)/.93 var(--display); letter-spacing: -.02em; }
.machine-role { margin-top: 10px; color: var(--machine-accent); font: 9px var(--mono); letter-spacing: .06em; }
.machine-description { margin-top: 22px; color: #c4c7be; font-size: 11px; line-height: 1.75; }
.machine-gesture { margin-top: auto; padding-top: 26px; }
.machine-gesture > span { display: block; }
.machine-gesture strong { display: block; margin-top: 7px; color: var(--white); font: 400 20px var(--display); }
.machine-gesture p { margin-top: 8px; color: #a3a69a; font-size: 10px; line-height: 1.65; }
.machine-macro-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; padding-block: 12px; border-block: 1px solid #ffffff1b; font-size: 7px; }
.machine-energy { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 15px; margin-top: 19px; }
.machine-energy > span { grid-column: 1/-1; font-size: 7px; }
.machine-energy input { width: 100%; height: 4px; margin: 8px 0; accent-color: var(--machine-accent); cursor: ew-resize; }
.machine-energy output { min-width: 34px; color: var(--machine-accent); font: 11px var(--mono); text-align: right; }
.machine-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; }
.machine-audition { display: inline-flex; align-items: center; gap: 20px; padding: 12px 14px; border: 1px solid var(--machine-accent); background: var(--machine-accent); color: #12130f; font: 8px var(--mono); transition: transform .2s,background .2s; }
.machine-audition:hover:not(:disabled) { transform: translateY(-2px); background: color-mix(in srgb,var(--machine-accent) 82%,white); }
.machine-audition:disabled { border-color: #55574f; background: transparent; color: #a3a69a; opacity: 1; }
.machine-product-link { padding: 7px 0; border: 0; border-bottom: 1px solid #686b61; background: transparent; color: #d7d9d0; font: 7px var(--mono); }
.machine-product-link:hover { color: var(--machine-accent); border-color: var(--machine-accent); }
.machine-sound-note { min-height: 26px; margin-top: 13px; color: #85887f; font-size: 8px; line-height: 1.5; }
.machine-picker { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); margin-top: 14px; border: 1px solid #ffffff1a; background: #171916; }
.machine-picker button { display: flex; min-height: 65px; flex-direction: column; justify-content: center; gap: 5px; padding: 11px 13px; border: 0; border-right: 1px solid #ffffff15; background: transparent; text-align: left; transition: background .25s,color .25s; }
.machine-picker button:last-child { border-right: 0; }
.machine-picker button span { color: #caccc4; font: 8px var(--mono); letter-spacing: .025em; }
.machine-picker button small { color: #85887f; font: 8px var(--body); }
.machine-picker button[aria-selected="true"] { background: color-mix(in srgb,var(--machine-accent) 14%,#181a17); box-shadow: inset 0 2px var(--machine-accent); }
.machine-picker button[aria-selected="true"] span { color: var(--machine-accent); }
.machine-picker button:hover:not([aria-selected="true"]) { background: #ffffff09; }
.machine-room-note { margin-top: 15px; font-size: 7px; }
.machine-effect-console { margin: 18px 0 16px; padding: 12px 13px 10px; border: 1px solid color-mix(in srgb,var(--machine-accent) 42%,var(--line)); background: linear-gradient(135deg,color-mix(in srgb,var(--machine-accent) 9%,#10120f),#121411 72%); }
.machine-effect-console[hidden] { display: none; }
.effect-console-head,.effect-console-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font: 8px/1.3 var(--mono); letter-spacing: .11em; }
.effect-console-head { margin-bottom: 10px; color: var(--paper); }
.effect-console-foot { margin-top: 9px; font-size: 7px; }
.framecut-grid { display: grid; grid-template-columns: repeat(16,minmax(0,1fr)); gap: 3px; }
.framecut-cell { position: relative; min-width: 0; height: 46px; padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb,var(--machine-accent) 27%,var(--line)); background: #0e100e; color: #73776e; cursor: pointer; }
.framecut-cell::before { position: absolute; inset-inline: 2px; bottom: 2px; height: 12%; content: ""; background: color-mix(in srgb,var(--machine-accent) 20%,transparent); transition: height .18s ease,background .18s ease; }
.framecut-cell:nth-child(4n+1) { border-left-color: color-mix(in srgb,var(--machine-accent) 80%,white); }
.framecut-cell.is-on { color: #10120f; }
.framecut-cell.is-on::before { height: 82%; background: linear-gradient(to top,color-mix(in srgb,var(--machine-accent) 76%,#f5eee0),var(--machine-accent)); box-shadow: 0 0 15px color-mix(in srgb,var(--machine-accent) 43%,transparent); }
.framecut-cell span { position: relative; z-index: 1; font: 7px var(--mono); }
.framecut-cell:focus-visible,.rupture-band input:focus-visible { outline: 2px solid var(--machine-accent); outline-offset: 2px; }
.rupture-bands { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.rupture-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; min-width: 0; }
.rupture-band > span { color: var(--muted); font: 7px var(--mono); letter-spacing: .08em; }
.rupture-band output { color: var(--paper); font: 8px var(--mono); }
.rupture-band input { grid-column: 1/-1; width: 100%; height: 4px; margin: 0; appearance: none; background: linear-gradient(90deg,var(--machine-accent),#4b4d40); cursor: ew-resize; }
.rupture-band input::-webkit-slider-thumb { width: 11px; height: 11px; appearance: none; border: 1px solid #f3eee0; border-radius: 50%; background: var(--machine-accent); box-shadow: 0 0 12px color-mix(in srgb,var(--machine-accent) 62%,transparent); }
.rupture-band input::-moz-range-thumb { width: 10px; height: 10px; border: 1px solid #f3eee0; border-radius: 50%; background: var(--machine-accent); box-shadow: 0 0 12px color-mix(in srgb,var(--machine-accent) 62%,transparent); }

/* NOISE ALTER / immersive instrument-world visual system */
:root { --electric: #d5ff53; --scroll-progress: 0; --scene-scroll: 0; color-scheme: dark; }
html { background: #0a0c0a; }
body { background: radial-gradient(ellipse at 51% -10%,#48522324 0,transparent 44%),linear-gradient(180deg,#0d100e 0%,#10120f 38%,#0b0d0c 100%); }
body::before { content: ''; position: fixed; z-index: 99; top: 0; left: 0; width: calc(var(--scroll-progress) * 100%); height: 2px; background: linear-gradient(90deg,#d5ff53,#8bffca,#bb8cff); box-shadow: 0 0 14px #d5ff5390; pointer-events: none; }
.announcement { background: #c7ff51; box-shadow: 0 2px 32px #b5ff3722; }
.site-header { position: sticky; z-index: 20; top: 0; min-height: 76px; border-color: #ffffff16; background: #0b0d0bd9; backdrop-filter: blur(18px) saturate(150%); }
.brand { text-shadow: 0 0 25px #d5ff5322; }
.hero { min-height: min(820px,calc(100svh - 110px)); align-items: center; padding-top: 45px; }
.hero-copy { padding-block: 25px 66px; }
.hero-scene { min-height: 610px; transform: translateY(calc((var(--scene-scroll) - .4) * -24px)); transform-style: preserve-3d; }
.hero-plugin { border: 1px solid #eaff8b50; box-shadow: 0 30px 60px #000b,0 0 38px #d5ff5325,0 1px 2px #0009; }
.hero-plugin-back { filter: hue-rotate(16deg) saturate(1.25); }
.hero-plugin-mid { filter: drop-shadow(0 0 25px #a99fff33); }
.hero-plugin-front { filter: drop-shadow(0 0 24px #ff886b3b); }
.scene-grid { opacity: .2; mask-image: radial-gradient(ellipse,#000 5%,transparent 74%); }
.relic-index { letter-spacing: .2em; text-shadow: 0 0 20px #d5ff53,0 0 42px #d5ff5370; }
.hero-baseline { border-color: #ffffff1a; }
.genre-strip { position: relative; z-index: 2; background: linear-gradient(100deg,#caff4d,#e8ff8a 50%,#b9f453); box-shadow: 0 0 70px #b5ef4927; }
.catalog-section.paper,.support-section.paper,.studio-section.paper { color: var(--white); background: transparent; }
.catalog-section { position: relative; isolation: isolate; padding-block: 98px 54px; }
.catalog-section::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(var(--gutter) * -1); background: radial-gradient(ellipse at 85% 13%,#d5ff530d,transparent 36%),linear-gradient(180deg,#111411a6,transparent); pointer-events: none; }
.catalog-heading h2 span { color: #a8ad9c; }
.catalog-heading > p,.product-role,.product-description,.catalog-footnote p,.catalog-status { color: #a6aa9e; }
.catalog-toolbar { border-color: #ffffff24; }
.filter-tabs button { color: #a6aa9e; }
.filter-tabs button.active { background: #d5ff53; color: #10120f; box-shadow: 0 0 28px #d5ff5335; }
.filter-tabs button:hover:not(.active) { background: #ffffff10; color: #fff; }
.search-field input { color: var(--white); }
.search-field input::placeholder { color: #8f9389; }
.product-grid { gap: 48px 24px; padding-top: 17px; }
.product-card { position: relative; padding: 0 0 3px; transform-style: preserve-3d; }
.product-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 8px; color: #a4a89b; font: 8px var(--mono); letter-spacing: .07em; }
.product-category { color: var(--product-color); }
.product-build-line { display:flex; align-items:center; gap:7px; margin:13px 0 2px; color:#bfc5b5; font:7px/1.5 var(--mono); letter-spacing:.045em; }
.product-build-line i { width:5px; height:5px; flex:none; border-radius:50%; background:var(--product-color); box-shadow:0 0 9px color-mix(in srgb,var(--product-color) 58%,transparent); }
.product-type { position: static; right: auto; top: auto; margin-top: -2px; color: #a4a89b; font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.product-art-button { isolation: isolate; border: 1px solid color-mix(in srgb,var(--product-color) 65%,#ffffff2b); background: radial-gradient(ellipse at 52% 50%,color-mix(in srgb,var(--product-color) 55%,#151815),#111411 58%,#090b0a 100%); box-shadow: inset 0 1px #ffffff20,0 18px 42px #0005; transform: translateZ(0); transition: box-shadow .4s,border-color .4s,transform .45s; font-size: 0; }
.product-art-button::before { z-index: 2; background: repeating-linear-gradient(0deg,transparent,transparent 3px,#0000000a 3px,#0000000a 4px),linear-gradient(132deg,#ffffff17,transparent 25%,transparent 74%,#ffffff0c); }
.product-art-button::after { content: ''; position: absolute; inset: 4%; z-index: 0; border: 1px solid color-mix(in srgb,var(--product-color) 40%,transparent); clip-path: polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); opacity: .66; transform: translateZ(12px); pointer-events: none; }
.product-art-button img { z-index: 1; width: 88%; left: 6%; top: 19%; border: 1px solid #ffffff50; box-shadow: 0 24px 40px #000a,0 0 26px color-mix(in srgb,var(--product-color) 46%,transparent); transform: perspective(1100px) rotateX(14deg) rotateY(-13deg) rotateZ(-4deg) translateZ(28px); filter: brightness(1.23) saturate(1.24) contrast(1.08); }
.product-art-button:hover { border-color: color-mix(in srgb,var(--product-color) 80%,#fff); box-shadow: inset 0 0 34px color-mix(in srgb,var(--product-color) 17%,transparent),0 0 42px color-mix(in srgb,var(--product-color) 18%,transparent),0 36px 64px #000b; transform: translateY(-5px); }
.product-art-button:hover img { transform: perspective(1100px) rotateX(2deg) rotateY(-2deg) rotateZ(-1deg) translateY(-10px) translateZ(48px); }
.product-card h3 { color: #f1f0e9; text-shadow: 0 0 25px color-mix(in srgb,var(--product-color) 20%,transparent); }
.product-card-title { margin-top: 21px; }
.product-card-bottom { border-color: #ffffff23; }
.product-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.product-tags span { padding: 5px 8px; border: 1px solid #ffffff22; color: #b4b8ad; font: 7px var(--mono); letter-spacing: .04em; }
.add-button { color: #e6e8df; }
.add-button:hover { color: var(--electric); }
.catalog-footnote { border-color: #ffffff23; }
.bundle-section { position: relative; overflow: hidden; padding-block: 120px; background: radial-gradient(ellipse at 10% 50%,#adcc351c,transparent 45%); }
.bundle-section::after { content: ''; position: absolute; z-index: -1; width: 480px; aspect-ratio: 1; right: -150px; top: 10%; border: 1px solid #d5ff5324; border-radius: 50%; box-shadow: 0 0 0 24px #d5ff5305,0 0 0 60px #d5ff5304,0 0 120px #d5ff5312; transform: rotateX(67deg) rotateZ(-20deg); }
.bundle-builder { border-color: #ffffff2b; background: linear-gradient(135deg,#1b1e18,#0b0d0b 65%); box-shadow: 0 32px 95px #0007,inset 0 1px #ffffff15; }
.bundle-copy h2 span,.bundle-decoration { color: var(--electric); }
.bundle-option { border-color: #ffffff19; }
.bundle-total { border-top: 1px solid #ffffff22; padding-top: 18px; }
.studio-section.paper { position: relative; overflow: hidden; border-block: 1px solid #ffffff14; background: linear-gradient(110deg,#0d100d,#171b14 48%,#10120f); }
.studio-art { min-height: 650px; background: radial-gradient(ellipse at 50% 50%,#d5ff5335,transparent 48%),radial-gradient(ellipse at 50% 50%,#161a13,#090b0a 74%); transform: perspective(1000px) rotateX(var(--surface-x,0deg)) rotateY(var(--surface-y,0deg)); transform-style: preserve-3d; }
.studio-art::before { width: 210px; box-shadow: 0 0 56px #f3ffb599,0 0 165px #d5ff53a3,inset -18px -22px 38px #1118; animation: core-breathe 5.2s ease-in-out infinite; }
.studio-orbit { border-color: #d5ff53; box-shadow: 0 0 0 1px #10120f,0 0 0 9px #d5ff5355,0 0 0 10px #10120f,0 0 0 23px #d5ff532b,0 0 0 24px #10120f,0 0 0 42px #d5ff531e; transform-style: preserve-3d; }
.studio-copy { padding: 86px max(35px,7vw); }
.studio-copy > p:not(.eyebrow):not(.studio-lead) { color: #b0b4a8; }
.studio-copy .text-link { border-color: #ffffff33; }
.agent-section { background: radial-gradient(ellipse at 80% 42%,#4a3e681e,transparent 38%),linear-gradient(130deg,#0c0e0d,#11130f 65%,#15140f); }
.agent-section::after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(90deg,transparent,#000 55%,transparent); opacity: .26; pointer-events: none; }
.agent-tool-stack article { transition: padding .3s,border-color .3s; }
.agent-tool-stack article:hover { padding-left: 15px; border-color: #d5ff5377; }
.agent-tool-stack article:hover h3 { color: var(--electric); }
.agent-commerce-band { border-color: #d5ff5344; box-shadow: inset 0 0 45px #d5ff5308,0 20px 60px #0003; backdrop-filter: blur(12px); }
.support-section .faq-items { color: #d2d4cb; }
.support-section { padding-top: 100px; }
.faq-items details,.faq-items details:first-child { border-color: #ffffff25; }
.faq-items details p { color: #aeb2a6; }
.closing { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(103deg,#d5ff53,#dcff73 58%,#bfff55); box-shadow: 0 0 85px #b9fa4933; }
.closing::after { content: '↗'; position: absolute; z-index: -1; right: 12%; top: -54%; color: #1114110a; font: 400 300px/1 var(--display); transform: rotate(-18deg); }
.site-footer { padding-top: 60px; }
.footer-bottom { border-color: #ffffff20; }
.product-dialog { border-color: #d5ff5352; background: #0d100e; color: var(--white); box-shadow: 0 40px 160px #000d,0 0 80px #d5ff5314; }
.product-detail-art { background: radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--product-color) 62%,#111411),#101210 74%); perspective: 900px; }
.product-detail-art img { border: 1px solid #ffffff50; box-shadow: 0 35px 65px #000b,0 0 38px color-mix(in srgb,var(--product-color) 39%,transparent); }
.product-detail-copy .eyebrow,.product-detail-story,.detail-status,.detail-price span { color: #a7aa9e; }
.detail-tabs { border-color: #ffffff23; }
.detail-tabs button { color: #a7aa9e; }
.detail-tabs button[aria-selected="true"] { color: var(--white); border-bottom-color: var(--product-color,var(--electric)); }
.detail-tab-panel { color: #d9dbd3; }
.detail-tab-panel p,.detail-tab-panel li { color: #afb3a8; }
.compatibility-table th,.compatibility-table td { border-color: #ffffff24; }
.machine-artwell { transform: perspective(900px) rotateX(var(--surface-x,0deg)) rotateY(var(--surface-y,0deg)); transform-style: preserve-3d; }
.machine-artwell img { box-shadow: 0 32px 65px #000b,0 0 50px color-mix(in srgb,var(--machine-accent) 25%,transparent); }
.machine-console { border-color: color-mix(in srgb,var(--machine-accent) 42%,#ffffff26); box-shadow: 0 38px 110px #0009,0 0 80px color-mix(in srgb,var(--machine-accent) 8%,transparent),inset 0 1px #ffffff12; }
@keyframes core-breathe { 0%,100% { scale: .94; filter: brightness(.9); } 50% { scale: 1.06; filter: brightness(1.24); } }
@keyframes machine-orbit { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes orbit-pulse { 0%,100% { opacity: .22; scale: .94; } 50% { opacity: .72; scale: 1.03; } }
.agent-guide-hero { padding-block: clamp(60px,10vw,145px) clamp(70px,11vw,155px); background: radial-gradient(ellipse at 75% 50%, #a1da4526, transparent 36%); }
.agent-guide-hero .eyebrow { color: var(--muted); }
.agent-guide-hero h1 { margin-block: 28px; font-size: clamp(76px,12vw,170px); }
.agent-guide-hero h1 span { color: var(--orange); }
.agent-guide-lead { max-width: 570px; margin-bottom: 26px; color: #c7c9bf; font-size: clamp(16px,2vw,22px); line-height: 1.65; }
.agent-guide-content { padding-block: 55px 70px; }
.agent-guide-label { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--paper-line); padding-bottom: 15px; color: var(--paper-muted); font: 8px var(--mono); }
.agent-guide-content:not(.paper) .agent-guide-label { border-color: var(--line); color: var(--muted); }
.agent-guide-content:not(.paper) .agent-guide-label > span { color: var(--muted); }
.agent-guide-content:not(.paper) .agent-guide-grid h2 { color: var(--white); }
.agent-guide-content:not(.paper) .agent-guide-grid p { color: #b5b8ac; }
.agent-guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px,8vw,110px); padding-top: 44px; }
.agent-guide-grid article { position: relative; }
.agent-guide-grid h2 { max-width: 430px; margin: 13px 0; font: 400 clamp(28px,4vw,48px)/1.03 var(--display); }
.agent-guide-grid p { max-width: 510px; color: var(--paper-muted); font-size: 12px; line-height: 1.8; }
.agent-guide-grid code { font: 10px var(--mono); overflow-wrap: anywhere; }
.guide-number { color: #85877d; font: 9px var(--mono); }
.guide-command { display: block; width: fit-content; max-width: 100%; margin: 18px 0; padding: 13px 15px; background: #e2e1d9; color: var(--ink); }
.agent-guide-grid .button { margin-top: 5px; }
.guide-note { margin-top: 12px; }
.agent-guide-tools { padding-block: 65px 75px; }
.agent-guide-tools .agent-guide-label { border-color: var(--line); }
.agent-guide-tools .agent-guide-label > span { color: var(--muted); }
.guide-tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin-top: 36px; background: var(--line); }
.guide-tool-grid article { min-height: 205px; padding: 27px; background: var(--ink); }
.guide-tool-grid article > span { color: var(--orange); font: 9px var(--mono); overflow-wrap: anywhere; }
.guide-tool-grid h2 { margin: 20px 0 8px; font: 400 clamp(25px,3vw,39px)/1.1 var(--display); }
.guide-tool-grid p { max-width: 420px; color: #b5b8ac; font-size: 11px; line-height: 1.75; }
.agent-guide-callout { margin-top: 25px; border-left: 2px solid var(--orange); padding: 20px 25px; background: #22241f; color: #d2d4cb; font-size: 12px; line-height: 1.7; }
.agent-guide-callout strong { color: var(--orange); }
.guide-limits { padding-top: 34px; }
.guide-revenue { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px 70px; }
.guide-pricing-note { max-width: 870px; margin-top: 33px; padding: 15px 18px; border-left: 2px solid var(--orange); background: #e0dfd7; color: var(--paper-muted); font-size: 10px; line-height: 1.65; }
.agent-guide-end { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 32px; border-top: 1px solid var(--line); font: 9px var(--mono); }
.agent-guide-end p { color: var(--muted); }
.agent-guide-end a { color: var(--orange); }
.support-section h2 { margin-top: 23px; font-size: clamp(45px,5vw,72px); }
.support-research { margin-top: 26px; max-width: 300px; font-size: 10px; }
.faq-items details { border-bottom: 1px solid var(--paper-line); padding: 21px 0; }
.faq-items details:first-child { border-top: 1px solid var(--paper-line); }
.faq-items summary { list-style: none; display: flex; gap: 30px; justify-content: space-between; align-items: baseline; font-size: 13px; }
.faq-items summary span { font-size: 20px; font-weight: 400; line-height: 1; transition: transform .2s; }
.faq-items details[open] summary span { transform: rotate(45deg); }
.faq-items details p { margin-top: 15px; color: var(--paper-muted); font-size: 12px; line-height: 1.8; padding-right: 25px; }
.faq-items p a { text-decoration: underline; text-underline-offset: 3px; }
summary::-webkit-details-marker { display: none; }
.closing { background: var(--orange); color: var(--ink); display: flex; align-items: flex-end; justify-content: space-between; padding-block: 38px; gap: 30px; }
.closing p { font: 400 clamp(31px,3.7vw,58px)/1.05 var(--display); }
.closing a { font: 400 clamp(28px,3.7vw,58px)/1 var(--display); border-bottom: 2px solid var(--ink); padding-bottom: 3px; }
.closing a span { margin-left: 35px; font: 60px var(--body); line-height: .5; }
.site-footer { padding-top: 42px; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; padding-bottom: 40px; }
.footer-top > p { color: var(--muted); font: 9px/1.7 var(--mono); }
.footer-top nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 50px; font-size: 10px; }
.footer-top nav a:hover { color: var(--orange); }
.footer-bottom { display: flex; justify-content: space-between; gap: 25px; color: var(--muted); border-top: 1px solid var(--line); padding-block: 20px; font: 7px var(--mono); letter-spacing: .02em; }
.product-dialog { width: min(1120px,calc(100vw - 48px)); max-height: calc(100dvh - 60px); padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); overflow: auto; }
dialog::backdrop { background: #0b0c0be0; backdrop-filter: blur(7px); }
.dialog-close { position: absolute; top: 15px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; background: transparent; font: 26px/1 var(--body); z-index: 5; }
.product-detail-hero { display: grid; grid-template-columns: 1.1fr 1fr; }
.product-detail-art { background: var(--product-color); min-height: 390px; padding: 55px 22px; display: flex; align-items: center; position: relative; }
.product-detail-art img { transform: perspective(900px) rotateY(-7deg) rotateX(4deg) rotateZ(-3deg); box-shadow: 0 22px 20px #0004; }
.product-detail-art > span { position: absolute; bottom: 17px; left: 22px; font: 8px var(--mono); }
.product-detail-copy { padding: 52px 35px 30px; }
.product-detail-copy .eyebrow { color: var(--paper-muted); }
.product-detail-copy h2 { font-size: clamp(40px,5vw,68px); margin-top: 14px; }
.product-detail-tagline { font-size: 19px; margin: 13px 0; }
.product-detail-story { font-size: 12px; line-height: 1.8; color: var(--paper-muted); }
.detail-purchase { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; gap: 20px; }
.detail-price strong { font: 30px var(--display); }
.detail-price span { display: block; font: 7px var(--mono); color: var(--paper-muted); }
.detail-purchase .button { font-size: 11px; }
.detail-status { margin-top: 15px; font-size: 9px; color: var(--paper-muted); }
.product-detail-art > span { max-width:calc(100% - 40px); color:#f2f0e8; font-size:7px; line-height:1.5; text-shadow:0 1px 5px #000; }
.detail-tabs { display: flex; gap: 26px; padding: 0 30px; border-block: 1px solid var(--paper-line); }
.detail-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 16px 0; font-size: 11px; color: var(--paper-muted); }
.detail-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--orange); }
.detail-tab-panel { padding: 27px 32px; min-height: 180px; }
.detail-tab-panel[hidden] { display: none; }
.detail-tab-panel h3 { font-size: 15px; margin-bottom: 10px; }
.detail-tab-panel p, .detail-tab-panel li { font-size: 12px; color: var(--paper-muted); line-height: 1.7; }
.detail-tab-panel li { margin-bottom: 7px; }
.detail-tab-panel ul { padding-left: 16px; }
.detail-tab-panel code { font-size: 10px; overflow-wrap: anywhere; }
.detail-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.detail-feature-grid > div { border-bottom: 1px solid var(--paper-line); padding-bottom: 14px; }
.detail-feature-grid strong { font-size: 11px; }
.detail-feature-grid p { font-size: 10px; margin-top: 6px; }
.detail-tech-specs { display:grid; gap:8px; margin-top:26px; padding:17px 19px; border:1px solid var(--paper-line); background:linear-gradient(115deg,#ffffff0b,#00000006); }
.detail-tech-specs > span { color:var(--paper-muted); font:8px var(--mono); letter-spacing:.12em; }
.detail-tech-specs > p { max-width:920px; margin:0 0 7px; color:var(--ink); font:11px/1.7 var(--body); }
.detail-tech-specs .detail-macro-list { margin:0; color:var(--paper-muted); font:9px/1.8 var(--mono); }
.detail-download-link { margin-top: 18px; }
.compatibility-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 14px; }
.compatibility-table th, .compatibility-table td { text-align: left; padding: 10px 6px; border-bottom: 1px solid var(--paper-line); vertical-align: top; }
.compatibility-table th { font: 8px var(--mono); color: var(--paper-muted); }
.compatibility-table + p { margin-top: 16px; font-size: 10px; }
.cart-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(470px,100vw); height: 100dvh; max-width: 100vw; max-height: 100dvh; padding: 0; background: var(--ink); border: 0; border-left: 1px solid var(--line); color: var(--white); }
.cart-dialog[open] { display: flex; flex-direction: column; }
.cart-heading { position: relative; padding: 33px 27px 23px; border-bottom: 1px solid var(--line); }
.cart-heading .eyebrow { color: var(--muted); }
.cart-heading h2 { font-size: 49px; margin-top: 10px; }
.cart-heading h2 span { color: var(--orange); }
.cart-heading .dialog-close { top: 26px; right: 24px; color: var(--muted); }
.cart-body { flex: 1; overflow: auto; padding: 0 27px; }
.cart-item { display: flex; align-items: center; gap: 17px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.cart-item-art { background: var(--product-color); width: 92px; height: 75px; padding: 9px; display: flex; align-items: center; flex-shrink: 0; }
.cart-item-copy { flex: 1; }
.cart-item-copy strong { display: block; font-size: 14px; }
.cart-item-copy small { font: 8px var(--mono); color: var(--muted); }
.cart-remove { display: block; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 0; font-size: 9px; color: var(--muted); margin-top: 7px; }
.cart-item-price { align-self: flex-start; font: 12px var(--mono); padding-top: 4px; }
.cart-empty { padding: 40px 0; }
.cart-empty p { font-size: 20px; margin-bottom: 15px; }
.cart-empty span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 25px; }
.cart-footer { padding: 22px 27px 27px; border-top: 1px solid var(--line); }
.cart-total { display: flex; justify-content: space-between; font-size: 14px; }
.cart-total strong { font: 24px var(--display); }
.cart-footer > p { font-size: 9px; color: var(--muted); margin: 14px 0; line-height: 1.7; }
.cart-footer .button { width: 100%; }
.checkout-status { font-size: 11px; line-height: 1.7; margin-top: 12px; color: var(--muted); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%,25px); max-width: calc(100vw - 36px); padding: 13px 20px; color: var(--ink); background: var(--paper); border: 1px solid var(--paper-line); font-size: 12px; box-shadow: 0 8px 25px #0004; opacity: 0; pointer-events: none; transition: opacity .2s,transform .2s; z-index: 50; text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
@media (min-width: 1600px) {
  .hero { padding-top: 88px; }
  .hero-scene { margin-right: 0; }
  .hero-plugin-back { top: 45px; }
  .hero-plugin-mid { top: 230px; }
  .hero-plugin-front { top: 385px; }
  .hero-copy { padding-bottom: 100px; }
  .scene-caption { bottom: 35px; }
  .scene-disclaimer { bottom: 23px; }
}
@media (max-width: 1150px) {
  :root { --gutter: 35px; }
  .site-header { gap: 20px; }
  .site-header nav { gap: 20px; }
  .header-actions { gap: 17px; }
  .hero { padding-top: 55px; }
  .hero-copy { padding-bottom: 55px; }
  .hero-actions { gap: 18px; flex-wrap: wrap; }
  .hero-scene { margin-right: -20px; }
  .hero-plugin-back { top: 15px; width: 86%; }
  .hero-plugin-mid { top: 158px; width: 90%; right: 3%; }
  .hero-plugin-front { top: 289px; width: 95%; right: -2%; }
  .scene-topline { left: 20px; font-size: 7px; }
  .scene-caption { font-size: 7px; bottom: 43px; }
  .scene-disclaimer { bottom: 28px; font-size: 6px; }
  .bundle-section { gap: 40px; }
  .bundle-builder { padding: 20px; }
  .bundle-total { flex-wrap: wrap; }
  .studio-copy { padding: 50px 40px; }
  .studio-art { min-height: 560px; }
}
@media (max-width: 850px) {
  :root { --gutter: 28px; }
  .site-header { min-height: 78px; }
  .site-header nav { display: none; }
  .brand { font-size: 23px; }
  .hero { grid-template-columns: 1fr 1fr; }
  h1 { font-size: 85px; }
  .hero .eyebrow { font-size: 7px; }
  .hero-small { font-size: 11px; }
  .hero-description { font-size: 16px; }
  .hero-scene { margin-left: -5px; }
  .hero-plugin-back { top: 45px; width: 100%; right: -5%; }
  .hero-plugin-mid { top: 190px; width: 110%; right: -5%; }
  .hero-plugin-front { top: 325px; width: 110%; right: -15%; }
  .scene-caption { bottom: 29px; font-size: 6px; }
  .scene-disclaimer { bottom: 13px; font-size: 5px; }
  .coord-a, .coord-b { display: none; }
  .hero-baseline span:nth-child(2) { display: none; }
  .genre-strip { justify-content: space-between; gap: 14px; font-size: 17px; }
  .genre-strip i { font-size: 17px; }
  .genre-strip span:last-child { display: none; }
  .genre-strip i:last-of-type { display: none; }
  .section-kicker > span { font-size: 7px; }
  .catalog-heading > p { font-size: 12px; padding: 0; max-width: 260px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-toolbar { gap: 15px; }
  .filter-tabs { gap: 2px; }
  .filter-tabs button { padding-inline: 10px; font-size: 10px; }
  .filter-tabs button span { margin-left: 6px; font-size: 7px; }
  .search-field { width: 180px; }
  .catalog-footnote { gap: 20px; }
  .catalog-footnote p { font-size: 9px; }
  .bundle-section { gap: 28px; }
  .bundle-copy > p:not(.eyebrow) { font-size: 13px; }
  .bundle-copy > p.muted { font-size: 11px; }
  .bundle-option { gap: 10px; }
  .bundle-option .bundle-option-name { font-size: 12px; }
  .bundle-option .bundle-option-name small { font-size: 7px; }
  .bundle-option-icon { width: 26px; height: 28px; font-size: 16px; }
  .builder-top { font-size: 7px; }
  .studio-copy { padding: 40px 30px; }
  .studio-art { min-height: 540px; }
  .studio-lead { font-size: 16px; }
  .studio-orbit { width: 85%; height: 26%; left: 7%; top: 37%; }
  .support-section { gap: 35px; }
  .agent-layout { grid-template-columns: 1fr; gap: 35px; }
  .agent-guide-grid { gap: 35px; }
  .machine-room-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .machine-console { grid-template-columns: 1fr; }
  .machine-display { border-right: 0; border-bottom: 1px solid #ffffff17; }
  .machine-controls { min-height: 470px; }
  .faq-items summary { font-size: 12px; }
  .footer-top { gap: 30px; flex-wrap: wrap; }
  .footer-top > p { font-size: 8px; }
  .product-detail-hero { grid-template-columns: 1fr; }
  .product-detail-art { min-height: 0; padding: 40px 90px; max-height: 370px; }
  .product-detail-art img { max-height: 280px; width: auto; margin: auto; }
  .product-detail-copy { padding: 27px 30px; }
  .product-detail-copy h2 { font-size: 56px; }
  .product-detail-story { max-width: 640px; }
}
@media (max-width: 600px) {
  :root { --gutter: 21px; }
  html { scroll-padding-top: 20px; }
  .announcement { font-size: 7px; gap: 6px; justify-content: space-between; min-height: 35px; }
  .announcement > span:nth-child(2) { font-size: 6px; }
  .announcement a { margin-left: auto; font-size: 7px; }
  .announcement-dot { display: none; }
  .site-header { min-height: 76px; gap: 16px; }
  .brand { font-size: 21px; letter-spacing: -1px; gap: 5px; }
  .brand svg { width: 26px; height: 28px; }
  .header-actions { gap: 16px; font-size: 10px; }
  .lab-link { font-size: 9px; }
  .lab-link span { display: none; }
  .bag-button { gap: 7px; font-size: 10px; }
  .bag-button span { width: 21px; min-width: 21px; height: 21px; font-size: 9px; }
  .hero { display: flex; flex-direction: column; padding-top: 38px; }
  .hero-copy { padding-bottom: 0; }
  .hero .eyebrow { font-size: 8px; }
  h1 { font-size: clamp(81px,21vw,126px); margin: 20px 0 24px; line-height: .99; }
  .hero-description { font-size: 19px; }
  .hero-small { font-size: 12px; margin-top: 12px; }
  .hero-actions { gap: 24px; margin-top: 25px; }
  .button { min-height: 47px; font-size: 11px; padding-inline: 17px; }
  .hero-secondary { font-size: 9px; gap: 9px; }
  .hero-scene { height: 455px; margin: 54px -5px 0; }
  .scene-topline { top: -18px; left: 0; font-size: 7px; }
  .hero-plugin-back { width: 77%; right: 1%; top: 18px; }
  .hero-plugin-mid { width: 83%; right: 14%; top: 121px; }
  .hero-plugin-front { width: 87%; right: -1%; top: 218px; }
  .scene-caption { bottom: 26px; right: 0; font-size: 7px; }
  .scene-disclaimer { bottom: 10px; right: 0; font-size: 6px; }
  .hero-baseline { gap: 35px; width: 100%; font-size: 6px; padding-block: 16px; }
  .hero-baseline span:last-child { text-align: right; }
  .genre-strip { gap: 11px; padding-block: 17px; font-size: 16px; }
  .genre-strip i { font-size: 14px; }
  .catalog-section { padding-top: 44px; padding-bottom: 27px; }
  .section-kicker > span { display: none; }
  .eyebrow { font-size: 8px; }
  .catalog-heading { display: block; margin: 22px 0 30px; }
  h2 { font-size: clamp(45px,11vw,65px); }
  .catalog-heading > p { margin-top: 20px; max-width: 100%; font-size: 12px; }
  .desktop-break { display: none; }
  .catalog-toolbar { display: block; padding: 16px 0 11px; }
  .filter-tabs { justify-content: space-between; gap: 4px; }
  .filter-tabs button { padding: 10px 12px; font-size: 10px; }
  .filter-tabs button span { font-size: 8px; margin-left: 12px; }
  .search-field { width: 100%; border-top: 1px solid var(--paper-line); margin-top: 13px; padding-top: 7px; }
  .search-field input { padding-block: 10px; }
  .catalog-status { font-size: 8px; min-height: 34px; }
  .product-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 4px; }
  .product-art-button { aspect-ratio: 1.4; }
  .product-art-button img { top: 21%; }
  .product-card h3 { font-size: 34px; }
  .product-price { font-size: 13px; }
  .product-description { min-height: 0; max-width: 100%; }
  .product-card-bottom { padding-top: 12px; margin-top: 14px; }
  .product-card-bottom > span { font-size: 8px; }
  .add-button { font-size: 11px; padding-block: 6px; }
  .collection-card { min-height: 365px; padding: 28px; }
  .collection-card h3 { font-size: 57px; }
  .collection-card-cross { top: 18px; right: -8px; font-size: 260px; }
  .catalog-footnote { flex-direction: column; gap: 11px; padding-top: 19px; }
  .catalog-footnote p { text-align: left; font-size: 9px; line-height: 1.6; }
  .bundle-section { grid-template-columns: 1fr; gap: 29px; padding-block: 47px; }
  .bundle-copy h2 { margin-block: 18px; }
  .bundle-copy > p:not(.eyebrow) { font-size: 14px; }
  .bundle-copy > p.muted { font-size: 12px; }
  .bundle-decoration { display: none; }
  .bundle-builder { padding: 20px; }
  .builder-top { font-size: 8px; }
  .bundle-option { gap: 13px; padding-block: 16px; }
  .bundle-option-icon { width: 32px; height: 32px; font-size: 20px; }
  .bundle-option .bundle-option-name { font-size: 13px; }
  .bundle-option .bundle-option-name small { font-size: 8px; }
  .bundle-total { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .bundle-total strong { font-size: 35px; }
  .bundle-total .button { padding: 12px; font-size: 9px; gap: 12px; }
  .builder-note { font-size: 8px; }
  .studio-section { grid-template-columns: 1fr; }
  .studio-art { min-height: 350px; }
  .studio-orbit { width: 68%; height: 35%; left: 16%; top: 31%; }
  .studio-art-a { top: 20px; left: 24px; }
  .studio-art-label { left: 24px; bottom: 20px; font-size: 9px; }
  .studio-art-axis { top: 24px; right: 20px; font-size: 8px; }
  .studio-copy { padding: 40px 21px 45px; }
  .studio-copy h2 { font-size: 57px; margin: 23px 0; }
  .studio-lead { font-size: 20px; }
  .studio-copy > p:not(.eyebrow):not(.studio-lead) { max-width: 440px; }
  .development-notice { padding: 16px 13px; gap: 12px; font-size: 10px; line-height: 1.7; }
  .development-notice > span { font-size: 20px; }
  .download-controls { gap: 10px; }
  .download-controls label { display: block; font-size: 7px; }
  .download-controls select { display: block; margin-top: 6px; font-size: 10px; min-width: 155px; }
  .text-button { font-size: 9px; align-self: flex-end; }
  .text-button span { margin-left: 4px; }
  .release-row { grid-template-columns: 1fr auto; gap: 12px; padding-block: 20px; }
  .release-name strong { font-size: 13px; }
  .release-meta { font-size: 8px; grid-column: 1; grid-row: 2; }
  .release-status { font-size: 8px; grid-row: 3; grid-column: 1 / -1; }
  .release-link { grid-column: 2; grid-row: 1/3; gap: 8px; padding: 8px; font-size: 9px; }
  .installation-guide summary { font-size: 11px; gap: 15px; }
  .installation-guide > div { font-size: 10px; }
  .support-section { grid-template-columns: 1fr; gap: 30px; padding-block: 30px 48px; }
  .agent-section { padding-block: 43px 30px; }
  .agent-layout { padding-block: 30px; }
  .agent-section-top > span { display: none; }
  .agent-foot { align-items: flex-start; flex-direction: column; gap: 12px; line-height: 1.7; }
  .agent-commerce-band { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; padding: 19px; }
  .agent-commerce-band > a { max-width: none; }
  .agent-guide-hero { padding-block: 65px 80px; }
  .agent-guide-hero h1 { font-size: clamp(74px,20vw,118px); }
  .agent-guide-lead { font-size: 16px; }
  .agent-guide-content, .agent-guide-tools { padding-block: 38px 45px; }
  .agent-guide-label > span { display: none; }
  .agent-guide-grid { grid-template-columns: 1fr; gap: 36px; padding-top: 30px; }
  .guide-revenue { gap: 34px; }
  .guide-tool-grid { grid-template-columns: 1fr; margin-top: 26px; }
  .guide-tool-grid article { min-height: 0; padding: 24px; }
  .agent-guide-callout { padding: 17px; font-size: 11px; }
  .agent-guide-end { align-items: flex-start; flex-direction: column; line-height: 1.6; }
  .machine-room { padding-block: 48px 50px; }
  .machine-room-top > span { display: none; }
  .machine-room-heading { margin-block: 27px 24px; }
  .machine-room-heading h2 { font-size: clamp(53px,14vw,75px); }
  .machine-room-heading > p { font-size: 11px; }
  .machine-artwell { min-height: 270px; }
  .machine-artwell img { width: 83%; }
  .machine-controls { min-height: 435px; padding: 24px 21px; }
  .machine-effect-console { margin-block: 12px; padding-inline: 9px; }
  .framecut-grid { gap: 2px; }
  .framecut-cell { height: 37px; }
  .machine-controls h3 { font-size: 53px; }
  .machine-picker { grid-template-columns: repeat(7,120px); overflow-x: auto; overscroll-behavior-x: contain; }
  .machine-picker button { min-height: 62px; padding-inline: 10px; }
  .machine-room-note { font-size: 6px; line-height: 1.6; }
  .support-section h2 { font-size: 54px; }
  .support-research { margin-top: 14px; }
  .faq-items details { padding-block: 20px; }
  .faq-items summary { font-size: 12px; gap: 25px; }
  .faq-items details p { font-size: 11px; padding-right: 15px; }
  .closing { padding-block: 27px; flex-direction: column; align-items: flex-start; gap: 22px; }
  .closing p { font-size: 43px; }
  .closing a { font-size: 38px; }
  .closing a span { font-size: 43px; margin-left: 30px; }
  .site-footer { padding-top: 31px; }
  .footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 12px; padding-bottom: 28px; }
  .footer-top > .brand { grid-column: 1/-1; }
  .footer-top > p { font-size: 7px; }
  .footer-top nav { font-size: 9px; gap: 10px 17px; }
  .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; font-size: 6px; padding-block: 17px; }
  .footer-bottom > span:nth-child(2) { margin-right: auto; }
  .product-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 30px); }
  .dialog-close { width: 30px; height: 30px; top: 12px; right: 12px; font-size: 22px; }
  .product-detail-art { padding: 55px 20px 38px; }
  .product-detail-art > span { font-size: 6px; left: 15px; bottom: 12px; }
  .product-detail-copy { padding: 25px 20px; }
  .product-detail-copy h2 { font-size: 49px; }
  .product-detail-tagline { font-size: 17px; }
  .product-detail-story { font-size: 11px; }
  .detail-purchase { margin-top: 20px; }
  .detail-tabs { gap: 22px; padding-inline: 20px; }
  .detail-tabs button { font-size: 10px; }
  .detail-tab-panel { padding: 23px 20px; }
  .detail-feature-grid { gap: 16px; }
  .detail-feature-grid strong { font-size: 10px; }
  .detail-feature-grid p { font-size: 9px; }
  .detail-tab-panel p, .detail-tab-panel li { font-size: 10px; }
  .compatibility-table { font-size: 9px; }
  .compatibility-table th { font-size: 7px; }
  .cart-heading, .cart-footer { padding-inline: 22px; }
  .cart-body { padding-inline: 22px; }
  .toast { bottom: 16px; font-size: 11px; min-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Landing page / featured machine cover */
.hero { display: grid; grid-template-columns: minmax(390px,.82fr) minmax(0,1.18fr); grid-template-rows: minmax(0,1fr) auto auto; align-items: center; column-gap: clamp(16px,2.3vw,38px); min-height: max(610px,calc(100svh - 142px)); padding-top: clamp(15px,2vw,32px); padding-bottom: 0; overflow: hidden; }
.hero-copy { grid-column: 1; grid-row: 1; z-index: 4; max-width: 590px; padding: 0 0 32px; }
.hero .eyebrow { gap: 12px; color: #bec3b3; font-size: 9px; letter-spacing: .12em; }
.asterisk { color: var(--hero-accent,var(--electric)); text-shadow: 0 0 18px var(--hero-accent,var(--electric)); }
.hero h1 { margin: clamp(20px,2.4vw,34px) 0 20px; font-size: clamp(82px,9.1vw,128px); line-height: .82; letter-spacing: -.045em; }
.hero h1 span { color: var(--electric); text-shadow: 0 0 34px #d5ff5330; }
.hero-description { max-width: 430px; font-size: clamp(17px,1.65vw,24px); line-height: 1.35; }
.hero-small { margin-top: 17px; font-size: 11px; line-height: 1.7; letter-spacing: .035em; }
.hero-actions { gap: 22px; margin-top: 29px; }
.hero-actions .button { min-height: 49px; box-shadow: 0 0 32px #d5ff5320; }
.hero-secondary { padding-bottom: 9px; font-size: 9px; }
.hero-proof { display: flex; flex-direction: column; gap: 7px; margin-top: 24px; color: #878d7e; font: 7px var(--mono); letter-spacing: .12em; }
.hero-proof span:first-child::before { content: '●'; margin-right: 8px; color: var(--hero-accent,var(--electric)); font-size: 6px; }
.hero-scene { --hero-accent: #ff765e; grid-column: 2; grid-row: 1; min-width: 0; min-height: min(540px,68svh); height: 100%; margin: 0 -5vw 0 -5%; isolation: isolate; perspective: 1500px; transform: none; }
.hero-scene::before { content: ''; position: absolute; z-index: -2; inset: 8% -3% 5% 4%; background: radial-gradient(ellipse at 55% 49%,color-mix(in srgb,var(--hero-accent) 26%,transparent),transparent 48%),radial-gradient(ellipse at 52% 55%,#717b2a18,transparent 68%); filter: blur(18px); }
.hero-relic { z-index: -1; inset: 2% -2% 3% 0; width: 100%; height: 96%; opacity: .94; mix-blend-mode: screen; filter: saturate(1.35) contrast(1.08); }
.scene-grid { inset: 4% 0 8% 0; background-size: 58px 58px; opacity: .22; mask-image: radial-gradient(ellipse at 55% 48%,#000 9%,transparent 72%); }
.scene-topline { top: 5%; left: 10%; color: #c1c6b6; font-size: 8px; letter-spacing: .19em; }
.coord-a { top: 17%; left: 4%; color: var(--hero-accent); }
.coord-b { bottom: 24%; left: 3%; }
.hero-lightwell { position: absolute; z-index: -1; inset: 10% 4% 8% 8%; perspective: 900px; pointer-events: none; }
.hero-lightwell i { position: absolute; left: 50%; top: 51%; width: 68%; height: 31%; border: 1px solid color-mix(in srgb,var(--hero-accent) 82%,#f5f2df); border-radius: 50%; box-shadow: 0 0 28px color-mix(in srgb,var(--hero-accent) 46%,transparent),inset 0 0 22px color-mix(in srgb,var(--hero-accent) 20%,transparent); transform: translate(-50%,-50%) rotateX(69deg) rotateZ(-20deg); animation: relic-orbit 16s linear infinite; }
.hero-lightwell i:nth-child(2) { width: 79%; height: 38%; opacity: .5; transform: translate(-50%,-50%) rotateX(73deg) rotateZ(55deg); animation-duration: 23s; animation-direction: reverse; }
.hero-lightwell i:nth-child(3) { width: 91%; height: 44%; opacity: .22; transform: translate(-50%,-50%) rotateX(66deg) rotateZ(115deg); animation-duration: 31s; }
.hero-plugin.hero-device { position: absolute; z-index: 3; top: 16%; right: 6%; left: auto; width: min(82%,790px); height: auto; border: 1px solid color-mix(in srgb,var(--hero-accent) 66%,#ffffff70); border-radius: 5px; box-shadow: 0 44px 90px #000d,0 0 44px color-mix(in srgb,var(--hero-accent) 22%,transparent),inset 0 1px #ffffff3d; transform: perspective(1600px) rotateY(-12deg) rotateX(8deg) rotateZ(-2deg) translateZ(42px); filter: brightness(1.12) saturate(1.16); animation: hero-machine-float 8s ease-in-out infinite; }
.hero-device-shadow { position: absolute; z-index: 1; right: 6%; bottom: 17%; width: 74%; height: 15%; border-radius: 50%; background: color-mix(in srgb,var(--hero-accent) 37%,transparent); filter: blur(48px); transform: rotateX(68deg); opacity: .62; }
.hero-device-caption { position: absolute; z-index: 5; top: 6%; right: 5%; bottom: auto; left: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 58%; padding: 9px 0; border: 0; background: transparent; color: #d7d9ce; font: 7px var(--mono); letter-spacing: .1em; text-shadow: 0 2px 12px #000; pointer-events: none; }
.hero-device-caption span:first-child { color: var(--hero-accent); font: 16px var(--display); letter-spacing: .02em; text-shadow: 0 0 18px color-mix(in srgb,var(--hero-accent) 45%,transparent); }
.relic-index { z-index: 4; top: 16%; left: 2%; color: #e4e8d7; font-size: 8px; letter-spacing: .1em; line-height: 2; }
.relic-index b { color: var(--hero-accent); font: 400 42px/.9 var(--display); text-shadow: 0 0 26px color-mix(in srgb,var(--hero-accent) 60%,transparent); }
.relic-index span { font-size: 6px; color: #a7ad9b; }
.scene-coord,.scene-caption,.scene-disclaimer { pointer-events: none; }
.scene-disclaimer { right: 5%; bottom: 6%; color: #8f9686; font-size: 6px; letter-spacing: .1em; }
.hero-machine-strip { grid-column: 1/-1; grid-row: 2; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-top: 1px solid #ffffff29; border-bottom: 1px solid #ffffff20; }
.hero-machine-strip button { position: relative; min-width: 0; padding: 14px 14px 13px; border: 0; border-right: 1px solid #ffffff18; background: transparent; text-align: left; transition: background .25s,color .25s; }
.hero-machine-strip button:last-child { border-right: 0; }
.hero-machine-strip button::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 0; height: 2px; background: var(--hero-accent); box-shadow: 0 0 15px var(--hero-accent); transition: width .25s; }
.hero-machine-strip button[aria-selected="true"]::before { width: 100%; }
.hero-machine-strip button:hover,.hero-machine-strip button[aria-selected="true"] { background: linear-gradient(180deg,color-mix(in srgb,var(--hero-accent) 11%,transparent),transparent); }
.hero-machine-strip button span,.hero-machine-strip button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-machine-strip button span { color: #f0eee6; font: 8px var(--mono); letter-spacing: .09em; }
.hero-machine-strip button small { margin-top: 6px; color: #8f948a; font: 8px var(--body); }
.hero-baseline { grid-column: 1/-1; grid-row: 3; padding-block: 12px 15px; border-top: 0; color: #858b7d; font-size: 7px; letter-spacing: .09em; }
@keyframes hero-machine-float { 0%,100% { transform: perspective(1600px) rotateY(-12deg) rotateX(8deg) rotateZ(-2deg) translate3d(0,0,42px); } 50% { transform: perspective(1600px) rotateY(-10deg) rotateX(7deg) rotateZ(-1deg) translate3d(0,-10px,56px); } }
@keyframes relic-orbit { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(310px,.78fr) minmax(0,1.22fr); min-height: 660px; }
  .hero h1 { font-size: clamp(78px,11vw,115px); }
  .hero-scene { min-height: 520px; margin-right: -4vw; }
  .hero-device-caption { top: 5%; right: 3%; max-width: 64%; }
  .hero-device-caption span:first-child { font-size: 15px; }
}
@media (max-width: 680px) {
  .hero { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(355px,54svh) auto auto; gap: 0; min-height: 0; padding-top: 29px; }
  .hero-copy { grid-column: 1; grid-row: 1; padding: 0 0 5px; }
  .hero .eyebrow { font-size: 7px; }
  .hero h1 { margin: 20px 0 17px; font-size: clamp(73px,17vw,112px); line-height: .8; }
  .hero-description { max-width: 360px; font-size: 16px; }
  .hero-small { margin-top: 10px; font-size: 10px; }
  .hero-actions { flex-wrap: wrap; gap: 15px; margin-top: 18px; }
  .hero-actions .button { min-height: 43px; }
  .hero-proof { display: none; }
  .hero-scene { grid-column: 1; grid-row: 2; width: auto; min-height: 355px; height: 54svh; max-height: 500px; margin: 15px -10px 0; }
  .hero-plugin.hero-device { top: 12%; right: 4%; width: 88%; transform: perspective(1100px) rotateY(-9deg) rotateX(5deg) rotateZ(-2deg) translateZ(22px); }
  .hero-device-shadow { bottom: 13%; }
  .relic-index { top: 7%; left: 0; }
  .relic-index b { font-size: 29px; }
  .scene-topline { top: 1%; left: 16%; font-size: 6px; }
  .scene-coord { display: none; }
  .hero-device-caption { top: 3%; right: 2%; max-width: 70%; padding: 7px 8px; gap: 8px; }
  .hero-device-caption span:first-child { font-size: 13px; }
  .hero-device-caption span:last-child { max-width: 55%; text-align: right; font-size: 6px; }
  .scene-disclaimer { display: none; }
  .hero-machine-strip { grid-column: 1; grid-row: 3; grid-template-columns: repeat(7,minmax(75px,1fr)); overflow-x: auto; scrollbar-width: thin; }
  .hero-machine-strip button { padding: 12px 7px; }
  .hero-machine-strip button span { font-size: 6px; letter-spacing: .02em; }
  .hero-machine-strip button small { font-size: 7px; }
  .hero-baseline { grid-column: 1; grid-row: 4; gap: 12px; font-size: 5px; }
  .hero-baseline span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-plugin.hero-device,.hero-lightwell i { animation: none; }
}

/* Open the product worlds: keep the sound machines, lose the stacked frames. */
.catalog-section { overflow: hidden; }
.catalog-section::before { background: radial-gradient(ellipse at 82% 18%,#d5ff5309,transparent 40%); }
.product-grid { column-gap: clamp(28px,4vw,62px); row-gap: 60px; }
.product-card { transform: none !important; }
.product-art-button {
  overflow: hidden;
  aspect-ratio: 1.38;
  border: 0;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--product-color) 22%,transparent),transparent 67%);
  box-shadow: none;
  transition: filter .45s,background .45s;
}
.product-art-button::before { z-index: 0; inset: 13% 5% 9%; border-radius: 50%; background: radial-gradient(ellipse at center,color-mix(in srgb,var(--product-color) 15%,transparent),transparent 70%); }
.product-art-button::after { content: none; }
.product-art-button img {
  top: 7%;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: brightness(1.13) saturate(1.12) drop-shadow(0 28px 24px #0009);
  -webkit-mask-image: radial-gradient(ellipse 88% 90% at 50% 49%,#000 64%,#000c 80%,transparent 100%);
  mask-image: radial-gradient(ellipse 88% 90% at 50% 49%,#000 64%,#000c 80%,transparent 100%);
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) rotateZ(-2deg) translateY(0);
  transition: transform .55s cubic-bezier(.16,.75,.25,1),filter .55s;
}
.product-art-button:hover { border: 0; background: radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--product-color) 32%,transparent),transparent 69%); box-shadow: none; filter: brightness(1.08); transform: none; }
.product-art-button:hover img { filter: brightness(1.2) saturate(1.18) drop-shadow(0 38px 28px #000b); transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) rotateZ(-1deg) translateY(-7px); }
.product-card-title { margin-top: 4px; }
.product-card h3 { text-shadow: none; }
.product-tags { gap: 0; }
.product-tags span { padding: 0; border: 0; color: #858a80; }
.product-tags span + span::before { content: '/'; margin: 0 9px; color: var(--product-color); opacity: .8; }
.filter-tabs { gap: clamp(8px,1.6vw,22px); }
.filter-tabs button { position: relative; padding-inline: 4px; }
.filter-tabs button.active { background: transparent; color: #d5ff53; box-shadow: inset 0 -2px #d5ff53; }
.filter-tabs button:hover:not(.active) { background: transparent; color: #fff; }
.catalog-toolbar { border-top: 0; }

.hero-scene::before { background: radial-gradient(ellipse at 58% 52%,color-mix(in srgb,var(--hero-accent) 19%,transparent),transparent 58%); filter: blur(30px); }
.scene-grid { opacity: .09; mask-image: radial-gradient(ellipse at 55% 48%,#000 2%,transparent 70%); }
.hero-lightwell i { opacity: .52; box-shadow: 0 0 18px color-mix(in srgb,var(--hero-accent) 34%,transparent); }
.hero-lightwell i:nth-child(2) { opacity: .25; }
.hero-lightwell i:nth-child(3) { opacity: .12; }
.hero-plugin.hero-device { border-color: color-mix(in srgb,var(--hero-accent) 36%,#ffffff30); box-shadow: 0 38px 70px #000a,0 0 34px color-mix(in srgb,var(--hero-accent) 14%,transparent); }
.hero-machine-strip { gap: clamp(10px,2vw,26px); }
.hero-machine-strip button { padding-inline: 0; border-right: 0; }

.machine-console { gap: clamp(28px,5vw,76px); min-height: 0; border: 0; background: transparent; box-shadow: none; }
.machine-display { min-height: 460px; border-right: 0; background: radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--machine-accent) 12%,transparent),transparent 63%); }
.machine-display-meta,.machine-display-footer { padding-inline: 0; }
.machine-artwell { overflow: visible; }
.machine-artwell::before { width: 52%; border: 0; background: radial-gradient(ellipse at center,color-mix(in srgb,var(--machine-accent) 17%,transparent),transparent 69%); box-shadow: none; }
.machine-artwell::after { opacity: .33; }
.machine-artwell img { width: 81%; height: auto; border: 0; box-shadow: 0 34px 42px #0009,0 0 45px color-mix(in srgb,var(--machine-accent) 18%,transparent); }
.machine-controls { align-self: center; min-height: 420px; padding: clamp(22px,2.6vw,38px) 0; background: transparent; }
.machine-picker { gap: clamp(12px,2vw,28px); margin-top: 20px; border: 0; border-top: 1px solid #ffffff1c; border-bottom: 1px solid #ffffff1c; background: transparent; }
.machine-picker button { position: relative; border-right: 0; padding-inline: 3px; }
.machine-picker button[aria-selected="true"] { background: transparent; box-shadow: none; }
.machine-picker button[aria-selected="true"]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: ''; background: var(--machine-accent); box-shadow: 0 0 14px color-mix(in srgb,var(--machine-accent) 50%,transparent); }
.machine-picker button:hover:not([aria-selected="true"]) { background: transparent; }
.machine-effect-console { border: 0; border-block: 1px solid color-mix(in srgb,var(--machine-accent) 30%,#ffffff18); background: linear-gradient(90deg,color-mix(in srgb,var(--machine-accent) 7%,transparent),transparent 82%); padding-inline: 0; }
.bundle-builder { border: 0; border-top: 1px solid #ffffff2a; border-bottom: 1px solid #ffffff2a; padding-inline: 0; background: transparent; box-shadow: none; }
.bundle-option input { appearance: none; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #73776d; border-radius: 50%; background: transparent; cursor: pointer; }
.bundle-option input:checked { border-color: var(--product-color); background: var(--product-color); }
.bundle-option input:checked::after { width: 5px; height: 5px; border-radius: 50%; background: #10120f; content: ''; }
.bundle-option input:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }
.bundle-option-icon { border-radius: 50%; background: color-mix(in srgb,var(--product-color) 18%,#111411); color: var(--product-color); }
.agent-commerce-band { border: 0; border-block: 1px solid #d5ff5338; padding-inline: 0; background: linear-gradient(90deg,#d5ff530a,transparent 72%); box-shadow: none; backdrop-filter: none; }

@media (max-width: 900px) {
  .machine-console { gap: 18px; }
  .machine-controls { min-height: 0; padding-block: 12px 22px; }
}
@media (max-width: 680px) {
  .product-grid { row-gap: 38px; }
  .product-art-button { aspect-ratio: 1.48; }
  .machine-display { min-height: 360px; }
  .machine-artwell { overflow: hidden; }
  .machine-controls { padding-block: 6px 18px; }
  .machine-picker { gap: 20px; }
  .agent-commerce-band { gap: 22px; }
}

/* SIGNAL ALTAR: a chromatic, moving visual language for the collection. */
:root { --acid: #d5ff53; --plasma: #bd43ff; --laser: #47ffe1; --flare: #ff735d; }
.hero h1 span {
  color: transparent;
  background: linear-gradient(110deg,#e5ff78 2%,#cbff45 28%,#88ffd9 54%,#c358ff 76%,#ff735d 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 40px #bcff5330;
  animation: spectral-type 9s ease-in-out infinite alternate;
}
.hero-scene { --hero-accent: #ff735d; overflow: visible; }
.hero-scene::before {
  inset: -15% -7% -6% -3%;
  background:
    radial-gradient(ellipse at 48% 45%,color-mix(in srgb,var(--hero-accent) 34%,transparent),transparent 35%),
    radial-gradient(ellipse at 70% 35%,#ad39ff65,transparent 35%),
    radial-gradient(ellipse at 56% 75%,#38ffe14d,transparent 38%),
    radial-gradient(ellipse at 34% 60%,#d5ff532b,transparent 34%);
  filter: blur(38px) saturate(155%);
  opacity: .9;
  animation: altar-bloom 14s ease-in-out infinite alternate;
}
.hero-scene::after {
  position: absolute;
  z-index: 1;
  inset: 3% 0 8%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 50% 52%,transparent 0 42px,#d8ff4778 43px,#bd43ff6b 44px,transparent 46px 77px);
  opacity: .84;
  filter: drop-shadow(0 0 12px #be45ff90) drop-shadow(0 0 28px #42ffe14f);
  transform: rotateX(68deg) rotateZ(-16deg) scale(1.12);
  animation: signal-ripple 20s linear infinite;
  pointer-events: none;
}
.hero-relic { z-index: 1; opacity: 1; filter: saturate(2.1) contrast(1.3) hue-rotate(var(--hero-hue,0deg)); }
.hero-lightwell { z-index: 2; inset: 4% -3% 0 2%; }
.hero-lightwell i {
  width: 80%;
  height: 39%;
  border-width: 2px;
  border-color: color-mix(in srgb,var(--hero-accent) 78%,#f5f2df);
  box-shadow: 0 0 34px color-mix(in srgb,var(--hero-accent) 76%,transparent),0 0 100px color-mix(in srgb,var(--plasma) 50%,transparent),inset 0 0 38px color-mix(in srgb,var(--laser) 24%,transparent);
  filter: drop-shadow(0 0 10px color-mix(in srgb,var(--hero-accent) 60%,transparent));
}
.hero-lightwell i:nth-child(2) { width: 95%; height: 50%; border-color: #b945ff70; }
.hero-lightwell i:nth-child(3) { width: 108%; height: 58%; border-color: #48ffe14d; }
.hero-plugin.hero-device {
  border-color: color-mix(in srgb,var(--hero-accent) 72%,white);
  box-shadow: 0 60px 100px #000d,0 0 42px color-mix(in srgb,var(--hero-accent) 27%,transparent),0 0 125px color-mix(in srgb,var(--plasma) 19%,transparent),inset 0 1px #ffffff55;
  filter: brightness(1.18) saturate(1.25) contrast(1.04);
  animation: hero-machine-float 8s ease-in-out infinite, hero-machine-roll 17s ease-in-out infinite;
}
.hero-device-shadow { height: 21%; opacity: .85; filter: blur(70px); }
.hero-device-caption span:first-child { text-shadow: 0 0 24px color-mix(in srgb,var(--hero-accent) 78%,transparent),0 0 55px color-mix(in srgb,var(--plasma) 42%,transparent); }
.hero-machine-strip { position: relative; z-index: 5; }
.hero-machine-strip button[aria-selected="true"] span { color: var(--hero-accent); text-shadow: 0 0 14px color-mix(in srgb,var(--hero-accent) 48%,transparent); }
.genre-strip { position: relative; isolation: isolate; }
.genre-strip::after {
  position: absolute;
  z-index: -1;
  top: -50%;
  bottom: -50%;
  left: -34%;
  width: 24%;
  content: '';
  background: linear-gradient(90deg,transparent,#ffffffa8,transparent);
  filter: blur(10px);
  transform: skewX(-20deg);
  animation: genre-glint 8s ease-in-out infinite;
}
.genre-strip i { color: #a044d5; text-shadow: 0 0 18px #9643ec80; animation: sigil-turn 12s linear infinite; }
.product-card { transform: none; transition: transform .55s cubic-bezier(.16,.75,.25,1),filter .45s; }
.product-card.is-tilting { transform: perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateZ(10px); }
.product-card:hover { filter: drop-shadow(0 24px 44px color-mix(in srgb,var(--product-color) 13%,transparent)); }
.product-art-button::before {
  background: radial-gradient(ellipse at 50% 54%,color-mix(in srgb,var(--product-color) 28%,transparent),transparent 72%);
  transform: scale(.9);
  transition: transform .75s cubic-bezier(.16,.75,.25,1),opacity .5s;
}
.product-art-button::after {
  position: absolute;
  z-index: 0;
  top: 13%;
  left: 15%;
  width: 70%;
  height: 68%;
  content: '';
  border: 1px solid color-mix(in srgb,var(--product-color) 65%,transparent);
  border-radius: 50%;
  opacity: .18;
  transform: rotateX(68deg) rotateZ(-18deg) scale(.82);
  transition: opacity .6s,transform .7s cubic-bezier(.16,.75,.25,1);
  box-shadow: 0 0 30px color-mix(in srgb,var(--product-color) 35%,transparent);
  pointer-events: none;
}
.product-art-button:hover::before { transform: scale(1.16); }
.product-art-button:hover::after { opacity: .8; transform: rotateX(65deg) rotateZ(12deg) scale(1.05); }
.product-art-button img { filter: brightness(1.15) saturate(1.16) drop-shadow(0 30px 26px #000a); }
.product-art-button:hover img { filter: brightness(1.26) saturate(1.3) drop-shadow(0 42px 34px #000c) drop-shadow(0 0 24px color-mix(in srgb,var(--product-color) 40%,transparent)); }
.product-card h3 { transition: color .3s,text-shadow .3s; }
.product-card:hover h3 { color: var(--product-color); text-shadow: 0 0 24px color-mix(in srgb,var(--product-color) 28%,transparent); }
.machine-artwell::before { width: 62%; background: radial-gradient(ellipse at 48% 50%,color-mix(in srgb,var(--machine-accent) 28%,transparent),transparent 70%); filter: blur(9px); }
.machine-orbit { border-color: color-mix(in srgb,var(--machine-accent) 68%,#e0d9ff); box-shadow: 0 0 26px color-mix(in srgb,var(--machine-accent) 45%,transparent); }
.machine-artwell img { filter: saturate(1.18) contrast(1.05) drop-shadow(0 35px 34px #000c); }
.studio-art {
  background: radial-gradient(ellipse at 40% 46%,#9f3eff66,transparent 35%),radial-gradient(ellipse at 68% 57%,#2fffe563,transparent 32%),radial-gradient(ellipse at 50% 50%,#30341f 0%,#11130f 74%);
}
.studio-art::before { filter: hue-rotate(-30deg) saturate(1.4); }
.studio-orbit { border-color: #e5dcff; box-shadow: 0 0 0 8px #b84cff55,0 0 0 9px #10120f,0 0 0 23px #48ffe155,0 0 0 24px #10120f,0 0 0 42px #d5ff5335; }
.bundle-section { background: radial-gradient(ellipse at 76% 45%,#a23bff20,transparent 42%),radial-gradient(ellipse at 5% 80%,#35ffe119,transparent 35%); }
.bundle-decoration { filter: drop-shadow(0 0 16px #d5ff5388); }
.site-header { border-image: linear-gradient(90deg,#ffffff10,#b54cff72,#48ffe133,#ffffff10) 1; }

@keyframes spectral-type { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes altar-bloom { 0% { transform: translate3d(-2%,1%,0) scale(.94) rotate(-2deg); } 100% { transform: translate3d(2%,-2%,0) scale(1.08) rotate(2deg); } }
@keyframes signal-ripple { to { transform: rotateX(68deg) rotateZ(344deg) scale(1.12); } }
@keyframes hero-machine-roll { 0%,100% { filter: brightness(1.18) saturate(1.25) contrast(1.04); } 50% { filter: brightness(1.26) saturate(1.4) contrast(1.05); } }
@keyframes genre-glint { 0%,22% { left: -34%; opacity: 0; } 30% { opacity: .8; } 65%,100% { left: 112%; opacity: 0; } }
@keyframes sigil-turn { to { rotate: 360deg; } }
@media (max-width: 680px) {
  .hero-scene::after { opacity: .34; }
  .hero-lightwell { inset-inline: -14%; }
  .hero-lightwell i { width: 89%; height: 43%; }
  .hero-lightwell i:nth-child(2) { width: 105%; height: 54%; }
  .hero-lightwell i:nth-child(3) { width: 120%; height: 62%; }
  .hero-device-caption { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 span,.hero-scene::before,.hero-scene::after,.hero-plugin.hero-device,.hero-lightwell i,.genre-strip::after,.genre-strip i { animation: none !important; }
}

/* AFTERIMAGE: make the whole storefront feel like one instrument, not a stack of panels. */
body { background-color: #090a0c; }
.hero { position: relative; isolation: isolate; }
.hero::before {
  position: absolute;
  z-index: -3;
  inset: -10% -7% -3%;
  content: '';
  pointer-events: none;
  background:
    radial-gradient(ellipse at 77% 43%,#7929ff1c,transparent 34%),
    radial-gradient(ellipse at 63% 65%,#1affd413,transparent 31%),
    radial-gradient(ellipse at 8% 73%,#d5ff530a,transparent 32%);
  filter: blur(24px);
}
.hero-copy { position: relative; }
.hero-copy::before {
  position: absolute;
  z-index: -1;
  top: 8%;
  left: -14%;
  width: 90%;
  height: 72%;
  content: '';
  background: radial-gradient(ellipse at center,#11120c8c,transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}
.hero h1 { text-shadow: 0 0 72px #f0f0d00d; }
.hero h1 span {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(106deg,#d5ff53 3%,#6affc6 29%,#edfbff 47%,#b84cff 67%,#ff735d 87%,#d5ff53 100%);
  background-size: 260% 100%;
  text-shadow: 0 0 54px #b94cff30,0 0 90px #38ffe119;
}
.hero-scene { overflow: visible; }
.hero-scene::before {
  inset: -20% -12% -15% -10%;
  background:
    radial-gradient(ellipse at 47% 45%,color-mix(in srgb,var(--hero-accent) 42%,transparent),transparent 32%),
    radial-gradient(ellipse at 72% 30%,#ac3aff68,transparent 32%),
    radial-gradient(ellipse at 54% 72%,#38ffe15c,transparent 35%),
    radial-gradient(ellipse at 27% 62%,#d5ff5330,transparent 30%);
  filter: blur(55px) saturate(180%);
  opacity: .78;
}
.hero-scene::after {
  inset: 2% -4% 5%;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 51% 50%,transparent 0 34px,#e5ff6d91 35px,#c458ff86 36px,transparent 38px 70px);
  opacity: .72;
  filter: drop-shadow(0 0 17px #bd43ffb0) drop-shadow(0 0 40px #42ffe16e);
}
.hero-relic {
  z-index: 1;
  opacity: .84;
  mix-blend-mode: screen;
  filter: saturate(2.4) contrast(1.38) hue-rotate(var(--hero-hue,0deg));
  -webkit-mask-image: radial-gradient(ellipse 67% 58% at 53% 49%,#000 45%,#000b 68%,transparent 100%);
  mask-image: radial-gradient(ellipse 67% 58% at 53% 49%,#000 45%,#000b 68%,transparent 100%);
}
.hero-lightwell i { opacity: .78; }
.hero-lightwell i:nth-child(2) { opacity: .42; }
.hero-lightwell i:nth-child(3) { opacity: .24; }
.hero-plugin.hero-device {
  width: min(84%,820px);
  top: 18%;
  border-radius: 9px;
  border-color: transparent;
  box-shadow: 0 62px 110px #000e,0 0 56px color-mix(in srgb,var(--hero-accent) 30%,transparent),0 0 160px color-mix(in srgb,var(--plasma) 24%,transparent);
}
.hero-device-caption {
  top: 5%;
  right: 6%;
  max-width: 48%;
  padding: 0;
  justify-content: flex-end;
  text-align: right;
}
.relic-index { top: 7%; left: 1%; }
.hero-machine-strip { margin-top: 4px; }
.hero-machine-strip button { transition: transform .35s,color .3s,background .35s; }
.hero-machine-strip button:hover { transform: translateY(-4px); }
.hero-baseline { border-top: 1px solid #ffffff1f; }

.genre-strip {
  min-height: 82px;
  background: linear-gradient(105deg,#cfff4f 0%,#d5ff53 32%,#aaffdd 57%,#d5ff53 78%,#ffac94 100%);
  background-size: 240% 100%;
  animation: genre-spectrum 14s ease-in-out infinite alternate;
}
.genre-strip::after { z-index: 0; }
.genre-strip span,.genre-strip i { position: relative; z-index: 1; }
.genre-strip i { color: #7740a9; text-shadow: 0 0 18px #ffffffa0; }

.catalog-section { position: relative; padding-top: clamp(75px,9vw,138px); padding-bottom: clamp(70px,8vw,120px); }
.catalog-section::after {
  position: absolute;
  top: 0;
  right: -9vw;
  width: 40vw;
  height: 55vw;
  max-height: 750px;
  content: '';
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%,#bc43ff14,transparent 68%);
}
.catalog-heading h2 { font-size: clamp(58px,8.4vw,124px); line-height: .88; letter-spacing: -.055em; }
.catalog-heading h2 span { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(100deg,#7d8277,#25271f); background-clip: text; -webkit-background-clip: text; }
.catalog-toolbar { position: relative; z-index: 1; }
.product-grid { position: relative; z-index: 1; row-gap: clamp(54px,7vw,100px); }
.product-art-button { overflow: visible; }
.product-art-button::before { inset: 4% -3% -5%; background: radial-gradient(ellipse at 50% 56%,color-mix(in srgb,var(--product-color) 42%,transparent),transparent 69%); }
.product-art-button::after { top: 12%; left: 12%; width: 76%; height: 76%; border-width: 1px; opacity: .3; }
.product-art-button img { -webkit-mask-image: none; mask-image: none; filter: brightness(1.13) saturate(1.16) drop-shadow(0 30px 28px #000b); }
.product-art-button:hover img { filter: brightness(1.28) saturate(1.4) drop-shadow(0 44px 34px #000c) drop-shadow(0 0 34px color-mix(in srgb,var(--product-color) 48%,transparent)); }
.product-card-title { margin-top: 12px; }
.product-card h3 { font-size: clamp(33px,3.2vw,48px); letter-spacing: -.04em; }
.product-role { color: var(--product-color); letter-spacing: .08em; }
.product-card-bottom { border-color: color-mix(in srgb,var(--product-color) 32%,transparent); }

.machine-room {
  background:
    radial-gradient(ellipse at 78% 34%,#a43fff1c,transparent 37%),
    radial-gradient(ellipse at 14% 70%,#3dffe41a,transparent 36%),
    linear-gradient(160deg,#10110f,#0c0d0e 54%,#10100d);
}
.machine-room::after {
  position: absolute;
  inset: 0;
  content: '';
  pointer-events: none;
  opacity: .15;
  background: repeating-linear-gradient(115deg,transparent 0 90px,#ffffff16 91px,transparent 92px 184px);
  mask-image: linear-gradient(90deg,transparent,#000 45%,#000 80%,transparent);
}
.machine-room-shell { z-index: 2; }
.machine-room-heading h2 { font-size: clamp(62px,8.7vw,132px); letter-spacing: -.05em; }
.machine-room-heading h2 span { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(95deg,#d5ff53,#64ffe0 52%,#c15aff); background-clip: text; -webkit-background-clip: text; }
.machine-display { position: relative; isolation: isolate; }
.machine-display::before {
  position: absolute;
  z-index: -1;
  inset: 2% -4%;
  content: '';
  background: radial-gradient(ellipse at center,color-mix(in srgb,var(--machine-accent) 16%,transparent),transparent 67%);
  filter: blur(30px);
}
.machine-artwell::before { width: 77%; height: 62%; box-shadow: 0 0 80px color-mix(in srgb,var(--machine-accent) 34%,transparent); }
.machine-artwell img { width: 84%; transform: perspective(1200px) rotateY(-8deg) rotateX(5deg) translateZ(28px); }
.machine-console:hover .machine-artwell img { filter: saturate(1.34) contrast(1.08) drop-shadow(0 44px 42px #000d) drop-shadow(0 0 28px color-mix(in srgb,var(--machine-accent) 28%,transparent)); }
.machine-controls h3 { font-size: clamp(58px,7vw,92px); letter-spacing: -.06em; }
.machine-picker button[aria-selected="true"] { box-shadow: inset 0 -2px var(--machine-accent); }

.bundle-section { background: radial-gradient(ellipse at 76% 45%,#a23bff28,transparent 42%),radial-gradient(ellipse at 5% 80%,#35ffe126,transparent 35%),linear-gradient(120deg,#0e100c,#121019 70%,#0e100c); }
.bundle-section h2,.studio-section h2 { letter-spacing: -.05em; }
.site-footer { position: relative; overflow: hidden; }
.site-footer::before { position: absolute; inset: 0 0 auto; height: 1px; content: ''; background: linear-gradient(90deg,transparent,#d5ff53,#b84cff,#47ffe1,transparent); box-shadow: 0 0 22px #bd43ff80; }

@keyframes genre-spectrum { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (max-width: 680px) {
  .hero-scene { overflow: visible; }
  .hero-scene::after { inset: 5% -15%; opacity: .42; }
  .hero-relic { opacity: .55; }
  .hero-plugin.hero-device { width: min(91%,790px); right: 3%; }
  .hero-copy::before { left: -6%; width: 110%; }
  .genre-strip { min-height: 65px; }
  .catalog-heading h2 { font-size: clamp(54px,14vw,82px); }
  .machine-room-heading h2 { font-size: clamp(55px,13vw,82px); }
}
@media (prefers-reduced-motion: reduce) {
  .genre-strip { animation: none; }
}

/* Let the light field continue behind the entire storefront. */
html { background: #090a0c; }
body {
  background:
    radial-gradient(ellipse 88vw 74vh at 76vw 3vh,#6526a02b,transparent 68%),
    radial-gradient(ellipse 78vw 80vh at 83vw 70vh,#a33dff20,transparent 69%),
    radial-gradient(ellipse 78vw 72vh at 19vw 150vh,#37ffe416,transparent 69%),
    radial-gradient(ellipse 90vw 84vh at 79vw 235vh,#d5ff5314,transparent 72%),
    radial-gradient(ellipse 78vw 78vh at 18vw 335vh,#b84cff16,transparent 70%),
    radial-gradient(ellipse 92vw 82vh at 78vw 445vh,#47ffe115,transparent 70%),
    linear-gradient(180deg,#090a0c 0%,#10100f 44%,#090a0c 100%);
  background-attachment: fixed;
}
.machine-room {
  background:
    radial-gradient(ellipse at 78% 34%,#a43fff20,transparent 42%),
    radial-gradient(ellipse at 14% 70%,#3dffe41b,transparent 40%),
    linear-gradient(160deg,#10110f72,#0c0d0e62 54%,#10100d72);
}
.bundle-section {
  background:
    radial-gradient(ellipse at 76% 45%,#a23bff2b,transparent 45%),
    radial-gradient(ellipse at 5% 80%,#35ffe128,transparent 38%),
    linear-gradient(120deg,#0e100c58,#12101960 70%,#0e100c58);
}
.studio-section.paper {
  background: linear-gradient(110deg,#0d100d70,#171b1468 48%,#10120f70);
}
.agent-section {
  background:
    radial-gradient(ellipse at 80% 42%,#a43fff28,transparent 42%),
    linear-gradient(130deg,#0c0e0d68,#11130f70 65%,#15140f68);
}

/* Fade section seams into the ambient field rather than drawing hard rules. */
.hero { isolation: isolate; overflow: visible; }
.hero::after {
  position: absolute;
  z-index: -1;
  inset: auto calc(var(--gutter) * -1) -1px;
  height: clamp(100px,15vw,205px);
  content: '';
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 20%,#a43fff16,transparent 58%),
    linear-gradient(180deg,transparent 0%,#090a0c35 72%,#090a0c62 100%);
}
.hero-machine-strip {
  border: 0;
  background:
    linear-gradient(90deg,transparent 0%,#ffffff20 13%,#ffffff20 78%,transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg,transparent 0%,#ffffff18 13%,#b84cff38 54%,#47ffe121 83%,transparent 100%) bottom / 100% 1px no-repeat;
}
.hero-baseline { border: 0; }
.genre-strip {
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-image: linear-gradient(180deg,transparent 0%,#000 15%,#000 85%,transparent 100%);
  box-shadow: 0 0 90px #b5ef4920;
}
.catalog-section::before {
  background:
    linear-gradient(90deg,transparent 0%,#ffffff18 14%,#b84cff36 52%,#47ffe121 84%,transparent 100%) bottom / 100% 1px no-repeat,
    radial-gradient(ellipse at 82% 18%,#d5ff5309,transparent 40%);
}
.studio-section.paper { border-block: 0; }
.studio-section::before,.studio-section::after {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 1px;
  content: '';
  pointer-events: none;
  background: linear-gradient(90deg,transparent 0%,#ffffff1c 16%,#b84cff45 53%,#47ffe12b 80%,transparent 100%);
}
.studio-section::before { top: 0; }
.studio-section::after { bottom: 0; opacity: .65; }
.machine-picker {
  border: 0;
  background:
    linear-gradient(90deg,transparent,#ffffff20 15%,#b84cff38 55%,#47ffe11c 85%,transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg,transparent,#ffffff16 15%,#b84cff28 55%,#47ffe116 85%,transparent) bottom / 100% 1px no-repeat;
}
.bundle-builder,.agent-commerce-band { border: 0; }
.bundle-builder {
  background:
    linear-gradient(90deg,transparent,#ffffff20 15%,#b84cff35 54%,#47ffe11c 85%,transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg,transparent,#ffffff18 15%,#b84cff28 54%,#47ffe116 85%,transparent) bottom / 100% 1px no-repeat;
}
.agent-commerce-band {
  background:
    linear-gradient(90deg,transparent,#d5ff5328 18%,#b84cff36 55%,#47ffe11a 85%,transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg,transparent,#d5ff5320 18%,#b84cff2b 55%,#47ffe114 85%,transparent) bottom / 100% 1px no-repeat;
}
.catalog-toolbar {
  border: 0;
  background: linear-gradient(90deg,transparent 0%,#ffffff14 15%,#b84cff2d 53%,#47ffe119 84%,transparent 100%) bottom / 100% 1px no-repeat;
}
.product-card-bottom {
  border: 0;
  background: linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--product-color) 48%,transparent) 16%,color-mix(in srgb,var(--product-color) 20%,transparent) 84%,transparent 100%) top / 100% 1px no-repeat;
}
.footer-bottom {
  border: 0;
  background: linear-gradient(90deg,transparent,#ffffff16 16%,#b84cff2a 54%,#47ffe117 84%,transparent) top / 100% 1px no-repeat;
}
.genre-strip {
  color: #d5ff76;
  background:
    linear-gradient(90deg,transparent 0%,#ffffff14 15%,#bd43ff42 48%,#47ffe12b 78%,transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg,transparent 0%,#d5ff533d 18%,#bd43ff32 52%,#47ffe122 82%,transparent 100%) bottom / 100% 1px no-repeat,
    radial-gradient(ellipse at 50% 50%,#c7ff5308,transparent 68%);
  animation: none;
  box-shadow: none;
}
.genre-strip i { color: #bf5cff; text-shadow: 0 0 18px #bd43ff84,0 0 38px #47ffe13b; }

/* Remove hairline section rules; let the color field do the separating. */
.site-header {
  border: 0;
  border-image: none;
  box-shadow: none;
  background: linear-gradient(180deg,#0b0d0bf2 0%,#0b0d0bd9 48%,#0b0d0b75 78%,transparent 100%);
  backdrop-filter: blur(14px) saturate(135%);
}
.hero-machine-strip { border: 0; background: none; }
.genre-strip {
  background: radial-gradient(ellipse at 50% 50%,#c7ff5310,transparent 68%);
  -webkit-mask-image: none;
  mask-image: none;
}
.catalog-toolbar,.product-card-bottom,.footer-bottom {
  background: none;
  border-color: transparent;
}
.studio-section::before,.studio-section::after { content: none; }
.machine-picker,.bundle-builder,.agent-commerce-band { background: none; }
.machine-picker { border-color: transparent; }
.studio-section.paper { border: 0; }
.catalog-section::before {
  background:
    radial-gradient(ellipse at 82% 18%,#d5ff5309,transparent 40%),
    linear-gradient(180deg,#11141170 0%,transparent 30%,transparent 76%,#14101a4d 100%);
}
.catalog-section::after { opacity: .3; }
@media (max-width: 680px) {
  .hero::after { height: 130px; }
  .hero-machine-strip { background-size: 100% 1px,100% 1px; }
}

/* Replace the acid-green takeover with ultraviolet, ice and coral as the lead palette. */
:root {
  --orange: #c378ff;
  --orange-hover: #ddb0ff;
  --electric: #c378ff;
  --acid: #c378ff;
}
.announcement {
  background: linear-gradient(100deg,#100d15 0%,#1b1026 47%,#0b171a 100%);
  color: #e6dff0;
  box-shadow: none;
}
.announcement-dot { background: #61e7ed; box-shadow: 0 0 12px #61e7edb0; }
.announcement a { color: #d3c1ff; text-decoration-color: #bd86ff80; }
body::before { background: linear-gradient(90deg,#c378ff,#67e8f4,#ff806b); box-shadow: 0 0 14px #c378ff70; }
.hero h1 span {
  background-image: linear-gradient(106deg,#d8bcff 2%,#bd83ff 25%,#f4efff 43%,#6fe8f1 65%,#ff8873 84%,#d8bcff 100%);
  text-shadow: 0 0 54px #bd75ff35,0 0 90px #49e8ed20;
}
.hero-actions .button-orange {
  color: #110d17;
  background: linear-gradient(110deg,#d7a2ff 0%,#b66dff 48%,#68e8f1 100%);
  box-shadow: 0 0 36px #b84cff40,0 0 72px #47ffe11b;
}
.hero-actions .button-orange:hover { background: linear-gradient(110deg,#e7c5ff,#c38aff 48%,#9af4f3); }
.hero-actions .button { box-shadow: 0 0 32px #b84cff27; }
.genre-strip { color: #ded4f2; }
.genre-strip i { color: #64e8ed; text-shadow: 0 0 18px #47ffe17a,0 0 38px #bd43ff58; }
.filter-tabs button.active { color: #d5a4ff; box-shadow: inset 0 -2px #c378ff; }
.machine-room-heading h2 span {
  background-image: linear-gradient(95deg,#d3a3ff,#68e8ef 52%,#ff8873);
}
.studio-art::before {
  background: radial-gradient(circle at 33% 29%,#ffffff 0,#e7dcff 6%,#b57bff 22%,#633588 54%,#111015 78%);
  box-shadow: 0 0 48px #d4bdffb0,0 0 140px #a94dff80,inset -18px -22px 38px #1118;
}
.studio-orbit {
  border-color: #e0ccff;
  box-shadow: 0 0 0 8px #b84cff65,0 0 0 9px #10120f,0 0 0 18px #47ffe14a,0 0 0 19px #10120f,0 0 0 31px #ff806b37,0 0 0 32px #10120f,0 0 0 44px #b84cff28;
}
.bundle-decoration { color: #c378ff; filter: drop-shadow(0 0 16px #b84cff88); }
.closing {
  color: #110d17;
  background: linear-gradient(105deg,#d5a2ff 0%,#9d70ff 48%,#68e8f1 100%);
  box-shadow: 0 0 85px #aa64ff35;
}
.closing a { border-color: #24152e; }
.brand svg {
  color: #d2a5ff;
  filter: drop-shadow(0 0 8px #bd75ff82) drop-shadow(0 0 18px #47ffe137);
  transition: color .3s,filter .3s,transform .3s;
}
.brand:hover svg {
  color: #78eaf0;
  filter: drop-shadow(0 0 10px #47ffe1a3) drop-shadow(0 0 21px #bd75ff58);
  transform: rotate(-5deg) scale(1.04);
}
.hero-copy::before { content: none; }
html,body { overflow-x: clip; }
.hero::before {
  inset: -20% -12% -14%;
  background:
    linear-gradient(90deg,transparent 0%,#9144ff08 18%,#9144ff18 43%,#6de9f10e 64%,transparent 88%),
    radial-gradient(ellipse 76% 72% at 72% 38%,#8d3cff31,transparent 70%),
    radial-gradient(ellipse 72% 76% at 52% 68%,#41dce51d,transparent 72%),
    radial-gradient(ellipse 68% 66% at 34% 50%,#a24bff15,transparent 74%),
    radial-gradient(ellipse at 6% 72%,#c378ff0c,transparent 40%);
  filter: blur(58px) saturate(130%);
  opacity: .94;
}
.site-header { background: transparent; backdrop-filter: none; }
.hero::after {
  bottom: -115px;
  height: clamp(260px,24vw,360px);
  background:
    radial-gradient(ellipse 76% 70% at 71% 35%,#8d3cff20,transparent 72%),
    radial-gradient(ellipse 70% 72% at 48% 54%,#41dce512,transparent 72%),
    linear-gradient(180deg,transparent 0%,#090a0c20 45%,transparent 100%);
}

/* Productized machine room + MCP studio */
.machine-picker-intro { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:34px; color:#d9d1e4; font:9px var(--mono); letter-spacing:.1em; }
.machine-picker-intro small { color:#898491; font:11px var(--body); letter-spacing:0; }
.machine-picker { gap:clamp(12px,2.4vw,36px); margin-top:12px; padding:0 0 10px; border:0; border-bottom:1px solid #ffffff1b; }
.machine-picker button { min-height:76px; padding:11px 2px 13px; gap:8px; }
.machine-picker button span { font-size:10px; letter-spacing:.1em; }
.machine-picker button small { font-size:11px; }
.machine-picker button[aria-selected="true"]::after { height:3px; }
.machine-console { margin-top:22px; border-radius:3px; }
.machine-display-meta,.machine-display-footer { letter-spacing:.1em; }
.machine-controls { padding:clamp(22px,3vw,42px); }
.machine-role { max-width:25ch; font-size:clamp(15px,1.5vw,20px); line-height:1.2; }
.machine-description { max-width:38ch; font-size:14px; line-height:1.55; }
.machine-gesture { margin-top:24px; padding-top:17px; border-top:1px solid #ffffff18; }
.machine-gesture strong { display:block; margin-top:8px; font-size:12px; }
.machine-gesture p { max-width:36ch; font-size:12px; line-height:1.5; }
.machine-energy { margin-top:23px; }
.machine-energy input { accent-color:var(--machine-accent); }
.machine-keyboard { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; margin-top:18px; }
.machine-keyboard[hidden] { display:none; }
.machine-keyboard button { min-height:46px; border:1px solid #ffffff28; border-bottom-width:3px; border-radius:0 0 4px 4px; background:linear-gradient(180deg,#ebe8e8,#bcb9c2); color:#18151d; font:11px var(--mono); transition:transform .15s,background .15s; }
.machine-keyboard button:hover,.machine-keyboard button:active { transform:translateY(2px); background:#d1a6ff; }
.machine-actions { justify-content:flex-start; gap:22px; margin-top:15px; }
.machine-audition { min-height:45px; padding:0 17px; font-size:9px; }
.machine-room-note { max-width:90ch; margin:15px 0 0; color:#85818f; font-size:8px; line-height:1.6; letter-spacing:.09em; }
.agent-tabs { display:flex; gap:clamp(16px,3vw,42px); margin-top:44px; border-bottom:1px solid #ffffff1c; }
.agent-tabs [role="tab"] { position:relative; padding:15px 0 17px; border:0; background:transparent; color:#9b95a3; font:10px var(--mono); letter-spacing:.08em; cursor:pointer; }
.agent-tabs [aria-selected="true"] { color:#e5d7f7; }
.agent-tabs [aria-selected="true"]::after { position:absolute; right:0; bottom:-1px; left:0; height:2px; background:linear-gradient(90deg,#c378ff,#68e8f1); content:""; }
.agent-tab-panel { padding:clamp(28px,5vw,58px) 0 18px; }
.agent-tab-panel[hidden] { display:none; }
.agent-layout { display:grid; grid-template-columns:minmax(250px,.85fr) minmax(0,1.3fr); gap:clamp(28px,7vw,100px); }
.agent-copy h3 { margin:12px 0; font-size:clamp(31px,4vw,54px); line-height:.98; }
.agent-copy > p:not(.agent-kicker) { max-width:40ch; color:#aaa5b0; font-size:14px; line-height:1.6; }
.agent-prompt-example { margin-top:30px; padding:18px; border-left:2px solid #bd82ff; background:linear-gradient(90deg,#bd82ff10,transparent); }
.agent-prompt-example > span,.mcp-connect-grid article > span,.agent-tool-stack article > span,.agent-paid-grid article > span { color:#89e8ef; font:8px var(--mono); letter-spacing:.1em; }
.agent-prompt-example p { max-width:50ch; color:#e6dfea; font-size:13px; line-height:1.6; }
.agent-prompt-example button,.agent-build-button { padding:9px 0; border:0; border-bottom:1px solid #8d7b9d; background:none; color:#e1cafc; font:9px var(--mono); cursor:pointer; }
.agent-tool-stack { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 34px; }
.agent-tool-stack article { position:relative; padding:0 8px 18px 0; border-bottom:1px solid #ffffff18; }
.agent-tool-stack h3,.mcp-connect-grid h3,.agent-paid-grid h3 { margin:10px 0 7px; font-size:17px; }
.agent-tool-stack p,.mcp-connect-grid p,.agent-paid-grid p { color:#aaa5b0; font-size:12px; line-height:1.55; }
.agent-tool-stack b { color:#d5b4ff; font:8px var(--mono); letter-spacing:.12em; }
.agent-foot { display:flex; justify-content:space-between; gap:20px; margin-top:32px; color:#807987; font:8px var(--mono); letter-spacing:.08em; }
.agent-foot a,.agent-tab-panel .text-link { color:#d1b0fb; font:9px var(--mono); }
.mcp-connect-grid,.agent-paid-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,4vw,56px); }
.mcp-connect-grid article,.agent-paid-grid article { padding-top:14px; border-top:1px solid #ffffff25; }
.mcp-connect-grid h3,.agent-paid-grid h3 { font-size:clamp(19px,2vw,25px); line-height:1.15; }
.agent-build-command { display:block; overflow-wrap:anywhere; margin-top:17px; padding:12px; background:#0d0e11; color:#bfeef0; font:10px/1.5 var(--mono); }
.mcp-prototype-note,.agent-commerce-status { margin-top:35px; padding-top:18px; border-top:1px solid #ffffff18; color:#9a94a1; font:9px/1.7 var(--mono); letter-spacing:.06em; }
.agent-commerce-status strong { color:#e5d7f7; }
.agent-paid-grid { margin-bottom:27px; }
.agent-section { position:relative; }
.agent-section::before { position:absolute; z-index:-1; inset:-10% -8% 0; background:radial-gradient(ellipse at 23% 8%,#9236bc17,transparent 43%),radial-gradient(ellipse at 85% 61%,#30aeb317,transparent 45%); content:""; filter:blur(28px); pointer-events:none; }
@media(max-width:850px) {
  .agent-layout { grid-template-columns:1fr; gap:36px; }
  .machine-picker { grid-template-columns:repeat(7,minmax(112px,1fr)); overflow-x:auto; }
}
@media(max-width:650px) {
  .machine-picker-intro { align-items:flex-start; flex-direction:column; gap:6px; }
  .machine-picker { grid-template-columns:repeat(7,120px); gap:18px; }
  .machine-console { grid-template-columns:1fr; }
  .machine-keyboard button { min-height:42px; }
  .agent-tabs { gap:18px; overflow-x:auto; }
  .agent-tabs [role="tab"] { flex:none; font-size:8px; }
  .agent-tool-stack,.mcp-connect-grid,.agent-paid-grid { grid-template-columns:1fr; }
  .agent-foot { align-items:flex-start; flex-direction:column; }
}

/* The header and hero share one continuous light field; selecting any product updates both displays. */
.announcement {
  background: transparent;
  box-shadow: none;
}
.site-header {
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.hero-scene::before { inset: -28% -10% -10% -6%; }
.hero-plugin.hero-device {
  border: 0 !important;
  box-shadow: 0 54px 105px #000b,0 0 64px color-mix(in srgb,var(--hero-accent) 20%,transparent),0 0 145px color-mix(in srgb,var(--plasma) 18%,transparent);
  cursor: pointer;
}
.hero-plugin.hero-device:focus-visible { outline: 2px solid var(--hero-accent); outline-offset: 8px; }
.hero-scene.is-changing .hero-device { animation: hero-machine-switch .52s cubic-bezier(.2,.7,.2,1) both; }

/* Product art is captured from the matching native machine UI. Keep its real
   colors legible while retaining the site's existing depth and motion. */
.product-art-button img.native-ui-capture { filter: none; }
.hero-plugin.hero-device.native-ui-capture { filter: none; }
.hero-scene.is-changing .relic-index b { animation: hero-index-pop .52s cubic-bezier(.2,.7,.2,1) both; }

/* Carry the hero's ambient galaxy through the section change; keep the instrument art untouched. */
.hero::before { inset: -10% -7% -16%; }
.hero::after {
  height: clamp(220px,24vw,340px);
  background:
    radial-gradient(ellipse 78% 85% at 73% 42%,#a43fff18,transparent 74%),
    radial-gradient(ellipse 66% 75% at 43% 60%,#38ffe10d,transparent 76%),
    linear-gradient(180deg,transparent 0%,#090a0c12 90%,#090a0c20 100%);
}
.catalog-section::before {
  inset: -160px calc(var(--gutter) * -1) 0;
  background:
    radial-gradient(ellipse 75% 60% at 72% 0%,#8a38a714,transparent 78%),
    radial-gradient(ellipse 65% 50% at 30% 0%,#258e8908,transparent 78%),
    linear-gradient(180deg,#090a0c10 0%,transparent 100%);
}
.catalog-section { overflow: visible; }
/* One diffuse field bridges the headline column and the 01 sound scene. */
.hero::before {
  background:
    radial-gradient(ellipse 44% 96% at 39% 48%,#8139a740 0%,#63307622 45%,transparent 80%),
    linear-gradient(90deg,transparent 0%,#9144ff08 18%,#9144ff18 43%,#6de9f10e 64%,transparent 88%),
    radial-gradient(ellipse 76% 72% at 72% 38%,#8d3cff31,transparent 70%),
    radial-gradient(ellipse 72% 76% at 52% 68%,#41dce51d,transparent 72%),
    radial-gradient(ellipse 68% 66% at 34% 50%,#a24bff15,transparent 74%),
    radial-gradient(ellipse at 6% 72%,#c378ff0c,transparent 40%);
}
@keyframes hero-machine-switch {
  0% { opacity: .55; filter: brightness(1.8) saturate(1.4); transform: perspective(1600px) rotateY(-18deg) rotateX(12deg) rotateZ(-3deg) translate3d(0,8px,10px) scale(.985); }
  100% { opacity: 1; filter: brightness(1.18) saturate(1.25); transform: perspective(1600px) rotateY(-12deg) rotateX(8deg) rotateZ(-2deg) translate3d(0,0,42px) scale(1); }
}
@keyframes hero-index-pop {
  0% { opacity: .25; transform: translateY(10px) scale(.82); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Legibility pass: keep the dark art direction, give supporting copy real contrast. */
.hero-secondary { color: #e7e2ec; font-size: 11px; }
.hero-proof { color: #c7c1d0; font-size: 9px; }
.scene-topline { top: 3%; left: 12%; max-width: 50%; color: #e0dbe7; font-size: 10px; line-height: 1.65; }
.scene-topline b { display: block; margin: 2px 0 0; }
.scene-disclaimer { color: #c8c2d0; font-size: 8px; }
.hero-device-caption { color: #f0ebf5; font-size: 10px; letter-spacing: .08em; text-shadow: 0 2px 16px #000; }
.hero-device-caption {
  top: 4%;
  right: 5%;
  max-width: 50%;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
.hero-device-caption span:first-child { font-size: 19px; line-height: 1.05; }
.hero-device-caption span:last-child { max-width: 100%; font-size: 10px; line-height: 1.35; white-space: normal; }
.hero-plugin.hero-device { top: 22%; }
.relic-index span { color: #e2ddeb; font-size: 8px; }
.relic-index { color: #f2edf6; font-size: 10px; }
.hero-machine-strip button span { color: #f7f3fb; font-size: 10px; }
.hero-machine-strip button small { color: #d0cad8; font-size: 10px; }
.hero-baseline { color: #c7c1ce; font-size: 9px; }

.catalog-heading > p,
.product-role,
.product-description,
.catalog-footnote p,
.catalog-status { color: #d2cdd8; }
.catalog-heading h2 span {
  color: #bcb6c8;
  background: none;
  -webkit-text-fill-color: #bcb6c8;
}
.product-card-top,.product-type { color: #d4cedc; font-size: 10px; }
.product-role { font-size: 13px; line-height: 1.45; }
.product-description { font-size: 14px; line-height: 1.58; }
.product-art-button img {
  width: 92%; left: 4%; top: 17%;
  transform: perspective(1100px) rotateX(9deg) rotateY(-7deg) rotateZ(-2deg) translateZ(28px);
  filter: brightness(1.27) saturate(1.19) contrast(1.16) drop-shadow(0 30px 28px #000b);
}
.product-art-button:hover img { transform: perspective(1100px) rotateX(2deg) rotateY(-1deg) rotateZ(-1deg) translateY(-8px) translateZ(48px); }
.product-tags span { color: #e0dbe5; font-size: 10px; }
.product-card-bottom > span { color: #d0cad7; font-size: 10px; }
.add-button { color: #fff; font-size: 12px; font-weight: 600; }
.add-button span { font-size: 17px; }
.filter-tabs button { color: #d0cad7; font-size: 11px; }
.search-field input::placeholder { color: #c2bdca; }

.machine-picker-intro { color: #e2dce9; font-size: 10px; }
.machine-picker-intro small { color: #c7c0cf; font-size: 12px; }
.machine-picker button span { color: #f0ebf5; font-size: 11px; }
.machine-picker button small { color: #c9c3d1; font-size: 11px; }
.machine-display-meta,.machine-display-footer { color: #d3cdda; font-size: 9px; }
.machine-index,.machine-gesture > span,.machine-macro-row,.machine-energy > span { color: #c7c1ce; font-size: 9px; }
.machine-sound-note,.machine-room-note { color: #c7c1ce; font-size: 10px; }
.machine-product-link { color: #eee8f4; font-size: 9px; }
.machine-role { color: #f0ebf5; }
.machine-description,.machine-gesture p { color: #d2cdd8; }
.machine-gesture strong { color: #f5f0f8; }
.machine-audition { color: #fff; font-size: 11px; }

.agent-tabs [role="tab"] { color: #c8c2cf; font-size: 11px; }
.agent-tabs [aria-selected="true"] { color: #fff; }
.agent-prompt-example > span,.mcp-connect-grid article > span,.agent-tool-stack article > span,.agent-paid-grid article > span,
.agent-tool-stack p,.mcp-connect-grid p,.agent-paid-grid p { color: #d0cad7; font-size: 14px; line-height: 1.65; }
.agent-copy > p:not(.agent-kicker) { color: #d0cad7; }
.agent-foot,.mcp-prototype-note,.agent-commerce-status { color: #c3bdcb; font-size: 10px; }
.agent-prompt-example button,.agent-build-button,.agent-foot a,.agent-tab-panel .text-link { font-size: 11px; }
.agent-tool-stack b { color: #d5b4ff; font-size: 9px; }
.agent-build-command { font-size: 11px; }
.mcp-connect-grid h3,.agent-paid-grid h3 { color: #f3eef7; }

.product-detail-copy .eyebrow { color: #555963; font-size: 10px; }
.product-detail-story { color: #4c5058; font-size: 14px; line-height: 1.7; }
.detail-status { color: #50545c; font-size: 11px; line-height: 1.55; }
.detail-price span { color: #50545c; font-size: 9px; }
.detail-tabs button { color: #555963; font-size: 13px; }
.detail-tabs button[aria-selected="true"] { color: #171816; }

@media(max-width:850px) {
  .hero-machine-strip button span,.hero-machine-strip button small { font-size: 9px; }
}
@media(max-width:650px) {
  .hero-secondary { font-size: 10px; }
  .hero-device-caption { font-size: 9px; }
  .hero-device-caption { max-width: 70%; gap: 2px; }
  .hero-device-caption span:first-child { font-size: 15px; }
  .hero-device-caption span:last-child { font-size: 8px; }
  .relic-index { font-size: 9px; }
  .hero-machine-strip button span,.hero-machine-strip button small { font-size: 9px; }
  .hero-baseline { font-size: 8px; }
  .scene-topline { top: 1%; left: 18%; max-width: 50%; font-size: 8px; }
  .scene-topline b { font-size: 8px; }
  .machine-picker button span,.machine-picker button small { font-size: 10px; }
  .machine-room-note { font-size: 9px; }
  .detail-tabs button { font-size: 12px; }
  .product-art-button img { top: 19%; }
}

/* A sampling-first machine room: one instrument at a time, with real browser audition. */
#machines { scroll-margin-top: 86px; }
.site-header { background: linear-gradient(180deg,#090a0c 0%,#090a0cf8 100%) !important; backdrop-filter: blur(18px) saturate(140%) !important; }
.machine-room::before { content: none; }
.machine-room::after {
  inset: -6% -8%;
  opacity: .72;
  background:
    radial-gradient(ellipse 58% 52% at 78% 42%,color-mix(in srgb,var(--machine-accent,#bd43ff) 13%,transparent),transparent 76%),
    radial-gradient(ellipse 44% 44% at 18% 72%,#47ffe10b,transparent 76%);
  mask-image: none;
}
.machine-room-heading { margin-block: 34px 24px; }
.machine-room-heading h2 { font-size: clamp(52px,6.4vw,92px); line-height: .9; }
.machine-room-heading > p { max-width: 43ch; font-size: 14px; line-height: 1.65; }
.machine-picker { counter-reset: machine; align-items: stretch; gap: clamp(12px,2.2vw,30px); margin-top: 14px; }
.machine-picker button { min-height: 82px; padding: 12px 8px 15px; border-radius: 0; transition: background .25s,transform .25s; }
.machine-picker button::before { counter-increment: machine; content: counter(machine, decimal-leading-zero); color: #8d8797; font: 9px var(--mono); letter-spacing: .12em; }
.machine-picker button span { color: #eee9f2; font-size: 11px; letter-spacing: .12em; }
.machine-picker button small { color: #b6afc0; font-size: 12px; }
.machine-picker button[aria-selected="true"] { background: linear-gradient(180deg,color-mix(in srgb,var(--machine-accent) 12%,transparent),transparent); }
.machine-picker button[aria-selected="true"]::before { color: var(--machine-accent); }
.machine-picker button[aria-selected="true"]::after { box-shadow: 0 0 20px color-mix(in srgb,var(--machine-accent) 72%,transparent); }
.machine-console { grid-template-columns: minmax(0,1.15fr) minmax(290px,.85fr); gap: clamp(28px,5vw,72px); margin-top: 16px; }
.machine-display { min-height: 490px; }
.machine-display-meta { display: flex; justify-content: space-between; gap: 16px; }
.machine-display-meta > span:last-child { color: var(--machine-accent); }
.machine-artwell img { width: 90%; transform: perspective(1500px) rotateY(-5deg) rotateX(2deg) rotateZ(-1deg) translateZ(28px); }
.machine-console:hover .machine-artwell img { transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) rotateZ(0deg) translateY(-8px) translateZ(40px); }
.machine-display-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 15px; padding-top: 13px; border-top: 1px solid #ffffff18; }
.machine-display-footer span:first-child { color: var(--machine-accent); }
.machine-controls h3 { margin-top: 11px; font-size: clamp(52px,6vw,78px); }
.machine-role { color: #f1eaf5; font-size: 10px; }
.machine-description { color: #d3cddb; font-size: 13px; line-height: 1.65; }
.machine-gesture { margin-top: 20px; padding-top: 16px; }
.machine-gesture p { color: #c2bbc9; font-size: 12px; line-height: 1.55; }
.machine-energy { margin-top: 16px; }
.machine-energy > span,.machine-gesture > span { color: #c8c1d0; }
.machine-audition { min-height: 48px; padding-inline: 18px; border-color: color-mix(in srgb,var(--machine-accent) 80%,white); background: linear-gradient(105deg,var(--machine-accent),color-mix(in srgb,var(--machine-accent) 62%,#d8c4ff)); box-shadow: 0 8px 28px color-mix(in srgb,var(--machine-accent) 19%,transparent); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.machine-product-link { color: #eee9f4; font-size: 9px; }
.machine-sound-note { color: #bdb6c6; font-size: 10px; }
.machine-room-note { color: #c5bfce; font-size: 9px; }
.machine-effect-console { margin-top: 17px; }
.effect-sample-dock { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 9px 14px; margin-top: 15px; padding-top: 13px; border-top: 1px solid color-mix(in srgb,var(--machine-accent) 27%,#ffffff1b); }
.effect-sample-dock label { display: grid; gap: 6px; min-width: 0; }
.effect-sample-dock label > span,.effect-sample-note { color: #c8c1d0; font: 8px var(--mono); letter-spacing: .11em; }
.effect-sample-dock select { width: 100%; min-height: 38px; padding: 0 30px 0 10px; border: 1px solid #ffffff30; border-radius: 2px; background: #111016; color: #f3edf8; font: 9px var(--mono); letter-spacing: .06em; }
.effect-sample-dock button { min-height: 38px; padding: 0 11px; border: 1px solid color-mix(in srgb,var(--machine-accent) 53%,#ffffff2a); background: color-mix(in srgb,var(--machine-accent) 10%,#111016); color: #f2edf7; font: 8px var(--mono); letter-spacing: .04em; cursor: pointer; }
.effect-sample-dock button:hover,.effect-sample-dock button[aria-pressed="false"] { border-color: var(--machine-accent); color: var(--machine-accent); }
.effect-sample-note { grid-column: 1/-1; font-size: 7px; color: #aaa3b2; }
.framecut-macros { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 14px; }
.framecut-macros label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 10px; }
.framecut-macros label > span { color: #e7e1ed; font: 8px var(--mono); letter-spacing: .1em; }
.framecut-macros input { grid-column: 1/-1; width: 100%; accent-color: var(--machine-accent); }
.framecut-macros output { color: var(--machine-accent); font: 9px var(--mono); }
.product-sample-link { display: inline-flex; min-height: 32px; align-items: center; margin-top: 12px; padding: 0; border: 0; border-bottom: 1px solid color-mix(in srgb,var(--product-color) 45%,transparent); background: transparent; color: #e5dfee; font: 8px var(--mono); letter-spacing: .08em; cursor: pointer; transition: color .2s,border-color .2s; }
.product-sample-link:hover { color: var(--product-color); border-color: var(--product-color); }
@media(max-width:1020px) {
  .machine-console { grid-template-columns: 1fr; gap: 22px; }
  .machine-display { min-height: 430px; }
  .machine-controls { max-width: 760px; padding-block: 10px 26px; }
}
@media(max-width:650px) {
  .machine-room-heading { margin-block: 24px 18px; }
  .machine-room-heading h2 { font-size: clamp(50px,13vw,76px); }
  .machine-room-heading > p { font-size: 12px; }
  .machine-picker { grid-template-columns: repeat(7,120px); overflow-x: auto; }
  .machine-picker button { min-height: 78px; }
  .machine-display { min-height: 340px; }
  .machine-artwell { overflow: visible; }
  .machine-artwell img { width: 95%; }
  .machine-display-footer { font-size: 7px; }
  .machine-controls h3 { font-size: 58px; }
  .effect-sample-dock { grid-template-columns: 1fr; }
  .effect-sample-dock button { justify-self: start; }
}

/* Effect controls: readable values, generous touch targets, and clear slider travel. */
.framecut-macros { gap: 18px; margin-top: 17px; }
.framecut-macros label { gap: 8px 12px; min-width: 0; }
.framecut-macros label > span,.rupture-band > span { color: #eee9f2; font-size: 9px; font-weight: 600; letter-spacing: .09em; }
.framecut-macros output,.rupture-band output { min-width: 42px; padding: 3px 5px; border: 1px solid color-mix(in srgb,var(--machine-accent) 38%,#ffffff20); background: color-mix(in srgb,var(--machine-accent) 10%,#111016); color: #f5effb; text-align: center; font: 9px var(--mono); }
.framecut-macros input,.rupture-band input { --slider-fill: 50%; grid-column: 1/-1; width: 100%; height: 28px; margin: -4px 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; }
.framecut-macros input::-webkit-slider-runnable-track,.rupture-band input::-webkit-slider-runnable-track { height: 5px; border: 1px solid #ffffff20; border-radius: 99px; background: linear-gradient(90deg,var(--machine-accent) 0 var(--slider-fill),#3b3d3a var(--slider-fill) 100%); }
.framecut-macros input::-moz-range-track,.rupture-band input::-moz-range-track { height: 5px; border: 1px solid #ffffff20; border-radius: 99px; background: linear-gradient(90deg,var(--machine-accent) 0 var(--slider-fill),#3b3d3a var(--slider-fill) 100%); }
.framecut-macros input::-webkit-slider-thumb,.rupture-band input::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -7px; appearance: none; border: 2px solid #f6effb; border-radius: 50%; background: var(--machine-accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--machine-accent) 20%,transparent),0 0 15px color-mix(in srgb,var(--machine-accent) 68%,transparent); transition: transform .16s ease,box-shadow .16s ease; }
.framecut-macros input::-moz-range-thumb,.rupture-band input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #f6effb; border-radius: 50%; background: var(--machine-accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--machine-accent) 20%,transparent),0 0 15px color-mix(in srgb,var(--machine-accent) 68%,transparent); transition: transform .16s ease,box-shadow .16s ease; }
.framecut-macros input:hover::-webkit-slider-thumb,.rupture-band input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.framecut-macros input:active::-webkit-slider-thumb,.rupture-band input:active::-webkit-slider-thumb { transform: scale(1.22); }
.framecut-macros input:focus-visible,.rupture-band input:focus-visible { outline: 2px solid #f5effb; outline-offset: 4px; border-radius: 4px; }
.rupture-bands { gap: 15px; }
.rupture-band { gap: 8px; }
@media(max-width:650px) {
  .framecut-macros { grid-template-columns: 1fr; gap: 12px; }
  .rupture-bands { grid-template-columns: 1fr; gap: 12px; }
}

/* The main intensity control uses the same precise, tactile travel as the effects. */
.machine-energy input { --slider-fill: 58%; width: 100%; height: 28px; margin: -4px 0; padding: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; }
.machine-energy input::-webkit-slider-runnable-track { height: 5px; border: 1px solid #ffffff24; border-radius: 99px; background: linear-gradient(90deg,var(--machine-accent) 0 var(--slider-fill),#3b3d3a var(--slider-fill) 100%); }
.machine-energy input::-moz-range-track { height: 5px; border: 1px solid #ffffff24; border-radius: 99px; background: linear-gradient(90deg,var(--machine-accent) 0 var(--slider-fill),#3b3d3a var(--slider-fill) 100%); }
.machine-energy input::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -7px; appearance: none; border: 2px solid #f5f1e9; border-radius: 50%; background: var(--machine-accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--machine-accent) 20%,transparent),0 0 14px color-mix(in srgb,var(--machine-accent) 66%,transparent); transition: transform .16s ease,box-shadow .16s ease; }
.machine-energy input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #f5f1e9; border-radius: 50%; background: var(--machine-accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--machine-accent) 20%,transparent),0 0 14px color-mix(in srgb,var(--machine-accent) 66%,transparent); }
.machine-energy input:hover::-webkit-slider-thumb,.machine-energy input:active::-webkit-slider-thumb { transform: scale(1.15); }
.machine-energy input:focus-visible { outline: 2px solid #f5effb; outline-offset: 5px; border-radius: 4px; }

/* Quiet, editorial site chrome: brand first, three routes, two clear actions. */
.site-header {
  min-height: 70px;
  gap: clamp(16px,2vw,30px);
  background: linear-gradient(180deg,#090a0ce8,#090a0cbf 78%,transparent) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}
.brand { gap: 10px; font-size: 18px; letter-spacing: -.055em; text-shadow: none; }
.site-header .brand svg { width: 27px; height: 25px; flex: none; filter: none; transition: filter .2s ease,color .2s ease; }
.site-header .brand:hover svg { color: #67e8f4; filter: drop-shadow(0 0 7px #bd75ff5a); transform: none; }
.site-header nav { align-items: center; gap: clamp(14px,2vw,28px); font-size: 11px; color: #c7c1ce; }
.site-header nav a { position: relative; padding-block: 8px; transition: color .2s ease; }
.site-header nav a::after { position: absolute; right: 0; bottom: 1px; left: 0; height: 1px; content: ''; background: linear-gradient(90deg,#c378ff,#67e8f4); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.site-header nav a:hover { color: #fff; }
.site-header nav a:hover::after,.site-header nav a:focus-visible::after { transform: scaleX(1); }
.header-actions { gap: 12px; font-size: 10px; }
.lab-link { padding: 9px 13px; border: 1px solid #ffffff22; border-radius: 99px; color: #e9e3f0; transition: border-color .2s,background .2s,color .2s; }
.lab-link:hover { border-color: #c378ff88; background: #c378ff12; color: #fff; }
.lab-link span { margin-left: 6px; color: #67e8f4; }
.bag-button { min-height: 36px; padding: 0 6px 0 12px; gap: 9px; border: 1px solid transparent; border-radius: 99px; transition: border-color .2s,background .2s; }
.bag-button:hover { border-color: #ffffff24; background: #ffffff08; }
.bag-button span { min-width: 23px; height: 23px; border-color: #ffffff36; color: #f5effb; }
.hero-machine-strip { margin-top: 8px; gap: clamp(8px,1.8vw,24px); }
.hero-machine-strip button { min-height: 58px; padding: 9px 4px 10px; }
.hero-machine-strip button::before { top: auto; bottom: 0; height: 1px; box-shadow: 0 0 9px var(--hero-accent); }
.hero-machine-strip button:hover { transform: translateY(-1px); }
.hero-machine-strip button[aria-selected="true"] { background: linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--hero-accent) 8%,transparent)); }
.hero-machine-strip button span { font-size: 9px; letter-spacing: .12em; }
.hero-machine-strip button small { margin-top: 4px; color: #a7a1b1; font-size: 9px; }
@media(max-width:850px) {
  .site-header { min-height: 66px; }
}
@media(max-width:680px) {
  .site-header { min-height: 62px; gap: 8px; }
  .brand { gap: 7px; font-size: 16px; }
  .brand svg { width: 23px; height: 22px; }
  .header-actions { gap: 7px; font-size: 9px; }
  .lab-link { padding: 8px 10px; }
  .lab-link span { display: none; }
  .bag-button { min-height: 34px; padding-inline: 8px 4px; }
  .hero-machine-strip { margin-top: 4px; gap: 12px; }
  .hero-machine-strip button { min-height: 54px; padding-inline: 0; }
  .hero-machine-strip button span { font-size: 8px; }
  .hero-machine-strip button small { font-size: 8px; }
}

/* Free Studio entry point; commercial machines remain individual products. */
.studio-download-link { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border:1px solid #d4ff6c55; border-radius:99px; color:#efffd0; background:linear-gradient(105deg,#d4ff6c12,#d4ff6c04); font-size:10px; letter-spacing:.035em; white-space:nowrap; transition:background .2s,border-color .2s,transform .2s; }
.studio-download-link:hover { border-color:#d4ff6caa; background:#d4ff6c1c; transform:translateY(-1px); }
.studio-download-link span { color:#d4ff6c; font-size:13px; }
.studio-section { scroll-margin-top:78px; }
.studio-anchor { position:absolute; top:-78px; }
.studio-release-card { position:relative; display:grid; grid-template-columns:1fr auto; gap:9px 18px; max-width:490px; margin-top:25px; padding:19px 20px 17px; border:1px solid #d4ff6c38; background:linear-gradient(120deg,#d4ff6c0d,#ffffff04 55%,#d4ff6c06); }
.studio-release-card > div { display:grid; gap:5px; }
.studio-release-status { display:flex; align-items:center; gap:7px; color:#d4e6b1; font:8px var(--mono); letter-spacing:.09em; }
.studio-release-status i { width:6px; height:6px; border-radius:50%; background:#d4ff6c; box-shadow:0 0 9px #d4ff6c88; }
.studio-release-card strong { color:#f5f2e8; font:400 23px/1.1 var(--display); }
.studio-release-card small { color:#a9ad9f; font:9px var(--mono); }
.studio-release-button { align-self:center; min-height:37px; padding:0 14px; border:1px solid #d4ff6c66; background:#d4ff6c12; color:#efffd0; font:10px var(--mono); cursor:pointer; }
.studio-release-button:hover { background:#d4ff6c22; }
.studio-release-button:disabled { border-color:#ffffff20; color:#afb3a7; background:#ffffff06; cursor:not-allowed; }
.studio-release-button span { margin-left:8px; color:#d4ff6c; }
.studio-release-card > p { grid-column:1/-1; margin:3px 0 0; color:#c0c4b8; font-size:11px; line-height:1.55; }
.studio-release-card > a { grid-column:1/-1; justify-self:start; margin-top:1px; color:#e0ff9f; font:9px var(--mono); letter-spacing:.045em; }
.studio-release-card > a span { margin-left:6px; }
@media(max-width:680px) {
  .site-header { gap:5px; }
  .header-actions { gap:5px; }
  .studio-download-link { min-height:32px; padding-inline:9px; font-size:8px; gap:4px; }
  .lab-link { padding:8px 8px; }
  .studio-release-card { padding:16px; }
}

/* Shared dimensional NOISE ALTER emblem. */
.brand-icon { width: 32px; height: 32px; flex: none; object-fit: cover; border-radius: 7px; }
.site-header .brand-icon { width: 27px; height: 27px; }
.site-header .brand:hover .brand-icon { filter: drop-shadow(0 0 8px #d5ff5380); transform: translateY(-1px); }
@media(max-width:680px) { .brand-icon { width: 23px; height: 23px; } }

.complete-collection { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 17px 18px; border: 1px solid #e58e5966; background: linear-gradient(100deg,#e58e5915,#e58e5905); }
.complete-collection > div > span { display: block; margin-bottom: 6px; color: #c6b7a5; font: 8px var(--mono); letter-spacing: .12em; }
.complete-collection strong { font: 400 25px/1 var(--display); }
.complete-collection small { color: #a99f94; font: 8px var(--mono); }
.complete-collection .button { gap: 12px; padding-inline: 14px; font-size: 9px; }
@media(max-width:680px) { .complete-collection { align-items: flex-start; flex-direction: column; } }

/* Compact phone header and a stacked, no-overlap hero. */
.header-menu-panel { display: contents; }
.mobile-menu-toggle { display: none; }
.hero h1 { margin-top: 0; }

@media(max-width:680px) {
  html { scroll-padding-top: 62px; }
  .hero { scroll-margin-top: 62px; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-block: 8px;
  }
  .site-header .brand { min-width: 0; gap: 7px; font-size: 16px; letter-spacing: -.045em; }
  .site-header .brand-icon { width: 25px; height: 25px; }
  .mobile-menu-toggle {
    display: flex;
    width: 42px;
    height: 40px;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #ffffff27;
    border-radius: 50%;
    background: #ffffff08;
    color: #f4eff7;
    cursor: pointer;
  }
  .mobile-menu-toggle span { width: 15px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-open .mobile-menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-open .mobile-menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .header-menu-panel {
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    left: 0;
    display: none;
    gap: 12px;
    padding: 12px var(--gutter) 18px;
    border: 1px solid #ffffff1b;
    border-top: 1px solid #ffffff12;
    background: linear-gradient(155deg,#111016,#090a0d 75%);
    box-shadow: 0 22px 45px #000a;
    backdrop-filter: blur(22px) saturate(140%);
  }
  .menu-open .header-menu-panel { display: grid; }
  .site-header nav { display: grid; gap: 0; font-size: 13px; }
  .site-header nav a { padding: 12px 2px; border-bottom: 1px solid #ffffff16; }
  .header-actions { display: grid; width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; font-size: 11px; }
  .header-actions > * { min-width: 0; min-height: 42px; justify-content: center; margin: 0; }
  .studio-download-link,.lab-link { padding-inline: 10px; font-size: 10px; }
  .bag-button { padding-inline: 8px; border: 1px solid #ffffff20; }
  .hero { display: flex; min-height: 0; flex-direction: column; gap: 0; padding-top: 25px; }
  .hero-copy { width: 100%; max-width: none; padding: 0; }
  .hero h1 { margin: 0 0 17px; font-size: clamp(70px,20vw,104px); line-height: .9; letter-spacing: -.05em; }
  .hero-description { max-width: 350px; font-size: 16px; line-height: 1.45; }
  .hero-small { margin-top: 9px; font-size: 11px; line-height: 1.5; }
  .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 18px; }
  .hero-actions .button { min-height: 44px; padding-inline: 15px; font-size: 10px; }
  .hero-secondary { min-height: 40px; padding-bottom: 0; font-size: 9px; }
  .hero-proof { display: none; }
  .hero-scene { width: clamp(270px,90vw,480px); max-width: 100%; height: clamp(300px,94vw,410px); min-height: 0; max-height: none; margin: 18px auto 0; }
  .hero-plugin.hero-device { top: 10%; right: 2%; width: 96%; transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) rotateZ(-1deg); }
  .hero-device-caption { top: 0; right: 0; left: 0; max-width: 100%; padding: 0; }
  .hero-device-caption span:first-child { font-size: 14px; }
  .hero-device-caption span:last-child { display: none; }
  .hero-scene .scene-topline,.hero-scene .relic-index,.hero-scene .scene-coord { display: none; }
  .hero-device-shadow { right: 6%; bottom: 8%; width: 88%; height: 12%; }
  .hero-machine-strip { width: 100%; grid-template-columns: repeat(7,minmax(86px,1fr)); margin: 8px 0 0; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .hero-machine-strip button { min-height: 56px; scroll-snap-align: start; }
  .hero-machine-strip button span { font-size: 8px; }
  .hero-machine-strip button small { font-size: 8px; }
  .hero-baseline { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; padding-block: 12px 15px; font-size: 6px; line-height: 1.5; }
  .hero-baseline span:nth-child(2) { display: none; }
  .hero-baseline span:last-child { text-align: right; }
}

@media(max-width:360px) {
  .site-header .brand { font-size: 15px; }
  .hero h1 { font-size: 68px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero-actions .button { width: max-content; }
}

.account-body { padding: 24px 27px 30px; overflow-y: auto; }
.account-body > p:first-child { margin: 0 0 22px; color: var(--muted); font-size: 12px; line-height: 1.7; }
#account-form { display: grid; gap: 10px; }
#account-form label { margin-top: 8px; color: #d9ddd3; font: 9px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
#account-form input { min-height: 46px; width: 100%; padding: 0 13px; border: 1px solid #ffffff25; outline: 0; background: #ffffff09; color: var(--white); font: 13px var(--body); }
#account-form input:focus { border-color: #d4ff6c88; box-shadow: 0 0 0 2px #d4ff6c16; }
#account-form .button { width: 100%; margin-top: 10px; }
.account-providers { display: grid; gap: 9px; }
.account-providers[hidden], .account-divider[hidden] { display: none; }
.account-providers button { min-height: 44px; border: 1px solid #ffffff2d; border-radius: 2px; background: #ffffff08; color: var(--white); font: 10px var(--mono); letter-spacing: .04em; cursor: pointer; transition: border-color .18s ease, background .18s ease, opacity .18s ease; }
.account-providers button:hover:not(:disabled), .account-providers button:focus-visible { border-color: #d4ff6c99; background: #d4ff6c0d; outline: none; }
.account-providers button:disabled { cursor: not-allowed; opacity: .45; }
.account-provider-note { margin: 9px 0 0 !important; color: #aeb4a8; font: 9px/1.55 var(--mono); }
.account-provider-note[hidden] { display: none; }
.account-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 6px; color: #aeb4a8; font: 8px var(--mono); letter-spacing: .1em; }
.account-divider::before, .account-divider::after { content: ""; flex: 1; height: 1px; background: #ffffff20; }
.account-mode { display: block; margin-top: 17px; border: 0; border-bottom: 1px solid #ffffff40; padding: 0 0 4px; background: none; color: #e4f4c0; font: 10px var(--mono); cursor: pointer; }
.account-mode[hidden] { display: none; }
.account-library { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 21px; }
.account-library h3 { margin: 0 0 12px; font: 22px var(--display); }
.account-library p { color: var(--muted); font-size: 10px; line-height: 1.6; }
.account-library ul { list-style: none; margin: 0; padding: 0; }
.account-library li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.account-library li strong { font-size: 12px; }
.account-library li span { color: #d6edac; font: 8px/1.5 var(--mono); text-align: right; }
.account-download { border: 0; border-bottom: 1px solid #d4ff6c88; padding: 0 0 2px; background: none; color: #efffd0; font: 8px var(--mono); cursor: pointer; }
.account-download:disabled { opacity: .5; cursor: wait; }

/* Phone layout: keep the actual plugin captures readable and in their own frames. */
@media (max-width: 680px) {
  .hero-copy > .eyebrow,
  .hero-copy > .hero-overline,
  .hero-copy > p:first-child { display: none; }

  .site-header .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .mobile-menu-toggle { margin-left: auto; }
  .hero {
    overflow: clip;
    background:
      radial-gradient(ellipse 118% 38% at 78% 16%,#a43fff22,transparent 72%),
      radial-gradient(ellipse 110% 42% at 9% 46%,#39ffe119,transparent 72%),
      radial-gradient(ellipse 100% 35% at 78% 77%,#ff735d17,transparent 74%),
      radial-gradient(ellipse 90% 32% at 28% 95%,#d5ff5310,transparent 76%);
  }
  .hero-copy { text-align: center; }
  .hero h1 { width: 100%; text-align: center; }
  .hero-description,
  .hero-small { margin-inline: auto; }
  .hero-actions { width: 100%; align-items: center; justify-content: center; }
  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
    border-color: #ffffff34;
    background: linear-gradient(145deg,#ffffff0d,#bd43ff12);
  }
  .mobile-menu-toggle:focus-visible,
  .lab-link:focus-visible,
  .hero-secondary:focus-visible { outline: 2px solid #67e8f4; outline-offset: 3px; }
  .menu-open .mobile-menu-toggle { border-color: #bd43ff9c; background: #bd43ff20; }
  .header-menu-panel .lab-link {
    border-color: #bd43ff70;
    background: linear-gradient(135deg,#bd43ff1c,#47ffe10c);
    color: #f6efff;
  }
  .hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid #bd43ff70;
    border-radius: 999px;
    padding: 0 14px;
    background: linear-gradient(135deg,#bd43ff1c,#47ffe10c);
    color: #f6efff;
    text-decoration: none;
  }
  .hero-secondary:hover { border-color: #67e8f4a6; background: #47ffe116; color: #fff; }
  .hero::before {
    z-index: 0;
    inset: -8% -20% -3%;
    background:
      conic-gradient(from 205deg at 73% 35%,transparent 0deg,#a43fff1b 58deg,transparent 122deg,#47ffe118 188deg,transparent 275deg),
      radial-gradient(ellipse at 74% 22%,#a43fff42,transparent 38%),
      radial-gradient(ellipse at 22% 53%,#35ffe12e,transparent 40%),
      radial-gradient(ellipse at 73% 78%,#ff735d2b,transparent 38%),
      radial-gradient(circle at 14% 31%,#e9ffffa6 0 1px,transparent 1.8px),
      radial-gradient(circle at 83% 24%,#d5ff5380 0 1px,transparent 1.8px),
      radial-gradient(circle at 91% 62%,#c458ff91 0 1px,transparent 2px),
      radial-gradient(circle at 11% 82%,#47ffe18c 0 1px,transparent 2px);
    filter: blur(48px);
    animation: altar-bloom 18s ease-in-out infinite alternate;
  }
  .hero-copy,
  .hero-scene,
  .hero-machine-strip,
  .hero-baseline { position: relative; z-index: 1; }
  .hero-scene {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1.31;
    min-height: 0;
    margin: 18px auto 0;
    overflow: visible;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .hero-scene::before {
    z-index: 0;
    inset: -22% -27% -18%;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 48% 44%,color-mix(in srgb,var(--hero-accent) 42%,transparent),transparent 37%),
      radial-gradient(ellipse at 74% 30%,#ac3aff70,transparent 35%),
      radial-gradient(ellipse at 48% 75%,#38ffe15c,transparent 39%),
      radial-gradient(ellipse at 22% 58%,#d5ff5330,transparent 35%);
    filter: blur(43px) saturate(175%);
    opacity: .9;
    animation: altar-bloom 14s ease-in-out infinite alternate;
  }
  .hero-scene::after {
    content: '';
    z-index: 2;
    inset: 2% -12% 3%;
    opacity: .56;
    filter: drop-shadow(0 0 13px #bd43ff90) drop-shadow(0 0 28px #42ffe15c);
  }
  .hero-scene .scene-grid { z-index: 0; display: block; opacity: .13; }
  .hero-scene .hero-relic {
    z-index: 1;
    display: block;
    inset: -8% -6% 0;
    width: 112%;
    height: 108%;
    opacity: .9;
    mix-blend-mode: screen;
    filter: saturate(2.1) contrast(1.3) hue-rotate(var(--hero-hue,0deg));
  }
  .hero-scene .hero-lightwell { z-index: 2; display: block; inset: 0 -9% -4%; }
  .hero-scene .hero-lightwell i {
    width: 80%;
    height: 35%;
    border-width: 1px;
    opacity: .52;
    box-shadow: 0 0 22px color-mix(in srgb,var(--hero-accent) 50%,transparent),0 0 60px color-mix(in srgb,var(--plasma) 38%,transparent),inset 0 0 22px color-mix(in srgb,var(--laser) 20%,transparent);
  }
  .hero-scene .hero-lightwell i:nth-child(2) { width: 96%; height: 44%; opacity: .29; }
  .hero-scene .hero-lightwell i:nth-child(3) { width: 112%; height: 53%; opacity: .17; }
  .hero-scene .scene-disclaimer,
  .hero-device-caption { display: none; }
  .hero-scene .hero-device-shadow {
    z-index: 1;
    right: -10%;
    bottom: 9%;
    left: -10%;
    width: auto;
    height: 34%;
    background:
      radial-gradient(ellipse at 52% 50%,#d5ff5350,transparent 30%),
      radial-gradient(ellipse at 60% 45%,#a43fff80,transparent 58%),
      radial-gradient(ellipse at 36% 58%,#47ffe14d,transparent 65%);
    filter: blur(58px);
    opacity: .92;
  }
  .hero-plugin.hero-device {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    filter: none;
  }
  .hero-scene.is-changing .hero-device { animation: none; }

  @media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero-scene::before,
    .hero-scene::after,
    .hero-scene .hero-lightwell i { animation: none !important; }
  }

  .product-grid { gap: 38px; }
  .product-card { min-width: 0; overflow: visible; }
  .product-build-line { display: none; }
  .product-art-button {
    display: block;
    width: 100%;
    aspect-ratio: 1.31;
    overflow: hidden;
    border: 1px solid color-mix(in srgb,var(--product-color) 44%,#ffffff20);
    border-radius: 4px;
    background: radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--product-color) 16%,#111411),#090b0a 78%);
    box-shadow: inset 0 1px #ffffff12;
    transform: none;
  }
  .product-art-button::before {
    z-index: 0;
    inset: 0;
    background: linear-gradient(135deg,#ffffff09,transparent 34%,transparent 72%,#ffffff05);
  }
  .product-art-button::after { content: none; }
  .product-art-button img.native-ui-capture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    filter: none;
  }
  .product-art-button:hover,
  .product-art-button:active { transform: none; filter: none; }
  .product-art-button:hover img.native-ui-capture,
  .product-art-button:active img.native-ui-capture { transform: none; filter: none; }
  .product-card-title { position: relative; z-index: 1; align-items: flex-start; margin: 15px 0 5px; }
  .product-card h3 { font-size: clamp(32px,10vw,42px); line-height: 1; }
}

/* Mobile hero composition: centered story, balanced actions, and a complete selector. */
@media (max-width: 680px) {
  .site-header .brand {
    position: relative;
    left: auto;
    transform: none;
    margin-right: auto;
  }

  .hero.shell {
    padding: 34px 18px 14px;
  }

  .hero-copy {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 0;
    text-align: center;
  }

  .hero h1 {
    width: 100%;
    margin: 0 0 15px;
    font-size: clamp(68px, 18vw, 88px);
    line-height: .79;
    letter-spacing: -.045em;
    text-align: center;
  }

  .hero-description {
    max-width: 34ch;
    font-size: clamp(15px, 4vw, 16px);
    line-height: 1.42;
    text-wrap: balance;
  }

  .hero-small {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: .025em;
  }

  .hero-actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: stretch;
    gap: 9px;
    margin-top: 22px;
  }

  .hero-actions .button,
  .hero-actions .hero-secondary {
    min-width: 0;
    min-height: 46px;
    justify-content: center;
    gap: 7px;
    padding: 0 9px;
    font-size: 9px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  .hero-actions .button span,
  .hero-actions .hero-secondary span { margin: 0; font-size: 14px; }

  .hero-scene {
    width: min(100%, 440px);
    aspect-ratio: 1.4;
    margin-top: 22px;
  }

  .hero-plugin.hero-device {
    border: 1px solid #ffffff30;
    border-radius: 8px;
    box-shadow: 0 20px 42px #0008, 0 0 35px color-mix(in srgb,var(--hero-accent) 18%,transparent);
  }

  .hero-machine-strip {
    position: relative;
    width: calc(100% + 36px);
    margin: 4px -18px 0;
    padding: 0 18px 7px;
    gap: 8px;
    grid-template-columns: repeat(7, minmax(80px, 1fr));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hero-machine-strip::-webkit-scrollbar { display: none; }
  .hero-machine-strip button { min-height: 54px; }
  .hero-machine-strip button span { font-size: 8px; }
  .hero-machine-strip button small { font-size: 8px; }

  .hero-baseline {
    gap: 8px;
    padding: 10px 0 13px;
    font-size: 6px;
    letter-spacing: .04em;
  }

  .header-actions > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
  }

  .header-menu-panel .lab-link {
    min-height: 44px;
    padding-inline: 8px;
    line-height: 1.2;
  }

  .header-menu-panel .lab-link span {
    display: inline;
    flex: none;
    margin: 0;
    color: #67e8f4;
  }
}

@media (max-width: 360px) {
  .hero.shell { padding-inline: 15px; }
  .hero h1 { font-size: 66px; }
  .hero-actions { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 7px; }
  .hero-actions .button,
  .hero-actions .hero-secondary { padding-inline: 6px; font-size: 8px; }
  .hero-machine-strip { width: calc(100% + 30px); margin-inline: -15px; padding-inline: 15px; }
}