:root {
  --color-background: #f4f4f0;
  --color-dark: #0b0d0f;
  --color-primary: #bbd0d0;
  --color-error: #d04040;
  --color-ok: #2b7a4b;
  --color-link: #1466d6;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-background);
  color: var(--color-dark);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  line-height: 1.6666;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--color-link);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 0 0.75em;
  min-height: 3.25rem;
  padding: 0.35em 1em;
  background-color: var(--color-dark);
  color: #fff;
}
.wordmark {
  flex: none;
  margin: 0;
  font-family: 'Monoton', cursive;
  font-weight: 400;
  font-size: 1.65rem;
  line-height: 1;
}
.wordmark a {
  color: #fff;
  text-decoration: none;
}
.crumbs {
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'Rokkitt', serif;
  font-size: 1.3rem;
  line-height: 1.2;
}
.crumbs li {
  display: flex;
  min-width: 0;
  white-space: nowrap;
}
.crumbs li::before {
  content: '/';
  padding: 0 0.45em 0 0;
  color: #56646a;
}
.crumbs li + li::before {
  padding-left: 0.45em;
}
.crumbs a {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e6eded;
  text-decoration: none;
}
.crumbs a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.2em;
}
.crumbs a[aria-current='page'] {
  color: var(--color-primary);
}
.menu {
  display: flex;
  align-items: center;
  gap: 1.25em;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  white-space: nowrap;
}
.menu li {
  min-width: 0;
}
.menu form {
  margin: 0;
}
.menu a,
.menu button {
  color: #c3d1d1;
  text-decoration: none;
}
.menu a:hover,
.menu button:hover {
  color: #fff;
  text-decoration: underline;
}
.menu button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.menu .account {
  display: flex;
  align-items: center;
  gap: 0.35em;
  min-width: 0;
}
.menu .account .material-icons {
  font-size: 1.35rem;
}
.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar a:focus-visible,
.topbar button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
@media only screen and (max-width: 600px) {
  .topbar {
    gap: 0 0.5em;
    min-height: 2.75rem;
    padding: 0.3em 0.75em;
  }
  .wordmark {
    font-size: 1.15rem;
  }
  .crumbs {
    font-size: 1.05rem;
  }
  .menu {
    gap: 0.9em;
  }
  .account-email {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}
.impersonating {
  padding: 0.25em 1em;
  background-color: #2d5f8a;
  color: white;
}
.impersonating.impersonating-write {
  background-color: var(--color-error);
}
.impersonating form {
  margin: 0;
}
.impersonating .material-icons {
  font-size: 1.1em;
  vertical-align: -0.2em;
  margin-right: 0.3em;
}
body.read-only .project-actions,
body.read-only .deck-new,
body.read-only #import-offer {
  display: none;
}
.impersonating button.linkish {
  color: white;
  text-decoration: underline;
}
.appbody {
  padding: 1em;
}
.prose {
  max-width: 44em;
}
.prose .hint {
  color: #666;
  font-size: 0.9em;
}
.prose pre {
  padding: 0.75em 1em;
  overflow-x: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.prose .video {
  margin: 1.5em 0;
}
.prose .video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 6px;
}
.prose .video figcaption {
  color: #666;
  font-size: 0.9em;
  margin-top: 0.5em;
}
.prose code {
  font-size: 0.95em;
}
.decision {
  display: flex;
  gap: 1.5em;
  align-items: center;
  margin-top: 1.5em;
}
.prose h1,
.prose h2,
.landing h1,
.landing h2 {
  font-family: 'Rokkitt', serif;
  margin-block-end: 0.3em;
}
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}
.column {
  flex: 1 1 22em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  min-width: 0;
}
.column > .card {
  flex: none;
}
.card {
  flex: 1 1 22em;
  padding: 1em 1.5em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.card h1,
.card h2 {
  font-family: 'Rokkitt', serif;
  margin-block-start: 0.2em;
}
.empty {
  color: #666;
}
.projects-page {
  max-width: 78rem;
  margin: 0 auto;
}
.projects-title {
  margin: 0.3em 0 0.9em;
  font-family: 'Rokkitt', serif;
  font-size: 2.2em;
  line-height: 1.1;
}
.projects-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 2em;
}
.plan-usage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3em 1.1em;
  margin: 0 0 1.2em;
  color: #5f6b6b;
  font-size: 0.8em;
  line-height: 1.35;
}
.plan-usage-name {
  color: var(--color-dark);
  font-weight: 700;
  text-decoration: none;
}
.plan-usage-name:hover {
  text-decoration: underline;
}
.plan-usage-part {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.plan-usage progress.storage {
  display: inline-block;
  width: 5em;
  margin: 0;
}
.plan-usage-full {
  color: #a35a00;
  font-weight: 600;
}
.plan-usage-full progress.storage {
  accent-color: #a35a00;
}
.plan-usage-upgrade {
  font-weight: 600;
}
.deck-hosted {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-top: 0.3em;
  color: #5f6b6b;
  font-size: 0.75em;
  line-height: 1.2;
}
.deck-hosted .material-icons {
  font-size: 1.15em;
}
.decks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 2.5em 1.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.deck-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.deck {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 5 / 6;
  padding: 8% 8% 0 0;
  contain: size;
  text-decoration: none;
}
.deck:focus-visible {
  outline: none;
}
.deck-face {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  border-radius: 4.5% / 3.2%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 13, 15, 0.18), 0 12px 22px -14px rgba(11, 13, 15, 0.55);
  transition: transform 0.15s ease-out;
}
.deck-face.deck-wide {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: 100%;
}
.deck-face.deck-stack-1 {
  box-shadow: 6px -6px 0 -1px #fff, 6px -6px 0 0 #b6c3c3,
    0 1px 2px rgba(11, 13, 15, 0.18), 0 12px 22px -14px rgba(11, 13, 15, 0.55);
}
.deck-face.deck-stack-2 {
  box-shadow: 6px -6px 0 -1px #fff, 6px -6px 0 0 #b6c3c3,
    12px -12px 0 -1px #fff, 12px -12px 0 0 #b6c3c3,
    0 1px 2px rgba(11, 13, 15, 0.18), 0 12px 22px -14px rgba(11, 13, 15, 0.55);
}
.deck-empty {
  border: 1px solid #d3dbdb;
}
.deck-tile:hover .deck-face,
.deck-tile:focus-within .deck-face {
  transform: translateY(-4px);
}
.deck-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 635 / 889;
  border: 2px dashed #9eb1b1;
  background: transparent;
  box-shadow: none;
  color: #5b6b6b;
}
.deck-blank .material-icons {
  font-size: 2.75rem;
}
.deck-new:hover .deck-blank,
.deck-new:focus-within .deck-blank {
  border-color: var(--color-dark);
  background: #fff;
  color: var(--color-dark);
}
.deck-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 0.9em;
}
.deck-name {
  color: var(--color-dark);
  font-family: 'Rokkitt', serif;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.deck-name:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.deck-name:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
  border-radius: 2px;
}
.deck-meta {
  margin-top: 0.2em;
  color: #5f6b6b;
  font-size: 0.8em;
  line-height: 1.35;
}
.project-actions {
  display: flex;
  gap: 0.1em;
  margin: 0.35em 0 0 -0.45em;
}
@media (hover: hover) {
  .project-actions {
    opacity: 0.45;
    transition: opacity 0.15s;
  }
  .deck-tile:hover .project-actions,
  .project-actions:focus-within {
    opacity: 1;
  }
}
button.iconbutton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  padding: 0;
  border-radius: 6px;
  background: none;
  color: #4a5555;
}
button.iconbutton:hover {
  opacity: 1;
  background: #e6ebe6;
  color: var(--color-dark);
}
button.iconbutton:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 1px;
}
button.iconbutton .material-icons {
  font-size: 1.1em;
}
button.iconbutton.danger {
  background: none;
  color: var(--color-error);
}
button.iconbutton.danger:hover {
  background: #fbe9e9;
}
.rename-project {
  margin-top: 0.9em;
}
.rename-project input[type='text'] {
  margin: 0 0 0.4em;
  padding: 0.3em 0.45em;
  font-family: 'Rokkitt', serif;
  font-size: 1.1em;
  font-weight: 700;
}
.rename-actions {
  display: flex;
  align-items: baseline;
  gap: 1em;
  font-size: 0.9em;
}
.rename-project .status {
  margin: 0.3em 0 0;
}
.asides {
  margin-top: 4em;
  padding-top: 2.5em;
  border-top: 1px solid #dde3df;
}
@media (prefers-reduced-motion: reduce) {
  .deck-face,
  .project-actions {
    transition: none;
  }
}
@media only screen and (max-width: 600px) {
  .decks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2em 1.25em;
  }
  .projects-title {
    font-size: 1.8em;
  }
}
label {
  display: block;
  font-size: 0.9em;
  color: #555;
}
input[type='text'],
input[type='email'] {
  display: block;
  width: 100%;
  max-width: 24em;
  padding: 0.5em;
  margin: 0.25em 0 0.75em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
button,
a.button {
  font: inherit;
  padding: 0.4em 1em;
  border: none;
  border-radius: 6px;
  background: var(--color-dark);
  color: #fff;
  cursor: pointer;
}
button:hover,
a.button:hover {
  opacity: 0.9;
}
a.button {
  display: inline-block;
  text-decoration: none;
}
button[disabled] {
  opacity: 0.5;
  cursor: progress;
}
button.quiet,
a.button.quiet {
  background: transparent;
  color: var(--color-dark);
  box-shadow: inset 0 0 0 1px var(--color-dark);
}
button.quiet:hover,
a.button.quiet:hover {
  opacity: 1;
  background: rgba(11, 13, 15, 0.06);
}
button.linkish {
  background: none;
  color: var(--color-link);
  padding: 0;
  text-decoration: underline;
}
button.danger {
  background: var(--color-error);
}
button.linkish.danger {
  background: none;
  color: var(--color-error);
}
.status {
  margin: 0.5em 0 0;
  font-size: 0.9em;
}
.status-error {
  color: var(--color-error);
}
.status-ok {
  color: var(--color-ok);
}
.feedback {
  margin-bottom: 1em;
  border: 2px solid var(--color-primary);
}
.assistant ul {
  padding-inline-start: 1.25em;
}
.assistant-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: center;
}
.feedback ul {
  padding-inline-start: 1.25em;
}
.feedback li {
  margin: 0.3em 0;
}
.feedback textarea {
  display: block;
  width: 100%;
  padding: 0.5em;
  margin: 0.25em 0 0.75em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
.consent {
  margin: 0 0 0.75em;
}
.consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 1em;
  color: inherit;
  cursor: pointer;
}
.consent input[type='checkbox'] {
  flex: none;
  font-size: inherit;
  width: 1em;
  height: 1em;
  margin: calc((1.6666em - 1em) / 2) 0 0;
}
.consent .hint {
  display: block;
  margin: 0.25em 0 0 1.6em;
  color: #666;
  font-size: 0.9em;
}
.banner {
  margin-bottom: 1em;
  padding: 0.75em 1.25em;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: #fff;
}
.banner p {
  margin: 0.4em 0;
}
.import-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}
.landing {
  margin: -1em -1em 0;
}
.landing-section h2 {
  margin: 0 0 0.4em;
  font-size: 2.2em;
  line-height: 1.1;
}
.landing .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2em 3em;
  padding: 2.5em max(1.5em, calc((100% - 72em) / 2 + 1.5em)) 3.5em;
  background-color: var(--color-dark);
  color: #fff;
}
.landing .hero-title {
  max-width: 11em;
  margin: 0 0 0.35em;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
}
.landing .hero-lede {
  max-width: 30em;
  margin: 0;
  color: #c3d1d1;
  font-size: 1.1em;
}
.landing .hero .signin {
  max-width: 30em;
  margin: 2em 0 0;
  padding: 1.25em 0 0;
  border-top: 1px solid #2c3438;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}
.landing .hero .signin h2 {
  margin: 0 0 0.15em;
  font-size: 1.5em;
}
.landing .hero .signin p {
  margin: 0 0 0.9em;
  color: #c3d1d1;
  font-size: 0.95em;
}
.landing .hero .signin form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.landing .hero .signin label {
  flex-basis: 100%;
  color: #8d9c9c;
}
.landing .hero .signin input[type='email'] {
  flex: 1 1 14em;
  max-width: none;
  margin: 0;
  border-color: #3a4448;
}
.landing .hero .signin button {
  flex: none;
  background: var(--color-primary);
  color: var(--color-dark);
  font-weight: 600;
}
.landing .hero .signin button:hover {
  background: #fff;
  opacity: 1;
}
.landing .hero .signin input:focus-visible,
.landing .hero .signin button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.landing .hero .signin .status-error {
  color: #ff8f8f;
}
.landing .hero .signin .status-ok {
  color: #8fd6a8;
}
.landing .hero .cta {
  margin: 1.5em 0 0;
}
.landing .hand {
  margin: 0;
}
.landing .fan {
  --card-w: clamp(140px, 16vw, 230px);
  position: relative;
  height: calc(var(--card-w) * 1.72 + 1em);
}
.landing .fan-card {
  position: absolute;
  left: 50%;
  bottom: calc(var(--card-w) * 0.3 + 0.25em);
  width: var(--card-w);
  height: auto;
  margin-left: calc(var(--card-w) / -2);
  border-radius: 4.7% / 3.4%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07);
  transform-origin: 50% 190%;
  transform: rotate(var(--angle));
  animation: deal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.landing .fan-card:nth-child(1) { --angle: -20deg; animation-delay: 0.05s; }
.landing .fan-card:nth-child(2) { --angle: -10deg; animation-delay: 0.1s; }
.landing .fan-card:nth-child(3) { --angle: 0deg; animation-delay: 0.15s; }
.landing .fan-card:nth-child(4) { --angle: 10deg; animation-delay: 0.2s; }
.landing .fan-card:nth-child(5) { --angle: 20deg; animation-delay: 0.25s; }
@keyframes deal {
  from {
    transform: translateY(1.5em) rotate(0deg);
  }
}
.landing .hand figcaption {
  color: #8d9c9c;
  font-size: 0.85em;
  text-align: center;
}
.landing .cta a {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 8px;
  font-family: 'Rokkitt', serif;
  font-size: 1.6em;
  background-color: var(--color-primary);
  color: var(--color-dark);
  text-decoration: none;
}
.landing .cta a:hover {
  background-color: #fff;
}
.landing .cta a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.landing-section {
  max-width: 72em;
  margin: 0 auto;
  padding: 4em 1.5em 0;
}
.landing .section-lede {
  max-width: 36em;
  margin: 0 0 1.75em;
}
.landing .shot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d5dcdc;
  border-radius: 10px;
  box-shadow: 0 24px 48px -28px rgba(11, 13, 15, 0.45);
}
.landing .feature-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17em, 1fr));
  gap: 2em 3em;
  margin-top: 1.25em;
}
.landing .feature-group h3 {
  margin: 0 0 0.75em;
  padding-top: 0.5em;
  border-top: 4px solid var(--color-primary);
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}
.landing .feature-group dl {
  margin: 0;
}
.landing .feature-group dt {
  margin-top: 1em;
  font-weight: 700;
  line-height: 1.35;
}
.landing .feature-group dt:first-child {
  margin-top: 0;
}
.landing .feature-group dd {
  margin: 0.2em 0 0;
  color: #3b4246;
  font-size: 0.95em;
  line-height: 1.55;
}
.landing .printing {
  display: grid;
  grid-template-columns: minmax(0, 22em) minmax(0, 1fr);
  align-items: center;
  gap: 2em 4em;
  padding-bottom: 1em;
}
.landing .sheet {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(11, 13, 15, 0.08), 0 24px 44px -20px rgba(11, 13, 15, 0.45);
  transform: rotate(-2deg);
}
.landing .printing-text {
  max-width: 34em;
}
.landing .printing h3 {
  margin: 1.1em 0 0.2em;
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}
.landing .printing p {
  margin: 0;
}
@media only screen and (max-width: 800px) {
  .landing .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 1.5em;
  }
  .landing .hand {
    order: -1;
  }
  .landing .fan {
    --card-w: min(30vw, 170px);
  }
  .landing .printing {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing .sheet {
    max-width: 18em;
    margin: 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing .fan-card {
    animation: none;
  }
}
.usecase .cta-note {
  margin: 0.6em 0 0;
  color: #8d9c9c;
  font-size: 0.9em;
}
.usecase .fan-card {
  border-radius: 3.5% / 2.5%;
  background: #fff;
}
.usecase .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 1.5em 3em;
  margin: 1.25em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.usecase .steps li {
  counter-increment: step;
  padding-top: 0.5em;
  border-top: 4px solid var(--color-primary);
}
.usecase .steps h3 {
  margin: 0 0 0.4em;
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}
.usecase .steps h3::before {
  content: counter(step) '. ';
}
.usecase .steps p {
  margin: 0;
  color: #3b4246;
  line-height: 1.55;
}
.usecase .faq dl {
  max-width: 44em;
  margin: 1em 0 0;
}
.usecase .faq dt {
  margin-top: 1.25em;
  font-weight: 700;
}
.usecase .faq dd {
  margin: 0.25em 0 0;
  color: #3b4246;
  line-height: 1.55;
}
.usecase .closing {
  max-width: none;
  margin-top: 4em;
  padding: 2.5em 1.5em 3em;
  background-color: var(--color-dark);
  color: #fff;
  text-align: center;
}
.usecase .closing p {
  margin: 0 0 0.75em;
  font-family: 'Rokkitt', serif;
  font-size: 1.6em;
}
.signin {
  max-width: 28em;
  margin: 0 auto 2em;
  padding: 1em 1.5em;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.signin h2 {
  margin-block-start: 0.2em;
}
#editor {
  min-height: 60vh;
}
#viewer {
  min-height: 60vh;
}
@media only screen and (min-width: 701px) {
  body:has(#viewer) {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body:has(#viewer) > nav,
  body:has(#viewer) > .sitefoot {
    flex: none;
  }
  body:has(#viewer) > .appbody {
    flex: 1;
    min-height: 0;
    padding: 0;
  }
  body:has(#viewer) #viewer {
    height: 100%;
    min-height: 0;
  }
  body:has(#viewer) > .sitefoot {
    margin: 0;
    padding: 0.25em 1em;
    font-size: 0.75em;
  }
  body:has(#viewer) .sitefoot p {
    display: inline;
    margin: 0 1em 0 0;
  }
}
@media only screen and (max-width: 700px) {
  body:has(#viewer) > .appbody {
    padding: 0;
  }
}
body:has(#editor) {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body:has(#editor) > nav,
body:has(#editor) > .sitefoot {
  flex: none;
}
body:has(#editor) > .appbody {
  flex: 1;
  min-height: 0;
  padding: 0;
}
body:has(#editor) #editor {
  height: 100%;
  min-height: 0;
}
body:has(#editor) > .sitefoot {
  margin: 0;
  padding: 0.25em 1em;
  font-size: 0.75em;
}
body:has(#editor) .sitefoot p {
  display: inline;
  margin: 0 1em 0 0;
}
@media only screen and (min-width: 701px) and (max-width: 900px) {
  body:has(#editor) {
    height: auto;
    overflow: visible;
  }
  body:has(#editor) #editor {
    height: 100dvh;
  }
}
@media only screen and (max-width: 700px) {
  body:has(#editor) .topbar {
    min-height: 2.5rem;
  }
  body:has(#editor) > .sitefoot {
    display: none;
  }
}
dialog.confirm {
  width: min(28em, calc(100vw - 2em));
  padding: 1.25em 1.5em;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--color-dark);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
dialog.confirm::backdrop {
  background: rgba(20, 22, 24, 0.45);
}
.confirm-message {
  margin: 0 0 1.25em;
}
.confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}
.confirm-buttons button {
  padding: 0.4em 1em;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.confirm-buttons button:hover {
  background: #f0f1ec;
}
.confirm-buttons .confirm-ok {
  border-color: var(--color-error);
  background: var(--color-error);
  color: #fff;
}
.confirm-buttons .confirm-ok:hover {
  background: #b33636;
}
.sitefoot {
  margin-top: 2em;
  padding: 1em;
  text-align: center;
  font-size: 0.9em;
  color: #555;
}
.sitefoot p {
  margin: 0 0 0.35em;
}
.sitefoot p:last-child {
  margin-bottom: 0;
}
.sitefoot a {
  color: inherit;
}
.sitefoot .sep {
  padding: 0 0.5em;
  opacity: 0.5;
}
.new-project {
  max-width: 48em;
}
.new-project fieldset {
  min-width: 0;
  border: none;
  margin: 0;
  padding: 0;
}
.new-project legend {
  font-weight: 600;
  margin-block-end: 0.25em;
}
.new-project .hint {
  margin-top: 0;
  font-size: 0.9em;
  color: #555;
}
.new-project .printer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.new-project .printer-tab {
  flex: 1 1 10em;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  align-items: baseline;
  gap: 0 0.5em;
  padding: 0.6em 0.8em;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1em;
  color: var(--color-dark);
  cursor: pointer;
}
.new-project .printer-tab input {
  margin: 0;
}
.new-project .printer-tab span {
  grid-column: 2;
}
.new-project .printer-tab:has(input:checked) {
  border-color: var(--color-dark);
  background: #e6ebe6;
}
@media (max-width: 40em) {
  .new-project .printer-tab {
    flex-basis: 100%;
  }
}
.new-project .printer-tab span,
.new-project .size span {
  font-size: 0.85em;
  color: #666;
}
.new-project .sizes {
  order: 1;
  flex-basis: 100%;
  padding: 0.75em 1em;
  border: 1px solid var(--color-dark);
  border-radius: 8px;
}
.new-project .printer-tab:not(:has(input:checked)) + .sizes {
  display: none;
}
.new-project .sizes > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.new-project .sizes h3 {
  margin: 0.5em 0 0.25em;
  font-size: 0.9em;
  color: #555;
}
.new-project .sizes h3:first-of-type {
  margin-top: 0;
}
.new-project .size-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20em, 100%), 1fr));
  gap: 0 1em;
}
.new-project .size {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  padding: 0.15em 0;
  font-size: 1em;
  color: var(--color-dark);
  cursor: pointer;
}
.new-project .size input {
  margin: 0;
}
.new-project .custom-size {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
}
.new-project .custom-size label {
  flex: 1 1 8em;
}
.new-project .custom-size .hint {
  flex-basis: 100%;
}
.new-project .presets {
  flex-basis: 100%;
  margin: 0 0 0.5em;
}
.new-project .presets p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25em 0.5em;
  margin: 0 0 0.4em;
}
.new-project .presets button {
  padding: 0.2em 0.6em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: var(--color-dark);
  cursor: pointer;
}
.new-project .presets button:hover {
  border-color: #888;
  background: #e6ebe6;
}
.new-project input[type='number'],
.new-project .custom-size select {
  display: block;
  width: 100%;
  padding: 0.5em;
  margin: 0.25em 0 0.25em;
  font: inherit;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
.new-project .templates {
  margin-block: 1.25em;
}
.new-project .template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
  gap: 0.75em;
}
.new-project .template {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 0.75em;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: var(--color-dark);
  cursor: pointer;
}
.new-project .template:has(input:checked) {
  border-color: var(--color-dark);
  box-shadow: 0 0 0 1px var(--color-dark);
}
.new-project .template input {
  position: absolute;
  opacity: 0;
}
.new-project .template:has(input:focus-visible) {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}
.new-project .template-preview {
  display: block;
  height: 9em;
  margin: 0 auto 0.4em;
}
.new-project img.template-preview {
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.25));
}
.new-project .template span.template-preview {
  font-size: inherit;
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--card-ratio, 63.5 / 88.9);
  border-radius: 6px;
}
.new-project .template.unfit :is(.template-preview, .face > *) {
  opacity: 0.4;
}
.new-project .template.unfit .template-fits {
  color: var(--color-dark);
}
.new-project .template-blank {
  border: 1px dashed #bbb;
  box-shadow: none;
}
.new-project .template-none {
  background: repeating-linear-gradient(135deg, transparent 0 6px, #eee 6px 7px);
  border: 1px dashed #ddd;
  box-shadow: none;
}
.new-project .template span {
  font-size: 0.85em;
  color: #666;
}
.new-project .template .template-fits {
  color: #888;
}
.new-project .template .face {
  display: contents;
  font-size: inherit;
  color: inherit;
}
.new-project .template .as-tile,
.new-project form.tiles .template .as-card {
  display: none;
}
.new-project form.tiles .template .as-tile {
  display: contents;
}
.new-project .accent {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.75em;
}
.new-project .accent input {
  width: 3em;
  height: 2em;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
}
.new-project .form-actions {
  display: flex;
  align-items: baseline;
  gap: 1.5em;
}
.usecase .alternative {
  display: grid;
  grid-template-columns: minmax(0, 14em) minmax(0, 1fr);
  align-items: center;
  gap: 2em 3em;
}
.usecase .alt-card {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3.5% / 2.5%;
  box-shadow: 0 2px 4px rgba(11, 13, 15, 0.08), 0 24px 44px -20px rgba(11, 13, 15, 0.45);
  transform: rotate(-3deg);
}
@media only screen and (max-width: 800px) {
  .usecase .alternative {
    grid-template-columns: minmax(0, 1fr);
  }
  .usecase .alt-card {
    max-width: 12em;
    margin: 0 auto;
  }
}
.landing .use-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  gap: 1.5em 2em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing .use-tiles a {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.landing .use-tiles img {
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto 0.75em;
  border-radius: 3.5% / 2.5%;
  box-shadow: 0 2px 4px rgba(11, 13, 15, 0.08), 0 18px 32px -18px rgba(11, 13, 15, 0.45);
  transition: transform 0.2s ease;
}
.landing .use-tiles a:hover img,
.landing .use-tiles a:focus-visible img {
  transform: translateY(-4px) rotate(-2deg);
}
.landing .use-tiles strong {
  padding-top: 0.5em;
  border-top: 4px solid var(--color-primary);
  font-family: 'Rokkitt', serif;
  font-size: 1.4em;
  line-height: 1.2;
}
.landing .use-tiles span {
  color: #3b4246;
  font-size: 0.95em;
  line-height: 1.5;
}
.landing .use-tiles a:hover strong {
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .landing .use-tiles img {
    transition: none;
  }
}
.pricing-page {
  max-width: 60em;
  margin: 0 auto;
}
.plans {
  margin: 1em 0 2em;
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  flex-basis: 15em;
}
.plan ul {
  padding-inline-start: 1.2em;
  flex: 1;
}
.plan-current {
  outline: 2px solid var(--color-primary);
}
.plan-price strong {
  font-size: 1.3em;
}
.plan-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.plan-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em 1.25em;
  align-items: center;
  margin: 1.25em 0 1em;
}
.plan-links form {
  margin: 0;
}
progress.storage {
  display: block;
  width: 100%;
  max-width: 24em;
  margin-top: 0.4em;
  accent-color: var(--color-dark);
}
.usecase .pile {
  --mm: clamp(2.6px, 0.32vw, 4.2px);
  position: relative;
  height: calc(var(--mm) * 105);
}
.usecase .pile-token {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  transform: rotate(var(--angle));
  animation: deal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.usecase .pile-token:nth-child(1) { width: calc(var(--mm) * 38.1); left: 6%; top: 8%; --angle: -8deg; animation-delay: 0.05s; }
.usecase .pile-token:nth-child(2) { width: calc(var(--mm) * 50.8); left: 30%; top: 26%; --angle: 0deg; animation-delay: 0.1s; }
.usecase .pile-token:nth-child(3) { width: calc(var(--mm) * 38.1); left: 64%; top: 4%; --angle: 12deg; animation-delay: 0.15s; }
.usecase .pile-token:nth-child(4) { width: calc(var(--mm) * 38); left: 10%; top: 56%; --angle: 6deg; animation-delay: 0.2s; }
.usecase .pile-token:nth-child(5) { width: calc(var(--mm) * 31.75); left: 68%; top: 60%; --angle: -14deg; animation-delay: 0.25s; }
@media only screen and (max-width: 800px) {
  .usecase .pile {
    --mm: min(0.8vw, 3.4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .usecase .pile-token {
    animation: none;
  }
}
.landing .use-tiles img.token {
  aspect-ratio: 240 / 336;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 10px 12px rgba(11, 13, 15, 0.35));
}