[{"data":1,"prerenderedAt":93},["ShallowReactive",2],{"room:08-blogs-myspace":3},{"path":4,"meta":5,"html":81,"css":82,"skinCss":83,"snippets":84},"08-blogs-myspace",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":36,"thenVsNow":42,"snippets":43,"sources":62,"recreated":78},"08","Blogs & MySpace","2003–2008","Anyone could publish: hosted blogs gave everyone dated posts, permalinks and a sidebar, while social profiles let millions of teenagers paste raw CSS into an \"About me\" box.",{"screens":11,"connection":12,"browsers":13},"1024×768 on CRTs and the first cheap LCDs","Broadband became normal at home; feeds were polled by desktop aggregators","Internet Explorer 6 and 7, Firefox 1.5 and 2, Safari 2",[15,18,21,24,27,30,33],{"id":16,"label":17},"blog","Two-column blog template with a header banner",{"id":19,"label":20},"permalinks","Dated posts with permalinks, comments and trackbacks",{"id":22,"label":23},"tag-cloud","Tag cloud: bigger words, more posts",{"id":25,"label":26},"feeds","Orange RSS \u002F Atom badges",{"id":28,"label":29},"comments","Comment threads (and the first spam)",{"id":31,"label":32},"profile","Social profile: mood, Top 8, blurbs, profile song",{"id":34,"label":35},"css-sandbox","User CSS pasted into the profile",[37,38,39,40,41],"Hosted blog engines with template tags and two-column float layouts","RSS 2.0 and Atom feeds, trackbacks and pingbacks","Social profiles that accepted user HTML and \u003Cstyle> blocks","Layout sites that handed out copy-and-paste CSS","Embedded profile music players (here: a Web Audio chiptune)","Blog templates became themes and static-site generators; user-styled profiles gave way to uniform feeds where the platform, not the person, owns the design.",[44,49,54,57],{"file":45,"lang":46,"caption":47,"region":48},"demo.html","html","A post: date header, permalink, byline","post",{"file":50,"lang":51,"caption":52,"region":53},"era.css","css","The classic two-column float template","blog-layout",{"file":45,"lang":46,"caption":55,"region":56},"The CSS sandbox: a textarea and a same-origin iframe","sandbox",{"file":58,"lang":59,"caption":60,"region":61},"era.client.ts","typescript","Posting the CSS into the profile frame","post-css",[63,66,69,72,75],{"label":64,"url":65},"Blog (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBlog",{"label":67,"url":68},"MySpace (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMyspace",{"label":70,"url":71},"Tag cloud (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FTag_cloud",{"label":73,"url":74},"RSS (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FRSS",{"label":76,"url":77},"Window.postMessage() (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FpostMessage",[79,80],"Profile glitter text was usually an animated GIF; here it is a moving CSS gradient clipped to the text.","Profile songs played through a Flash player; here a short original chiptune is synthesised with Web Audio after you press Play.","\u003Cdiv class=\"kk\">\n\u003Cdiv class=\"kk__navbar\" aria-hidden=\"true\">\u003Cspan class=\"kk__navbar-logo\">Inkwell\u003C\u002Fspan> \u003Cspan>Search this blog\u003C\u002Fspan> \u003Cspan>Flag blog\u003C\u002Fspan> \u003Cspan>Next blog »\u003C\u002Fspan> \u003Cspan class=\"kk__navbar-right\">Create blog | Sign in\u003C\u002Fspan>\u003C\u002Fdiv>\n\n\u003Cdiv class=\"kk__outer\">\n  \u003Cdiv class=\"kk__header\" data-trait=\"blog\">\n    \u003Ch1>\u003Ca href=\"#kk-top\" id=\"kk-top\">Kettle & Keyboard\u003C\u002Fa>\u003C\u002Fh1>\n    \u003Cp class=\"kk__desc\">Tea, code, and whatever the cat knocked off the desk today. Est. 2003.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\n  \u003Cdiv class=\"kk__wrap\">\n    \u003Cdiv class=\"kk__main\">\n      \u003Ch2 class=\"kk__date\">Tuesday, November 15, 2005\u003C\u002Fh2>\n      \u003Cdiv class=\"kk__post\" id=\"post-ajax-kettle\" data-trait=\"permalinks\">\n        \u003Ch3 class=\"kk__title\">\u003Ca href=\"#post-ajax-kettle\">I made my kettle send me an email (sort of)\u003C\u002Fa>\u003C\u002Fh3>\n        \u003Cdiv class=\"kk__body\">\n          \u003Cp>So everyone at work is saying “Ajax” now like it's a new kind of soap. I spent Sunday wiring\n            the old webcam above the kettle to a page that refreshes itself without reloading. It\n            asks the server “is it boiling yet?” every five seconds. The answer is usually no.\u003C\u002Fp>\n          \u003Cp>Next step: an RSS feed for the kettle. Subscribe in your aggregator and you'll never miss a\n            brew again. Yes, I know. \u003Cem>Yes, I know.\u003C\u002Fem>\u003C\u002Fp>\n          \u003Cp class=\"kk__now\">\u003Cb>Currently listening:\u003C\u002Fb> a mix CD my sister burned me in 2002\u003Cbr \u002F>\n            \u003Cb>Currently drinking:\u003C\u002Fb> Assam, too strong\u003C\u002Fp>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"kk__byline\">Posted by \u003Ca href=\"#kk-about\">Wren\u003C\u002Fa> at \u003Ca href=\"#post-ajax-kettle\">11:42 PM\u003C\u002Fa>\n          | \u003Ca href=\"#post-ajax-kettle\">5 comments\u003C\u002Fa> | \u003Ca href=\"#post-ajax-kettle\">Trackback\u003C\u002Fa>\n          | \u003Cspan class=\"kk__labels\">Labels: \u003Ca href=\"#kk-tags\">ajax\u003C\u002Fa>, \u003Ca href=\"#kk-tags\">kettle\u003C\u002Fa>, \u003Ca href=\"#kk-tags\">geekery\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003Ch2 class=\"kk__date\">Sunday, November 13, 2005\u003C\u002Fh2>\n      \u003Cdiv class=\"kk__post\" id=\"post-tag-cloud\">\n        \u003Ch3 class=\"kk__title\">\u003Ca href=\"#post-tag-cloud\">New template! (and a tag cloud)\u003C\u002Fa>\u003C\u002Fh3>\n        \u003Cdiv class=\"kk__body\">\n          \u003Cp>Finally ditched the default template. Two columns, a little brown, and the sidebar now has a\n            \u003Ca href=\"#kk-tags\">tag cloud\u003C\u002Fa>, so you can see at a glance that I write about tea far more than\n            is healthy. If anything looks broken in Internet Explorer, please leave a comment and\n            I will cry quietly and then fix it.\u003C\u002Fp>\n          \u003Cp>Also added myself to three blogrolls. Hi new readers! All four of you!\u003C\u002Fp>\n        \u003C\u002Fdiv>\n        \u003Cp class=\"kk__byline\">Posted by \u003Ca href=\"#kk-about\">Wren\u003C\u002Fa> at \u003Ca href=\"#post-tag-cloud\">4:07 PM\u003C\u002Fa>\n          | \u003Ca href=\"#post-tag-cloud\">12 comments\u003C\u002Fa> | \u003Ca href=\"#post-tag-cloud\">Trackback\u003C\u002Fa>\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"kk__comments\" data-trait=\"comments\">\n        \u003Ch4>5 Comments: \u003Csmall>(showing 3)\u003C\u002Fsmall>\u003C\u002Fh4>\n        \u003Cdl>\n          \u003Cdt>\u003Ca href=\"#post-ajax-kettle\">pixelpudding\u003C\u002Fa> said...\u003C\u002Fdt>\n          \u003Cdd>LOL. Please put the kettle on a FriendSpace profile so it can have a Top 8.\u003C\u002Fdd>\n          \u003Cdt>\u003Ca href=\"#post-ajax-kettle\">Anonymous\u003C\u002Fa> said...\u003C\u002Fdt>\n          \u003Cdd>great post!! check out my site for cheap ringtones\u003C\u002Fdd>\n          \u003Cdt>\u003Ca href=\"#kk-about\">Wren\u003C\u002Fa> said...\u003C\u002Fdt>\n          \u003Cdd>@Anonymous: deleted your other six comments. Turning on word verification now.\u003C\u002Fdd>\n        \u003C\u002Fdl>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"kk__sidebar\">\n      \u003Ch2 id=\"kk-about\">About Me\u003C\u002Fh2>\n      \u003Cdiv class=\"kk__about\">\n        \u003Csvg class=\"kk__avatar\" viewBox=\"0 0 80 80\" width=\"80\" height=\"80\" role=\"img\" aria-label=\"Wren's avatar: a teacup with steam\">\n          \u003Crect width=\"80\" height=\"80\" fill=\"#f3e6cc\"\u002F>\u003Cpath d=\"M20 38h34v12a17 17 0 0 1-34 0z\" fill=\"#9c5a2c\"\u002F>\u003Cpath d=\"M54 42h5a6 6 0 0 1 0 12h-6\" fill=\"none\" stroke=\"#9c5a2c\" stroke-width=\"4\"\u002F>\u003Cpath d=\"M30 30q-4-6 0-12M38 30q-4-6 0-12M46 30q-4-6 0-12\" fill=\"none\" stroke=\"#b9a184\" stroke-width=\"2.5\" stroke-linecap=\"round\"\u002F>\u003Crect x=\"14\" y=\"66\" width=\"52\" height=\"4\" rx=\"2\" fill=\"#6b3d1e\"\u002F>\n        \u003C\u002Fsvg>\n        \u003Cp>\u003Cb>Wren\u003C\u002Fb>\u003Cbr \u002F>Bristol, United Kingdom\u003C\u002Fp>\n        \u003Cp>Web developer by day, tea snob by night. I validate my markup and I'm not ashamed.\u003C\u002Fp>\n        \u003Cp>\u003Ca href=\"#kk-about\">View my complete profile\u003C\u002Fa>\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003Ch2>Subscribe\u003C\u002Fh2>\n      \u003Cp class=\"kk__feeds\" data-trait=\"feeds\">\n        \u003Ca href=\"#kk-top\" class=\"feed\">\u003Cb>RSS\u003C\u002Fb>\u003Ci>2.0\u003C\u002Fi>\u003C\u002Fa>\n        \u003Ca href=\"#kk-top\" class=\"feed\">\u003Cb>ATOM\u003C\u002Fb>\u003Ci>1.0\u003C\u002Fi>\u003C\u002Fa>\n        \u003Ca href=\"#kk-top\" class=\"feed feed--xml\">\u003Cb>XML\u003C\u002Fb>\u003C\u002Fa>\n      \u003C\u002Fp>\n\n      \u003Ch2>Blogroll\u003C\u002Fh2>\n      \u003Cul>\n        \u003Cli>\u003Ca href=\"#kk-top\">Semicolon Diaries\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">pixelpudding\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">The Half-Closed Tag\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">Notes From A Server Closet\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">My Mum's Blog (hi Mum)\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n\n      \u003Ch2>Archives\u003C\u002Fh2>\n      \u003Cul class=\"kk__archive\">\n        \u003Cli>\u003Ca href=\"#kk-top\">November 2005\u003C\u002Fa> (6)\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">October 2005\u003C\u002Fa> (11)\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">September 2005\u003C\u002Fa> (9)\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">August 2005\u003C\u002Fa> (14)\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#kk-top\">July 2005\u003C\u002Fa> (3)\u003C\u002Fli>\n      \u003C\u002Ful>\n\n      \u003Ch2 id=\"kk-tags\">Tags\u003C\u002Fh2>\n      \u003Cp class=\"kk__cloud\" data-trait=\"tag-cloud\">\n        \u003Ca href=\"#kk-tags\" class=\"t1\">accessibility\u003C\u002Fa> \u003Ca href=\"#kk-tags\" class=\"t5\">ajax\u003C\u002Fa>\n        \u003Ca href=\"#kk-tags\" class=\"t2\">bristol\u003C\u002Fa> \u003Ca href=\"#kk-tags\" class=\"t3\">cats\u003C\u002Fa>\n        \u003Ca href=\"#kk-tags\" class=\"t4\">css\u003C\u002Fa> \u003Ca href=\"#kk-tags\" class=\"t1\">firefox\u003C\u002Fa>\n        \u003Ca href=\"#kk-tags\" class=\"t3\">geekery\u003C\u002Fa> \u003Ca href=\"#kk-tags\" class=\"t2\">ie6-rants\u003C\u002Fa>\n        \u003Ca href=\"#kk-tags\" class=\"t1\">knitting\u003C\u002Fa> \u003Ca href=\"#kk-tags\" class=\"t2\">podcasts\u003C\u002Fa>\n        \u003Ca href=\"#kk-tags\" class=\"t3\">rss\u003C\u002Fa> \u003Ca href=\"#kk-tags\" class=\"t6\">tea\u003C\u002Fa>\n        \u003Ca href=\"#kk-tags\" class=\"t1\">work\u003C\u002Fa>\n      \u003C\u002Fp>\n\n      \u003Cp class=\"kk__counter\">Visitors: \u003Cspan>004,217\u003C\u002Fspan>\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n  \u003Cp class=\"kk__powered\">Powered by \u003Cb>Inkwell\u003C\u002Fb> 2.1 · Template “Teacozy” by Wren · Comments moderated.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"fs\" id=\"fs\" data-trait=\"profile\">\n  \u003Ch2 class=\"fs__head\">\u003Cspan>Meanwhile, three tabs over…\u003C\u002Fspan> FriendSpace\u003C\u002Fh2>\n  \u003Cp class=\"fs__intro\">On FriendSpace, every teenager was a web designer. The profile “About me” box\n    accepted raw HTML and CSS, so people pasted in whole stylesheets copied from layout sites. Type CSS below\n    and it is applied \u003Cstrong>only\u003C\u002Fstrong> to the profile frame.\u003C\u002Fp>\n\n  \u003Cdiv class=\"fs__lab\">\n    \u003Cform class=\"fs__editor\" data-trait=\"css-sandbox\" action=\"#fs\">\n      \u003Clabel for=\"fs-css\">Edit Profile → About Me (CSS goes here):\u003C\u002Flabel>\n      \u003Ctextarea id=\"fs-css\" name=\"css\" rows=\"12\" spellcheck=\"false\" data-keys=\"own\">\u002F* paste a layout or write your own! *\u002F\nbody { background: #e8f0ff; }\u003C\u002Ftextarea>\n      \u003Cdiv class=\"fs__presets\" role=\"group\" aria-label=\"Preset layouts\">\n        \u003Cbutton type=\"button\" data-preset=\"glitter\">Glitter pink\u003C\u002Fbutton>\n        \u003Cbutton type=\"button\" data-preset=\"emo\">Black emo\u003C\u002Fbutton>\n        \u003Cbutton type=\"button\" data-preset=\"hacked\">Hacked tables\u003C\u002Fbutton>\n        \u003Cbutton type=\"button\" data-preset=\"reset\">Default\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n      \u003Cp class=\"fs__status\" role=\"status\" aria-live=\"polite\">Changes apply as you type.\u003C\u002Fp>\n    \u003C\u002Fform>\n    \u003Ciframe class=\"fs__frame\" src=\"\u002Fdemos\u002Fprofile\u002F\" title=\"FriendSpace profile of xXstarlightXx, styled by the CSS you type\" loading=\"lazy\">\u003C\u002Fiframe>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","@layer era, shell, skin;\n@layer era {\n\u002F* Era 08: Blogs and social profiles. A hosted-blog template with a two-column\n   float layout, then a FriendSpace profile in a sandboxed same-origin iframe. *\u002F\n[data-era=\"08\"] {\n  background: #efe6d2 url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='6' height='6'>\u003Crect width='6' height='6' fill='%23efe6d2'\u002F>\u003Crect width='1' height='1' fill='%23e2d6bd'\u002F>\u003C\u002Fsvg>\");\n  color: #3a2c1f;\n  font: 13px\u002F1.5 'Trebuchet MS', Trebuchet, Verdana, sans-serif;\n\n  a {\n    color: #8a3f12;\n  }\n  a:visited {\n    color: #6e4a2f;\n  }\n  a:hover {\n    color: #c45a1a;\n  }\n  :focus-visible {\n    outline: 2px solid #1c5fa8;\n    outline-offset: 2px;\n  }\n\n  \u002F* The hosted-blog navbar every free blog carried across the top. *\u002F\n  .kk__navbar {\n    background: #3b5998 linear-gradient(#5b7cbf, #34508d);\n    color: #fff;\n    font: 11px\u002F26px Arial, sans-serif;\n    padding: 0 10px;\n    white-space: nowrap;\n    overflow: hidden;\n    border-bottom: 1px solid #22386a;\n  }\n  .kk__navbar span {\n    margin-right: 12px;\n    opacity: 0.95;\n  }\n  .kk__navbar-logo {\n    font: bold 13px Georgia, serif;\n    background: #fff;\n    color: #34508d;\n    padding: 1px 6px;\n    border-radius: 3px;\n  }\n  .kk__navbar-right {\n    float: right;\n  }\n\n  .kk__outer {\n    width: 760px;\n    max-width: calc(100% - 20px);\n    margin: 20px auto 0;\n    background: #fffaf0;\n    border: 1px solid #c9b48f;\n    box-shadow: 0 2px 6px rgb(80 50 20 \u002F 0.2);\n  }\n  .kk__wrap:after {\n    content: '';\n    display: block;\n    clear: both;\n  }\n  .kk__main {\n    float: left;\n    width: 480px;\n    padding: 0 0 20px 24px;\n  }\n  .kk__sidebar {\n    float: right;\n    width: 200px;\n    padding: 0 20px 20px 0;\n  }\n\n  .kk__header {\n    margin: 0;\n    padding: 34px 24px 26px;\n    background: #6e3b1a linear-gradient(#8a4d24, #5a2f13);\n    border-bottom: 4px solid #d9a441;\n    color: #f8e8c8;\n    h1 {\n      margin: 0;\n      font: normal 40px\u002F1.1 Georgia, 'Times New Roman', serif;\n      letter-spacing: -1px;\n    }\n    h1 a,\n    h1 a:visited {\n      color: #fff6e0;\n      text-decoration: none;\n    }\n  }\n  .kk__desc {\n    margin: 6px 0 0;\n    font: italic 14px Georgia, serif;\n    color: #f0d9a8;\n  }\n\n  .kk__date {\n    margin: 26px 0 6px;\n    font: bold 11px\u002F1 'Trebuchet MS', sans-serif;\n    text-transform: uppercase;\n    letter-spacing: 0.15em;\n    color: #8f7a5a;\n  }\n  .kk__post {\n    border-bottom: 1px dotted #c9b48f;\n    padding-bottom: 10px;\n    margin-bottom: 10px;\n  }\n  .kk__title {\n    margin: 0 0 4px;\n    font: normal 21px\u002F1.25 Georgia, serif;\n    a,\n    a:visited {\n      color: #5a2f13;\n      text-decoration: none;\n    }\n    a:hover {\n      text-decoration: underline;\n    }\n  }\n  .kk__body p {\n    margin: 0 0 0.9em;\n  }\n  .kk__now {\n    font-size: 11px;\n    color: #6b5a44;\n    background: #f5ead2;\n    padding: 4px 8px;\n    border-left: 3px solid #d9a441;\n  }\n  .kk__byline {\n    font-size: 11px;\n    color: #6b5a44;\n    margin: 0;\n  }\n  .kk__labels {\n    display: inline-block;\n  }\n\n  .kk__comments {\n    margin-top: 18px;\n    background: #f5ead2;\n    padding: 4px 14px;\n    h4 {\n      font: normal 16px Georgia, serif;\n      margin: 8px 0;\n    }\n    dt {\n      font-size: 11px;\n      color: #6b5a44;\n      padding-left: 18px;\n      background: url(\"data:image\u002Fsvg+xml,\u003Csvg xmlns='http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg' width='12' height='12'>\u003Cpath d='M1 1h10v7H5l-3 3V8H1z' fill='%23d9a441'\u002F>\u003C\u002Fsvg>\") no-repeat 0 2px;\n    }\n    dd {\n      margin: 0 0 10px 18px;\n    }\n  }\n\n  .kk__sidebar {\n    h2 {\n      margin: 24px 0 6px;\n      font: bold 11px\u002F1 'Trebuchet MS', sans-serif;\n      text-transform: uppercase;\n      letter-spacing: 0.15em;\n      color: #8f7a5a;\n      border-bottom: 1px dotted #c9b48f;\n      padding-bottom: 5px;\n    }\n    ul {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n    }\n    li {\n      padding-left: 14px;\n      text-indent: -14px;\n      margin: 3px 0;\n    }\n    li:before {\n      content: '\\00bb\\00a0\\00a0';\n      color: #d9a441;\n    }\n    p {\n      margin: 6px 0;\n    }\n  }\n  .kk__avatar {\n    float: left;\n    margin: 4px 8px 4px 0;\n    border: 4px solid #fff;\n    box-shadow: 0 0 0 1px #c9b48f;\n  }\n  .kk__about:after {\n    content: '';\n    display: block;\n    clear: both;\n  }\n\n  \u002F* The orange 80x15 \"button\" badges, drawn in CSS instead of GIFs. *\u002F\n  .kk__feeds {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n  }\n  .feed {\n    display: inline-flex;\n    height: 15px;\n    border: 1px solid #000;\n    font: bold 9px\u002F15px Verdana, sans-serif;\n    text-decoration: none;\n  }\n  .feed b,\n  .feed i {\n    padding: 0 4px;\n    font-style: normal;\n  }\n  .feed b {\n    background: #ff6600;\n    color: #fff;\n  }\n  .feed i {\n    background: #898e79;\n    color: #fff;\n  }\n  .feed--xml b {\n    padding: 0 8px;\n  }\n\n  .kk__cloud {\n    line-height: 1.35;\n    a {\n      text-decoration: none;\n    }\n    a:hover {\n      text-decoration: underline;\n    }\n    .t1 { font-size: 10px; color: #a07a52; }\n    .t2 { font-size: 12px; }\n    .t3 { font-size: 15px; }\n    .t4 { font-size: 18px; }\n    .t5 { font-size: 22px; font-weight: bold; }\n    .t6 { font-size: 27px; font-weight: bold; color: #5a2f13; }\n  }\n  .kk__counter span {\n    font: bold 12px 'Courier New', monospace;\n    background: #000;\n    color: #6f6;\n    padding: 1px 4px;\n    letter-spacing: 2px;\n  }\n  .kk__powered {\n    clear: both;\n    margin: 0;\n    padding: 12px 24px;\n    font-size: 11px;\n    text-align: center;\n    color: #f0d9a8;\n    background: #5a2f13;\n  }\n\n  \u002F* ---------- FriendSpace ---------- *\u002F\n  .fs {\n    margin: 36px 0 0;\n    padding: 0 10px 30px;\n    background: linear-gradient(#e5e5e5, #cfd8e6);\n    border-top: 6px solid #036;\n  }\n  .fs__head {\n    margin: 0 -10px 12px;\n    padding: 10px 16px;\n    background: #036 linear-gradient(#1d5a9a, #003366);\n    color: #fff;\n    font: bold 22px\u002F1.1 Arial, Helvetica, sans-serif;\n    letter-spacing: -0.5px;\n    span {\n      display: block;\n      font: italic normal 12px Georgia, serif;\n      color: #bcd3ee;\n      letter-spacing: 0;\n    }\n  }\n  .fs__intro {\n    max-width: 960px;\n    margin: 0 auto 12px;\n    font: 12px\u002F1.5 Verdana, sans-serif;\n    color: #223;\n  }\n  .fs__lab {\n    max-width: 960px;\n    margin: 0 auto;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: flex-start;\n  }\n  .fs__editor {\n    flex: 1 1 260px;\n    background: #fff;\n    border: 1px solid #6699cc;\n    padding: 8px;\n    font: 11px Verdana, sans-serif;\n    color: #222;\n    label {\n      display: block;\n      font-weight: bold;\n      background: #6699cc;\n      color: #fff;\n      margin: -8px -8px 8px;\n      padding: 4px 6px;\n    }\n    textarea {\n      box-sizing: border-box;\n      width: 100%;\n      font: 12px\u002F1.4 'Courier New', Courier, monospace;\n      border: 1px solid #999;\n      background: #fafafa;\n      color: #111;\n      resize: vertical;\n    }\n  }\n  .fs__presets {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    margin-top: 6px;\n    button {\n      font: bold 11px Verdana, sans-serif;\n      padding: 4px 8px;\n      cursor: pointer;\n      border: 1px solid #036;\n      background: linear-gradient(#fff, #d6e2f0);\n      color: #036;\n    }\n    button[data-preset='glitter'] {\n      background: linear-gradient(#ffe0f1, #ff9fd2);\n      color: #6b0040;\n      border-color: #c0007a;\n    }\n    button[data-preset='emo'] {\n      background: linear-gradient(#444, #000);\n      color: #f66;\n      border-color: #000;\n    }\n    button[data-preset='hacked'] {\n      background: #000;\n      color: #0f0;\n      font-family: 'Courier New', monospace;\n    }\n  }\n  .fs__status {\n    margin: 6px 0 0;\n    color: #555;\n  }\n  .fs__frame {\n    flex: 3 1 560px;\n    min-width: 0;\n    width: 100%;\n    height: 700px;\n    border: 1px solid #6699cc;\n    background: #e5e5e5;\n  }\n\n  @media (max-width: 800px) {\n    .kk__outer {\n      width: auto;\n    }\n    .kk__main,\n    .kk__sidebar {\n      float: none;\n      width: auto;\n      padding: 0 16px 16px;\n    }\n    .kk__navbar-right {\n      display: none;\n    }\n    .kk__header h1 {\n      font-size: 32px;\n    }\n    .fs__frame {\n      flex-basis: 100%;\n      height: 640px;\n    }\n  }\n}\n\n}","@layer era, shell, skin;\n@layer skin {\n\u002F* Era 08 time bar skin: a social network's blue header bar. *\u002F\nhtml[data-era-page=\"08\"] .timebar {\n  --tb-bg: #003366;\n  --tb-fg: #ffffff;\n  --tb-muted: #c8daf0;\n  --tb-accent: #ffcc66;\n  --tb-accent-fg: #002244;\n  --tb-notch: #4f7fb3;\n  --tb-btn-bg: #1d4f84;\n  --tb-btn-border: 1px solid #6699cc;\n  --tb-btn-radius: 3px;\n  --tb-font: Verdana, Arial, Helvetica, sans-serif;\n  --tb-shadow: inset 0 1px 0 #5a8cc4;\n  background: linear-gradient(#1d5a9a, #003366);\n  border-top: 2px solid #6699cc;\n}\nhtml[data-era-page=\"08\"] .timebar__title {\n  font-size: 12px;\n}\nhtml[data-era-page=\"08\"] .timebar__years {\n  font-family: Verdana, Arial, sans-serif;\n}\nhtml[data-era-page=\"08\"] .timebar__notch {\n  border-radius: 3px;\n}\n\n}",[85,87,89,91],{"caption":47,"file":45,"html":86},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"kk__post\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"post-ajax-kettle\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"permalinks\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"kk__title\"\u003C\u002Fspan>\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\">\"#post-ajax-kettle\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>I made my kettle send me an email (sort of)<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">h3\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"kk__body\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>So everyone at work is saying \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">“\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">Ajax\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">”\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> now like it's a new kind of soap. I spent Sunday wiring\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      the old webcam above the kettle to a page that refreshes itself without reloading. It\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      asks the server \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">“\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">is it boiling yet?\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">”\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> every five seconds. The answer is usually no.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Next step: an RSS feed for the kettle. Subscribe in your aggregator and you'll never miss a\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      brew again. Yes, I know. <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Yes, I know.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">em\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"kk__now\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Currently listening:<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> a mix CD my sister burned me in 2002<\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">br\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Currently drinking:<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">b\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> Assam, too strong<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"kk__byline\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Posted by <\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\">\"#kk-about\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Wren<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">> at <\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\">\"#post-ajax-kettle\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>11:42 PM<\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\">\"#post-ajax-kettle\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>5 comments<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\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\">\"#post-ajax-kettle\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Trackback<\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\">span\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"kk__labels\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Labels: <\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\">\"#kk-tags\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>ajax<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\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\">\"#kk-tags\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>kettle<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\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\">\"#kk-tags\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>geekery<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">a\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":52,"file":50,"html":88},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.kk__outer\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">760\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\">  max-width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">calc\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">100\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">%\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\"> -\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 20\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\">  margin\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">20\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> auto\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\">  background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#fffaf0\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\"> #c9b48f\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\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 2\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 6\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\">80\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 50\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 20\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0.2\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\">.kk__wrap:after\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  content\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">''\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\">  clear\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">both\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\">.kk__main\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  float\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">left\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">480\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\">  padding\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\"> 20\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 24\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\">.kk__sidebar\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  float\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">right\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  width\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">200\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\">  padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 20\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 20\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\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>",{"caption":55,"file":45,"html":90},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">form\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"fs__editor\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"css-sandbox\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> action\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"#fs\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> for\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"fs-css\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Edit Profile \u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">→\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> About Me (CSS goes here):<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">textarea\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"fs-css\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"css\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> rows\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"12\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> spellcheck\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"false\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-keys\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"own\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u002F* paste a layout or write your own! *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">body { background: #e8f0ff; }<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">textarea\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"fs__presets\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"group\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"Preset layouts\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-preset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"glitter\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Glitter pink<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-preset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"emo\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Black emo<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-preset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"hacked\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Hacked tables<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">        <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-preset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"reset\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Default<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">button\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">div\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">      <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"fs__status\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"status\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> aria-live\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"polite\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Changes apply as you type.<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">p\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">form\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">    <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">iframe\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"fs__frame\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> src\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"\u002Fdemos\u002Fprofile\u002F\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"FriendSpace profile of xXstarlightXx, styled by the CSS you type\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> loading\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"lazy\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">iframe\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":60,"file":58,"html":92},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F47067\">function\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\"> send\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">  \u002F\u002F targetOrigin = our own origin: the CSS never leaves this site.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  frame\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.contentWindow?.\u003C\u002Fspan>\u003Cspan style=\"color:#DCBDFB\">postMessage\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">({ type: \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'fs-css'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, css: textarea\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">!\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">.value }, location.origin)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1791223398958]