[{"data":1,"prerenderedAt":90},["ShallowReactive",2],{"room:06-y2k":3},{"path":4,"meta":5,"html":78,"css":79,"skinCss":80,"snippets":81},"06-y2k",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":36,"thenVsNow":41,"snippets":42,"sources":59,"recreated":75},"06","Y2K chrome & futurism","1998–2003","At the turn of the millennium the web went shiny: brushed-chrome logos, blobby gel buttons, translucent candy-coloured plastic, lens flares, bubbles and an \"e-\" in front of everything.",{"screens":11,"connection":12,"browsers":13},"1024×768 CRTs in \"millions of colours\"; candy-coloured all-in-one computers on desks","56k dial-up and the first cable and DSL broadband at home","Internet Explorer 5 and Netscape 4.7, with Flash 4 for anything that moved",[15,18,21,24,27,30,33],{"id":16,"label":17},"chrome","A beveled chrome logo with a lens flare",{"id":19,"label":20},"e-everything","e-Everything copywriting",{"id":22,"label":23},"blobs","Organic blob buttons that glow on hover",{"id":25,"label":26},"candy","Translucent candy plastic in fruit flavours",{"id":28,"label":29},"countdown","A millennium countdown clock",{"id":31,"label":32},"scan","A Y2K compliance check",{"id":34,"label":35},"footer","\"Y2K ready\" and \"enhanced for 4.0 browsers\" badges",[37,38,39,40],"Chrome and gel effects rendered in Photoshop and Bryce, then exported as GIF and JPEG slices","Image maps and JavaScript rollovers for the blob buttons","DHTML countdown clocks with setTimeout and document.all \u002F document.layers","Recreated here with SVG lighting filters, CSS gradients, border-radius blobs, backdrop-filter and :has()","Flat design swept the gloss away around 2013, but SVG filters, backdrop-filter and gradients now draw the same chrome and glass without a single image.",[43,48,51,55],{"file":44,"lang":45,"caption":46,"region":47},"demo.html","html","Chrome from an SVG gradient and specular lighting filter","chrome-filter",{"file":44,"lang":45,"caption":49,"region":50},"Blob buttons are just links","blob-nav",{"file":52,"lang":53,"caption":54,"region":25},"era.css","css","Picking a candy colour with :has(), no script needed",{"file":56,"lang":57,"caption":58,"region":28},"era.client.ts","typescript","Counting down to 2000 from a pretend 1999",[60,63,66,69,72],{"label":61,"url":62},"Year 2000 problem (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FYear_2000_problem",{"label":64,"url":65},"Y2K aesthetic (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FY2K_aesthetic",{"label":67,"url":68},"feSpecularLighting (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSVG\u002FElement\u002FfeSpecularLighting",{"label":70,"url":71},"backdrop-filter (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fbackdrop-filter",{"label":73,"url":74},"Web Design Museum","https:\u002F\u002Fwww.webdesignmuseum.org\u002F",[76,77],"Chrome, gel and glass were pre-rendered images in 1999; here they are live SVG filters and CSS gradients.","The countdown pretends it is November 1999 and the compliance scan checks nothing.","\u003Cdiv class=\"ob\" data-candy=\"bondi\">\n  \u003Csvg class=\"ob-defs\" width=\"0\" height=\"0\" aria-hidden=\"true\" focusable=\"false\">\n    \u003Cdefs>\n      \u003ClinearGradient id=\"ob-chrome\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n        \u003Cstop offset=\"0\" stop-color=\"#ffffff\"\u002F>\n        \u003Cstop offset=\".38\" stop-color=\"#b9c6d2\"\u002F>\n        \u003Cstop offset=\".5\" stop-color=\"#3d4a57\"\u002F>\n        \u003Cstop offset=\".56\" stop-color=\"#8a98a6\"\u002F>\n        \u003Cstop offset=\".8\" stop-color=\"#eef3f7\"\u002F>\n        \u003Cstop offset=\"1\" stop-color=\"#8896a4\"\u002F>\n      \u003C\u002FlinearGradient>\n      \u003Cfilter id=\"ob-bevel\" x=\"-10%\" y=\"-20%\" width=\"120%\" height=\"150%\">\n        \u003CfeGaussianBlur in=\"SourceAlpha\" stdDeviation=\"1.6\" result=\"blur\"\u002F>\n        \u003CfeSpecularLighting in=\"blur\" surfaceScale=\"4\" specularConstant=\"1.1\" specularExponent=\"22\" lighting-color=\"#ffffff\" result=\"spec\">\n          \u003CfeDistantLight azimuth=\"235\" elevation=\"42\"\u002F>\n        \u003C\u002FfeSpecularLighting>\n        \u003CfeComposite in=\"spec\" in2=\"SourceAlpha\" operator=\"in\" result=\"specIn\"\u002F>\n        \u003CfeComposite in=\"SourceGraphic\" in2=\"specIn\" operator=\"arithmetic\" k1=\"0\" k2=\"1\" k3=\"0.85\" k4=\"0\"\u002F>\n        \u003CfeDropShadow dx=\"0\" dy=\"3\" stdDeviation=\"2\" flood-color=\"#001a33\" flood-opacity=\".45\"\u002F>\n      \u003C\u002Ffilter>\n      \u003CradialGradient id=\"ob-flare\" cx=\".5\" cy=\".5\" r=\".5\">\n        \u003Cstop offset=\"0\" stop-color=\"#ffffff\"\u002F>\n        \u003Cstop offset=\".2\" stop-color=\"#ffffff\" stop-opacity=\".8\"\u002F>\n        \u003Cstop offset=\"1\" stop-color=\"#ffffff\" stop-opacity=\"0\"\u002F>\n      \u003C\u002FradialGradient>\n    \u003C\u002Fdefs>\n  \u003C\u002Fsvg>\n\n  \u003Cdiv class=\"ob-bubbles\" aria-hidden=\"true\">\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003Ci>\u003C\u002Fi>\u003C\u002Fdiv>\n\n  \u003Cheader class=\"ob-head\">\n    \u003Csvg class=\"ob-logo\" viewBox=\"0 0 620 130\" role=\"img\" aria-labelledby=\"ob-logo-t\" data-trait=\"chrome\">\n      \u003Ctitle id=\"ob-logo-t\">Orbitron Labs\u003C\u002Ftitle>\n      \u003Cg aria-hidden=\"true\">\n        \u003Cellipse cx=\"66\" cy=\"66\" rx=\"56\" ry=\"22\" fill=\"none\" stroke=\"url(#ob-chrome)\" stroke-width=\"7\" transform=\"rotate(-24 66 66)\" filter=\"url(#ob-bevel)\"\u002F>\n        \u003Ccircle cx=\"66\" cy=\"66\" r=\"30\" fill=\"url(#ob-chrome)\" filter=\"url(#ob-bevel)\"\u002F>\n        \u003Ccircle cx=\"56\" cy=\"54\" r=\"9\" fill=\"#fff\" opacity=\".85\"\u002F>\n        \u003Ctext x=\"132\" y=\"74\" font-family=\"'Arial Black', Impact, 'DejaVu Sans', sans-serif\" font-weight=\"900\" font-style=\"italic\" font-size=\"66\" letter-spacing=\"-2\" fill=\"url(#ob-chrome)\" stroke=\"#2b3947\" stroke-width=\"1.2\" filter=\"url(#ob-bevel)\">ORBITRON\u003C\u002Ftext>\n        \u003Ctext x=\"420\" y=\"112\" font-family=\"Verdana, 'DejaVu Sans', sans-serif\" font-weight=\"bold\" font-style=\"italic\" font-size=\"22\" letter-spacing=\"10\" class=\"ob-logo__labs\">LABS\u003C\u002Ftext>\n        \u003Cpath d=\"M134 92 C 260 120, 380 70, 600 84\" fill=\"none\" class=\"ob-logo__swoosh\" stroke-width=\"5\" stroke-linecap=\"round\"\u002F>\n        \u003Ccircle class=\"ob-flare\" cx=\"378\" cy=\"26\" r=\"26\" fill=\"url(#ob-flare)\"\u002F>\n        \u003Cpath class=\"ob-flare\" d=\"M378 4v44M356 26h44\" stroke=\"#fff\" stroke-width=\"1.5\"\u002F>\n      \u003C\u002Fg>\n    \u003C\u002Fsvg>\n    \u003Cp class=\"ob-tag\" data-trait=\"e-everything\">\u003Cspan>e-Solutions\u003C\u002Fspan> for the \u003Cb>e-Generation\u003C\u002Fb> · \u003Cspan>e-Commerce\u003C\u002Fspan> · \u003Cspan>e-Business\u003C\u002Fspan> · \u003Cspan>e-Everything\u003C\u002Fspan>\u003C\u002Fp>\n\n    \u003Cnav class=\"ob-nav\" aria-label=\"Orbitron Labs\" data-trait=\"blobs\">\n      \u003Ca href=\"#ob-products\" class=\"ob-blob ob-blob--1\">\u003Cspan>Products\u003C\u002Fspan>\u003C\u002Fa>\n      \u003Ca href=\"#ob-check\" class=\"ob-blob ob-blob--2\">\u003Cspan>Y2K Check\u003C\u002Fspan>\u003C\u002Fa>\n      \u003Ca href=\"#ob-countdown\" class=\"ob-blob ob-blob--3\">\u003Cspan>Countdown\u003C\u002Fspan>\u003C\u002Fa>\n      \u003Ca href=\"#ob-candy\" class=\"ob-blob ob-blob--4\">\u003Cspan>e-Store\u003C\u002Fspan>\u003C\u002Fa>\n    \u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003Cdiv class=\"ob-grid\">\n    \u003Csection class=\"ob-panel ob-panel--count\" id=\"ob-countdown\" aria-labelledby=\"ob-h-count\" data-trait=\"countdown\">\n      \u003Ch2 id=\"ob-h-count\" class=\"ob-h\">Millennium Countdown\u003C\u002Fh2>\n      \u003Cp class=\"ob-sub\">Time remaining until \u003Cb>January 1, 2000 · 00:00:00\u003C\u002Fb>\u003C\u002Fp>\n      \u003Cdiv class=\"ob-lcd\" role=\"timer\" aria-live=\"off\">\n        \u003Cdiv>\u003Cb class=\"ob-lcd__d\">48\u003C\u002Fb>\u003Csmall>days\u003C\u002Fsmall>\u003C\u002Fdiv>\n        \u003Cdiv>\u003Cb class=\"ob-lcd__h\">07\u003C\u002Fb>\u003Csmall>hrs\u003C\u002Fsmall>\u003C\u002Fdiv>\n        \u003Cdiv>\u003Cb class=\"ob-lcd__m\">22\u003C\u002Fb>\u003Csmall>min\u003C\u002Fsmall>\u003C\u002Fdiv>\n        \u003Cdiv>\u003Cb class=\"ob-lcd__s\">16\u003C\u002Fb>\u003Csmall>sec\u003C\u002Fsmall>\u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n      \u003Cp class=\"ob-fine\">Clock synchronised to Orbitron™ Atomic Time Server. Party like it's 1999.\u003C\u002Fp>\n      \u003Ch3 class=\"ob-h3\">Your e-Millennium checklist\u003C\u002Fh3>\n      \u003Cul class=\"ob-checklist\">\n        \u003Cli>\u003Clabel>\u003Cinput type=\"checkbox\"> Bottled water & batteries\u003C\u002Flabel>\u003C\u002Fli>\n        \u003Cli>\u003Clabel>\u003Cinput type=\"checkbox\"> Print out bank statements\u003C\u002Flabel>\u003C\u002Fli>\n        \u003Cli>\u003Clabel>\u003Cinput type=\"checkbox\"> Silver party outfit\u003C\u002Flabel>\u003C\u002Fli>\n        \u003Cli>\u003Clabel>\u003Cinput type=\"checkbox\"> Burn a “2000” mix CD\u003C\u002Flabel>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fsection>\n\n    \u003Csection class=\"ob-panel ob-panel--check\" id=\"ob-check\" aria-labelledby=\"ob-h-check\">\n      \u003Ch2 id=\"ob-h-check\" class=\"ob-h\">e-Y2K Compliance Scan\u003C\u002Fh2>\n      \u003Cp>Is \u003Ci>your\u003C\u002Fi> PC ready for the year 2000? Our \u003Cb>CyberScan 2K\u003C\u002Fb> engine checks your system in seconds.\u003C\u002Fp>\n      \u003Cbutton type=\"button\" class=\"ob-gel\" id=\"ob-scan\" data-trait=\"scan\">Start Scan\u003C\u002Fbutton>\n      \u003Cdiv class=\"ob-meter\" aria-hidden=\"true\">\u003Cspan class=\"ob-meter__fill\">\u003C\u002Fspan>\u003C\u002Fdiv>\n      \u003Cul class=\"ob-log\" aria-live=\"polite\" aria-label=\"Scan log\">\n        \u003Cli>Ready. Click \u003Cb>Start Scan\u003C\u002Fb> to begin.\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fsection>\n\n    \u003Csection class=\"ob-panel ob-panel--candy\" id=\"ob-candy\" aria-labelledby=\"ob-h-candy\" data-trait=\"candy\">\n      \u003Ch2 id=\"ob-h-candy\" class=\"ob-h\">Orbitron e-Pod 2000\u003C\u002Fh2>\n      \u003Cdiv class=\"ob-pod\">\n        \u003Csvg class=\"ob-pod__art\" viewBox=\"0 0 220 190\" aria-hidden=\"true\">\n          \u003Cdefs>\n            \u003CradialGradient id=\"ob-pod-shell\" cx=\".35\" cy=\".25\" r=\".9\">\n              \u003Cstop offset=\"0\" stop-color=\"#fff\" stop-opacity=\".9\"\u002F>\n              \u003Cstop offset=\".25\" class=\"ob-stop-a\"\u002F>\n              \u003Cstop offset=\"1\" class=\"ob-stop-b\"\u002F>\n            \u003C\u002FradialGradient>\n          \u003C\u002Fdefs>\n          \u003Cpath d=\"M30 20 Q110 -6 190 20 Q206 90 186 150 Q110 176 34 150 Q14 90 30 20Z\" fill=\"url(#ob-pod-shell)\" opacity=\".88\"\u002F>\n          \u003Crect x=\"50\" y=\"34\" width=\"120\" height=\"86\" rx=\"10\" fill=\"#0b1e2c\" stroke=\"#d7e2ec\" stroke-width=\"5\"\u002F>\n          \u003Cpath d=\"M58 42 h70 l-24 70 h-46z\" fill=\"#fff\" opacity=\".12\"\u002F>\n          \u003Ctext x=\"110\" y=\"84\" text-anchor=\"middle\" font-family=\"Verdana, sans-serif\" font-size=\"14\" font-style=\"italic\" font-weight=\"bold\" fill=\"#7ff\">e-Pod\u003C\u002Ftext>\n          \u003Cellipse cx=\"110\" cy=\"140\" rx=\"26\" ry=\"6\" fill=\"#fff\" opacity=\".35\"\u002F>\n          \u003Cpath d=\"M60 156 Q110 196 160 156 L150 186 L70 186Z\" class=\"ob-pod__base\" opacity=\".8\"\u002F>\n          \u003Cpath d=\"M44 32 Q70 22 90 24\" stroke=\"#fff\" stroke-width=\"6\" stroke-linecap=\"round\" fill=\"none\" opacity=\".7\"\u002F>\n        \u003C\u002Fsvg>\n        \u003Cdiv>\n          \u003Cp>Translucent. Friendly. \u003Cb>Internet-ready.\u003C\u002Fb> Pick your flavour:\u003C\u002Fp>\n          \u003Cfieldset class=\"ob-swatches\">\n            \u003Clegend class=\"ob-sr\">Candy colour\u003C\u002Flegend>\n            \u003Clabel class=\"ob-sw ob-sw--bondi\" title=\"Bondi Blue\">\u003Cinput type=\"radio\" name=\"ob-candy\" value=\"bondi\" checked>\u003Cspan>Bondi Blue\u003C\u002Fspan>\u003C\u002Flabel>\n            \u003Clabel class=\"ob-sw ob-sw--tangerine\" title=\"Tangerine\">\u003Cinput type=\"radio\" name=\"ob-candy\" value=\"tangerine\">\u003Cspan>Tangerine\u003C\u002Fspan>\u003C\u002Flabel>\n            \u003Clabel class=\"ob-sw ob-sw--grape\" title=\"Grape\">\u003Cinput type=\"radio\" name=\"ob-candy\" value=\"grape\">\u003Cspan>Grape\u003C\u002Fspan>\u003C\u002Flabel>\n            \u003Clabel class=\"ob-sw ob-sw--lime\" title=\"Lime\">\u003Cinput type=\"radio\" name=\"ob-candy\" value=\"lime\">\u003Cspan>Lime\u003C\u002Fspan>\u003C\u002Flabel>\n            \u003Clabel class=\"ob-sw ob-sw--strawberry\" title=\"Strawberry\">\u003Cinput type=\"radio\" name=\"ob-candy\" value=\"strawberry\">\u003Cspan>Strawberry\u003C\u002Fspan>\u003C\u002Flabel>\n          \u003C\u002Ffieldset>\n          \u003Cp class=\"ob-price\">Only \u003Cb>$1,299\u003C\u002Fb> · 400 MHz · 64 MB · 56K e-Modem\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fsection>\n\n    \u003Csection class=\"ob-panel ob-panel--products\" id=\"ob-products\" aria-labelledby=\"ob-h-prod\">\n      \u003Ch2 id=\"ob-h-prod\" class=\"ob-h\">e-Products\u003C\u002Fh2>\n      \u003Cul class=\"ob-prod\">\n        \u003Cli>\u003Cb>OrbitMail™\u003C\u002Fb> e-mail for the whole family, with 3D smileys.\u003C\u002Fli>\n        \u003Cli>\u003Cb>CyberShop 2000\u003C\u002Fb> put your store online in a weekend.\u003C\u002Fli>\n        \u003Cli>\u003Cb>NetPortal Pro\u003C\u002Fb> push channels, straight to your desktop.\u003C\u002Fli>\n        \u003Cli>\u003Cb>i-Vault\u003C\u002Fb> back up the millennium on Zip disks.\u003C\u002Fli>\n      \u003C\u002Ful>\n      \u003Cp class=\"ob-fine\">Ask about our e-Partner program. Venture capital welcome.\u003C\u002Fp>\n    \u003C\u002Fsection>\n  \u003C\u002Fdiv>\n\n  \u003Cfooter class=\"ob-foot\" data-trait=\"footer\">\n    \u003Cp>\u003Cspan class=\"ob-pill\">Y2K READY\u003C\u002Fspan>\u003Cspan class=\"ob-pill\">Enhanced for 4.0 browsers\u003C\u002Fspan>\u003Cspan class=\"ob-pill\">1024×768 · Millions of colours\u003C\u002Fspan>\u003C\u002Fp>\n    \u003Cp>© 1999 Orbitron Labs Interactive, Inc. All rights reserved. · Orbitron, e-Pod and CyberScan are trademarks of Orbitron Labs. · \u003Ca href=\"#ob-countdown\">Back to top\u003C\u002Fa>\u003C\u002Fp>\n  \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n","@layer era, shell, skin;\n@layer era {\n\u002F* Era 06: Y2K chrome, candy plastic and futurism. *\u002F\n[data-era=\"06\"] {\n  --candy: #0095b6;\n  --candy-lite: #7fdcef;\n  --candy-deep: #005a75;\n  &:has(input[value='tangerine']:checked) { --candy: #ff8a00; --candy-lite: #ffd08a; --candy-deep: #b34d00; }\n  &:has(input[value='grape']:checked) { --candy: #8a3fbf; --candy-lite: #d9b3ff; --candy-deep: #4b1a73; }\n  &:has(input[value='lime']:checked) { --candy: #5fc21a; --candy-lite: #c9f59a; --candy-deep: #2e6b05; }\n  &:has(input[value='strawberry']:checked) { --candy: #e0306a; --candy-lite: #ffb3cb; --candy-deep: #8a0f38; }\n  --ink: #0d2236;\n  --ob-sans: 'Trebuchet MS', 'Verdana', 'DejaVu Sans', sans-serif;\n  --ob-tech: 'Eurostile', 'Microgramma', 'Bank Gothic', 'Arial Black', 'DejaVu Sans', sans-serif;\n  background:\n    radial-gradient(ellipse 60% 40% at 85% 0%, color-mix(in srgb, var(--candy-lite) 70%, transparent), transparent 70%),\n    radial-gradient(ellipse 80% 50% at 0% 100%, #c8f1ff, transparent 70%),\n    linear-gradient(170deg, #f4fbff 0%, #d4ecf7 45%, #a9d3e8 100%);\n  color: var(--ink);\n  font: 14px\u002F1.5 var(--ob-sans);\n  transition: background 0.6s;\n  position: relative;\n  overflow: hidden;\n\n  .ob {\n    position: relative;\n    max-width: 1040px;\n    margin: 0 auto;\n    padding: 20px 16px 32px;\n    box-sizing: border-box;\n  }\n  .ob-defs { position: absolute; width: 0; height: 0; }\n  .ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n\n  \u002F* Background swooshes *\u002F\n  .ob::before, .ob::after {\n    content: '';\n    position: absolute;\n    left: -20%; right: -20%;\n    height: 240px;\n    border-radius: 50%;\n    border-top: 18px solid rgb(255 255 255 \u002F 0.5);\n    pointer-events: none;\n  }\n  .ob::before { top: 150px; transform: rotate(-4deg); }\n  .ob::after { top: 520px; transform: rotate(5deg); border-top-width: 6px; border-top-color: color-mix(in srgb, var(--candy) 35%, transparent); }\n\n  \u002F* Bubbles *\u002F\n  .ob-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }\n  .ob-bubbles i {\n    position: absolute;\n    bottom: -60px;\n    width: 28px; aspect-ratio: 1;\n    border-radius: 50%;\n    background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgb(255 255 255 \u002F 0.15) 30%, color-mix(in srgb, var(--candy-lite) 40%, transparent) 70%, rgb(255 255 255 \u002F 0.6) 100%);\n    box-shadow: inset 0 0 6px rgb(255 255 255 \u002F 0.8);\n    animation: e06-rise 14s linear infinite;\n    opacity: 0.8;\n  }\n  .ob-bubbles i:nth-child(1) { left: 6%; animation-delay: -2s; }\n  .ob-bubbles i:nth-child(2) { left: 18%; width: 16px; animation-delay: -7s; animation-duration: 11s; }\n  .ob-bubbles i:nth-child(3) { left: 33%; width: 40px; animation-delay: -4s; animation-duration: 18s; }\n  .ob-bubbles i:nth-child(4) { left: 52%; width: 12px; animation-delay: -10s; }\n  .ob-bubbles i:nth-child(5) { left: 68%; width: 34px; animation-delay: -1s; animation-duration: 16s; }\n  .ob-bubbles i:nth-child(6) { left: 80%; width: 18px; animation-delay: -6s; animation-duration: 12s; }\n  .ob-bubbles i:nth-child(7) { left: 91%; width: 26px; animation-delay: -12s; }\n  .ob-bubbles i:nth-child(8) { left: 44%; width: 20px; animation-delay: -9s; animation-duration: 20s; }\n\n  \u002F* ---------- Header ---------- *\u002F\n  .ob-head { position: relative; z-index: 1; text-align: center; }\n  .ob-logo { width: min(620px, 100%); height: auto; display: block; margin: 0 auto; overflow: visible; }\n  .ob-logo__labs { fill: var(--candy-deep); }\n  .ob-logo__swoosh { stroke: var(--candy); opacity: 0.85; }\n  .ob-flare { transform-origin: 378px 26px; animation: e06-flare 5s ease-in-out infinite; }\n  .ob-tag {\n    margin: 4px 0 18px;\n    font: italic bold 13px\u002F1.4 var(--ob-sans);\n    letter-spacing: 0.06em;\n    color: #3b5670;\n  }\n  .ob-tag span { color: var(--candy-deep); }\n\n  \u002F* ---------- Blob buttons ---------- *\u002F\n  .ob-nav {\n    display: flex; flex-wrap: wrap; justify-content: center;\n    gap: 14px 18px;\n    margin-bottom: 26px;\n  }\n  .ob-blob {\n    position: relative;\n    display: grid; place-items: center;\n    min-width: 128px; height: 58px;\n    padding: 0 22px;\n    box-sizing: border-box;\n    text-decoration: none;\n    color: #fff;\n    font: italic 900 15px\u002F1 var(--ob-tech);\n    letter-spacing: 0.02em;\n    text-shadow: 0 1px 2px rgb(0 0 0 \u002F 0.45);\n    background:\n      radial-gradient(ellipse 70% 40% at 50% 18%, rgb(255 255 255 \u002F 0.85), rgb(255 255 255 \u002F 0) 70%),\n      radial-gradient(ellipse at 50% 120%, var(--candy-lite), var(--candy) 55%, var(--candy-deep));\n    border-radius: 58% 42% 55% 45% \u002F 62% 48% 52% 38%;\n    box-shadow: inset 0 -6px 10px rgb(0 0 0 \u002F 0.25), inset 0 2px 0 rgb(255 255 255 \u002F 0.6), 0 6px 14px rgb(0 40 80 \u002F 0.3);\n    transition: transform 0.25s cubic-bezier(.3,1.6,.5,1), box-shadow 0.25s, border-radius 0.6s;\n  }\n  .ob-blob--2 { border-radius: 45% 55% 40% 60% \u002F 55% 40% 60% 45%; }\n  .ob-blob--3 { border-radius: 60% 40% 48% 52% \u002F 40% 60% 40% 60%; }\n  .ob-blob--4 { border-radius: 42% 58% 62% 38% \u002F 58% 42% 58% 42%; }\n  .ob-blob:hover, .ob-blob:focus-visible {\n    transform: scale(1.08) rotate(-2deg);\n    border-radius: 50% 50% 45% 55% \u002F 45% 55% 45% 55%;\n    box-shadow: inset 0 -6px 10px rgb(0 0 0 \u002F 0.2), inset 0 2px 0 rgb(255 255 255 \u002F 0.7),\n      0 0 0 3px #fff, 0 0 24px 6px color-mix(in srgb, var(--candy) 70%, #fff);\n    outline: none;\n  }\n  .ob-blob:active { transform: scale(0.96); }\n\n  \u002F* ---------- Translucent panels ---------- *\u002F\n  .ob-grid {\n    position: relative;\n    display: grid;\n    grid-template-columns: 1fr;\n    z-index: 1;\n    gap: 22px;\n  }\n  .ob-panel {\n    position: relative;\n    padding: 18px 22px 20px;\n    border-radius: 26px 26px 26px 6px;\n    background: linear-gradient(160deg, rgb(255 255 255 \u002F 0.78), rgb(255 255 255 \u002F 0.42));\n    border: 1px solid rgb(255 255 255 \u002F 0.9);\n    box-shadow: 0 10px 30px rgb(0 50 90 \u002F 0.18), inset 0 1px 0 #fff, inset 0 -3px 0 color-mix(in srgb, var(--candy) 30%, transparent);\n    backdrop-filter: blur(8px) saturate(1.3);\n    overflow: hidden;\n  }\n  .ob-panel::before {\n    content: '';\n    position: absolute; left: 0; right: 0; top: 0; height: 6px;\n    background: linear-gradient(90deg, var(--candy-deep), var(--candy), var(--candy-lite));\n  }\n  .ob-h {\n    margin: 0 0 8px;\n    font: italic 900 21px\u002F1.1 var(--ob-tech);\n    letter-spacing: -0.01em;\n    color: transparent;\n    background: linear-gradient(180deg, #5d6f80 0%, #1d2b38 48%, #0b1824 52%, #6f8396 100%);\n    -webkit-background-clip: text;\n    background-clip: text;\n    filter: drop-shadow(0 1px 0 #fff);\n  }\n  .ob-sub, .ob-fine { margin: 0 0 10px; color: #3b5670; }\n  .ob-fine { font-size: 12px; font-style: italic; margin: 10px 0 0; }\n\n  \u002F* LCD countdown *\u002F\n  .ob-lcd {\n    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;\n    padding: 12px;\n    border-radius: 16px;\n    background: linear-gradient(180deg, #08202e, #0f3446);\n    box-shadow: inset 0 3px 10px rgb(0 0 0 \u002F 0.6), 0 1px 0 #fff;\n  }\n  .ob-lcd div { display: grid; text-align: center; }\n  .ob-lcd b {\n    font: bold 34px\u002F1 'Courier New', 'DejaVu Sans Mono', monospace;\n    color: #8ff8ff;\n    text-shadow: 0 0 8px #3be8ff;\n    font-variant-numeric: tabular-nums;\n  }\n  .ob-lcd small { color: #6fb6c8; font: bold 10px\u002F1.6 var(--ob-sans); text-transform: uppercase; letter-spacing: 0.15em; }\n  .ob-lcd.is-done b { color: #ffe680; text-shadow: 0 0 10px #ffb700; }\n\n  .ob-h3 { margin: 14px 0 6px; font: italic bold 14px\u002F1.2 var(--ob-sans); color: var(--candy-deep); }\n  .ob-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 12px; font-size: 13px; }\n  .ob-checklist input { accent-color: var(--candy); width: 16px; height: 16px; vertical-align: -3px; margin: 0 6px 0 0; }\n  .ob-checklist label:has(:checked) { text-decoration: line-through; color: #3b5670; }\n\n  \u002F* Gel button and scan *\u002F\n  .ob-gel {\n    font: italic 900 15px\u002F1 var(--ob-tech);\n    color: #fff;\n    text-shadow: 0 1px 2px rgb(0 0 0 \u002F 0.4);\n    padding: 12px 30px;\n    border: 1px solid var(--candy-deep);\n    border-radius: 999px;\n    cursor: pointer;\n    background:\n      linear-gradient(180deg, rgb(255 255 255 \u002F 0.75) 0, rgb(255 255 255 \u002F 0.15) 48%, rgb(255 255 255 \u002F 0) 50%),\n      linear-gradient(180deg, var(--candy), var(--candy-deep));\n    box-shadow: 0 4px 10px rgb(0 40 80 \u002F 0.3), inset 0 -3px 6px rgb(255 255 255 \u002F 0.35);\n    transition: box-shadow 0.2s, transform 0.2s;\n  }\n  .ob-gel:hover, .ob-gel:focus-visible {\n    box-shadow: 0 0 0 3px #fff, 0 0 20px 4px color-mix(in srgb, var(--candy) 70%, #fff);\n    outline: none;\n  }\n  .ob-gel:disabled { opacity: 0.6; cursor: progress; }\n  .ob-meter {\n    height: 14px; margin: 14px 0 10px;\n    border-radius: 999px;\n    background: rgb(0 30 60 \u002F 0.15);\n    box-shadow: inset 0 2px 4px rgb(0 0 0 \u002F 0.25);\n    overflow: hidden;\n  }\n  .ob-meter__fill {\n    display: block; height: 100%; width: var(--p, 0%);\n    border-radius: inherit;\n    background:\n      repeating-linear-gradient(-45deg, rgb(255 255 255 \u002F 0.35) 0 8px, transparent 8px 16px),\n      linear-gradient(180deg, var(--candy-lite), var(--candy));\n    transition: width 0.3s;\n  }\n  .ob-log {\n    list-style: none; margin: 0; padding: 8px 10px;\n    min-height: 7.5em;\n    border-radius: 10px;\n    background: rgb(255 255 255 \u002F 0.55);\n    font: 12px\u002F1.5 'Courier New', 'DejaVu Sans Mono', monospace;\n  }\n  .ob-log .ok { color: #13703a; font-weight: bold; }\n  .ob-log .warn { color: #a3440a; font-weight: bold; }\n\n  \u002F* Candy pod *\u002F\n  .ob-pod { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }\n  .ob-pod__art { width: 150px; flex: none; filter: drop-shadow(0 8px 10px rgb(0 40 80 \u002F 0.25)); }\n  .ob-pod > div { flex: 1 1 180px; }\n  .ob-pod p { margin: 0 0 8px; }\n  .ob-stop-a { stop-color: var(--candy-lite); transition: stop-color 0.5s; }\n  .ob-stop-b { stop-color: var(--candy); transition: stop-color 0.5s; }\n  .ob-pod__base { fill: var(--candy); }\n  .ob-swatches { border: 0; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }\n  .ob-sw { position: relative; cursor: pointer; }\n  .ob-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }\n  .ob-sw span {\n    display: block;\n    width: 34px; height: 34px;\n    border-radius: 50%;\n    color: transparent; overflow: hidden; white-space: nowrap; font-size: 0;\n    background: radial-gradient(circle at 35% 30%, #fff 0 10%, var(--sw) 55%, color-mix(in srgb, var(--sw) 60%, #000));\n    box-shadow: inset 0 -3px 5px rgb(0 0 0 \u002F 0.25), 0 3px 6px rgb(0 40 80 \u002F 0.3);\n    transition: transform 0.2s;\n  }\n  .ob-sw--bondi { --sw: #0095b6; }\n  .ob-sw--tangerine { --sw: #ff8a00; }\n  .ob-sw--grape { --sw: #8a3fbf; }\n  .ob-sw--lime { --sw: #5fc21a; }\n  .ob-sw--strawberry { --sw: #e0306a; }\n  .ob-sw:hover span { transform: scale(1.12); }\n  .ob-sw input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink), 0 0 14px var(--sw); }\n  .ob-sw input:focus-visible + span { outline: 3px dashed var(--ink); outline-offset: 5px; }\n  .ob-price { font-size: 12px; color: #3b5670; }\n\n  .ob-prod { margin: 0; padding: 0; list-style: none; }\n  .ob-prod li {\n    padding: 6px 0 6px 26px;\n    position: relative;\n    border-bottom: 1px dashed rgb(13 34 54 \u002F 0.2);\n  }\n  .ob-prod li::before {\n    content: '';\n    position: absolute; left: 0; top: 9px;\n    width: 14px; height: 14px; border-radius: 50%;\n    background: radial-gradient(circle at 35% 30%, #fff 0 15%, var(--candy) 60%, var(--candy-deep));\n  }\n  .ob-prod b { color: var(--candy-deep); }\n\n  \u002F* Footer *\u002F\n  .ob-foot { position: relative; z-index: 1; text-align: center; margin-top: 28px; font-size: 12px; color: #2c4660; }\n  .ob-foot p { margin: 6px 0; }\n  .ob-foot a { color: var(--candy-deep); font-weight: bold; }\n  .ob-pill {\n    display: inline-block; margin: 3px 4px;\n    padding: 3px 12px;\n    border-radius: 999px;\n    font: italic bold 11px\u002F1.4 var(--ob-sans);\n    color: #fff;\n    background: linear-gradient(180deg, #8b9aa8, #3b4a59 50%, #22303d 51%, #5d6e7e);\n    box-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.6);\n  }\n\n  :focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ob-bubbles i, .ob-flare { animation: none; }\n  }\n  @media (min-width: 720px) {\n    .ob-grid { grid-template-columns: 1fr 1fr; }\n  }\n  @media (max-width: 520px) {\n    .ob-lcd b { font-size: 24px; }\n    .ob-blob { min-width: 120px; height: 52px; font-size: 14px; }\n  }\n}\n\n@keyframes e06-rise {\n  from { transform: translateY(0) translateX(0); }\n  50% { transform: translateY(-50vh) translateX(18px); }\n  to { transform: translateY(-110vh) translateX(-10px); }\n}\n@keyframes e06-flare {\n  0%, 100% { opacity: 0.4; transform: scale(0.6) rotate(0deg); }\n  50% { opacity: 1; transform: scale(1.1) rotate(45deg); }\n}\n\n}","@layer era, shell, skin;\n@layer skin {\n\u002F* Era 06 time bar skin: translucent aqua candy plastic. *\u002F\nhtml[data-era-page=\"06\"] .timebar {\n  --tb-bg: #0a5d78;\n  --tb-fg: #ffffff;\n  --tb-muted: #e3f6fc;\n  --tb-accent: #ffffff;\n  --tb-accent-fg: #064a60;\n  --tb-notch: #7fd6ec;\n  --tb-btn-bg: rgb(255 255 255 \u002F 0.16);\n  --tb-btn-border: 1px solid rgb(255 255 255 \u002F 0.55);\n  --tb-btn-radius: 999px;\n  --tb-font: 'Trebuchet MS', Verdana, 'DejaVu Sans', sans-serif;\n  --tb-radius: 22px;\n  --tb-shadow: inset 0 1px 0 rgb(255 255 255 \u002F 0.7), 0 -4px 18px rgb(0 80 110 \u002F 0.35);\n  background:\n    linear-gradient(180deg, rgb(255 255 255 \u002F 0.16) 0%, rgb(255 255 255 \u002F 0.05) 48%, rgb(255 255 255 \u002F 0) 50%),\n    linear-gradient(180deg, rgb(0 88 118 \u002F 0.94), rgb(4 58 78 \u002F 0.97));\n  backdrop-filter: blur(8px);\n}\nhtml[data-era-page=\"06\"] .timebar__years {\n  font-style: italic;\n}\nhtml[data-era-page=\"06\"] .timebar__notch {\n  background: radial-gradient(ellipse 60% 30% at 50% 12%, rgb(255 255 255 \u002F 0.55), transparent), #086a88;\n  color: #ffffff;\n  border-color: rgb(255 255 255 \u002F 0.7);\n}\nhtml[data-era-page=\"06\"] .timebar__notch[aria-current='page'] {\n  background: radial-gradient(circle at 35% 30%, #ffffff 0 30%, #dff6fd);\n  color: #064a60;\n}\n\n}",[82,84,86,88],{"caption":46,"file":44,"html":83},"\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:#FF938A;font-style:italic\">linearGradient\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"ob-chrome\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\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\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#ffffff\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".38\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#b9c6d2\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".5\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#3d4a57\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".56\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#8a98a6\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".8\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#eef3f7\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">stop\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> offset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stop-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#8896a4\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">linearGradient\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\">filter\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"ob-bevel\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"-10%\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"-20%\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"120%\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"150%\"\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\">feGaussianBlur\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> in\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"SourceAlpha\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stdDeviation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1.6\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> result\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"blur\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">feSpecularLighting\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> in\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"blur\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> surfaceScale\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"4\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> specularConstant\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1.1\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> specularExponent\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"22\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> lighting-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#ffffff\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> result\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"spec\"\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\">feDistantLight\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> azimuth\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"235\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> elevation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"42\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">feSpecularLighting\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\">feComposite\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> in\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"spec\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> in2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"SourceAlpha\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> operator\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"in\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> result\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"specIn\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">feComposite\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> in\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"SourceGraphic\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> in2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"specIn\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> operator\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"arithmetic\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> k1\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> k2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"1\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> k3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0.85\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> k4\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">feDropShadow\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> dx\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"0\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> dy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"3\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> stdDeviation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"2\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> flood-color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#001a33\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> flood-opacity\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\".45\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">filter\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":49,"file":44,"html":85},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">nav\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"ob-nav\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Orbitron Labs\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"blobs\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#ob-products\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"ob-blob ob-blob--1\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Products<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#ob-check\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"ob-blob ob-blob--2\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Y2K Check<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#ob-countdown\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"ob-blob ob-blob--3\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Countdown<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> href\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#ob-candy\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"ob-blob ob-blob--4\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>e-Store<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">nav\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":54,"file":52,"html":87},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--candy: \u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">#0095b6\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--candy-lite: \u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">#7fdcef\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">--candy-deep: \u003C\u002Fspan>\u003Cspan style=\"color:#FF938A;font-style:italic\">#005a75\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">&\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:has\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">input\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">[\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">value\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'tangerine'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:checked\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) { \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#ff8a00\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-lite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#ffd08a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-deep\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#b34d00\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">&\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:has\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">input\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">[\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">value\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'grape'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:checked\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) { \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#8a3fbf\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-lite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#d9b3ff\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-deep\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#4b1a73\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">&\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:has\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">input\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">[\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">value\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'lime'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:checked\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) { \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#5fc21a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-lite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#c9f59a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-deep\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#2e6b05\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">&\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:has\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">input\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">[\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">value\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'strawberry'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">:checked\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) { \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#e0306a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-lite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#ffb3cb\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--candy-deep\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#8a0f38\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">; }\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":58,"file":56,"html":89},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F\u002F The room pretends it is 1999: count down from a fixed point in November 1999,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F\u002F advancing with the real clock while the page is open.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> pretendStart\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Date.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">UTC\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">1999\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">10\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">14\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">16\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">37\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">44\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\"> opened\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Date.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">now\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\"> target\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Date.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">UTC\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">2000\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\">1\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\">0\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\"> lcd\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> root.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'.ob-lcd'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> cells\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> [\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'d'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'h'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'m'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'s'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">].\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">map\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">((\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">k\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> lcd.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">`.ob-lcd__${\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">k\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">}`\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\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> tick\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\"> left\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">max\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, target \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (pretendStart \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">+\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (Date.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">now\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">-\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> opened)))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> s\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">floor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(left \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 1000\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\"> parts\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> [Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">floor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(s \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 86400\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">), Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">floor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(s \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 3600\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 24\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, Math.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">floor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(s \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 60\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 60\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, s \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 60\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  parts.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">forEach\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">((\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">n\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">i\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> (cells[i].textContent \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">=\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> String\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(n).\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">padStart\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">2\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'0'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">)))\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  lcd.classList.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">toggle\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'is-done'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, left \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">===\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\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>",1791223398957]