:where([data-product="monitors"]) .zones-layout { display: grid; grid-template-columns: 30rem minmax(0, 1fr); gap: 3.5rem; align-items: center; height: 100%; }
:where([data-product="monitors"]) .zones-layout .copy-col { gap: 1.25rem; }
:where([data-product="monitors"]) .zgroup { display: grid; gap: .5rem; margin-top: .5rem; justify-items: start; }
:where([data-product="monitors"]) .zgrid { align-self: flex-start; }
:where([data-product="monitors"]) .zstage { position: relative; display: block; align-self: center; width: min(100%, calc((100vh - var(--nav-h) - 9rem) * 16 / 9)); margin: 0 auto;
  padding: .55rem; border-radius: 1.5rem; background: linear-gradient(180deg, #2a2a2e, #141416); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 3rem 8rem rgba(0,0,0,.6);
  touch-action: none; cursor: grab; }
:where([data-product="monitors"]) .zstage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 1rem; background: #000; }
:where([data-product="monitors"]) .zlab { position: absolute; bottom: 1.75rem; font-size: 1.25rem; font-weight: 600; color: #fff; padding: .4rem 1rem; border-radius: 99rem; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
:where([data-product="monitors"]) .zlab-l { left: 1.75rem; }
:where([data-product="monitors"]) .zlab-r { right: 1.75rem; background: rgba(94,224,200,.16); border-color: rgba(94,224,200,.5); color: #b9fff1; }
:where([data-product="monitors"]) .zdiv { position: absolute; top: 12%; width: 0; height: 0; pointer-events: none; }
:where([data-product="monitors"]) .zdiv i { position: absolute; left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 .5rem 2rem rgba(0,0,0,.5); }
:where([data-product="monitors"]) .zdiv i svg { width: 2rem; height: 2rem; }
:where([data-product="monitors"]) .zhint { left: 50%; top: auto; bottom: 1.75rem; transform: translateX(-50%); margin: 0; animation: none; }
@media (orientation: portrait) {
:where([data-product="monitors"]) .zones-layout { grid-template-columns: 1fr; gap: 2rem; align-content: start; }
:where([data-product="monitors"]) .zstage { width: 100%; }
}
:where([data-product="monitors"]) .uses { display: flex; gap: 1rem; flex-wrap: wrap; }
:where([data-product="monitors"]) .models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2rem; }
:where([data-product="monitors"]) .model { background: #1c1c1e; border-radius: var(--radius-l); padding: 2rem; display: flex; flex-direction: column; gap: .75rem; transition: opacity .4s, transform .4s var(--ease-out), box-shadow .4s; min-height: 26rem; }
:where([data-product="monitors"]) .model .m-size { font-size: 1.25rem; color: var(--dark-ink-2); font-weight: 600; }
:where([data-product="monitors"]) .model .m-name { font-size: 2.75rem; font-weight: 700; line-height: 1.1; }
:where([data-product="monitors"]) .model .m-name small { font-size: 1.25rem; color: var(--dark-ink-2); margin-left: .5rem; font-weight: 500; }
:where([data-product="monitors"]) .model ul { list-style: none; display: grid; gap: .5rem; font-size: 1.375rem; color: #e5e5ea; }
:where([data-product="monitors"]) .model .btn { margin-top: auto; }
:where([data-product="monitors"]) .model.dim { opacity: .35; transform: scale(.97); }
:where([data-product="monitors"]) .model.pick { box-shadow: 0 0 0 .25rem #5ee0c8; transform: translateY(-.5rem); }
@media (orientation: portrait) {
:where([data-product="monitors"]) .models { grid-template-columns: 1fr 1fr; }
}
:where([data-product="monitors"]) .try-hint.zhint { padding: .5rem 1.25rem; border-radius: 99rem; color: #fff; background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }