@import url('variants.css');
.pd-vista-toolbar { display:grid; gap:var(--pd-space-1); }
.pd-vista-toolbar-row { display:flex; flex-wrap:wrap; align-items:center; gap:var(--pd-space-2); }
.pd-vista-toolbar-row > a { color:var(--pd-vista-copy); font-size:var(--pd-fs-xs); text-decoration:none; }
.pd-vista-toolbar-row > a:first-of-type { margin-left:auto; }
.pd-vista-collection { margin-top:var(--pd-space-4); }
.pd-vista-collection[hidden] { display:none; }
.pd-vista-collection > header h2,.pd-vista-comparison > header h2 { margin:0; color:var(--pd-vista-ink); font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); }
.pd-vista-collection > header small { margin-left:var(--pd-space-2); font-size:var(--pd-fs-xs); color:var(--pd-vista-copy); }
.pd-vista-collection > header p,.pd-vista-comparison > header p { margin:var(--pd-space-1) 0 var(--pd-space-3); color:var(--pd-vista-copy); font-size:var(--pd-fs-xs); }
.pd-vista-option-head h3 { margin:0; color:var(--pd-vista-ink); font-size:var(--pd-fs-md); font-weight:var(--pd-fw-semibold); }
.pd-vista-option-head h3 span { margin-right:var(--pd-space-1); color:var(--pd-vista-blue); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-medium); }
.pd-vista-option-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--pd-space-1); }
.pd-vista-description { min-height:calc(var(--pd-fs-xs) * var(--pd-lh-normal) * 2); }
.pd-vista-comparison { margin-top:var(--pd-space-5); scroll-margin-top:calc(var(--pd-space-5) * 5); }
.pd-vista-compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-space-4); }
.pd-vista-compare-grid > article { padding:var(--pd-card-padding); border:1px solid var(--pd-vista-line); border-radius:var(--pd-card-radius-lg); background:var(--pd-vista-white); }
.pd-vista-compare-grid h3 { margin:0 0 var(--pd-space-2); color:var(--pd-vista-ink); font-size:var(--pd-fs-sm); font-weight:var(--pd-fw-medium); }
.pd-vista-scene-section { scroll-margin-top:calc(var(--pd-space-5) * 5); }
.pd-vista-family-aero,.pd-vista-family-aqua {
    --pd-vista-shadow:0 var(--pd-vista-depth) 0 var(--pd-vista-edge),0 calc(var(--pd-space-1) / 2) var(--pd-space-1) #12387626;
}
.pd-vista-family-aero {
    background:linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) var(--pd-vista-a-top),#fff) 0%,color-mix(in srgb,var(--pd-vista-blue) var(--pd-vista-a-mid),#fff) var(--pd-vista-a-band),var(--pd-vista-blue) var(--pd-vista-a-break),color-mix(in srgb,var(--pd-vista-blue) var(--pd-vista-a-shade),#000) 100%);
    box-shadow:inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #81bcff70,inset 1px 0 0 #ffffff2c,inset -1px 0 0 #ffffff2c,var(--pd-vista-shadow);
}
.pd-vista-family-aero::before { content:''; position:absolute; inset-inline:var(--pd-space-4); bottom:0; height:42%; border-radius:50%; background:radial-gradient(ellipse at 50% 120%,#65baff88,transparent 70%); }
.pd-vista-a02 { box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #81bcff30,var(--pd-vista-shadow); }
.pd-vista-a02::before { opacity:.4; }
.pd-vista-a03 { background:linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 67%,#fff),color-mix(in srgb,var(--pd-vista-blue) 90%,#fff) 42%,var(--pd-vista-blue) 52%,color-mix(in srgb,var(--pd-vista-blue) 91%,#000)); }
.pd-vista-a03::before { opacity:.45; }
.pd-vista-a04::before { height:28%; opacity:.4; }
.pd-vista-a05::before { height:55%; inset-inline:var(--pd-space-1); background:radial-gradient(ellipse at 50% 125%,#91d4ffcc,transparent 72%); }
.pd-vista-a06::after { content:''; position:absolute; inset:1px; border:1px solid #ffffff50; border-radius:calc(var(--pd-btn-radius) - var(--pd-tab-indicator)); }
.pd-vista-a07 { background:linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 78%,#fff),var(--pd-vista-blue) 50%,color-mix(in srgb,var(--pd-vista-blue) 88%,#000)); }
.pd-vista-a07::before { top:1px; bottom:auto; inset-inline:1px; height:43%; border-radius:var(--pd-btn-radius) var(--pd-btn-radius) 50% 50%; background:linear-gradient(#ffffff32,#ffffff12); }
.pd-vista-a08::after { content:''; position:absolute; inset:1px; border-radius:var(--pd-btn-radius); background:linear-gradient(112deg,transparent 35%,#ffffff22 49%,#ffffff08 56%,transparent 69%); }
.pd-vista-a09 { box-shadow:inset 0 1px 0 #ffffff5c,0 1px 0 var(--pd-vista-edge),0 calc(var(--pd-space-1) / 4) calc(var(--pd-space-1) * .75) #1238761a; }
.pd-vista-a09::before { opacity:.3; }
.pd-vista-a10 { box-shadow:inset 0 1px 0 #ffffffd0,inset 0 -1px 0 #81bcff50,var(--pd-vista-shadow); }
.pd-vista-family-aqua {
    background:radial-gradient(ellipse 88% 115% at 50% -62%,#ffffffa6,transparent 72%),radial-gradient(ellipse 65% 80% at 50% 124%,#60c1ff99,transparent 78%),linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 92%,#000),var(--pd-vista-blue) 62%,color-mix(in srgb,var(--pd-vista-blue) 82%,#000));
    box-shadow:inset 0 1px 1px #ffffffad,inset 0 -1px 1px #84c4ff80,inset 1px 0 1px #ffffff3b,inset -1px 0 1px #ffffff3b,var(--pd-vista-shadow);
}
.pd-vista-family-aqua::before { content:''; position:absolute; inset:1px 5% auto; height:41%; border-radius:var(--pd-radius-md) var(--pd-radius-md) 50% 50%; background:linear-gradient(#ffffff30,transparent); }
.pd-vista-w02 { background:linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 90%,#000),var(--pd-vista-blue) 60%,color-mix(in srgb,var(--pd-vista-blue) 91%,#000)); }
.pd-vista-w02::before { inset-inline:2%; height:23%; background:linear-gradient(#ffffff5c,transparent); }
.pd-vista-w03::before { inset-inline:1%; height:46%; background:linear-gradient(#ffffff66,#ffffff10); border-radius:var(--pd-radius-md) var(--pd-radius-md) 70% 70%; }
.pd-vista-w04 { background:radial-gradient(ellipse 70% 110% at 15% -35%,#ffffff75,transparent 70%),radial-gradient(ellipse 60% 80% at 55% 124%,#60c1ff60,transparent 78%),linear-gradient(var(--pd-vista-blue),color-mix(in srgb,var(--pd-vista-blue) 89%,#000)); }
.pd-vista-w04::before { inset-inline:2% 25%; height:34%; background:linear-gradient(110deg,#ffffff24,transparent); }
.pd-vista-w05::before { height:26%; background:linear-gradient(#ffffff4f,transparent); }
.pd-vista-w05::after { content:''; position:absolute; inset:calc(var(--pd-space-1) / 2) 8% auto; height:20%; border-top:1px solid #ffffff66; border-radius:50%; }
.pd-vista-w06 { background:radial-gradient(ellipse 70% 100% at 50% 120%,#76ceffab,transparent 76%),linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 96%,#000),var(--pd-vista-blue) 60%,color-mix(in srgb,var(--pd-vista-blue) 88%,#000)); }
.pd-vista-w06::before { top:auto; bottom:1px; inset-inline:5%; height:16%; background:linear-gradient(transparent,#ffffff19); }
.pd-vista-w07 { background:radial-gradient(ellipse 80% 110% at 50% -50%,#ffffff66,transparent 72%),radial-gradient(ellipse 60% 90% at 50% 130%,#60c1ff70,transparent 78%),linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 76%,#000),color-mix(in srgb,var(--pd-vista-blue) 92%,#000) 62%,color-mix(in srgb,var(--pd-vista-blue) 78%,#000)); }
.pd-vista-w07::after { content:''; position:absolute; inset:1px; border:1px solid #ffffff5c; border-radius:calc(var(--pd-radius-md) - var(--pd-tab-indicator)); }
.pd-vista-w08::before { inset-inline:8%; height:45%; background:linear-gradient(#ffffff44,#ffffff09); border-radius:var(--pd-card-radius-page) var(--pd-card-radius-page) 60% 60%; }
.pd-vista-w09 { background:radial-gradient(ellipse 65% 85% at 50% 130%,#60c1ff40,transparent 78%),linear-gradient(to bottom,var(--pd-vista-blue),color-mix(in srgb,var(--pd-vista-blue) 93%,#000)); box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #84c4ff40,0 1px 0 var(--pd-vista-edge),0 calc(var(--pd-space-1) / 4) var(--pd-space-1) #1238761a; }
.pd-vista-w09::before { height:22%; opacity:.4; }
.pd-vista-w10::before { inset-inline:2%; height:46%; background:linear-gradient(#ffffff80,#ffffff12); border-radius:var(--pd-radius-md) var(--pd-radius-md) 60% 60%; }
.pd-vista-w10 { box-shadow:inset 0 1px 1px #ffffffce,inset 0 -2px 1px #84c4ff80,var(--pd-vista-shadow); }
.pd-vista-main[data-preview-state="hover"] :is(.pd-vista-family-aero,.pd-vista-family-aqua),
:is(.pd-vista-family-aero,.pd-vista-family-aqua):hover { filter:brightness(1.08); transform:translateY(calc(-1 * var(--pd-space-1) / 8)); }
.pd-vista-main[data-preview-state="pressed"] :is(.pd-vista-family-aero,.pd-vista-family-aqua),
:is(.pd-vista-family-aero,.pd-vista-family-aqua):active { transform:translateY(var(--pd-vista-depth)); filter:brightness(.95); box-shadow:inset 0 1px var(--pd-vista-depth) #001a4c66,inset 0 -1px 0 #ffffff26,0 1px 0 #12387640; }
.pd-vista-family-sheet { width:calc(var(--pd-sidebar-width) * 2 + var(--pd-space-4) * 3); max-width:100%; margin:auto; padding:var(--pd-space-4); }
.pd-vista-family-sheet > h1 { margin:0; color:var(--pd-vista-ink); font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); }
.pd-vista-family-sheet > p { margin:var(--pd-space-1) 0 var(--pd-space-4); color:var(--pd-vista-copy); font-size:var(--pd-fs-xs); }
.pd-vista-family-sheet > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-space-4); }
.pd-vista-family-sheet h2 { margin:0 0 var(--pd-space-1); color:var(--pd-vista-ink); font-size:var(--pd-fs-sm); font-weight:var(--pd-fw-medium); }
@media (max-width:760px) {
    .pd-vista-compare-grid { grid-template-columns:minmax(0,1fr); }
    .pd-vista-toolbar-row { gap:var(--pd-space-1); }
    .pd-vista-toolbar-row .pd-vista-switch button { padding-inline:var(--pd-space-1); }
    .pd-vista-toolbar-row > a:first-of-type { margin-left:0; }
}
@media (max-width:520px) { .pd-vista-family-sheet > div { grid-template-columns:minmax(0,1fr); } }
.pd-vista-w01::before { height:36%; background:linear-gradient(#ffffff29,transparent); }
.pd-vista-references { margin-top:var(--pd-space-4); }
.pd-vista-references > h2 { margin:0 0 var(--pd-space-2); color:var(--pd-vista-copy); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-regular); }
.pd-vista-references > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--pd-space-4); }
.pd-vista-references article { padding:var(--pd-card-padding); border:1px dashed var(--pd-vista-line); border-radius:var(--pd-card-radius); background:var(--pd-vista-white); }
.pd-vista-references h3 { margin:0 0 var(--pd-space-2); font-size:var(--pd-fs-xs); font-weight:var(--pd-fw-medium); color:var(--pd-vista-copy); }
@media (max-width:760px) { .pd-vista-references > div { grid-template-columns:minmax(0,1fr); } }