@font-face{font-family:VL Space Grotesk;src:url(/assets/fonts/library/spacegrotesk/font.ttf)format("truetype");font-weight:300 700;font-style:normal;font-display:swap}@font-face{font-family:VL DM Serif;src:url(/assets/fonts/library/dmserifdisplay/italic.ttf)format("truetype");font-weight:400;font-style:italic;font-display:swap}body.viewport-lab-page{--vl-font:"VL Space Grotesk",Arial,sans-serif;--vl-italic:"VL DM Serif",Georgia,serif;--nav-text:var(--vl-font);--nav-pixel:var(--vl-font);--nav-mono:var(--vl-font);font-family:var(--vl-font);--vl-bg:#0b0f12;--vl-panel:#101519;--vl-line:#2b343b;--vl-muted:#9aabb6;--vl-coral:#ff615c;--vl-cyan:#53d6d0;--nav-paper:#101519f5;--nav-ink:#edf1f3;--nav-red:#ff615c;color-scheme:dark;background:var(--vl-bg);color:#edf1f3}.vl-page{width:min(1600px,100% - 4rem);padding-top:clamp(9rem,16vh,12rem)}.vl-intro{grid-template-columns:1fr 1fr;align-items:center;gap:3rem;padding:1rem 0 3rem;display:grid}.vl-label{color:var(--vl-cyan);font:700 .65rem/1.6 var(--vl-font);letter-spacing:.12em;margin:0}.vl-intro h1{font:700 clamp(3rem,6vw,6.5rem)/.93 var(--vl-font);letter-spacing:-.07em;margin:.8rem 0 0}.vl-intro h1>span{color:var(--vl-coral);font:italic 400 1.2em/.88 var(--vl-italic);letter-spacing:-.04em;display:block}.vl-cursor{color:var(--vl-cyan);animation:1.4s step-end infinite vl-cursor}@keyframes vl-cursor{50%{opacity:0}}.vl-intro__copy{max-width:38rem}.vl-lead{font:600 clamp(1.5rem,2.5vw,2.2rem)/1.2 var(--vl-font);letter-spacing:-.04em;margin:.6rem 0 .8rem}.vl-lead em{font:italic 400 1.15em/1.2 var(--vl-italic);color:#e6edf1}.vl-intro__copy>p:last-of-type{max-width:52ch;color:var(--vl-muted);font-size:.94rem;line-height:1.65}.vl-badges{flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;display:flex}.vl-badges span{border:1px solid var(--vl-line);color:#becbd2;font:700 .6rem/1.3 var(--vl-font);letter-spacing:.06em;padding:.4rem .65rem}.vl-badges .vl-badges__pending{color:var(--vl-coral);background:#ff615c0a;border-color:#ff615c55}.vl-repository-links{flex-wrap:wrap;gap:.6rem;margin-top:1rem;display:flex}.vl-repository-link{border:1px solid var(--vl-coral);min-height:44px;color:var(--vl-coral);font:700 .8rem/1.3 var(--vl-font);background:#ff615c0a;border-radius:10px;align-items:center;gap:1rem;padding:.75rem 1rem;text-decoration:none;display:inline-flex}.vl-repository-link:hover{background:#ff615c20}.vl-repository-link:focus-visible{outline:2px solid var(--vl-coral);outline-offset:4px}.vl-workbench{border:1px solid var(--vl-line);background:var(--vl-panel);border-radius:24px;display:block;overflow:hidden;box-shadow:0 20px 80px #0005}.vl-toolbar{border-bottom:1px solid var(--vl-line);min-height:3.7rem;font:700 .65rem/1.4 var(--vl-font);flex-wrap:wrap;align-items:center;gap:1rem;padding:.85rem 1.1rem;display:flex}.vl-toolbar__title{align-items:center;gap:.6rem;display:flex}.vl-status{background:var(--vl-cyan);width:6px;height:6px;box-shadow:0 0 8px #53d6d040}.vl-toolbar__path{color:var(--vl-muted);border:1px solid var(--vl-line);background:#0b0f12;flex:1;margin-left:1rem;padding:.6rem .85rem;font-weight:400}.vl-toolbar__count{color:var(--vl-coral)}.vl-workbench__body{grid-template-columns:230px minmax(0,1fr);display:grid}.vl-sidebar{border-right:1px solid var(--vl-line);flex-direction:column;min-width:0;padding:1.25rem .85rem;display:flex}.vl-sidebar>.vl-label{padding:0 .4rem}.vl-selector{gap:.5rem;margin-top:1rem;display:grid}.vl-view{color:#c9d3d9;width:100%;min-height:4.4rem;font:700 .72rem/1.4 var(--vl-font);text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:.7rem;padding:.75rem .6rem;transition:background .2s,border-color .2s;display:flex}.vl-view:hover{border-color:var(--vl-line);background:#ffffff06}.vl-view[aria-pressed=true]{box-shadow:inset 3px 0 var(--vl-coral);color:#fff;background:#ff615c0d;border-color:#ff615c70}.vl-view small{color:var(--vl-muted);margin-top:.25rem;font-size:.58rem;font-weight:400;display:block}.vl-view__arrow{color:var(--vl-coral);margin-left:auto}.vl-device{border:1px solid var(--vl-muted);border-radius:2px;flex-shrink:0;width:18px;height:13px}.vl-device--phone{width:13px;height:20px}.vl-device--tablet{width:17px;height:22px}.vl-device--grid{background:linear-gradient(90deg,#0000 47%,#9aabb6 47% 53%,#0000 53%),linear-gradient(#0000 47%,#9aabb6 47% 53%,#0000 53%)}.vl-sidebar__note{margin-top:auto;padding:2rem .4rem .25rem}.vl-sidebar__note p{color:var(--vl-muted);font:400 .85rem/1.65 var(--vl-font)}.vl-canvas{background-color:#0b0f12;background-image:linear-gradient(#9aabb609 1px,#0000 1px),linear-gradient(90deg,#9aabb609 1px,#0000 1px);background-size:24px 24px;min-width:0}.vl-ruler{border-bottom:1px solid var(--vl-line);color:#738591;font:400 .55rem/1.2 var(--vl-font);justify-content:space-between;padding:.55rem 1.3rem;display:flex}.vl-screen{padding:clamp(1rem,2.5vw,2.5rem)}.vl-preview{margin:0;animation:.25s ease-out vl-reveal}.vl-preview[hidden]{display:none}.vl-preview__crop{aspect-ratio:1920/952;background:#080c0f;border:1px solid #53d6d045;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 12px 30px #0006}.vl-preview__crop img{width:100%;height:auto;display:block;position:absolute;top:-8.4%}.vl-preview figcaption{color:#c0ced5;font:400 .7rem/1.5 var(--vl-font);justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;display:flex}.vl-preview figcaption>span{font:italic 400 1.15rem/1.4 var(--vl-italic)}.vl-preview figcaption a{color:var(--vl-coral);text-underline-offset:4px;flex-shrink:0;font-size:.6rem}.vl-canvas__status{border-top:1px solid var(--vl-line);color:var(--vl-cyan);font:400 .58rem/1.4 var(--vl-font);justify-content:space-between;gap:1rem;padding:.8rem 1.3rem;display:flex}.vl-canvas__status>span:last-child{color:var(--vl-muted)}.vl-footer{border-top:1px solid var(--vl-line);color:var(--vl-muted);font:700 .62rem/1.5 var(--vl-font);flex-wrap:wrap;justify-content:space-between;gap:1.2rem;margin-top:2rem;padding:1.5rem 0 2rem;display:flex}.vl-footer a{color:#c9d3d9;text-decoration:none}.vl-footer a:hover{color:var(--vl-coral)}.vl-page :is(a,button):focus-visible{outline:2px solid var(--vl-cyan);outline-offset:4px}body.viewport-lab-page .site-nav__brand img{transform:scale(1)}body.viewport-lab-page .site-nav__brand:hover img{transform:translateY(-2px)scale(1)}@keyframes vl-reveal{0%{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}@media (width<=1000px){.vl-page{width:calc(100% - 2rem)}.vl-workbench__body{grid-template-columns:190px minmax(0,1fr)}.vl-view{font-size:.65rem}}@media (width<=760px){.vl-page{padding-top:8rem}.vl-intro{grid-template-columns:1fr;gap:1.8rem;padding-bottom:2rem}.vl-intro h1{font-size:clamp(3rem,13vw,5rem)}.vl-workbench__body{grid-template-columns:1fr}.vl-sidebar{border-right:0;border-bottom:1px solid var(--vl-line);padding:1rem}.vl-selector{gap:.6rem;margin-top:.6rem;padding:.25rem .25rem .7rem;display:flex;overflow-x:auto}.vl-view{width:auto;min-width:160px;min-height:3.8rem}.vl-sidebar__note{display:none}.vl-toolbar__path{overflow-wrap:anywhere;flex-basis:100%;order:3;width:100%;margin:0}.vl-toolbar__count{margin-left:auto}.vl-screen{padding:1rem}.vl-canvas__status{flex-wrap:wrap}.vl-preview figcaption{align-items:flex-start;font-size:.65rem}.vl-footer>span{order:3;width:100%}}@media (prefers-reduced-motion:reduce){.vl-cursor,.vl-preview{animation:none}.vl-view{transition:none}}@media (width<=760px){.vl-workbench__body{grid-template-columns:minmax(0,1fr)}.vl-selector{min-width:0}.vl-view{flex-shrink:0}}.vl-badges .vl-badges__available{color:#c6efae;background:#8fc96514;border-color:#80b35d}