@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-ext-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url(fonts/eb-garamond-latin-ext-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The other faces the words can be printed in (card.js FONTS), each only
   fetched once some words are set in it. */
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-ext-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-ext-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-ext-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url(fonts/alegreya-sans-latin-ext-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-ext-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-ext-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-ext-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url(fonts/playfair-display-latin-ext-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-ext-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-ext-400-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-ext-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  src: url(fonts/courier-prime-latin-ext-700-italic.woff2) format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url(fonts/caveat-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  src: url(fonts/caveat-latin-ext-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url(fonts/caveat-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  src: url(fonts/caveat-latin-ext-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Dancing Script";
  src: url(fonts/dancing-script-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Dancing Script";
  src: url(fonts/dancing-script-latin-ext-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Dancing Script";
  src: url(fonts/dancing-script-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Dancing Script";
  src: url(fonts/dancing-script-latin-ext-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 4vw, 3rem) 1.75rem;
  align-items: start;
}

/* At each side's step, the step's name over that side alone, as large as
   the window allows, and everything for it done on the card itself: no
   settings beside it. The side is its sheet seen through a
   window the side's shape (app.js sets --face-*), the other sheet put
   away, and a side upside down on its sheet turned the right way up.
   Previewing, the card has the page to itself: opened out as two
   sheets, a tall card's one above the other and a wide card's side by
   side, then folded. --sheet-w sizes what shows to fit the window. */
.canvas {
  --ratio: 1.4286;
  display: grid;
  justify-content: center;
  align-items: start;
  grid-template-columns: var(--sheet-w);
  gap: 1rem;
}
.workspace:not([data-step="preview"]) .canvas { --sheet-w: min(100%, 46rem, calc((100svh - 22rem) * var(--face-ratio, 0.7))); }
.workspace:not([data-step="preview"]) .canvas .stage { grid-template-columns: minmax(0, 1fr); }
.workspace:not([data-step="preview"]) .stage[data-sheet="outside"] .inside-spread,
.workspace:not([data-step="preview"]) .stage[data-sheet="inside"] .spread:not(.inside-spread) { display: none; }
.workspace:not([data-step="preview"]) .spread {
  overflow: hidden;
  aspect-ratio: var(--face-ratio);
  background: #fff;
  box-shadow: 0 2px 6px rgb(var(--shade) / 0.25);
}
.workspace:not([data-step="preview"]) :is(.sheet, .inside-sheet) {
  width: calc(100% * var(--face-scale));
  translate: var(--face-x) var(--face-y);
  box-shadow: none;
}
.workspace:not([data-step="preview"]) .sheet::before,
.workspace:not([data-step="preview"]) .sheet::after,
.workspace:not([data-step="preview"]) .fold { display: none; }
.workspace:not([data-step="preview"]) .stage.turned .spread { rotate: 180deg; }
.workspace:not([data-step="preview"]) .side.chosen { box-shadow: none; }

.workspace[data-step="preview"] .controls { display: none; }

/* Previewing, the card stands, as large as the window allows, within
   reason. The inside sheet is out of the way but keeps its size: the folded
   card's inside is drawn from it. */
.workspace.grown .inside-spread { position: absolute; inset: 0 0 auto; visibility: hidden; }
.workspace.grown .canvas[data-shape] { grid-template-columns: var(--sheet-w); }
.workspace.grown .canvas .stage { grid-template-columns: minmax(0, 1fr); }
.workspace.grown .canvas[data-shape="portrait"] { --sheet-w: min(100%, 88rem, calc((100svh - 29rem) * var(--ratio))); }
/* A wide card stands in the middle of its sheet, which is twice its
   height: the sheet is sized for the card, and runs on behind what is
   above and below it. */
.workspace.grown .canvas[data-shape="landscape"] { --sheet-w: min(100%, 56rem, calc((100svh - 27rem) * 1.6 * var(--ratio))); }
.workspace.grown .canvas[data-shape="landscape"] .stage { margin-block: calc(var(--sheet-w) * -0.28) calc(var(--sheet-w) * -0.4); }
.canvas > :not(.stage) { position: relative; z-index: 2; }
.turn-card[hidden] { display: none; }

/* The sheets */
.stage { position: relative; display: grid; gap: 1rem; perspective: 2400px; }
.canvas[data-shape="landscape"] .stage { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.spread { position: relative; z-index: 1; margin: 0; min-width: 0; }
.inside-sheet {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  background: #fff;
  box-shadow: 0 2px 6px rgb(var(--shade) / 0.25);
  container-type: inline-size;
}
.inside-sheet > * { position: absolute; }

.inside-spread { z-index: 0; }
/* Folded or flat at once (fold.js), with nothing moving on the way. */
.stage.instant, .stage.instant * { transition: none !important; }

/* The sheet */

.stage { min-width: 0; }

.sheet {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  background: #fff;
  /* It lies on top of the ream: the edges of the sheets below show at
     its foot, and the stack throws a shadow onto the wrapper. */
  box-shadow: 0 2px 6px rgb(var(--shade) / 0.25);
  container-type: inline-size;
  transition: box-shadow 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}

.sheet > * { position: absolute; }
.sheet::before, .sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  background: var(--stack-1);
  box-shadow: 0 1px 3px rgb(var(--shade) / 0.25);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.sheet::before { inset: 5px -4px -7px 3px; transform: rotate(0.5deg); }
.sheet::after {
  inset: 10px 3px -13px -5px;
  z-index: -2;
  background: var(--stack-2);
  transform: rotate(-0.7deg);
  box-shadow: 0 16px 22px -8px rgb(var(--shade) / 0.5), 0 40px 64px -20px rgb(var(--shade) / 0.6);
}
.sheet.folding::before, .sheet.folding::after { opacity: 0; }

.fold {
  pointer-events: none;
  border: 0 dashed var(--fold-line);
}
.sheet[data-shape="portrait"] .fold, .inside-sheet[data-shape="portrait"] .fold { left: 50%; top: 0; bottom: 0; border-left-width: 1px; }
.sheet[data-shape="landscape"] .fold, .inside-sheet[data-shape="landscape"] .fold { top: 50%; left: 0; right: 0; border-top-width: 1px; }

/* A side of the card, laid out the right way up in itself and turned
   where it is upside down on its sheet (app.js places it and what is on
   it). The side whose step it is lies over the side beside it. */
.side { container-type: inline-size; }
.side > * { position: absolute; }
.side.upside-down { transform: rotate(180deg); }
.side.chosen { z-index: 2; }
.side.drop-here { outline: 3px solid var(--accent); outline-offset: -3px; }
.side-words { z-index: 1; pointer-events: none; }
.side-words:not(.shown) { visibility: hidden; }
/* The chosen side's words can be taken hold of and moved; they say so
   with a dashed line round them under the pointer. */
.side.chosen .side-words.shown { pointer-events: auto; cursor: move; touch-action: none; outline-offset: 2px; }
.side.chosen .side-words.shown:hover { outline: 1px dashed rgb(0 0 0 / 0.45); }
.side.chosen .side-words.shown:focus-visible { outline: 3px solid var(--focus); }
/* While something is dragged, the line it snapped to, drawn across the
   side: red for the middle, an edge or the other thing, green for a
   border in 5mm steps (DESIGN.md's snap and placement guides): an
   instrument, not a colour of the interface. */
.guide { position: absolute; z-index: 4; background: #d1372a; pointer-events: none; }
.guide.border { background: #2f9a58; }
.guide.v { top: 0; bottom: 0; width: 1px; }
.guide.h { left: 0; right: 0; height: 1px; }
/* A side with nothing on it says so. */
.side-empty {
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: italic 400 3.6cqw/1 var(--serif);
  color: var(--field-soft);
  opacity: 0.5;
  pointer-events: none;
}
.side-empty[hidden] { display: none; }

.frame {
  background: var(--pale);
  touch-action: none;
  cursor: grab;
  overflow: hidden;
  outline-offset: 3px;
}
.frame:active { cursor: grabbing; }
/* A finger scrolls the page past a picture; two move it (app.js). */
.frame.has-photo { touch-action: pan-x pan-y; }
.two-fingers {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1rem;
  background: rgb(0 0 0 / 0.55);
  color: #fff;
  font: 600 0.9375rem/1.3 var(--sans);
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.two-fingers.on { opacity: 1; transition-duration: 0.1s; }
.frame.has-photo { background: none; }
/* The handles round the frame of the side being made: its corners size
   it, and a freehand frame's edges move too. Each sits just inside the
   frame, so it shows even where the frame runs to the edge of the card. */
.handles { --handle: 1.1rem; pointer-events: none; z-index: 3; outline: 1px dashed rgb(0 0 0 / 0.45); outline-offset: -1px; }
.handles[hidden] { display: none; }
/* On a touch screen they are drawn larger, for a finger. */
@media (pointer: coarse) { .handles { --handle: 1.4rem; } }
.handles i {
  position: absolute;
  width: var(--handle);
  height: var(--handle);
  background: #fff;
  border: 2px solid #111;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #fff;
  pointer-events: auto;
  touch-action: none;
}
.handles [data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.handles [data-h="ne"] { right: 0; top: 0; cursor: nesw-resize; }
.handles [data-h="se"] { right: 0; bottom: 0; cursor: nwse-resize; }
.handles [data-h="sw"] { left: 0; bottom: 0; cursor: nesw-resize; }
.handles [data-h="n"] { left: calc(50% - var(--handle) / 2); top: 0; cursor: ns-resize; }
.handles [data-h="s"] { left: calc(50% - var(--handle) / 2); bottom: 0; cursor: ns-resize; }
.handles [data-h="e"] { right: 0; top: calc(50% - var(--handle) / 2); cursor: ew-resize; }
.handles [data-h="w"] { left: 0; top: calc(50% - var(--handle) / 2); cursor: ew-resize; }
/* Each takes hold of a 44px square, drawn small or not: it reaches in
   over the picture, since beyond the frame may be beyond the card, which
   clips it. Short of that, a finger lands on the picture, and one finger
   on the picture scrolls the page. */
.handles i::after { content: ""; position: absolute; --reach: calc(var(--handle) - 2.75rem); --half: calc(var(--reach) / 2); }
.handles [data-h="nw"]::after { inset: 0 var(--reach) var(--reach) 0; }
.handles [data-h="ne"]::after { inset: 0 0 var(--reach) var(--reach); }
.handles [data-h="se"]::after { inset: var(--reach) 0 0 var(--reach); }
.handles [data-h="sw"]::after { inset: var(--reach) var(--reach) 0 0; }
.handles [data-h="n"]::after { inset: 0 var(--half) var(--reach); }
.handles [data-h="s"]::after { inset: var(--reach) var(--half) 0; }
.handles [data-h="e"]::after { inset: var(--half) 0 var(--half) var(--reach); }
.handles [data-h="w"]::after { inset: var(--half) var(--reach) var(--half) 0; }
/* The grip, just in from the frame's top left corner, moves the whole
   picture. */
.grip {
  position: absolute;
  left: 1.4rem;
  top: 1.4rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 2px solid #111;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 0 0 1px #fff;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
}
.grip:active { cursor: grabbing; }
.grip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.grip .icon { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.frame[hidden] { display: none; }
.frame canvas { display: block; width: 100%; height: 100%; }
.frame:not(.has-photo) canvas { display: none; }
.frame.has-photo .empty { display: none; }
.frame:not(.has-photo) { cursor: pointer; }

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  color: var(--field-soft);
  cursor: pointer;
  text-align: center;
  padding: 1rem;
  outline: 2px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  outline-offset: -10px;
  transition: background-color 0.2s var(--ease-out), outline-color 0.2s var(--ease-out);
}
.empty .icon { width: 3.25rem; height: 3.25rem; stroke-width: 1.25; color: var(--accent); margin-bottom: 0.6rem; }
.empty span { font: var(--display-weight) clamp(1.5rem, 0.8rem + 1.6vw, 2.4rem)/1.05 var(--display); font-stretch: var(--display-stretch); letter-spacing: -0.025em; color: var(--accent); text-wrap: balance; }
.empty small { font-size: 1rem; color: var(--field-soft); margin-top: 0.35rem; }
.empty:hover, .dropping .empty { outline: 3px solid var(--accent); background: var(--pale-hover); }

/* Folded, the card is fold.css's: the home page's sample stands the same way. */

.turn-card { display: flex; gap: 0.5rem 1.25rem; flex-wrap: wrap; align-items: center; }
.turn-card { justify-content: center; }
.turn-card .button { min-height: 2.75rem; padding: 0.4rem 1rem; }

/* The sides of the card in the preview: one joined bar, each a button
   that turns the card to it, marked as the side showing (solid), seen (a
   tick that pops in and draws itself) or not seen yet (a dashed ring).
   With all four seen, the bar's outline and the ticks turn green, with
   a bounce: a state, said in the words under it too, not a button. */
.turn-card { flex-direction: column; }
.faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border: 2px solid var(--on); border-radius: 12px; transition: border-color 0.4s ease; }
.faces button {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 2.75rem;
  padding: 0 1rem 0 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--on);
  font: 600 0.9375rem var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.faces button:not([aria-pressed="true"]):hover { background: var(--hover); }
.faces button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.faces button[aria-pressed="true"] { background: var(--chosen); color: var(--chosen-ink); }
.face-mark { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 18px; height: 18px; border: 2px dashed currentColor; border-radius: 50%; }
.face-mark svg { display: none; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.faces button.seen .face-mark { border: 0; background: currentColor; }
.faces button.seen .face-mark svg { display: block; color: var(--ground); }
.faces button.seen[aria-pressed="true"] .face-mark svg { color: var(--chosen); }
.faces button.just-seen .face-mark { animation: face-pop 0.35s ease-out; }
.faces button.just-seen .face-mark path { stroke-dasharray: 12; stroke-dashoffset: 12; animation: face-draw 0.3s 0.12s ease-out forwards; }
.faces button.nudged { animation: face-nudge 0.4s ease; }
.faces.all-seen { border-color: var(--all-seen); }
.faces.all-seen button.seen:not([aria-pressed="true"]) .face-mark { background: var(--all-seen); }
.faces.all-seen button.seen:not([aria-pressed="true"]) .face-mark svg { color: var(--all-seen-ink); }
.faces.celebrate { animation: faces-done 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); }
/* Where the bar has no room for the insides' full names, it shows
   them short, and still says them in full to a screen reader. */
.seen-short { display: none; }
@media (max-width: 36rem) {
  .faces .seen-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .faces .seen-short { display: inline; }
  .faces { gap: 2px; }
  .faces button { gap: 6px; padding: 0 0.6rem 0 0.5rem; }
}
.faces-status { margin: 0; text-align: center; font-size: 0.875rem; color: var(--on-soft); }
@keyframes face-draw { to { stroke-dashoffset: 0; } }
@keyframes face-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes face-nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes faces-done {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgb(46 160 90 / 0.55); }
  30% { transform: scale(1.07); }
  55% { transform: scale(0.97); }
  75% { transform: scale(1.02); }
  100% { transform: scale(1); box-shadow: 0 0 0 18px rgb(46 160 90 / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .faces, .faces * { animation: none !important; }
}

/* Either side of the standing card, chevrons turn it on and back. */
.chevron {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  translate: 0 -50%;
  border: 1.5px solid var(--rule);
  border-radius: 50%;
  background: var(--ground);
  color: var(--on);
  cursor: pointer;
}
.chevron .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.chevron:hover { border-color: var(--on); background: var(--hover); }
.chevron:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Just outside the card's sheet, or on a phone, at its edges. */
.chevron.prev { left: -4.5rem; }
.chevron.next { right: -4.5rem; }
.workspace.grown .chevron { display: grid; }
/* The sides' names keep to one line, wider than a wide card if need be. */
.workspace.grown .turn-card { justify-self: center; width: max-content; max-width: calc(100vw - 2rem); }
.workspace.grown #save-error { justify-self: center; width: min(calc(100vw - 2rem), 60rem); }

/* The step's name, over the side, with Help me at its end. */
.step-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.workspace[data-step="card"] .step-actions { display: none; }
.controls { justify-self: center; width: min(100%, 46rem); }
.help-me {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1rem 0 0.8rem;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--on);
  font: 650 0.9375rem var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.help-me:hover { border-color: var(--on); background: var(--hover); }
.help-me:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.step-title {
  margin: 0 0 0.35rem;
  font: var(--display-weight) clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem)/1.05 var(--display);
  font-stretch: var(--display-stretch);
  letter-spacing: -0.02em;
}
.step-title:focus { outline: none; }
#card-settings[hidden] { display: none; }

/* The controls: a specification panel ruled off into cells. Every choice
   is a cell with the same line; the chosen one is printed solid white. */

.controls {
  display: flex;
  flex-direction: column;
}

fieldset {
  margin: 0;
  padding: 0.9rem 0 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
fieldset:last-child { border-bottom: 0; padding-bottom: 0; }
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.25rem;
  font: 800 0.875rem/1.2 var(--display);
  font-stretch: var(--label-stretch);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
legend small { font-family: var(--sans); font-weight: 400; font-stretch: 100%; letter-spacing: 0; text-transform: none; font-size: 0.875rem; color: var(--on-soft); margin-left: 0.35rem; }

/* What a side has not got yet, beside Help me: dashed, to add. */
.step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.add-later {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px dashed var(--rule);
  border-radius: calc(2 * var(--radius));
  background: transparent;
  color: var(--on);
  font: 650 1rem var(--sans);
  cursor: pointer;
}
.add-later:hover { border-color: var(--on); background: var(--hover); }
.add-later[hidden] { display: none; }
.add-later .icon { width: 1.25rem; height: 1.25rem; }
.add-aa { width: 1.25rem; text-align: center; font: 400 1.25rem/1 var(--serif); }
.canvas > .hint.warning { justify-self: center; }

/* The picture's buttons, on it in its top right corner (app.js places
   them): white, with an ink edge, as its grip and handles are, so they
   show on any picture. Beside a picture too small to hold them, they
   lift as the menus do. */
.photo-tools {
  position: absolute;
  z-index: 6;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 2px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  box-shadow: 0 0 0 1px #fff, 0 0.25rem 0.75rem rgb(0 0 0 / 0.25);
}
.photo-tools[hidden] { display: none; }
.photo-tools.beside { box-shadow: 0 0 0 1px #fff, 0 0.5rem 1.5rem rgb(0 0 0 / 0.2); }
.tool-button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.tool-button[hidden] { display: none; }
.tool-button:hover { background: rgb(0 0 0 / 0.08); }
.tool-button:focus-visible { outline: 3px solid #111; outline-offset: -3px; }
.tool-button:disabled { opacity: 0.3; cursor: default; background: transparent; }
.tool-button .icon { stroke-width: 2; }

/* The border round the picture, measured in it: a hairline across the
   border, edge to edge, and its width in mm on the card's white over it,
   small and soft, as a drawing's dimensions are. Across a border at the
   side, the width reads up it. */
.border-marks { inset: 0; z-index: 2; pointer-events: none; }
.border-marks[hidden] { display: none; }
.border-mark { position: absolute; display: grid; place-items: center; }
.border-mark::before { content: ""; position: absolute; background: #8c857c; }
.border-mark:is(.top, .bottom)::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.border-mark:is(.left, .right)::before { top: 50%; left: 0; right: 0; height: 1px; }
.border-mark span { position: relative; padding: 1px 3px; background: #fff; color: #5e5953; font: 600 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.border-mark:is(.left, .right) span { padding: 3px 1px; writing-mode: vertical-rl; rotate: 180deg; }

/* The words' bar while they are written: a white strip, ruled round,
   floated just over them (app.js places it), its menu dropping from it. */
.card-bar {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--strip-rule);
  border-radius: calc(2 * var(--radius));
  background: var(--strip);
  color: var(--strip-ink);
  box-shadow: 0 0.35rem 1.25rem rgb(var(--shade) / 0.22);
  white-space: nowrap;
}
.card-bar[hidden] { display: none; }
.bar-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: 650 0.9375rem var(--sans);
  cursor: pointer;
}
.bar-button:hover { background: var(--strip-hover); }
.bar-button:focus-visible { outline: 3px solid var(--focus); outline-offset: -1px; }
.bar-button:disabled { opacity: 0.35; cursor: default; background: transparent; }
/* Rules between the bar's groups. */
.card-bar > :is(.more-menu, .bar-done) { border-left: 1px solid var(--strip-rule); padding-left: 2px; }
.card-bar > .bar-done { border: 0; padding: 0 0.85rem 0 0.7rem; margin-left: 2px; background: var(--action); color: var(--action-ink); }
.card-bar > .bar-done:hover { background: var(--action-hover); }
/* The bar's menus drop from the bar itself, so they stay in the window. */
.card-bar .bar-menu { position: static; }
.card-bar .bar-menu > summary { cursor: pointer; }
.card-bar .more-menu > summary::after { display: none; }
.card-bar .menu[open] > summary { background: var(--strip-hover); }
.card-bar .menu-items { top: calc(100% + 0.4rem); left: 0; right: auto; white-space: normal; background: var(--strip); }
.card-bar .more-menu .menu-items { left: auto; right: 0; }
.card-bar .menu-items button { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.card-bar .menu-items button[hidden] { display: none; }
.card-bar .menu-items .icon { width: 1.15rem; height: 1.15rem; color: var(--strip-off); }

/* The words, written where they print: their box over their place on the
   side, in the faces and at the sizes they print (a line's size is px at
   96 to the inch; --side-mm is the side's width), growing up from their
   foot as the words are laid out. */
.words-edit { z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; }
.words-edit[hidden] { display: none; }
.words-edit :is(textarea, .words) {
  --at: calc(26.4583cqw / var(--side-mm, 127));
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #3a3632;
  caret-color: var(--accent);
  font: calc(16 * var(--at))/1.45 var(--serif);
  text-align: center;
  overflow: visible;
  field-sizing: content;
}
.words-edit textarea { width: 100%; border: 0; resize: none; }
.words-edit .words { position: relative; }
.words-edit .words p { margin: 0; font-size: calc(var(--size, 16) * var(--at)); }
.words-edit .words strong { font-weight: 700; }
.words-edit .words em { font-style: italic; }
.words-edit .words[data-empty]::before { content: attr(data-placeholder); position: absolute; pointer-events: none; }
.words-edit :is(textarea, .words):focus { outline: 1.5px dashed var(--accent); outline-offset: 0.4rem; }
.words-edit textarea::placeholder, .words-edit .words[data-empty]::before { color: #6f6962; }
.words-edit .words[data-empty]::before { inset: auto 0 0; text-align: center; }
.side-words.writing { visibility: hidden; }

/* The words' bar: the font, the size of the line, Bold and Italic, as a
   word processor has them, then more, and Done. */
.words-bar select, .format-button {
  height: 2.5rem;
  color: var(--field-ink);
  background-color: var(--field);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font: 1.0625rem/1 var(--serif);
  cursor: pointer;
}
.words-bar select {
  appearance: none;
  padding: 0 1.6rem 0 0.6rem;
  /* The chevron, in the field's ink. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.85rem center, right 0.55rem center;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
#font { width: 10rem; min-width: 0; flex: 0 1 auto; }
#text-size { flex: 0 0 auto; width: 4.1rem; font-variant-numeric: tabular-nums; }
.format-button { min-width: 2.5rem; width: 2.5rem; padding: 0; font-size: 1.25rem; }
.format-button b { font-weight: 700; }
.format-button i { font-style: italic; }
.words-bar select:hover, .format-button:hover { background-color: var(--pale-hover); }
.format-button[aria-pressed="true"], .format-button[aria-pressed="true"]:hover { background: var(--field-ink); color: var(--field); }
.words-bar :disabled { opacity: 0.5; cursor: default; }
.words-bar :disabled:hover { background-color: var(--field); }

/* Help me's walk round the step: the page dimmed but for a ring round
   one control, and a callout beside it, a small sheet of the page's
   paper ruled at the top, as the dialogs are. */
.tour { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--on); overflow: hidden; }
.tour::backdrop { background: transparent; }
.tour-ring { position: fixed; border-radius: var(--radius); outline: 3px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 100vmax rgb(var(--shade) / 0.5); pointer-events: none; }
.tour-callout {
  position: fixed;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem 1.25rem 1.25rem;
  border-top: 4px solid var(--on);
  border-radius: var(--radius);
  background: var(--ground);
  box-shadow: 0 1.5rem 3rem rgb(var(--shade) / 0.3);
}
.tour-count { margin: 0; font: 600 0.8125rem var(--sans); color: var(--on-soft); }
.tour-title { margin: 0.25rem 0 0; font: 750 1.125rem/1.25 var(--display); }
.tour-title .inline-icon { vertical-align: -0.15em; }
.tour-text p { margin: 0.5rem 0 0; line-height: 1.5; }
.tour-more { color: var(--on-soft); }
.tour-more a { color: inherit; font-weight: 650; }
.tour .confirm-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
.inline-icon .fill { fill: currentColor; stroke: none; }
.inline-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
@media (prefers-reduced-motion: no-preference) {
  .tour-ring, .tour-callout { transition: left 0.25s var(--ease-out), top 0.25s var(--ease-out), width 0.25s var(--ease-out), height 0.25s var(--ease-out); }
}

.tile:has(input:disabled) { cursor: default; opacity: 0.5; }
.tile:has(input:disabled):hover { background: none; }

/* The card's shape, the first step: two large cells. */
.shapes .tile { padding: 1.5rem 0.5rem 1.25rem; font-size: 1.125rem; }
.shapes .tile svg { width: 5rem; height: 4rem; }

.step-restart .icon { width: 1rem; height: 1rem; }

/* Choosing the card is that choice alone, in the middle of the page:
   no card to look at yet, and no draft to delete. */
.workspace[data-step="card"] { grid-template-columns: minmax(0, 32rem); justify-content: center; }
.workspace[data-step="card"] :is(.canvas, .stage, .turn-card) { display: none; }
.workspace[data-step="card"] #card-settings { border-bottom: 0; }
.workspace[data-step="card"] .step-head { border-bottom: 0; }
.tiles[hidden] { display: none; }

.icon-button {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--on);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.icon-button:hover { background: var(--hover); }
.icon-button:disabled { opacity: 0.35; cursor: default; background: transparent; }
/* Cells: shape, border, and the words' size and style. */
.cells, .tiles, .segmented {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.tiles.three, .segmented.three { grid-template-columns: repeat(3, 1fr); }
.cells > label, .tile, .segmented label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: var(--on);
  transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.cells > label + label, .tile + .tile, .segmented label + label { border-left: 1px solid var(--rule); }
.cells input, .tile input, .segmented input { position: absolute; opacity: 0; pointer-events: none; }
.cells > label:hover, .tile:hover, .segmented label:hover { background: var(--hover); }
.cells > label:has(input:checked), .tile:has(input:checked), .segmented label:has(input:checked) {
  background: var(--chosen);
  color: var(--chosen-ink);
}
.cells > label:has(input:checked)::after, .tile:has(input:checked)::after, .segmented label:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.segmented label:has(input:checked)::after { top: 50%; right: 0.45rem; width: 0.85rem; height: 0.85rem; transform: translateY(-50%); }
.cells > label:has(input:focus-visible), .tile:has(input:focus-visible), .segmented label:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: -1px;
  z-index: 1;
}

.tile { padding: 0.75rem 0.4rem 0.7rem; gap: 0.15rem; font-size: 0.9375rem; line-height: 1.2; }
.tile svg {
  width: 2.75rem;
  height: 2.2rem;
  margin-bottom: 0.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.tile svg .fill { fill: currentColor; fill-opacity: 0.45; stroke: none; }
.tile:has(input:checked) svg .fill { fill-opacity: 0.9; }
.tile span { font-weight: 650; text-wrap: balance; }
.tile small { color: var(--on-soft); font-size: 0.9375rem; }
.tile:has(input:checked) small { color: var(--chosen-soft); }

.hint { margin: 0; color: var(--on-soft); font-size: 0.9375rem; line-height: 1.45; text-wrap: pretty; }
.hint.warning { color: var(--on); font-weight: 650; display: flex; gap: 0.5rem; }
.hint.warning::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.75l7.75 13.5H2.25z'/%3E%3Cpath d='M10 8v4M10 14.25v.25'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hint.warning[hidden] { display: none; }

@media (max-width: 52rem) {
  .workspace { padding-top: 1.25rem; }
  .chevron.prev { left: 0; }
  .chevron.next { right: 0; }
}
/* On a phone, Help me is its mark alone, the words' bar's buttons
   narrower, and the font's name narrower. */
@media (max-width: 30rem) {
  .bar-button { min-width: 2.4rem; }
  .help-me { padding: 0; width: 2.75rem; justify-content: center; }
  .help-me span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #font { width: 7.5rem; }
  .card-bar > .bar-done { padding: 0; width: 2.75rem; }
  .card-bar > .bar-done span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}