@charset "UTF-8";
@namespace pdf2 url("http://iso.org/pdf2/ssn");

@font-face {
    font-family: "Roboto Flex";
    src: url("resources/RobotoFlex.ttf");
}
@font-face {
    font-family: "Fraunces";
    src: url("resources/Fraunces.ttf");
}
@font-face {
    font-family: "Segui";
    src: url("resources/seguiemj.ttf");
}
@font-palette-values --fp1 { font-family: "Segui"; override-colors: 43 #00FF00 }
@font-palette-values --fp2 { font-family: "Segui"; override-colors: 43 color(display-p3 0 1 0) }
@font-palette-values --fp3 { font-family: "Segui"; override-colors: 43 color(prophoto-rgb 0 1 0) }

@bfo-env {
    bfo-sys-display-grid: false;        /* we don't support grid yet ; treat as inline */
}
@color-profile device-cmyk {
    src: url("resources/fogra39.icc");
}

/* Mess with shower to make things work on a mobile */
@media screen {
    :root {
        min-width: 100vw;
        min-height: 100vh;
    }
    .shower.full {
        left: 50vw;
        top: 50vh;
    }
    @media (hover: none) {
        * {
            user-select: none !important;
            -webkit-user-select: none !important;
        }
    }
}

/* Shower turns off list markers; turn them back on, they work fine */
.slide ul {
    list-style: disc !important;
    li::marker {
        color: #888;
    }
    li::before {
        content: none !important;
    }
}
.slide::after {
    /* Shower puts pagenumbers here */
    -bfo-pdf-tag: "Artifact";
    -bfo-pdf-tag-artifact-type: pagination;
    -bfo-pdf-tag-artifact-subtype: pagenum;
}
.pdf-figure {
    -bfo-pdf-tag: tag map-to "Figure";
}
.pdf-figure, .tag-background {
    -bfo-pdf-tag-include: background;
}
.aside {
    -bfo-pdf-tag: tag map-to "Part";
}
@media not ((env(bfo-pdf-profile-feature-PDFVersion20): deny) or (env(bfo-pdf-profile-feature-StructureTreeNamespace): deny)) {
    /* Matches if we target PDF/A-4 rather than PDF/A-3; turn on namespaces on tags */
    li::before {
        -bfo-pdf-tag: pdf2|"Lbl";
    }
    .slide::after {
        -bfo-pdf-tag: pdf2|"Artifact";
    }
    .pdf-figure {
        -bfo-pdf-tag: |tag map-to pdf2|"Figure";
    }
    .aside {
        -bfo-pdf-tag: |tag map-to pdf2|"Aside";
    }
}

:root {
    --color-grey: device-cmyk(0 0 0 1);
    --color-bfo-orange: lch(75% 83 71);
}
.progress::before {
   background-color: var(--color-bfo-orange);
}

@media screen {
    .printComment {
        display: none;
    }
}
@media print {
    .printComment {
        position:absolute;
        bottom:20px;
        font-size: 10px;
        font-style:italic;
    }
    .next-highlight {
        color: red;
    }
}
.slide {
    background: device-cmyk(0 0 0 0);
}
.shower {
    --slide-ratio: calc(16 / 9);
}
.footnote {
    position: absolute;
    font-size: 75%;
    left: 3em;
    bottom: 1em;
    line-height: 1.5;
}
.compare {
    table-layout: fixed;
    font-size: 80%;
}
.slide:not(:has(.next.active)) .hide-until-next {
    display: none;
}
:has(.next.active) .next-highlight {
    color: red;
}
.compare th {
    width: 50%;
}
.compare .new {
    color: red;
}
.compare .strike {
    text-decoration: line-through;
}
.compare td:first-child, .compare th:first-child {
    text-align: right;
    padding-right: 1em;
}
.compare td:nth-child(2), .compare th:nth-child(2) {
    text-align: left;
    padding-left: 1em;
}
.gradient span {
    white-space: pre;
    font-size: 75%;
}
.gradient span:nth-child(1) {
    float: left;
}
.gradient span:nth-child(2) {
    float: right;
}
.gradient div {
    clear: both;
    height: 50px;
    border: 1px solid black;
    margin-bottom: 1em;
}
.gradient.lch div {
    background: linear-gradient(to right in lch specified hue, lch(75% 70 -135deg), lch(75% 70 45deg)) 0/contain;
}
.gradient.lab div {
    background: url("resources/labgradient.png") 0/cover;
    background: linear-gradient(to right in lab, lab(75% -50 -50), lab(75% 50 50)) 0/contain;
}
.conicgradient {
    float: right;
    margin-left: 1em;
    width: 9em;
    height: 9em;
    border-radius: 50%;
    border:1px solid black;
    background: url("resources/conic.png") 0/cover;
    background: conic-gradient(in lch specified hue, lch(75% 75 0deg) 0deg, lch(75% 75 359deg) 359deg);
}

.outline {
    -webkit-text-stroke-color: black;
    -webkit-text-stroke-width:1px;
    paint-order: fill stroke;
}

/* "Cartesian" svg */
svg.coords .grid path {
   fill: none;
   stroke: #DDD;
   stroke-width: 0.5px
}
svg.coords .grid text {
   font-size: 15%;
   fill: #AAA;
}
svg.coords .grid text.bottom {
   text-anchor: middle; transform:translate(0px,5px)
}
svg.coords .grid text.left {
   text-anchor: end; transform:translate(-2px,1px)
}
svg.coords .marker path {
   stroke: black; stroke-width: 1px; fill:none
}
svg.coords .marker text {
   font-size: 25%;
   text-anchor: middle;
}

.conic-gradient {
  float: right;
  margin-left: 4em;
}
.conic-gradient figure {
    margin: 0 auto;
}
.linear-gradient {
  margin-bottom: 1em;
}
.linear-gradient > div {
  width:60%;
  border:1px solid black;
  height: 50px;
}
figcaption {
  font-size: 65%;
}
.color-box-container {
  float: right;
  display: flex;
  margin-top:1.5em;
  gap: 4px;
  font-size: 60%;
}
.color-box-container > * {
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  width: 80px;
}
.blend-swatch-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 90%;
}
.blend-swatch-container figure {
  margin: 0;
  text-align: center;
}
.blend-swatch-container .swatch > div {
  width: 80px;
  height: 80px;
  position: relative;
}
.blend-swatch-container .swatch > div > div:nth-child(1) {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF);
}
.blend-swatch-container .swatch > div > div:nth-child(2) {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url("resources/ducky.png") 50%/100%;
  animation: 10s ease-in-out infinite wobble;
}
.blend-swatch-container {
  .normal      div div:nth-of-type(2) { mix-blend-mode: normal }
  .darken      div div:nth-of-type(2) { mix-blend-mode: darken }
  .multiply    div div:nth-of-type(2) { mix-blend-mode: multiply }
  .lighten     div div:nth-of-type(2) { mix-blend-mode: lighten }
  .screen      div div:nth-of-type(2) { mix-blend-mode: screen }
  .overlay     div div:nth-of-type(2) { mix-blend-mode: overlay }
  .color-dodge div div:nth-of-type(2) { mix-blend-mode: color-dodge }
  .color-burn  div div:nth-of-type(2) { mix-blend-mode: color-burn }
  .hard-light  div div:nth-of-type(2) { mix-blend-mode: hard-light }
  .soft-light  div div:nth-of-type(2) { mix-blend-mode: soft-light }
  .difference  div div:nth-of-type(2) { mix-blend-mode: difference }
  .exclusion   div div:nth-of-type(2) { mix-blend-mode: exclusion }
  .hue         div div:nth-of-type(2) { mix-blend-mode: hue }
  .saturation  div div:nth-of-type(2) { mix-blend-mode: saturation }
  .color       div div:nth-of-type(2) { mix-blend-mode: color }
  .luminosity  div div:nth-of-type(2) { mix-blend-mode: luminosity }
  .color       div div:nth-of-type(2) { mix-blend-mode: color }
  .luminosity  div div:nth-of-type(2) { mix-blend-mode: luminosity }
  .plus-darker div div:nth-of-type(2) { mix-blend-mode: plus-darker }
  .plus-lighter div div:nth-of-type(2) { mix-blend-mode: plus-lighter }
}
.variable {
    font-family: "Roboto Flex" !important;
}
figure.emoji {
    display: inline-block;
    text-align: center;
}
figure.emoji span {
    font: 80px "Segui";
}
.cube-container {
  margin-top: 1em;
  --hx: 80px;
  --hy: 100px;
  width: calc(var(--hx) * 2);
  height: calc(var(--hy) * 2);
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform: rotateZ(-20deg);
  transform-style: preserve-3d;
  * {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid black;
  }
  .cube-front  { transform: rotateY(  0deg) translateZ(var(--hx)); }
  .cube-right  { transform: rotateY( 90deg) translateZ(var(--hx)); }
  .cube-back   { transform: rotateY(180deg) translateZ(var(--hx)); }
  .cube-left   { transform: rotateY(-90deg) translateZ(var(--hx)); }
  .cube-top    { transform: rotateX( 90deg) translateZ(var(--hy)); }
  .cube-bottom { transform: rotateX(-90deg) translateZ(var(--hy)); }
}

section:has(.next.active) .cube {
  animation: 14s linear infinite cube-rotate;
}
.next.active .perspective {
  transform: rotateY(30deg);
}
@media print {
    .perspective {
        transform: rotateY(30deg);
    }
    .blend-swatch-container .hide-until-next {
        display: block !important;
        div div:nth-of-type(2) {
            background-image: url("resources/redcross.svg") !important;
        }
    }
    .cube-right, .cube-back, .cube-left, .cube-top, .cube-bottom {
      display: none;
    }
    .no-print {
       display:none;
    }
}

@keyframes wobble {
  0%, 70%, 100% {
    transform: rotate(0);
  }
  80% {
    transform: scale(1.2) rotate(-30deg);
  }
  90% {
    transform: scale(0.8);
  }
}
@keyframes cube-rotate {
   0% { transform: rotateZ(-20deg) rotateY(0deg); }
   25% { transform: rotateZ(-20deg) rotateY(-90deg); }
   50% { transform: rotateZ(-20deg) rotateY(-180deg); }
   75% { transform: rotateZ(-20deg) rotateY(-270deg); }
   100% { transform: rotateZ(-20deg) rotateY(-360deg); }
}
.vertbar::before {
    content: "|";
    color: #A00;
    padding: 0 0.5em;
}
@media screen {
    #sausagenext {
        display: inline-block;
        width: 0px;
    }
    #sausagenext.active {
        width: 105px;
        transition: width 500ms;
    }
}