:where([data-product="g11"]) .g11-hero-img { width: 100%; max-width: 70rem; }
:where([data-product="g11"]) .weight { font-size: 16rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
:where([data-product="g11"]) .weight small { font-size: 4rem; }
:where([data-product="g11"]) .frames { scroll-padding-left: var(--pad); display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem 0 2rem; margin: 0 calc(-1 * var(--pad)); padding-left: var(--pad); scrollbar-width: none; }
:where([data-product="g11"]) .frames::-webkit-scrollbar { display: none; }
:where([data-product="g11"]) .frames figure { flex: none; width: 34rem; height: 20rem; border-radius: var(--radius-l); background: var(--card); display: grid; place-items: center; padding: 2rem; scroll-snap-align: start; }
:where([data-product="g11"]) .frames figure img { max-height: 100%; object-fit: contain; }
:where([data-product="g11"]) .frame-names { display: flex; flex-wrap: wrap; gap: .75rem; }
:where([data-product="g11"]) .frame-names span { font-size: 1.375rem; padding: .5rem 1.125rem; border-radius: 99rem; background: rgba(0,0,0,.05); }
@media (orientation: portrait) {
:where([data-product="g11"]) .weight { font-size: 12rem; }
}
:where([data-product="g11"]) .mt-layout { --mt: #3a6df0; display: grid; grid-template-columns: 36rem 1fr; gap: 3rem; align-items: stretch; }
:where([data-product="g11"]) .mt-layout .copy-col { gap: 1.25rem; max-width: none; }
:where([data-product="g11"]) .mt-layout .h1 { font-size: 4.4rem; }
:where([data-product="g11"]) .mt-glasses { margin-top: .75rem; background: var(--card); border-radius: var(--radius-l); padding: 1.75rem 2rem 1.5rem; box-shadow: 0 .5rem 2rem rgba(0,0,0,.05); }
:where([data-product="g11"]) .mt-glasses > .fine { margin-top: 1rem; }
:where([data-product="g11"]) .mt-temple { position: relative; display: block; width: 100%; height: 11rem; border-radius: var(--radius-m); background: radial-gradient(ellipse 60% 70% at 40% 50%, #f1f3f8, #fff 75%); overflow: hidden; touch-action: manipulation; }
:where([data-product="g11"]) .mt-temple svg { position: absolute; left: 4%; top: 50%; width: 92%; transform: translateY(-50%); }
:where([data-product="g11"]) .mt-temple .pad { transition: fill .3s; }
:where([data-product="g11"]) .mt-temple:active .pad { fill: rgba(58,109,240,.55); }
:where([data-product="g11"]) .mt-ripple { position: absolute; width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; border-radius: 50%; border: .2rem solid var(--mt); background: rgba(58,109,240,.12); pointer-events: none; animation: tap .55s var(--ease-out) both; }
:where([data-product="g11"]) .mt-rings { position: absolute; left: 16%; top: 50%; width: 0; height: 0; pointer-events: none; }
:where([data-product="g11"]) .mt-rings i { position: absolute; width: 18rem; height: 18rem; margin: -9rem 0 0 -9rem; border-radius: 50%; border: .15rem solid var(--mt); opacity: 0; }
:where([data-product="g11"]) [data-mt="rec"] .mt-rings i { animation: g11-mt-ring 2.4s var(--ease) infinite; }
:where([data-product="g11"]) [data-mt="rec"] .mt-rings i:nth-child(2) { animation-delay: .8s; }
:where([data-product="g11"]) [data-mt="rec"] .mt-rings i:nth-child(3) { animation-delay: 1.6s; }
@keyframes g11-mt-ring { from { transform: scale(.15); opacity: .6; } to { transform: scale(1.4); opacity: 0; } }
:where([data-product="g11"]) .mt-ctrl { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.25rem; min-height: 4.5rem; }
:where([data-product="g11"]) .mt-dots { display: flex; gap: .625rem; flex: none; }
:where([data-product="g11"]) .mt-dots i { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(0,0,0,.12); transition: background-color .15s, transform .25s var(--ease-out); }
:where([data-product="g11"]) .mt-dots i.on { background: var(--mt); transform: scale(1.25); }
:where([data-product="g11"]) .mt-say { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
:where([data-product="g11"]) .mt-say b { font-size: 1.75rem; }
:where([data-product="g11"]) .mt-say span { font-size: 1.375rem; color: var(--ink-2); }
:where([data-product="g11"]) .mt-rec { display: none; align-items: center; gap: .625rem; font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #e5382b; }
:where([data-product="g11"]) .mt-rec i { width: 1rem; height: 1rem; border-radius: 50%; background: currentColor; animation: g11-mt-blink 1.2s steps(2, jump-none) infinite; }
@keyframes g11-mt-blink { 50% { opacity: .2; } }
:where([data-product="g11"]) [data-mt="rec"] .mt-rec, :where([data-product="g11"]) [data-mt="sum"] .mt-rec, :where([data-product="g11"]) [data-mt="done"] .mt-rec { display: flex; }
:where([data-product="g11"]) [data-mt="sum"] .mt-rec, :where([data-product="g11"]) [data-mt="done"] .mt-rec { color: var(--ink-3); }
:where([data-product="g11"]) [data-mt="sum"] .mt-rec i, :where([data-product="g11"]) [data-mt="done"] .mt-rec i { animation: none; }
:where([data-product="g11"]) .mt-app { display: flex; flex-direction: column; min-height: 0; height: 50rem; background: var(--card); border-radius: 2.5rem; padding: 1.75rem 2rem 1.5rem; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.08); }
:where([data-product="g11"]) .mt-bar { display: flex; align-items: center; gap: 1rem; font-size: 1.5rem; }
:where([data-product="g11"]) .mt-bar span { font-size: 1.125rem; font-weight: 600; color: var(--ink-3); border: .1rem solid var(--line); border-radius: 99rem; padding: .125rem .75rem; }
:where([data-product="g11"]) .mt-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.25rem; counter-reset: mt; }
:where([data-product="g11"]) .mt-steps li { counter-increment: mt; display: flex; align-items: baseline; gap: .625rem; padding: .875rem 1.25rem; border-radius: var(--radius-m); background: var(--bg-2); color: var(--ink-3); transition: background-color .4s, color .4s; }
:where([data-product="g11"]) .mt-steps li::before { content: "0" counter(mt); font-size: 1.125rem; font-weight: 700; }
:where([data-product="g11"]) .mt-steps b { font-size: 1.625rem; }
:where([data-product="g11"]) .mt-steps span { margin-left: auto; font-size: 1.125rem; font-weight: 600; }
:where([data-product="g11"]) .mt-steps li.on { background: rgba(58,109,240,.1); color: var(--mt); }
:where([data-product="g11"]) .mt-steps li.now { background: var(--mt); color: #fff; }
:where([data-product="g11"]) .mt-wave { display: flex; align-items: center; gap: .3rem; height: 3.5rem; margin: 1.25rem .25rem .5rem; }
:where([data-product="g11"]) .mt-wave i { flex: 1; height: 100%; border-radius: 99rem; background: var(--mt); opacity: .85; transform: scaleY(.06); transition: transform .11s linear; }
:where([data-product="g11"]) [data-mt="idle"] .mt-wave i { background: var(--ink-3); opacity: .35; }
:where([data-product="g11"]) .mt-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
:where([data-product="g11"]) .mt-panes section { min-height: 0; display: flex; flex-direction: column; border-top: .1rem solid var(--line); padding-top: 1rem; }
:where([data-product="g11"]) .mt-panes h4 { font-size: 1.25rem; font-weight: 700; color: var(--ink-2); margin-bottom: .75rem; }
:where([data-product="g11"]) .mt-empty { font-size: 1.375rem; color: var(--ink-3); line-height: 1.5; }
:where([data-product="g11"]) .mt-lines:not(:empty) + .mt-empty, :where([data-product="g11"]) .mt-notes:not(:empty) + .mt-empty { display: none; }
:where([data-product="g11"]) .mt-lines { list-style: none; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; min-height: 0; scrollbar-width: none; }
:where([data-product="g11"]) .mt-lines li { display: flex; gap: .625rem; font-size: 1.5rem; line-height: 1.45; padding: .375rem .625rem; border-radius: .875rem; transition: background-color .35s; }
:where([data-product="g11"]) .mt-lines li .no { flex: none; color: var(--ink-3); }
:where([data-product="g11"]) .mt-lines li:not(.ok) .tx::after { content: ""; display: inline-block; width: .15rem; height: 1.25em; margin-left: .15rem; vertical-align: -.2em; background: var(--mt); animation: g11-mt-blink .8s steps(2, jump-none) infinite; }
:where([data-product="g11"]) .mt-lines li.hl { background: rgba(58,109,240,.12); }
:where([data-product="g11"]) .mt-lines li.hl .no { color: var(--mt); font-weight: 700; }
:where([data-product="g11"]) .mt-notes { overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; min-height: 0; scrollbar-width: none; }
:where([data-product="g11"]) .mt-group { display: flex; flex-direction: column; gap: .5rem; }
:where([data-product="g11"]) .mt-group h5 { font-size: 1.125rem; font-weight: 700; color: var(--mt); letter-spacing: .08em; }
:where([data-product="g11"]) .mt-note { display: flex; align-items: baseline; gap: .625rem; text-align: left; font-size: 1.5rem; line-height: 1.4; padding: .625rem .875rem; border-radius: .875rem; background: var(--bg-2); animation: g11-mt-in .5s var(--ease-out) both; transition: background-color .3s, box-shadow .3s; }
:where([data-product="g11"]) .mt-note b { flex: none; }
:where([data-product="g11"]) .mt-note span { flex: 1; }
:where([data-product="g11"]) .mt-note em { font-style: normal; font-size: 1.125rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
:where([data-product="g11"]) .mt-note.hl { background: rgba(58,109,240,.12); box-shadow: inset 0 0 0 .15rem var(--mt); }
:where([data-product="g11"]) .mt-note.hl em { color: var(--mt); }
@keyframes g11-mt-in { from { opacity: 0; transform: translateY(.75rem); } }
:where([data-product="g11"]) .mt-partial { font-size: 1.25rem; color: var(--ink-2); line-height: 1.45; }
:where([data-product="g11"]) .mt-think { display: flex; gap: .5rem; padding: 1rem 0; }
:where([data-product="g11"]) .mt-think i { width: .875rem; height: .875rem; border-radius: 50%; background: var(--mt); animation: g11-mt-dot 1s var(--ease) infinite; }
:where([data-product="g11"]) .mt-think i:nth-child(2) { animation-delay: .15s; }
:where([data-product="g11"]) .mt-think i:nth-child(3) { animation-delay: .3s; }
@keyframes g11-mt-dot { 50% { transform: translateY(-.5rem); opacity: .4; } }
:where([data-product="g11"]) .mt-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; min-height: 4.5rem; }
:where([data-product="g11"]) .mt-status { flex: 1; font-size: 1.375rem; color: var(--ink-2); }
:where([data-product="g11"]) .mt-again { visibility: hidden; }
:where([data-product="g11"]) [data-mt="done"] .mt-again { visibility: visible; }
@media (orientation: portrait) {
:where([data-product="g11"]) .mt-layout { grid-template-columns: 1fr; gap: 2.5rem; }
:where([data-product="g11"]) .mt-app { height: 50rem; padding: 1.5rem 1.5rem 1.25rem; }
:where([data-product="g11"]) .mt-lines li, :where([data-product="g11"]) .mt-note { font-size: 1.375rem; }
:where([data-product="g11"]) .mt-temple { height: 9rem; }
}
:where([data-product="g11"]) .vc-layout { --mt: #3a6df0; --glow: linear-gradient(90deg, #8a5cff, #3a6df0 50%, #ff8a3d); display: grid; grid-template-columns: 36rem 1fr; gap: 3rem; align-items: stretch; }
:where([data-product="g11"]) .vc-layout .copy-col { gap: 1.25rem; max-width: none; }
:where([data-product="g11"]) .vc-layout .h1 { font-size: 4.4rem; }
:where([data-product="g11"]) .vc-layout .lead { color: var(--dark-ink-2); }
:where([data-product="g11"]) .try.vc-wake { align-self: stretch; margin-top: .75rem; display: flex; flex-direction: column; gap: 1rem; }
:where([data-product="g11"]) .vc-say { display: flex; align-items: center; gap: 1.25rem; text-align: left; padding: 1.25rem 1.75rem; min-height: 7rem; border-radius: var(--radius-l); color: #fff; border: .2rem solid transparent; background: linear-gradient(#1c1c1e, #1c1c1e) padding-box, var(--glow) border-box; transition: transform .2s; }
:where([data-product="g11"]) .vc-say:active { transform: scale(.97); }
:where([data-product="g11"]) .vc-say svg { width: 3rem; height: 3rem; flex: none; color: #8fb0ff; }
:where([data-product="g11"]) .vc-say b { display: block; font-size: 1.875rem; }
:where([data-product="g11"]) .vc-say small { font-size: 1.25rem; color: var(--dark-ink-2); }
:where([data-product="g11"]) .vc-or { font-size: 1.25rem; color: var(--dark-ink-2); text-align: center; }
:where([data-product="g11"]) .vc-hold { position: relative; display: block; width: 100%; height: 10rem; border-radius: var(--radius-l); background: radial-gradient(ellipse 60% 70% at 40% 50%, #f1f3f8, #d9dce4); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:where([data-product="g11"]) .vc-hold > svg:first-child { position: absolute; left: 4%; top: 46%; width: 92%; transform: translateY(-50%); }
:where([data-product="g11"]) .vc-hold > span { position: absolute; right: 1.5rem; top: .875rem; font-size: 1.375rem; font-weight: 700; color: var(--ink); }
:where([data-product="g11"]) .vc-ring { position: absolute; left: 34%; top: 46%; width: 6.5rem; height: 6.5rem; margin: -3.25rem 0 0 -3.25rem; transform: rotate(-90deg); opacity: 0; transition: opacity .15s; pointer-events: none; }
:where([data-product="g11"]) .vc-ring circle { fill: rgba(58,109,240,.15); stroke: var(--mt); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 107; stroke-dashoffset: 107; }
:where([data-product="g11"]) .vc-hold.holding .vc-ring { opacity: 1; }
:where([data-product="g11"]) .vc-hold.holding .vc-ring circle { animation: g11-vc-fill .8s linear forwards; }
@keyframes g11-vc-fill { to { stroke-dashoffset: 0; } }
:where([data-product="g11"]) [data-vc="awake"] .vc-say, :where([data-product="g11"]) [data-vc="hear"] .vc-say, :where([data-product="g11"]) [data-vc="act"] .vc-say { opacity: .45; }
:where([data-product="g11"]) .vc-stage { display: flex; flex-direction: column; min-height: 0; height: 50rem; background: var(--dark-2); border-radius: 2.5rem; padding: 1.75rem 2rem 1.75rem; box-shadow: inset 0 0 0 .1rem rgba(255,255,255,.08); }
:where([data-product="g11"]) .vc-chain { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
:where([data-product="g11"]) .vc-chain li { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .875rem; align-items: center; padding: 1rem 1.25rem; border-radius: var(--radius-m); background: rgba(255,255,255,.06); color: var(--dark-ink-2); transition: background-color .35s, color .35s, box-shadow .35s; }
:where([data-product="g11"]) .vc-chain li + li::before { content: ""; position: absolute; left: -2rem; top: 50%; width: 1.5rem; height: .15rem; background: rgba(255,255,255,.25); }
:where([data-product="g11"]) .vc-chain li + li::after { content: ""; position: absolute; left: -.85rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.18rem; border-top: .15rem solid rgba(255,255,255,.25); border-right: .15rem solid rgba(255,255,255,.25); transform: rotate(45deg); }
:where([data-product="g11"]) .vc-chain svg { grid-row: 1 / 3; width: 2.5rem; height: 2.5rem; }
:where([data-product="g11"]) .vc-chain b { font-size: 1.5rem; color: #fff; }
:where([data-product="g11"]) .vc-chain span { font-size: 1.125rem; }
:where([data-product="g11"]) .vc-chain li.on { background: rgba(58,109,240,.25); color: #cfdcff; box-shadow: inset 0 0 0 .15rem var(--mt), 0 0 2rem rgba(58,109,240,.35); }
:where([data-product="g11"]) .vc-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 1.5rem 0 1rem; overflow: hidden; }
:where([data-product="g11"]) .vc-feed:empty::before { content: "休眠中 · 等你唤醒"; margin: auto; font-size: 2rem; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.18); }
:where([data-product="g11"]) .vc-bubble { max-width: 85%; animation: g11-mt-in .4s var(--ease-out) both; }
:where([data-product="g11"]) .vc-bubble.you { align-self: flex-end; font-size: 2rem; font-weight: 600; color: #fff; padding: .875rem 1.5rem; border-radius: 1.5rem; border: .2rem solid transparent; background: linear-gradient(#26262a, #26262a) padding-box, var(--glow) border-box; box-shadow: 0 0 2rem rgba(138,92,255,.25); min-height: 4.5rem; }
:where([data-product="g11"]) .vc-bubble.card { align-self: flex-start; display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-m); background: #fff; color: var(--ink); min-width: 30rem; }
:where([data-product="g11"]) .vc-bubble.card i { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--mt); color: #fff; }
:where([data-product="g11"]) .vc-bubble.card i svg { width: 2.25rem; height: 2.25rem; }
:where([data-product="g11"]) .vc-bubble.card b { display: block; font-size: 1.75rem; }
:where([data-product="g11"]) .vc-bubble.card span { font-size: 1.25rem; color: var(--ink-2); }
:where([data-product="g11"]) .vc-bubble.card em { margin-left: auto; align-self: flex-start; font-style: normal; font-size: 1.125rem; font-weight: 600; color: var(--ink-3); }
:where([data-product="g11"]) .vc-bubble.reply { align-self: flex-start; font-size: 1.625rem; color: var(--dark-ink); padding-left: 1.5rem; border-left: .25rem solid var(--mt); }
:where([data-product="g11"]) .vc-bubble.reply small { display: block; font-size: 1.125rem; font-weight: 600; color: var(--dark-ink-2); margin-bottom: .25rem; }
:where([data-product="g11"]) .vc-status { font-size: 1.375rem; color: var(--dark-ink-2); min-height: 2rem; margin-bottom: 1rem; }
:where([data-product="g11"]) [data-vc="awake"] .vc-status { color: #8fb0ff; font-weight: 600; }
:where([data-product="g11"]) .vc-cmds { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
:where([data-product="g11"]) .vc-cmds > span { font-size: 1.125rem; font-weight: 700; color: var(--dark-ink-2); margin-right: .25rem; }
:where([data-product="g11"]) .vc-cmd { min-height: 4.5rem; padding: 0 1.5rem; border-radius: 99rem; font-size: 1.5rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); transition: opacity .3s, background-color .3s, transform .2s; }
:where([data-product="g11"]) .vc-cmd:disabled { opacity: .35; }
:where([data-product="g11"]) .vc-cmd:not(:disabled) { background: rgba(58,109,240,.3); box-shadow: inset 0 0 0 .15rem var(--mt); animation: g11-vc-pulse 1.6s var(--ease) infinite; }
:where([data-product="g11"]) .vc-cmd:not(:disabled):active { transform: scale(.96); }
@keyframes g11-vc-pulse { 50% { box-shadow: inset 0 0 0 .15rem var(--mt), 0 0 1.5rem rgba(58,109,240,.6); } }
@media (orientation: portrait) {
:where([data-product="g11"]) .vc-layout { grid-template-columns: 1fr; gap: 2.5rem; }
:where([data-product="g11"]) .try.vc-wake { flex-direction: row; align-items: stretch; }
:where([data-product="g11"]) .vc-wake > button { flex: 1; }
:where([data-product="g11"]) .vc-hold { height: auto; min-height: 7rem; }
:where([data-product="g11"]) .vc-or { flex: none; align-self: center; }
:where([data-product="g11"]) .vc-stage { height: 52rem; }
}
:where([data-product="g11"]) .g11-stats { list-style: none; display: flex; gap: 3rem; margin-top: .5rem; }
:where([data-product="g11"]) .g11-stats b { display: block; font-size: 3.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
:where([data-product="g11"]) .g11-stats small { font-size: 1.5rem; font-weight: 600; margin-left: .25rem; letter-spacing: 0; }
:where([data-product="g11"]) .g11-stats span { font-size: 1.375rem; color: var(--ink-2); }
:where([data-product="g11"]) .g11-sound { max-width: 54rem; }
:where([data-product="g11"]) .g11-ears { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem; }
:where([data-product="g11"]) .g11-ears section { background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(1.5rem); backdrop-filter: blur(1.5rem); border-radius: var(--radius-l); padding: 1.75rem 2rem; box-shadow: inset 0 0 0 .1rem rgba(255,255,255,.1); }
:where([data-product="g11"]) .g11-ears h3 { font-size: 2.5rem; font-weight: 700; margin-bottom: .75rem; color: #8fb0ff; }
:where([data-product="g11"]) .g11-ears ul { list-style: none; display: grid; gap: .625rem; font-size: 1.625rem; line-height: 1.35; }
:where([data-product="g11"]) .g11-control { max-width: 50rem; }
:where([data-product="g11"]) .g11-gest { list-style: none; display: grid; gap: .875rem; margin-top: 1rem; }
:where([data-product="g11"]) .g11-gest .row { display: grid; grid-template-columns: 11rem 1fr auto; align-items: center; gap: 1.25rem; width: 100%; min-height: 5.5rem; padding: .875rem 1.75rem; border-radius: var(--radius-m); background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); box-shadow: 0 .25rem 1.5rem rgba(0,0,0,.06); text-align: left; }
:where([data-product="g11"]) .g11-gest b { font-size: 1.875rem; white-space: nowrap; }
:where([data-product="g11"]) .g11-gest span { font-size: 1.5rem; color: var(--ink-2); }
:where([data-product="g11"]) .g11-gest .go { box-shadow: inset 0 0 0 .15rem var(--accent), 0 .25rem 1.5rem rgba(58,109,240,.12); transition: transform .2s var(--ease); }
:where([data-product="g11"]) .g11-gest .go:active { transform: scale(.98); }
:where([data-product="g11"]) .g11-gest .go b { color: var(--accent); }
:where([data-product="g11"]) .g11-gest em { display: flex; align-items: center; gap: .375rem; font-style: normal; font-size: 1.25rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
:where([data-product="g11"]) .g11-gest em svg { width: 1.375rem; height: 1.375rem; }
:where([data-product="g11"]) .g11-gest .head { grid-template-columns: 2.75rem auto 1fr; margin-top: .5rem; }
:where([data-product="g11"]) .g11-gest .head svg { width: 2.75rem; height: 2.75rem; color: var(--accent); }
@media (orientation: portrait) {
:where([data-product="g11"]) .g11-stats { gap: 2.5rem; }
:where([data-product="g11"]) .g11-sound, :where([data-product="g11"]) .g11-control { max-width: none; }
:where([data-product="g11"]) .chap[data-key="sound"] .bg, :where([data-product="g11"]) .chap[data-key="control"] .bg { top: auto; height: 62%; object-position: 70% 30%; }
:where([data-product="g11"]) .chap[data-key="control"] .shade-l.light { background: linear-gradient(180deg, #fff 0%, #fff 38%, rgba(255,255,255,.85) 48%, rgba(255,255,255,0) 66%); }
:where([data-product="g11"]) .chap[data-key="sound"] .shade-l { background: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.7) 48%, rgba(0,0,0,0) 66%); }
:where([data-product="g11"]) .chap[data-key="control"] { background: #fff; }
}