:where([data-product="x8ultra"]) .detach-stage { position: relative; width: 100%; height: 100%; max-height: min(52rem, calc(100vh - var(--nav-h) - 9rem)); aspect-ratio: 1; border-radius: 2rem; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 42%, #fbfaf8 0%, #eeecea 62%, #e4e2df 100%); touch-action: none; user-select: none; -webkit-user-select: none; }
:where([data-product="x8ultra"]) .detach-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%); opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), transform .9s var(--ease-out); }
:where([data-product="x8ultra"]) .detach-stage.is-fallback > img { visibility: visible; }
:where([data-product="x8ultra"]) .detach-stage.is-fallback .im-stand { opacity: 1; }
:where([data-product="x8ultra"]) .detach-stage.is-fallback .im-detached { transform: translateY(3%) scale(.96); }
:where([data-product="x8ultra"]) .detach-stage.is-fallback.is-detached .im-stand { opacity: 0; transform: translateY(-4%) scale(1.02); }
:where([data-product="x8ultra"]) .detach-stage.is-fallback.is-detached .im-detached { opacity: 1; transform: none; }
:where([data-product="x8ultra"]) .mv-rooms { position: absolute; inset: 0; overflow: hidden; }
:where([data-product="x8ultra"]) .mv-rooms img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: 0; filter: blur(3px) saturate(.95); will-change: transform, opacity; }
:where([data-product="x8ultra"]) .mv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; opacity: 0; animation: x8ultra-mv-in .8s .1s var(--ease) forwards; }
:where([data-product="x8ultra"]) .mv-readout { position: absolute; left: 1.5rem; top: 1.25rem; max-width: min(30rem, calc(100% - 3rem)); display: grid; gap: .25rem; padding: 1rem 1.25rem; border-radius: 1.25rem; background: rgba(255,255,255,.76); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transform: translateY(-.5rem); transition: opacity .35s, transform .35s var(--ease-out); pointer-events: none; }
:where([data-product="x8ultra"]) .mv-readout.on { opacity: 1; transform: none; }
:where([data-product="x8ultra"]) .mv-readout b { font-size: 2.25rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
:where([data-product="x8ultra"]) .mv-readout span { font-size: 1.125rem; line-height: 1.35; color: var(--ink-2); }
:where([data-product="x8ultra"]) .mv-caption { font-style: normal; font-size: 1.25rem; line-height: 1.4; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 0; opacity: 0; transition: opacity .3s, max-height .3s var(--ease-out); }
:where([data-product="x8ultra"]) .mv-caption.on { max-height: 2rem; opacity: 1; }
:where([data-product="x8ultra"]) .mv-modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; width: 100%; }
:where([data-product="x8ultra"]) .mv-try { display: block; align-self: stretch; margin-top: 3.5rem; }
:where([data-product="x8ultra"]) .mv-try .try-hint { left: 0; top: -3.5rem; margin: 0; }
:where([data-product="x8ultra"]) .mv-modes button { display: grid; gap: .35rem; justify-items: start; text-align: left; padding: 1.1rem 1rem; border-radius: var(--radius-m); background: rgba(0,0,0,.05); color: var(--ink); transition: background .25s, color .25s, transform .2s; }
:where([data-product="x8ultra"]) .mv-modes button:active { transform: scale(.97); }
:where([data-product="x8ultra"]) .mv-modes button b { font-size: 2rem; line-height: 1; }
:where([data-product="x8ultra"]) .mv-modes button span { font-size: 1.125rem; color: var(--ink-2); line-height: 1.3; }
:where([data-product="x8ultra"]) .mv-modes button[aria-pressed="true"] { background: var(--ink); color: #fff; }
:where([data-product="x8ultra"]) .mv-modes button[aria-pressed="true"] span { color: rgba(255,255,255,.72); }
@keyframes x8ultra-mv-in { to { opacity: 1; } }
:where([data-product="x8ultra"]) .gain-demo { --scr: .4667; width: 100%; max-width: 52rem; display: grid; gap: 2.5rem; }
:where([data-product="x8ultra"]) .gain-bar { position: relative; height: 4.5rem; border-radius: 2.25rem; overflow: hidden; }
:where([data-product="x8ultra"]) .gain-bar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; }
:where([data-product="x8ultra"]) .gain-bar .gb-screen { background: linear-gradient(90deg, #5b3fe0, #9b82ff); transition: transform .7s var(--ease-out); }
:where([data-product="x8ultra"]) .gain-bar .gb-base { background: var(--ink); transform: scaleX(0); opacity: 0; transition: transform 1.3s var(--ease-out), opacity .2s; }
:where([data-product="x8ultra"]) .zoomed .gain-bar .gb-screen { transform: scaleX(var(--scr)); }
:where([data-product="x8ultra"]) .revealed .gain-bar .gb-base { transform: scaleX(1); opacity: 1; }
:where([data-product="x8ultra"]) .gain-axis { position: relative; height: 2.5rem; font-size: 1.5rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
:where([data-product="x8ultra"]) .gain-axis > * { position: absolute; top: 0; white-space: nowrap; }
:where([data-product="x8ultra"]) .gain-axis .ax-0 { left: 0; }
:where([data-product="x8ultra"]) .gain-axis .ax-screen { left: 100%; transform: translateX(-100%); color: #6a4ff0; transition: left .7s var(--ease-out), transform .7s var(--ease-out); }
:where([data-product="x8ultra"]) .gain-axis .ax-plus { left: calc((1 + var(--scr)) * 50%); transform: translateX(-50%); color: var(--ink); }
:where([data-product="x8ultra"]) .gain-axis .ax-base { right: 0; color: var(--ink); }
:where([data-product="x8ultra"]) .gain-axis .ax-plus, :where([data-product="x8ultra"]) .gain-axis .ax-base { opacity: 0; visibility: hidden; transition: opacity .4s .9s, visibility 0s 1.3s; }
:where([data-product="x8ultra"]) .zoomed .gain-axis .ax-screen { left: calc(var(--scr) * 100%); transform: translateX(-50%); }
:where([data-product="x8ultra"]) .revealed .gain-axis .ax-plus, :where([data-product="x8ultra"]) .revealed .gain-axis .ax-base { opacity: 1; visibility: visible; transition: opacity .4s .9s, visibility 0s .9s; }
:where([data-product="x8ultra"]) .chooser { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
:where([data-product="x8ultra"]) .quiz { position: relative; background: var(--card); border-radius: var(--radius-l); padding: 2.5rem; display: grid; gap: 1.5rem; min-height: 34rem; align-content: start; }
:where([data-product="x8ultra"]) .quiz .step { font-size: 1.25rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; }
:where([data-product="x8ultra"]) .quiz .q { font-size: 2.5rem; font-weight: 700; line-height: 1.25; }
:where([data-product="x8ultra"]) .quiz .opts { display: grid; gap: 1rem; }
:where([data-product="x8ultra"]) .quiz .opt { min-height: 6rem; text-align: left; padding: 1.25rem 1.75rem; border-radius: var(--radius-m); background: var(--bg-2); font-size: 1.625rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; transition: background-color .2s, transform .2s; }
:where([data-product="x8ultra"]) .quiz .opt small { display: block; font-size: 1.25rem; font-weight: 400; color: var(--ink-2); }
:where([data-product="x8ultra"]) .quiz .opt:active { transform: scale(.98); background: #e8e8ed; }
:where([data-product="x8ultra"]) .quiz .opt svg { width: 1.5rem; height: 1.5rem; flex: none; }
:where([data-product="x8ultra"]) .quiz .result { display: grid; gap: 1rem; }
:where([data-product="x8ultra"]) .quiz .result .name { font-size: 4rem; font-weight: 700; }
:where([data-product="x8ultra"]) .quiz .result ul { list-style: none; display: grid; gap: .5rem; font-size: 1.5rem; }
:where([data-product="x8ultra"]) .quiz .result li::before { content: "✓"; color: #34c759; font-weight: 700; margin-right: .75rem; }
:where([data-product="x8ultra"]) .quiz .restart { justify-self: start; }
:where([data-product="x8ultra"]) .ftable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border-radius: var(--radius-l); overflow: hidden; font-size: 1.375rem; }
:where([data-product="x8ultra"]) .ftable th, :where([data-product="x8ultra"]) .ftable td { padding: 1.125rem 1.25rem; text-align: center; border-bottom: 1px solid var(--line); }
:where([data-product="x8ultra"]) .ftable th:first-child, :where([data-product="x8ultra"]) .ftable td:first-child { text-align: left; color: var(--ink-2); font-weight: 500; width: 9rem; }
:where([data-product="x8ultra"]) .ftable thead th { font-size: 1.75rem; font-weight: 700; padding-top: 1.75rem; }
:where([data-product="x8ultra"]) .ftable tr:last-child td { border-bottom: 0; }
:where([data-product="x8ultra"]) .ftable .hl { background: rgba(0,113,227,.07); }
:where([data-product="x8ultra"]) .ftable thead .hl { color: var(--accent); }
:where([data-product="x8ultra"]) .ftable .na { color: #c7c7cc; }
:where([data-product="x8ultra"]) .color-stage img.fill { object-fit: cover; }
:where([data-product="x8ultra"]) .sound-layout { display: grid; grid-template-columns: 34rem minmax(0, 1fr); gap: 3.5rem; align-items: center; height: 100%; }
:where([data-product="x8ultra"]) .sound-layout .copy-col { gap: 1.25rem; }
:where([data-product="x8ultra"]) .sound-layout .h1 { font-size: 4.4rem; }
:where([data-product="x8ultra"]) .sound-layout .seg { align-self: flex-start; }
:where([data-product="x8ultra"]) .sound-layout .sdev { color: #8ef0b0; min-height: 1.5em; }
:where([data-product="x8ultra"]) .sctrl { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }
:where([data-product="x8ultra"]) .splay { min-width: 13rem; }
:where([data-product="x8ultra"]) .splay svg { width: 1.6rem; height: 1.6rem; }
:where([data-product="x8ultra"]) .splay .i-stop { display: none; }
:where([data-product="x8ultra"]) .splay[aria-pressed="true"] { background: #fff; color: #000; }
:where([data-product="x8ultra"]) .splay[aria-pressed="true"] .i-play { display: none; }
:where([data-product="x8ultra"]) .splay[aria-pressed="true"] .i-stop { display: block; }
:where([data-product="x8ultra"]) .svol-row { display: flex; align-items: center; gap: 1rem; max-width: 26rem; color: var(--dark-ink-2); }
:where([data-product="x8ultra"]) .svol-row svg { width: 2rem; height: 2rem; flex: none; }
:where([data-product="x8ultra"]) .svol-row input[type=range].big::-webkit-slider-runnable-track { background: linear-gradient(90deg, #a08bff var(--p, 60%), rgba(255,255,255,.2) var(--p, 60%)); }
:where([data-product="x8ultra"]) .sstage { position: relative; display: block; align-self: center; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - var(--nav-h) - 9rem); border-radius: 1.5rem; overflow: hidden; touch-action: none;
  background: radial-gradient(120% 90% at 50% 40%, #1d1636 0%, #0b0a12 60%, #050508 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 3rem 8rem rgba(0,0,0,.6); }
:where([data-product="x8ultra"]) .sstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
:where([data-product="x8ultra"]) .slab { position: absolute; top: 42%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 700; color: rgba(255,255,255,.4); pointer-events: none; }
:where([data-product="x8ultra"]) .smeter { position: absolute; top: 12%; bottom: 12%; width: 1.25rem; border-radius: 1rem; background: rgba(255,255,255,.08); overflow: hidden; pointer-events: none; }
:where([data-product="x8ultra"]) .smeter i { position: absolute; inset: 0; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(0deg, #34c759, #ffd60a 75%, #ff453a); border-radius: 1rem; transition: transform .06s linear; }
:where([data-product="x8ultra"]) .sorb { position: absolute; top: 42%; left: 50%; width: 7rem; height: 7rem; margin: -3.5rem 0 0 -3.5rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 40% 35%, #fff 0%, #d9ceff 30%, #7b5cff 70%, rgba(123,92,255,0) 72%); box-shadow: 0 0 4rem rgba(140,110,255,.6); transition: opacity .3s; }
:where([data-product="x8ultra"]) .sorb i { position: absolute; inset: -1rem; border-radius: 50%; border: .2rem solid rgba(200,185,255,.5); animation: ring 2.4s var(--ease-out) infinite; }
:where([data-product="x8ultra"]) .sstage .sorb + .shint, :where([data-product="x8ultra"]) .shint { left: 50%; top: auto; bottom: 1.75rem; margin: 0; transform: translateX(-50%); animation: none; }
:where([data-product="x8ultra"]) .chap[data-mode="music"] .sorb, :where([data-product="x8ultra"]) .chap[data-mode="music"] .slab { opacity: 0; }
@media (orientation: portrait) {
:where([data-product="x8ultra"]) .detach-stage { aspect-ratio: 4 / 3.4; max-height: none; }
:where([data-product="x8ultra"]) .gain-demo { max-width: none; }
:where([data-product="x8ultra"]) .sound-layout { grid-template-columns: 1fr; gap: 2rem; align-content: start; }
:where([data-product="x8ultra"]) .sstage { max-height: none; aspect-ratio: 4 / 3; }
}
@media (orientation: portrait) {
:where([data-product="x8ultra"]) .chooser { grid-template-columns: 1fr; gap: 2rem; }
:where([data-product="x8ultra"]) .cell .jar { height: 16rem; }
}
:where([data-product="x8ultra"]) .pv .copy-col { gap: 1.25rem; }
:where([data-product="x8ultra"]) .pv-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden; background: #000; box-shadow: 0 0 0 .5rem #1c1c1e, 0 2rem 4rem rgba(0,0,0,.6); }
:where([data-product="x8ultra"]) .chap.dark .pv-frame img { width: 100%; height: 100%; max-height: none; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
:where([data-product="x8ultra"]) .pv-mark { position: absolute; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; border-radius: 50%; border: .25rem solid rgba(255,255,255,.9); box-shadow: 0 0 0 .5rem rgba(255,255,255,.18); opacity: 0; transition: left .6s var(--ease), top .6s var(--ease), opacity .3s; animation: x8ultra-pv-pulse 2s var(--ease) infinite; pointer-events: none; }
:where([data-product="x8ultra"]) .pv-frame[data-view="color"] .pv-mark, :where([data-product="x8ultra"]) .pv-frame[data-view="light"] .pv-mark { opacity: 1; }
@keyframes x8ultra-pv-pulse { 50% { transform: scale(1.12); } }
:where([data-product="x8ultra"]) .pv-walk { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: none; gap: 1rem; align-items: center; font-size: 1.5rem; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); padding: .5rem 1.25rem; border-radius: 99rem; }
:where([data-product="x8ultra"]) .pv-walk i { font-style: normal; animation: x8ultra-pv-walk 1.6s var(--ease) infinite alternate; }
:where([data-product="x8ultra"]) .pv-walk i:first-child { animation-direction: alternate-reverse; }
@keyframes x8ultra-pv-walk { to { transform: translateX(.5rem); } }
:where([data-product="x8ultra"]) .pv-frame.here[data-view="angle"] .pv-walk { display: flex; }
:where([data-product="x8ultra"]) .pv-panel { min-height: 13rem; display: flex; flex-direction: column; gap: .75rem; }
:where([data-product="x8ultra"]) .pv-k { font-size: 1.75rem; font-weight: 700; }
:where([data-product="x8ultra"]) .pv-nums { display: flex; gap: 3rem; }
:where([data-product="x8ultra"]) .pv-nums b { display: block; font-size: 4.5rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:where([data-product="x8ultra"]) .pv-nums b small { font-size: 1.75rem; margin-left: .25rem; letter-spacing: 0; }
:where([data-product="x8ultra"]) .pv-nums span { font-size: 1.25rem; color: var(--dark-ink-2); }
:where([data-product="x8ultra"]) .pv-chips { display: flex; flex-wrap: wrap; gap: .75rem; }
:where([data-product="x8ultra"]) .pv-chips span { font-size: 1.375rem; font-weight: 600; padding: .625rem 1.125rem; border-radius: 1rem; background: rgba(255,255,255,.1); }
:where([data-product="x8ultra"]) .pv-look { display: flex; gap: .5rem; align-items: center; font-size: 1.375rem; font-weight: 600; color: #8ef0b0; }
:where([data-product="x8ultra"]) .pv-look svg { width: 1.75rem; height: 1.75rem; flex: none; }
@media (orientation: portrait) {
:where([data-product="x8ultra"]) .pv-nums b { font-size: 3.75rem; }
:where([data-product="x8ultra"]) .pv-panel { min-height: 0; }
}
:where([data-product="x8ultra"]) .sspecs { display: flex; gap: 2rem; }
:where([data-product="x8ultra"]) .sspecs b { display: block; font-size: 2.75rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
:where([data-product="x8ultra"]) .sspecs b small { font-size: 1.25rem; margin-left: .125rem; }
:where([data-product="x8ultra"]) .sspecs span { font-size: 1.125rem; color: var(--dark-ink-2); }

@media (orientation: portrait) {
:where([data-product="x8ultra"]) .pv,
:where([data-product="x8ultra"]) .sound-layout { min-height: 0; grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
:where([data-product="x8ultra"]) .pv .copy-col,
:where([data-product="x8ultra"]) .sound-layout .copy-col { max-width: none; }
:where([data-product="x8ultra"]) .pv .media-col { container-type: size; }
:where([data-product="x8ultra"]) .pv-frame { width: min(100cqw, calc(100cqh * 16 / 9)); max-height: 100%; }
:where([data-product="x8ultra"]) .sstage { height: 100%; min-height: 0; aspect-ratio: auto; align-self: stretch; }
}
:where([data-product="x8ultra"]) .try-hint.shint { padding: .5rem 1.25rem; border-radius: 99rem; color: #fff; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }