.vera-universal-demo { width:100%; min-width:0; padding:clamp(18px,3vw,32px); border:1px solid #d8d1d8; border-radius:24px; background:#f5f1ea; color:#171219; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.vera-universal-demo * { box-sizing:border-box; }
.vera-universal-demo [hidden] { display:none!important; }
.vera-universal-demo button, .vera-universal-demo a { font:inherit; cursor:pointer; }
.vera-universal-demo button:focus-visible, .vera-universal-demo a:focus-visible, .vd-stage:focus-visible { outline:3px solid #9b6297; outline-offset:4px; }
.vd-heading h2, .vd-finish h2 { margin:0 0 14px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(25px,2.6vw,38px); font-weight:500; line-height:1.14; letter-spacing:-.025em; text-transform:none; }
.vd-heading p, .vd-finish p { margin:0; font-size:17px; line-height:1.45; }
.vd-groups, .vd-scenarios { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; }
.vd-groups button, .vd-scenarios button, .vd-navigation button { min-height:44px; padding:10px 15px; border:1px solid #bcaebf; border-radius:12px; background:transparent; color:#542c5b; font-size:14px; font-weight:750; line-height:1.3; }
.vd-groups button[aria-pressed="true"], .vd-scenarios button[aria-pressed="true"] { background:#713f78; color:white; border-color:#713f78; }
.vd-groups button { border-radius:999px; letter-spacing:.06em; }
.vd-stage { margin-top:22px; touch-action:pan-y; }
.vd-card { --card-color:#5b3a8c; padding:clamp(20px,3vw,32px); border:1px solid var(--card-color); border-radius:22px; background:var(--card-color); color:#fff; }
.vd-card[data-band="purple"] { --card-color:#5b3a8c; }
.vd-card[data-band="yellow"] { --card-color:#e8bd22; color:#171219; }
.vd-card[data-band="orange"] { --card-color:#e67e22; color:#171219; }
.vd-card[data-band="red"] { --card-color:#e74c3c; color:#171219; }
.vd-goal { padding:0 0 18px; border-bottom:1px solid currentColor; }
.vd-goal span, .vd-speaker, .vd-band { display:block; font-size:11px; font-weight:850; letter-spacing:.14em; line-height:1.4; }
.vd-goal p { margin:8px 0 0; font-size:clamp(20px,2.2vw,27px); font-weight:650; line-height:1.25; }
.vd-band { margin-top:16px; opacity:.85; }
.vd-message { margin-top:20px; }
.vd-message p { margin:6px 0 0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(21px,2.2vw,28px); font-weight:400; line-height:1.32; }
.vd-you { margin-left:6%; padding:14px 16px; border-radius:3px; background:rgba(255,255,255,.22); }
.vd-answers { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.vd-answers button { min-height:46px; max-width:100%; padding:10px 14px; border:1px solid currentColor; border-radius:10px; background:transparent; color:inherit; font-size:17px; font-weight:650; line-height:1.3; text-align:left; }
.vd-answers button[aria-pressed="true"] { background:rgba(255,255,255,.3); box-shadow:inset 0 0 0 1px currentColor; }
.vd-answers button:disabled { opacity:1; cursor:default; }
.vd-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.vd-progress { font-size:12px; font-weight:700; text-align:center; }
.vd-navigation button:disabled { opacity:.4; cursor:default; }
.vd-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
.vd-summary .vd-card { padding:20px; }
.vd-summary .vd-goal p { font-size:20px; }
.vd-summary .vd-message p { font-size:19px; }
.vd-summary .vd-answers button { min-height:40px; font-size:15px; padding:8px 10px; }
.vd-summary .vd-you { margin-left:0; padding:12px; }
.vd-finish { margin-top:26px; padding-top:24px; border-top:1px solid #d8d1d8; }
.vd-join { display:block; margin-top:20px; padding:17px 22px; border-radius:999px; color:white!important; background:linear-gradient(115deg,#542c5b,#7c4784 58%,#95619c); font-weight:800!important; text-align:center; text-decoration:none; }
.vd-sr { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.alignment-page .vera-universal-demo { margin:40px 0 70px; }
.workspace-example.vera-universal-demo { width:calc(100% - 32px); max-width:1160px; margin:40px auto; }
@media(max-width:600px) { .vd-summary { grid-template-columns:1fr; } .vd-card { padding:20px; } .vd-message p { font-size:23px; } .vd-groups button { flex:1; } .vd-scenarios { gap:8px; } .vd-scenarios button { flex:1 1 90px; padding:10px; } .vd-summary .vd-message p { font-size:21px; } }