/* Own family names: the app shell links this file too, and shared names made browsers fetch both copies. */
@font-face {
  font-family: "SMM Error Sans";
  src: url("/fonts/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "SMM Error Display";
  src: url("/fonts/barlow-condensed-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
.smm-error-document { margin: 0; background: #181818; color-scheme: dark; }
.smm-error, .smm-error * { box-sizing: border-box; }
.smm-error {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: 80rem;
  min-width: 0;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
  color: var(--smm-fog, #f0efe6);
  font: 1rem/1.6 "SMM Error Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.smm-error-embedded { min-height: 60dvh; padding-inline: 0; }
.smm-error-body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 8vh, 6rem);
}
.smm-error-label { margin: 0 0 1.25rem; color: var(--smm-acid, #ddfb3b); font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.smm-error :is(h1, h2) {
  margin: 0;
  font: 600 clamp(3rem, 6vw, 5.5rem)/.98 "SMM Error Display", "Arial Narrow", sans-serif;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.smm-error :is(h1, h2):focus { outline: none; }
.smm-error-description { max-width: 31rem; margin: 1.5rem 0 0; color: var(--smm-muted, #a6a6a6); line-height: 1.75; }
.smm-error-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.smm-error-actions > * { min-height: 3.25rem; }
.smm-error-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: .375rem; padding: .75rem 1.25rem; background: #ddfb3b; color: #181818; font: inherit; font-weight: 600; text-align: center; text-decoration: none; }
.smm-error-button:hover { background: #e5ff58; }
.smm-error-button-secondary { border-color: #808080; background: rgb(255 255 255 / 5%); color: #f0efe6; }
.smm-error-button-secondary:hover { background: rgb(255 255 255 / 10%); }
.smm-error-art {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--smm-line, rgb(240 239 230 / 16%));
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 24px, rgb(240 239 230 / 7%) 25px 26px);
  color: var(--smm-acid, #ddfb3b);
  font: 600 clamp(6rem, 14vw, 12rem)/1 "SMM Error Display", "Arial Narrow", sans-serif;
  letter-spacing: -.04em;
}
.smm-error-art span { padding: .1em; background: var(--smm-ink, #181818); }
.smm-error-support { margin: 1.25rem 0 0; color: var(--smm-muted, #a6a6a6); font-size: .875rem; }
.smm-error-support a { display: inline-flex; min-height: 2.75rem; align-items: center; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.smm-error-support a:hover { color: var(--smm-fog, #f0efe6); }
.smm-error a:focus-visible, .smm-error button:focus-visible { outline: 2px solid var(--smm-focus, #ddfb3b); outline-offset: 4px; }
.smm-error-skip { position: fixed; left: 1rem; top: -10rem; z-index: 100; padding: .75rem 1rem; border-radius: .375rem; background: #ddfb3b; color: #181818; font: 600 1rem/1.5 "SMM Error Sans", sans-serif; }
.smm-error-skip:focus { top: 1rem; }
@media (max-width: 640px) {
  .smm-error { padding-block: 1.25rem; }
  .smm-error-body { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1.5rem; padding-block: 2rem; }
  .smm-error-art { grid-row: 1; width: 6rem; font-size: 3.5rem; }
  .smm-error :is(h1, h2) { font-size: clamp(2.75rem, 12vw, 4rem); }
  .smm-error-label { margin-bottom: 1rem; }
  .smm-error-description { margin-top: 1rem; }
  .smm-error-actions { margin-top: 1.5rem; }
}