/* First-party web rendering of VRPalette + the native VRDashboard composition. */
.v2-vr,.vr-dialog { --vr-bg:#12100e;--vr-surface:#1d1915;--vr-raised:#29221c;--vr-border:#3c3229;--vr-text:#f4ebdd;--vr-muted:#bbae9e;--vr-accent:#e6a264;--vr-on:#24160b;--vr-good:#a0c5ab;color:var(--vr-text);background:var(--vr-bg);font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; }
.v2-vr.vr-light,.vr-dialog.vr-light { --vr-bg:#e3d2b8;--vr-surface:#ede0cc;--vr-raised:#d9c4a6;--vr-border:#c7b194;--vr-text:#30261e;--vr-muted:#62503f;--vr-accent:#853c12;--vr-on:#fff;--vr-good:#356b54; }
.v2-vr p,.vr-dialog p { margin:0;line-height:1.7;white-space:pre-line;font-size:12px; }
.v2-vr h2,.v2-vr h3,.vr-dialog h2 { color:var(--vr-text);letter-spacing:-.025em;margin:0;text-wrap:balance; }
[data-guide-v2] .v2-vr :is(h2,h3),[data-guide-v2] .vr-dialog h2 { color:var(--vr-text); }
[data-guide-v2] .v2-vr .vr-hero h3 { color:var(--vr-text); }
.vr-muted { color:var(--vr-muted); }
.vr-button { appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 15px;min-height:36px;border-radius:10px;border:1px solid var(--vr-border);background:var(--vr-raised);color:var(--vr-text);font:600 12px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;cursor:pointer; }
.vr-button:hover:not(:disabled) { filter:brightness(1.12);border-color:var(--vr-accent); }
.vr-button:focus-visible,.v2-vr select:focus-visible,.vr-dialog input:focus-visible,.vr-dialog select:focus-visible,.vr-disclosure summary:focus-visible { outline:2px solid var(--vr-accent);outline-offset:3px; }
.vr-button.primary { background:var(--vr-accent);color:var(--vr-on);border-color:transparent; }
.vr-button:disabled { opacity:.42;cursor:not-allowed; }
.v2-vr .vr-button { font-size:12px;line-height:1.5; }
.v2-vr .vr-button.primary { color:var(--vr-on); }
.v2-vr .vr-button.vr-icon { font-size:0; }
.vr-button.vr-text { color:var(--vr-accent);background:transparent;border-color:transparent;padding:5px 0;min-height:32px;font-size:11px;text-align:left; }
.vr-button.vr-icon { font-size:0;padding:8px;min-width:34px;min-height:34px;border:0;background:transparent; }
.vr-icon .v2-symbol { width:18px;height:18px; }
.vr-actions { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.vr-tour { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 22px;background:var(--vr-raised);border-bottom:1px solid var(--vr-border); }
.vr-tour strong { color:var(--vr-accent);font-size:12px; }.vr-tour p { max-width:700px;color:var(--vr-muted);font-size:11px; }
.vr-tour>.vr-button { flex-shrink:0;max-width:260px; }
.vr-chrome { height:40px;display:flex;align-items:center;gap:15px;padding:0 17px;background:var(--vr-surface);border-bottom:1px solid var(--vr-border); }
.vr-chrome>span { font-size:11px;color:var(--vr-muted);margin-left:auto; }.vr-chrome .vr-text { font-size:10px; }.vr-chrome .v2-window-lights { margin-right:5px; }
.vr-layout { display:grid;grid-template-columns:200px minmax(0,1fr);min-height:680px; }
.vr-sidebar { display:flex;flex-direction:column;gap:26px;padding:26px 18px 18px;background:var(--vr-surface);border-right:1px solid var(--vr-border); }
.vr-brand { display:flex;align-items:center;gap:12px; }.vr-brand>.v2-symbol { color:var(--vr-accent);width:45px;height:45px;padding:8px;background:var(--vr-raised);border-radius:13px; }.vr-brand strong { white-space:pre-line;font-size:19px;line-height:1.6;letter-spacing:2px; }
.vr-sidebar nav { display:grid;gap:5px; }.vr-nav { justify-content:start!important;text-align:left;width:100%;background:transparent;border-color:transparent;font-weight:400;padding:11px;color:var(--vr-muted); }
.vr-nav[aria-current=true] { background:var(--vr-raised);color:var(--vr-text);font-weight:600; }.vr-nav[aria-current=true]::after { content:'';width:4px;height:4px;border-radius:50%;background:var(--vr-accent);margin-left:auto; }
.vr-sidebar-card { margin-top:auto;display:grid;gap:13px;background:var(--vr-raised);padding:16px;border-radius:12px; }.vr-sidebar-card>.v2-symbol { color:var(--vr-accent); }.vr-sidebar-card strong { white-space:pre-line;font-size:12px;line-height:1.6; }.vr-sidebar-card p { font-size:11px; }
.vr-preview { color:var(--vr-muted);letter-spacing:1.5px;font:10px ui-monospace,monospace; }.vr-sidebar>.vr-muted { margin-top:-17px;font-size:10px; }
.vr-brand strong { font-size:24px;line-height:1.2;letter-spacing:0; }
.vr-brand strong::first-line { font-size:10px;line-height:2;letter-spacing:1.8px; }
.vr-main { min-width:0;display:flex;flex-direction:column; }.vr-scroll { height:650px;min-height:450px;overflow:auto;overscroll-behavior:contain;padding:28px;display:flex;flex-direction:column;gap:22px;scrollbar-color:var(--vr-border) transparent; }
.vr-scroll>* { flex-shrink:0; }.vr-page-head { display:flex;align-items:center;justify-content:space-between;gap:16px; }.vr-page-head h2 { font-size:25px!important;line-height:1.4!important; }.vr-page-head p { margin-top:5px;font-size:12px; }
.vr-pill { display:inline-flex;align-items:center;gap:7px;width:max-content;max-width:100%;border-radius:99px;padding:6px 10px;background:var(--vr-raised);font-size:11px;color:var(--vr-muted); }.vr-pill.is-ready { color:var(--vr-good); }.vr-dot { width:6px;height:6px;border-radius:50%;background:var(--vr-muted);flex-shrink:0; }.vr-dot.is-ready { background:var(--vr-good); }
.vr-hero { display:grid;grid-template-columns:minmax(0,1fr) 265px;overflow:hidden;background:linear-gradient(130deg,#302219,#161310);border:1px solid #6e4c3266;border-radius:20px;color:#f7ead9;min-height:280px; }
.vr-hero-copy { padding:28px;display:flex;align-items:start;flex-direction:column;gap:15px; }.vr-eyebrow { letter-spacing:2px;color:#e6ab73;font:600 10px ui-monospace,monospace; }.vr-hero h3 { font-size:32px!important;line-height:1.18!important;white-space:pre-line;color:#f7ead9; }.vr-hero p { color:#d1bfab;font-size:13px; }.vr-hero .vr-button { --vr-accent:#e6a264;--vr-on:#24160b;--vr-raised:#29221c;--vr-text:#f4ebdd;--vr-border:#3c3229; }
.vr-hero-copy>p { width:100%;max-width:none; }
.vr-portal { position:relative;min-height:260px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#b85c2118,transparent 65%); }.vr-portal>.v2-symbol { transform:rotate(-10deg);color:#d9b386;filter:drop-shadow(4px 20px 14px #0009);z-index:1; }.vr-orbit { position:absolute;top:5%;left:21%;width:58%;height:80%;border:1.5px solid #d9a46288;border-bottom-color:#d9a46215;border-radius:44%;transform:rotate(-12deg); }.vr-orbit.two { top:-3%;left:15%;width:72%;height:98%;opacity:.5; }.vr-orbit.three { top:-9%;left:9%;width:86%;height:114%;opacity:.3; }.vr-floor { position:absolute;inset:72% 0 -4%;background:repeating-linear-gradient(0deg,#c2855020 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,#c2855020 0 1px,transparent 1px 25px);transform:perspective(75px) rotateX(38deg); }.vr-star { width:4px;height:4px;border-radius:50%;background:#f9cc91;position:absolute;left:23%;top:22%; }
.vr-readiness { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px;background:var(--vr-surface);border:1px solid var(--vr-border);border-radius:14px; }.vr-step { display:grid!important;grid-template-columns:30px 1fr;gap:3px 8px;border:0;background:transparent;text-align:left;justify-items:start; }.vr-step .vr-step-number { grid-row:span 2;align-self:center;display:grid;place-items:center;background:var(--vr-raised);width:30px;height:30px;border-radius:50%;color:var(--vr-accent);font-size:11px; }.vr-step small { color:var(--vr-muted);font-size:10px;font-weight:400; }
.vr-two { display:grid;grid-template-columns:1fr 1fr;gap:18px; }.vr-panel { padding:22px;background:var(--vr-surface);border-radius:16px;display:flex;flex-direction:column;gap:15px;min-width:0; }.vr-panel-heading { display:flex;align-items:center;gap:10px; }.vr-panel-heading>svg { color:var(--vr-accent); }.vr-panel-heading h3 { font-size:15px!important;line-height:1.4; }.vr-panel-heading>.vr-icon { margin-left:auto; }.vr-summary { display:flex;justify-content:space-between;gap:15px;font-size:12px;line-height:1.6; }.vr-summary>span { color:var(--vr-muted); }.vr-summary>strong { font-weight:500;text-align:right; }
.vr-device-grid { display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:18px; }.vr-device { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }.vr-device strong { font-size:13px; }.vr-device .vr-pill { margin-left:auto; }.vr-code { padding:16px;border-radius:12px;background:var(--vr-bg);display:grid;gap:10px; }.vr-code .vr-actions { justify-content:space-between; }.vr-code code { white-space:pre-line;color:var(--vr-text);font:14px/1.7 ui-monospace,monospace; }.vr-code small { color:var(--vr-muted); }
.vr-choice { position:relative;flex-direction:column;align-items:start!important;text-align:left;justify-content:start!important;min-width:0;padding:13px 35px 13px 13px;background:var(--vr-bg);font-weight:500; }.vr-choice>svg:last-child { position:absolute;right:12px;top:15px; }.vr-choice[aria-pressed=true] { border-color:var(--vr-accent);color:var(--vr-accent);background:color-mix(in srgb,var(--vr-accent) 8%,var(--vr-bg)); }.vr-choice small { color:var(--vr-muted);font-size:11px;font-weight:400; }.vr-quality { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }.vr-disclosure { font-size:12px;color:var(--vr-muted); }.vr-disclosure summary { cursor:pointer;padding:6px 0;color:var(--vr-text); }.vr-disclosure>p,.vr-disclosure>div { padding-top:10px; }.vr-disclosure .vr-button { margin-top:12px; }
.vr-session { display:flex;align-items:center;gap:12px;padding:14px 22px;border-top:1px solid var(--vr-border);background:var(--vr-surface); }.vr-session>div { margin-right:auto; }.vr-session strong,.vr-session small { display:block;font-size:11px; }.vr-session small { color:var(--vr-muted);font-size:10px;margin-top:3px; }.vr-session .vr-button { font-size:11px; }
.vr-guide-banner { display:flex;align-items:center;gap:15px;padding:20px;border-radius:15px;background:color-mix(in srgb,var(--vr-accent) 7%,var(--vr-bg));font-size:14px; }.vr-guide-banner>strong { margin-right:auto; }.vr-guide-banner svg { color:var(--vr-accent); }.vr-guide-layout { display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px; }.vr-topics { display:grid;align-content:start;gap:4px; }.vr-topics button { text-align:left;justify-content:start!important;background:transparent;border-color:transparent;font-weight:400;color:var(--vr-muted); }.vr-topics button[aria-current=true] { background:var(--vr-raised);color:var(--vr-text); }.vr-guide-steps { margin:0;padding-left:23px;display:grid;gap:18px;font-size:13px;line-height:1.85; }.vr-guide-steps li::marker { color:var(--vr-accent);font-family:ui-monospace,monospace; }
.vr-dialog { width:min(620px,calc(100vw - 32px));max-height:85dvh;border:1px solid var(--vr-border);border-radius:18px;padding:26px;box-shadow:0 30px 100px #0008; }.vr-dialog::backdrop { background:#0009;backdrop-filter:blur(5px); }.vr-dialog:has(.vr-binding-grid) { width:min(900px,calc(100vw - 32px)); }.vr-modal-head { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px; }.vr-modal-head h2 { font-size:21px; }.vr-modal-body { display:grid;gap:18px; }.vr-environment-choice { display:grid;grid-template-columns:26px 1fr 24px;align-items:center;gap:8px 14px;background:var(--vr-raised);border:1px solid var(--vr-accent);padding:18px;border-radius:12px; }.vr-environment-choice code { grid-column:2;font-size:11px;overflow-wrap:anywhere;color:var(--vr-muted); }.vr-environment-choice svg:last-child { grid-row:1/3;grid-column:3;color:var(--vr-accent); }.vr-binding-grid { display:grid;grid-template-columns:170px 1fr;gap:20px; }.vr-binding-grid nav { display:grid;align-content:start;gap:8px; }.vr-binding-grid>div { display:grid;gap:15px;min-width:0; }.vr-binding-grid strong { font:12px ui-monospace,monospace;overflow-wrap:anywhere; }.vr-field { display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:12px; }.vr-field select { color:var(--vr-text);background:var(--vr-raised);border:1px solid var(--vr-border);border-radius:7px;padding:8px;max-width:60%; }.vr-field input { accent-color:var(--vr-accent);min-width:0; }.vr-error { display:flex;align-items:center;gap:14px;padding:18px;background:var(--vr-raised);border-radius:12px;color:var(--vr-accent); }
.vr-device-switch { padding:12px 22px;border-bottom:1px solid var(--vr-border);background:var(--vr-surface); }
.vr-device-switch [aria-pressed=true],.vr-modal-body .vr-actions [aria-pressed=true] { background:var(--vr-accent);color:var(--vr-on);border-color:transparent; }
.vr-brand-visor { width:170px;height:85px;flex-shrink:0; }
.vr-brand>.vr-brand-visor { width:44px;height:30px; }
.vr-portal>.vr-brand-visor { position:relative;z-index:1;transform:rotate(-10deg);filter:drop-shadow(3px 14px 10px #0003); }
.v2-vr .vr-hero { color:var(--vr-text);background:linear-gradient(130deg,var(--vr-raised),var(--vr-surface));border-color:var(--vr-border); }
.v2-vr .vr-hero p { color:var(--vr-muted); }
.v2-vr .vr-hero .vr-button { --vr-accent:inherit;--vr-on:inherit;--vr-raised:inherit;--vr-text:inherit;--vr-border:inherit; }
.v2-vr .vr-eyebrow { color:var(--vr-accent); }
.vr-preparation { max-width:780px;margin-inline:auto; }
.vr-prep-required { color:var(--vr-accent);font-size:17px;line-height:1.5; }
.vr-prep-steps { counter-reset:prep;list-style:none;margin:0;padding:0;display:grid;gap:22px; }
.vr-prep-steps li { counter-increment:prep;position:relative;padding-left:46px; }
.vr-prep-steps li::before { content:counter(prep);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--vr-accent);background:var(--vr-raised);font:600 13px ui-monospace,monospace; }
.vr-prep-steps strong { font-size:15px; }.vr-prep-steps p { font-size:13px;margin-top:6px; }
.vr-vision-window { max-width:720px;margin:24px auto;border:1px solid var(--vr-border);border-radius:24px;overflow:hidden;background:var(--vr-surface);box-shadow:0 18px 50px #0002; }
.vr-vision-bar { display:flex;align-items:center;gap:12px;padding:22px 28px 10px; }.vr-vision-bar>.vr-brand-visor { width:38px;height:24px; }.vr-vision-bar>.vr-icon { margin-left:auto; }
.vr-vision-window .vr-scroll { height:650px; }.vr-vision-heading { display:flex;align-items:center;gap:12px; }.vr-vision-heading>div:first-child { flex:1; }.vr-vision-heading h2 { font-size:27px!important;white-space:pre-line; }.vr-vision-heading p { margin-top:12px; }.vr-vision-heading>.vr-portal { width:180px;min-height:170px; }
.vr-vision-window .vr-panel { background:color-mix(in srgb,var(--vr-raised) 60%,var(--vr-surface)); }.vr-vision-window .vr-button { min-height:44px; }
.vr-settings-body { display:grid;gap:16px; }.vr-toggle-row { display:grid;gap:7px; }.vr-toggle { width:100%;justify-content:space-between!important;text-align:left;background:transparent;border:0;padding:8px 0;font-weight:500; }
.vr-toggle::after { content:'';width:32px;height:20px;border-radius:10px;flex-shrink:0;background:radial-gradient(circle at 10px 10px,var(--vr-text) 7px,transparent 7.5px),var(--vr-border); }
.vr-toggle[aria-checked=true]::after { background:radial-gradient(circle at 22px 10px,var(--vr-on) 7px,transparent 7.5px),var(--vr-accent); }
.vr-field input[type=password] { font:13px ui-monospace,monospace;border:1px solid var(--vr-border);background:var(--vr-bg);color:var(--vr-text);padding:12px;border-radius:8px;width:100%; }
.vr-immersive-space { min-height:550px;padding:55px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--vr-accent) 12%,var(--vr-bg)),var(--vr-bg)); }
.vr-immersive-space p { max-width:480px; }.vr-immersive-space h2 { font-size:27px; }.vr-immersive-space .vr-brand-visor { width:200px;height:100px; }
.v2-immersive .v2-vr { max-width:1400px; }.v2-immersive .vr-scroll { height:calc(100dvh - 360px);min-height:260px; }
@media(max-width:650px) { .vr-device-switch { padding:10px 12px;gap:8px; }.vr-device-switch button { flex:1;font-size:11px!important; }.vr-vision-window { margin:12px;border-radius:18px; }.vr-vision-bar { padding:18px 16px 8px; }.vr-vision-heading>.vr-portal { display:none; }.vr-vision-heading h2 { font-size:24px!important; }.vr-prep-steps li { padding-left:38px; }.vr-vision-window .vr-field { align-items:stretch;flex-direction:column; }.vr-vision-window .vr-field select { max-width:100%; }.vr-immersive-space { min-height:530px; } }
@media(max-width:1050px) { .vr-layout { grid-template-columns:165px minmax(0,1fr); }.vr-sidebar { padding:20px 12px; }.vr-scroll { padding:20px; }.vr-hero { grid-template-columns:minmax(0,1fr) 190px; }.vr-hero-copy { padding:24px; }.vr-hero h3 { font-size:27px!important; }.vr-device-grid { grid-template-columns:minmax(0,1fr); }.vr-session { padding:12px;flex-wrap:wrap; }.vr-guide-layout { grid-template-columns:140px minmax(0,1fr); } }
@media(max-width:650px) { .vr-tour { align-items:start;flex-direction:column;gap:10px;padding:15px; }.vr-tour>.vr-button { max-width:none; }.vr-layout { display:block; }.vr-sidebar { padding:12px;gap:10px;border-right:0;border-bottom:1px solid var(--vr-border); }.vr-brand,.vr-sidebar-card,.vr-sidebar>.vr-preview,.vr-sidebar>.vr-muted { display:none; }.vr-sidebar nav { display:flex;gap:5px; }.vr-nav { padding:10px 7px;justify-content:center!important;font-size:11px; }.vr-nav[aria-current=true]::after { display:none; }.vr-chrome>span { display:none; }.vr-chrome>.vr-icon { margin-left:auto; }.vr-scroll { padding:16px;height:660px;gap:18px; }.vr-page-head { align-items:start;flex-direction:column;gap:8px; }.vr-page-head h2 { font-size:23px!important; }.vr-hero { display:block;position:relative; }.vr-hero-copy { position:relative;z-index:1;padding:22px; }.vr-portal { position:absolute;right:-50px;top:0;width:220px;height:100%;opacity:.2;pointer-events:none; }.vr-hero h3 { font-size:27px!important; }.vr-readiness { gap:0;padding:8px 2px; }.vr-step { display:flex!important;align-items:center!important;flex-direction:column;font-size:10px;padding:8px 3px;text-align:center; }.vr-two { grid-template-columns:1fr; }.vr-panel { padding:18px; }.vr-quality { grid-template-columns:1fr; }.vr-quality .vr-choice { min-height:64px; }.vr-guide-layout { grid-template-columns:1fr; }.vr-topics { grid-template-columns:1fr 1fr;gap:4px; }.vr-topics button { font-size:11px; }.vr-guide-banner { flex-wrap:wrap;font-size:13px; }.vr-guide-banner>strong { flex:1; }.vr-session { gap:10px; }.vr-session .vr-text { order:5; }.vr-dialog { padding:20px; }.vr-binding-grid { grid-template-columns:1fr; }.vr-binding-grid nav { grid-template-columns:repeat(3,1fr); }.vr-field { flex-wrap:wrap; }.v2-immersive .vr-scroll { height:calc(100dvh - 380px);min-height:300px; } }