anchor.diff:          //- p.
           //-   Then there&rsquo;s the added bonus of its name being based off of the Moon, which is an
           //-   integral part of #[cite Portal] gameplay.
  -        section
  -          h3 #[cite Solarized] Color Scheme
  -          dl.o-FlexContainer
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:0 a-bc-s03").h-darkbg Solarized Base03
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:1 a-bc-s03").h-darkbg
  -              ul
  -                li dark code background
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:0 a-bc-s3") Solarized Base3
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:1 a-bc-s3")
  -              ul
  -                li light code background
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:1 a-bc-s02").h-darkbg Solarized Base02
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:2 a-bc-s02").h-darkbg
  -              ul
  -                li dark code border
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:1 a-bc-s2") Solarized Base2
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:2 a-bc-s2")
  -              ul
  -                li light code border
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:2 a-bc-s01") Solarized Base01
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:3 a-bc-s01")
  -              ul
  -                li light code emphasis
  -                li dark code comment
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:2 a-bc-s1") Solarized Base1
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:3 a-bc-s1")
  -              ul
  -                li light code comment
  -                li dark code emphasis
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:3 a-bc-s00") Solarized Base00
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:4 a-bc-s00")
  -              ul
  -                li light code text
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:3 a-bc-s0") Solarized Base0
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:4 a-bc-s0")
  -              ul
  -                li dark code text
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:4 a-bc-sr") Solarized Red
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:5 a-bc-sr")
  -              ul
  -                li programming control (#[code if], #[code for], #[code switch], #[code return])
  -                li other control (#[code public], #[code private], #[code static])
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:4 a-bc-sc") Solarized Cyan
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:5 a-bc-sc")
  -              ul
  -                li HTML attribute values
  -                li CSS property values
  -                li strings (except in CSS#[sup: a.Rf#rf-cssstring(rel="this" href="#fn-cssstring") 2])
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:5 a-bc-so") Solarized Orange
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:6 a-bc-so")
  -              ul
  -                li delimiters and operators (#[code +], #[code ==], #[code .], #[code new], #[code typeof])
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:5 a-bc-sb") Solarized Blue
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:6 a-bc-sb")
  -              ul
  -                li HTML tags
  -                li CSS/Less class selectors
  -                li JS function definitions and function calls
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:6 a-bc-sy") Solarized Yellow
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:7 a-bc-sy")
  -              ul
  -                li HTML attribute names
  -                li CSS property names
  -                li pre-defined keywords and types (#[code var], #[code function], #[code int], #[code class])
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:6 a-bc-sv") Solarized Violet
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:7 a-bc-sv")
  -              ul
  -                li variable names
  -                li function arguments
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:7 a-bc-sg") Solarized Green
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:8 a-bc-sg")
  -              ul
  -                li HTML characters and entities
  -                li CSS numeric values with units
  -                li constant values (numbers, colors, booleans, #[code null])
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:7 a-bc-sm") Solarized Magenta
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:8 a-bc-sm")
  -              ul
  -                li string delimiters (#[code &quot;] and #[code &apos;])
  -                li #[sup: a.Fn#fn-cssstring(rel="this" href="#rf-cssstring") 2]CSS strings
  -                li object/class/function references (custom, built-in, #[code this], #[code prototype], #[code String], #[code Array])
  -        section
  -          h3 #[i Lunarized] Color Scheme
  -          dl.o-FlexContainer
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:0 a-bc-l03").h-darkbg Lunarized Base03
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:1 a-bc-l03").h-darkbg
  -              p.ColorRelation inverse of Solarized Base 03
  -              ul
  -                li dark code background
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:0 a-bc-l3") Lunarized Base3
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:1 a-bc-l3")
  -              p.ColorRelation inverse of Solarized Base 3
  -              ul
  -                li light code background
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:1 a-bc-l02").h-darkbg Lunarized Base02
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:2 a-bc-l02").h-darkbg
  -              p.ColorRelation inverse of Solarized Base 02
  -              ul
  -                li dark code border
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:1 a-bc-l2") Lunarized Base2
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:2 a-bc-l2")
  -              p.ColorRelation inverse of Solarized Base 2
  -              ul
  -                li light code border
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:2 a-bc-l01") Lunarized Base01
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:3 a-bc-l01")
  -              p.ColorRelation inverse of Solarized Base 01
  -              ul
  -                li light code emphasis
  -                li dark code comment
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:2 a-bc-l1") Lunarized Base1
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:3 a-bc-l1")
  -              p.ColorRelation inverse of Solarized Base 1
  -              ul
  -                li light code comment
  -                li dark code emphasis
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:3 a-bc-l00") Lunarized Base00
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:4 a-bc-l00")
  -              p.ColorRelation inverse of Solarized Base 00
  -              ul
  -                li light code text
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:3 a-bc-l0") Lunarized Base0
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:4 a-bc-l0")
  -              p.ColorRelation inverse of Solarized Base 0
  -              ul
  -                li dark code text
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:4 a-bc-lc") Lunarized Cyan
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:5 a-bc-lc"): p.ColorRelation complement of Solarized Red
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:4 a-bc-lr") Lunarized Red
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:5 a-bc-lr"): p.ColorRelation complement of Solarized Cyan
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:5 a-bc-lb") Lunarized Blue
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:6 a-bc-lb"): p.ColorRelation complement of Solarized Orange
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:5 a-bc-lo") Lunarized Orange
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:6 a-bc-lo"): p.ColorRelation complement of Solarized Blue
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:6 a-bc-li") Lunarized Indigo
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:7 a-bc-li"): p.ColorRelation complement of Solarized Yellow
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:6 a-bc-ly") Lunarized Yellow
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:7 a-bc-ly"): p.ColorRelation complement of Solarized Violet
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:7 a-bc-lv") Lunarized Violet
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:8 a-bc-lv"): p.ColorRelation complement of Solarized Green
  -            dt.o-Box.ColorTitle(class="!w:1o2 !xo:7 a-bc-lg") Lunarized Green
  -            dd.o-Box.ColorDescr(class="!w:1o2 !xo:8 a-bc-lg"): p.ColorRelation complement of Solarized Magenta
  +        section.o-FlexContainer
  +          h3(class="!w:1o1") #[cite Solarized] Color Scheme
  +          section.o-Box(class="!w:1o2 a-bc-s03").h-darkbg
  +            h4.ColorTitle Solarized Base03
  +            ul
  +              li dark code background
  +          section.o-Box(class="!w:1o2 a-bc-s3")
  +            h4.ColorTitle Solarized Base3
  +            ul
  +              li light code background
  +          section.o-Box(class="!w:1o2 a-bc-s02").h-darkbg
  +            h4.ColorTitle Solarized Base02
  +            ul
  +              li dark code border
  +          section.o-Box(class="!w:1o2 a-bc-s2")
  +            h4.ColorTitle Solarized Base2
  +            ul
  +              li light code border
  +          section.o-Box(class="!w:1o2 a-bc-s01")
  +            h4.ColorTitle Solarized Base01
  +            ul
  +              li light code emphasis
  +              li dark code comment
  +          section.o-Box(class="!w:1o2 a-bc-s1")
  +            h4.ColorTitle Solarized Base1
  +            ul
  +              li light code comment
  +              li dark code emphasis
  +          section.o-Box(class="!w:1o2 a-bc-s00")
  +            h4.ColorTitle Solarized Base00
  +            ul
  +              li light code text
  +          section.o-Box(class="!w:1o2 a-bc-s0")
  +            h4.ColorTitle Solarized Base0
  +            ul
  +              li dark code text
  +          section.o-Box(class="!w:1o2 a-bc-sr")
  +            h4.ColorTitle Solarized Red
  +            ul
  +              li programming control (#[code if], #[code for], #[code switch], #[code return])
  +              li other control (#[code public], #[code private], #[code static])
  +          section.o-Box(class="!w:1o2 a-bc-sc")
  +            h4.ColorTitle Solarized Cyan
  +            ul
  +              li HTML attribute values
  +              li CSS property values
  +              li strings (except in CSS#[sup: a.Rf#rf-cssstring(rel="this" href="#fn-cssstring") 2])
  +          section.o-Box(class="!w:1o2 a-bc-so")
  +            h4.ColorTitle Solarized Orange
  +            ul
  +              li delimiters and operators (#[code +], #[code ==], #[code .], #[code new], #[code typeof])
  +          section.o-Box(class="!w:1o2 a-bc-sb")
  +            h4.ColorTitle Solarized Blue
  +            ul
  +              li HTML tags
  +              li CSS/Less class selectors
  +              li JS function definitions and function calls
  +          section.o-Box(class="!w:1o2 a-bc-sy")
  +            h4.ColorTitle Solarized Yellow
  +            ul
  +              li HTML attribute names
  +              li CSS property names
  +              li pre-defined keywords and types (#[code var], #[code function], #[code int], #[code class])
  +          section.o-Box(class="!w:1o2 a-bc-sv")
  +            h4.ColorTitle Solarized Violet
  +            ul
  +              li variable names
  +              li function arguments
  +          section.o-Box(class="!w:1o2 a-bc-sg")
  +            h4.ColorTitle Solarized Green
  +            ul
  +              li HTML characters and entities
  +              li CSS numeric values with units
  +              li constant values (numbers, colors, booleans, #[code null])
  +          section.o-Box(class="!w:1o2 a-bc-sm")
  +            h4.ColorTitle Solarized Magenta
  +            ul
  +              li string delimiters (#[code &quot;] and #[code &apos;])
  +              li #[sup: a.Fn#fn-cssstring(rel="this" href="#rf-cssstring") 2]CSS strings
  +              li object/class/function references (custom, built-in, #[code this], #[code prototype], #[code String], #[code Array])
  +        section.o-FlexContainer
  +          h3(class="!w:1o1") #[i Lunarized] Color Scheme
  +          section.o-Box(class="!w:1o2 a-bc-l03").h-darkbg
  +            h4.ColorTitle Lunarized Base03
  +            p.ColorRelation inverse of Solarized Base 03
  +            ul
  +              li dark code background
  +          section.o-Box(class="!w:1o2 a-bc-l3")
  +            h4.ColorTitle Lunarized Base3
  +            p.ColorRelation inverse of Solarized Base 3
  +            ul
  +              li light code background
  +          section.o-Box(class="!w:1o2 a-bc-l02").h-darkbg
  +            h4.ColorTitle Lunarized Base02
  +            p.ColorRelation inverse of Solarized Base 02
  +            ul
  +              li dark code border
  +          section.o-Box(class="!w:1o2 a-bc-l2")
  +            h4.ColorTitle Lunarized Base2
  +            p.ColorRelation inverse of Solarized Base 2
  +            ul
  +              li light code border
  +          section.o-Box(class="!w:1o2 a-bc-l01")
  +            h4.ColorTitle Lunarized Base01
  +            p.ColorRelation inverse of Solarized Base 01
  +            ul
  +              li light code emphasis
  +              li dark code comment
  +          section.o-Box(class="!w:1o2 a-bc-l1")
  +            h4.ColorTitle Lunarized Base1
  +            p.ColorRelation inverse of Solarized Base 1
  +            ul
  +              li light code comment
  +              li dark code emphasis
  +          section.o-Box(class="!w:1o2 a-bc-l00")
  +            h4.ColorTitle Lunarized Base00
  +            p.ColorRelation inverse of Solarized Base 00
  +            ul
  +              li light code text
  +          section.o-Box(class="!w:1o2 a-bc-l0")
  +            h4.ColorTitle Lunarized Base0
  +            p.ColorRelation inverse of Solarized Base 0
  +            ul
  +              li dark code text
  +          section.o-Box(class="!w:1o2 a-bc-lc")
  +            h4.ColorTitle Lunarized Cyan
  +            p.ColorRelation complement of Solarized Red
  +          section.o-Box(class="!w:1o2 a-bc-lr")
  +            h4.ColorTitle Lunarized Red
  +            p.ColorRelation complement of Solarized Cyan
  +          section.o-Box(class="!w:1o2 a-bc-lb")
  +            h4.ColorTitle Lunarized Blue
  +            p.ColorRelation complement of Solarized Orange
  +          section.o-Box(class="!w:1o2 a-bc-lo")
  +            h4.ColorTitle Lunarized Orange
  +            p.ColorRelation complement of Solarized Blue
  +          section.o-Box(class="!w:1o2 a-bc-li")
  +            h4.ColorTitle Lunarized Indigo
  +            p.ColorRelation complement of Solarized Yellow
  +          section.o-Box(class="!w:1o2 a-bc-ly")
  +            h4.ColorTitle Lunarized Yellow
  +            p.ColorRelation complement of Solarized Violet
  +          section.o-Box(class="!w:1o2 a-bc-lv")
  +            h4.ColorTitle Lunarized Violet
  +            p.ColorRelation complement of Solarized Green
  +          section.o-Box(class="!w:1o2 a-bc-lg")
  +            h4.ColorTitle Lunarized Green
  +            p.ColorRelation complement of Solarized Magenta
           section
             h3 Interactive Example
             form.o-FlexContainer
  
positive.code:         top: 0.75rem;
        }
        .ColorTitle {
          font-weight: 600;
          text-align: center;
          font-size: 1.25rem;
          line-height: 1.2;
        }
  
negative.code:         footer.
            This color scheme is based on the
            #[a(rel="external" href="http://www.thinkwithportals.com/"): cite Portal] video game series.
          section.o-FlexContainer
            h3(class="!w:1o1") Main Portal Colors
            section.o-Box(class="!w:1o2").u-bgc_aperture_white
              h4.ColorTitle Aperture White
              p: span.ColorCode #f2f7ff
              p.
                The purity of Aperture Science in all its glory. This dazzling
                brilliance of bluish light seen on the portalable panels coated with
                Conversion Gel makes the background emit an eerie glow, like the full moon.
              ul
                li body background
            section.o-Box(class="!w:1o2").u-bgc_aperture_black.h-darkbg
              h4.ColorTitle Aperture Black
              p: span.ColorCode #0d0800
              p.
                The polar opposite of Aperture White. Representing the true dark nature
                of the Enrichment Center, this is the color of the panels that inhibit
                portals. A hint of orange is infinitesimally noticeable. What better way to
                complement the background color than the color of normal text?
              ul
                li body text
            section.o-Box(class="!w:1o2").u-bgc_lakesuperior.h-darkbg
              h4.ColorTitle Lake Superior
              p: span.ColorCode #120099
              p.
                This Great Lake borders #[a Ontonagon, MI], the location of the
                Aperture Science Enrichment Center. A perfect fit for superior headings on
                a page.
              ul
                li major heading text
                li ledes and drop caps
            section.o-Box(class="!w:1o2").u-bgc_facilityabyss.h-darkbg
              h4.ColorTitle Facility Abyss
              p: span.ColorCode #3d6166
              p.
                This color can be seen in the endless depths of the subterranean
                Enrichment Center. This color is for #[i minor] headings of a page.
              ul
                li minor heading text
            section.o-Box(class="!w:1o2").u-bgc_atlas.h-darkbg
              h4.ColorTitle Atlas
              p: span.ColorCode #0062ff
              p.
                Short and stout, Atlas is one of the two robots used for testing.
                Untouched hyperlinks are dedicated to his digital iris.
              ul
                li link text
            section.o-Box(class="!w:1o2").u-bgc_pbody
              h4.ColorTitle P-Body
              p: span.ColorCode #ff9d00
              p.
                Tall and wiry, P-body is one of the two robots used for testing.
                Hovered hyperlinks are dedicated to his (or her?) digital iris.
              ul
                li hover link text
          section.o-FlexContainer
            h3(class="!w:1o1") UI Component Colors
            section.o-Box(class="!w:1o2").u-bgc_deploying.h-darkbg
              h4.ColorTitle Deploying
              p: span.ColorCode #ff4b33
              p.
                The one word you never want to hear without a portal gun. Just as the
                iris of a Sentry Turret, this color is briefly seen, providing a subtle accent
                on the site.
              ul
                li Danger components
            section.o-Box(class="!w:1o2").u-bgc_hereye
              h4.ColorTitle HER Eye
              p: span.ColorCode #ffe433
              p.
                This color alone will scare the
                prokaryotic-microorganism-infested-fecal-matter out of you. See where you can
                find it. You monster.
              ul
                li Caution components
            section.o-Box(class="!w:1o2").u-bgc_neurotoxin
              h4.ColorTitle Neurotoxin
              p: span.ColorCode #9acc7a
              p.
                Long ago an #[i accident] resulted in the unleashing of
                this deadly vapor and the murdering of the entire human staff of
                Aperture Laboratories. Some say it could happen again, but this time on the
                test subjects&hellip;
              ul
                li Success components
            section.o-Box(class="!w:1o2").u-bgc_bridges
              h4.ColorTitle Bridges of Light
              p: span.ColorCode #99daff
              p.
                Hard Light Bridges are literally massless, yet they can sustain
                infinite weight, as Chell can attest to.
              ul
                li Info components
            section.o-Box(class="!w:1o2").u-bgc_companion
              h4.ColorTitle Heart of a Companion
              p: span.ColorCode #ff99c0
              p.
                Believed to be sentient by some and alive by others, the
                Weighted Companion Cube has been said to provide advice and display emotions
                such as brevity, care, and love. It is even believed to hum opera when near
                a friend. A perfect color for helpful elements on a Web page.
              ul
                li Help components
            section.o-Box(class="!w:1o2").u-bgc_vilify.h-darkbg
              h4.ColorTitle Vilify
              p: span.ColorCode #9d00ff
              p: q(class="!fs:t" cite="https://www.youtube.com/watch?v=G-Vg2YS-sFE").
                You&rsquo;ve
                got sucker&rsquo;s luck. Have you given up? Does it feel
                like a trial? Does it trouble your mind the way you trouble mine?
          section.o-FlexContainer
            h3(class="!w:1o1") More Portal Colors
            section.o-Box(class="!w:1o2").u-bgc_cavescaves.h-darkbg
              h4.ColorTitle Cave&rsquo;s Caves
              p: span.ColorCode #80522b
              p.
                Cave&rsquo;s underground salt mines were the ideal venue for early
                test chambers.
            section.o-Box(class="!w:1o2").u-bgc_asbestos
              h4.ColorTitle Asbestos
              p: span.ColorCode #bf9300
              p.
                The forgotten underground test chambers are ridden with this harmful
                substance. Or so Mr.&nbsp;Johnson says.
            section.o-Box(class="!w:1o2").u-bgc_repulsion
              h4.ColorTitle Repulsion Gel
              p: span.ColorCode #33b4ff
              p.
                Good news, you&rsquo;re not part of the control group; you get the gel.
                Bad news, it does #[em not] like the human skeleton. Turns out you might
                just break every bone in your legs anyway.
              ul
                li code/kbd/samp on print
            section.o-Box(class="!w:1o2").u-bgc_propulsion
              h4.ColorTitle Propulsion Gel
              p: span.ColorCode #ff7e33
              p #[i Forwarding] the cause of science.
              ul
                li subheading text
          section
            h3 Gray Tones and Shadows
            aside.o-Box.o-Box--dialog(style="margin-bottom: 1.5rem; border: 1px solid #9acc7a; background: rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 0.5rem 0rem rgba(0,0,0,0.2);")
  