:root {
    --pd-vista-blue: var(--pd-sidebar-art-blue);
    --pd-vista-ink: #152b47;
    --pd-vista-copy: #68788d;
    --pd-vista-paper: #f2f5f8;
    --pd-vista-white: #fff;
    --pd-vista-line: #dce3eb;
    --pd-vista-dark: #252a32;
    --pd-vista-dark-card: #30363f;
    --pd-vista-dark-line: #414b59;
    --pd-vista-edge: color-mix(in srgb, var(--pd-vista-blue) 58%, #001a4c);
    --pd-vista-depth: calc(var(--pd-space-1) / 4);
    --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;
}
body.pd-vista-preview {
    margin: 0; background: var(--pd-vista-paper); color: var(--pd-vista-ink);
    font-family: var(--pd-font-system); font-size: var(--pd-fs-sm); line-height: var(--pd-lh-normal);
}
.pd-vista-main { max-width: calc(var(--pd-sidebar-width) * 3 + var(--pd-space-5) * 4); margin: auto; padding: var(--pd-space-5) var(--pd-space-4); }
.pd-vista-header { display: flex; align-items: start; justify-content: space-between; gap: var(--pd-space-4); margin-bottom: var(--pd-space-4); }
.pd-vista-eyebrow { color: var(--pd-vista-blue); font-size: var(--pd-fs-xs); font-weight: var(--pd-fw-semibold); }
.pd-vista-header h1 { margin: var(--pd-space-1) 0; font-size: var(--pd-fs-display); font-weight: var(--pd-fw-medium); line-height: var(--pd-lh-tight); color: var(--pd-vista-ink); }
.pd-vista-header p { margin: 0; color: var(--pd-vista-copy); }
.pd-vista-header-note { flex: none; color: var(--pd-vista-copy); font-size: var(--pd-fs-xs); padding: calc(var(--pd-space-1) / 2) var(--pd-space-2); border: 1px solid var(--pd-vista-line); border-radius: var(--pd-badge-radius); }
.pd-vista-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: var(--pd-space-2); margin-bottom: var(--pd-space-4); padding: var(--pd-space-2) 0; background: var(--pd-vista-paper); border-block: 1px solid var(--pd-vista-line); }
.pd-vista-toolbar-tip { margin-left: auto; color: var(--pd-vista-copy); font-size: var(--pd-fs-xs); }
.pd-vista-switch { display: inline-flex; gap: calc(var(--pd-space-1) / 2); }
.pd-vista-switch button { padding: calc(var(--pd-space-1) / 2) var(--pd-space-2); border: 1px solid var(--pd-vista-line); border-radius: var(--pd-btn-radius); background: var(--pd-vista-white); font: inherit; font-size: var(--pd-fs-xs); color: var(--pd-vista-copy); cursor: pointer; }
.pd-vista-switch button[aria-pressed="true"] { color: var(--pd-vista-blue); border-color: color-mix(in srgb, var(--pd-vista-blue) 36%, #fff); background: color-mix(in srgb, var(--pd-vista-blue) 7%, #fff); }
.pd-vista-switch button:focus-visible, .pd-vista-choose:focus-visible { outline: var(--pd-tab-indicator) solid var(--pd-vista-blue); outline-offset: var(--pd-tab-indicator); }
.pd-vista-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--pd-space-4); }
.pd-vista-option { min-width: 0; padding: var(--pd-card-padding); background: var(--pd-vista-white); border: 1px solid var(--pd-vista-line); border-radius: var(--pd-card-radius-lg); }
.pd-vista-option.is-selected { border-color: color-mix(in srgb, var(--pd-vista-blue) 42%, #fff); }
.pd-vista-option-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-1); }
.pd-vista-option-head h2 { margin: 0; color: var(--pd-vista-ink); font-size: var(--pd-fs-md); font-weight: var(--pd-fw-semibold); }
.pd-vista-option-head h2 span { margin-right: var(--pd-space-1); color: var(--pd-vista-copy); font-size: var(--pd-fs-xs); font-weight: var(--pd-fw-regular); }
.pd-vista-option-head small { color: var(--pd-vista-copy); font-size: var(--pd-fs-2xs); }
.pd-vista-description { margin: var(--pd-space-1) 0 var(--pd-space-3); color: var(--pd-vista-copy); font-size: var(--pd-fs-xs); }
.pd-vista-pair { display: grid; gap: var(--pd-space-2); }
.pd-vista-surface { display: grid; justify-items: center; gap: var(--pd-space-1); padding: var(--pd-space-2) var(--pd-space-3); border: 1px solid var(--pd-vista-line); border-radius: var(--pd-card-radius); background: var(--pd-vista-paper); }
.pd-vista-surface-label { justify-self: start; color: var(--pd-vista-copy); font-size: var(--pd-fs-2xs); }
.pd-vista-spec { color: var(--pd-vista-copy); font-size: var(--pd-fs-3xs); }
.pd-vista-surface-dark { background: var(--pd-vista-dark); border-color: var(--pd-vista-dark-line); }
.pd-vista-surface-dark :is(.pd-vista-surface-label,.pd-vista-spec) { color: #afb8c5; }
.pd-vista-choose { display: flex; align-items: center; gap: var(--pd-space-1); margin-top: var(--pd-space-3); padding: 0; color: var(--pd-vista-blue); background: none; border: 0; font: inherit; font-size: var(--pd-fs-xs); cursor: pointer; }
.pd-vista-btn {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
    flex: none; gap: var(--pd-btn-gap); width: var(--pd-sidebar-width); max-width: 100%; height: var(--pd-btn-h);
    padding: 0 var(--pd-btn-px); border: 1px solid var(--pd-vista-edge); border-radius: var(--pd-btn-radius);
    color: var(--pd-vista-white); font-family: var(--pd-font-system); font-size: var(--pd-btn-fs); font-weight: var(--pd-btn-weight);
    line-height: var(--pd-lh-tight); text-shadow: 0 1px 1px #001a4c70; white-space: nowrap;
    background: var(--pd-vista-blue); box-shadow: var(--pd-vista-shadow); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
}
.pd-vista-btn > :is(svg,span) { position: relative; z-index: 2; }
.pd-vista-btn svg { width: var(--pd-btn-icon); height: var(--pd-btn-icon); flex: none; filter: drop-shadow(0 1px 0 #001a4c44); }
.pd-vista-btn::before,.pd-vista-btn::after { pointer-events: none; }
.pd-vista-aero {
    background: linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 62%,#fff) 0%,color-mix(in srgb,var(--pd-vista-blue) 82%,#fff) 48%,var(--pd-vista-blue) 49%,color-mix(in srgb,var(--pd-vista-blue) 87%,#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-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-enamel {
    background:linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 83%,#fff),var(--pd-vista-blue) 55%,color-mix(in srgb,var(--pd-vista-blue) 83%,#000));
    box-shadow:inset 0 1px 0 #ffffff75,inset 0 -1px 0 #ffffff24,var(--pd-vista-shadow);
}
.pd-vista-enamel::before { content:''; position:absolute; inset:1px 1px auto; height:33%; border-radius:var(--pd-btn-radius) var(--pd-btn-radius) 50% 50%; background:linear-gradient(#ffffff22,transparent); }
.pd-vista-chrome {
    border:calc(var(--pd-tab-indicator) * 1.5) solid transparent;
    background:linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 76%,#fff) 0%,var(--pd-vista-blue) 51%,color-mix(in srgb,var(--pd-vista-blue) 83%,#000) 100%) padding-box,linear-gradient(to bottom,#f6faff,#b4c3d5 48%,#8092ac 51%,#d3dfeb 100%) border-box;
    box-shadow:inset 0 1px 0 #ffffff70,inset 0 0 0 1px #001a4c60,0 1px 0 #677a93,0 calc(var(--pd-space-1) / 2) var(--pd-space-1) #1238762b;
}
.pd-vista-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));
    border-radius:var(--pd-radius-md);
    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-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-metal {
    background:repeating-linear-gradient(0deg,#ffffff08 0 1px,#001a4c09 1px 2px),linear-gradient(to bottom,color-mix(in srgb,var(--pd-vista-blue) 83%,#fff),var(--pd-vista-blue) 51%,color-mix(in srgb,var(--pd-vista-blue) 87%,#000));
    box-shadow:inset 0 1px 0 #ffffff8c,inset 1px 0 0 #ffffff29,inset -1px 0 0 #ffffff29,0 1px 0 var(--pd-vista-edge),0 calc(var(--pd-space-1) / 2) var(--pd-space-1) #1238761a;
}
.pd-vista-btn:hover,.pd-vista-main[data-preview-state="hover"] .pd-vista-btn { filter:brightness(1.08); transform:translateY(calc(-1 * var(--pd-space-1) / 8)); }
.pd-vista-btn:active,.pd-vista-main[data-preview-state="pressed"] .pd-vista-btn { 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-btn:focus-visible { outline:var(--pd-tab-indicator) solid color-mix(in srgb,var(--pd-vista-blue) 55%,#fff); outline-offset:calc(var(--pd-space-1) / 2); }
.pd-vista-scene-section { margin-top:var(--pd-space-5); scroll-margin-top:calc(var(--pd-space-5) * 3); }
.pd-vista-scene-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--pd-space-2); margin-bottom:var(--pd-space-3); }
.pd-vista-scene-heading h2 { margin:0; font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); color:var(--pd-vista-ink); }
.pd-vista-scene-heading p { margin:var(--pd-space-1) 0 0; font-size:var(--pd-fs-xs); color:var(--pd-vista-copy); }
.pd-vista-scene-heading strong { font-weight:var(--pd-fw-medium); color:var(--pd-vista-blue); }
.pd-vista-scene { display:grid; grid-template-columns:minmax(0,1fr) var(--pd-sidebar-width); align-items:start; gap:var(--pd-space-4); padding:var(--pd-space-4); border-radius:var(--pd-card-radius-lg); border:1px solid var(--pd-vista-line); background:var(--pd-vista-white); }
.pd-vista-feed { min-width:0; }
.pd-vista-feed-tabs { display:flex; gap:var(--pd-space-3); margin-bottom:var(--pd-space-3); padding-bottom:var(--pd-space-2); border-bottom:1px solid var(--pd-vista-line); color:var(--pd-vista-copy); font-size:var(--pd-fs-xs); }
.pd-vista-feed-tabs span:first-child { color:var(--pd-vista-blue); }
.pd-vista-feed article { display:flex; align-items:center; gap:var(--pd-space-2); margin-bottom:var(--pd-space-2); padding:var(--pd-space-3); border:1px solid var(--pd-vista-line); border-radius:var(--pd-card-radius-row); box-shadow:0 1px var(--pd-space-1) #12387609; }
.pd-vista-feed-avatar { display:grid; place-items:center; flex:none; width:var(--pd-side-avatar); height:var(--pd-side-avatar); border-radius:var(--pd-card-radius); color:var(--pd-vista-blue); background:color-mix(in srgb,var(--pd-vista-blue) 7%,#fff); }
.pd-vista-scene h3 { margin:0; color:var(--pd-vista-ink); font-size:var(--pd-fs-sm); font-weight:var(--pd-fw-medium); }
.pd-vista-scene p { margin:calc(var(--pd-space-1) / 2) 0 0; color:var(--pd-vista-copy); font-size:var(--pd-fs-xs); }
.pd-vista-scene-sidebar { display:grid; gap:var(--pd-space-2); }
.pd-vista-welcome { display:flex; align-items:center; gap:var(--pd-space-2); padding:var(--pd-card-padding); border:1px solid var(--pd-vista-line); border-radius:var(--pd-card-radius); }
.pd-vista-welcome img { width:var(--pd-side-avatar); height:var(--pd-side-avatar); border-radius:var(--pd-card-radius); }
.pd-vista-scene-card { position:relative; overflow:hidden; aspect-ratio:3 / 2; border-radius:var(--pd-card-radius-side); background:var(--pd-sidebar-art-telegram); }
.pd-vista-scene-card img { display:block; width:100%; height:auto; }
.pd-vista-scene-card > div { position:absolute; top:var(--pd-card-padding); left:var(--pd-card-padding); }
.pd-vista-scene-card h3 { color:var(--pd-vista-white); font-size:var(--pd-fs-md); }
.pd-vista-scene-card p { color:#ffffffde; }
.pd-vista-scene.is-dark { background:var(--pd-vista-dark); border-color:var(--pd-vista-dark-line); }
.pd-vista-scene.is-dark :is(.pd-vista-feed article,.pd-vista-welcome) { background:var(--pd-vista-dark-card); border-color:var(--pd-vista-dark-line); }
.pd-vista-scene.is-dark .pd-vista-feed-tabs { border-color:var(--pd-vista-dark-line); }
.pd-vista-scene.is-dark h3 { color:var(--pd-vista-white); }
.pd-vista-scene.is-dark p,.pd-vista-scene.is-dark .pd-vista-feed-tabs { color:#afb8c5; }
.pd-vista-scene.is-dark .pd-vista-scene-card p { color:#ffffffde; }
.pd-vista-footer { display:grid; gap:var(--pd-space-1); padding-block:var(--pd-space-4); font-size:var(--pd-fs-xs); color:var(--pd-vista-copy); }
[data-preview-feedback] { color:var(--pd-vista-blue); }
@media (max-width:760px) {
    .pd-vista-main { padding:var(--pd-space-4) var(--pd-space-3); }
    .pd-vista-header h1 { font-size:var(--pd-fs-xl); }
    .pd-vista-options { grid-template-columns:minmax(0,1fr); }
    .pd-vista-toolbar-tip { display:none; }
    .pd-vista-scene { grid-template-columns:minmax(0,1fr); padding:var(--pd-space-3); }
    .pd-vista-scene-sidebar { justify-self:center; width:var(--pd-sidebar-width); max-width:100%; }
    .pd-vista-header-note { display:none; }
}
@media (prefers-reduced-motion:reduce) { .pd-vista-btn { transition:none; } }
.pd-vista-sheet { width:calc(var(--pd-sidebar-width) + var(--pd-space-4) * 2); max-width:100%; padding:var(--pd-space-4); margin:0 auto; }
.pd-vista-sheet h1 { margin:0; color:var(--pd-vista-ink); font-size:var(--pd-fs-lg); font-weight:var(--pd-fw-medium); }
.pd-vista-sheet p { margin:var(--pd-space-1) 0 var(--pd-space-4); font-size:var(--pd-fs-xs); color:var(--pd-vista-copy); }
.pd-vista-sheet section { margin-bottom:var(--pd-space-4); }
.pd-vista-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); }