[{"data":1,"prerenderedAt":87},["ShallowReactive",2],{"room:15-brutalism":3},{"path":4,"meta":5,"html":75,"css":76,"skinCss":77,"snippets":78},"15-brutalism",{"id":6,"slug":4,"title":7,"years":8,"summary":9,"context":10,"traits":14,"tech":39,"thenVsNow":44,"snippets":45,"sources":60,"recreated":73},"15","Brutalism & neubrutalism","2016–2024","A reaction to templated flat design: first raw, default-stylesheet pages that showed their seams on purpose, then a friendlier neubrutalism of thick black outlines, hard shadows and loud flat colour.",{"screens":11,"connection":12,"browsers":13},"Retina laptops and large phones; designers deliberately ignoring them","Fast broadband and 4G; tiny pages as a statement against bloated ones","Evergreen Chrome, Firefox and Safari; CSS Grid from 2017, :has() from 2022–23",[15,18,21,24,27,30,33,36],{"id":16,"label":17},"toggle","Same content, two skins: Raw (2016) and Neubrutalist (2021+)",{"id":19,"label":20},"raw-html","Default browser styles, Times and blue underlined links",{"id":22,"label":23},"broken-grid","A visible grid that elements deliberately break out of",{"id":25,"label":26},"marquee","Scrolling ticker text",{"id":28,"label":29},"borders","Visible borders everywhere",{"id":31,"label":32},"hard-shadow","Hard, unblurred offset shadows",{"id":34,"label":35},"press","Buttons that press into their shadow",{"id":37,"label":38},"stickers","Rotated stickers and pill badges",[40,41,42,43],"Raw HTML and the user-agent stylesheet, used on purpose","CSS Grid with items placed to overlap and overflow their tracks","box-shadow with zero blur (6px 6px 0 #000) and thick solid borders","Here: a radio button plus :has() swaps every custom property, so the toggle works without JavaScript","Neubrutalism went mainstream in app UIs and landing pages; the raw strand lives on in personal sites and the small-web movement.",[46,50,55,58],{"file":47,"lang":48,"caption":49,"region":16},"demo.html","html","The variant switch is just radios",{"file":51,"lang":52,"caption":53,"region":54},"era.css","css",":has() swaps the whole theme","neo",{"file":51,"lang":52,"caption":56,"region":57},"A button that presses into its shadow","press-css",{"file":51,"lang":52,"caption":59,"region":25},"The ticker, now that \u003Cmarquee> is retired",[61,64,67,70],{"label":62,"url":63},"Brutalist Websites (Pascal Deville)","https:\u002F\u002Fbrutalistwebsites.com\u002F",{"label":65,"url":66},"Brutalist architecture (Wikipedia)","https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FBrutalist_architecture",{"label":68,"url":69},"Neubrutalism – UI Design Trend (Nielsen Norman Group)","https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fneobrutalism\u002F",{"label":71,"url":72},":has() (MDN)","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F:has",[74],"The scrolling ticker is a CSS transform animation, not the obsolete \u003Cmarquee> element; it can be paused.","\u003Cdiv class=\"cc\">\n  \u003Cfieldset class=\"cc__switch\" data-trait=\"toggle\">\n    \u003Clegend>View this page as\u003C\u002Flegend>\n    \u003Cspan>\u003Cinput type=\"radio\" name=\"cc-variant\" id=\"cc-raw\" value=\"raw\" checked>\n    \u003Clabel for=\"cc-raw\">Raw \u003Csmall>(2016 brutalist)\u003C\u002Fsmall>\u003C\u002Flabel>\u003C\u002Fspan>\n    \u003Cspan>\u003Cinput type=\"radio\" name=\"cc-variant\" id=\"cc-neo\" value=\"neo\">\n    \u003Clabel for=\"cc-neo\">Neubrutalist \u003Csmall>(2021+)\u003C\u002Fsmall>\u003C\u002Flabel>\u003C\u002Fspan>\n    \u003Cspan class=\"cc__still\">\u003Cinput type=\"checkbox\" id=\"cc-still\">\n    \u003Clabel for=\"cc-still\">Stop the ticker\u003C\u002Flabel>\u003C\u002Fspan>\n  \u003C\u002Ffieldset>\n\n  \u003Cdiv class=\"cc__page\" data-trait=\"raw-html\">\n    \u003Cdiv class=\"cc__ticker\" data-trait=\"marquee\" aria-hidden=\"true\">\n      \u003Cdiv class=\"cc__ticker-track\">\n        \u003Cspan>NO GRADIENTS ✦ NO STOCK PHOTOS ✦ NO CAROUSELS ✦ ISSUE 07 OUT NOW ✦ OPEN STUDIO THURSDAY ✦ BRING YOUR OWN CHAIR ✦ \u003C\u002Fspan>\n        \u003Cspan>NO GRADIENTS ✦ NO STOCK PHOTOS ✦ NO CAROUSELS ✦ ISSUE 07 OUT NOW ✦ OPEN STUDIO THURSDAY ✦ BRING YOUR OWN CHAIR ✦ \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    \u003Cp class=\"sr-only\">News: Issue 07 out now. Open studio Thursday. Bring your own chair.\u003C\u002Fp>\n\n    \u003Cheader class=\"cc__head\">\n      \u003Ch1 class=\"cc__logo\">\u003Cspan>CONCRETE\u003C\u002Fspan> \u003Cspan>CLUB\u003C\u002Fspan>\u003C\u002Fh1>\n      \u003Cp class=\"cc__tagline\">a zine + collective for people who like websites that look like websites\u003C\u002Fp>\n      \u003Cnav class=\"cc__nav\" aria-label=\"Concrete Club\">\n        \u003Ca href=\"#cc-manifesto\">manifesto\u003C\u002Fa> \u002F\n        \u003Ca href=\"#cc-issues\">issues\u003C\u002Fa> \u002F\n        \u003Ca href=\"#cc-events\">events\u003C\u002Fa> \u002F\n        \u003Ca href=\"#cc-join\">join\u003C\u002Fa>\n      \u003C\u002Fnav>\n      \u003Cspan class=\"cc__sticker cc__sticker--a\" data-trait=\"stickers\" aria-hidden=\"true\">ISSUE\u003Cbr>07!\u003C\u002Fspan>\n    \u003C\u002Fheader>\n\n    \u003Cmain class=\"cc__grid\" data-trait=\"broken-grid\">\n      \u003Csection class=\"cc__manifesto\" id=\"cc-manifesto\">\n        \u003Ch2>Manifesto (v0.3, unfinished)\u003C\u002Fh2>\n        \u003Col>\n          \u003Cli>A button is a button. It should look like it can be pressed.\u003C\u002Fli>\n          \u003Cli>Links are blue and underlined because that is what links are.\u003C\u002Fli>\n          \u003Cli>The browser already has a default stylesheet. We are not ashamed of it.\u003C\u002Fli>\n          \u003Cli>Every page should load on a train going through a tunnel.\u003C\u002Fli>\n          \u003Cli>Show the grid. Then ignore it on purpose.\u003C\u002Fli>\n        \u003C\u002Fol>\n      \u003C\u002Fsection>\n\n      \u003Cfigure class=\"cc__poster\">\n        \u003Csvg viewBox=\"0 0 200 240\" role=\"img\" aria-labelledby=\"cc-poster-t\">\n          \u003Ctitle id=\"cc-poster-t\">Poster: a stack of grey concrete blocks\u003C\u002Ftitle>\n          \u003Crect class=\"cc__block\" x=\"20\" y=\"150\" width=\"160\" height=\"70\"\u002F>\n          \u003Crect class=\"cc__block cc__block--2\" x=\"40\" y=\"88\" width=\"120\" height=\"62\"\u002F>\n          \u003Crect class=\"cc__block cc__block--3\" x=\"65\" y=\"36\" width=\"70\" height=\"52\"\u002F>\n          \u003Ccircle class=\"cc__dot\" cx=\"150\" cy=\"40\" r=\"18\"\u002F>\n        \u003C\u002Fsvg>\n        \u003Cfigcaption>fig. 1 — \"Stack\", risograph, 2 colours\u003C\u002Ffigcaption>\n      \u003C\u002Ffigure>\n\n      \u003Caside class=\"cc__note\">\n        \u003Cp>\u003Cb>NOTE:\u003C\u002Fb> this box is in the wrong place. that is fine.\u003C\u002Fp>\n      \u003C\u002Faside>\n\n      \u003Csection class=\"cc__issues\" id=\"cc-issues\">\n        \u003Ch2>Back issues\u003C\u002Fh2>\n        \u003Cdiv class=\"cc__table-wrap\">\n          \u003Ctable>\n            \u003Ccaption>All issues, newest first\u003C\u002Fcaption>\n            \u003Cthead>\u003Ctr>\u003Cth scope=\"col\">#\u003C\u002Fth>\u003Cth scope=\"col\">Title\u003C\u002Fth>\u003Cth scope=\"col\">Pages\u003C\u002Fth>\u003Cth scope=\"col\">Status\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\n            \u003Ctbody>\n              \u003Ctr>\u003Ctd>07\u003C\u002Ftd>\u003Ctd>\u003Ca href=\"#cc-join\">Default Stylesheet\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>32\u003C\u002Ftd>\u003Ctd>\u003Cmark>new\u003C\u002Fmark>\u003C\u002Ftd>\u003C\u002Ftr>\n              \u003Ctr>\u003Ctd>06\u003C\u002Ftd>\u003Ctd>\u003Ca href=\"#cc-join\">Visited Links Are Purple\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>28\u003C\u002Ftd>\u003Ctd>in stock\u003C\u002Ftd>\u003C\u002Ftr>\n              \u003Ctr>\u003Ctd>05\u003C\u002Ftd>\u003Ctd>\u003Ca href=\"#cc-join\">The Fold Does Not Exist\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>24\u003C\u002Ftd>\u003Ctd>sold out\u003C\u002Ftd>\u003C\u002Ftr>\n              \u003Ctr>\u003Ctd>04\u003C\u002Ftd>\u003Ctd>\u003Ca href=\"#cc-join\">Times New Roman, Again\u003C\u002Fa>\u003C\u002Ftd>\u003Ctd>20\u003C\u002Ftd>\u003Ctd>sold out\u003C\u002Ftd>\u003C\u002Ftr>\n            \u003C\u002Ftbody>\n          \u003C\u002Ftable>\n        \u003C\u002Fdiv>\n      \u003C\u002Fsection>\n\n      \u003Csection class=\"cc__events\" id=\"cc-events\">\n        \u003Ch2>Events\u003C\u002Fh2>\n        \u003Cul>\n          \u003Cli>\u003Cb>THU 19:00\u003C\u002Fb> Open studio. View-source night. \u003Cspan class=\"cc__badge\">free\u003C\u002Fspan>\u003C\u002Fli>\n          \u003Cli>\u003Cb>SAT 14:00\u003C\u002Fb> Riso printing workshop \u003Cspan class=\"cc__badge cc__badge--hot\">6 spots\u003C\u002Fspan>\u003C\u002Fli>\n          \u003Cli>\u003Cb>SUN\u003C\u002Fb> Closed. Go outside.\u003C\u002Fli>\n        \u003C\u002Ful>\n      \u003C\u002Fsection>\n    \u003C\u002Fmain>\n\n    \u003Csection class=\"cc__join\" id=\"cc-join\">\n      \u003Ch2>Join (it's free, there are no perks)\u003C\u002Fh2>\n      \u003Cform class=\"cc__form\" action=\"#cc-join\" data-trait=\"press\">\n        \u003Clabel for=\"cc-email\">email\u003C\u002Flabel>\n        \u003Cinput id=\"cc-email\" type=\"email\" placeholder=\"you@somewhere\" autocomplete=\"email\">\n        \u003Clabel for=\"cc-fav\">favourite HTML element\u003C\u002Flabel>\n        \u003Cinput id=\"cc-fav\" type=\"text\" placeholder=\"<marquee>\">\n        \u003Cbutton type=\"submit\" class=\"cc__btn\" data-trait=\"hard-shadow\">Submit\u003C\u002Fbutton>\n        \u003Coutput class=\"cc__out\" for=\"cc-email cc-fav\" aria-live=\"polite\">\u003C\u002Foutput>\n      \u003C\u002Fform>\n      \u003Cspan class=\"cc__sticker cc__sticker--b\" aria-hidden=\"true\">NO\u003Cbr>SPAM\u003C\u002Fspan>\n    \u003C\u002Fsection>\n\n    \u003Csection class=\"cc__ring\" aria-labelledby=\"cc-ring-h\">\n      \u003Ch2 id=\"cc-ring-h\">Guestbook (latest 3)\u003C\u002Fh2>\n      \u003Cdl>\n        \u003Cdt>anna_k — 2 days ago\u003C\u002Fdt>\u003Cdd>finally a site that doesn't ask me about cookies before I can read it\u003C\u002Fdd>\n        \u003Cdt>m. — last week\u003C\u002Fdt>\u003Cdd>the table is beautiful. please never change the table.\u003C\u002Fdd>\n        \u003Cdt>a printer — last month\u003C\u002Fdt>\u003Cdd>bring more green ink to the riso night\u003C\u002Fdd>\n      \u003C\u002Fdl>\n      \u003Cp class=\"cc__webring\">\u003Ca href=\"#cc-join\">← prev\u003C\u002Fa> · \u003Cb>Plain Pages Webring\u003C\u002Fb> · \u003Ca href=\"#cc-manifesto\">random\u003C\u002Fa> · \u003Ca href=\"#cc-events\">next →\u003C\u002Fa>\u003C\u002Fp>\n    \u003C\u002Fsection>\n\n    \u003Cfooter class=\"cc__foot\" data-trait=\"borders\">\n      \u003Cp>Concrete Club · est. 2016 · hand-coded in a text editor · \u003Ca href=\"#cc-manifesto\">top\u003C\u002Fa>\u003C\u002Fp>\n      \u003Cp>Last updated: whenever. This page weighs 14 KB.\u003C\u002Fp>\n    \u003C\u002Ffooter>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","@layer era, shell, skin;\n@layer era {\n\u002F* Era 15: Brutalism (2016) and neubrutalism (2021+). One page, two skins, switched with :has(). *\u002F\n[data-era=\"15\"] {\n  background: #ffffff;\n  color: #000000;\n  &:has(#cc-neo:checked) {\n    background: #fde047;\n  }\n\n  .cc {\n    --ink: #000;\n    --paper: #fff;\n    --link: #0000ee;\n    --visited: #551a8b;\n    --face: 'Times New Roman', Times, 'Liberation Serif', serif;\n    --mono: 'Courier New', Courier, 'Liberation Mono', monospace;\n    --border: 1px solid #000;\n    --shadow: none;\n    --radius: 0;\n    min-height: 100%;\n    font-family: var(--face);\n    font-size: 16px;\n    line-height: 1.35;\n  }\n\n  \u002F* ---------- The variant switch (works with no JS) ---------- *\u002F\n  .cc__switch {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: 6px 14px;\n    margin: 0;\n    padding: 8px 12px;\n    border: 0;\n    border-bottom: 1px solid #000;\n    background: #f0f0f0;\n    font: 13px\u002F1.3 var(--mono);\n    legend {\n      float: left;\n      padding: 0;\n      margin-right: 6px;\n      font-weight: bold;\n    }\n    > span {\n      white-space: nowrap;\n    }\n    small {\n      opacity: 0.75;\n    }\n    label {\n      cursor: pointer;\n    }\n    input:focus-visible + label {\n      outline: 2px solid #0000ee;\n      outline-offset: 2px;\n    }\n  }\n  .cc__still {\n    margin-left: auto;\n  }\n\n  \u002F* ================= RAW (2016) ================= *\u002F\n  .cc__page {\n    position: relative;\n    max-width: 980px;\n    padding: 8px 8px 48px;\n  }\n  .cc {\n    overflow: hidden;\n    \u002F* The visible grid, like a debug overlay left on by accident. *\u002F\n    background-image:\n      linear-gradient(to right, rgb(0 0 0 \u002F 0.07) 1px, transparent 1px),\n      linear-gradient(to bottom, rgb(0 0 0 \u002F 0.07) 1px, transparent 1px);\n    background-size: 40px 40px;\n  }\n  a {\n    color: var(--link);\n  }\n  a:visited {\n    color: var(--visited);\n  }\n  a:focus-visible {\n    outline: 2px dotted currentColor;\n  }\n\n  .cc__ticker {\n    overflow: hidden;\n    border: var(--border);\n    background: #000;\n    color: #0f0;\n    font: 14px\u002F28px var(--mono);\n    white-space: nowrap;\n  }\n  .cc__ticker-track {\n    display: inline-flex;\n    animation: e15-marquee 40s linear infinite;\n  }\n  .cc:has(#cc-still:checked) .cc__ticker-track {\n    animation-play-state: paused;\n  }\n\n  .cc__head {\n    position: relative;\n    margin: 16px 0 24px;\n  }\n  .cc__logo {\n    margin: 0;\n    font-size: clamp(48px, 14vw, 132px);\n    line-height: 0.85;\n    font-weight: normal;\n    letter-spacing: -0.04em;\n    span + span {\n      margin-left: 1.2em;\n    }\n  }\n  .cc__tagline {\n    margin: 12px 0 8px;\n    font-family: var(--mono);\n    font-size: 14px;\n  }\n  .cc__nav {\n    font-size: 20px;\n  }\n\n  .cc__sticker {\n    display: none;\n  }\n\n  .cc__grid {\n    display: grid;\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    gap: 16px;\n    align-items: start;\n  }\n  h2 {\n    margin: 0 0 8px;\n    font-size: 24px;\n  }\n  .cc__manifesto {\n    grid-column: 1 \u002F 8;\n    border: var(--border);\n    padding: 12px;\n    background: var(--paper);\n    ol {\n      margin: 0;\n      padding-left: 1.6em;\n    }\n    li {\n      margin-bottom: 6px;\n    }\n  }\n  .cc__poster {\n    grid-column: 8 \u002F 13;\n    margin: 40px -40px 0 0; \u002F* deliberately spills out of the grid *\u002F\n    border: var(--border);\n    background: var(--paper);\n    padding: 8px;\n    svg {\n      display: block;\n      width: 100%;\n      height: auto;\n      max-height: 280px;\n    }\n    figcaption {\n      font: 12px var(--mono);\n    }\n  }\n  .cc__block { fill: #ccc; stroke: #000; }\n  .cc__block--2 { fill: #aaa; }\n  .cc__block--3 { fill: #888; }\n  .cc__dot { fill: #ff0000; }\n  .cc__note {\n    grid-column: 3 \u002F 7;\n    grid-row: 2;\n    margin-top: -24px;\n    transform: rotate(-2deg);\n    border: 1px dashed #000;\n    padding: 4px 8px;\n    background: #ffff00;\n    font-family: var(--mono);\n    font-size: 13px;\n    p {\n      margin: 0;\n    }\n  }\n  .cc__issues {\n    grid-column: 2 \u002F 9;\n    grid-row: 3;\n  }\n  .cc__table-wrap {\n    overflow-x: auto;\n  }\n  table {\n    border: 1px solid #000;\n    border-collapse: separate;\n    border-spacing: 2px;\n    font-family: var(--mono);\n    font-size: 14px;\n  }\n  caption {\n    text-align: left;\n    font-style: italic;\n  }\n  th,\n  td {\n    border: 1px solid #000;\n    padding: 2px 8px;\n    text-align: left;\n  }\n  mark {\n    background: #ffff00;\n  }\n  .cc__events {\n    grid-column: 9 \u002F 13;\n    grid-row: 3;\n    margin-top: 72px;\n    border-left: 4px solid #000;\n    padding-left: 12px;\n    ul {\n      margin: 0;\n      padding-left: 1.2em;\n    }\n    li {\n      margin-bottom: 6px;\n    }\n  }\n  .cc__badge {\n    font-family: var(--mono);\n    font-size: 12px;\n    border: 1px solid #000;\n    padding: 0 4px;\n  }\n\n  .cc__join {\n    position: relative;\n    margin-top: 32px;\n    border-top: 3px double #000;\n    padding-top: 12px;\n  }\n  .cc__form {\n    display: grid;\n    grid-template-columns: max-content minmax(0, 260px);\n    justify-content: start;\n    gap: 8px 12px;\n    align-items: center;\n    input {\n      font: inherit;\n      font-family: var(--mono);\n    }\n  }\n  \u002F* A 2016 brutalist button: the browser's own. *\u002F\n  .cc__btn {\n    grid-column: 2;\n    justify-self: start;\n    font: inherit;\n  }\n  .cc__out {\n    grid-column: 1 \u002F -1;\n    font-family: var(--mono);\n  }\n  .cc__ring {\n    margin-top: 32px;\n    dl {\n      margin: 0;\n    }\n    dt {\n      font-family: var(--mono);\n      font-size: 13px;\n    }\n    dd {\n      margin: 0 0 10px 2em;\n    }\n  }\n  .cc__webring {\n    text-align: center;\n    border: var(--border);\n    padding: 6px;\n  }\n  .cc__foot {\n    margin-top: 32px;\n    border-top: 1px solid #000;\n    font-family: var(--mono);\n    font-size: 12px;\n    p {\n      margin: 4px 0;\n    }\n  }\n\n  \u002F* ================= NEUBRUTALIST (2021+) ================= *\u002F\n  .cc:has(#cc-neo:checked) {\n    --ink: #111;\n    --paper: #fffdf5;\n    --link: #111;\n    --visited: #111;\n    --face: 'Arial Black', 'Helvetica Neue', Inter, system-ui, sans-serif;\n    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n    --border: 3px solid #111;\n    --shadow: 6px 6px 0 #111;\n    --radius: 12px;\n    background: #fde047;\n    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\n    font-weight: 500;\n  }\n  .cc:has(#cc-neo:checked) {\n    .cc__switch {\n      background: #111;\n      color: #fff;\n      border-bottom: 3px solid #111;\n      input:focus-visible + label {\n        outline-color: #fde047;\n      }\n    }\n    .cc__page {\n      max-width: 1100px;\n      margin: 0 auto;\n      padding: 24px 24px 64px;\n      background-image: radial-gradient(#111 1.2px, transparent 1.3px);\n      background-size: 22px 22px;\n      background-color: #fde047;\n    }\n    a {\n      text-decoration-thickness: 3px;\n      text-underline-offset: 3px;\n      font-weight: 800;\n    }\n    a:hover {\n      background: #111;\n      color: #fde047;\n    }\n    a:focus-visible {\n      outline: 3px solid #111;\n      outline-offset: 2px;\n    }\n    .cc__ticker {\n      border: var(--border);\n      border-radius: var(--radius);\n      background: #ff6b9d;\n      color: #111;\n      font: 900 15px\u002F36px var(--face);\n      box-shadow: var(--shadow);\n    }\n    .cc__head {\n      margin: 32px 0;\n    }\n    .cc__logo {\n      font-family: var(--face);\n      font-weight: 900;\n      letter-spacing: -0.03em;\n      line-height: 0.95;\n      span {\n        display: inline-block;\n        padding: 0 0.12em;\n        border: 4px solid #111;\n        border-radius: 16px;\n        background: #fff;\n        box-shadow: 8px 8px 0 #111;\n      }\n      span + span {\n        margin: 12px 0 0 0.6em;\n        background: #7dd3fc;\n        transform: rotate(-3deg);\n      }\n    }\n    .cc__tagline {\n      font: 600 18px\u002F1.4 system-ui, sans-serif;\n      max-width: 34ch;\n    }\n    .cc__nav {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n      color: transparent; \u002F* hides the raw \" \u002F \" separators *\u002F\n      font-size: 16px;\n      a {\n        padding: 6px 14px;\n        border: var(--border);\n        border-radius: 999px;\n        background: #fff;\n        color: #111;\n        text-decoration: none;\n        box-shadow: 3px 3px 0 #111;\n      }\n    }\n    .cc__sticker {\n      display: grid;\n      place-items: center;\n      position: absolute;\n      width: 96px;\n      height: 96px;\n      border: 3px solid #111;\n      border-radius: 50%;\n      background: #a3e635;\n      color: #111;\n      font: 900 18px\u002F1 var(--face);\n      text-align: center;\n      transform: rotate(14deg);\n      box-shadow: 4px 4px 0 #111;\n    }\n    .cc__sticker--a {\n      right: 4%;\n      top: 0;\n    }\n    .cc__sticker--b {\n      right: 6%;\n      top: -36px;\n      background: #ff6b9d;\n      transform: rotate(-10deg);\n    }\n    .cc__grid {\n      gap: 24px;\n    }\n    h2 {\n      font-family: var(--face);\n      font-weight: 900;\n      font-size: 26px;\n      letter-spacing: -0.01em;\n    }\n    .cc__manifesto,\n    .cc__poster,\n    .cc__events,\n    .cc__issues {\n      border: var(--border);\n      border-radius: var(--radius);\n      background: var(--paper);\n      box-shadow: var(--shadow);\n      padding: 20px;\n    }\n    .cc__manifesto {\n      background: #fff;\n      li::marker {\n        font-weight: 900;\n      }\n    }\n    .cc__poster {\n      margin: 0;\n      background: #c4b5fd;\n      figcaption {\n        font-weight: 700;\n      }\n    }\n    .cc__block { fill: #fff; stroke: #111; stroke-width: 3; }\n    .cc__block--2 { fill: #7dd3fc; }\n    .cc__block--3 { fill: #fb923c; }\n    .cc__dot { fill: #ff6b9d; stroke: #111; stroke-width: 3; }\n    .cc__note {\n      margin-top: 0;\n      grid-column: 1 \u002F 8;\n      transform: rotate(-1.5deg);\n      border: var(--border);\n      border-radius: 8px;\n      background: #a3e635;\n      box-shadow: 4px 4px 0 #111;\n      padding: 10px 14px;\n      font: 700 14px\u002F1.3 system-ui, sans-serif;\n    }\n    .cc__issues {\n      grid-column: 1 \u002F 9;\n      background: #fff;\n    }\n    .cc__events {\n      grid-column: 9 \u002F 13;\n      margin-top: 0;\n      border-left: var(--border);\n      background: #7dd3fc;\n      ul {\n        list-style: none;\n        padding: 0;\n      }\n      li {\n        padding: 8px 0;\n        border-bottom: 2px solid #111;\n      }\n    }\n    table {\n      width: 100%;\n      border: var(--border);\n      border-radius: 8px;\n      border-spacing: 0;\n      overflow: hidden;\n      font: 600 15px system-ui, sans-serif;\n    }\n    caption {\n      font-style: normal;\n      font-weight: 800;\n      padding-bottom: 6px;\n    }\n    th {\n      background: #111;\n      color: #fff;\n    }\n    th,\n    td {\n      border: 0;\n      border-bottom: 2px solid #111;\n      padding: 8px 12px;\n    }\n    tr:last-child td {\n      border-bottom: 0;\n    }\n    mark {\n      padding: 2px 8px;\n      border: 2px solid #111;\n      border-radius: 999px;\n      background: #ff6b9d;\n    }\n    .cc__badge {\n      display: inline-block;\n      padding: 2px 8px;\n      border: 2px solid #111;\n      border-radius: 999px;\n      background: #fff;\n      font: 800 12px system-ui, sans-serif;\n    }\n    .cc__badge--hot {\n      background: #fb923c;\n    }\n    .cc__join {\n      margin-top: 40px;\n      padding: 24px;\n      border: var(--border);\n      border-radius: var(--radius);\n      background: #fff;\n      box-shadow: 8px 8px 0 #111;\n    }\n    .cc__form {\n      label {\n        font-weight: 800;\n      }\n      input {\n        padding: 10px 12px;\n        border: var(--border);\n        border-radius: 8px;\n        background: #fffdf5;\n        font: 600 16px system-ui, sans-serif;\n      }\n      input:focus {\n        outline: none;\n        box-shadow: 4px 4px 0 #111;\n        background: #fff;\n      }\n    }\n    .cc__btn {\n      padding: 12px 28px;\n      border: var(--border);\n      border-radius: 8px;\n      background: #ff6b9d;\n      color: #111;\n      font: 900 18px var(--face);\n      box-shadow: 5px 5px 0 #111;\n      cursor: pointer;\n      transition: transform 80ms, box-shadow 80ms;\n    }\n    .cc__btn:hover {\n      background: #fb923c;\n    }\n    \u002F* Pressing removes the offset: the button slides into its own shadow. *\u002F\n    .cc__btn:active {\n      transform: translate(5px, 5px);\n      box-shadow: 0 0 0 #111;\n    }\n    .cc__btn:focus-visible {\n      outline: 3px solid #111;\n      outline-offset: 4px;\n    }\n    .cc__out {\n      font: 700 15px system-ui, sans-serif;\n    }\n    .cc__ring {\n      padding: 24px;\n      border: var(--border);\n      border-radius: var(--radius);\n      background: #c4b5fd;\n      box-shadow: var(--shadow);\n      dt {\n        font-weight: 800;\n      }\n      dd {\n        margin: 2px 0 12px;\n        padding: 10px 14px;\n        border: 2px solid #111;\n        border-radius: 10px;\n        background: #fff;\n      }\n    }\n    .cc__webring {\n      border-radius: 999px;\n      background: #fff;\n      font-weight: 700;\n    }\n    .cc__foot {\n      border-top: 3px solid #111;\n      font: 600 13px system-ui, sans-serif;\n    }\n  }\n\n  @media (max-width: 760px) {\n    .cc__grid {\n      display: block;\n      > * {\n        margin: 0 0 20px;\n      }\n    }\n    .cc__poster {\n      max-width: 260px;\n      margin-left: auto;\n      margin-right: -20px;\n    }\n    .cc__note {\n      max-width: 75%;\n    }\n    .cc__logo span + span {\n      margin-left: 0.6em;\n    }\n    .cc__form {\n      grid-template-columns: minmax(0, 1fr);\n    }\n    .cc__btn {\n      grid-column: 1;\n    }\n    .cc:has(#cc-neo:checked) {\n      .cc__page {\n        padding: 16px 16px 48px;\n      }\n      .cc__poster {\n        margin-right: 0;\n      }\n      .cc__sticker {\n        width: 72px;\n        height: 72px;\n        font-size: 14px;\n      }\n      .cc__sticker--a {\n        top: 64px;\n        right: 12px;\n      }\n      .cc__sticker--b {\n        top: -48px;\n        right: 8px;\n      }\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .cc__ticker-track {\n      animation: none;\n    }\n  }\n}\n\n@keyframes e15-marquee {\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n}","@layer era, shell, skin;\n@layer skin {\n\u002F* Era 15 time bar skin: neubrutalist yellow bar, thick black border, hard shadow. *\u002F\nhtml[data-era-page=\"15\"] .timebar {\n  --tb-bg: #fde047;\n  --tb-fg: #111111;\n  --tb-muted: #111111;\n  --tb-accent: #111111;\n  --tb-accent-fg: #fde047;\n  --tb-notch: #111111;\n  --tb-btn-bg: #ffffff;\n  --tb-btn-border: 3px solid #111111;\n  --tb-btn-radius: 6px;\n  --tb-font: 'Arial Black', 'Helvetica Neue', system-ui, sans-serif;\n  --tb-border: 4px solid #111111;\n  --tb-shadow: 0 -6px 0 #111111;\n}\nhtml[data-era-page=\"15\"] .timebar__years {\n  color: #111111;\n  font-weight: 800;\n}\nhtml[data-era-page=\"15\"] .timebar__notch {\n  border-radius: 4px;\n  background: #ffffff;\n}\nhtml[data-era-page=\"15\"] .timebar__notch[aria-current='page'] {\n  background: #111111;\n  color: #fde047;\n  box-shadow: 3px 3px 0 #ff6b9d;\n}\nhtml[data-era-page=\"15\"] .timebar__btn {\n  box-shadow: 3px 3px 0 #111111;\n}\nhtml[data-era-page=\"15\"] .timebar__btn:active {\n  transform: translate(3px, 3px);\n  box-shadow: none;\n}\nhtml[data-era-page=\"15\"] .timebar__btn[aria-pressed='true'],\nhtml[data-era-page=\"15\"] .timebar__btn[aria-expanded='true'] {\n  background: #111111;\n  color: #fde047;\n}\nhtml[data-era-page=\"15\"] .timebar__preview {\n  border: 2px solid #111111;\n  background: #ffffff;\n  color: #111111;\n}\n\n}",[79,81,83,85],{"caption":49,"file":47,"html":80},"\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\">fieldset\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"cc__switch\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> data-trait\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"toggle\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">legend\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>View this page as<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">legend\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:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">input\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"cc-variant\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"cc-raw\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> value\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"raw\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> checked\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\">\"cc-raw\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Raw <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">small\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(2016 brutalist)<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">small\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">input\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"cc-variant\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"cc-neo\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> value\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"neo\"\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\">\"cc-neo\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Neubrutalist <\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">small\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>(2021+)<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">small\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">  <\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\">\"cc__still\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">input\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"checkbox\"\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">=\u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">\"cc-still\"\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\">\"cc-still\"\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>Stop the ticker<\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">label\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">span\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#8DDB8C\">fieldset\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":53,"file":51,"html":82},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.cc:has\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#cc-neo:checked\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --ink\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#111\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --paper\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#fffdf5\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --link\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#111\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --visited\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#111\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --face\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'Arial Black'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'Helvetica Neue'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, Inter, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">system-ui\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">sans-serif\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --mono\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">ui-monospace\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'SF Mono'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, Menlo, Consolas, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">monospace\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">3\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> solid\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #111\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --shadow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">6\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 6\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #111\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F69D50\">  --radius\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#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\">#fde047\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  font-family\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">system-ui\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">-apple-system\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#96D0FF\">'Segoe UI'\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, Roboto, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">sans-serif\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">500\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"caption":56,"file":51,"html":84},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.cc__btn\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  padding\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">12\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 28\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\">  border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">8\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\">  background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#ff6b9d\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#111\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">900\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 18\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--face\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\">5\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 5\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #111\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  cursor\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">pointer\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  transition\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: transform \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">80\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">ms\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, box-shadow \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">80\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">ms\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\">.cc__btn:hover\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  background\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#fb923c\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#768390\">\u002F* Pressing removes the offset: the button slides into its own shadow. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.cc__btn:active\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  transform\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">translate\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">5\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">, \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">5\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\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> 0\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> #111\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":59,"file":51,"html":86},"\u003Cpre class=\"shiki github-dark-dimmed\" style=\"background-color:#22272e;color:#adbac7\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.cc__ticker\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  overflow\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">hidden\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  border\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--border\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\">#000\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  color\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#0f0\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  font\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">14\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">28\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">px\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> var\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#F69D50\">--mono\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  white-space\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">nowrap\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.cc__ticker-track\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  display\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">inline-flex\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  animation\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: e15-marquee \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">40\u003C\u002Fspan>\u003Cspan style=\"color:#F47067\">s\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> linear\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\"> infinite\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ADBAC7\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">.cc:has\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">(\u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">#cc-still:checked\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">) \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">.cc__ticker-track\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6CB6FF\">  animation-play-state\u003C\u002Fspan>\u003Cspan style=\"color:#ADBAC7\">: \u003C\u002Fspan>\u003Cspan style=\"color:#6CB6FF\">paused\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>",1791223402124]