/* Vendored from Design assets/vpage.css (13:28 ET; generated from tools/vpage.py CSS): shared page component (.vp) + the 13:16 variant block (SPEC v4 3.4a). */

/* ---- shared Valdren page component (.vp). Sized in em: set font-size on the container. ---- */
.vp{--acc:#c89968;--ci:#4fbf98;font-size:12px;color:#f5f7fa;display:flex;flex-direction:column;gap:.62em;text-align:left}
.vp-top{display:flex;align-items:center;gap:.55em}
.vp-mono{width:1.5em;height:1.5em;border-radius:.4em;background:var(--acc);color:#0a1628;font-weight:800;font-size:.9em;display:grid;place-items:center}
.vp-top b{font-size:1.02em;font-weight:600;letter-spacing:.03em}
.vp .vp-ea{margin-left:auto;display:inline-flex;align-items:center;border:1px solid #c89968;color:#c89968;background:transparent;border-radius:999px;font-size:.86em;font-weight:600;padding:.12em .65em;white-space:nowrap}
.vp-why{display:flex;gap:.6em;align-items:flex-start;background:rgba(10,22,40,.72);border:1px solid rgba(220,176,92,.45);border-radius:.8em;padding:.5em .65em}
.vp-why b{flex:none;display:inline-flex;align-items:center;gap:.35em;background:#dcb05c;color:#0a1628;border-radius:999px;padding:.15em .65em;font-size:.86em;font-weight:700;white-space:nowrap}
.vp-why b i{width:.35em;height:.35em;border-radius:50%;background:#0a1628}
.vp-why span{font-size:1em;line-height:1.35;color:#eef1f5}
.vp-hero{display:flex;gap:.6em;align-items:center}
.vp-ht{flex:1;min-width:0}
.vp-h{font-size:1.45em;font-weight:800;line-height:1.12;letter-spacing:-.015em}
.vp-sub{font-size:.92em;color:#c9cfd8;margin-top:.25em;line-height:1.35}
.vp-jk{flex:none;width:4.6em;display:block}.vp-jk svg{width:100%;height:auto;display:block;filter:drop-shadow(0 .5em .7em rgba(0,0,0,.35))}
.vp-cl{font-size:.8em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c89968;margin-bottom:-.3em}
.vp-cs,.vp-fs{display:flex;flex-wrap:wrap;gap:.4em}
.vp-c{display:inline-flex;align-items:center;gap:.4em;font-size:.95em;color:#eef1f5;background:rgba(79,191,152,.10);border:1px solid rgba(79,191,152,.4);border-radius:999px;padding:.22em .7em .22em .5em;white-space:nowrap}
.vp-c .ci{width:1.05em;height:1.05em;color:#4fbf98;display:grid}.vp-c .ci svg{width:100%;height:100%}
.vp-f{display:inline-flex;align-items:baseline;gap:.45em;font-size:.9em;background:#13233b;border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.22em .7em;white-space:nowrap}
.vp-f code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#f1ddc2;font-size:.95em}.vp-f b{color:#f3f5f8;font-weight:600}
.vp-unk{display:flex;gap:.5em;align-items:flex-start;font-size:.95em;line-height:1.35;color:#f3dfb5;background:rgba(220,176,92,.12);border:1px solid rgba(220,176,92,.6);border-radius:.7em;padding:.4em .6em}
.vp-unk i{flex:none;font-style:normal;font-weight:800;width:1.2em;height:1.2em;border-radius:50%;background:#dcb05c;color:#0a1628;display:grid;place-items:center;font-size:.8em}
/* compact mode: packed-size stuff sack beside the shell (replaces the fact chips); chips wrap */
.vp-pk{flex:none;display:flex;flex-direction:column;align-items:center;gap:.3em}
.vp-pk svg{width:2.9em;height:auto;display:block;filter:drop-shadow(0 .35em .5em rgba(0,0,0,.35))}
.vp-pk b{font-size:.92em;font-weight:700;color:#f1ddc2;white-space:nowrap;background:#13233b;border:1px solid rgba(200,153,104,.45);border-radius:999px;padding:.08em .5em}
.vp-compact{gap:.55em}.vp-compact .vp-hero{gap:.45em;align-items:flex-end}.vp-compact .vp-ht{align-self:center}
.vp-compact .vp-jk{width:4.4em}.vp-compact .vp-cl{font-size:.92em;letter-spacing:.06em;margin-bottom:-.2em}
.vp-compact .vp-c{white-space:normal}.vp-compact .vp-unk i{font-size:.92em}.vp-compact .vp-pk b{font-size:.97em}
/* ---- variants (13:16): --acc tints monogram / art highlights / chip icons; .vp-art = illustration slot; .vp-frame + .vp-chrome = browser page ---- */
.vp-v .vp-c .ci{color:var(--ci)}.vp-v .vp-c{background:color-mix(in srgb,var(--ci) 10%,transparent);border-color:color-mix(in srgb,var(--ci) 42%,transparent)}
.vp-art{flex:none;display:block;width:42%;max-width:11em;height:auto;filter:drop-shadow(0 .5em .8em rgba(0,0,0,.4))}
.vp-v .vp-hero{align-items:center}.vp-v .vp-h{font-size:1.6em}.vp-v-out .vp-jk{width:6.4em}.vp-v-out .vp-pk{width:2.8em}
.vp-frame{border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#17294a,#0f1d36);border:1px solid color-mix(in srgb,var(--acc,#c89968) 55%,transparent);box-shadow:0 18px 44px -22px color-mix(in srgb,var(--acc,#c89968) 70%,transparent)}
.vp-chrome{height:30px;background:#16284a;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.vp-dots{flex:none;display:flex;gap:5px}.vp-dots i{width:8px;height:8px;border-radius:50%}.vp-dots i:nth-child(1){background:#ec6a5e}.vp-dots i:nth-child(2){background:#f4bf4f}.vp-dots i:nth-child(3){background:#61c554}
.vp-url{flex:1;min-width:0;height:20px;border-radius:6px;background:#0a1628;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:#aeb6c2;white-space:nowrap;overflow:hidden}
.vp-url>span{overflow:hidden;text-overflow:ellipsis}.vp-url .vp-lk{flex:none;width:9px;height:9px;opacity:.7}
.vp-ready{flex:none;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#4fbf98;background:rgba(79,191,152,.14);border:1px solid rgba(79,191,152,.35);border-radius:999px;padding:1px 8px}
.vp-ready i{width:6px;height:6px;border-radius:50%;background:currentColor}
.vp-frame>.vp{padding:.9em 1em 1.05em}