/* ---------------- */
/*!------ DEV ----- */
/* ---------------- */ 

:root
{
    --link: var(--blue);
    --button-bg: var(--blue);
    --button-text: var(--white);
}


/* Hero */

.card.hero
{
    content: "";
    display: grid;

    grid-template-columns: 1fr;
    grid-gap: 1em;

    margin-top: 0;
    padding: 1em 1.25em;

    font-size: 1em;
    font-weight: normal;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
}
.card.hero.gluedToBottom
{
    margin-bottom: -2rem;
}

.card.hero img
{
    width: 100%;
}

.card.hero .cardHeroImageBleed
{
    display: grid;
    align-content: center;
}

/* SDK Launch */

.card.hero.sdkLaunch
{
    background-color: var(--link);
    --text: var(--white);
    --button-bg: var(--brand-yellow);
    --button-text: var(--black);

    padding-right: 0;
    padding-top: .75em;
    padding-bottom: .25em;
}

.card.hero.sdkLaunch a,
.card.hero.sdkLaunch p,
.card.hero.sdkLaunch menu
{
    padding-right: 1.25em;
}

.card.hero a.titleLink
{
    font-size: 2em;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}
    .card.hero a.titleLink.image
    {
        text-indent: -9999px;
        color: transparent;
    }

.card.hero.sdkLaunch a::before
{
    border: 0.3rem solid var(--brand-yellow);
}

.card.hero.sdkLaunch menu.actions
{
    width: auto;
    text-align: left;
    display: flex;
    flex-direction: column;
}

a#downloadSDKforWindows.action,
a#downloadSDKforLinux.action,
a#downloadSDKforMacOS.action,
a#SDKChangelog.action
{
    display: block;
    color: inherit;
    background: inherit;
    opacity: .7;
    font-size: 90%;
    line-height: 1.333em;
    font-weight: 500;
    margin: 0;
    text-align: left;
    text-decoration: underline;
    order: 1;
}
    a#downloadSDKforWindows.action:hover,
    a#downloadSDKforLinux.action:hover,
    a#downloadSDKforMacOS.action:hover,
    a#SDKChangelog.action
    {
        opacity: 1;
    }

a#downloadSDKforWindows span.actionInfo,
a#downloadSDKforLinux span.actionInfo,
a#downloadSDKforMacOS span.actionInfo
{
    display: none;
}

/* Big button */
.os-win a#downloadSDKforWindows.action,
.os-linux a#downloadSDKforLinux.action,
.os-mac a#downloadSDKforMacOS.action,
.os-unknown a#downloadSDKforMacOS.action
{
    text-align: left;
    padding: .5em 1em;
    margin: .25em auto;
    width: 100%;
    background-color: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-size: 1em;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.0075em;
    border: 0;
    border-radius: 0.6rem;
    opacity: 1;
    order: unset;
}

.os-win a#downloadSDKforWindows span.actionInfo,
.os-linux a#downloadSDKforLinux span.actionInfo,
.os-mac a#downloadSDKforMacOS span.actionInfo,
.nojs a#downloadSDKforMacOS span.actionInfo
{
    display: inline-block;
}

a#SDKChangelog.action
{
    position: relative;
    left: -.1em;
    text-decoration: none;
}
    a#SDKChangelog:hover
    {
        text-decoration: underline;
    }
    a#SDKChangelog:before
    {
        content: '';
        display: inline-block;

        height: 1.1em;
        width: 1.1em;
        margin-right: .1em;
        vertical-align: -.15em;
        border: none;

        background-image: url("../images/new.057b0f9769c1.svg");
        background-size: contain;
        background-position: 50% 50%;
    }

/* Pulp Launch */

.card.hero.pulpLaunch
{
    background-color: var(--muted-green);
    --text: rgba(0,0,0,.8);

}
.card.hero.pulpLaunch a.titleLink
{
    font-size: 2.5em;
    display: block;
    background-image: url("../images/dev-pulp-logo-standalone.fcec668bcc52.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.card.hero.pulpLaunch a::before
{
  border: 0.3rem solid var(--green);
}

.card.hero.pulpLaunch .featureLink
{
    background: var(--brand-yellow);
}

/* Old Pulp Launch, clean up above once the SDK is released */

#cardHero
{
    content: "";
    display: grid;

    grid-template-columns: 1fr;

    grid-gap: 1em;

    margin-top: 0;
    padding: 1em 1.25em;

    font-size: 1em;
    font-weight: normal;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
}

@media (min-width:670px)
{
    #cardHero
    {
        grid-template-columns: 2fr 5fr;
    }
}

#cardHero.gluedToBottom
{
    margin-bottom: -2rem;
}

#cardHero img
{
    width: 100%;
}

#cardHero a.titleLink
{
    display: block;
    color: transparent;
    text-indent: -9999px;
    width: 100%;
    height: 2em;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
}

#cardHero.pulpLaunch
{
    background-color: var(--muted-green);
    --text: rgba(0,0,0,.8);

}
#cardHero.pulpLaunch a.titleLink
{
    background-image: url("../images/dev-pulp-logo-standalone.fcec668bcc52.svg");
    opacity: 1;
}

#cardHero.pulpLaunch a::before
{
  border: 0.3rem solid var(--green);
}

#cardHero.pulpLaunch .featureLink
{
    background: var(--brand-yellow);
}

/* End of Old Pulp Launch, clean up above once the SDK is released */


/* Dev promo, general-purpose */

.card.hero.devPromo1
{
    width: 100%;
    height: 30rem;
    margin: 2rem 0 2rem 0;
    font-size: 0;
    color: transparent;

    background-image: url("../images/Dev-promo-graphic-1.474ae478028c.png");
    background-size: contain;
    background-position: 50% 50%;

}

section h2
{
  font-size: 2em;
  line-height: 1.1em;
  font-weight: 700;
  letter-spacing: -0.0075em;
  text-align: center;
  width: 100%;
}

section h2.gluedToTop
{
    margin-top: 0;
}

dt,
.card table thead
{
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: .5em;
}

dd
{
    margin-left: 0;
    margin-bottom: 2em;
}

/* Promo codes table, general-purpose */

.card table
{
   border-spacing: 1em;
}


/* Internal nav */

nav.internal-nav li
{
    font-size: .88em;
}

.pushDown
{
    margin-top: 4em !important;
}

/* Mirror */

#mirror
{
    /* --page-bg:  */
}

#mirror h1
{
    color: transparent;
    text-indent: -99999px;
    
    height: 6em;
    margin: 0;
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../images/mirror-title-light.bf4c8ae9f79a.svg");
}
    @media (prefers-color-scheme: dark)
    {
        #mirror h1
        {
            background-image: url("../images/mirror-title-dark.bbd4cd7535c6.svg");
        }
    }

#mirror h2
{
    margin: 0 0 .75em 0;
}

#mirrorHero
{
    max-width: 100%;
    border-radius: .3em;
    margin: 1em 0;
}

#mirrorLinks ul
{
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em 0;
    
    display: grid;
    column-gap: 1em;
    row-gap: .25em;
    grid-template-columns: 1fr 1fr;
}
#mirrorLinks ul li
{
    display: inline-block;
    /* border: 2px solid red; */
    margin: 0;
    padding: 0;
    text-align: center;
}

.nojs     #downloadMirrorForMacOS,
.os-mac     #downloadMirrorForMacOS,
.os-win #downloadMirrorForWindows,
.os-linux   #downloadMirrorForLinux
{
    grid-column: 1 / span 2;
    order: 1;
    padding-bottom: 1em;
    text-align: center;
}
    .nojs     #downloadMirrorForMacOS a,
    .os-mac     #downloadMirrorForMacOS a,
    .os-win #downloadMirrorForWindows a,
    .os-linux   #downloadMirrorForLinux a
    {
        padding: 0.2em 0.75em 0.3em 0.75em;
        margin-bottom: .5em;
        border-radius: 1em;
    
        white-space: nowrap;
        font-size: 150%;
        font-weight: 700;
        text-decoration: none;
        text-transform: uppercase;        
    
        background: var(--link);
        color: var(--button-text);    
    }
    .nojs     #downloadMirrorForMacOS a:hover,
    .os-mac     #downloadMirrorForMacOS a:hover,
    .os-win #downloadMirrorForWindows a:hover,
    .os-linux   #downloadMirrorForLinux a:hover
    {
        background: var(--tomato-red);
        color: var(--white);
    }
    
    /* Alignments */
    .os-win     #downloadMirrorForMacOS,
    .os-win     #downloadMirrorForLinux,
    .os-linux   #downloadMirrorForMacOS,    
    .os-linux   #downloadMirrorForWindows,    
    .os-mac     #downloadMirrorForLinux,  
    .os-mac     #downloadMirrorForWindows    
    {
        text-align: center;
    }

#downloadMirrorForMacOS,
#downloadMirrorForWindows,
#downloadMirrorForLinux
{
    color: var(--subtle);
    font-size: 100%;
    line-height: 1.5em;
    font-weight: normal;
    
    grid-column: 1 / span 2;
    order: 2;
    align-content: right;
}
    #downloadMirrorForMacOS a:hover,
    #downloadMirrorForWindows a:hover,
    #downloadMirrorForLinux :hover
    {
        color: var(--link);
    }
    
    #mirror ul.columns
    {
        list-style: none;
        padding: 0;
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 3em;
        place-items: center;
    }
    #mirror ul.columns li a
    {
        text-decoration: none;
        color: var(--text);
        font-weight: 700;
        font-size: 125%;
    }
    
    #mirror ul.columns li
    {
        
    }
    
    #mirrorMore
    {
        margin: 1em 0 3em 0;
    }
    
    #mirror ul.columns li a:before
    {
        display: block;
        width: 100%;
        content: "";
        position: relative;
        background-color: var(--link);
        -webkit-mask-size: contain;
        -webkit-mask-position: center center;
        -webkit-mask-repeat: no-repeat;        
        height: 2em;
        margin-bottom: 0.5em;        
    }
        #mirror ul.columns li #mirrorArticle:before
        {
            -webkit-mask-image: url("../images/article.f0bfeb2025de.svg");
        }
        #mirror ul.columns li #mirrorVideo:before
        {
            -webkit-mask-image: url("../images/play.cef285e23997.svg");
        }


/* ! Cards */

ul.cards
{
    list-style: none;
    padding: 0;
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}

ul.cards>li /* single card */
{
    display: grid;
    padding: 1em 1.25em;
    border-radius: 1rem;
    background-color: var(--card-bg);
    position: relative;
}

.cards .card.wide
{
    grid-column: 1 / span 2;
}

ul.cards li#cardSDK h3::before
{
    background-image: url("../images/playdate-sdk.5f8c8fec6ec7.svg")
}

ul.cards>li h3
{
    margin: 0;
    font-size: 1.5em;
    line-height: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

ul.cards>li h3 + p
{
    margin-top: .5em;
}

#cardMirror ul
{
    display: flex;
    flex-direction: column;
}

#cardMirror ul li
{
    /* display: contents; */
}

.cards .card > *
{
    width: 100%;
}

    ul.cards>li.support
    {
        padding-top: 0;
    }
  ul.cards>li.support::before
  {
    content:" ";
    display: block;
    position: relative;
    top: -.6em;
    left: -.8em;
    width: 0px;
    height: 0px;

    border-left: .8em solid transparent;
    border-right: .8em solid transparent;
    border-bottom: .8em solid var(--card-bg);
    transition: 250ms ease-in-out border;

    transform: rotate(-135deg);
  }
  ul.cards>li.wholeCardLink:hover.support::before
  {
      border-bottom: .8em solid var(--accent);
  }
      ul.cards>li.support.supportTailRight::before
      {
         left: calc(100% - .8em);
         transform: rotate(135deg);
      }

  ul.cards>li h3::before
  {
    content: '';
    display: inline-block;
    vertical-align: -.4em;
    margin-right: .4em;
    width: 1.5em;
    height: 1.5em;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }

  ul.cards li#cardInsidePlaydate .featureLink
  {
      text-transform: inherit;
      font-size: 105%;
  }

  ul.cards li#cardInsidePlaydate h3::before
  {
    background-image: url("../images/ip-favicon-effects.75e209559617.png")
  }

  ul.cards li#cardCaps h3::before
  {
    background-image: url("../images/dev-section-caps.55ca50857263.svg")
  }

  ul.cards li#cardPulp h3::before
  {
    background-image: url("../images/dev-section-pulp.661ab11b81f3.png")
  }

  ul.cards li#cardMirror h3::before
    {
      background-image: url("../images/dev-playdate-mirror.3cbe0fa52f06.svg")
    }

/*     Nova */

    ul.cards li#cardNova a::before
    {
      border-color: #ff034a;
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
        ul.cards li#cardNova a::before
        {
            border-color: color(display-p3 1 0.012 0.29);
        }
    }   

    ul.cards li#cardNova h3
    {
        text-transform: lowercase;
        font-size: 2.1em;
        margin-top: -0.15em;
        color: #ff034a;        
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
       ul.cards li#cardNova h3
       {
           color: color(display-p3 1 0.012 0.29);
       } 
    }

    ul.cards li#cardNova h3::before
    {
      background-image: url("../images/nova-icon.b80ea9657cef.png");
      width: 1.05em;
      height: 1.05em;
      margin-right: 0.275em;
      margin-top: 0.15em;
    }

    ul.cards #cardNova .featureLink:hover
    {
        background-color: #ff034a;        
        color: white;
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
        ul.cards #cardNova .featureLink:hover
        {
            background-color: color(display-p3 1 0.012 0.29);
        }       
    }

    ul.cards #cardNova p a
    {
        font-weight: 600;
        color: #ff034a;        
    }
    @supports (color: color(display-p3 1 1 1 / 1))
    {
        ul.cards #cardNova p a
        {
            color: color(display-p3 1 0.012 0.29);
        }
    }

  ul.cards li#cardDevForum h3::before
  {
    background-image: url("../images/dev-section-forum.c8669fccd393.svg");
    width: 1.9em;
    margin-right: .1em;
  }

  ul.cards li#cardPulpBugReport h3
  {
/*       font-size: 1.4em; */
  }
  ul.cards li#cardPulpBugReport h3::before
    {
      background-image: url("../images/pulp-bug-report.85fb90053061.svg");
      width: 1.5em;
      margin-right: .3em;
    }

  ul.cards li#cardDiscord h3::before
  {
    background-image: url("../images/dev-discord-logo.1563a3d153d6.svg");
/*       margin-right: .1em; */
  }

  ul.cards li#cardSDKBugReport h3::before
    {
      background-image: url("../images/dev-bugreport.32e56066bd9d.svg");
    }

  ul.cards li#cardDesigningForPlaydate h3
  {

  }

  ul.cards li#cardDesigningForPlaydate h3::before
  {
      background-image: url("../images/dev-designing-for-playdate.63a43bad1457.svg");
  }

  /* Skinny, wide card */
  ul.cards  li.card.cardBanner
  {
      padding-top: .25em;
      padding-bottom: .25em;
  }

  li.card.cardBanner
  {
      padding-left: 4.5em;
      background-size: 2.5em;
      background-position: 1.25em 50%;
      background-repeat: no-repeat;
  }
  ul.cards li#cardDevTeamLink
  {
      background-image: url("../images/dev-team-link.41b5041308e0.svg");
  }
  ul.cards li#cardPulpTeamLink
  {
      background-image: url("../images/pulp-team-link.7c9b2a2d3b49.svg");
  }
  ul.cards li#cardDevLinks
  {
      background-image: url("../images/dev-section-links.71ee47d3eec9.svg");
      background-size: 2.3em;
      background-position: 1.4em 35%;
  }
  ul.cards li#cardDevBadges
  {
    background-image: url("../images/dev-badges.a5ae7ef7adcc.svg");
    background-size: 2.4em;
    background-position: 1.4em 35%;
  }

  li.card.cardBanner a
  {
      color: inherit;
      font-weight: 600;
  }


  ul.cards li ul
  {
    list-style: none;
    padding: 0;
    align-self: end;
  }

  ul.cards li li
  {
    background: none;
    border-radius: 0;
    padding: 0;
    font-weight: 700;
  }

  ul.cards li a
  {
      color:var(--bright);
  }

  ul.cards li.wholeCardLink p
  {
      position: unset;
  }

  ul.cards li.wholeCardLink a::before
  {
      -webkit-box-sizing: border-box;
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      display: inline-block;
      top: 0;
      left: 0;
      z-index: 10;
      border-radius: 1rem;
      border: 0.3rem solid var(--accent);
      transition: 250ms ease-in-out opacity;
      opacity: 0;
  }

  ul.cards li.wholeCardLink a:hover::before
  {
      opacity: 1;
  }

  html#dev #pdt_form
  {
      padding: 3rem 4rem;
      border: 0.3rem solid var(--accent);
      border-radius: 0.5em;
      background-color: var(--card-bg);
      margin-bottom: 6rem;
  }

  html#dev div.control-group label
  {
      color: var(--subtle);
  }

  html#dev #pdt_submit
  {
      background-color: var(--accent);
      color: var(--text);
  }


/* Actions */

.card menu.actions
{
    width: 100%;
}
.card menu.actions .action
{
    margin: .25em auto;
    width: 100%;
    text-align: center;
}

menu.actions .actionSubtle
{
    display: block;
    color: inherit;
    opacity: .7;
    font-size: 75%;
    line-height: 1.333em;
    font-weight: 500;
}

/* Pulp Landing Page */

html#pulp_landing
{
    --page-bg: var(--muted-green);
/*     --text: var(--screen-black); */
    --text: rgba(0,0,0,.8);
    --card-bg: var(--white);
}

    html#pulp_landing #pulpLandingHeader
    {
        text-align: center;
    }

    html#pulp_landing h1
    {
        color: transparent;
        text-indent: -99999px;

        height: 4em;
        margin-top: 3em 0 2em 0;

        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("../images/pulp-logo-big.773ddb6ad10d.svg");
    }

    html#pulp_landing h2
    {
        text-align: center;
        font-size: 2em;
        letter-spacing: -0.0125em;
    }

    html#pulp_landing .go_button
    {
      display: inline-block;
      margin: .5em auto 1.5em auto;
      padding: 0.15em 1em 0.25em 1.15em;
      border-radius: 1em;

      font-size: 2em;
      font-weight: 700;
      letter-spacing: -0.0075em;
      text-decoration: none;

      background-color: var(--white);
      color: var(--text);
    }
        html#pulp_landing .go_button::after
        {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -.18em;
            -webkit-mask-size: contain;
            -webkit-mask-position: 0% 50%;
            -webkit-mask-repeat: no-repeat;
            background-color: var(--text);
            -webkit-mask-image: url("../images/pulp-pencil.a588efbcfa3a.svg");
        }

    html#pulp_landing ul.columns
    {
        list-style: none;
        padding: 0;
        margin-top: 0;
        display: grid;
        grid-template-columns: 1fr;
    }

    html#pulp_landing ul.columns li
    {
        display: grid;
        grid-template-rows: 46rem auto;
        grid-gap: 1em;
        margin-bottom: 1em;
        position: relative;
    }

    html#pulp_landing ul.columns li::before
    {
        content: "";
        display: block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    html#pulp_landing ul.columns li:nth-child(1)::before
    {
        background-image: url("../images/pulp-landing-shot-1.70d3ab81d561.png")
    }
    html#pulp_landing ul.columns li:nth-child(2)::before
    {
        background-image: url("../images/pulp-landing-shot-2.008e0b3aed04.png")
    }
    html#pulp_landing ul.columns li:nth-child(3)::before
    {
        background-image: url("../images/pulp-landing-shot-4.e5ff7606236a.png")
    }

    @media (min-width: 860px)
    {
        html#pulp_landing ul.columns li
        {
            grid-template-rows: auto;
            grid-template-columns: 46rem auto;
        }

        html#pulp_landing ul.columns li:nth-child(2)
        {
            grid-template-columns: auto 46rem;
        }

        html#pulp_landing ul.columns li:nth-child(2) p
        {
            order: 1;
        }

        html#pulp_landing ul.columns li:nth-child(2)::before
        {
            order: 2;
        }

    }
/* Dev Team Page */

#devTeam h3
{
    margin: 0;
}

#devTeam h3.devTeamPlace
{
    font-size: 0.9em;
    font-weight: normal;
    color: var(--subtle);
}

#devTeam dl
{
    padding-top:  110px;
    margin-bottom: 4em;
    background-size: 100px 100px;
    min-height: 120px;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

#devTeam dl,
#devTeam dl.left
{
    background-position: left .25em;
}

#devTeam dl.right
{
    background-position: right .25em;
}
    #devTeam dl.right h3
    {
        text-align: right;
    }

#devTeam dl#teamDave
{
    background-image: url("../images/team/dave2.bd9f296affa2.png");
}
#devTeam dl#teamArisa
{
    background-image: url("../images/team/arisa.bfbe31955c8d.png");
}
#devTeam dl#teamDan
{
    background-image: url("../images/team/dan.2927d2137c0d.png");
}
#devTeam dl#teamKyle
{
    background-image: url("../images/team/kyle.6168ac517ecd.png");
}
#devTeam dl#teamMarc
{
    background-image: url("../images/team/marc.0733a2d03f24.png");
}
#devTeam dl#teamNeven
{
    background-image: url("../images/team/neven.ce6951b6685b.png");
}
#devTeam dl#teamWill
{
    background-image: url("../images/team/will.b8785831ce7d.png");
}
#devTeam dl#teamLogan
{
    background-image: url("../images/team/logan.a72c8632c3cb.png");
}
#devTeam dl#teamShaun
{
    background-image: url("../images/team/shaun.04ba747f285c.png");
}
#devTeam dl#teamJames
{
    background-image: url("../images/team/james.018008215855.png");
}
#devTeam dl#teamAndy
{
    background-image: url("../images/team/andy.0899de5e35c7.png");
}

#devTeam dd
{
    line-height: 1.4em;
}

/* Dev Links */

#cardDevLinks,
#cardDevBadges
{
    background-color: var(--brand-yellow);
    color: var(--screen-black);
}
#cardDevLinks a::before,
#cardDevBadges a::before
{
      border-color: var(--link);
}

/* Dev Links Page */

#devLinks h1
{
    /* background-position: 50% top;
    background-repeat: no-repeat;
    background-size: 7em;
    background-image: url("../images/dev-links-header.f8a004ffe182.svg");
    padding-top: 2em;
    outline: 1px solid red; */
    margin-top: .75em;
}
#devLinks h2
{
    margin-top: 0;
    margin-bottom: 1.5em;
    text-align: center;
    font-size: 1.5em;
    font-weight: 500;
}

#devLinks h3
{
    font-size: 1.5em;
    text-align: center;
    margin-bottom: .5em;
}

#devLinks .card
{
    padding-top: .5em;
}

#devLinks dl:before
{
    content:'';
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    top: 0.125em;
    background-color: var(--link);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-image: url("../images/link-external.01c8a660b867.svg");
    grid-column: 1;
    grid-row: 2;
}

#devLinks dl
{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: .25em .5em;

    margin: .75em auto 2.25em auto;
    position: relative;
}

#devLinks dt
{
    font-size: 1em;
    margin: 0;
    padding: 0;
    font-weight: normal;
    grid-column: 2;
    grid-row: 2;
}

#devLinks dt a
{
    font-weight: 600;
}
    #devLinks dt:hover a
    {
        color: var(--link)
    }
    #devLinks dt a::after
    {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

#devLinks dd
{
    margin: 0;
    padding: 0;
    grid-column: 2;
    grid-row: 3;
}

#devLinks dd.devLinkImage
{
    grid-column: 1 / span 2;
    grid-row: 1;
    display: grid;
    place-items: center;
}

#devLinks dd.devLinkImage img
{
    width: 100%;
    height: auto;
    border: .15em solid var(--accent);
    border-radius: .15em;
}
    #devLinks dl:hover dd.devLinkImage img
    {
        border-color: var(--link)
    }

#devLinks cite
{
    white-space: nowrap;
    font-style: inherit;
}

#devLinksCategorySDKWriteups dl:before { background-color: var(--blue); }
#devLinksCategorySDKTools dl:before { background-color: var(--red); }
#devLinksCategorySDKPulp dl:before { background-color: var(--green); }

/* Catalog */

#catalog-dev h1
{
    margin-top: 0em;
    font-size: 2.5em;
}

#catalog-dev h1::before
{
    content: "";
    display: block;
    width: 100%;
    height: 2.5em;
    margin-bottom: .25em;
    margin-top: .5em;
    
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;    
    -webkit-mask-image: url("../images/dev/catalog/catalog-dev-title.2e81be57ac29.svg");
    background-color: var(--text);
}

#catalog-dev #catalogDevSetup menu
{
    align-self: end;
    width: 100%;
}

#catalog-dev #catalogDevSetup menu.actions a.action
{
    font-size: 1.25em;    
}


.catalog_dev .intro h1
{
    margin: .5em 0;
}

.catalog_dev h1.decorated
{
    position: relative;
}
.catalog_dev h1.decorated::before,
.catalog_dev h1.decorated::after
{
    content: "";
    display: inline-block;
    position: absolute;
    background-color: var(--link);
    
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
}

#catalog_assets h1::before
{
    top: -.6em;
    left: -3em;
    width: 100%;
    height: 1.2em;
    
    -webkit-mask-image: url("../images/dev/catalog/catalog-assets-header-1.02eeb633a85a.svg");
}
#catalog_assets h1
{
    margin-top: 1em;
}
#catalog_assets h1::after
{
    top: .57em;
    left: 3em;
    width: 100%;
    height: 1.2em;
    
    -webkit-mask-image: url("../images/dev/catalog/catalog-assets-header-2.64d966c1a4ac.svg");
}

#catalogAssetList
{
    line-height: 1.3;
}

#catalogDeveloperPromoCodes dl
{
    grid-template-columns: 3fr 1fr;
}




/* Checklist */

.checklist ul, .checklist li
{
    list-style-type: none;
    position: relative;
    padding: 0;
    margin: 0;
}

.checklist ul li::before
{    
    content: '';
    display: inline-block;
    position: absolute;
    top: .125em;
    left: -2em;
    width: 1.5em;
    height: 1.5em;
    
    background-color: var(--link);
    
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    
    -webkit-mask-image: url("../images/checklist-check.6f561c04a7d1.svg");
}

.checklist ul ul li
{
    list-style-type: disc;
    margin-left: 1.1em;
    margin-bottom: .25em;
}
.checklist ul ul li::before
{
    display: none;
}

.checklist h2
{
    font-size: 1.5em;
    text-align: left;
    margin: 1em 0 .5em 0;
}

.checklist p,
.checklist li li
{
    font-size: 120%;
    line-height: 1.4;
}

p.half-width
{
    display: grid;
    width: 100%;
    column-gap: .5em;
    row-gap: .5em;
    grid-template-columns: 1fr;
}

p img.half-width
{
    display: block;
    max-width: 100%;
}

/* Game Links */

input.titleurlwidget[id$="_0"]
{
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
input.titleurlwidget[id$="_1"]
{
    margin-top: 0;
    border-top-width: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
input.titleurlwidget+hr
{
    display: none;
}

/* Your Games */

#yourGames ul
{
    padding-bottom: .5em;
}

#yourGames h2
{
    margin-bottom: .75em;
}

#yourGames .gameCard h2
{
    margin-bottom: 0;
}

.yourGameIntroBanner img
{
    max-width: 100%;
    border-radius: 0.5em;
}

/* Page Toolbar */

.pageToolbar
{
    z-index: 101009;
    position: fixed;
    
    width: 100%;
    max-width: 100vw;
    bottom: 0;
    right: 0;
    left: 0;    
    padding: .75em .5em;
    
    font-size: .8em;
    background-color: var(--card-bg);
    border-top: 0.2rem solid var(--screen-black);
}



.pageToolbar form
{
    max-width: 100%;
}

.pageToolbar ul
{
    list-style: none;
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;   
}


.pageToolbar a.btn
{
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-size: 1em;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: -0.0075em;
    border: 0;
    border-radius: 0.6rem;
    padding: 0.1em 1em 0.25em 1em;
    white-space: nowrap;
}

.pageToolbar button,
.pageToolbar input[type="submit"],
.pageToolbar a.btn
{
    background-color: var(--button-bg);
    color: var(--button-text);
    margin-top: 0;
    margin-bottom: 0;
}
.pageToolbar a.btn.subtler
{
    background-color: var(--text-inverted);
    color: var(--text);
    border: solid .1em var(--text);
}

.pageToolbar div.submit-button,
.pageToolbar div.buttonHolder
{
    font-size: 1.5em;
    /* text-align: right; */
    margin-top: 0;
}

.pageToolbar li,
.pageToolbar p
{
    display: block;
    font-weight: normal;
    font-size: 1em;
    align-self: center;
}
.pageToolbar li#CatalogAssetsToolbarSave
{    
    align-self: start;
    text-align: right;
    padding: 0;
    margin: 1em 0 0 0;
}

.pageToolbar.error .error
{
    display: inline-block;
    font-weight: 600;
    color: var(--status-bad);
    cursor: pointer;
    text-decoration: underline;
}

.pageToolbar.error .error::before
{
    display: inline-block;
    content: ' ';
    width: 1.2em;
    height: 1.2em;
    margin-right: .2em;
    vertical-align: -.05em;
    -webkit-mask-size: contain;
    -webkit-mask-position: 0% 50%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--status-bad);
    -webkit-mask-image: url("../images/message-alert.4b9c3a60201b.svg");
}

.pageToolbar .subtle
{
    color: var(--text);
    opacity: .5;
}

#CatalogAssetsToolbarSave form
{
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: .5em;
}

.CatalogAssetsToolbarCheckbox
{
    white-space: nowrap;
}
.CatalogAssetsToolbarCheckbox label
{
    vertical-align: .2em;
}


/* Preview */

.pageToolbar.preview p
{
    text-align: center;
    font-weight: 600;
    font-size: 1.5em;
    margin: 0;
    padding: 0;
}

/* Admin */

.pageToolbar.icon .toolbarText::before,
.pageToolbar.icon .gameIdentifier::before
{
    content: ' ';
    display: inline-block;
    height: 1.5em;
    width: 1.5em;    
    vertical-align: -.35em;
    margin-right: .5em;
    -webkit-mask-size: contain;
    -webkit-mask-position: 0% 50%;
    -webkit-mask-repeat: no-repeat;    
}

.pageToolbar.icon.admin .toolbarText::before
{
    background-color: var(--status-bad);
    -webkit-mask-image: url("../images/admin.faa7582f4617.svg");
}

.pageToolbar.icon.preview .toolbarText::before
{
    background-color: var(--button-bg);
    -webkit-mask-image: url("../images/preview.9584a34a9722.svg");
    margin-right: .25em;
}


/* Figures */


figure.illustration
{
    display: block;
    margin: 0 auto;    
}
figure.illustration img
{    
    position: inherit;
    height: auto;
    width: auto;   
    max-width: 50rem;
    
    display: block;
    margin: 0 auto;
}
figure.illustration figcaption
{
    font-size: 90%;
    text-align: center;
    margin: .5em 0 1.5em 0;
    color: var(--subtle);
}
figure.illustration.outlined img
{
    border: .1em solid var(--subtle);
}

    .assetDescription figure.illustration
    {
        display: block;
        margin: 1em 0;        
    }
    .assetDescription figure.illustration img
    {
        margin: 0;
        max-width: 80%;
        background-color: var(--psd-lightest-gray);
        /* padding: .25em; */
    }
    .assetDescription figure.illustration.example::after
    {
        display: block;
        content: 'Example image';        
        font-size: 70%;
        color: var(--subtle);
    }
    .assetDescription figure.current-image::after
    {
        display: block;
        content: 'Current image';        
        font-size: 70%;
        color: var(--subtle);
    }

#catalogAssetList dl
{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: .25em;    
    
    padding: 1em 0;
    margin: 0;
    
    border-bottom: .05em solid var(--subtle);    
}
#catalogAssetList dt,
#catalogAssetList dd
{
    padding: 0;
    margin: 0;
}

.assetTitle
{
    font-size: 1em;
    position: relative;
}
.assetDescription
{
    
}
.assetRequired.required
{
    text-align: right;
}
    .assetRequired.required span
    {
        display: inline-block;
        padding: .15em .35em;
        border-radius: .25em;
        
        background-color: var(--subtle);
        color: var(--page-bg);
        
        font-size: 80%;
        font-weight: 600;
        text-transform: uppercase;   
    }

.assetDescription .assetSpecs
{
    font-weight: 500;
    margin: .25em 0 0 0;
    padding: 0;
}

#catalogAssetList .assetTitle,
#catalogAssetList .assetRequired
{
    /* padding-top: .1em; */
}

code
{   
    font-size: 0.8em;
}

#catalogAssetList code
{   
    padding: 0 .5em;
    margin: 0 .15em;
    
    border-radius: .25em;
    
    background: var(--card-bg);
}

#catalogAssetList .identifyIllustrationDetail
{
    position: absolute;
    left: -2em;    
    display: inline-block;
    
    border-radius: 1em;
    border: .2em solid white;
    margin-right: .3em;
    width: 1.75em;
    height: 1.75em;    
    /* padding: 0 .5em; */
    
    background: var(--purple);
    color: white;        
    
    text-align: center;
    font-weight: 700;
    font-size: 80%;
}

#catalogAssetList .colorSwatch
{
    position: absolute;
    left: -2em;  
    top: .1em;  
    display: inline-block;
    
    border-radius: .2em;
    border: .1em solid var(--card-bg);
    box-shadow: inset 0 0 .05em .05em rgba(0,0,0,.1);
    
    margin-right: .3em;
    width: 1.25em;
    height: 1.25em;    
}

#catalogAssetList dl[id*="price"] input,
#catalogAssetList dl[id*="price"] select
{
    width: 50%;
}

/* Catalog asset upload form */

#catalogAssetList label
{
    color: var(--text);
}

#catalogAssetList textarea
{
    width: 100%;
    font-size: 75%;
    resize: vertical;
}

.uploadForm input[type="file"]
{
    line-height: 1em;
}
.uploadForm input::file-selector-button
{
    background-color: var(--link);
    color: var(--button-text);
    padding: 0.2em .5em;
    margin-right: 1em;
    border: none;
    border-radius: .2em;
    font-size: 80%;
}
.uploadForm input::file-selector-button:active
{
    background-color: var(--text);
}

.uploadForm div.color-picker.controls div.checkbox label
{
    display: grid;
    grid-template-columns: 2em auto;
    column-gap: .5em; 
}

.uploadForm input[type="color"] {
    -webkit-appearance: none;
    
    border-radius: .3em;
    border: .15em solid var(--card-bg);    
    
    padding: 0;
    width: 2em;
    height: 2em;    
}
.uploadForm input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.uploadForm input[type="color"]::-webkit-color-swatch {
    border: none;
    box-shadow: inset 0 0 .05em .05em rgba(0,0,0,.5);
    border-radius: .2em;
}

.uploadForm input.color-input-hex
{
    width: 6em;
    margin-top: 0;
    font-family: monospace;
}

.uploadForm .help-block
{
    font-size: .8em;
}

#catalogAssetList dl.error dt label
{
    background: var(--status-bad);
    color: var(--button-text);
    border-radius: .25em;
    padding: .2em .5em;
}

#catalogAssetList div.control-group::last-child dl
{
    border: 0;
}

.clearable-file-input
{
    display: grid;
    grid-template-columns: 1.25em 1fr;
    column-gap: .5em;
    align-items: center;
    
    margin-bottom: 1em;
}
div.control-group .clearable-file-input label
{
    height: 1.25em;
    margin-bottom: 0;
}

#catalogAssetList input[type="checkbox"]
{    
    position: relative;
    width: 1.25em;
    height: 1.25em;   
}
#catalogAssetList input[type="checkbox"]:checked,
.CatalogAssetsToolbarCheckbox input[type="checkbox"]:checked
{
    background-color: var(--button-bg);
    border-color: var(--button-bg);
}
#catalogAssetList input[type="checkbox"]:checked::after,
.CatalogAssetsToolbarCheckbox input[type="checkbox"]:checked::after
{
    position: absolute;
    top: 0.025em;
    left: 0.025em;
    content: " ";
    width: 1em;
    height: 1em; 
    background-color: var(--button-text);    
    -webkit-mask-size: 90% 90%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;    
    -webkit-mask-image: url("../images/checkmark.a3cbcd8cf946.svg");
}

#catalogAssetList .characterCounter
{
    display: block;
    position: relative;
    top: -1em;
    margin-bottom: -1em;
    font-size: 80%;
    text-align: right;    
    color: var(--subtle);
}
#catalogAssetList .characterCounter.maxed
{
    color: var(--negative);
}

#CatalogAssetsToolbar input[type="checkbox"]
{
    display: inline-block;
    position: relative;
    width: 1.25em;
    height: 1.25em;
    margin-bottom: 0;
}

.uploadForm div.submit-button button,
.uploadForm div.submit-button input
{    
    font-size: 2em;
    background-color: var(--link);
}

@media (min-width: 670px)
{
    #devLinks dl:before
    {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    #devLinks dl
    {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr;

        margin: .75em auto 1.5em auto;
    }

    #devLinks dt
    {
        grid-column: 2;
        grid-row: 1;
    }

    #devLinks dd
    {
        grid-column: 2;
        grid-row: 2;
    }

    #devLinks dd.devLinkImage
    {
        grid-column: 3;
        grid-row: 1 / span 2;
        width: 7em;
        justify-items: end;
        align-items: start;
    }
    
    #mirrorLinks
    {
        width: 50%;
    }
}

/* SDK License Agreement */
div.sdkLicenseWrapper
{
    position: relative;
    display: grid;
    place-items: center;
}

div.sdkLicenseWrapper label
{
    padding-left: 0.5em;
    font-size: 0.8em;
    order: 2;
}

div.sdkLicenseWrapper label a
{
    padding-right: 0 !important;
    color: inherit;
    opacity: 0.7;
}


div.sdkLicenseWrapper input#sdkLicenseAgreement
{
    font-size: 2em;
    order: 1;
}

div.sdkLicenseWrapper menu.actions
{
    order: 3;
    grid-column: 1 / span 2;
    margin-top: 1em;
    transition: 250ms ease-in-out opacity;
    transition-property: opacity, filter;
}

#sdkLicenseAgreement+menu.actions .action:not(.alwaysUsable)
{
    pointer-events: none;
    filter: saturate(.5);
    opacity: 0.4;
}

#sdkLicenseAgreement:checked+menu.actions .action
{
    opacity: 1;
    filter: saturate(1);
    pointer-events: all;
}

/* SDK License */

#sdkLicense h1
{
    margin: 1em 0 .5em 0;
}

#sdkLicense h3,
#sdkLicense h1+p
{
    color: var(--subtle);
    margin: 0;
    font-weight: 500;
    font-style: normal;
    font-size: 1.17em;
}

#sdkLicense h2
{
    text-align: left;
    font-size: 1.25em;
    margin: 3rem 0 1rem 0;
}

#sdkLicense ul li,
#sdkLicense ol li
{
    margin-bottom: .25em;
}


/* Responsive Scaling */
@media screen and (min-width: 240px)
{
    ul.cards
    {
        display: block;
    }

    ul.cards>li
    {
        margin-bottom: 1em;
    }
}

@media screen and (min-width: 670px)
{
    main
    {
        font-size: 0.75em;
    }

    ul.cards
    {
        display: grid;
    }

    ul.cards>li
    {
        margin-bottom: 0;
    }

    .card.hero
    {
        grid-template-columns: 2fr 3fr;
        grid-gap: 1em;
    }

    .card.hero.sdkLaunch a,
    .card.hero.sdkLaunch p,
    .card.hero.sdkLaunch menu
    {
        padding-right: 0;
    }

    .card#cardPulp.hero
    {
        grid-template-columns: 2fr 5fr;
    }

    /* Actions in a desktop card are left-aligned */

    .card menu.actions
    {
        width: auto;
        text-align: left;
    }
    .card menu.actions .action
    {
        margin: .25em 0;
        width: auto;
    }

    #devTeam h2
    {
        text-align: center;
    }

    #devTeam dl
    {
        padding-top:0;
        padding-left: 120px;
    }

    ul.cards  li.card.cardBanner
    {
          padding-top: .5em;
          padding-bottom: .5em;
    }
    
    #mirror h1
    {
        margin: 1em 0 0 0;
    }
    
    #mirror h2
    {
        margin: 1em auto 1em auto;
        max-width: 14em;
    }
    
    #downloadMirrorForMacOS,
    #downloadMirrorForMacOS,
    #downloadMirrorForWindows,
    #downloadMirrorForLinux
    {
        grid-column: auto;
    }
    
    #mirror ul.columns
    {
        grid-template-columns: 1fr 1fr;
        column-gap: 2em;    
        row-gap: 0;
    }
    #mirror ul.columns li
    {
        width: 80%;
        text-align: center;
    }
    
    #catalogAssetList dl
    {
        display: grid;
        grid-template-columns: 2fr 5fr 1fr;
        column-gap: 1em;
        row-gap: 0;
        padding: 1em 0;
    }
    
    .pageToolbar ul
    {
        grid-template-columns: auto min-content;   
    }
    .pageToolbar div.submit-button,
    .pageToolbar div.buttonHolder
    {
        text-align: center;
    }
    .pageToolbar li#CatalogAssetsToolbarSave
    {           
        margin: 0;
    }
    
    p.half-width
    {
        grid-template-columns: 1fr 1fr;
    }

}

/* Stop scaling */
@media screen and (min-width: 1100px)
{

}