.hvs{display:grid;gap:22px}.hvs-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 18px}.hvs-scene{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0;color:var(--text-2);font-size:1rem}.hvs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hvs-play{align-self:stretch;justify-self:end;min-width:104px;justify-content:center}.hvs-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);grid-template-rows:repeat(4,auto)}.hvs-side{min-width:0;grid-row:span 4;display:grid;grid-template-rows:subgrid;justify-items:center;gap:16px;padding:26px 22px 24px;border:1px solid var(--line);border-radius:var(--radius-xl);background:#0a17306b;transition:border-color .5s ease,box-shadow .5s ease}.hvs-liberty{border-color:var(--blue-line);background:radial-gradient(70% 60% at 50% 0%,rgba(59,130,246,.14),transparent 70%),radial-gradient(60% 50% at 50% 100%,rgba(139,123,255,.08),transparent 70%),#0a17308c}.hvs.is-step-2 .hvs-builtin{border-color:#f0a08e66;box-shadow:inset 0 0 60px #e0563e12}.hvs.is-step-2 .hvs-liberty{box-shadow:0 0 70px #3b82f629}.hvs-head{min-width:0;max-width:100%;align-self:end;display:grid;gap:10px;justify-items:center;text-align:center}.hvs-head>:first-child{min-height:26px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.hvs-head h3{margin:0;font-size:1.3rem;letter-spacing:-.015em}.hvs-sim{--sim-w: min(250px, 100%);--sim-glow: 0 0 50px rgba(59, 130, 246, .16)}.hvs-sim .as-device{box-shadow:0 0 0 1px #a0c4ff33,0 24px 60px #00020c80,var(--sim-glow)}.hvs.is-step-0 .hvs-sim{cursor:pointer}.hvs-caption{display:grid;width:100%;max-width:300px;text-align:center}.hvs-caption p{grid-area:1 / 1;margin:0;color:var(--text-2);font-size:.95rem;line-height:1.5;visibility:hidden}.hvs-caption p.is-shown{visibility:visible;animation:fade-up .4s var(--ease-precise) both}.hvs-chip{max-width:100%;display:inline-flex;white-space:nowrap;align-items:center;gap:8px;margin:0;padding:7px 12px;border:1px solid var(--line-strong);border-radius:999px;color:var(--muted);font:500 .6rem/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;transition:color .4s ease,border-color .4s ease,background-color .4s ease}.hvs.is-step-2 .hvs-chip-builtin{border-color:#f0a08e8c;background:#e0563e1a;color:#f0a08e}.hvs-chip-liberty{border-color:#ffb06659;color:var(--boundary)}.hvs.is-step-2 .hvs-chip-liberty{border-color:#ffb066b3;background:var(--boundary-wash)}.hvs-vs{grid-column:2;grid-row:1 / span 4;align-self:center;justify-self:center;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;background:var(--night);color:var(--muted);font:500 .62rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.hvs-foot{margin:0;color:var(--faint);font-size:.86rem;text-align:center}.os-screen{background:linear-gradient(180deg,#161b2b,#0c101c)}.os-screen .as-scroll{display:flex;flex-direction:column;padding-bottom:calc(30 * var(--u))}.os-title{font:600 calc(30 * var(--u)) / 1.1 var(--font-sans);letter-spacing:-.02em}.os-search{margin:calc(12 * var(--u)) 0 calc(18 * var(--u));padding:calc(10 * var(--u)) calc(14 * var(--u));border-radius:calc(12 * var(--u));background:#ffffff14;color:#8c95a8;font:400 calc(15 * var(--u)) / 1 var(--font-sans)}.os-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(16 * var(--u)) calc(18 * var(--u));margin-bottom:calc(16 * var(--u))}.os-home{margin-top:calc(12 * var(--u));row-gap:calc(22 * var(--u))}.os-cell{position:relative;display:grid;justify-items:center;gap:calc(7 * var(--u))}.os-tile{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:24%;background:linear-gradient(160deg,hsl(calc(206deg + var(--h) * 7deg) 32% 38%),hsl(calc(216deg + var(--h) * 7deg) 36% 22%));box-shadow:inset 0 1px #ffffff1a}.os-name{width:70%;height:calc(5 * var(--u));border-radius:3px;background:#ffffff29}.os-app{background:linear-gradient(160deg,#0d2252,#050a16)}.os-app img{width:74%;height:auto}.os-app-name{color:#eaf0fa;font:500 calc(10.5 * var(--u)) / 1 var(--font-sans);white-space:nowrap}.os-hidden{display:grid;justify-items:start;gap:calc(8 * var(--u));width:calc(84 * var(--u));margin-top:auto}.os-dock{margin:auto 0 0;padding:calc(14 * var(--u));border-radius:calc(30 * var(--u));background:#ffffff14}.os-hidden b{font:500 calc(12 * var(--u)) / 1 var(--font-sans);color:#c9d2e3}.os-folder{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:24%;background:#ffffff1a;color:#eaf0fa}.os-folder svg{width:34%;height:34%}.os-target:after{content:"";position:absolute;inset:calc(-5 * var(--u));border:2px solid rgba(91,155,255,.9);border-radius:28%;opacity:0}.hvs.is-step-0 .os-target:after{animation:os-ping 1.8s ease-out .6s infinite}@keyframes os-ping{0%{opacity:.9;transform:scale(.92)}80%,to{opacity:0;transform:scale(1.25)}}.os-auth{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#04060c9e;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}.os-auth.is-active{opacity:1;visibility:visible;transition-delay:0s}.os-auth-card{width:74%;display:grid;justify-items:center;gap:calc(10 * var(--u));padding:calc(26 * var(--u)) calc(18 * var(--u));border-radius:calc(26 * var(--u));background:#282e3ef5;text-align:center;transform:scale(.9);transition:transform .4s var(--ease-precise)}.os-auth.is-active .os-auth-card{transform:none}.os-auth-card b{font:600 calc(16 * var(--u)) / 1.25 var(--font-sans)}.os-auth-card small{color:#9aa4b8;font:400 calc(12.5 * var(--u)) / 1 var(--font-sans)}.os-face{width:calc(52 * var(--u));height:calc(52 * var(--u));color:#5b9bff}.os-auth.is-active .os-face{animation:os-scan 1.1s ease-in-out infinite alternate}@keyframes os-scan{0%{opacity:.45;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}.os-unlocked{align-self:flex-start;display:inline-flex;align-items:center;gap:calc(6 * var(--u));margin-bottom:calc(10 * var(--u))!important;padding:calc(5 * var(--u)) calc(10 * var(--u));border-radius:99px;background:#e0563e29;color:#f0a08e;font:500 calc(10 * var(--u)) / 1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.os-unlocked svg{width:calc(11 * var(--u));height:calc(11 * var(--u))}.os-private .as-items{margin-top:calc(18 * var(--u))!important}.os-private.is-active .as-items li{animation:as-rise .46s var(--ease-precise) both;animation-delay:calc(.12s + var(--i) * 60ms)}@media(max-width:680px){.hvs-bar{grid-template-columns:1fr}.hvs-play{justify-self:start}.hvs-steps{gap:6px}.hvs-steps .br-step{min-height:0;grid-template-columns:1fr;gap:6px;padding:10px 10px 14px}.hvs-steps .br-step-title{font-size:.8rem;line-height:1.25}.hvs-steps .br-step-bar{left:10px;right:10px}.hvs-scene{font-size:.92rem}.hvs-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.hvs-vs{display:none}.hvs-side{padding:16px 10px;gap:12px}.hvs-head h3{font-size:1rem}.hvs-head>:first-child{min-height:40px;gap:4px}.hvs-head .demo-label,.hvs-head .status-badge{font-size:.5rem;letter-spacing:.05em;white-space:normal;text-align:center}.hvs-caption p{font-size:.82rem}.hvs-chip{gap:6px;padding:6px 8px;font-size:.48rem;letter-spacing:.04em}}@media(max-width:380px){.hvs-chip svg{display:none}}@media(prefers-reduced-motion:reduce){.hvs-caption p.is-shown,.os-target:after,.os-face,.os-private.is-active .as-items li{animation:none!important}.os-auth,.os-auth-card{transition:none!important}}