[{"data":1,"prerenderedAt":95},["ShallowReactive",2],{"room:05-flash":3},{"path":4,"meta":5,"html":84,"css":85,"snippets":86},"05-flash",{"id":6,"slug":4,"title":7,"years":8,"cta":9,"summary":12,"context":13,"traits":17,"tech":42,"thenVsNow":48,"snippets":49,"sources":63,"recreated":79},"05","Flash & splash intros","1997–2009",{"next":10,"prev":11},"ENTER »","« BACK","Macromedia Flash turned web pages into fixed-size stages: preloaders, skippable splash intros, swooshing menus, pixel fonts, sound effects and navigation you had to discover by hovering.",{"screens":14,"connection":15,"browsers":16},"800×600 to 1024×768; Flash stages were fixed sizes that scaled to fit the window","56k dial-up turning into early broadband; a 400 KB .swf needed a preloader","Internet Explorer 5–6 and Netscape with the Flash Player plug-in installed",[18,21,24,27,30,33,36,39],{"id":19,"label":20},"preloader","\"LOADING... 47%\" preloader bar",{"id":22,"label":23},"intro","An animated splash intro",{"id":25,"label":26},"skip","The SKIP INTRO link",{"id":28,"label":29},"stage","A fixed-size stage scaled to fit",{"id":31,"label":32},"menu","A menu that swooshes in",{"id":34,"label":35},"mystery-meat","Mystery-meat icon navigation",{"id":37,"label":38},"sound","A sound on\u002Foff toggle with interface bleeps",{"id":40,"label":41},"plugin","A \"get the plug-in\" badge",[43,44,45,46,47],"Macromedia Flash (later Adobe Flash) .swf movies embedded with \u003Cobject> and \u003Cembed>","ActionScript for preloaders (getBytesLoaded \u002F getBytesTotal) and interactive menus","Timeline tweens and keyframes at 12–31 frames per second","Pixel fonts designed to stay crisp at 8px without anti-aliasing","Recreated here with CSS keyframes, SVG, transform: scale() and the Web Audio API","CSS animations, SVG, canvas and the Web Audio API replaced the plug-in; Flash Player reached end of life on 31 December 2020.",[50,54,56,60],{"file":51,"lang":52,"caption":53,"region":28},"demo.html","html","One fixed stage holds preloader, intro and site",{"file":51,"lang":52,"caption":55,"region":34},"Mystery-meat navigation: icons first, labels on hover",{"file":57,"lang":58,"caption":59,"region":19},"era.client.ts","typescript","A fake preloader that lurches like dial-up",{"file":57,"lang":58,"caption":61,"region":62},"Scaling the stage like Flash's showAll mode","scale",[64,67,70,73,76],{"label":65,"url":66},"Adobe Flash (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAdobe_Flash",{"label":68,"url":69},"Splash screen (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FSplash_screen",{"label":71,"url":72},"Mystery meat navigation (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMystery_meat_navigation",{"label":74,"url":75},"Web Audio API (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWeb_Audio_API",{"label":77,"url":78},"Web Design Museum","https:\u002F\u002Fwww.webdesignmuseum.org\u002F",[80,81,82,83],"Flash Player is gone, so the .swf is rebuilt with HTML, CSS keyframes and SVG on a 760×480 stage.","The preloader is simulated; nothing large is actually downloaded.","Sound effects are synthesised with the Web Audio API and stay off until you switch them on.","The player badge is invented; no real plug-in logo is shown.","\u003Cdiv class=\"vx\" data-phase=\"site\">\n  \u003Ch1 class=\"vx-sr\">Vectorhaus, a digital design studio (recreated Flash site, 2001)\u003C\u002Fh1>\n\n  \u003Cheader class=\"vx-head\">\n    \u003Cspan class=\"vx-head__url vx-pix\" aria-hidden=\"true\">VECTORHAUS.SWF\u003C\u002Fspan>\n\u003Cp class=\"era-stamp\">\u003Cspan class=\"era-stamp__no\">Era 05\u002F17\u003C\u002Fspan> \u003Cspan class=\"era-stamp__years\">1997–2009\u003C\u002Fspan> \u003Cspan class=\"era-stamp__title\">Flash & splash intros\u003C\u002Fspan>\u003C\u002Fp>\n  \u003C\u002Fheader>\n\n  \u003Cdiv class=\"vx-fit\" id=\"vx-fit\">\n  \u003Cdiv class=\"vx-stage\" id=\"vx-stage\" data-trait=\"stage\" style=\"--vx-scale: 1\">\n    \u003C!-- PRELOADER -->\n    \u003Cdiv class=\"vx-preload\" data-trait=\"preloader\" aria-hidden=\"true\">\n      \u003Cp class=\"vx-pix vx-preload__label\">LOADING... \u003Cspan class=\"vx-preload__pct\">0\u003C\u002Fspan>%\u003C\u002Fp>\n      \u003Cdiv class=\"vx-preload__bar\">\u003Cspan class=\"vx-preload__fill\">\u003C\u002Fspan>\u003C\u002Fdiv>\n      \u003Cp class=\"vx-pix vx-preload__kb\">\u003Cspan class=\"vx-preload__kb-n\">0\u003C\u002Fspan> OF 412 KB\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003C!-- INTRO -->\n    \u003Cdiv class=\"vx-intro\" data-trait=\"intro\" aria-hidden=\"true\">\n      \u003Cspan class=\"vx-intro__sq vx-intro__sq--1\">\u003C\u002Fspan>\n      \u003Cspan class=\"vx-intro__sq vx-intro__sq--2\">\u003C\u002Fspan>\n      \u003Cspan class=\"vx-intro__sq vx-intro__sq--3\">\u003C\u002Fspan>\n      \u003Cspan class=\"vx-intro__line vx-intro__line--1\">\u003C\u002Fspan>\n      \u003Cspan class=\"vx-intro__line vx-intro__line--2\">\u003C\u002Fspan>\n      \u003Cspan class=\"vx-intro__line vx-intro__line--3\">\u003C\u002Fspan>\n      \u003Csvg class=\"vx-intro__swoosh\" viewBox=\"0 0 760 480\">\u003Cpath d=\"M-40 380 C 180 120, 520 520, 800 120\" \u002F>\u003C\u002Fsvg>\n      \u003Cp class=\"vx-intro__logo\">\u003Cspan>V\u003C\u002Fspan>\u003Cspan>E\u003C\u002Fspan>\u003Cspan>C\u003C\u002Fspan>\u003Cspan>T\u003C\u002Fspan>\u003Cspan>O\u003C\u002Fspan>\u003Cspan>R\u003C\u002Fspan>\u003Cspan>H\u003C\u002Fspan>\u003Cspan>A\u003C\u002Fspan>\u003Cspan>U\u003C\u002Fspan>\u003Cspan>S\u003C\u002Fspan>\u003C\u002Fp>\n      \u003Cp class=\"vx-intro__tag vx-pix\">\u002F\u002F WE BUILD EXPERIENCES_\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003C!-- THE SITE -->\n    \u003Cdiv class=\"vx-site\">\n      \u003Cdiv class=\"vx-grid\" aria-hidden=\"true\">\u003C\u002Fdiv>\n      \u003Csvg class=\"vx-orbit\" viewBox=\"0 0 200 200\" aria-hidden=\"true\">\u003Ccircle cx=\"100\" cy=\"100\" r=\"90\"\u002F>\u003Ccircle cx=\"100\" cy=\"100\" r=\"62\"\u002F>\u003Cpath d=\"M100 0v24M100 176v24M0 100h24M176 100h24\"\u002F>\u003C\u002Fsvg>\n\n      \u003Cheader class=\"vx-top\">\n        \u003Ca href=\"#vx-work\" class=\"vx-logo\" aria-label=\"Vectorhaus home\">\n          \u003Csvg viewBox=\"0 0 40 40\" aria-hidden=\"true\">\u003Cpath d=\"M4 6 L20 34 L36 6 L28 6 L20 20 L12 6Z\" \u002F>\u003Ccircle cx=\"20\" cy=\"6\" r=\"3\"\u002F>\u003C\u002Fsvg>\n          \u003Cspan>VECTORHAUS\u003C\u002Fspan>\n        \u003C\u002Fa>\n        \u003Cp class=\"vx-pix vx-coords\" aria-hidden=\"true\">X:\u003Cspan class=\"vx-x\">000\u003C\u002Fspan> Y:\u003Cspan class=\"vx-y\">000\u003C\u002Fspan>\u003C\u002Fp>\n        \u003Cp class=\"vx-pix vx-ver\" aria-hidden=\"true\">V.5.0 \u002F\u002F 2001\u003C\u002Fp>\n      \u003C\u002Fheader>\n\n      \u003Cnav class=\"vx-nav\" aria-label=\"Site sections\" data-trait=\"menu mystery-meat\">\n        \u003Ca href=\"#vx-work\" class=\"vx-nav__btn\" data-section=\"work\" aria-label=\"Work\">\n          \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Crect x=\"3\" y=\"3\" width=\"8\" height=\"8\"\u002F>\u003Crect x=\"13\" y=\"3\" width=\"8\" height=\"8\"\u002F>\u003Crect x=\"3\" y=\"13\" width=\"8\" height=\"8\"\u002F>\u003Crect x=\"13\" y=\"13\" width=\"8\" height=\"8\"\u002F>\u003C\u002Fsvg>\n          \u003Cspan class=\"vx-nav__label vx-pix\">WORK\u003C\u002Fspan>\n        \u003C\u002Fa>\n        \u003Ca href=\"#vx-about\" class=\"vx-nav__btn\" data-section=\"about\" aria-label=\"About\">\n          \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"9\"\u002F>\u003Ccircle cx=\"12\" cy=\"12\" r=\"3\"\u002F>\u003C\u002Fsvg>\n          \u003Cspan class=\"vx-nav__label vx-pix\">ABOUT\u003C\u002Fspan>\n        \u003C\u002Fa>\n        \u003Ca href=\"#vx-lab\" class=\"vx-nav__btn\" data-section=\"lab\" aria-label=\"Lab\">\n          \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M12 2 L22 20 L2 20Z\"\u002F>\u003C\u002Fsvg>\n          \u003Cspan class=\"vx-nav__label vx-pix\">LAB\u003C\u002Fspan>\n        \u003C\u002Fa>\n        \u003Ca href=\"#vx-news\" class=\"vx-nav__btn\" data-section=\"news\" aria-label=\"News\">\n          \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M3 12h18M12 3v18M5.5 5.5l13 13M18.5 5.5l-13 13\"\u002F>\u003C\u002Fsvg>\n          \u003Cspan class=\"vx-nav__label vx-pix\">NEWS\u003C\u002Fspan>\n        \u003C\u002Fa>\n        \u003Ca href=\"#vx-contact\" class=\"vx-nav__btn\" data-section=\"contact\" aria-label=\"Contact\">\n          \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Crect x=\"2\" y=\"9\" width=\"20\" height=\"6\"\u002F>\u003Crect x=\"9\" y=\"2\" width=\"6\" height=\"20\"\u002F>\u003C\u002Fsvg>\n          \u003Cspan class=\"vx-nav__label vx-pix\">CONTACT\u003C\u002Fspan>\n        \u003C\u002Fa>\n      \u003C\u002Fnav>\n\n      \u003Cdiv class=\"vx-panels\">\n        \u003Csection class=\"vx-panel is-current\" id=\"vx-work\" data-section=\"work\" aria-labelledby=\"vx-h-work\">\n          \u003Ch2 id=\"vx-h-work\" class=\"vx-h\">\u003Cspan class=\"vx-pix\">01\u003C\u002Fspan> SELECTED WORK\u003C\u002Fh2>\n          \u003Cul class=\"vx-work\">\n            \u003Cli>\u003Ca href=\"#vx-work\" class=\"vx-tile\">\u003Csvg viewBox=\"0 0 120 70\" aria-hidden=\"true\">\u003Crect width=\"120\" height=\"70\" fill=\"#111\"\u002F>\u003Cpath d=\"M0 60 L40 30 L60 45 L90 15 L120 40 L120 70 L0 70Z\" fill=\"#ff6a00\"\u002F>\u003Ccircle cx=\"96\" cy=\"16\" r=\"6\" fill=\"#ddd\"\u002F>\u003C\u002Fsvg>\u003Cspan class=\"vx-pix\">NEON DRIFT\u003C\u002Fspan>\u003Cspan class=\"vx-tile__sub\">racing game microsite\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#vx-work\" class=\"vx-tile\">\u003Csvg viewBox=\"0 0 120 70\" aria-hidden=\"true\">\u003Crect width=\"120\" height=\"70\" fill=\"#1d1d1d\"\u002F>\u003Cg fill=\"none\" stroke=\"#ff6a00\" stroke-width=\"2\">\u003Ccircle cx=\"60\" cy=\"35\" r=\"8\"\u002F>\u003Ccircle cx=\"60\" cy=\"35\" r=\"18\"\u002F>\u003Ccircle cx=\"60\" cy=\"35\" r=\"28\"\u002F>\u003C\u002Fg>\u003C\u002Fsvg>\u003Cspan class=\"vx-pix\">PULSE 98.6 FM\u003C\u002Fspan>\u003Cspan class=\"vx-tile__sub\">radio station relaunch\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#vx-work\" class=\"vx-tile\">\u003Csvg viewBox=\"0 0 120 70\" aria-hidden=\"true\">\u003Crect width=\"120\" height=\"70\" fill=\"#ddd\"\u002F>\u003Cpath d=\"M20 50 Q40 20 70 40 L100 42 L100 52 L20 52Z\" fill=\"#222\"\u002F>\u003Cpath d=\"M28 52h70\" stroke=\"#ff6a00\" stroke-width=\"3\"\u002F>\u003C\u002Fsvg>\u003Cspan class=\"vx-pix\">ORBITAL SHOES\u003C\u002Fspan>\u003Cspan class=\"vx-tile__sub\">3D product spinner\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"#vx-work\" class=\"vx-tile\">\u003Csvg viewBox=\"0 0 120 70\" aria-hidden=\"true\">\u003Crect width=\"120\" height=\"70\" fill=\"#ff6a00\"\u002F>\u003Cg fill=\"#111\">\u003Crect x=\"14\" y=\"30\" width=\"6\" height=\"26\"\u002F>\u003Crect x=\"26\" y=\"18\" width=\"6\" height=\"38\"\u002F>\u003Crect x=\"38\" y=\"40\" width=\"6\" height=\"16\"\u002F>\u003Crect x=\"50\" y=\"10\" width=\"6\" height=\"46\"\u002F>\u003Crect x=\"62\" y=\"26\" width=\"6\" height=\"30\"\u002F>\u003Crect x=\"74\" y=\"36\" width=\"6\" height=\"20\"\u002F>\u003Crect x=\"86\" y=\"22\" width=\"6\" height=\"34\"\u002F>\u003Crect x=\"98\" y=\"44\" width=\"6\" height=\"12\"\u002F>\u003C\u002Fg>\u003C\u002Fsvg>\u003Cspan class=\"vx-pix\">STATIC FEST 01\u003C\u002Fspan>\u003Cspan class=\"vx-tile__sub\">festival site with mixer\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n          \u003C\u002Ful>\n        \u003C\u002Fsection>\n\n        \u003Csection class=\"vx-panel\" id=\"vx-about\" data-section=\"about\" aria-labelledby=\"vx-h-about\">\n          \u003Ch2 id=\"vx-h-about\" class=\"vx-h\">\u003Cspan class=\"vx-pix\">02\u003C\u002Fspan> ABOUT US\u003C\u002Fh2>\n          \u003Cp class=\"vx-copy\">Vectorhaus is a five-person digital design collective working at the edge of motion, interaction and sound. We believe the web should \u003Cem>move\u003C\u002Fem>. Every pixel is deliberate. Every transition tells a story.\u003C\u002Fp>\n          \u003Cdl class=\"vx-stats vx-pix\">\n            \u003Cdiv>\u003Cdt>FOUNDED\u003C\u002Fdt>\u003Cdd>1999\u003C\u002Fdd>\u003C\u002Fdiv>\n            \u003Cdiv>\u003Cdt>KEYFRAMES\u003C\u002Fdt>\u003Cdd>1,204,330\u003C\u002Fdd>\u003C\u002Fdiv>\n            \u003Cdiv>\u003Cdt>AWARDS\u003C\u002Fdt>\u003Cdd>27\u003C\u002Fdd>\u003C\u002Fdiv>\n            \u003Cdiv>\u003Cdt>COFFEE\u003C\u002Fdt>\u003Cdd>∞\u003C\u002Fdd>\u003C\u002Fdiv>\n          \u003C\u002Fdl>\n        \u003C\u002Fsection>\n\n        \u003Csection class=\"vx-panel\" id=\"vx-lab\" data-section=\"lab\" aria-labelledby=\"vx-h-lab\">\n          \u003Ch2 id=\"vx-h-lab\" class=\"vx-h\">\u003Cspan class=\"vx-pix\">03\u003C\u002Fspan> LAB \u002F\u002F EXPERIMENTS\u003C\u002Fh2>\n          \u003Cp class=\"vx-copy\">Toys we made at 3 a.m. Move your mouse over the field, or press the buttons.\u003C\u002Fp>\n          \u003Cdiv class=\"vx-lab\">\n            \u003Cdiv class=\"vx-lab__field\" aria-hidden=\"true\">\n              \u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"vx-lab__btns\">\n              \u003Cbutton type=\"button\" class=\"vx-btn vx-pix\" data-lab=\"spin\">SPIN\u003C\u002Fbutton>\n              \u003Cbutton type=\"button\" class=\"vx-btn vx-pix\" data-lab=\"scatter\">SCATTER\u003C\u002Fbutton>\n              \u003Cbutton type=\"button\" class=\"vx-btn vx-pix\" data-lab=\"reset\">RESET\u003C\u002Fbutton>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fsection>\n\n        \u003Csection class=\"vx-panel\" id=\"vx-news\" data-section=\"news\" aria-labelledby=\"vx-h-news\">\n          \u003Ch2 id=\"vx-h-news\" class=\"vx-h\">\u003Cspan class=\"vx-pix\">04\u003C\u002Fspan> NEWS\u003C\u002Fh2>\n          \u003Cul class=\"vx-news\">\n            \u003Cli>\u003Cspan class=\"vx-pix\">11.09.01\u003C\u002Fspan> Vectorhaus v5 is live. Rebuilt from scratch in Flash 5 with ActionScript.\u003C\u002Fli>\n            \u003Cli>\u003Cspan class=\"vx-pix\">08.21.01\u003C\u002Fspan> \u003Cb>Site of the Day\u003C\u002Fb> at the Pixel Cup. Third one this year!\u003C\u002Fli>\n            \u003Cli>\u003Cspan class=\"vx-pix\">06.02.01\u003C\u002Fspan> Our talk \"Kill the Back Button\" at the Motion Summit.\u003C\u002Fli>\n            \u003Cli>\u003Cspan class=\"vx-pix\">03.15.01\u003C\u002Fspan> New lab toy: magnetic dots. 40 lines of code.\u003C\u002Fli>\n          \u003C\u002Ful>\n          \u003Cdiv class=\"vx-award vx-pix\" aria-label=\"Award: Pixel Cup Site of the Day\">PIXEL CUP\u003Cbr>\u003Cb>SITE OF\u003Cbr>THE DAY\u003C\u002Fb>\u003C\u002Fdiv>\n        \u003C\u002Fsection>\n\n        \u003Csection class=\"vx-panel\" id=\"vx-contact\" data-section=\"contact\" aria-labelledby=\"vx-h-contact\">\n          \u003Ch2 id=\"vx-h-contact\" class=\"vx-h\">\u003Cspan class=\"vx-pix\">05\u003C\u002Fspan> CONTACT\u003C\u002Fh2>\n          \u003Cform class=\"vx-form\" action=\"#vx-contact\">\n            \u003Clabel class=\"vx-pix\" for=\"vx-name\">NAME\u003C\u002Flabel>\u003Cinput id=\"vx-name\" type=\"text\" autocomplete=\"off\">\n            \u003Clabel class=\"vx-pix\" for=\"vx-mail\">E-MAIL\u003C\u002Flabel>\u003Cinput id=\"vx-mail\" type=\"email\" autocomplete=\"off\">\n            \u003Clabel class=\"vx-pix\" for=\"vx-msg\">MESSAGE\u003C\u002Flabel>\u003Ctextarea id=\"vx-msg\" rows=\"2\">\u003C\u002Ftextarea>\n            \u003Cbutton type=\"submit\" class=\"vx-btn vx-pix\">TRANSMIT >>\u003C\u002Fbutton>\n            \u003Cp class=\"vx-pix vx-form__out\" aria-live=\"polite\">\u003C\u002Fp>\n          \u003C\u002Fform>\n        \u003C\u002Fsection>\n      \u003C\u002Fdiv>\n\n      \u003Cfooter class=\"vx-foot vx-pix\">\n        \u003Cspan>© 2001 VECTORHAUS\u003C\u002Fspan>\u003Cspan>BEST VIEWED 1024x768 \u002F\u002F SOUND ON\u003C\u002Fspan>\u003Cspan class=\"vx-foot__fps\" aria-hidden=\"true\">31 FPS\u003C\u002Fspan>\n      \u003C\u002Ffooter>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"vx-enter\">\n\u003Cnav class=\"era-cta\" aria-label=\"Travel through time\">\u003Ca class=\"era-cta__next\" rel=\"next\" href=\"\u002Feras\u002F06-y2k\u002F\">\u003Cspan class=\"era-cta__label\">ENTER »\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">1998–2003 · Y2K chrome & futurism\u003C\u002Fspan>\u003C\u002Fa> \u003Ca class=\"era-cta__prev\" rel=\"prev\" href=\"\u002Feras\u002F04-tables-portals\u002F\">\u003Cspan class=\"era-cta__label\">« BACK\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">1996–2003 · Table layouts & portals\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fnav>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"vx-controls\">\n    \u003Ca href=\"#vx-stage\" class=\"vx-skip vx-pix\" data-trait=\"skip\">SKIP INTRO >>\u003C\u002Fa>\n    \u003Cbutton type=\"button\" class=\"vx-btn vx-pix vx-sound\" aria-pressed=\"false\" data-trait=\"sound\">SOUND: OFF\u003C\u002Fbutton>\n    \u003Cbutton type=\"button\" class=\"vx-btn vx-pix vx-replay\">REPLAY INTRO\u003C\u002Fbutton>\n    \u003Cspan class=\"vx-badge\" data-trait=\"plugin\" role=\"img\" aria-label=\"Badge: Get the Vector Player plug-in\">\n      \u003Csvg viewBox=\"0 0 30 30\" aria-hidden=\"true\">\u003Ccircle cx=\"15\" cy=\"15\" r=\"14\" fill=\"#ff6a00\"\u002F>\u003Ccircle cx=\"15\" cy=\"15\" r=\"10\" fill=\"#111\"\u002F>\u003Cpath d=\"M9 9 L15 22 L21 9\" stroke=\"#ff6a00\" stroke-width=\"3\" fill=\"none\"\u002F>\u003C\u002Fsvg>\n      \u003Cspan>\u003Csmall>Get\u003C\u002Fsmall> VECTOR\u003Cbr>PLAYER 5\u003C\u002Fspan>\n    \u003C\u002Fspan>\n    \u003Cp class=\"vx-note\">This site would have been one \u003Ccode>.swf\u003C\u002Fcode> file made in Macromedia Flash. Here it is rebuilt with HTML, CSS and SVG: no plug-in required.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","@layer era, shell;\n@layer era {\n\u002F* Era 05: a Flash design-agency site, rebuilt with HTML, CSS and SVG on a fixed 760x480 stage. *\u002F\n[data-era=\"05\"] {\n  --vx-ink: #e8e8e8;\n  --vx-dim: #9a9a9a;\n  --vx-bg: #0d0d0d;\n  --vx-orange: #ff6a00;\n  --vx-panel: #1a1a1a;\n  --vx-line: #333;\n  --vx-pixfont: 'Silkscreen', 'Press Start 2P', 'DejaVu Sans Mono', ui-monospace, Consolas, monospace;\n  background: radial-gradient(ellipse at 50% 30%, #2a2a2a, #050505 70%);\n  color: var(--vx-ink);\n  font: 12px\u002F1.5 Verdana, Tahoma, 'DejaVu Sans', sans-serif;\n\n  .vx {\n    max-width: 960px;\n    margin: 0 auto;\n    padding: 24px 16px;\n    box-sizing: border-box;\n  }\n  .vx-sr {\n    position: absolute; width: 1px; height: 1px; overflow: hidden;\n    clip-path: inset(50%); white-space: nowrap;\n  }\n  \u002F* Pixel-font look: tiny, uppercase, wide-tracked, no smoothing *\u002F\n  .vx-pix {\n    font-family: var(--vx-pixfont);\n    font-size: 9px;\n    font-weight: bold;\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    -webkit-font-smoothing: none;\n    font-smooth: never;\n  }\n\n  \u002F* ---------- Fixed stage, scaled to fit (\"showAll\") ---------- *\u002F\n  .vx-fit {\n    position: relative;\n    width: 100%;\n    max-width: 760px;\n    margin: 0 auto;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .vx-stage {\n    position: relative;\n    width: 760px;\n    height: 480px;\n    transform: scale(var(--vx-scale));\n    transform-origin: 0 0;\n    background: var(--vx-bg);\n    overflow: hidden;\n    box-shadow: inset 0 0 0 1px #333;\n  }\n  .vx-stage:focus { outline: 1px solid #444; }\n\n  \u002F* ---------- Phases ---------- *\u002F\n  .vx-preload, .vx-intro { display: none; }\n  .vx[data-phase='preload'] .vx-preload,\n  .vx[data-phase='intro'] .vx-intro { display: grid; }\n  .vx[data-phase='preload'] .vx-site,\n  .vx[data-phase='intro'] .vx-site { display: none; }\n\n  .vx-preload {\n    position: absolute; inset: 0;\n    place-content: center;\n    justify-items: center;\n    gap: 10px;\n    background: #000;\n    color: var(--vx-ink);\n  }\n  .vx-preload p { margin: 0; }\n  .vx-preload__bar {\n    width: 220px; height: 6px;\n    border: 1px solid #555;\n    padding: 1px;\n  }\n  .vx-preload__fill {\n    display: block; height: 100%; width: 0;\n    background: var(--vx-orange);\n  }\n  .vx-preload__kb { color: var(--vx-dim); font-size: 8px; }\n\n  \u002F* ---------- Intro ---------- *\u002F\n  .vx-intro {\n    position: absolute; inset: 0;\n    background: #000;\n    overflow: hidden;\n  }\n  .vx-intro > * { position: absolute; margin: 0; }\n  .vx-intro__sq {\n    width: 60px; height: 60px;\n    border: 2px solid var(--vx-orange);\n    left: 350px; top: 210px;\n    opacity: 0;\n    animation: e05-sq 2.4s cubic-bezier(.7,0,.3,1) forwards;\n  }\n  .vx-intro__sq--2 { animation-delay: 0.15s; border-color: #fff; }\n  .vx-intro__sq--3 { animation-delay: 0.3s; background: var(--vx-orange); border: 0; }\n  .vx-intro__line {\n    height: 1px; left: 0; width: 760px;\n    background: #fff;\n    transform: scaleX(0);\n    animation: e05-line 0.9s ease-out forwards;\n  }\n  .vx-intro__line--1 { top: 120px; animation-delay: 1.2s; }\n  .vx-intro__line--2 { top: 360px; animation-delay: 1.35s; transform-origin: right; }\n  .vx-intro__line--3 { top: 296px; height: 2px; background: var(--vx-orange); animation-delay: 2.6s; }\n  .vx-intro__swoosh {\n    inset: 0; width: 760px; height: 480px;\n    fill: none; stroke: var(--vx-orange); stroke-width: 3;\n    stroke-dasharray: 1100; stroke-dashoffset: 1100;\n    animation: e05-draw 1.4s 1.8s ease-in-out forwards;\n  }\n  .vx-intro__logo {\n    left: 0; right: 0; top: 190px;\n    text-align: center;\n    font: italic 900 52px\u002F1 'Arial Black', Impact, 'DejaVu Sans', sans-serif;\n    letter-spacing: -0.02em;\n    color: #fff;\n  }\n  .vx-intro__logo span {\n    display: inline-block;\n    opacity: 0;\n    transform: translateX(240px) skewX(-30deg);\n    animation: e05-letter 0.5s cubic-bezier(.2,.8,.2,1.2) forwards;\n    animation-delay: calc(2.4s + var(--i, 0) * 0.06s);\n  }\n  .vx-intro__logo span:nth-child(1) { --i: 0; } .vx-intro__logo span:nth-child(2) { --i: 1; }\n  .vx-intro__logo span:nth-child(3) { --i: 2; } .vx-intro__logo span:nth-child(4) { --i: 3; }\n  .vx-intro__logo span:nth-child(5) { --i: 4; } .vx-intro__logo span:nth-child(6) { --i: 5; color: var(--vx-orange); }\n  .vx-intro__logo span:nth-child(7) { --i: 6; color: var(--vx-orange); } .vx-intro__logo span:nth-child(8) { --i: 7; color: var(--vx-orange); }\n  .vx-intro__logo span:nth-child(9) { --i: 8; color: var(--vx-orange); } .vx-intro__logo span:nth-child(10) { --i: 9; color: var(--vx-orange); }\n  .vx-intro__tag {\n    left: 0; right: 0; top: 262px;\n    text-align: center;\n    color: var(--vx-dim);\n    font-size: 10px;\n    white-space: pre;\n  }\n\n\n  \u002F* ---------- The site ---------- *\u002F\n  .vx-site {\n    position: absolute; inset: 0;\n    background: linear-gradient(180deg, #151515, #0b0b0b);\n  }\n  .vx-grid {\n    position: absolute; inset: 0;\n    background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);\n    background-size: 20px 20px;\n  }\n  .vx-orbit {\n    position: absolute; right: -60px; bottom: -60px;\n    width: 280px; height: 280px;\n    fill: none; stroke: #ffffff14; stroke-width: 1;\n    animation: e05-spin 40s linear infinite;\n  }\n\n  .vx-top {\n    position: absolute; left: 24px; right: 24px; top: 18px;\n    display: flex; align-items: center; gap: 20px;\n    border-bottom: 1px solid var(--vx-line);\n    padding-bottom: 10px;\n  }\n  .vx-top p { margin: 0; color: var(--vx-dim); }\n  .vx-top .vx-coords { margin-left: auto; }\n  .vx-logo {\n    display: flex; align-items: center; gap: 8px;\n    color: #fff; text-decoration: none;\n    font: italic 900 20px\u002F1 'Arial Black', Impact, 'DejaVu Sans', sans-serif;\n    letter-spacing: -0.02em;\n  }\n  .vx-logo svg { width: 26px; height: 26px; fill: var(--vx-orange); }\n\n  \u002F* Mystery-meat nav: icons only; labels appear on hover\u002Ffocus *\u002F\n  .vx-nav {\n    position: absolute; left: 24px; top: 80px;\n    z-index: 2;\n    display: grid; gap: 10px;\n  }\n  .vx-nav__btn {\n    position: relative;\n    display: grid; place-items: center;\n    width: 44px; height: 44px;\n    background: var(--vx-panel);\n    border: 1px solid var(--vx-line);\n    color: var(--vx-dim);\n    text-decoration: none;\n    transition: background 0.15s, color 0.15s, transform 0.2s;\n  }\n  .vx-nav__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }\n  .vx-nav__label {\n    position: absolute; left: 54px; top: 50%;\n    translate: 0 -50%;\n    padding: 4px 8px;\n    background: var(--vx-orange); color: #000;\n    white-space: nowrap;\n    clip-path: inset(0 100% 0 0);\n    transition: clip-path 0.2s ease-out;\n    pointer-events: none;\n  }\n  .vx-nav__btn:hover, .vx-nav__btn:focus-visible {\n    background: #fff; color: #000;\n    transform: translateX(4px);\n    outline: none;\n  }\n  .vx-nav__btn:hover .vx-nav__label,\n  .vx-nav__btn:focus-visible .vx-nav__label { clip-path: inset(0); }\n  .vx-nav__btn[aria-current='true'] { color: var(--vx-orange); border-color: var(--vx-orange); }\n  .vx-nav__btn:focus-visible { box-shadow: 0 0 0 2px var(--vx-orange); }\n\n  \u002F* Menu swooshes in when the site appears *\u002F\n  .vx[data-phase='site'].is-entering .vx-nav__btn {\n    animation: e05-swoosh 0.6s cubic-bezier(.2,.9,.2,1.3) backwards;\n  }\n  .vx-nav__btn:nth-child(2) { animation-delay: 0.08s; }\n  .vx-nav__btn:nth-child(3) { animation-delay: 0.16s; }\n  .vx-nav__btn:nth-child(4) { animation-delay: 0.24s; }\n  .vx-nav__btn:nth-child(5) { animation-delay: 0.32s; }\n  .vx[data-phase='site'].is-entering .vx-top { animation: e05-drop 0.5s ease-out backwards; }\n  .vx[data-phase='site'].is-entering .vx-panels { animation: e05-wipe 0.6s 0.3s ease-out backwards; }\n\n  \u002F* ---------- Panels ---------- *\u002F\n  .vx-panels {\n    position: absolute; left: 100px; right: 24px; top: 80px; bottom: 44px;\n  }\n  .vx-panel {\n    position: absolute; inset: 0;\n    display: none;\n    padding: 18px 22px;\n    background: rgb(26 26 26 \u002F 0.92);\n    border: 1px solid var(--vx-line);\n    border-left: 3px solid var(--vx-orange);\n    overflow: auto;\n  }\n  .vx-panel.is-current, .vx-panel:target { display: block; }\n  .vx-panels:has(.vx-panel:target) .vx-panel.is-current:not(:target) { display: none; }\n  .vx-panel.is-current { animation: e05-panel 0.45s ease-out; }\n  .vx-h {\n    margin: 0 0 14px;\n    font: italic 900 22px\u002F1 'Arial Black', Impact, 'DejaVu Sans', sans-serif;\n    letter-spacing: -0.01em;\n    color: #fff;\n  }\n  .vx-h .vx-pix { color: var(--vx-orange); font-style: normal; vertical-align: middle; margin-right: 6px; }\n  .vx-copy { max-width: 46ch; color: #cfcfcf; margin: 0 0 14px; }\n  .vx-copy em { color: var(--vx-orange); }\n\n  .vx-work {\n    list-style: none; margin: 0; padding: 0;\n    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;\n  }\n  .vx-tile {\n    display: grid; gap: 3px;\n    color: var(--vx-ink); text-decoration: none;\n    padding: 6px; border: 1px solid var(--vx-line);\n    transition: border-color 0.15s, background 0.15s;\n  }\n  .vx-tile svg { width: 100%; height: 86px; display: block; filter: grayscale(0.85) brightness(0.85); transition: filter 0.2s; }\n  .vx-tile:hover, .vx-tile:focus-visible { border-color: var(--vx-orange); background: #222; outline: none; }\n  .vx-tile:hover svg, .vx-tile:focus-visible svg { filter: none; }\n  .vx-tile__sub { color: var(--vx-dim); font-size: 10px; }\n\n  .vx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; }\n  .vx-stats div { border-top: 2px solid var(--vx-orange); padding-top: 6px; }\n  .vx-stats dt { color: var(--vx-dim); }\n  .vx-stats dd { margin: 4px 0 0; font-size: 14px; color: #fff; letter-spacing: 0.05em; }\n\n  .vx-lab { display: flex; gap: 20px; align-items: center; }\n  .vx-lab__field {\n    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;\n    width: 216px; height: 216px; padding: 12px;\n    border: 1px dashed #444;\n    box-sizing: border-box;\n  }\n  .vx-lab__field span {\n    width: 14px; height: 14px; place-self: center;\n    background: var(--vx-orange);\n    transition: transform 0.25s cubic-bezier(.2,.9,.2,1.4), background 0.2s;\n  }\n  .vx-lab__field span:nth-child(3n) { background: #fff; border-radius: 50%; }\n  .vx-lab__btns { display: grid; gap: 8px; }\n\n  .vx-news { list-style: none; margin: 0; padding: 0; max-width: 46ch; }\n  .vx-news li { padding: 6px 0; border-bottom: 1px solid var(--vx-line); color: #cfcfcf; }\n  .vx-news .vx-pix { color: var(--vx-orange); margin-right: 8px; }\n  .vx-award {\n    position: absolute; right: 22px; bottom: 18px;\n    width: 92px; height: 92px; border-radius: 50%;\n    display: grid; place-content: center; text-align: center;\n    background: conic-gradient(from 20deg, #c9a227, #fff3b0, #c9a227, #8a6d10, #c9a227);\n    color: #1a1200; font-size: 8px; line-height: 1.5;\n    box-shadow: 0 0 0 3px #000, 0 0 0 4px #c9a227;\n  }\n  .vx-award b { font-size: 9px; }\n\n  .vx-form { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; max-width: 420px; align-items: center; }\n  .vx-form label { color: var(--vx-dim); }\n  .vx-form input, .vx-form textarea {\n    font: 11px Verdana, Tahoma, sans-serif;\n    background: #000; color: #fff;\n    border: 1px solid #555;\n    padding: 5px 6px;\n  }\n  .vx-form input:focus, .vx-form textarea:focus { border-color: var(--vx-orange); outline: none; box-shadow: 0 0 0 1px var(--vx-orange); }\n  .vx-form .vx-btn { grid-column: 2; justify-self: start; }\n  .vx-form__out { grid-column: 2; margin: 0; color: var(--vx-orange); min-height: 1.4em; }\n\n  .vx-btn {\n    background: #000; color: var(--vx-ink);\n    border: 1px solid #666;\n    padding: 7px 12px;\n    cursor: pointer;\n    transition: background 0.15s, color 0.15s;\n  }\n  .vx-btn:hover, .vx-btn:focus-visible { background: var(--vx-orange); color: #000; border-color: var(--vx-orange); outline: none; }\n  .vx-btn:focus-visible { box-shadow: 0 0 0 2px #fff; }\n\n  .vx-foot {\n    position: absolute; left: 24px; right: 24px; bottom: 14px;\n    display: flex; gap: 24px;\n    color: #8a8a8a; font-size: 8px;\n  }\n  .vx-foot__fps { margin-left: auto; color: var(--vx-orange); }\n\n  \u002F* ---------- The HTML page around the movie: era stamp + ENTER SITE ---------- *\u002F\n  .vx-head {\n    max-width: 760px;\n    margin: 0 auto 10px;\n    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;\n    gap: 4px 16px;\n    padding-bottom: 6px;\n    border-bottom: 1px solid var(--vx-line);\n  }\n  .vx-head__url { color: #8a8a8a; }\n  .era-stamp {\n    margin: 0;\n    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;\n    font-family: var(--vx-pixfont);\n    font-size: 10px;\n    font-weight: bold;\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    -webkit-font-smoothing: none;\n    color: #b8b8b8;\n  }\n  .era-stamp__no { color: #000; background: var(--vx-orange); padding: 1px 5px; }\n  .era-stamp__years { color: #fff; }\n  .era-stamp__years::after { content: ' \u002F\u002F'; color: #8a8a8a; }\n  .era-stamp__title { color: var(--vx-orange); }\n\n  .vx-enter {\n    max-width: 760px;\n    margin: 16px auto 0;\n  }\n  .era-cta {\n    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n    gap: 12px 22px;\n    padding: 14px 12px;\n    border-top: 1px solid var(--vx-line);\n    border-bottom: 1px solid var(--vx-line);\n    background:\n      linear-gradient(90deg, transparent, rgb(255 106 0 \u002F 0.08) 50%, transparent);\n  }\n  .era-cta a {\n    font-family: var(--vx-pixfont);\n    font-weight: bold;\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    -webkit-font-smoothing: none;\n    text-decoration: none;\n    display: inline-grid; justify-items: center; gap: 6px;\n    text-align: center;\n  }\n  .era-cta__label, .era-cta__to { display: block; }\n  .era-cta__to { font-size: 8px; letter-spacing: 0.14em; }\n\n  \u002F* The big ENTER SITE button *\u002F\n  .era-cta__next {\n    position: relative;\n    overflow: hidden;\n    min-width: 220px;\n    padding: 12px 22px 10px;\n    color: #fff;\n    background: #000;\n    border: 2px solid var(--vx-orange);\n    box-shadow: 0 0 12px rgb(255 106 0 \u002F 0.45), inset 0 0 10px rgb(255 106 0 \u002F 0.25);\n    transition: background 0.15s, color 0.15s, box-shadow 0.2s;\n  }\n  .era-cta__next .era-cta__label { font-size: 18px; letter-spacing: 0.3em; }\n  .era-cta__next .era-cta__to { color: #ffb27a; }\n  \u002F* the light streak that sweeps across a Flash button on rollover *\u002F\n  .era-cta__next::before {\n    content: '';\n    position: absolute; top: 0; bottom: 0; left: -60%;\n    width: 40%;\n    background: linear-gradient(100deg, transparent, rgb(255 255 255 \u002F 0.55), transparent);\n    transform: skewX(-20deg);\n    opacity: 0;\n    pointer-events: none;\n  }\n  .era-cta__next:hover, .era-cta__next:focus-visible {\n    background: var(--vx-orange);\n    color: #000;\n    box-shadow: 0 0 22px rgb(255 106 0 \u002F 0.8), 0 0 2px #fff;\n  }\n  .era-cta__next:hover .era-cta__to, .era-cta__next:focus-visible .era-cta__to { color: #000; }\n  .era-cta__next:hover::before, .era-cta__next:focus-visible::before {\n    opacity: 1;\n    animation: e05-sweep 0.7s ease-out;\n  }\n  .era-cta__next:hover .era-cta__label, .era-cta__next:focus-visible .era-cta__label {\n    animation: e05-pulse 0.9s ease-in-out infinite alternate;\n  }\n  .era-cta__next:focus-visible { outline: 2px dashed #fff; outline-offset: 4px; }\n\n  \u002F* The quieter way back: a dashed SKIP-INTRO style text link *\u002F\n  .era-cta__prev {\n    padding: 7px 10px;\n    color: #c8c8c8;\n    border: 1px dashed #666;\n    font-size: 9px;\n  }\n  .era-cta__prev .era-cta__to { color: #9a9a9a; }\n  .era-cta__prev:hover, .era-cta__prev:focus-visible { color: var(--vx-orange); border-color: var(--vx-orange); }\n  .era-cta__prev:hover .era-cta__to, .era-cta__prev:focus-visible .era-cta__to { color: #ffb27a; }\n  .era-cta__prev:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n  @container screen (max-width: 480px) {\n    .era-cta { flex-direction: column; align-items: stretch; }\n    .era-cta__next { min-width: 0; }\n    .era-cta__next .era-cta__label { font-size: 16px; }\n  }\n\n  \u002F* ---------- Controls outside the stage ---------- *\u002F\n  .vx-controls {\n    max-width: 760px;\n    margin-inline: auto;\n    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;\n    margin-top: 18px;\n  }\n  .vx[data-phase='site'] .vx-skip { display: none; }\n  .vx-skip {\n    color: var(--vx-orange);\n    text-decoration: none;\n    padding: 7px 10px;\n    border: 1px dashed var(--vx-orange);\n  }\n  .vx-skip:hover, .vx-skip:focus-visible { background: var(--vx-orange); color: #000; outline: none; }\n  .vx-sound[aria-pressed='true'] { color: var(--vx-orange); border-color: var(--vx-orange); }\n  .vx-badge {\n    display: inline-flex; align-items: center; gap: 6px;\n    height: 31px; width: 88px; box-sizing: border-box;\n    padding: 0 4px;\n    background: linear-gradient(#ffffff, #d0d0d0);\n    color: #111;\n    border: 1px solid #000;\n    font: bold 8px\u002F1.05 Verdana, Tahoma, sans-serif;\n  }\n  .vx-badge svg { width: 22px; height: 22px; flex: none; }\n  .vx-badge small { display: block; font-size: 7px; font-weight: normal; }\n  .vx-note { flex: 1 1 100%; margin: 0; color: #aaa; font-size: 12px; }\n  .vx-note code { color: var(--vx-orange); }\n\n  \u002F* Readable mode forces dark text; give the icon buttons a light face to match. *\u002F\n  :root.readable & .vx-nav__btn { background: #fff; border-color: #111; }\n\n  @media (prefers-reduced-motion: reduce) {\n    .vx-orbit { animation: none; }\n    .era-cta__next:hover::before, .era-cta__next:focus-visible::before,\n    .era-cta__next:hover .era-cta__label, .era-cta__next:focus-visible .era-cta__label { animation: none; }\n  }\n}\n\n@keyframes e05-sq {\n  0% { opacity: 0; transform: scale(0) rotate(0); }\n  30% { opacity: 1; transform: scale(1.4) rotate(90deg); }\n  70% { opacity: 1; transform: translateX(-260px) scale(0.6) rotate(225deg); }\n  100% { opacity: 0; transform: translateX(400px) scale(0.2) rotate(360deg); }\n}\n@keyframes e05-line { to { transform: scaleX(1); opacity: 0.6; } }\n@keyframes e05-draw { to { stroke-dashoffset: 0; } }\n@keyframes e05-letter { to { opacity: 1; transform: none; } }\n@keyframes e05-spin { to { transform: rotate(360deg); } }\n@keyframes e05-swoosh {\n  from { transform: translateX(-140px) rotate(-90deg) scale(0.3); opacity: 0; }\n}\n@keyframes e05-drop { from { transform: translateY(-60px); opacity: 0; } }\n@keyframes e05-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }\n@keyframes e05-panel {\n  0% { clip-path: inset(0 0 100% 0); }\n  100% { clip-path: inset(0); }\n}\n@keyframes e05-sweep {\n  from { left: -60%; }\n  to { left: 130%; }\n}\n@keyframes e05-pulse {\n  from { text-shadow: 0 0 0 transparent; }\n  to { text-shadow: 0 0 6px #fff; }\n}\n\n}",[87,89,91,93],{"caption":53,"file":51,"html":88},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-stage\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-stage\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"stage\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> style\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"--vx-scale: 1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  <!-- PRELOADER -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-preload\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"preloader\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-pix vx-preload__label\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>LOADING... <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-preload__pct\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>0<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>%<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-preload__bar\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-preload__fill\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-pix vx-preload__kb\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-preload__kb-n\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>0<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> OF 412 KB<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":55,"file":51,"html":90},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">nav\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Site sections\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"menu mystery-meat\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#vx-work\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__btn\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-section\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"work\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Work\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"3\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"3\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"13\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"3\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"3\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"13\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"13\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"13\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__label vx-pix\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>WORK<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#vx-about\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__btn\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-section\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"about\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"About\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">circle\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"9\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">circle\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"3\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__label vx-pix\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>ABOUT<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#vx-lab\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__btn\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-section\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"lab\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Lab\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">path\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"M12 2 L22 20 L2 20Z\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__label vx-pix\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>LAB<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#vx-news\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__btn\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-section\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"news\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"News\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">path\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"M3 12h18M12 3v18M5.5 5.5l13 13M18.5 5.5l-13 13\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__label vx-pix\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>NEWS<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#vx-contact\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__btn\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-section\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"contact\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Contact\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"9\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"20\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"6\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">rect\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"9\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"6\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"20\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"vx-nav__label vx-pix\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>CONTACT<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">nav\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":59,"file":57,"html":92},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> play\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  clearTimers\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (reduced \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">||\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> readable\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">return\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> showSite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">false\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  vx.dataset.phase \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'preload'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> pct\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> root.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.vx-preload__pct'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> kb\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> root.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.vx-preload__kb-n'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> root.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.vx-preload__fill'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> p \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> tick\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> () \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">    \u002F\u002F Lurch forward like a real 56k download: fast, stall, fast.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    p \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">min\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, p \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (p \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 40\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> &&\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> p \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 55\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ?\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 3\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">random\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 5\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    pct.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">floor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(p))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    kb.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">floor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">((p \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 100\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 412\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    fill.style.width \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> `${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">p\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}%`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (p \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 100\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">later\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(tick, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">70\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    else\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> later\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(intro, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">250\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  tick\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":61,"file":57,"html":94},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F\u002F Flash's \"showAll\" scale mode: keep the 760x480 stage whole and scale it to the space available.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> scale\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> s\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">min\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, fit.clientWidth \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 760\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  stage.style.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setProperty\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'--vx-scale'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(s))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  fit.style.height \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> `${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">Math\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">ceil\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">480\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> s\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">)\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}px`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791232160973]