[{"data":1,"prerenderedAt":98},["ShallowReactive",2],{"room:03-homepages":3},{"path":4,"meta":5,"html":87,"css":88,"snippets":89},"03-homepages",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":39,"thenVsNow":44,"snippets":45,"sources":63,"cta":79,"recreated":82},"03","Personal homepages","1995–2000","Free hosting turned everyone into a webmaster: tiled star backgrounds, Comic Sans, hit counters, guestbooks, webrings and an “under construction” sign that never came down.",{"screens":11,"connection":12,"browsers":13},"800×600 on 15-inch CRTs, 256 colours or “thousands”; 640×480 still common","28.8k and 56k dial-up modems; every GIF counted against a minute-by-minute load","Netscape Navigator 3–4 and Internet Explorer 3–5, each with its own tags",[15,18,21,24,27,30,33,36],{"id":16,"label":17},"tiled-bg","A tiled background image",{"id":19,"label":20},"comic-sans","\u003Cfont face=\"Comic Sans MS\">, \u003Ccenter> and a rainbow bar",{"id":22,"label":23},"under-construction","An animated “under construction” GIF",{"id":25,"label":26},"marquee","Scrolling \u003Cmarquee> and \u003Cblink>ing text",{"id":28,"label":29},"hit-counter","An odometer-style hit counter",{"id":31,"label":32},"guestbook","A guestbook (sign it!)",{"id":34,"label":35},"webring","A webring navigation bar",{"id":37,"label":38},"best-viewed","“Best viewed in … at 800x600” badge, MIDI and a mailbox GIF",[40,41,42,43],"Table layouts with fixed widths and align=\"left\" images","Presentational HTML: \u003Cfont>, \u003Ccenter>, bgcolor, BACKGROUND= and \u003Cbr clear=\"all\">","Animated GIFs, CGI hit counters and Perl guestbook scripts on the free host","\u003Cmarquee>, \u003Cblink>, and \u003Cembed>\u002F\u003Cbgsound> for MIDI files","Guestbooks became comment sections, webrings became social feeds and link-in-bio pages, and hit counters became analytics dashboards nobody else can see.",[46,51,55,58],{"file":47,"lang":48,"caption":49,"region":50},"demo.html","html","Layout with \u003Ctable>, \u003Ccenter> and \u003Cfont>","layout",{"file":52,"lang":53,"caption":54,"region":25},"era.css","css","Recreating \u003Cmarquee> with a CSS animation",{"file":52,"lang":53,"caption":56,"region":57},"The tiled star background","tile",{"file":59,"lang":60,"caption":61,"region":62},"era.client.ts","typescript","A “MIDI” tune with Web Audio, only after a click","midi",[64,67,70,73,76],{"label":65,"url":66},"GeoCities (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeoCities",{"label":68,"url":69},"Webring (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWebring",{"label":71,"url":72},"The marquee element (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fmarquee",{"label":74,"url":75},"Blink element (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBlink_element",{"label":77,"url":78},"Web Design Museum","https:\u002F\u002Fwww.webdesignmuseum.org\u002F",{"next":80,"prev":81},"ENTER the next era!!","\u003C\u003C Go back",[83,84,85,86],"\u003Cmarquee> and \u003Cblink> are recreated with CSS animations (blink at 1 Hz, under the flash threshold).","The animated GIFs are real GIFs, but new ones: drawn pixel by pixel by a script in this repo (scripts\u002Fmake-era03-gifs.py), not copied from 1998. With reduced motion or readable mode on you get a still frame of each.","Background MIDI is replaced by a Web Audio square-wave tune that only plays after you press Play.","The hit counter and guestbook live in your browser’s localStorage instead of a CGI script.","\u003Cdiv class=\"dk\" data-trait=\"tiled-bg\">\n\u003Cdiv class=\"dk__scroll\">\n\u003Ctable class=\"dk__page\" width=\"760\" border=\"0\" cellpadding=\"8\" cellspacing=\"0\" align=\"center\">\n\u003Ctr>\u003Ctd>\n\u003Ccenter>\n\u003Cp class=\"dk__hood\">\u003Cfont size=\"2\" face=\"Verdana, Arial\">Hosted free by \u003Cb>HomeTown Pages\u003C\u002Fb> · neighborhood: \u003Ca href=\"#guestbook\">SpaceStation\u002FOrbit\u002F4417\u003C\u002Fa>\u003C\u002Ffont>\u003C\u002Fp>\n\u003Ch1 class=\"dk__title\" data-trait=\"comic-sans\">\u003Cfont face=\"Comic Sans MS\" color=\"#FFFF00\">~*~ Welcome 2 Dave's Kool Page!!! ~*~\u003C\u002Ffont>\u003C\u002Fh1>\n\u003Cp class=\"era-stamp\">\u003Cspan class=\"era-stamp__no\">Era 03\u002F17\u003C\u002Fspan> \u003Cspan class=\"era-stamp__years\">1995–2000\u003C\u002Fspan> \u003Cspan class=\"era-stamp__title\">Personal homepages\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cdiv class=\"dk__marquee\" data-trait=\"marquee\" aria-label=\"Scrolling message\">\u003Cspan>*** Thanx 4 stopping by!!! *** This page is ALWAYS changing so come back soon!!! *** Now with MIDI music!!! *** Sign my guestbook!!! ***\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fcenter>\n\n\u003Ccenter>\n\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Funder-construction-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Funder-construction.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Funder-construction-still.gif\" width=\"240\" height=\"128\" alt=\"Under construction: a worker digging beside a flashing barrier\" class=\"dk__uc\" data-trait=\"under-construction\">\u003C\u002Fpicture>\n\u003Cbr>\u003Cfont size=\"2\" face=\"Comic Sans MS\" color=\"#00FFFF\">Sorry, parts of my page are still under construction!!\u003C\u002Ffont>\n\u003C\u002Fcenter>\n\n\u003Cnav class=\"era-cta\" aria-label=\"Travel through time\">\u003Ca class=\"era-cta__next\" rel=\"next\" href=\"\u002Feras\u002F04-tables-portals\u002F\">\u003Cspan class=\"era-cta__label\">ENTER the next era!!\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">1996–2003 · Table layouts & portals\u003C\u002Fspan>\u003C\u002Fa> \u003Ca class=\"era-cta__prev\" rel=\"prev\" href=\"\u002Feras\u002F02-hypertext\u002F\">\u003Cspan class=\"era-cta__label\"><< Go back\u003C\u002Fspan> \u003Cspan class=\"era-cta__to\">1991–1995 · Early hypertext\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fnav>\n\n\u003Cp class=\"dk__div\">\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fdivider-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fdivider.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fdivider-still.gif\" width=\"448\" height=\"6\" alt=\"\">\u003C\u002Fpicture>\u003C\u002Fp>\n\n\u003Ctable class=\"dk__cols\" width=\"100%\" border=\"0\" cellpadding=\"6\">\n\u003Ctr>\n\u003Ctd class=\"dk__side\" width=\"200\" valign=\"top\">\n\u003Cfont face=\"Comic Sans MS\" size=\"3\" color=\"#FFFF00\">\u003Cb>~ My Links ~\u003C\u002Fb>\u003C\u002Ffont>\n\u003Cul class=\"dk__nav\">\n\u003Cli>\u003Ca href=\"#about\">About Me\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#cat\">My Cat Pixel\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Kool Links\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#guestbook\">Guestbook\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#awards\">Awards\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ccenter>\n\u003Cp class=\"dk__counter-wrap\" data-trait=\"hit-counter\">\u003Cfont size=\"2\" face=\"Verdana\">You are visitor #\u003C\u002Ffont>\u003Cbr>\n\u003Cspan class=\"dk__counter\" aria-label=\"Hit counter\">\u003Cspan class=\"dk__digits\">0004417\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Ca class=\"dk__mail\" href=\"#guestbook\">\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fmailbox-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fmailbox.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fmailbox-still.gif\" width=\"96\" height=\"80\" alt=\"\" class=\"dk__mailbox\">\u003C\u002Fpicture>\u003Cbr>\u003Cfont face=\"Comic Sans MS\" size=\"2\">E-mail me!!\u003C\u002Ffont>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fbadge-navigator-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fbadge-navigator.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fbadge-navigator-still.gif\" width=\"88\" height=\"31\" alt=\"Best viewed in Netscape Navigator 3.0 at 800x600\" class=\"dk__badge\" data-trait=\"best-viewed\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003C\u002Fcenter>\n\u003C\u002Ftd>\n\n\u003Ctd valign=\"top\">\n\u003Ch2 id=\"about\">\u003Cfont face=\"Comic Sans MS\" color=\"#FF66FF\">About Me\u003C\u002Ffont>\u003C\u002Fh2>\n\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fdancer-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fdancer.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fdancer-still.gif\" width=\"72\" height=\"88\" alt=\"\" class=\"dk__dancer\" align=\"right\">\u003C\u002Fpicture>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">Hi!!! My name is Dave and I am 15 and I live in Ohio. I like computers, skateboarding, sci-fi shows and my cat (see below). I made this page all by myself in Notepad. It took me \u003Cb>3 weeks\u003C\u002Fb>!!! Right-click and \"View Source\" if u want 2 see how.\u003C\u002Ffont>\u003C\u002Fp>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">My \u003Cspan class=\"dk__blink\" data-trait=\"marquee\">NEW\u003C\u002Fspan> computer is a Pentium 133 with 16 megs of RAM and a 28.8 modem. It is SO fast.\u003C\u002Ffont>\u003C\u002Fp>\n\n\u003Ch2 id=\"cat\">\u003Cfont face=\"Comic Sans MS\" color=\"#FF66FF\">My Cat Pixel\u003C\u002Ffont>\u003C\u002Fh2>\n\u003Ctable border=\"3\" cellpadding=\"4\" bgcolor=\"#000033\" align=\"left\" class=\"dk__cat\">\u003Ctr>\u003Ctd>\n\u003Csvg viewBox=\"0 0 32 24\" width=\"128\" height=\"96\" shape-rendering=\"crispEdges\" role=\"img\" aria-label=\"Scanned photo of Pixel the cat, a grey tabby (pixelated)\">\u003Crect width=\"32\" height=\"24\" fill=\"#664\"\u002F>\u003Crect y=\"16\" width=\"32\" height=\"8\" fill=\"#a33\"\u002F>\u003Cpath d=\"M8 8l2-4 2 4h6l2-4 2 4v8H8z\" fill=\"#888\"\u002F>\u003Crect x=\"10\" y=\"10\" width=\"2\" height=\"2\" fill=\"#3c3\"\u002F>\u003Crect x=\"18\" y=\"10\" width=\"2\" height=\"2\" fill=\"#3c3\"\u002F>\u003Crect x=\"14\" y=\"13\" width=\"2\" height=\"1\" fill=\"#e9a\"\u002F>\u003Crect x=\"6\" y=\"16\" width=\"20\" height=\"6\" fill=\"#888\"\u002F>\u003Crect x=\"24\" y=\"12\" width=\"3\" height=\"6\" fill=\"#777\"\u002F>\u003Cpath d=\"M8 18h16M8 20h16\" stroke=\"#666\"\u002F>\u003C\u002Fsvg>\n\u003Cbr>\u003Cfont size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Pixel, scanned at school (41k)\u003C\u002Ffont>\n\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">This is Pixel. She is 4 years old and she likes sitting on the monitor because it is warm. One time she stepped on the keyboard and deleted my whole homework. True story!!\u003C\u002Ffont>\u003C\u002Fp>\n\u003Cbr clear=\"all\">\n\n\u003Ch2 id=\"links\">\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fglobe-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fglobe.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fglobe-still.gif\" width=\"44\" height=\"44\" alt=\"\" class=\"dk__globe\" align=\"absmiddle\">\u003C\u002Fpicture> \u003Cfont face=\"Comic Sans MS\" color=\"#FF66FF\">Kool Links\u003C\u002Ffont>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"#links\">The Ultimate Starship Fan Page\u003C\u002Fa> \u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fnew-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fnew.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fnew-still.gif\" width=\"40\" height=\"24\" alt=\"NEW!\" class=\"dk__new\" align=\"absmiddle\">\u003C\u002Fpicture>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Skate Tricks Archive\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Free Animated GIFs Gallery\u003C\u002Fa> (where I got my mailbox)\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"#links\">Jenny's Unicorn World\u003C\u002Fa> (my cousin)\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Ccenter>\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#00FF00\">♫ Now playing: \u003Ci>orbit.mid\u003C\u002Fi> ♫\u003C\u002Ffont>\u003Cbr>\n\u003Cbutton type=\"button\" class=\"dk__midi\" aria-pressed=\"false\">▶ Play MIDI\u003C\u002Fbutton>\n\u003Cfont size=\"1\" face=\"Verdana\" color=\"#CCCCCC\">\u003Cbr>(Music starts only when you click. Unlike in 1997.)\u003C\u002Ffont>\u003C\u002Fp>\n\u003C\u002Fcenter>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Cp class=\"dk__div\">\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Ffire-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Ffire.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Ffire-still.gif\" width=\"468\" height=\"32\" alt=\"\">\u003C\u002Fpicture>\u003C\u002Fp>\n\n\u003Ch2 id=\"guestbook\">\u003Ccenter>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFF00\">~ Sign My Guestbook!!! ~\u003C\u002Ffont>\u003C\u002Fcenter>\u003C\u002Fh2>\n\u003Cdiv class=\"dk__gb\" data-trait=\"guestbook\">\n\u003Cform class=\"dk__gbform\" action=\"#guestbook\">\n\u003Ctable border=\"2\" cellpadding=\"4\" bgcolor=\"#000066\" align=\"center\">\n\u003Ctr>\u003Ctd>\u003Clabel for=\"dk-name\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">Name:\u003C\u002Ffont>\u003C\u002Flabel>\u003C\u002Ftd>\u003Ctd>\u003Cinput id=\"dk-name\" name=\"name\" size=\"24\" maxlength=\"30\" required>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd>\u003Clabel for=\"dk-from\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">Where r u from?\u003C\u002Ffont>\u003C\u002Flabel>\u003C\u002Ftd>\u003Ctd>\u003Cinput id=\"dk-from\" name=\"from\" size=\"24\" maxlength=\"30\">\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd valign=\"top\">\u003Clabel for=\"dk-msg\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">Comments:\u003C\u002Ffont>\u003C\u002Flabel>\u003C\u002Ftd>\u003Ctd>\u003Ctextarea id=\"dk-msg\" name=\"msg\" rows=\"3\" cols=\"28\" maxlength=\"200\" required>\u003C\u002Ftextarea>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003Ctr>\u003Ctd colspan=\"2\" align=\"center\">\u003Cinput type=\"submit\" value=\"Sign it!\"> \u003Cinput type=\"reset\" value=\"Clear\">\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003C\u002Fform>\n\u003Col class=\"dk__entries\" reversed>\n\u003Cli>\u003Cb>Jenny\u003C\u002Fb> (Kansas): \u003Ci>kool page dave!!! ur cat is SO cute. visit my unicorn page!!\u003C\u002Fi> \u003Csmall>Mar 3 1998\u003C\u002Fsmall>\u003C\u002Fli>\n\u003Cli>\u003Cb>SkaterX\u003C\u002Fb> (Toronto): \u003Ci>nice tricks section. u should add more. also ur MIDI is stuck in my head lol\u003C\u002Fi> \u003Csmall>Feb 21 1998\u003C\u002Fsmall>\u003C\u002Fli>\n\u003Cli>\u003Cb>Mr. Hendricks\u003C\u002Fb> (Room 12): \u003Ci>Very impressive, Dave. Now please finish your science project.\u003C\u002Fi> \u003Csmall>Feb 9 1998\u003C\u002Fsmall>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003C\u002Fdiv>\n\n\u003Chr class=\"dk__rainbow\">\n\n\u003Ccenter id=\"awards\">\n\u003Cp>\u003Cfont face=\"Comic Sans MS\" color=\"#FFFFFF\">Awards I have won:\u003C\u002Ffont>\u003Cbr>\n\u003Cspan class=\"dk__award\" role=\"img\" aria-label=\"Award: Kool Site of the Day\">★ Kool Site of the Day ★\u003C\u002Fspan>\n\u003Cspan class=\"dk__award\" role=\"img\" aria-label=\"Award: Top 5% of Orbit\">★ Top 5% of Orbit ★\u003C\u002Fspan>\u003C\u002Fp>\n\n\u003Ctable class=\"dk__ring\" data-trait=\"webring\" border=\"2\" cellpadding=\"4\" bgcolor=\"#000000\">\n\u003Ctr>\u003Ctd align=\"center\">\u003Cfont face=\"Verdana\" size=\"2\" color=\"#FFFFFF\">This \u003Cb>Kool Kids Webring\u003C\u002Fb> site is owned by \u003Ca href=\"#guestbook\">Dave\u003C\u002Fa>.\u003C\u002Ffont>\u003Cbr>\n\u003Cfont face=\"Verdana\" size=\"2\">[\u003Ca href=\"#ring\" data-ring=\"prev\">Prev\u003C\u002Fa>] [\u003Ca href=\"#ring\" data-ring=\"random\">Random\u003C\u002Fa>] [\u003Ca href=\"#ring\" data-ring=\"next\">Next\u003C\u002Fa>] [\u003Ca href=\"#ring\" data-ring=\"list\">List Sites\u003C\u002Fa>] [\u003Ca href=\"#guestbook\">Join\u003C\u002Fa>]\u003C\u002Ffont>\u003Cbr>\n\u003Coutput id=\"ring\" class=\"dk__ringout\">\u003Cfont face=\"Verdana\" size=\"1\" color=\"#AAAAAA\">Site 7 of 212\u003C\u002Ffont>\u003C\u002Foutput>\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n\u003Cp class=\"dk__badges\">\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fbadge-notepad-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fbadge-notepad.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fbadge-notepad-still.gif\" width=\"88\" height=\"31\" alt=\"Made with Notepad\">\u003C\u002Fpicture>\n\u003Cpicture>\u003Csource media=\"(prefers-reduced-motion: reduce)\" srcset=\"\u002Fdemos\u002F03-homepages\u002Fbadge-hometown-still.gif\">\u003Cimg src=\"\u002Fdemos\u002F03-homepages\u002Fbadge-hometown.gif\" data-still=\"\u002Fdemos\u002F03-homepages\u002Fbadge-hometown-still.gif\" width=\"88\" height=\"31\" alt=\"HomeTown Pages: free sites\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>\u003Cfont face=\"Verdana\" size=\"1\" color=\"#CCCCCC\">© 1998 Dave. Made with Notepad. This page is a member of HomeTown Pages.\u003Cbr>Last updated: 03\u002F04\u002F98\u003C\u002Ffont>\u003C\u002Fp>\n\u003C\u002Fcenter>\n\u003C\u002Ftd>\u003C\u002Ftr>\n\u003C\u002Ftable>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","@layer era, shell;\n@layer era {\n\u002F* Era 03: a free-hosted personal homepage, 1998. Tables, \u003Cfont>, tiled backgrounds and lots of motion. *\u002F\n[data-era=\"03\"] {\n  \u002F* A 40px star-field \"background.gif\", tiled the way BACKGROUND= tiled it. *\u002F\n  background-color: #000022;\n  background-image: url(\"data:image\u002Fsvg+xml,%3Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect width='40' height='40' fill='%23000022'\u002F%3E%3Crect x='4' y='6' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='22' y='3' width='2' height='2' fill='%23ffff99'\u002F%3E%3Crect x='31' y='19' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='12' y='27' width='1' height='1' fill='%2399ccff'\u002F%3E%3Crect x='35' y='34' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='18' y='16' width='1' height='3' fill='%23ff99ff'\u002F%3E%3Crect x='17' y='17' width='3' height='1' fill='%23ff99ff'\u002F%3E%3Crect x='6' y='36' width='1' height='1' fill='%23ffff99'\u002F%3E%3C\u002Fsvg%3E\");\n  background-repeat: repeat;\n  color: #fff;\n  font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', cursive;\n\n  .dk {\n    padding: 12px 0 24px;\n  }\n  \u002F* The page is 760px wide, as designed for 800x600. Narrow screens scroll it sideways. *\u002F\n  .dk__scroll {\n    overflow-x: auto;\n    max-width: 100%;\n  }\n  .dk__page {\n    background: rgb(0 0 34 \u002F 0.55);\n  }\n  \u002F* \u003Cfont face> only names one font; with no Comic Sans installed, the browser fell back to Times. *\u002F\n  font[face='Comic Sans MS'] {\n    font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif;\n  }\n  a {\n    color: #66ccff;\n  }\n  a:visited {\n    color: #ff99ff;\n  }\n  a:hover {\n    color: #ffff00;\n  }\n  .dk__hood {\n    margin: 0 0 4px;\n    color: #ccc;\n  }\n  .dk__title {\n    font-size: 34px;\n    margin: 8px 0;\n    text-shadow: 3px 3px 0 #cc00cc;\n  }\n  h2 {\n    margin: 18px 0 8px;\n    font-size: 22px;\n  }\n\n  \u002F* \u003Cmarquee> recreated: one span sliding through an overflow-hidden box. *\u002F\n  .dk__marquee {\n    contain: inline-size;\n    overflow: hidden;\n    white-space: nowrap;\n    background: #000080;\n    border: 2px ridge #c0c0c0;\n    color: #00ff00;\n    font: 700 16px\u002F1.6 'Courier New', Courier, monospace;\n  }\n  .dk__marquee span {\n    display: inline-block;\n    padding-left: 100%;\n    animation: e03-marquee 22s linear -7s infinite;\n  }\n  @keyframes e03-marquee {\n    to { transform: translateX(-100%); }\n  }\n\n  \u002F* \u003Cblink> recreated: on\u002Foff at 1 Hz, well under 3 flashes per second. *\u002F\n  .dk__blink {\n    color: #ff3333;\n    font-weight: 700;\n    animation: e03-blink 1s steps(1) infinite;\n  }\n  @keyframes e03-blink {\n    50% { visibility: hidden; }\n  }\n  \u002F* Real animated GIFs (public\u002Fdemos\u002F03-homepages, drawn by scripts\u002Fmake-era03-gifs.py).\n     Dave stretched some with width= and height=; keep the pixels chunky when he did. *\u002F\n  img {\n    image-rendering: pixelated;\n    vertical-align: middle;\n  }\n  .dk__uc {\n    display: block;\n    margin: 12px auto 4px;\n    border: 2px outset #c0c0c0;\n  }\n  .dk__div {\n    margin: 14px 0;\n    text-align: center;\n    line-height: 0;\n  }\n  .dk__div img {\n    max-width: 100%;\n  }\n  .dk__dancer {\n    margin: 0 0 8px 12px;\n  }\n  .dk__badges img {\n    margin: 0 4px;\n  }\n\n  .dk__rainbow {\n    height: 6px;\n    border: 0;\n    margin: 16px 0;\n    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);\n  }\n\n  .dk__side {\n    background: rgb(0 0 102 \u002F 0.6);\n    border: 2px ridge #6666cc;\n  }\n  .dk__nav {\n    list-style: none;\n    padding: 0;\n    margin: 8px 0 16px;\n  }\n  .dk__nav li::before {\n    content: '\\2605  ';\n    color: #ffff00;\n  }\n  .dk__nav li {\n    margin: 4px 0;\n    font-size: 15px;\n  }\n\n  .dk__counter {\n    display: inline-block;\n    background: #000;\n    border: 2px inset #888;\n    padding: 2px;\n  }\n  .dk__digits {\n    font: 700 18px\u002F1 'Courier New', Courier, monospace;\n    letter-spacing: 0;\n    color: #fff;\n  }\n  \u002F* Each digit is a slice of one GIF strip, like a CGI counter's digit images.\n     The real digit stays in the text (transparent), so readable mode, which drops\n     background images, still shows the number. *\u002F\n  .dk__digit {\n    display: inline-block;\n    width: 14px;\n    height: 20px;\n    margin: 0 1px 0 0;\n    font-size: 16px;\n    line-height: 20px;\n    background: #000 url('\u002Fdemos\u002F03-homepages\u002Fcounter-digits.gif') no-repeat;\n    background-position: calc(var(--d, 0) * -14px) 0;\n    color: transparent;\n    text-align: center;\n    vertical-align: top;\n  }\n  .dk__digit.is-rolling {\n    animation: e03-roll 0.35s ease-out;\n  }\n  @keyframes e03-roll {\n    from { transform: translateY(-60%); opacity: 0; }\n  }\n\n  .dk__mail {\n    text-decoration: none;\n    color: #fff;\n    display: inline-block;\n  }\n\n  .dk__cat {\n    margin: 0 12px 8px 0;\n  }\n  .dk__midi {\n    font: 700 14px 'Comic Sans MS', cursive;\n    background: #c0c0c0;\n    border: 3px outset #fff;\n    padding: 4px 14px;\n    margin-top: 6px;\n    cursor: pointer;\n  }\n  .dk__midi[aria-pressed='true'] {\n    border-style: inset;\n    background: #00cc00;\n  }\n\n  .dk__gbform input,\n  .dk__gbform textarea {\n    font: 13px 'Courier New', Courier, monospace;\n  }\n  .dk__entries {\n    max-width: 560px;\n    margin: 16px auto;\n    padding: 0;\n    list-style: none;\n  }\n  .dk__entries li {\n    border: 1px dashed #6666cc;\n    background: rgb(0 0 80 \u002F 0.6);\n    margin: 8px 0;\n    padding: 8px;\n    font-size: 14px;\n  }\n  .dk__entries small {\n    display: block;\n    color: #aaa;\n    font: 11px Verdana, sans-serif;\n  }\n\n  .dk__award {\n    display: inline-block;\n    margin: 8px 4px;\n    padding: 6px 10px;\n    font: 700 12px Verdana, sans-serif;\n    color: #330000;\n    background: linear-gradient(#fff3a0, #e0a800);\n    border: 2px outset #ffd700;\n  }\n  .dk__ring {\n    margin: 12px auto;\n  }\n  .dk__ring td {\n    background: #000;\n    border: 2px ridge #cc00cc;\n  }\n  .dk__ringout {\n    display: block;\n    margin-top: 4px;\n  }\n\n  \u002F* The era stamp: a rainbow tagline under the big welcome, in Comic Sans of course. *\u002F\n  .era-stamp {\n    margin: 4px auto 10px;\n    font: 700 15px\u002F1.4 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif;\n    text-shadow: 2px 2px 0 #000;\n  }\n  .era-stamp__no { color: #00ffff; }\n  .era-stamp__years { color: #ffff00; }\n  .era-stamp__title { color: #ff66ff; }\n  .era-stamp__years::before,\n  .era-stamp__title::before {\n    content: '~*~ ';\n    color: #66ff66;\n  }\n\n  \u002F* The travel buttons: bevelled \"GIF buttons\" made in Paint Shop Pro, with a blinking NEW! sticker. *\u002F\n  .era-cta {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    gap: 14px 22px;\n    margin: 18px auto 8px;\n    text-align: center;\n  }\n  .era-cta a {\n    display: inline-block;\n    text-decoration: none;\n    border: 4px outset #c0c0c0;\n    font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif;\n  }\n  .era-cta a:active {\n    border-style: inset;\n  }\n  .era-cta__label,\n  .era-cta__to {\n    display: block;\n  }\n  .era-cta__next {\n    position: relative;\n    padding: 10px 26px 8px;\n    background: linear-gradient(#ff33cc, #9900cc 55%, #660099);\n    border-color: #ff99ff;\n    color: #ffff00;\n    box-shadow: 4px 4px 0 #000;\n  }\n  .era-cta__next .era-cta__label {\n    font-size: 24px;\n    font-weight: 700;\n    text-shadow: 2px 2px 0 #000;\n  }\n  .era-cta__next .era-cta__to {\n    margin-top: 2px;\n    font: 700 12px\u002F1.3 Verdana, Arial, sans-serif;\n    color: #fff;\n    text-shadow: 1px 1px 0 #000;\n  }\n  \u002F* The NEW! sticker, blinking at 1 Hz (one flash a second). *\u002F\n  .era-cta__next::after {\n    content: 'NEW!';\n    position: absolute;\n    top: -12px;\n    right: -14px;\n    padding: 1px 5px;\n    background: #ff0000;\n    color: #ffff00;\n    font: 700 12px Verdana, Arial, sans-serif;\n    border: 2px solid #ffff00;\n    transform: rotate(12deg);\n    animation: e03-blink 1s steps(1) infinite;\n  }\n  .era-cta__prev {\n    padding: 6px 14px;\n    background: linear-gradient(#e0e0e0, #a0a0a0);\n    color: #000;\n    font-size: 14px;\n    box-shadow: 3px 3px 0 #000;\n  }\n  .era-cta__prev .era-cta__label {\n    font-weight: 700;\n  }\n  .era-cta__prev .era-cta__to {\n    font: 11px\u002F1.3 Verdana, Arial, sans-serif;\n    color: #000;\n  }\n  .era-cta a:hover {\n    filter: brightness(1.15);\n  }\n  .era-cta a:focus-visible {\n    outline: 3px dashed #ffff00;\n    outline-offset: 4px;\n  }\n  @media (prefers-reduced-motion: reduce) {\n    .era-cta__next::after { animation: none; }\n  }\n  \u002F* On a small screen the 760px page scrolls sideways: keep the stamp and the buttons in view. *\u002F\n  @container screen (max-width: 800px) {\n    \u002F* \u003Ccenter> centres block children too; plain text centring lets the stamp stick to the left. *\u002F\n    center:has(> .era-stamp) {\n      text-align: center;\n    }\n    .era-stamp,\n    .era-cta {\n      position: sticky;\n      left: 8px;\n      width: calc(100cqw - 32px);\n      margin-left: 0;\n      margin-right: 0;\n      box-sizing: border-box;\n    }\n  }\n\n  :focus-visible {\n    outline: 2px dashed #ffff00;\n    outline-offset: 2px;\n  }\n}\n\n}",[90,92,94,96],{"caption":49,"file":47,"html":91},"\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\">table\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"dk__page\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"760\"\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\"> border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cellpadding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"8\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cellspacing\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\"> align\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"center\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">tr\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">td\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">center\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\">\"dk__hood\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> size\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> face\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Verdana, Arial\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Hosted free by <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>HomeTown Pages<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">·\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> neighborhood: <\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\">\"#guestbook\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>SpaceStation\u002FOrbit\u002F4417<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\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\">h1\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"dk__title\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"comic-sans\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> face\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Comic Sans MS\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#FFFF00\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>~*~ Welcome 2 Dave's Kool Page!!! ~*~<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h1\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\">\"dk__marquee\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"marquee\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Scrolling message\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>*** Thanx 4 stopping by!!! *** This page is ALWAYS changing so come back soon!!! *** Now with MIDI music!!! *** Sign my guestbook!!! ***<\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\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">center\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":54,"file":52,"html":93},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F* <marquee> recreated: one span sliding through an overflow-hidden box. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.dk__marquee\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  contain\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: inline-size;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  overflow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  white-space\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">nowrap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#000080\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> ridge\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #c0c0c0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#00ff00\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">700\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 16\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1.6\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'Courier New'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">Courier\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">monospace\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:#6CB6FF\">.dk__marquee\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\"> span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  display\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inline-block\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding-left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  animation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: e03-marquee \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">22\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">s\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> linear\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> -7\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">s\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> infinite\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:#F47067\">@keyframes\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> e03-marquee\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  to\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">translateX\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\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":56,"file":52,"html":95},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F* A 40px star-field \"background.gif\", tiled the way BACKGROUND= tiled it. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">background-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">#000022\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">background-image\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: url(\"\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">data\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">:image\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">svg\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">xml,%3Csvg xmlns='http:\u002F\u002Fwww\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.w3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.org\u002F2000\u002Fsvg' width='40' height='40' \u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">shape-rendering\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">='crispEdges'%3E%3Crect width='40' height='40' fill='%23000022'\u002F%3E%3Crect x='4' y='6' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='22' y='3' width='2' height='2' fill='%23ffff99'\u002F%3E%3Crect x='31' y='19' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='12' y='27' width='1' height='1' fill='%2399ccff'\u002F%3E%3Crect x='35' y='34' width='1' height='1' fill='%23fff'\u002F%3E%3Crect x='18' y='16' width='1' height='3' fill='%23ff99ff'\u002F%3E%3Crect x='17' y='17' width='3' height='1' fill='%23ff99ff'\u002F%3E%3Crect x='6' y='36' width='1' height='1' fill='%23ffff99'\u002F%3E%3C\u002Fsvg%3E\");\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#8DDB8C\">background-repeat\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: repeat;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":61,"file":59,"html":97},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F** A square-wave melody and bass, like a General MIDI file on a cheap sound card. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> btn\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\">HTMLButtonElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.dk__midi'\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\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> AudioContext\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> |\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> null\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> null\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> timer \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:#6CB6FF\"> melody\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">81\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">74\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">77\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">81\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">77\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">84\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">83\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">79\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">74\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">74\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">76\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">67\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">72\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\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\"> bass\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">48\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">48\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">45\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">45\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">41\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">41\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">43\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">43\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> hz\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">n\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 440\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> *\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> **\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ((n \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 69\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> note\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">freq\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">at\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">len\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">type\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> OscillatorType\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">vol\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> number\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\"> o\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createOscillator\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\"> g\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createGain\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  o.type \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> type\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  o.frequency.value \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> freq\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  g.gain.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setValueAtTime\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(vol, at)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  g.gain.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">exponentialRampToValueAtTime\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.001\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, at \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> len)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  o.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">connect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(g).\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">connect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.destination)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  o.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">start\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(at)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  o.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(at \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> len)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\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:#ADBAC7\">  ctx \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">??=\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> new\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> AudioContext\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  void\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">resume\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\"> step\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.16\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> t \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx.currentTime \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.05\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  let\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> i \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\"> schedule\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:#F47067\">    while\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (t \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"><\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.currentTime \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.5\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\"> m\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> melody[i \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> melody.\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">length\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\"> (m) \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">note\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">hz\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(m), t, step \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0.9\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'square'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.05\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\"> (i \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> ===\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">note\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">hz\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(bass[(i \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> bass.\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]), t, step \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">*\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 3.5\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'triangle'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.12\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      t \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> step\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      i\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">++\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">  schedule\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">()\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  timer \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> window.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">setInterval\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(schedule, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\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:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> stop\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#DCBDFB\">  clearInterval\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(timer)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  void\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ctx?.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">suspend\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>",1791232160973]