[{"data":1,"prerenderedAt":88},["ShallowReactive",2],{"room:09-web-2-0":3},{"path":4,"meta":5,"html":78,"css":79,"skinCss":80,"snippets":81},"09-web-2-0",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":39,"thenVsNow":45,"snippets":46,"sources":59,"recreated":75},"09","Web 2.0 gloss","2005–2009","The web became an app platform: perpetually beta startups with glossy pill buttons, wet-floor logos, tag clouds and pages that updated themselves with Ajax.",{"screens":11,"connection":12,"browsers":13},"1024×768 and up; the first widescreen laptops and LCDs","Always-on broadband made background requests (XMLHttpRequest) practical","Firefox 2 and 3, Safari 3, Internet Explorer 7; the iPhone arrived in 2007",[15,18,21,24,27,30,33,36],{"id":16,"label":17},"reflection","Wet-floor reflection under the logo",{"id":19,"label":20},"beta","The ever-present BETA badge",{"id":22,"label":23},"gloss","Glossy pill buttons with a halfway highlight",{"id":25,"label":26},"stripes","Diagonal stripes and pastel gradients",{"id":28,"label":29},"icons","Big glossy feature icons",{"id":31,"label":32},"ajax","Ajax spinner and the Yellow Fade Technique",{"id":34,"label":35},"tag-cloud","Folksonomy tag cloud",{"id":37,"label":38},"share","Row of social bookmarking buttons",[40,41,42,43,44],"XMLHttpRequest and libraries such as Prototype, script.aculo.us and jQuery","Sliced background images for gradients, gloss and rounded corners (here: CSS gradients and border-radius)","Animated GIF loading spinners","Bookmarklets, RSS everywhere and public APIs for mashups","Ruby on Rails and other convention-over-configuration frameworks","Gloss and reflections gave way to flat design, but Ajax became simply how the web works: fetch(), live updates and single-page apps.",[47,52,54],{"file":48,"lang":49,"caption":50,"region":51},"era.css","css","The glossy pill: a hard stop halfway down a gradient","pill",{"file":48,"lang":49,"caption":53,"region":16},"Wet-floor reflection with a fallback",{"file":55,"lang":56,"caption":57,"region":58},"era.client.ts","typescript","A pretend Ajax save with the yellow fade","ajax-save",[60,63,66,69,72],{"label":61,"url":62},"Web 2.0 (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FWeb_2.0",{"label":64,"url":65},"XMLHttpRequest (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FXMLHttpRequest",{"label":67,"url":68},"Ajax (programming) (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FAjax_(programming)",{"label":70,"url":71},"Folksonomy (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFolksonomy",{"label":73,"url":74},"-webkit-box-reflect (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F-webkit-box-reflect",[76,77],"Gloss, gradients and rounded corners were sliced PNG images in 2006; here they are CSS gradients and border-radius.","The \"Ajax\" save is simulated with a timer; no request leaves the page.","\u003Cdiv class=\"gl\">\n  \u003Cdiv class=\"gl__top\">\n    \u003Cdiv class=\"gl__inner\">\n      \u003Cdiv class=\"gl__brand\">\n        \u003Ch1 class=\"gl__logo\" data-trait=\"reflection\">\u003Cspan class=\"gl__word\">snippr\u003C\u002Fspan>\u003Cspan class=\"gl__mirror\" aria-hidden=\"true\">snippr\u003C\u002Fspan>\u003C\u002Fh1>\n        \u003Cspan class=\"gl__beta\" data-trait=\"beta\">beta\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cul class=\"gl__nav\">\n        \u003Cli>\u003Ca href=\"#gl-tour\">Tour\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#gl-blog\">Blog\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#gl-help\">Help\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#gl-signup\" class=\"gl__login\">Log in\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"gl__hero\" data-trait=\"stripes\">\n    \u003Cdiv class=\"gl__inner gl__hero-inner\">\n      \u003Cdiv class=\"gl__pitch\">\n        \u003Ch2>Save the bits of the web you love. \u003Cem>Share them with friends.\u003C\u002Fem>\u003C\u002Fh2>\n        \u003Cp>Snippr lets you clip quotes, links and pictures from any page, tag them, and see what\n          everyone else is snipping right now. No software to install. It just works, right in your browser.\u003C\u002Fp>\n        \u003Cp class=\"gl__cta\" id=\"gl-signup\">\n          \u003Ca href=\"#gl-try\" class=\"gl__pill\" data-trait=\"gloss\">Sign up — it's free!\u003C\u002Fa>\n          \u003Cspan class=\"gl__small\">Takes 30 seconds. No credit card. We hate spam too.\u003C\u002Fspan>\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"gl__burst\" aria-hidden=\"true\">\n        \u003Csvg viewBox=\"0 0 120 120\" width=\"120\" height=\"120\">\u003Cpath d=\"M60 2l9 18 19-9 1 21 21-1-8 19 19 9-17 12 13 16-21 4 4 21-20-6-6 20-14-15-14 15-6-20-20 6 4-21-21-4 13-16-17-12 19-9-8-19 21 1 1-21 19 9z\" fill=\"#ffcf2e\" stroke=\"#f2a400\" stroke-width=\"2\"\u002F>\u003C\u002Fsvg>\n        \u003Cspan>100%\u003Cbr\u002F>free!\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"gl__inner gl__body\">\n    \u003Cdiv class=\"gl__app\" id=\"gl-try\" data-trait=\"ajax\">\n      \u003Cdiv class=\"gl__app-head\">\n        \u003Ch2>Your snips\u003C\u002Fh2>\n        \u003Cspan class=\"gl__count\">\u003Cb id=\"gl-num\">3\u003C\u002Fb> snips\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cform class=\"gl__add\" action=\"#gl-try\" aria-label=\"Add a snippet\">\n        \u003Clabel for=\"gl-input\" class=\"gl__label\">Snip something:\u003C\u002Flabel>\n        \u003Cinput id=\"gl-input\" name=\"snip\" type=\"text\" maxlength=\"80\" placeholder=\"e.g. a recipe for perfect pancakes\" \u002F>\n        \u003Cbutton type=\"submit\" class=\"gl__pill gl__pill--small\">Add snip\u003C\u002Fbutton>\n        \u003Cspan class=\"gl__spinner\" role=\"status\" aria-live=\"polite\">\u003Ci aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"gl__spin-text\">\u003C\u002Fspan>\u003C\u002Fspan>\n      \u003C\u002Fform>\n      \u003Cul class=\"gl__list\">\n        \u003Cli>\u003Cb>How to fold a fitted sheet\u003C\u002Fb> \u003Cspan class=\"gl__tags\">tagged \u003Ca href=\"#gl-tags\">home\u003C\u002Fa> \u003Ca href=\"#gl-tags\">lifehacks\u003C\u002Fa>\u003C\u002Fspan> \u003Cspan class=\"gl__meta\">by melody_k, 2 minutes ago\u003C\u002Fspan>\u003C\u002Fli>\n        \u003Cli>\u003Cb>Pixel art palettes that don't suck\u003C\u002Fb> \u003Cspan class=\"gl__tags\">tagged \u003Ca href=\"#gl-tags\">design\u003C\u002Fa>\u003C\u002Fspan> \u003Cspan class=\"gl__meta\">by ruby_rex, 9 minutes ago\u003C\u002Fspan>\u003C\u002Fli>\n        \u003Cli>\u003Cb>The best free podcasts about space\u003C\u002Fb> \u003Cspan class=\"gl__tags\">tagged \u003Ca href=\"#gl-tags\">podcasts\u003C\u002Fa> \u003Ca href=\"#gl-tags\">space\u003C\u002Fa>\u003C\u002Fspan> \u003Cspan class=\"gl__meta\">by orbit_otto, 1 hour ago\u003C\u002Fspan>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"gl__side\" id=\"gl-tags\">\n      \u003Ch3>Popular tags\u003C\u002Fh3>\n      \u003Cp class=\"gl__cloud\" data-trait=\"tag-cloud\">\n        \u003Ca href=\"#gl-tags\" class=\"s3\">ajax\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s1\">books\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s4\">design\u003C\u002Fa>\n        \u003Ca href=\"#gl-tags\" class=\"s2\">diy\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s1\">food\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s5\">funny\u003C\u002Fa>\n        \u003Ca href=\"#gl-tags\" class=\"s2\">lifehacks\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s3\">music\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s1\">podcasts\u003C\u002Fa>\n        \u003Ca href=\"#gl-tags\" class=\"s4\">web2.0\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s2\">space\u003C\u002Fa> \u003Ca href=\"#gl-tags\" class=\"s1\">travel\u003C\u002Fa>\n      \u003C\u002Fp>\n      \u003Ch3>Snip this!\u003C\u002Fh3>\n      \u003Cp class=\"gl__share\" data-trait=\"share\">\n        \u003Ca href=\"#gl-tags\" aria-label=\"Save to Taggle\">\u003Csvg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\">\u003Crect width=\"8\" height=\"8\" fill=\"#3a7bd5\"\u002F>\u003Crect x=\"8\" width=\"8\" height=\"8\" fill=\"#222\"\u002F>\u003Crect y=\"8\" width=\"8\" height=\"8\" fill=\"#ccc\"\u002F>\u003Crect x=\"8\" y=\"8\" width=\"8\" height=\"8\" fill=\"#fff\" stroke=\"#ccc\"\u002F>\u003C\u002Fsvg>\u003C\u002Fa>\n        \u003Ca href=\"#gl-tags\" aria-label=\"Vote it up on Upvotr\">\u003Csvg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\">\u003Crect width=\"16\" height=\"16\" rx=\"3\" fill=\"#1d5c9b\"\u002F>\u003Cpath d=\"M8 3l4 5H9.5v5h-3V8H4z\" fill=\"#fff\"\u002F>\u003C\u002Fsvg>\u003C\u002Fa>\n        \u003Ca href=\"#gl-tags\" aria-label=\"Stumble onto Wanderpage\">\u003Csvg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\">\u003Ccircle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#ea4b24\"\u002F>\u003Ccircle cx=\"8\" cy=\"8\" r=\"3\" fill=\"#fff\"\u002F>\u003C\u002Fsvg>\u003C\u002Fa>\n        \u003Ca href=\"#gl-tags\" aria-label=\"Post to Sprout\">\u003Csvg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\">\u003Crect width=\"16\" height=\"16\" rx=\"3\" fill=\"#5aa02c\"\u002F>\u003Cpath d=\"M8 13V7M8 8q-4 0-4-4 4 0 4 4zM8 7q4 0 4-4-4 0-4 4z\" stroke=\"#fff\" fill=\"#fff\"\u002F>\u003C\u002Fsvg>\u003C\u002Fa>\n        \u003Ca href=\"#gl-tags\" aria-label=\"Email to a friend\">\u003Csvg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" aria-hidden=\"true\">\u003Crect y=\"3\" width=\"16\" height=\"10\" rx=\"1\" fill=\"#999\"\u002F>\u003Cpath d=\"M0 4l8 5 8-5\" stroke=\"#fff\" fill=\"none\"\u002F>\u003C\u002Fsvg>\u003C\u002Fa>\n      \u003C\u002Fp>\n      \u003Cp class=\"gl__badges\">\u003Cspan class=\"gl__chip\">Ajax inside\u003C\u002Fspan> \u003Cspan class=\"gl__chip gl__chip--rss\">RSS\u003C\u002Fspan>\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"gl__inner\" id=\"gl-tour\">\n    \u003Ch2 class=\"gl__section\">Why you'll love Snippr\u003C\u002Fh2>\n    \u003Cul class=\"gl__features\" data-trait=\"icons\">\n      \u003Cli>\n        \u003Csvg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" aria-hidden=\"true\">\u003Cdefs>\u003ClinearGradient id=\"gl-g1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\u003Cstop offset=\"0\" stop-color=\"#9be15d\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#3fa11c\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect x=\"4\" y=\"4\" width=\"56\" height=\"56\" rx=\"14\" fill=\"url(#gl-g1)\"\u002F>\u003Cpath d=\"M18 34l10 10 18-22\" stroke=\"#fff\" stroke-width=\"7\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\u003Cpath d=\"M8 18q0-10 10-10h28q10 0 10 10v6q-24-10-48 4z\" fill=\"#fff\" opacity=\".45\"\u002F>\u003C\u002Fsvg>\n        \u003Ch3>One-click snipping\u003C\u002Fh3>\n        \u003Cp>Drag our bookmarklet to your toolbar. Click it on any page. Done!\u003C\u002Fp>\n      \u003C\u002Fli>\n      \u003Cli>\n        \u003Csvg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" aria-hidden=\"true\">\u003Cdefs>\u003ClinearGradient id=\"gl-g2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\u003Cstop offset=\"0\" stop-color=\"#7fd3ff\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#1c7fd1\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect x=\"4\" y=\"4\" width=\"56\" height=\"56\" rx=\"14\" fill=\"url(#gl-g2)\"\u002F>\u003Ccircle cx=\"24\" cy=\"30\" r=\"8\" fill=\"#fff\"\u002F>\u003Ccircle cx=\"42\" cy=\"30\" r=\"8\" fill=\"#fff\"\u002F>\u003Cpath d=\"M12 52q12-16 24 0M30 52q12-16 24 0\" fill=\"#fff\"\u002F>\u003Cpath d=\"M8 18q0-10 10-10h28q10 0 10 10v6q-24-10-48 4z\" fill=\"#fff\" opacity=\".45\"\u002F>\u003C\u002Fsvg>\n        \u003Ch3>Social by design\u003C\u002Fh3>\n        \u003Cp>Follow friends, see their snips, and discover what's hot today.\u003C\u002Fp>\n      \u003C\u002Fli>\n      \u003Cli>\n        \u003Csvg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" aria-hidden=\"true\">\u003Cdefs>\u003ClinearGradient id=\"gl-g3\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\u003Cstop offset=\"0\" stop-color=\"#ffb3e6\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#e0399a\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect x=\"4\" y=\"4\" width=\"56\" height=\"56\" rx=\"14\" fill=\"url(#gl-g3)\"\u002F>\u003Cpath d=\"M14 28l14-14h20v20L34 48z\" fill=\"#fff\"\u002F>\u003Ccircle cx=\"40\" cy=\"22\" r=\"4\" fill=\"#e0399a\"\u002F>\u003Cpath d=\"M8 18q0-10 10-10h28q10 0 10 10v6q-24-10-48 4z\" fill=\"#fff\" opacity=\".45\"\u002F>\u003C\u002Fsvg>\n        \u003Ch3>Tags, not folders\u003C\u002Fh3>\n        \u003Cp>Tag it however you like. Your tags, your folksonomy.\u003C\u002Fp>\n      \u003C\u002Fli>\n      \u003Cli>\n        \u003Csvg viewBox=\"0 0 64 64\" width=\"64\" height=\"64\" aria-hidden=\"true\">\u003Cdefs>\u003ClinearGradient id=\"gl-g4\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\u003Cstop offset=\"0\" stop-color=\"#ffd27a\"\u002F>\u003Cstop offset=\"1\" stop-color=\"#f08a00\"\u002F>\u003C\u002FlinearGradient>\u003C\u002Fdefs>\u003Crect x=\"4\" y=\"4\" width=\"56\" height=\"56\" rx=\"14\" fill=\"url(#gl-g4)\"\u002F>\u003Ccircle cx=\"20\" cy=\"46\" r=\"5\" fill=\"#fff\"\u002F>\u003Cpath d=\"M15 31a18 18 0 0 1 18 18M15 19a30 30 0 0 1 30 30\" stroke=\"#fff\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\"\u002F>\u003Cpath d=\"M8 18q0-10 10-10h28q10 0 10 10v6q-24-10-48 4z\" fill=\"#fff\" opacity=\".45\"\u002F>\u003C\u002Fsvg>\n        \u003Ch3>Feeds for everything\u003C\u002Fh3>\n        \u003Cp>Every tag and every friend has an RSS feed. Mash it up!\u003C\u002Fp>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n\n    \u003Ch2 class=\"gl__section\" id=\"gl-blog\">People are talking\u003C\u002Fh2>\n    \u003Cdiv class=\"gl__quotes\">\n      \u003Cblockquote>\u003Cp>“I literally can't remember how I bookmarked things before Snippr.”\u003C\u002Fp>\u003Ccite>Jess, designer and snip addict\u003C\u002Fcite>\u003C\u002Fblockquote>\n      \u003Cblockquote>\u003Cp>“It's like a scrapbook that talks to all my friends' scrapbooks. Love it.”\u003C\u002Fp>\u003Ccite>Marco, grad student\u003C\u002Fcite>\u003C\u002Fblockquote>\n      \u003Cblockquote>\u003Cp>“Finally, a web app that feels like a desktop app. Those rounded corners!”\u003C\u002Fp>\u003Ccite>A very happy beta tester\u003C\u002Fcite>\u003C\u002Fblockquote>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"gl__foot\" id=\"gl-help\">\n    \u003Cdiv class=\"gl__inner\">\n      \u003Cp>\u003Ca href=\"#gl-tour\">About\u003C\u002Fa> · \u003Ca href=\"#gl-blog\">Blog\u003C\u002Fa> · \u003Ca href=\"#gl-help\">API\u003C\u002Fa> · \u003Ca href=\"#gl-help\">Developers\u003C\u002Fa> · \u003Ca href=\"#gl-help\">Privacy\u003C\u002Fa> · \u003Ca href=\"#gl-help\">Jobs (we're hiring!)\u003C\u002Fa>\u003C\u002Fp>\n      \u003Cp>© 2007 Snippr, Inc. Made with love (and lots of coffee) in a tiny office above a bakery.\n        \u003Cspan class=\"gl__chip gl__chip--rails\">Powered by Rails\u003C\u002Fspan>\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","@layer era, shell, skin;\n@layer era {\n\u002F* Era 09: Web 2.0 gloss. Big friendly type, pastel gradients, glossy pills,\n   wet-floor reflections, beta badges, diagonal stripes and the yellow fade. *\u002F\n[data-era=\"09\"] {\n  background: #fff;\n  color: #333;\n  font: 15px\u002F1.55 'Lucida Grande', 'Lucida Sans Unicode', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n\n  a {\n    color: #0b6fb3;\n  }\n  :focus-visible {\n    outline: 3px solid #ff8a00;\n    outline-offset: 2px;\n  }\n\n  .gl__inner {\n    max-width: 940px;\n    margin: 0 auto;\n    padding: 0 20px;\n    box-sizing: border-box;\n  }\n\n  \u002F* ---------- Header ---------- *\u002F\n  .gl__top {\n    background: linear-gradient(#ffffff, #eef5e4);\n    border-bottom: 1px solid #d4e3c0;\n    .gl__inner {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      justify-content: space-between;\n      gap: 8px 20px;\n      padding-top: 18px;\n      padding-bottom: 6px;\n    }\n  }\n  .gl__brand {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n  }\n\n  .gl__logo {\n    margin: 0;\n    position: relative;\n    font: bold 54px\u002F1 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    letter-spacing: -3px;\n    height: 64px;\n  }\n  .gl__word {\n    display: block;\n    background: linear-gradient(#a6e34b 0%, #6cbf1d 48%, #4e9d0c 52%, #74c728 100%);\n    -webkit-background-clip: text;\n    background-clip: text;\n    color: transparent;\n  }\n  \u002F* Fallback: a flipped copy fading out underneath (\"wet floor\"). *\u002F\n  .gl__mirror {\n    position: absolute;\n    left: 0;\n    top: 100%;\n    margin-top: -6px;\n    transform: scaleY(-1);\n    color: #6cbf1d;\n    opacity: 0.35;\n    mask-image: linear-gradient(to top, #000 0%, transparent 55%);\n    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 55%);\n    pointer-events: none;\n  }\n  \u002F* Where the proprietary property exists, let the browser draw the reflection. *\u002F\n  @supports (-webkit-box-reflect: below 0) {\n    .gl__word {\n      -webkit-box-reflect: below -14px linear-gradient(transparent 55%, rgb(0 0 0 \u002F 0.35));\n    }\n    .gl__mirror {\n      display: none;\n    }\n  }\n\n  .gl__beta {\n    margin: 4px 0 0 6px;\n    padding: 2px 9px 3px;\n    font: bold 12px\u002F1.2 'Lucida Grande', Arial, sans-serif;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    color: #fff;\n    background: linear-gradient(#ff7aa8, #e0306e);\n    border-radius: 10px;\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.6), 0 1px 2px rgb(0 0 0 \u002F 0.25);\n    transform: rotate(-8deg);\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.25);\n  }\n\n  .gl__nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px 18px;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    font-size: 14px;\n    a {\n      color: #4c7a16;\n      text-decoration: none;\n      font-weight: bold;\n    }\n    a:hover {\n      text-decoration: underline;\n    }\n  }\n  .gl__login {\n    padding: 4px 12px;\n    border-radius: 14px;\n    background: #fff;\n    border: 1px solid #b7d38f;\n  }\n\n  \u002F* ---------- Hero ---------- *\u002F\n  .gl__hero {\n    background:\n      repeating-linear-gradient(-45deg, rgb(255 255 255 \u002F 0.35) 0 12px, transparent 12px 24px),\n      linear-gradient(#e2f6ff, #b9e5fb);\n    border-bottom: 1px solid #9fd2ea;\n  }\n  .gl__hero-inner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding-top: 34px;\n    padding-bottom: 34px;\n  }\n  .gl__pitch {\n    flex: 1;\n    h2 {\n      margin: 0 0 12px;\n      font: bold 36px\u002F1.15 'Helvetica Neue', Helvetica, Arial, sans-serif;\n      letter-spacing: -1.2px;\n      color: #1d4f6e;\n      text-shadow: 0 1px 0 #fff;\n    }\n    em {\n      font-style: normal;\n      color: #e0306e;\n    }\n    p {\n      margin: 0 0 18px;\n      font-size: 17px;\n      max-width: 34em;\n      color: #2c5168;\n    }\n  }\n  .gl__cta {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 10px 16px;\n  }\n  .gl__small {\n    font-size: 12px;\n    color: #4b6e83;\n  }\n\n  .gl__pill {\n    display: inline-block;\n    position: relative;\n    padding: 12px 30px 13px;\n    font: bold 20px\u002F1 'Lucida Grande', 'Helvetica Neue', Arial, sans-serif;\n    color: #fff;\n    text-decoration: none;\n    text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.3);\n    border: 1px solid #3f8a0a;\n    border-radius: 999px;\n    \u002F* The gloss: a hard stop halfway down a vertical gradient. *\u002F\n    background: linear-gradient(#b5ec6a 0%, #8fd63a 49%, #6cbf1d 51%, #8fd63a 100%);\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.7), 0 2px 4px rgb(0 0 0 \u002F 0.25);\n    cursor: pointer;\n  }\n  .gl__pill:hover {\n    background: linear-gradient(#c6f387 0%, #a0e04e 49%, #7dcc2c 51%, #a0e04e 100%);\n  }\n  .gl__pill:active {\n    box-shadow: inset 0 2px 4px rgb(0 0 0 \u002F 0.3);\n  }\n  .gl__pill--small {\n    font-size: 14px;\n    padding: 7px 16px 8px;\n  }\n\n  .gl__burst {\n    position: relative;\n    flex: none;\n    width: 120px;\n    height: 120px;\n    transform: rotate(12deg);\n    svg {\n      display: block;\n      filter: drop-shadow(0 2px 2px rgb(0 0 0 \u002F 0.2));\n    }\n    span {\n      position: absolute;\n      inset: 0;\n      display: grid;\n      place-items: center;\n      text-align: center;\n      font: bold 19px\u002F1.05 'Helvetica Neue', Arial, sans-serif;\n      color: #8a2d00;\n    }\n  }\n\n  \u002F* ---------- App + sidebar ---------- *\u002F\n  .gl__body {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 24px;\n    padding-top: 28px;\n    padding-bottom: 12px;\n  }\n  .gl__app {\n    flex: 2 1 420px;\n    min-width: 0;\n    background: #fff;\n    border: 1px solid #cfe3b4;\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgb(80 140 20 \u002F 0.12);\n    overflow: hidden;\n  }\n  .gl__app-head {\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    padding: 10px 16px;\n    background: linear-gradient(#f6fbef, #e3f2cf);\n    border-bottom: 1px solid #cfe3b4;\n    h2 {\n      margin: 0;\n      font-size: 18px;\n      color: #3d6b0e;\n    }\n  }\n  .gl__count {\n    font-size: 12px;\n    color: #556;\n    b {\n      font-size: 15px;\n    }\n  }\n  .gl__add {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 16px;\n    border-bottom: 1px dashed #dde8cf;\n    input {\n      flex: 1 1 200px;\n      min-width: 0;\n      font: 15px 'Lucida Grande', Arial, sans-serif;\n      padding: 7px 12px;\n      border: 1px solid #b9c9a6;\n      border-radius: 16px;\n      box-shadow: inset 0 1px 2px rgb(0 0 0 \u002F 0.12);\n    }\n  }\n  .gl__label {\n    font-weight: bold;\n    font-size: 13px;\n    color: #3d6b0e;\n    flex-basis: 100%;\n  }\n  .gl__spinner {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #667;\n  }\n  .gl__spinner i {\n    visibility: hidden;\n  }\n  .gl__add.is-busy .gl__spinner i {\n    visibility: visible;\n  }\n  \u002F* The \"Ajax loader\" GIF, rebuilt with a conic gradient and a stepped spin. *\u002F\n  .gl__spinner i {\n    width: 18px;\n    height: 18px;\n    border-radius: 50%;\n    background: conic-gradient(#6cbf1d, rgb(108 191 29 \u002F 0.05));\n    mask: radial-gradient(circle, transparent 5px, #000 6px);\n    -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px);\n    animation: e09-spin 0.9s steps(12) infinite;\n  }\n\n  .gl__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    li {\n      padding: 10px 16px;\n      border-bottom: 1px solid #eef3e8;\n    }\n    li:last-child {\n      border-bottom: 0;\n    }\n    b {\n      display: block;\n      color: #223;\n    }\n    li.is-new {\n      animation: e09-yft 2.4s ease-out;\n    }\n  }\n  .gl__tags,\n  .gl__meta {\n    font-size: 12px;\n    color: #667;\n  }\n  .gl__tags a {\n    display: inline-block;\n    padding: 0 7px;\n    margin: 0 1px;\n    background: #e5f1fb;\n    border-radius: 8px;\n    text-decoration: none;\n  }\n\n  .gl__side {\n    flex: 1 1 220px;\n    h3 {\n      margin: 0 0 8px;\n      font-size: 14px;\n      color: #1d4f6e;\n      text-transform: lowercase;\n    }\n  }\n  .gl__cloud {\n    margin: 0 0 22px;\n    line-height: 1.4;\n    a {\n      text-decoration: none;\n    }\n    a:hover {\n      background: #0b6fb3;\n      color: #fff;\n    }\n    .s1 { font-size: 12px; }\n    .s2 { font-size: 15px; }\n    .s3 { font-size: 19px; }\n    .s4 { font-size: 23px; font-weight: bold; }\n    .s5 { font-size: 28px; font-weight: bold; letter-spacing: -1px; }\n  }\n  .gl__share {\n    display: flex;\n    gap: 6px;\n    margin: 0 0 18px;\n    a {\n      display: grid;\n      place-items: center;\n      width: 26px;\n      height: 26px;\n      border: 1px solid #d8dde3;\n      border-radius: 6px;\n      background: linear-gradient(#fff, #eef1f4);\n    }\n    svg {\n      display: block;\n    }\n  }\n  .gl__chip {\n    display: inline-block;\n    padding: 1px 8px;\n    font: bold 10px\u002F16px Verdana, sans-serif;\n    text-transform: uppercase;\n    color: #fff;\n    background: linear-gradient(#7fbfff, #2f7fd1);\n    border-radius: 3px;\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.5);\n  }\n  .gl__chip--rss {\n    background: linear-gradient(#ffb15c, #f07800);\n    color: #3a1a00;\n  }\n  .gl__chip--rails {\n    background: linear-gradient(#e86a6a, #a81717);\n  }\n\n  \u002F* ---------- Features & testimonials ---------- *\u002F\n  .gl__section {\n    margin: 30px 0 16px;\n    font: bold 26px\u002F1.2 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    letter-spacing: -0.8px;\n    color: #1d4f6e;\n  }\n  .gl__features {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));\n    gap: 18px;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    li {\n      text-align: center;\n      padding: 18px 14px;\n      border-radius: 14px;\n      background: linear-gradient(#fbfdf8, #f1f7e8);\n      border: 1px solid #e2edd3;\n    }\n    svg {\n      filter: drop-shadow(0 3px 3px rgb(0 0 0 \u002F 0.18));\n    }\n    h3 {\n      margin: 10px 0 4px;\n      font-size: 17px;\n      color: #334;\n    }\n    p {\n      margin: 0;\n      font-size: 13px;\n      color: #556;\n    }\n  }\n  .gl__quotes {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n    gap: 18px;\n    padding-bottom: 30px;\n    blockquote {\n      position: relative;\n      margin: 0 0 18px;\n      padding: 16px 18px;\n      background: #fffbe0;\n      border: 1px solid #f0e2a0;\n      border-radius: 14px;\n    }\n    blockquote::after {\n      content: '';\n      position: absolute;\n      left: 28px;\n      bottom: -11px;\n      border: 10px solid transparent;\n      border-top-color: #f0e2a0;\n      border-bottom: 0;\n    }\n    p {\n      margin: 0;\n      font-size: 16px;\n      color: #4a4220;\n    }\n    cite {\n      position: absolute;\n      left: 52px;\n      bottom: -26px;\n      font-size: 12px;\n      color: #776;\n    }\n  }\n\n  .gl__foot {\n    padding: 18px 0 10px;\n    background: linear-gradient(#f3f3f3, #e2e2e2);\n    border-top: 1px solid #d0d0d0;\n    font-size: 12px;\n    color: #555;\n    p {\n      margin: 0 0 8px;\n    }\n  }\n\n  @media (max-width: 640px) {\n    .gl__pitch h2 {\n      font-size: 28px;\n    }\n    .gl__burst {\n      display: none;\n    }\n    .gl__logo {\n      font-size: 44px;\n      height: 54px;\n    }\n  }\n}\n\n@keyframes e09-spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\u002F* The Yellow Fade Technique: flash a new item yellow, then fade back to white. *\u002F\n@keyframes e09-yft {\n  from {\n    background-color: #ffff66;\n  }\n  to {\n    background-color: #fff;\n  }\n}\n\n}","@layer era, shell, skin;\n@layer skin {\n\u002F* Era 09 time bar skin: a glossy aqua\u002Fgreen gel dock. *\u002F\nhtml[data-era-page=\"09\"] .timebar {\n  --tb-bg: #0a5068;\n  --tb-fg: #ffffff;\n  --tb-muted: #d8f3ff;\n  --tb-accent: #c8f590;\n  --tb-accent-fg: #173300;\n  --tb-notch: #4fb3d4;\n  --tb-btn-bg: linear-gradient(#2a7fa0 0%, #1a6f92 49%, #0f5f80 51%, #14688a 100%);\n  --tb-btn-border: 1px solid #0a4d63;\n  --tb-btn-radius: 999px;\n  --tb-font: 'Lucida Grande', 'Lucida Sans Unicode', 'Helvetica Neue', Arial, sans-serif;\n  --tb-radius: 14px;\n  --tb-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.5), 0 -2px 8px rgb(0 60 90 \u002F 0.3);\n  background:\n    linear-gradient(rgb(255 255 255 \u002F 0.14), rgb(255 255 255 \u002F 0.05) 50%, transparent 50%),\n    linear-gradient(#0b5874, #073f53);\n  border-top: 1px solid #8fdcf5;\n}\nhtml[data-era-page=\"09\"] .timebar__btn {\n  background: var(--tb-btn-bg);\n  text-shadow: 0 -1px 0 rgb(0 0 0 \u002F 0.35);\n}\nhtml[data-era-page=\"09\"] .timebar__notch {\n  background: linear-gradient(#11617f, #0a5068);\n}\nhtml[data-era-page=\"09\"] .timebar__notch[aria-current='page'] {\n  background: linear-gradient(#d8f7a8 0%, #a6e34b 49%, #8fd63a 51%, #b5ec6a 100%);\n  text-shadow: none;\n}\n\n}",[82,84,86],{"caption":50,"file":48,"html":83},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.gl__pill\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\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">relative\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 30\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 13\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\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\">bold\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 20\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'Lucida Grande'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'Helvetica Neue'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">Arial\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">sans-serif\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\">#fff\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  text-decoration\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">none\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  text-shadow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> -1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.3\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\">1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> solid\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #3f8a0a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">999\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  \u002F* The gloss: a hard stop halfway down a vertical gradient. *\u002F\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\">linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#b5ec6a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#8fd63a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 49\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#6cbf1d\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 51\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#8fd63a\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\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inset\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 255\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.7\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.25\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  cursor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">pointer\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\">.gl__pill:hover\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\">linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#c6f387\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#a0e04e\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 49\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#7dcc2c\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 51\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#a0e04e\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>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.gl__pill:active\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inset\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 4\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.3\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":53,"file":48,"html":85},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.gl__logo\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  margin\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:#6CB6FF\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">relative\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\">bold\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 54\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'Helvetica Neue'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">Helvetica\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">Arial\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">sans-serif\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  letter-spacing\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-3\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">64\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\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\">.gl__word\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\">block\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\">linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#a6e34b\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#6cbf1d\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 48\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#4e9d0c\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 52\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#74c728\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\">  -webkit-background-clip\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">text\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background-clip\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">text\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\">transparent\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:#768390\">\u002F* Fallback: a flipped copy fading out underneath (\"wet floor\"). *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.gl__mirror\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  position\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">absolute\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  left\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:#6CB6FF\">  top\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\">  margin-top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-6\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">scaleY\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-1\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\">#6cbf1d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  opacity\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.35\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  mask-image\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">to\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#000\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transparent\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 55\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  -webkit-mask-image\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">to\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> top\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#000\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transparent\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 55\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">none\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:#768390\">\u002F* Where the proprietary property exists, let the browser draw the reflection. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">@supports\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-webkit-box-reflect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">below\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  .gl__word\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">    -webkit-box-reflect\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">below\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> -14\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> linear-gradient\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">transparent\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 55\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">rgb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.35\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\">  .gl__mirror\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\">none\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:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":57,"file":55,"html":87},"\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\"> onSubmit\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">e\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">:\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\"> Event\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  e.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">preventDefault\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\"> (busy) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">return\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> text\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> input\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.value.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">trim\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">||\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> ideas[Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">floor\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:#ADBAC7\"> ideas.\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  busy \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  form\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">add\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'is-busy'\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\"> (status) status.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'Saving…'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  \u002F\u002F In 2006 this was new XMLHttpRequest() and a callback; here we only pretend.\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\">setTimeout\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\">    const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> li\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> document.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'li'\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\"> b\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> document.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'b'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    b.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> text\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> meta\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> document.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">createElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'span'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    meta.className \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'gl__meta'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    meta.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'by you, just now'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    li.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">append\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(b, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">' '\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, meta)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    li.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">add\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'is-new'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#768390\">\u002F\u002F the Yellow Fade Technique\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    list\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">prepend\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(li)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">    if\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (num) num.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(list\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.children.\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">length\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    form\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">remove\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'is-busy'\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\"> (status) status.textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> 'Saved!'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    input\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.value \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\"> ''\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    busy \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> false\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  }, reduced \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">?\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 300\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> :\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1100\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>",1791223398958]