.build-hero{width:min(100%,780px);margin:0 auto var(--space-8);perspective:1000px;color:var(--color-text-muted);--build-fade:1;position:relative}.build-hero__perspective{transform-origin:50%;transform:rotateX(16deg)rotateY(-9deg)rotate(-3deg)}.build-hero__scene{fill:none;stroke:currentColor;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;width:100%;height:auto;opacity:var(--build-fade);display:block;overflow:visible}.build-hero__scene :where(path,rect,circle,ellipse,line,polyline,polygon,g),.build-hero__pause path{fill:none}.build-hero__quiet{color:var(--color-text-subtle)}.build-hero__surface{fill:var(--color-bg);stroke:var(--color-border)}.build-hero__cursor{stroke:var(--color-text)}.build-hero__screen-base{fill:var(--color-bg);stroke:var(--color-border-light)}.build-hero__screen-edge{stroke:var(--color-text-muted)}.build-hero__screen-finish{fill:none;stroke:var(--color-text);stroke-width:2px}.build-hero__glyphs{color:var(--color-text);stroke-width:1.5px}.build-hero [data-pulse]{stroke:var(--color-text)}.build-hero [data-core]{stroke:var(--color-text);stroke-width:1.5px}.build-hero__scan{color:var(--color-text);stroke:currentColor;stroke-width:1.5px;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--color-text)40%,transparent))}.build-hero [data-draw]{stroke-dasharray:1;stroke-dashoffset:0}.build-hero__pause{width:var(--space-8);height:var(--space-8);color:var(--color-text-subtle);border:1px solid var(--color-border-light);border-radius:var(--radius-pill);background:var(--color-bg);cursor:pointer;place-items:center;display:grid;position:absolute;bottom:0;right:0}.build-hero__pause svg{width:var(--space-4);height:var(--space-4);fill:none;stroke:currentColor;stroke-width:1.5px}.build-hero__pause:hover{color:var(--color-text);border-color:var(--color-text-subtle)}.build-hero__pause:focus-visible{outline:2px solid var(--color-action);outline-offset:var(--space-1)}@media (max-width:640px){.build-hero{margin-block:var(--space-4)var(--space-6)}.build-hero__perspective{transform:rotateX(12deg)rotateY(-6deg)rotate(-3deg)}.build-hero__pause{bottom:calc(-1*var(--space-4))}}@media (prefers-reduced-motion:reduce){.build-hero__perspective{transform:none}}.app .vbc-home .vbc-hero--centered{padding-block:var(--space-20)var(--space-20)}.app .vbc-home .vbc-hero--centered .vbc-hero-copy{text-align:center;flex-direction:column;align-items:center;width:100%;display:flex}.app .vbc-home .vbc-hero--centered .vbc-hero-copy>h1,.app .vbc-home .vbc-hero--centered .vbc-hero-copy>p{text-align:center}.app .vbc-home .vbc-hero--centered .vbc-hero-form{margin-top:var(--space-8);justify-content:center}.app .vbc-home .vbc-hero--centered .vbc-subscribe-done{margin-top:var(--space-8);color:var(--color-success)}.app .vbc-home .vbc-hero--centered .vbc-subscribe-error{text-align:center;flex-basis:100%}@media (max-width:640px){.app .vbc-home .vbc-hero--centered{padding-block:var(--space-16)var(--space-12)}}.app .vbc-home .vbc-hero--showcase{padding:var(--space-12)0 var(--space-12)}.app .vbc-home .vbc-hero--showcase .vbc-hero-workspace{width:calc(100% - var(--space-16));align-items:center;gap:var(--space-8);grid-template-columns:minmax(360px,.85fr) minmax(0,1.4fr);max-width:1600px;min-height:560px;margin-inline:auto;display:grid}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy{z-index:1;padding-left:var(--space-8);position:relative}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy h1,.app .vbc-home .vbc-hero--showcase .vbc-hero-copy p{text-align:left}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy p{max-width:448px;margin:var(--space-6)0 0}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy .vbc-hero-form{margin-top:var(--space-8);justify-content:flex-start}.app .vbc-home .vbc-hero--showcase .vbc-hero-visual{min-width:0;padding-block:var(--space-8)}.app .vbc-home .vbc-hero--showcase .build-hero{perspective:1200px;width:100%;margin:0}.app .vbc-home .vbc-hero--showcase .build-hero__perspective{transform:translateY(var(--build-lift,0px))rotateX(12deg)rotateY(calc(-12deg + var(--build-turn,0deg)))rotateZ(-4deg)}.app .vbc-home .vbc-hero--showcase .build-hero[data-variant=layers] .build-hero__perspective{transform:translateY(var(--build-lift,0px))rotateX(28deg)rotateY(calc(-20deg + var(--build-turn,0deg)))rotateZ(-12deg)}.app .vbc-home .vbc-hero--showcase .build-hero[data-variant=orbit] .build-hero__perspective{transform:translateY(var(--build-lift,0px))rotateX(16deg)rotateY(calc(-8deg - var(--build-turn,0deg)))rotateZ(4deg)}.app .vbc-home .vbc-hero--showcase .build-hero[data-variant=blueprint] .build-hero__perspective{transform:rotateX(8deg)rotateY(calc(-6deg + var(--build-turn,0deg)))rotateZ(-2deg)}.app .vbc-home .vbc-hero--showcase .build-hero[data-variant=studio] .build-hero__perspective{transform:translateY(var(--build-lift,0px))rotateX(6deg)rotateY(calc(-14deg + var(--build-turn,0deg)))rotateZ(-3deg)}.app .vbc-home .vbc-hero--showcase .build-hero__pause{right:var(--space-4);bottom:0}.app .vbc-home .vbc-hero--showcase .build-hero__scan{stroke:var(--color-text)}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants{width:calc(100% - var(--space-16));max-width:1120px;margin:var(--space-8)auto 0}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons button{align-items:center;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-radius:var(--radius-pill);color:var(--color-text-subtle);cursor:pointer;font:inherit;background:0 0;border:1px solid #0000;transition:color .2s,background-color .2s,border-color .2s;display:inline-flex}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons button span{font-family:var(--font-mono);font-size:var(--text-caption)}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons button:hover{color:var(--color-text);border-color:var(--color-border)}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons button[aria-pressed=true]{background:var(--color-surface-soft);color:var(--color-text);border-color:var(--color-border)}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons button:focus-visible{outline:2px solid var(--color-action);outline-offset:var(--space-1)}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants>p{text-align:center;margin:var(--space-4)auto 0;font-size:var(--text-caption);color:var(--color-text-subtle);min-height:var(--space-10)}@media (min-width:1600px){.app .vbc-home .vbc-hero--showcase .vbc-hero-workspace{min-height:640px}}@media (max-width:1100px){.app .vbc-home .vbc-hero--showcase .vbc-hero-workspace{gap:var(--space-4);grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);min-height:480px}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy{padding-left:0}}@media (max-width:900px){.app .vbc-home .vbc-hero--showcase .vbc-hero-workspace{gap:var(--space-4);grid-template-columns:1fr;min-height:0}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy{padding-top:var(--space-6)}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy p{max-width:620px}.app .vbc-home .vbc-hero--showcase .vbc-hero-visual{justify-self:end;width:100%;max-width:780px}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants{margin-top:var(--space-4)}}@media (max-width:640px){.app .vbc-home .vbc-hero--showcase{padding-block:var(--space-6)var(--space-8)}.app .vbc-home .vbc-hero--showcase .vbc-hero-workspace,.app .vbc-home .vbc-hero--showcase .vbc-hero-variants{width:calc(100% - var(--space-8))}.app .vbc-home .vbc-hero--showcase .vbc-hero-copy{padding-top:var(--space-4)}.app .vbc-home .vbc-hero--showcase .vbc-hero-visual{padding-block:var(--space-4)}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons{gap:var(--space-2);justify-content:flex-start}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants__buttons button{padding:var(--space-2)var(--space-3);gap:var(--space-2)}.app .vbc-home .vbc-hero--showcase .vbc-hero-variants>p{text-align:left}}@media (prefers-reduced-motion:reduce){.app .vbc-home .vbc-hero--showcase .build-hero[data-variant] .build-hero__perspective{transform:none}}
:root .app .vbc-button{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3)var(--space-6);min-height:var(--space-12);border-radius:var(--radius-pill);box-sizing:border-box;font:400 var(--text-control)/1.4 var(--font-sans);text-align:center;cursor:pointer;border:0;text-decoration:none;transition:background-color .24s,color .24s,box-shadow .24s,opacity .24s;display:inline-flex}:root .app .vbc-button[data-variant=primary]{background-color:var(--color-action);color:var(--whiteC);background-image:linear-gradient(155deg,color-mix(in srgb,var(--whiteC)8%,transparent),transparent 60%);box-shadow:inset 0 4px 8px color-mix(in srgb,var(--whiteC)5%,transparent),0 4px 12px color-mix(in srgb,var(--color-dark)16%,transparent)}:root .app .vbc-button[data-variant=primary]:hover,.app .vbc-course-card:hover .vbc-button[data-variant=primary]{background-color:var(--color-action-hover);color:var(--whiteC);text-decoration:none}:root .app .vbc-button[data-variant=gray]{background:var(--color-surface-muted);color:var(--color-text);box-shadow:none}:root .app .vbc-button[data-variant=gray]:hover{background-color:var(--color-border);color:var(--color-text);text-decoration:none}:root .app .vbc-button[data-variant=ghost]{color:var(--color-action);box-shadow:none;background:0 0;padding-inline:0}:root .app .vbc-button[data-variant=ghost]:hover{color:var(--color-action-hover);text-underline-offset:var(--space-1);background:0 0;text-decoration:underline}:root .app .vbc-button:disabled,:root .app .vbc-button[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}@media (prefers-reduced-motion:reduce){:root .app .vbc-button{transition:none}}
.examples{flex-flow:column wrap;align-items:center;gap:24px;width:100%;padding:24px 0;display:flex}.examples .action-group{gap:8px;display:flex}.examples .btn-dropdown.bottom{position:fixed;bottom:24px}.examples .btn-dropdown.bottom.right{right:24px}.examples .btn-dropdown.bottom.left{left:24px}
.overlay.example .overlay-body{flex-direction:column;gap:12px;padding:24px;display:flex}.overlay.example .overlay-body input{width:100%;height:44px}