anchor.diff:          footer.
             This color scheme is based on the
             #[a(rel="external" href="http://www.thinkwithportals.com/"): cite Portal] video game series.
  -        section
  -          h3 Main Portal Colors
  -          dl.o-FlexContainer
  -            dt.o-Box.ColorTitle.u-bgc_aperture_white(class="!w:1o2 !xo:0") Aperture White
  -            dd.o-Box.ColorDescr.u-bgc_aperture_white(class="!w:1o2 !xo:1")
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_aperture_black(class="!w:1o2 !xo:0").h-darkbg Aperture Black
  -            dd.o-Box.ColorDescr.u-bgc_aperture_black(class="!w:1o2 !xo:1").h-darkbg
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_lakesuperior(class="!w:1o2 !xo:1").h-darkbg Lake Superior
  -            dd.o-Box.ColorDescr.u-bgc_lakesuperior(class="!w:1o2 !xo:2").h-darkbg
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_facilityabyss(class="!w:1o2 !xo:1").h-darkbg Facility Abyss
  -            dd.o-Box.ColorDescr.u-bgc_facilityabyss(class="!w:1o2 !xo:2").h-darkbg
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_atlas(class="!w:1o2 !xo:2").h-darkbg Atlas
  -            dd.o-Box.ColorDescr.u-bgc_atlas(class="!w:1o2 !xo:3").h-darkbg
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_pbody(class="!w:1o2 !xo:2") P-Body
  -            dd.o-Box.ColorDescr.u-bgc_pbody(class="!w:1o2 !xo:3")
  -              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
  -          h3 UI Component Colors
  -          dl.o-FlexContainer
  -            dt.o-Box.ColorTitle.u-bgc_deploying(class="!w:1o2 !xo:0").h-darkbg Deploying
  -            dd.o-Box.ColorDescr.u-bgc_deploying(class="!w:1o2 !xo:1").h-darkbg
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_hereye(class="!w:1o2 !xo:0") HER Eye
  -            dd.o-Box.ColorDescr.u-bgc_hereye(class="!w:1o2 !xo:1")
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_neurotoxin(class="!w:1o2 !xo:1") Neurotoxin
  -            dd.o-Box.ColorDescr.u-bgc_neurotoxin(class="!w:1o2 !xo:2")
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_bridges(class="!w:1o2 !xo:1") Bridges of Light
  -            dd.o-Box.ColorDescr.u-bgc_bridges(class="!w:1o2 !xo:2")
  -              p.
  -                Hard Light Bridges are literally massless, yet they can sustain
  -                infinite weight, as Chell can attest to.
  -              ul
  -                li Info components
  -            dt.o-Box.ColorTitle.u-bgc_companion(class="!w:1o2 !xo:2") Heart of a Companion
  -            dd.o-Box.ColorDescr.u-bgc_companion(class="!w:1o2 !xo:3")
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_vilify(class="!w:1o2 !xo:2").h-darkbg Vilify
  -            dd.o-Box.ColorDescr.u-bgc_vilify(class="!w:1o2 !xo:3").h-darkbg
  -              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
  -          h3 More Portal Colors
  -          dl.o-FlexContainer
  -            dt.o-Box.ColorTitle.u-bgc_cavescaves(class="!w:1o2 !xo:0").h-darkbg Cave&rsquo;s Caves
  -            dd.o-Box.ColorDescr.u-bgc_cavescaves(class="!w:1o2 !xo:1").h-darkbg
  -              p.
  -                Cave&rsquo;s underground salt mines were the ideal venue for early
  -                test chambers.
  -            dt.o-Box.ColorTitle.u-bgc_asbestos(class="!w:1o2 !xo:0") Asbestos
  -            dd.o-Box.ColorDescr.u-bgc_asbestos(class="!w:1o2 !xo:1")
  -              p.
  -                The forgotten underground test chambers are ridden with this harmful
  -                substance. Or so Mr.&nbsp;Johnson says.
  -            dt.o-Box.ColorTitle.u-bgc_repulsion(class="!w:1o2 !xo:1") Repulsion Gel
  -            dd.o-Box.ColorDescr.u-bgc_repulsion(class="!w:1o2 !xo:2")
  -              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
  -            dt.o-Box.ColorTitle.u-bgc_propulsion(class="!w:1o2 !xo:1") Propulsion Gel
  -            dd.o-Box.ColorDescr.u-bgc_propulsion(class="!w:1o2 !xo:2")
  -              p. #[i Forwarding] the cause of science.
  -              ul
  -                li subheading text
  +        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);")
  
positive.code:         top: 0.75rem;
        }
        .ColorTitle {
          font-weight: 600;
          text-align: center;
          font-size: 1.25rem;
          line-height: 1.2;
        }
  
negative.code:         //- 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.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
  