@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2');
}

/* Download button loading state */
.download-btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.download-btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top-color: #333;
  border-left-color: #333;
  border-radius: 50%;
  animation: download-spinner 0.8s linear infinite;
}

/* Smaller spinner for dashboard buttons */
.format-badge.download-btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.format-badge.download-btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(0,0,0,0.1);
  border-top-color: #333;
  border-left-color: #333;
  border-radius: 50%;
  animation: download-spinner 0.8s linear infinite;
}

@keyframes download-spinner {
  to {transform: rotate(360deg);}
}

@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable-Italic.woff2') format('woff2');
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-Thin.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/Inter-ThinItalic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLight.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/Inter-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-Light.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Inter-LightItalic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Italic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-Medium.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Inter-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-Bold.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Inter-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-Black.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/Inter-BlackItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/InterDisplay-Thin.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("fonts/InterDisplay-ThinItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraLight.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraLightItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/InterDisplay-Light.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/InterDisplay-LightItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InterDisplay-Regular.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/InterDisplay-Italic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/InterDisplay-Medium.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/InterDisplay-MediumItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/InterDisplay-SemiBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/InterDisplay-Bold.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/InterDisplay-BoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/InterDisplay-ExtraBoldItalic.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/InterDisplay-Black.woff2") format("woff2");
}

@font-face {
  font-family: InterDisplay;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/InterDisplay-BlackItalic.woff2") format("woff2");
}

@font-feature-values InterVariable {
  @character-variant {
      cv01: 1;
      cv02: 2;
      cv03: 3;
      cv04: 4;
      cv05: 5;
      cv06: 6;
      cv07: 7;
      cv08: 8;
      cv09: 9;
      cv10: 10;
      cv11: 11;
      cv12: 12;
      cv13: 13;
      alt-1: 1;
      /* Alternate one */
      alt-3: 9;
      /* Flat-top three */
      open-4: 2;
      /* Open four */
      open-6: 3;
      /* Open six */
      open-9: 4;
      /* Open nine */
      lc-l-with-tail: 5;
      /* Lower-case L with tail */
      simplified-u: 6;
      /* Simplified u */
      alt-double-s: 7;
      /* Alternate German double s */
      uc-i-with-serif: 8;
      /* Upper-case i with serif */
      uc-g-with-spur: 10;
      /* Capital G with spur */
      single-story-a: 11;
      /* Single-story a */
      compact-lc-f: 12;
      /* Compact f */
      compact-lc-t: 13;
      /* Compact t */
  }

  @styleset {
      ss01: 1;
      ss02: 2;
      ss03: 3;
      ss04: 4;
      ss05: 5;
      ss06: 6;
      ss07: 7;
      ss08: 8;
      open-digits: 1;
      /* Open digits */
      disambiguation: 2;
      /* Disambiguation (with zero) */
      disambiguation-except-zero: 4;
      /* Disambiguation (no zero) */
      round-quotes-and-commas: 3;
      /* Round quotes & commas */
      square-punctuation: 7;
      /* Square punctuation */
      square-quotes: 8;
      /* Square quotes */
      circled-characters: 5;
      /* Circled characters */
      squared-characters: 6;
      /* Squared characters */
  }
}

@font-feature-values Inter {
  @character-variant {
      cv01: 1;
      cv02: 2;
      cv03: 3;
      cv04: 4;
      cv05: 5;
      cv06: 6;
      cv07: 7;
      cv08: 8;
      cv09: 9;
      cv10: 10;
      cv11: 11;
      cv12: 12;
      cv13: 13;
      alt-1: 1;
      /* Alternate one */
      alt-3: 9;
      /* Flat-top three */
      open-4: 2;
      /* Open four */
      open-6: 3;
      /* Open six */
      open-9: 4;
      /* Open nine */
      lc-l-with-tail: 5;
      /* Lower-case L with tail */
      simplified-u: 6;
      /* Simplified u */
      alt-double-s: 7;
      /* Alternate German double s */
      uc-i-with-serif: 8;
      /* Upper-case i with serif */
      uc-g-with-spur: 10;
      /* Capital G with spur */
      single-story-a: 11;
      /* Single-story a */
      compact-lc-f: 12;
      /* Compact f */
      compact-lc-t: 13;
      /* Compact t */
  }

  @styleset {
      ss01: 1;
      ss02: 2;
      ss03: 3;
      ss04: 4;
      ss05: 5;
      ss06: 6;
      ss07: 7;
      ss08: 8;
      open-digits: 1;
      /* Open digits */
      disambiguation: 2;
      /* Disambiguation (with zero) */
      disambiguation-except-zero: 4;
      /* Disambiguation (no zero) */
      round-quotes-and-commas: 3;
      /* Round quotes & commas */
      square-punctuation: 7;
      /* Square punctuation */
      square-quotes: 8;
      /* Square quotes */
      circled-characters: 5;
      /* Circled characters */
      squared-characters: 6;
      /* Squared characters */
  }
}

@font-feature-values InterDisplay {
  @character-variant {
      cv01: 1;
      cv02: 2;
      cv03: 3;
      cv04: 4;
      cv05: 5;
      cv06: 6;
      cv07: 7;
      cv08: 8;
      cv09: 9;
      cv10: 10;
      cv11: 11;
      cv12: 12;
      cv13: 13;
      alt-1: 1;
      /* Alternate one */
      alt-3: 9;
      /* Flat-top three */
      open-4: 2;
      /* Open four */
      open-6: 3;
      /* Open six */
      open-9: 4;
      /* Open nine */
      lc-l-with-tail: 5;
      /* Lower-case L with tail */
      simplified-u: 6;
      /* Simplified u */
      alt-double-s: 7;
      /* Alternate German double s */
      uc-i-with-serif: 8;
      /* Upper-case i with serif */
      uc-g-with-spur: 10;
      /* Capital G with spur */
      single-story-a: 11;
      /* Single-story a */
      compact-lc-f: 12;
      /* Compact f */
      compact-lc-t: 13;
      /* Compact t */
  }

  @styleset {
      ss01: 1;
      ss02: 2;
      ss03: 3;
      ss04: 4;
      ss05: 5;
      ss06: 6;
      ss07: 7;
      ss08: 8;
      open-digits: 1;
      /* Open digits */
      disambiguation: 2;
      /* Disambiguation (with zero) */
      disambiguation-except-zero: 4;
      /* Disambiguation (no zero) */
      round-quotes-and-commas: 3;
      /* Round quotes & commas */
      square-punctuation: 7;
      /* Square punctuation */
      square-quotes: 8;
      /* Square quotes */
      circled-characters: 5;
      /* Circled characters */
      squared-characters: 6;
      /* Squared characters */
  }
}

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  /* <-- block, not swap */
  src: url('fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
  /* <-- block, not swap */
  src: url('fonts/InterVariable-Italic.woff2') format('woff2');
}

@font-feature-values InterVariable {
  @styleset {
      alt-digits: 1;
      disambiguation: 2;
      round-quotes: 2;
  }

  @character-variant {
      cv01: 1;
      alt-one: 1;
      cv02: 2;
      alt-four: 2;
      cv03: 3;
      alt-six: 3;
      cv04: 4;
      alt-nine: 4;
      cv05: 5;
      l-tail: 5;
      cv06: 6;
      simple-u: 6;
      cv07: 7;
      alt-german-s: 7;
      cv08: 8;
      cap-i-serif: 8;
      cv09: 9;
      alt-three: 9;
      cv10: 10;
      cap-g-spur: 10;
      cv11: 11;
      simple-a: 11;
      cv12: 12;
      compact-f: 12;
      cv13: 13;
      compact-t: 13;
  }
}

:root {
  --font-size: 16px;
  --line-height: 1.5;

  --spacing: 2rem;
  --spacingv: 0.75rem;
  --columnGap: 2rem;
  --line-width: 2px;
  --header-height: 48px;
  --row-padding: 4rem;
  --row-padding-vertical: var(--row-padding);

  --background-color: #ffffff;
  --foreground-color: #000;
  --foreground-color-bright: #000;
  --foreground-color-5: rgba(0, 0, 0, 0.5);
  --foreground-color-1: rgba(0, 0, 0, 0.08);
  --underline-color: rgba(0, 0, 0, 0.3);
  --underline-color-bright: rgba(0, 0, 0, 0.6);
  --link-hover-color: var(--blue);
  --grid-color: #ccc;
  --unit-background-color: var(--foreground-color-1);
  --active-bgcolor: var(--yellow);

  --red: color(display-p3 0.94 0.19 0.04);
  --hot-orange: color(display-p3 1 0.38 0.19);
  --yellow: color(display-p3 1 0.96 0.05);
  --warm-yellow: #f9de69;
  --light-yellow: color(display-p3 1 1 0.7);
  --light-yellow2: color(display-p3 1 0.98 0.59);
  --blue: rgb(3, 102, 230);
  --green: rgb(38, 220, 78);
  --medium-green: rgb(119, 221, 134);

  --font-family: InterVariable;

  /* font-size needed at :root for rem to work as expected */
  font-family: var(--font-family), sans-serif;
  font-synthesis: none;
  font-size: var(--font-size);
  font-feature-settings: 'liga' 1, 'calt' 1;
  /* workaround for bug in Chrome */
}

@supports not (font-variation-settings: normal) {
  :root {
      --font-family: Inter;
  }
}

@supports not (color: color(display-p3 1 1 1)) {
  :root {
      /* sRGB colors */
      --red: #F03009;
      --yellow: #FFF310;
      --warm-yellow: #f9de69;
      --light-yellow: rgb(255, 255, 179);
      --light-yellow2: rgb(255, 250, 135);
  }
}

/* @media (prefers-color-scheme: dark) { */
  :root {
      --background-color: #100220;
      --foreground-color: #fafafa;
      --foreground-color-bright: #fff;
      --foreground-color-5: rgba(255, 255, 255, 0.5);
      --underline-color: rgba(255, 255, 255, 0.3);
      --underline-color-bright: rgba(255, 255, 255, 0.6);
      --link-hover-color: var(--light-yellow);
      --grid-color: #555;
      /* must be opaque */
      --unit-background-color: #333;
      --active-bgcolor: color(display-p3 0.57 0.44 0);
      font-weight: 400;
  }
/* } */

/* narrow windows */
@media only screen and (max-width: 1391px) {

  /* window width <= 1391 */
  .only-huge-screen {
      display: none !important;
  }
}

@media only screen and (max-width: 719px) {

  /* window width <= 719 */
  :root {
      --row-padding: 2rem;
  }

  .only-large-screen {
      display: none !important;
  }
}

@media only screen and (max-width: 500px) {

  /* window width <= 500 */
  :root {
      --row-padding: 1rem;
      --row-padding-vertical: 2rem
  }

  .not-small-screen {
      display: none !important;
  }
}

/* wide windows */
@media only screen and (min-width: 720px) {

  /* window width >= 720 */
  .only-small-screen {
      display: none !important;
  }
}

@media only screen and (min-width: 1392px) {

  /* window width >= 1392 */
  :root {
      font-size: calc(100vw / 87);
  }
}

body {
  background-color: var(--background-color);
  color: var(--foreground-color);
  line-height: var(--line-height);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  margin: 0;
  padding: var(--header-height) 0 0 0;
}

* {
  scroll-padding-top: var(--header-height);
}

header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  overflow: hidden;
  z-index: 2;
  background: var(--background-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  font-size: 14px;
}

header>div {
  width: 100%;
  /*max-width: calc(1392px - 8rem);*/
  flex: 1 0 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

header>div>* {
  padding: 0 var(--row-padding);
}

header .menu {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 2em;
}

header h4 {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
}

header a {
  padding: 0;
  text-decoration: none
}

header a:hover {
  text-decoration: none;
  color: inherit
}

header a.active {
  background: var(--active-bgcolor);
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 3px;
}

header .scroll-reveal {
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

header .scroll-reveal.visible {
  opacity: 1;
  pointer-events: all;
}

@media only screen and (max-width: 500px) {
  header {
      position: fixed;
  }

  header .scroll-reveal {
      opacity: 1;
      pointer-events: all;
  }

  header .menu {
      gap: 8px
  }

  header .menu>* {
      flex: 1 1 auto
  }
}

footer {
  opacity: 0.4;
}

footer:hover {
  opacity: 1;
}

div,
p,
pre,
ol,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

p,
pre,
ol,
ul {
  margin-bottom: calc(var(--spacingv) * 2);
}

h1 {
  font-weight: 600;
  font-size: 4rem;
  letter-spacing: -0.01em;
  line-height: 1.0;
  margin-left: calc(3rem / -19);
  margin-bottom: calc(var(--spacingv) * 2);
  color: var(--foreground-color-bright);
}

h2 {
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.01em;
  line-height: calc(var(--spacingv) * 3);
  margin-bottom: calc(var(--spacingv) * 2);
}

h3 {
  font-weight: 600;
  font-size: 1.2rem;
  margin-bottom: calc(var(--spacingv) * 2);
}

h3 q {
  font-weight: 400;
  padding-left: 0.5em;
}

h4,
h5,
h6 {
  font-weight: 640;
  margin-bottom: calc(var(--spacingv) * 1);
}

h1>a,
h2>a,
h3>a,
h4>a {
  display: inline-block;
  color: inherit;
  text-decoration: none !important;
  text-shadow: none;
  background: none;
  outline: none;
}

*+h1 {
  margin-top: calc(var(--spacingv) * 6);
}

*+h2 {
  margin-top: calc(var(--spacingv) * 4);
}

*+h3 {
  margin-top: calc(var(--spacingv) * 3);
}

*+h4 {
  margin-top: calc(var(--spacingv) * 2);
}

a {
  text-decoration: underline;
  text-decoration-color: var(--underline-color);
  color: var(--foreground-color);
  word-break: break-word;
  word-wrap: break-word;
}

a.fat {
  font-weight: 500;
  color: #333;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration-color: var(--link-hover-color);
  text-decoration: underline;
}

a.plain,
a.fat {
  background: none;
  text-shadow: none;
  text-decoration: none;
  cursor: pointer;
}

a[href^="#"]:hover {
  text-decoration-style: dashed;
}

code,
pre,
q,
tt,
r-feat,
.feat {
  font-family: monospace;
  font-size: 92%;
  font-feature-settings: "calt" 0;
  line-height: inherit;
  font-weight: 440;
}

code,
r-feat,
.feat {
  padding: 0 .1em;
  white-space: pre;
}

pre {
  white-space: pre-wrap;
  line-break: loose;
  overflow-x: auto;
}

r-feat,
.feat {
  padding: 0 .3em;
  border-radius: 0.3em;
  user-select: all;
  background: var(--unit-background-color);
}

a.feat:hover {
  text-decoration: none;
  background: var(--foreground-color);
  color: var(--background-color);
}

q {
  display: inline;
  white-space: pre-wrap;
}

q {
  display: inline;
}

q:before {
  content: "";
}

q:after {
  content: "";
}

kbd {
  -moz-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1;
  -ms-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1;
  -o-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1;
  -webkit-font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1;
  font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1, 'case' 1;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 3px;
  padding: 0.1em 0.2em;
  margin: 0 0.1em;
}

dem {
  font-weight: 400;
  opacity: 0.7;
}

num,
.num {
  letter-spacing: 0.01em;
  white-space: nowrap;
  font-variant: tabular-nums slashed-zero;
  break-before: avoid;
}

em,
i,
.italic {
  font-style: italic;
}

small,
.small {
  font-size: 1vw;
  letter-spacing: 0.012em;
}

@media only screen and (max-width: 1200px) {

  small,
  .small {
      font-size: 12px;
  }
}

hr {
  border: none;
  background: var(--foreground-color);
  height: var(--line-width);
  margin-top: calc(1em * var(--line-height));
  margin-bottom: calc(1em * var(--line-height));
}

ol,
ul {
  padding-left: 1.2rem;
}

input,
select {
  font: inherit
}

.leading-trim {
  margin-top: -0.235em;
  line-height: 1.2;
}

.row {
  padding: var(--row-padding-vertical) var(--row-padding);
  display: flex;
  justify-content: center;
}

.row>* {
  width: 100%;
  max-width: calc(100vw - calc(var(--row-padding) * 2));
  flex: 1 0 100%;
}

.row .learn-more {
  margin-top: 2em;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.007em;
}

.row .learn-more a {
  color: rgba(0, 0, 0, 0.4);
  text-decoration-color: rgba(0, 0, 0, 0);
}

.row .learn-more a:hover {
  color: inherit;
}

.row.full-width {
  padding: 50px 0;
  justify-content: flex-start;
}

.row.full-width>* {
  max-width: initial;
}

.ff-none {
  font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0, 'ccmp' 0;
  -webkit-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0, 'ccmp' 0;
  -ms-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0, 'ccmp' 0;
  -moz-font-feature-settings: 'kern' 1, 'calt' 0, 'liga' 0, 'ccmp' 0;
}

.ff-liga,
.ff-calt {
  font-feature-settings: 'liga' 1, 'calt' 1;
  -webkit-font-feature-settings: 'liga' 1, 'calt' 1;
  -ms-font-feature-settings: 'liga' 1, 'calt' 1;
  -moz-font-feature-settings: 'liga' 1, 'calt' 1;
}

.ff-dlig {
  font-feature-settings: 'kern' 1, 'dlig' 1;
  -webkit-font-feature-settings: 'kern' 1, 'dlig' 1;
  -ms-font-feature-settings: 'kern' 1, 'dlig' 1;
  -moz-font-feature-settings: 'kern' 1, 'dlig' 1;
}

.ff-numr {
  font-feature-settings: 'kern' 1, 'numr' 1;
  -webkit-font-feature-settings: 'kern' 1, 'numr' 1;
  -ms-font-feature-settings: 'kern' 1, 'numr' 1;
  -moz-font-feature-settings: 'kern' 1, 'numr' 1;
}

.ff-dnom {
  font-feature-settings: 'kern' 1, 'dnom' 1;
  -webkit-font-feature-settings: 'kern' 1, 'dnom' 1;
  -ms-font-feature-settings: 'kern' 1, 'dnom' 1;
  -moz-font-feature-settings: 'kern' 1, 'dnom' 1;
}

.ff-tnum {
  font-feature-settings: 'kern' 1, 'tnum' 1;
  -webkit-font-feature-settings: 'kern' 1, 'tnum' 1;
  -ms-font-feature-settings: 'kern' 1, 'tnum' 1;
  -moz-font-feature-settings: 'kern' 1, 'tnum' 1;
}

.ff-case {
  font-feature-settings: 'kern' 1, 'case' 1;
  -webkit-font-feature-settings: 'kern' 1, 'case' 1;
  -ms-font-feature-settings: 'kern' 1, 'case' 1;
  -moz-font-feature-settings: 'kern' 1, 'case' 1;
}

.ff-zero {
  font-feature-settings: 'kern' 1, 'zero' 1;
  -webkit-font-feature-settings: 'kern' 1, 'zero' 1;
  -ms-font-feature-settings: 'kern' 1, 'zero' 1;
  -moz-font-feature-settings: 'kern' 1, 'zero' 1;
}

.ff-frac {
  font-feature-settings: 'kern' 1, 'frac' 1;
  -webkit-font-feature-settings: 'kern' 1, 'frac' 1;
  -ms-font-feature-settings: 'kern' 1, 'frac' 1;
  -moz-font-feature-settings: 'kern' 1, 'frac' 1;
}

.ff-sups {
  font-feature-settings: 'kern' 1, 'sups' 1;
  -webkit-font-feature-settings: 'kern' 1, 'sups' 1;
  -ms-font-feature-settings: 'kern' 1, 'sups' 1;
  -moz-font-feature-settings: 'kern' 1, 'sups' 1;
}

.ff-subs {
  font-feature-settings: 'kern' 1, 'subs' 1;
  -webkit-font-feature-settings: 'kern' 1, 'subs' 1;
  -ms-font-feature-settings: 'kern' 1, 'subs' 1;
  -moz-font-feature-settings: 'kern' 1, 'subs' 1;
}

.ff-cpsp {
  font-feature-settings: 'kern' 1, 'cpsp' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cpsp' 1;
  -ms-font-feature-settings: 'kern' 1, 'cpsp' 1;
  -moz-font-feature-settings: 'kern' 1, 'cpsp' 1;
}

.ff-salt {
  font-feature-settings: 'kern' 1, 'salt' 1;
  -webkit-font-feature-settings: 'kern' 1, 'salt' 1;
  -ms-font-feature-settings: 'kern' 1, 'salt' 1;
  -moz-font-feature-settings: 'kern' 1, 'salt' 1;
}

.ff-salt-zero {
  font-feature-settings: 'kern' 1, 'salt' 1, 'zero' 1;
}

.ff-cv07-salt-zero {
  font-feature-settings: 'kern' 1, 'cv07' 1, 'salt' 1, 'zero' 1;
}

.ff-ss01 {
  font-feature-settings: 'kern' 1, 'ss01' 1;
  -webkit-font-feature-settings: 'kern' 1, 'ss01' 1;
  -ms-font-feature-settings: 'kern' 1, 'ss01' 1;
  -moz-font-feature-settings: 'kern' 1, 'ss01' 1;
}

.ff-ss02 {
  font-feature-settings: 'kern' 1, 'ss02' 1;
  -webkit-font-feature-settings: 'kern' 1, 'ss02' 1;
  -ms-font-feature-settings: 'kern' 1, 'ss02' 1;
  -moz-font-feature-settings: 'kern' 1, 'ss02' 1;
}

.ff-ss03 {
  font-feature-settings: 'kern' 1, 'ss03' 1;
  -webkit-font-feature-settings: 'kern' 1, 'ss03' 1;
  -ms-font-feature-settings: 'kern' 1, 'ss03' 1;
  -moz-font-feature-settings: 'kern' 1, 'ss03' 1;
}

.ff-cv01 {
  font-feature-settings: 'kern' 1, 'cv01' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv01' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv01' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv01' 1;
}

.ff-cv02 {
  font-feature-settings: 'kern' 1, 'cv02' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv02' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv02' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv02' 1;
}

.ff-cv03 {
  font-feature-settings: 'kern' 1, 'cv03' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv03' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv03' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv03' 1;
}

.ff-cv04 {
  font-feature-settings: 'kern' 1, 'cv04' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv04' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv04' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv04' 1;
}

.ff-cv05 {
  font-feature-settings: 'kern' 1, 'cv05' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv05' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv05' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv05' 1;
}

.ff-cv06 {
  font-feature-settings: 'kern' 1, 'cv06' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv06' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv06' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv06' 1;
}

.ff-cv07 {
  font-feature-settings: 'kern' 1, 'cv07' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv07' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv07' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv07' 1;
}

.ff-cv08 {
  font-feature-settings: 'kern' 1, 'cv08' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv08' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv08' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv08' 1;
}

.ff-cv09 {
  font-feature-settings: 'kern' 1, 'cv09' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv09' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv09' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv09' 1;
}

.ff-cv10 {
  font-feature-settings: 'kern' 1, 'cv10' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv10' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv10' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv10' 1;
}

.ff-cv11 {
  font-feature-settings: 'kern' 1, 'cv11' 1;
  -webkit-font-feature-settings: 'kern' 1, 'cv11' 1;
  -ms-font-feature-settings: 'kern' 1, 'cv11' 1;
  -moz-font-feature-settings: 'kern' 1, 'cv11' 1;
}

.button,
a.button {
  font: inherit;
  display: inline-block;
  padding: 0.25rem 0.8rem;
  margin: 0.5rem 0;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  user-select: none;
  font-weight: 470;
  letter-spacing: 0.02em;
  background: var(--foreground-color);
  color: var(--background-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.button:hover,
a.button:hover {
  background: var(--link-hover-color);
  color: #000;
}

#sponsor-button {
  display: inline-block;
  min-width: 1%;
  max-width: 100%;
  height: 2em;
  line-height: 2em;
  border-radius: 0.25em;
  border: 1px solid var(--underline-color);
  font-weight: 500;
  font-weight: 480;
  text-decoration: none;
  padding: 0 0.6em;
  user-select: none;
  -webkit-user-select: none;
}

#sponsor-button:hover {
  border-color: var(--foreground-color);
  color: inherit;
}

#sponsor-button span {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

#sponsor-button span::before {
  content: "♥";
  color: var(--red);
  margin-right: 0.3em;
  font-size: 1.1em;
  line-height: 1em;
}

.cv01 {
  font-variant-alternates: character-variant(cv01);
}

.cv02 {
  font-variant-alternates: character-variant(cv02);
}

.cv03 {
  font-variant-alternates: character-variant(cv03);
}

.cv04 {
  font-variant-alternates: character-variant(cv04);
}

.cv05 {
  font-variant-alternates: character-variant(cv05);
}

.cv06 {
  font-variant-alternates: character-variant(cv06);
}

.cv07 {
  font-variant-alternates: character-variant(cv07);
}

.cv08 {
  font-variant-alternates: character-variant(cv08);
}

.cv09 {
  font-variant-alternates: character-variant(cv09);
}

.cv10 {
  font-variant-alternates: character-variant(cv10);
}

.cv11 {
  font-variant-alternates: character-variant(cv11);
}

.cv12 {
  font-variant-alternates: character-variant(cv12);
}

.cv13 {
  font-variant-alternates: character-variant(cv13);
}

.zero {
  font-variant-numeric: slashed-zero;
}

r-grid {
  display: grid;
  --grid-tc: repeat(4, 1fr);
  grid-template-columns: var(--grid-tc);
  --grid-cs: 1;
  --grid-ce: -1;
  grid-column-gap: var(--columnGap);
  grid-row-gap: 0;
}

r-grid>r-cell.spacer {
  grid-column: 1 / -1;
  height: calc(var(--spacingv) * 6);
}

@media only screen and (max-width: 719px) {
  r-grid {
      grid-column-gap: 1rem;
  }

  r-cell.spacer {
      height: calc(var(--spacingv) * 3);
  }
}

r-grid>hr {
  grid-column: 1 / -1;
  width: 100%
}

r-grid>r-cell {
  display: block;
  appearance: none;
  -webkit-appearance: none
}

r-grid[columns="1"] {
  --grid-tc: repeat(1, 1fr)
}

r-grid[columns="2"] {
  --grid-tc: repeat(2, 1fr)
}

r-grid[columns="3"] {
  --grid-tc: repeat(3, 1fr)
}

r-grid[columns="4"] {
  --grid-tc: repeat(4, 1fr)
}

r-grid[columns="5"] {
  --grid-tc: repeat(5, 1fr)
}

r-grid[columns="6"] {
  --grid-tc: repeat(6, 1fr)
}

r-grid[columns="7"] {
  --grid-tc: repeat(7, 1fr)
}

r-grid[columns="8"] {
  --grid-tc: repeat(8, 1fr)
}

r-grid>r-cell[span^="1"] {
  --grid-cs: 1
}

r-grid>r-cell[span^="2"] {
  --grid-cs: 2
}

r-grid>r-cell[span^="3"] {
  --grid-cs: 3
}

r-grid>r-cell[span^="4"] {
  --grid-cs: 4
}

r-grid>r-cell[span^="5"] {
  --grid-cs: 5
}

r-grid>r-cell[span^="6"] {
  --grid-cs: 6
}

r-grid>r-cell[span^="7"] {
  --grid-cs: 7
}

r-grid>r-cell[span^="8"] {
  --grid-cs: 8
}

r-grid>r-cell[span$="+1"],
r-grid>r-cell[span="1"] {
  --grid-ce: 1
}

r-grid>r-cell[span$="+2"],
r-grid>r-cell[span$="-1"],
r-grid>r-cell[span="2"] {
  --grid-ce: 2
}

r-grid>r-cell[span$="+3"],
r-grid>r-cell[span$="-2"],
r-grid>r-cell[span="3"] {
  --grid-ce: 3
}

r-grid>r-cell[span$="+4"],
r-grid>r-cell[span$="-3"],
r-grid>r-cell[span="4"] {
  --grid-ce: 4
}

r-grid>r-cell[span$="+5"],
r-grid>r-cell[span$="-4"],
r-grid>r-cell[span="5"] {
  --grid-ce: 5
}

r-grid>r-cell[span$="+6"],
r-grid>r-cell[span$="-5"],
r-grid>r-cell[span="6"] {
  --grid-ce: 6
}

r-grid>r-cell[span$="+7"],
r-grid>r-cell[span$="-6"],
r-grid>r-cell[span="7"] {
  --grid-ce: 7
}

r-grid>r-cell[span$="+8"],
r-grid>r-cell[span$="-7"],
r-grid>r-cell[span="8"] {
  --grid-ce: 8
}

r-grid>r-cell[span$="-8"] {
  --grid-ce: 9
}

/* connect vars */
r-grid>r-cell[span] {
  grid-column-end: span var(--grid-ce)
}

r-grid>r-cell[span*="+"],
r-grid>r-cell[span*="-"],
r-grid>r-cell[span*=".."] {
  grid-column-start: var(--grid-cs)
}

r-grid>r-cell[span*="-"],
r-grid>r-cell[span*=".."] {
  grid-column-end: var(--grid-ce)
}

r-grid>r-cell[span="row"] {
  grid-column: 1 / -1
}

@media only screen and (max-width: 719px) {
  r-grid[columns-s="1"] {
      --grid-tc: repeat(1, 1fr)
  }

  r-grid[columns-s="2"] {
      --grid-tc: repeat(2, 1fr)
  }

  r-grid[columns-s="3"] {
      --grid-tc: repeat(3, 1fr)
  }

  r-grid[columns-s="4"] {
      --grid-tc: repeat(4, 1fr)
  }

  r-grid[columns-s="5"] {
      --grid-tc: repeat(5, 1fr)
  }

  r-grid[columns-s="6"] {
      --grid-tc: repeat(6, 1fr)
  }

  r-grid[columns-s="7"] {
      --grid-tc: repeat(7, 1fr)
  }

  r-grid[columns-s="8"] {
      --grid-tc: repeat(8, 1fr)
  }

  /* span-s=start... */
  r-grid>r-cell[span-s^="1"] {
      --grid-cs: 1
  }

  r-grid>r-cell[span-s^="2"] {
      --grid-cs: 2
  }

  r-grid>r-cell[span-s^="3"] {
      --grid-cs: 3
  }

  r-grid>r-cell[span-s^="4"] {
      --grid-cs: 4
  }

  r-grid>r-cell[span-s^="5"] {
      --grid-cs: 5
  }

  r-grid>r-cell[span-s^="6"] {
      --grid-cs: 6
  }

  r-grid>r-cell[span-s^="7"] {
      --grid-cs: 7
  }

  r-grid>r-cell[span-s^="8"] {
      --grid-cs: 8
  }

  /* span-s=...+width, span-s=...-end */
  r-grid>r-cell[span-s$="+1"],
  r-grid>r-cell[span-s="1"] {
      --grid-ce: 1
  }

  r-grid>r-cell[span-s$="+2"],
  r-grid>r-cell[span-s$="-1"],
  r-grid>r-cell[span-s="2"] {
      --grid-ce: 2
  }

  r-grid>r-cell[span-s$="+3"],
  r-grid>r-cell[span-s$="-2"],
  r-grid>r-cell[span-s="3"] {
      --grid-ce: 3
  }

  r-grid>r-cell[span-s$="+4"],
  r-grid>r-cell[span-s$="-3"],
  r-grid>r-cell[span-s="4"] {
      --grid-ce: 4
  }

  r-grid>r-cell[span-s$="+5"],
  r-grid>r-cell[span-s$="-4"],
  r-grid>r-cell[span-s="5"] {
      --grid-ce: 5
  }

  r-grid>r-cell[span-s$="+6"],
  r-grid>r-cell[span-s$="-5"],
  r-grid>r-cell[span-s="6"] {
      --grid-ce: 6
  }

  r-grid>r-cell[span-s$="+7"],
  r-grid>r-cell[span-s$="-6"],
  r-grid>r-cell[span-s="7"] {
      --grid-ce: 7
  }

  r-grid>r-cell[span-s$="+8"],
  r-grid>r-cell[span-s$="-7"],
  r-grid>r-cell[span-s="8"] {
      --grid-ce: 8
  }

  r-grid>r-cell[span-s$="-8"] {
      --grid-ce: 9
  }

  /* connect vars */
  r-grid>r-cell[span-s] {
      grid-column-end: span var(--grid-ce)
  }

  r-grid>r-cell[span-s*="+"],
  r-grid>r-cell[span-s*="-"],
  r-grid>r-cell[span-s*=".."] {
      grid-column-start: var(--grid-cs)
  }

  r-grid>r-cell[span-s*="-"],
  r-grid>r-cell[span-s*=".."] {
      grid-column-end: var(--grid-ce)
  }

  r-grid>r-cell[span-s="row"] {
      grid-column: 1 / -1
  }
}

/* for window width >= 1392 */
@media only screen and (min-width: 1392px) {
  r-grid[columns-l="1"] {
      --grid-tc: repeat(1, 1fr)
  }

  r-grid[columns-l="2"] {
      --grid-tc: repeat(2, 1fr)
  }

  r-grid[columns-l="3"] {
      --grid-tc: repeat(3, 1fr)
  }

  r-grid[columns-l="4"] {
      --grid-tc: repeat(4, 1fr)
  }

  r-grid[columns-l="5"] {
      --grid-tc: repeat(5, 1fr)
  }

  r-grid[columns-l="6"] {
      --grid-tc: repeat(6, 1fr)
  }

  r-grid[columns-l="7"] {
      --grid-tc: repeat(7, 1fr)
  }

  r-grid[columns-l="8"] {
      --grid-tc: repeat(8, 1fr)
  }

  /* span-l=start... */
  r-grid>r-cell[span-l^="1"] {
      --grid-cs: 1
  }

  r-grid>r-cell[span-l^="2"] {
      --grid-cs: 2
  }

  r-grid>r-cell[span-l^="3"] {
      --grid-cs: 3
  }

  r-grid>r-cell[span-l^="4"] {
      --grid-cs: 4
  }

  r-grid>r-cell[span-l^="5"] {
      --grid-cs: 5
  }

  r-grid>r-cell[span-l^="6"] {
      --grid-cs: 6
  }

  r-grid>r-cell[span-l^="7"] {
      --grid-cs: 7
  }

  r-grid>r-cell[span-l^="8"] {
      --grid-cs: 8
  }

  /* span-l=...+width, span-l=...-end */
  r-grid>r-cell[span-l$="+1"],
  r-grid>r-cell[span-l="1"] {
      --grid-ce: 1
  }

  r-grid>r-cell[span-l$="+2"],
  r-grid>r-cell[span-l$="-1"],
  r-grid>r-cell[span-l="2"] {
      --grid-ce: 2
  }

  r-grid>r-cell[span-l$="+3"],
  r-grid>r-cell[span-l$="-2"],
  r-grid>r-cell[span-l="3"] {
      --grid-ce: 3
  }

  r-grid>r-cell[span-l$="+4"],
  r-grid>r-cell[span-l$="-3"],
  r-grid>r-cell[span-l="4"] {
      --grid-ce: 4
  }

  r-grid>r-cell[span-l$="+5"],
  r-grid>r-cell[span-l$="-4"],
  r-grid>r-cell[span-l="5"] {
      --grid-ce: 5
  }

  r-grid>r-cell[span-l$="+6"],
  r-grid>r-cell[span-l$="-5"],
  r-grid>r-cell[span-l="6"] {
      --grid-ce: 6
  }

  r-grid>r-cell[span-l$="+7"],
  r-grid>r-cell[span-l$="-6"],
  r-grid>r-cell[span-l="7"] {
      --grid-ce: 7
  }

  r-grid>r-cell[span-l$="+8"],
  r-grid>r-cell[span-l$="-7"],
  r-grid>r-cell[span-l="8"] {
      --grid-ce: 8
  }

  r-grid>r-cell[span-l$="-8"] {
      --grid-ce: 9
  }

  /* connect vars */
  r-grid>r-cell[span-l] {
      grid-column-end: span var(--grid-ce)
  }

  r-grid>r-cell[span-l*="+"],
  r-grid>r-cell[span-l*="-"],
  r-grid>r-cell[span-l*=".."] {
      grid-column-start: var(--grid-cs)
  }

  r-grid>r-cell[span-l*="-"],
  r-grid>r-cell[span-l*=".."] {
      grid-column-end: var(--grid-ce)
  }

  r-grid>r-cell[span-l="row"] {
      grid-column: 1 / -1
  }
}

r-grid.debug>* {
  --color: rgba(248, 110, 91, 0.3);
  background-image:
      linear-gradient(to bottom, var(--color) 0%, var(--color) 100%);
}

r-grid.debug> :nth-child(6n+2) {
  --color: rgba(103, 126, 208, 0.3)
}

r-grid.debug> :nth-child(6n+3) {
  --color: rgba(224, 174, 72, 0.3)
}

r-grid.debug> :nth-child(6n+4) {
  --color: rgba(77, 214, 115, 0.3)
}

r-grid.debug> :nth-child(6n+5) {
  --color: rgba(217, 103, 219, 0.3)
}

r-grid.debug> :nth-child(6n+6) {
  --color: rgba(94, 204, 211, 0.3)
}

r-grid.debug> :nth-child(6n+7) {
  --color: rgba(248, 110, 91, 0.3)
}


[contenteditable] {
  outline: none;
}


:root.debug *:nth-child(4n) {
  outline: 1px solid rgba(0, 0, 255, 0.5);
}

:root.debug *:nth-child(4n+1) {
  outline: 1px solid rgba(0, 255, 255, 0.5);
}

:root.debug *:nth-child(4n+2) {
  outline: 1px solid rgba(255, 0, 255, 0.5);
}

:root.debug *:nth-child(4n+3) {
  outline: 1px solid rgba(255, 0, 0, 0.5);
}

body {
  overflow-x: hidden
}

h1.title {
  font-size: 6rem;
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
  margin-top: 4rem;
  font-size: calc(100vw / 8);
  line-height: 1.0;
}

.row.examples .spacer {
  height: 3rem;
}

.row.examples .label {
  font-size: var(--font-size);
  opacity: 0.3;
}

.row.examples a.label:hover {
  opacity: 1;
}

.row.examples .label.r {
  text-align: right
}

@media only screen and (max-width: 719px) {
  .row.examples .example-note {
      margin: 1em 0
  }
}

.example2 {
  font-size: 8vw;
  line-height: initial;
  margin-left: calc(1em / -18);
  letter-spacing: -0.02em;
}

.example2.i {
  font-style: italic;
}

.example2.single-line {
  line-height: 1.0;
  white-space: nowrap;
}

.example2.multi-line {
  font-size: 6vw;
  padding-top: 0.5rem;
  padding-bottom: 2rem;
  line-height: 1.1;
}

.example2.features {
  line-height: 1.2;
  white-space: nowrap;
  font-size: 10vw;
}

.example3.features {
  font-size: 8vw;
}

.example-a-z {
  font-size: 9.5vw;
  white-space: nowrap;
  font-weight: 450;
  line-height: 1.0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0;
  margin: 0;
  width: 100%;
}

.row.features-section1 {
  padding-bottom: 1.5rem;
}

.row.features-section1 hr:last-child {
  display: none;
}

.row.features-section2 {
  padding-top: 3vw;
}

.row.features-section1 {
  --background-color: #dcae2f;
  --foreground-color: #000011;
  --em-color: color(display-p3 0.5 0.4 0);
  --unit-background-color: rgba(0, 0, 0, 0.08);
  color: var(--foreground-color);
  background: var(--background-color);
}

@supports not (color: color(display-p3 1 1 1)) {
  .row.features-section1 {
      --em-color: #a07400;
  }
}

.feat-example em {
  color: var(--em-color);
}

.feat-name p {
  margin-bottom: 0
}

.feat-example {
  font-size: 2.5vw;
}

.feat-example em {
  font-style: normal;
}

.feat-table hr.thin {
  height: 1px;
  opacity: 0.3;
}

input[type="checkbox"] {
  --height: calc(1rem * var(--line-height));
  --checkbox-size: 1rem;
  --checkbox-handle-size: calc(var(--checkbox-size) - 8px);
  --checkbox-border: 2px;
  --checkbox-bg: black;
  --checkbox-fg: black;
  --checkbox-on-bg: black;
  --checkbox-on-fg: var(--background-color);
  --focus-color: blue;

  flex: 0 0 auto;
  margin: calc((var(--height) - var(--checkbox-size)) / 2) 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  background: none;
  border: none;

  background-color: transparent;

  border: var(--checkbox-border) solid var(--checkbox-bg);
  box-sizing: border-box;

  width: calc(var(--checkbox-size) * 2);
  height: var(--checkbox-size);
  border-radius: var(--checkbox-size);
  position: relative;
  transition: all 168ms ease-out;
}

input[type="checkbox"]:focus {
  outline: none;
}

input[type="checkbox"]:active {
  box-shadow: none;
}

input[type="checkbox"]::after {
  --padding: calc(((var(--checkbox-size) - var(--checkbox-handle-size)) / 2) - var(--checkbox-border));
  content: "";
  background: var(--checkbox-fg);
  display: block;
  position: absolute;
  left: var(--padding);
  top: var(--padding);
  width: var(--checkbox-handle-size);
  height: var(--checkbox-handle-size);
  border-radius: var(--checkbox-handle-size);
  transform: translate(0, 0);
  transition: all 90ms ease-out;
}

input[type="checkbox"]:checked {
  background-color: var(--checkbox-on-bg);
}

input[type="checkbox"]:checked::after {
  background-color: var(--checkbox-on-fg);
  transform: translate(calc(var(--checkbox-size)), 0);
}

input[type="range"] {
  --height: calc(1rem * var(--line-height));
  --input-range-color-bg: black;
  --input-range-color-fg: black;
  --input-range-color-focus: rgb(0, 130, 255);
  --input-range-knob-size: 0.75rem;
  --input-range-track-size: 2px;
  --input-range-height: var(--height);
  --surface1-color-bg: red;
  -webkit-appearance: none;
  background: transparent;
  cursor: default;
  margin: 0;
  padding: 0 0.5em;
  box-sizing: border-box;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0;
  height: var(--input-range-knob-size);
  width: var(--input-range-knob-size);
  border-radius: var(--input-range-knob-size);
  background: var(--input-range-color-fg);
  box-shadow: 0 0 0 2px var(--background-color);
  margin-top: calc((var(--input-range-knob-size) - var(--input-range-track-size)) / -2);
}

input[type="range"]::-moz-range-thumb {
  border: 0;
  height: var(--input-range-knob-size);
  width: var(--input-range-knob-size);
  border-radius: var(--input-range-knob-size);
  background: var(--input-range-color-fg);
  box-shadow: 0 0 0 2px var(--background-color);
  margin-top: calc((var(--input-range-knob-size) - var(--input-range-track-size)) / -2);
}


input[type="range"]::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 100%;
  height: var(--input-range-height);
  background: var(--input-range-color-bg);
  --border-w: calc((var(--input-range-height) - var(--input-range-track-size)) / 2);
  border-top: var(--border-w) solid var(--background-color);
  border-bottom: var(--border-w) solid var(--background-color);
}

input[type="range"]::-moz-range-track {
  box-sizing: border-box;
  width: 100%;
  height: var(--input-range-height);
  background: var(--input-range-color-bg);
  --border-w: calc((var(--input-range-height) - var(--input-range-track-size)) / 2);
  border-top: var(--border-w) solid var(--background-color);
  border-bottom: var(--border-w) solid var(--background-color);
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 0 2px var(--focus-color);
}

input[type="range"]:focus::-moz-range-track {
  box-shadow: 0 0 0 2px var(--focus-color);
}

.switch-button {
  --height: calc(1rem * var(--line-height));
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  user-select: none;
  line-height: var(--height);
  height: var(--height);
}

.switch-button>input[type="checkbox"] {
  margin-right: 0.4rem;
}

.row.glyphs {
  --background-color: color(display-p3 0.28 0.89 1);
  --background-color-transparent: color(display-p3 0.28 0.89 1 / 0);
  --grid-color: color(display-p3 0 0.65 0.8);

  --background-color: var(--medium-green);
  --grid-color: #000;

  --foreground-color: black;
  --font-weight: 400;

  color: var(--foreground-color);
  background: var(--background-color);
  flex-direction: column;
  padding: 2rem 0 0 0;
  box-sizing: border-box;
  scroll-padding-top: 0;
}

.row.glyphs h2 {
  font-size: 8rem;
  margin-left: calc(8rem / -19);
  line-height: 1.0;
}

.row.glyphs h2>a {
  color: white;
}

.row.glyphs>*:first-child {
  padding: 0 var(--row-padding);
  padding-bottom: 1rem;
}

.glyph-grid {
  --line-width: 1px;
  --cell-size: 4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  max-width: 100vw;
  box-sizing: border-box;
  gap: var(--line-width);
  flex: 1 0 100%;
}

.glyph-grid .popup-menu {
  --height: calc(1rem * var(--line-height));
  position: relative;
  width: 100%;
  height: var(--height);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
}

.glyph-grid .popup-menu .label {
  display: block;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glyph-grid .popup-menu .icon {
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
  width: calc(var(--cell-size) / 3);
  height: var(--height);
}

.glyph-grid .popup-menu .label,
.glyph-grid .popup-menu select {
  padding: 0;
  line-height: var(--height);
  height: var(--height);
  box-sizing: border-box;
  outline: none;
}

.glyph-grid .popup-menu select {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  border: none;
  background: none;
  color: transparent;
}

.glyph-grid .popup-menu select option {
  font-family: var(--font-family), sans-serif;
}

.glyph-grid .inspector {
  position: sticky;
  display: grid;
  grid-template-rows: auto 1fr;
  top: var(--header-height);
  left: 0;
  height: 100%;
  max-height: calc(100vh - var(--header-height));
  box-shadow: 0 0 0 var(--line-width) var(--grid-color);
}

.glyph-grid .toolbar {
  height: var(--cell-size);
  padding: 0 0 0 1rem;
  border-bottom: var(--line-width) solid var(--grid-color);
  gap: 2rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.glyph-grid .toolbar .slider {
  display: flex;
  user-select: none;
}

.glyph-grid .toolbar .slider>input {
  flex: 0 0 auto;
}

.glyph-grid .toolbar .slider>input {
  width: 2rem;
  padding: 0;
  margin-right: 0.4rem
}

.glyph-grid .toolbar .opsz-switch {
  display: none;
}

.glyph-grid .toolbar .identification {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}

.glyph-grid .toolbar .identification>* {
  user-select: all;
}

.glyph-grid .toolbar .identification .name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.glyph-grid .toolbar .identification .unicode {
  font-variant: tabular-nums slashed-zero;
}

.glyph-grid .toolbar .preview {
  display: flex;
  flex: 0 0 auto;
  width: var(--cell-size);
  height: var(--cell-size);
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-weight: var(--inspector-wght);
  font-variation-settings: "opsz" var(--inspector-opsz);
  border-left: var(--line-width) solid var(--grid-color);
  user-select: all;
}

.glyph-grid .canvas {
  user-select: none;
  font-size: 40vw;
  text-align: center;
  line-height: 1.0;
  height: 100%;
  max-height: 50vw;
  overflow: hidden;
  position: relative;
}

.glyph-grid .canvas>canvas {
  position: absolute;
  top: 0;
  left: 0;
  cursor: crosshair;
}

.glyph-grid .glyph-list .clipview {
  position: relative;
}

.glyph-grid .glyph-list .clipview .content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cell-size), 1fr));
  gap: var(--line-width);
  font-size: calc(var(--cell-size) / 2);
}

.glyph-grid .glyph-list .clipview .content>* {
  height: var(--cell-size);
  line-height: calc(var(--cell-size) + 1px);
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 0 0 var(--line-width) var(--grid-color);
  scroll-padding-top: 0;
}

.glyph-grid .glyph-list .clipview .content>.fill-row {
  grid-column: 1 / -1
}

.glyph-grid .glyph-list .clipview .content> :hover {
  color: inherit;
  text-decoration: none;
  overflow: unset;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--foreground-color);
}

.glyph-grid .glyph-list .clipview .content>.selected {
  color: white;
  background: black;
}

.glyph-grid .glyph-list .clipview .content> :focus {
  outline: none;
}

.glyph-grid .glyph-list .fade-cover {
  display: none;
}

.columns {
  column-width: 22em;
  column-count: 4;
  column-gap: 3em;
  column-fill: balance;
}

.columns>p {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.columns>h1,
.columns>h2,
.columns>h3,
.columns>h4,
.columns>h5,
.columns>h6 {
  break-after: avoid;
}

@media only screen and (min-width: 1800px) {

  /* window width >= 1800 */
  .columns.size1 {
      font-size: 0.9vw
  }
}

@media only screen and (min-width: 1600px) {

  /* window width >= 1600 */
  .columns.size1 {
      font-size: var(--font-size);
  }
}

@media only screen and (min-width: 1392px) {

  /* window width >= 1392 */
  .example-a-z {
      font-size: 8.9em;
  }
}

@media only screen and (min-width: 1000px) {

  /* window width >= 1000 */
  .glyph-grid .toolbar> :first-child {
      min-width: 45%
  }
}

@media only screen and (max-width: 1000px) {

  /* window width <= 1000 */
  .example2.features {
      font-size: 15.5vw;
  }
}

@media only screen and (max-width: 880px) {

  /* window width <= 880 */
  .columns.size1 {
      font-size: 14px;
  }

  .example2.features {
      font-size: 15vw;
  }

  .glyph-grid .toolbar .opsz-switch {
      display: flex;
  }

  .glyph-grid .toolbar .opsz-slider {
      display: none;
  }
}

@media only screen and (max-width: 719px) {

  /* window width <= 719 */
  .example-a-z {
      font-size: 10vw;
      line-height: 39px;
  }

  .glyph-grid {
      --cell-size: 10vw;
  }

  .example2.features {
      font-size: 7.5vw;
      line-height: 2.8;
  }

  .example2.features.mobile {
      font-size: 7vw !important;
  }
}

@media only screen and (max-width: 500px) {

  /* window width <= 500 */
  .feat-table>r-grid>r-cell {
      grid-column: 1 / -1
  }

  .feat-table .col-head {
      display: none
  }

  .feat-table hr.thin {
      opacity: 1;
      height: 2px;
      margin-top: 4rem
  }

  .feat-name {
      margin-top: 0;
      margin-bottom: 1rem
  }

  .feat-name p {
      display: none;
  }

  .feat-example {
      margin-top: 0;
      font-size: 2em;
      line-height: 1.5
  }

  .feat-example:nth-child(odd) {
      padding: 2rem 0 3rem 0
  }

  .feat-example:nth-child(even) {}

  .row.features-section1 {
      padding-bottom: 4rem
  }

  .row.features-section2 r-cell:first-child {
      padding: 2rem 0
  }

  .row.glyphs {
      padding: 0;
      margin-top: 6rem;
      position: relative
  }

  .row.glyphs::before {
      content: "Glyphs";
      font-weight: 600;
      font-size: 2em;
      position: absolute;
      top: -4rem;
      left: 1rem;
      color: var(--foreground-color-bright);
  }

  .row.glyphs> :first-child {
      display: none
  }

  .glyph-grid {
      --cell-size: 16vw;
      --line-width: 1px;
      --glyph-list-height: 40vh;
      --inspector-height: calc(60vh - (var(--header-height)/2));
      display: grid;
      grid-template-columns: none;
      grid-template-rows: var(--inspector-height) auto;
  }

  .glyph-grid .toolbar {
      gap: 1.4rem
  }

  .glyph-grid .inspector {
      position: initial;
      height: var(--inspector-height);
      max-height: var(--inspector-height);
      background: var(--background-color);
  }

  .glyph-grid .inspector .canvas {
      max-height: unset
  }

  .glyph-grid .glyph-list {
      position: relative;
  }

  .glyph-grid .glyph-list .clipview {
      display: grid;
      height: var(--glyph-list-height);
      grid-auto-flow: column;
      overflow-x: scroll;
      overflow-y: hidden;
      max-width: 100vw;
      box-sizing: border-box;
  }

  .glyph-grid .glyph-list .fade-cover {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1rem;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(270deg, var(--background-color-transparent) 0%, var(--background-color) 100%);
  }

  .glyph-grid .glyph-list .fade-cover.left {
      left: 0;
      display: none
  }

  .glyph-grid .glyph-list .fade-cover.right {
      right: 0;
      width: 3rem;
      background: linear-gradient(270deg, var(--background-color) 0%, var(--background-color-transparent) 100%);
  }

  .glyph-grid .glyph-list .clipview .content {

      grid-template-columns: repeat(auto-fill, var(--cell-size));
      grid-auto-rows: var(--cell-size);

      grid-auto-flow: column;
      grid-template-rows: repeat(auto-fill, var(--cell-size));
  }

  .glyph-grid .glyph-list .clipview .content>* {
      width: var(--cell-size);
      height: unset;
  }
}

#faq {
  margin-top: 2em;
}

#faq .columns>p {
  margin-bottom: 2em;
}

#faq h2 {
  margin: 0 0 1.5em 0;
}

#faq h4:target {
  background: var(--active-bgcolor);
  outline: 8px solid var(--active-bgcolor);
  border-radius: 4px;
}

@media (prefers-color-scheme: dark) {
  #faq h4:target {
      color: white;
  }
}

/* Login Page Styles */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--header-height) - 2rem);
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.login-form {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border: var(--line-width) solid var(--foreground-color);
}

.login-form h2 {
  margin-bottom: 0.5rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.login-description {
  margin-bottom: 2rem;
  opacity: 0.7;
  font-weight: 400;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: var(--line-width) solid var(--foreground-color-5);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  transition: border-color 0.2s ease-in-out;
}

.form-group input:focus {
  outline: none;
  border-color: var(--foreground-color);
}

.form-actions {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.form-actions .button {
  width: 100%;
  padding: 0.75rem;
  font-weight: 500;
  text-align: center;
}

.login-help {
  margin-top: 1.5rem;
  text-align: center;
}

.login-help p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

@media only screen and (max-width: 500px) {
  .login-form {
    padding: 1.5rem;
  }
  
  .login-form h2 {
    font-size: 2rem;
  }
}

/* Registration Page Styles */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--header-height) - 2rem);
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.register-form {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border: var(--line-width) solid var(--foreground-color);
}

.register-form h2 {
  margin-bottom: 0.5rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.register-description {
  margin-bottom: 2rem;
  opacity: 0.7;
  font-weight: 400;
}

/* Reuse form styles from login page */
/* We can combine these into shared form styles */

.register-help {
  margin-top: 1.5rem;
  text-align: center;
}

.register-help p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

/* Shared form styles for both login and register pages */
.login-form, .register-form {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  border: var(--line-width) solid var(--foreground-color);
}

.login-form h2, .register-form h2 {
  margin-bottom: 0.5rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.login-description, .register-description {
  margin-bottom: 2rem;
  opacity: 0.7;
  font-weight: 400;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.75rem;
  border: var(--line-width) solid var(--foreground-color-5);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  transition: border-color 0.2s ease-in-out;
}

.form-group input:focus {
  outline: none;
  border-color: var(--foreground-color);
}

.form-actions {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

.form-actions .button {
  width: 100%;
  padding: 0.75rem;
  font-weight: 500;
  text-align: center;
}

.login-help, .register-help {
  margin-top: 1.5rem;
  text-align: center;
}

.login-help p, .register-help p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

@media only screen and (max-width: 500px) {
  .login-form, .register-form {
    padding: 1.5rem;
  }
  
  .login-form h2, .register-form h2 {
    font-size: 2rem;
  }
}

/* Dashboard Styles */
.dashboard-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.dashboard-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.dashboard-content h2 {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.dashboard-actions {
  margin: 2rem 0 4rem;
  text-align: center;
}

.dashboard-description {
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
  opacity: 0.8;
}

.dashboard-actions .button {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
}

.dashboard-comics {
  margin-top: 3rem;
}

.dashboard-comics h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--line-width) solid var(--foreground-color-1);
}

.comics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.comic-card {
  border: var(--line-width) solid var(--foreground-color-1);
  border-color: var(--foreground-color);
  padding: 1.5rem;
}

.comic-card h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.comic-meta {
  margin-bottom: 1.5rem;
}

.comic-meta p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background-color: var(--foreground-color-1);
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.8rem;
}

.comic-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--foreground-color-1);
}

.comic-view {
  text-decoration: underline;
  text-decoration-color: var(--underline-color);
  font-weight: 500;
}

.comic-view:hover {
  color: var(--link-hover-color);
  text-decoration-color: var(--link-hover-color);
}

.comic-delete {
  color: var(--red);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
}

.comic-delete:hover {
  text-decoration-color: var(--red);
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background-color: var(--foreground-color-1);
  border-radius: 8px;
}

.empty-state p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.empty-quote {
  font-style: italic;
  opacity: 0.7;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .dashboard-content h2 {
    font-size: 2.5rem;
  }
  
  .comics-grid {
    grid-template-columns: 1fr;
  }
  
  .dashboard-actions .button {
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .dashboard-content h2 {
    font-size: 2rem;
  }
  
  .dashboard-description {
    font-size: 1rem;
  }
  
  .comic-card {
    padding: 1rem;
  }
}

/* comic Grid Styles */
.comics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.comic-card {
  display: flex;
  flex-direction: column;
  border: var(--line-width) solid var(--foreground-color-1);
  border-color: var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  height: 100%;
}

.comic-card-header {
  padding: 1.5rem 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--foreground-color-1);
}

.comic-card-header h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
  max-width: 100%;
}

.status-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.status-badge.pending {
  background-color: var(--light-yellow);
  color: #806600;
}

.status-badge.completed {
  background-color: var(--medium-green);
  color: #003300;
}

.status-badge.processing {
  background-color: var(--light-yellow2);
  color: #806600;
}

.status-badge.failed {
  background-color: rgba(255, 100, 100, 0.2);
  color: var(--red);
}

.comic-card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.comic-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comic-meta p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.meta-label {
  font-weight: 600;
  opacity: 0.7;
  margin-right: 0.3rem;
}

.comic-detail-container .meta-label {
  font-size: 1.7rem;
}

.meta-author {
  margin-bottom: 0.9rem;
}

.comic-download-options {
  margin-top: 0.5rem;
}

.format-badges {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.format-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  background-color: var(--foreground-color);
  color: var(--background-color);
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.format-badge:hover {
  opacity: 0.9;
  color: var(--background-color);
}

a.format-badge:hover {
  text-decoration: none;
}

.comic-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: var(--foreground-color-1);
  margin-top: auto;
}

.comic-view {
  font-weight: 600;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
}

.comic-view::after {
  content: "→";
  margin-left: 0.4rem;
  transition: transform 0.2s ease;
}

.comic-view:hover::after {
  transform: translateX(3px);
}

.comic-delete {
  color: var(--red);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.comic-delete:hover {
  opacity: 1;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .comics-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media only screen and (max-width: 500px) {
  .comics-grid {
    grid-template-columns: 1fr;
  }
  
  .comic-card-header {
    padding: 1.2rem 1.2rem 0.8rem;
  }
  
  .comic-card-content {
    padding: 1.2rem;
  }
  
  .comic-card-footer {
    padding: 0.8rem 1.2rem;
  }
}

.comic-status {
  display: flex;
  align-items: center;
  font-size: 1.7rem;
  margin-bottom: 0.8rem;
  margin-top: 0.8rem;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.comic-detail-container .status-dot {
  width: 15px;
  height: 15px;
  margin-left: 0.5rem;
}

.comic-status.pending .status-dot, .comic-status.generating .status-dot {
  background-color: #E6B422;
}

.comic-status.completed .status-dot {
  background-color: var(--medium-green);
}

.comic-status.processing .status-dot {
  background-color: var(--blue);
}

.comic-status.failed .status-dot {
  background-color: var(--red);
}

/* comic Detail Page Styles */
.comic-detail-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.comic-detail-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.comic-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.comic-detail-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
  max-width: 70%;
}

.comic-detail-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.comic-meta-card,
.comic-plot-card,
.comic-pages-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.comic-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.comic-meta-left {
  flex: 1;
  min-width: 250px;
  font-size: 1.7rem;
}

.comic-meta-right {
  flex: 1;
  min-width: 250px;
}

.comic-tags {
  margin-bottom: 1rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.comic-tag {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  font-size: 0.9rem;
  background-color: var(--foreground-color-1);
  color: var(--foreground-color);
}

.comic-description,
.comic-plot-card {
  line-height: 1.6;
}

.comic-description h3,
.comic-plot-card h3,
.comic-pages-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--foreground-color-1);
}

.page-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.page-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--foreground-color-1);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.page-item:hover {
  background-color: var(--foreground-color-1);
  transform: translateX(5px);
}

.page-number {
  flex: 0 0 3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.page-title {
  flex: 1;
  font-weight: 500;
}

.page-arrow {
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

.page-item:hover .page-arrow {
  transform: translateX(5px);
}

.progress-link {
  text-decoration: underline;
  text-decoration-color: var(--underline-color);
  font-size: 0.7rem;
  color: #fff;
  opacity: 100;
}

.progress-link:hover {
  color: var(--link-hover-color);
  text-decoration-color: var(--link-hover-color);
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .comic-detail-header {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .comic-detail-header h2 {
    max-width: 100%;
    font-size: 2rem;
  }
  
  .comic-detail-actions {
    width: 100%;
  }
  
  .comic-detail-actions .button {
    flex: 1;
  }
}

@media only screen and (max-width: 500px) {
  .comic-meta-card,
  .comic-plot-card,
  .comic-pages-card {
    padding: 1rem;
  }
  
  .page-item {
    padding: 0.8rem;
  }
}

/* Chapter View Styles */
.page-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.page-content-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 2rem;
}

.page-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.page-header h3 {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--foreground-color-5);
}

.page-content-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  margin-bottom: 2rem;
}

.page-content {
  font-size: 1.125rem;
  line-height: 1.7;
}

.page-content p {
  margin-bottom: 1.5em;
}

.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  font-weight: 600;
}

.page-content h1 {
  font-size: 1.8rem;
}

.page-content h2 {
  font-size: 1.5rem;
}

.page-content h3 {
  font-size: 1.3rem;
}

.page-content h4 {
  font-size: 1.1rem;
}

.page-content blockquote {
  border-left: 4px solid var(--foreground-color-1);
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
}

.page-content ul,
.page-content ol {
  margin-bottom: 1.5em;
  padding-left: 1.5rem;
}

.page-content li {
  margin-bottom: 0.5em;
}

.page-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.button-placeholder {
  width: 100%;
}

.secondary-button {
  background-color: transparent;
  color: var(--foreground-color);
  border: var(--line-width) solid var(--foreground-color);
}

.secondary-button:hover {
  background-color: var(--foreground-color-1);
  color: var(--foreground-color);
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .page-content-card {
    padding: 1.5rem;
  }
  
  .page-navigation {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
  }
  
  .button {
    text-align: center;
  }
}

@media only screen and (max-width: 500px) {
  .page-header h2 {
    font-size: 1.75rem;
  }
  
  .page-header h3 {
    font-size: 1.25rem;
  }
  
  .page-content-card {
    padding: 1rem;
  }
  
  .page-content {
    font-size: 1rem;
  }
}

/* Create comic Page Styles */
.create-comic-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.create-comic-content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.create-comic-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

.create-comic-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.alert-box {
  border-left: 4px solid var(--blue);
  background-color: rgba(3, 102, 230, 0.1);
  padding: 1rem 1.5rem;
  margin-bottom: 2rem;
}

.notice-box {
  border-left: 4px solid var(--warm-yellow);
  background-color: rgba(249, 222, 105, 0.2);
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.notice-box p, .alert-box p {
  margin: 0;
  font-size: 0.9rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: var(--line-width) solid var(--foreground-color);
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  transition: border-color 0.2s ease-in-out;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--blue);
}

.form-group textarea {
  resize: vertical;
  min-height: 200px;
}

.input-helper {
  margin-top: 0.5rem;
}

.input-helper a {
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: var(--underline-color);
}

.input-helper a:hover {
  color: var(--link-hover-color);
  text-decoration-color: var(--link-hover-color);
}

.input-tip {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-style: italic;
  opacity: 0.7;
}

.form-actions {
  margin-top: 1rem;
}

.form-actions .button {
  width: 100%;
  padding: 1rem;
  font-size: 1.1rem;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .create-comic-content h2 {
    font-size: 2rem;
  }
}

@media only screen and (max-width: 500px) {
  .create-comic-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .form-group label {
    font-size: 1rem;
  }
  
  .form-group input,
  .form-group textarea {
    padding: 0.6rem;
  }
  
  .form-actions .button {
    padding: 0.8rem;
    font-size: 1rem;
  }
}

/* comic Progress Page Styles */
.progress-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.progress-content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.progress-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.loading-animation {
  margin-right: 1rem;
}

.progress-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.comic-info {
  margin-bottom: 2rem;
}

.comic-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.debug-info {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-left: 0.5rem;
}

.progress-log {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
  height: 300px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  padding-top: 142px;
}

.log-message {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--foreground-color-1);
}

.error-message {
  color: var(--red);
  font-weight: 500;
}

.selection-panel {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-top: 2rem;
}

.selection-panel h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.title-dropdown {
  width: 100%;
  padding: 0.75rem;
  border: var(--line-width) solid var(--foreground-color-5);
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  margin-bottom: 1rem;
}

.title-dropdown:focus {
  outline: none;
  border-color: var(--foreground-color);
}

#custom-title {
  width: 100%;
  padding: 0.75rem;
  border: var(--line-width) solid var(--foreground-color-5);
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  margin-bottom: 1rem;
}

#custom-title:focus {
  outline: none;
  border-color: var(--foreground-color);
}

.selection-panel .button {
  width: 100%;
}

.hidden {
  display: none;
}

/* Loading animation styles */
.icon {
  width: 40px;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

.icon__line {
  width: 1px;
  height: 100%;
  background-color: var(--foreground-color);
  animation: pulse 0.8s infinite;
  border-radius: 0;
}

.icon__line:nth-child(2) {
  animation-delay: 0.1s;
}
.icon__line:nth-child(3) {
  animation-delay: 0.2s;
}
.icon__line:nth-child(4) {
  animation-delay: 0.3s;
}
.icon__line:nth-child(5) {
  animation-delay: 0.4s;
}
.icon__line:nth-child(6) {
  animation-delay: 0.5s;
}
.icon__line:nth-child(7) {
  animation-delay: 0.6s;
}
.icon__line:nth-child(8) {
  animation-delay: 0.7s;
}
.icon__line:nth-child(9) {
  animation-delay: 0.8s;
}
.icon__line:nth-child(10) {
  animation-delay: 0.9s;
}
.icon__line:nth-child(11) {
  animation-delay: 1s;
}
.icon__line:nth-child(12) {
  animation-delay: 1.1s;
}
.icon__line:nth-child(13) {
  animation-delay: 1.2s;
}
.icon__line:nth-child(14) {
  animation-delay: 1.3s;
}
.icon__line:nth-child(15) {
  animation-delay: 1.4s;
}
.icon__line:nth-child(16) {
  animation-delay: 1.5s;
}
.icon__line:nth-child(17) {
  animation-delay: 1.6s;
}
.icon__line:nth-child(18) {
  animation-delay: 1.7s;
}
.icon__line:nth-child(19) {
  animation-delay: 1.8s;
}
.icon__line:nth-child(20) {
  animation-delay: 1.9s;
}
.icon__line:nth-child(21) {
  animation-delay: 2s;
}
.icon__line:nth-child(22) {
  animation-delay: 2.1s;
}
.icon__line:nth-child(23) {
  animation-delay: 2.2s;
}
.icon__line:nth-child(24) {
  animation-delay: 2.3s;
}
.icon__line:nth-child(25) {
  animation-delay: 2.4s;
}

@keyframes pulse {
  0% {
    height: 20%;
  }
  20% {
    height: 100%;
  }
  40% {
    height: 20%;
  }
  100% {
    height: 20%;
  }
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .progress-header h2 {
    font-size: 2rem;
  }
  
  .progress-log {
    height: 250px;
  }
}

@media only screen and (max-width: 500px) {
  .progress-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .loading-animation {
    margin-bottom: 1rem;
    margin-right: 0;
  }
  
  .progress-header h2 {
    font-size: 1.8rem;
  }
  
  .progress-log {
    padding: 1rem;
    height: 200px;
  }
  
  .selection-panel {
    padding: 1rem;
  }
}

.attention {
  background: #f9de69;
  color: #000000;
  text-shadow: none;
}

.highlight {
  background: #f9de69;
  color: #000000;
  text-shadow: none;
}

/* Settings Page Styles */
.settings-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.settings-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.settings-layout {
  display: flex;
  gap: 2rem;
}

/* Sidebar Styles */
.settings-sidebar {
  flex: 0 0 240px;
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  margin-top: 70px;
}

.settings-sidebar h3 {
  font-size: 1.3rem;
  font-weight: 600;
  padding: 1.5rem;
  margin: 0;
  border-bottom: var(--line-width) solid var(--foreground-color-1);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
}

.sidebar-link {
  padding: 1rem 1.5rem;
  text-decoration: none;
  border-bottom: var(--line-width) solid var(--foreground-color-1);
  transition: background-color 0.2s ease;
}

.sidebar-link:hover {
  background-color: var(--foreground-color-1);
  text-decoration: none;
  color: var(--foreground-color);
}

.sidebar-link:last-child {
  border-bottom: none;
}

/* Main Content Styles */
.settings-main {
  flex: 1;
}

.settings-main h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

.settings-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.settings-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--line-width) solid var(--foreground-color-1);
}

.settings-card form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: var(--line-width) solid var(--foreground-color-5);
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  transition: border-color 0.2s ease-in-out;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--foreground-color);
}

.form-actions {
  margin-top: 1rem;
}

.secondary-button {
  background-color: transparent;
  color: var(--foreground-color);
  border: var(--line-width) solid var(--foreground-color);
}

.secondary-button:hover {
  background-color: var(--foreground-color-1);
  color: var(--foreground-color);
}

/* Subscription Info Styles */
.subscription-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.subscription-info h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.subscription-status {
  font-weight: 600;
  margin: 0;
}

.subscription-status.active {
  color: var(--medium-green);
}

.subscription-status.free {
  color: var(--blue);
}

.subscription-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.subscription-details p {
  margin: 0;
}

.subscription-actions {
  margin-top: 1rem;
}

/* Responsive Adjustments */
@media only screen and (max-width: 900px) {
  .settings-layout {
    flex-direction: column;
  }
  
  .settings-sidebar {
    flex: 0 0 auto;
    margin-bottom: 2rem;
  }
  
  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .sidebar-link {
    flex: 1 0 auto;
    text-align: center;
    border-bottom: none;
    border-right: var(--line-width) solid var(--foreground-color-1);
  }
  
  .sidebar-link:last-child {
    border-right: none;
  }
}

@media only screen and (max-width: 600px) {
  .settings-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .settings-main h2 {
    font-size: 2rem;
  }
  
  .settings-card {
    padding: 1rem;
  }
  
  .settings-card h3 {
    font-size: 1.2rem;
  }
  
  .sidebar-nav {
    flex-direction: column;
  }
  
  .sidebar-link {
    border-right: none;
    border-bottom: var(--line-width) solid var(--foreground-color-1);
  }
  
  .sidebar-link:last-child {
    border-bottom: none;
  }
}

/* Subscription Page Styles */
.subscription-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.subscription-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.subscription-layout {
  display: flex;
  gap: 2rem;
}

/* Main Content Styles */
.subscription-main {
  flex: 1;
}

.subscription-main h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

/* Feature List Styles */
.feature-list {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.5rem 0 1.5rem 0;
}

.feature-list li {
  margin-bottom: 0.5rem;
}

/* Subscription Status Styles */
.subscription-status.canceling {
  color: #E67E22; /* Orange */
}

/* Plan Grid Styles */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.plan-card {
  border: var(--line-width) solid var(--foreground-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.plan-content {
  padding: 1.5rem;
  flex: 1;
}

.plan-card h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.plan-price {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.plan-feature {
  margin-bottom: 0.5rem;
}

.plan-action {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  border-top: var(--line-width) solid var(--foreground-color-1);
}

.plan-action .button {
  width: 100%;
}

/* Responsive Adjustments */
@media only screen and (max-width: 900px) {
  .subscription-layout {
    flex-direction: column;
  }
  
  .settings-sidebar {
    margin-bottom: 2rem;
  }
  
  .plan-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 600px) {
  .subscription-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .subscription-main h2 {
    font-size: 2rem;
  }
  
  .plan-content,
  .plan-action {
    padding: 1rem;
  }
}

/* Plan Comparison Table Styles */
.plan-comparison {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.plan-feature-row {
  display: table-row;
}

.plan-feature-row:nth-child(even) {
  background-color: var(--foreground-color-1);
}

.plan-feature-row.header {
  font-weight: 600;
}

.plan-feature-cell {
  display: table-cell;
  padding: 1rem;
  border-bottom: 1px solid var(--foreground-color-1);
}

.plan-feature-cell.header {
  text-decoration: underline;
}

.plan-feature-cell:first-child {
  font-weight: 500;
  width: 30%;
}

/* Responsive adjustments for small screens */
@media only screen and (max-width: 700px) {
  .plan-comparison {
    display: block;
  }
  
  .plan-feature-row {
    display: block;
    margin-bottom: 1.5rem;
    border: 1px solid var(--foreground-color-1);
  }
  
  .plan-feature-row.header {
    display: none;
  }
  
  .plan-feature-cell {
    display: block;
    padding: 0.75rem;
    border-bottom: 1px solid var(--foreground-color-1);
  }
  
  .plan-feature-cell:first-child {
    font-weight: 600;
    background-color: var(--foreground-color-1);
    width: 100%;
  }
  
  .plan-feature-cell:not(:first-child) {
    position: relative;
    padding-left: 8rem;
  }
  
  .plan-feature-cell:not(:first-child)::before {
    content: attr(data-label);
    position: absolute;
    left: 0.75rem;
    width: 6rem;
    font-weight: 600;
  }
  
  .plan-feature-cell:nth-child(2)::before {
    content: "Basic:";
  }
  
  .plan-feature-cell:nth-child(3)::before {
    content: "Standard:";
  }
  
  .plan-feature-cell:nth-child(4)::before {
    content: "Premium:";
  }
}

/* Reset Password Page Styles */
.reset-password-container {
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.reset-password-content {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.reset-password-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

.reset-password-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}

.reset-password-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Responsive adjustments */
@media only screen and (max-width: 600px) {
  .reset-password-container {
    padding: 2rem 1rem 3rem;
  }
  
  .reset-password-content h2 {
    font-size: 2rem;
  }
  
  .reset-password-card {
    padding: 1.5rem;
  }
}

.reset-instructions {
  margin-bottom: 1.5rem;
  color: var(--foreground-color-5);
  font-size: 0.95rem;
}

/* Tone Settings Page Styles */
.tone-settings-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.tone-settings-content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.tone-settings-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

.tone-instructions {
  margin-bottom: 1.5rem;
  color: var(--foreground-color-5);
  font-size: 0.95rem;
}

.tone-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tone-description {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  margin-bottom: 1rem;
}

.tone-description h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.tone-description p {
  margin: 0;
}

/* Responsive adjustments */
@media only screen and (max-width: 600px) {
  .tone-settings-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .tone-settings-content h2 {
    font-size: 2rem;
  }
  
  .tone-description {
    padding: 1rem;
  }
}

/* FAQ Page Styles */
.faq-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.faq-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.faq-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
  text-align: center;
}

/* Search Bar Styles */
.faq-search {
  margin-bottom: 2rem;
}

.search-input {
  width: 100%;
  padding: 0.75rem;
  border: var(--line-width) solid var(--foreground-color);
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: var(--background-color);
  color: var(--foreground-color);
  transition: border-color 0.2s ease-in-out;
}

.search-input:focus {
  outline: none;
  border-color: var(--blue);
}

/* FAQ Category Styles */
.faq-category {
  margin-bottom: 2.5rem;
}

.faq-category h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--line-width) solid var(--foreground-color-1);
}

/* FAQ Question/Answer Styles */
.faq-questions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  border: var(--line-width) solid var(--foreground-color-1);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: var(--foreground-color-1);
  border: none;
  text-align: left;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: var(--foreground-color-5);
  color: var(--background-color);
}

.faq-arrow {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
  user-select: none;
}

.faq-answer {
  padding: 1.5rem;
  border-top: var(--line-width) solid var(--foreground-color-1);
  line-height: 1.6;
}

.faq-answer p {
  margin: 0 0 1rem 0;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer a {
  text-decoration: underline;
  text-decoration-color: var(--underline-color);
}

.faq-answer a:hover {
  color: var(--link-hover-color);
  text-decoration-color: var(--link-hover-color);
}

.hidden {
  display: none;
}

.faq-no-results {
  text-align: center;
  padding: 2rem;
  border: var(--line-width) solid var(--foreground-color-1);
  margin-bottom: 2rem;
  font-style: italic;
  color: var(--foreground-color-5);
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .faq-container {
    padding-top: 1.5rem;
  }
  
  .faq-content h2 {
    font-size: 2rem;
  }
  
  .faq-question {
    padding: 0.75rem 1rem;
  }
  
  .faq-answer {
    padding: 1rem;
  }
}

@media only screen and (max-width: 500px) {
  .faq-content h2 {
    font-size: 1.8rem;
  }
  
  .faq-category h3 {
    font-size: 1.3rem;
  }
}

/* comic Types Page Styles */
.comic-types-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.comic-types-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.comic-types-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.comic-types-intro {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  max-width: 700px;
}

.comic-types-section,
.features-section {
  margin-bottom: 3rem;
}

.comic-types-section h3,
.features-section h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* comic Types Grid */
.comic-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.comic-type-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.comic-type-content {
  padding: 1.5rem;
  flex: 1;
}

.comic-type-content h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.comic-type-content p {
  margin-bottom: 0;
  line-height: 1.5;
}

.comic-type-action {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  border-top: var(--line-width) solid var(--foreground-color-1);
}

.comic-type-action .button {
  width: 100%;
}

/* Features List */
.features-list {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.features-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.features-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}

/* CTA Section */
.cta-section {
  text-align: center;
  margin-top: 3rem;
}

.cta-section .button {
  font-size: 1.2rem;
  padding: 1rem 2rem;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .comic-types-content h2 {
    font-size: 2rem;
  }
  
  .comic-types-intro {
    font-size: 1.1rem;
  }
  
  .comic-types-section h3,
  .features-section h3 {
    font-size: 1.5rem;
  }
  
  .features-list {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 500px) {
  .comic-types-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .comic-type-content,
  .comic-type-action {
    padding: 1rem;
  }
  
  .cta-section .button {
    width: 100%;
  }
}

/* comic Sequels Page Styles */
.sequels-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.sequels-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.sequels-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.sequels-intro {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  max-width: 700px;
}

/* Sequels Grid */
.sequels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.sequel-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease;
}

.sequel-card:hover {
  transform: translateY(-5px);
}

.sequel-content {
  padding: 1.5rem;
  flex: 1;
}

.sequel-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sequel-content h4 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--foreground-color-5);
}

.sequel-content p {
  margin-bottom: 0;
  line-height: 1.5;
}

.sequel-action {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  border-top: var(--line-width) solid var(--foreground-color-1);
}

.sequel-action .button {
  width: 100%;
}

/* Create Sequel Section */
.create-sequel-section {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.create-sequel-section h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.create-sequel-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  text-align: left;
}

.create-sequel-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .sequels-content h2 {
    font-size: 2rem;
  }
  
  .sequels-intro {
    font-size: 1.1rem;
  }
  
  .create-sequel-section h3 {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 500px) {
  .sequels-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .sequel-content,
  .sequel-action {
    padding: 1rem;
  }
  
  .create-sequel-card {
    padding: 1.5rem;
  }
}

/* Generator Page Styles */
.generator-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.generator-content {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.generator-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.generator-description {
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.generator-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  text-align: left;
  margin-bottom: 2.5rem;
}

.generator-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.generator-tips {
  text-align: left;
  border: var(--line-width) solid var(--foreground-color-1);
  padding: 1.5rem;
}

.generator-tips h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.tips-list {
  list-style-type: none;
  padding: 0;
}

.tips-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.tips-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .generator-content h2 {
    font-size: 2rem;
  }
  
  .generator-description {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 500px) {
  .generator-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .generator-card {
    padding: 1.5rem;
  }
  
  .generator-tips {
    padding: 1rem;
  }
}

/* comic Type Page Styles */
.comic-type-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.comic-type-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.comic-type-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.comic-type-intro {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  max-width: 800px;
}

.comic-type-section {
  margin-bottom: 3rem;
}

.comic-type-section h3,
.comic-type-info h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Generator Grid */
.generator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.generator-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.generator-content {
  padding: 1.5rem;
  flex: 1;
}

.generator-content h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.generator-content p {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.generator-details {
  list-style-type: none;
  padding: 0;
}

.generator-details li {
  margin-bottom: 0.5rem;
}

.detail-label {
  font-weight: 500;
  margin-right: 0.5rem;
}

.generator-action {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  border-top: var(--line-width) solid var(--foreground-color-1);
}

.generator-action .button {
  width: 100%;
}

/* comic Type Info Section */
.comic-type-info {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.info-content {
  padding: 0.5rem 0;
}

.info-content > p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.info-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.info-column h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.info-list {
  list-style-type: none;
  padding: 0;
}

.info-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.info-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .comic-type-content h2 {
    font-size: 2rem;
  }
  
  .comic-type-intro {
    font-size: 1.1rem;
  }
  
  .comic-type-section h3,
  .comic-type-info h3 {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 500px) {
  .comic-type-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .generator-content,
  .generator-action {
    padding: 1rem;
  }
  
  .comic-type-info {
    padding: 1rem;
  }
}

/* comic Genre Page Styles */
.comic-genre-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.comic-genre-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.genre-header {
  margin-bottom: 3rem;
  text-align: center;
}

.genre-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.genre-intro {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Generator Cards */
.genre-generators {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.genre-generator-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.generator-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--foreground-color-1);
}

.generator-header h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.generator-subtitle {
  color: var(--foreground-color-5);
  font-size: 0.9rem;
}

.generator-body {
  padding: 1.5rem;
  flex-grow: 1;
}

.generator-description {
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.generator-specs {
  padding: 1rem;
  background-color: var(--foreground-color-1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spec-label {
  font-weight: 500;
}

.spec-value {
  font-weight: 400;
}

.generator-footer {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  border-top: 1px solid var(--foreground-color-1);
}

.generator-footer .button {
  width: 100%;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .genre-header h2 {
    font-size: 2rem;
  }
  
  .genre-intro {
    font-size: 1.1rem;
  }
}

@media only screen and (max-width: 500px) {
  .comic-genre-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .generator-header,
  .generator-body,
  .generator-footer {
    padding: 1rem;
  }
  
  .generator-specs {
    padding: 0.75rem;
  }
}

/* Genre comic Generators Page Styles */
.genre-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.genre-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.genre-header {
  margin-bottom: 2.5rem;
}

.genre-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.genre-intro {
  font-size: 1.2rem;
  max-width: 800px;
  line-height: 1.5;
}

/* Genre Description Card */
.genre-description-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 3rem;
}

.genre-description-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.genre-description {
  line-height: 1.6;
}

.genre-description p {
  margin-bottom: 1rem;
}

.genre-description p:last-child {
  margin-bottom: 0;
}

/* Generators Heading */
.generators-heading {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Generators Grid */
.generators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.generator-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.generator-content {
  padding: 1.5rem;
  flex: 1;
}

.generator-content h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.generator-subtitle {
  color: var(--foreground-color-5);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.generator-description {
  line-height: 1.5;
}

.generator-action {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  border-top: var(--line-width) solid var(--foreground-color-1);
}

.generator-action .button {
  width: 100%;
}

/* Genre Benefits */
.genre-benefits {
  margin-top: 3rem;
}

.genre-benefits h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.benefit-card {
  border: var(--line-width) solid var(--foreground-color-1);
  padding: 1.5rem;
}

.benefit-card h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.benefit-card p {
  line-height: 1.5;
  margin: 0;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .genre-header h2 {
    font-size: 2rem;
  }
  
  .genre-intro {
    font-size: 1.1rem;
  }
  
  .generators-heading,
  .genre-benefits h3 {
    font-size: 1.5rem;
  }
}

@media only screen and (max-width: 500px) {
  .genre-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .genre-description-card {
    padding: 1rem;
  }
  
  .generator-content,
  .generator-action {
    padding: 1rem;
  }
  
  .benefit-card {
    padding: 1rem;
  }
}

/* Sequel Generator Page Styles */
.sequel-generator-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.sequel-generator-content {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.sequel-generator-content h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.sequel-intro {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  max-width: 700px;
}

/* Sequels Section */
.sequels-section {
  margin-bottom: 4rem;
}

.sequels-section h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.sequels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.sequel-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sequel-content {
  padding: 1.5rem;
  flex: 1;
}

.sequel-content h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sequel-content h5 {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--foreground-color-5);
}

.sequel-content p {
  line-height: 1.5;
}

.sequel-action {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
  border-top: var(--line-width) solid var(--foreground-color-1);
}

.sequel-action .button {
  width: 100%;
}

/* Create Sequel Section */
.create-sequel-section {
  margin-bottom: 4rem;
}

.create-sequel-section h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}

.create-sequel-card {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
  max-width: 700px;
  margin: 0 auto;
}

.create-sequel-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.input-tip {
  font-size: 0.85rem;
  color: var(--foreground-color-5);
  margin-top: 0.5rem;
  font-style: italic;
}

/* Sequel Info Section */
.sequel-info {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.sequel-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.info-content p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.sequel-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.benefit-item {
  padding: 1.5rem;
  background-color: var(--foreground-color-1);
}

.benefit-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.benefit-item p {
  margin: 0;
  line-height: 1.5;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .sequel-generator-content h2 {
    font-size: 2rem;
  }
  
  .sequel-intro {
    font-size: 1.1rem;
  }
  
  .sequels-section h3,
  .create-sequel-section h3 {
    font-size: 1.5rem;
  }
  
  .create-sequel-card {
    padding: 1.5rem;
  }
  
  .sequel-benefits {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 500px) {
  .sequel-generator-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .sequel-content,
  .sequel-action {
    padding: 1rem;
  }
  
  .create-sequel-card {
    padding: 1rem;
  }
  
  .sequel-info {
    padding: 1rem;
  }
  
  .benefit-item {
    padding: 1rem;
  }
}

/* Sequel View Page Styles */
.sequel-view-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.sequel-view-content {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Navigation Bar */
.navigation-bar {
  margin-bottom: 2rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.back-link:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

/* Sequel Article */
.sequel-article {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}

.sequel-header {
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--foreground-color-1);
  padding-bottom: 1.5rem;
}

.sequel-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.sequel-header h3 {
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--foreground-color-5);
}

/* Sequel Sections */
.sequel-section {
  margin-bottom: 2.5rem;
}

.sequel-section h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.sequel-text {
  line-height: 1.7;
  font-size: 1.1rem;
}

.sequel-text p {
  margin-bottom: 1rem;
}

.sequel-text p:last-child {
  margin-bottom: 0;
}

.page-text {
  font-family: var(--font-family);
  background-color: var(--foreground-color-1);
  padding: 1.5rem;
  white-space: pre-line; /* Preserves line breaks in the text */
}

/* Call to Action */
.sequel-cta {
  margin-top: 3rem;
  text-align: center;
}

.sequel-cta .button {
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .sequel-header h2 {
    font-size: 2rem;
  }
  
  .sequel-header h3 {
    font-size: 1.5rem;
  }
  
  .sequel-section h4 {
    font-size: 1.3rem;
  }
  
  .sequel-text {
    font-size: 1rem;
  }
}

@media only screen and (max-width: 500px) {
  .sequel-view-container {
    padding: 1.5rem 1rem 3rem;
  }
  
  .sequel-article {
    padding: 1.5rem;
  }
  
  .page-text {
    padding: 1rem;
  }
  
  .sequel-cta .button {
    width: 100%;
  }
}
/* Flash Messages Styles */
.fade-in {
  animation: fade-in 0.3s ease forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Style for error flash messages */
.mb-4.p-4.rounded.bg-red-100.text-red-700 {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--red);
  background-color: var(--background-color);
  color: var(--foreground-color);
  font-weight: 500;
  border-radius: 0;
}

/* Style for success flash messages */
.mb-4.p-4.rounded.bg-green-100.text-green-700 {
  border: var(--line-width) solid var(--foreground-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--medium-green);
  background-color: var(--background-color);
  color: var(--foreground-color);
  font-weight: 500;
  border-radius: 0;
}

/* Responsive adjustments */
@media only screen and (max-width: 500px) {
  .mb-4.p-4.rounded {
    padding: 0.75rem 1rem;
  }
}

/* comic cover styling */
.comic-detail-header {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}

.comic-detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* comic meta layout */
.comic-meta-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin-bottom: 1.5rem;
  width: 100%; /* Ensure container takes full width */
}

.comic-cover-container {
  flex: 0 0 auto;
  width: 40%; /* Set explicit width */
  max-width: 300px; /* Maximum width for the cover */
}

.comic-cover-image {
  width: 100%; /* Make image fill the container */
  height: auto;
  display: block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.comic-meta-info {
  flex: 1 1 auto;
  display: flex;
  gap: 1.5rem;
}

/* Remove any conflicting styles */
.comic-meta-info {
  width: auto !important; /* Override any conflicting width settings */
  justify-content: unset !important; /* Override any justify-content settings */
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .comic-meta-container {
    flex-direction: column;
  }
  
  .comic-cover-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
}

/* comic meta layout adjustment for missing cover images */
.comic-meta-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.comic-cover-container {
  flex: 0 0 auto;
  width: 40%;
  max-width: 300px;
}

.comic-meta-info {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Add this new style to handle cases when image is missing */
.comic-cover-image:not([src]), 
.comic-cover-image[src=""], 
.comic-cover-image[style*="display:none"],
.comic-cover-image[style*="display: none"] {
  display: none;
}

/* Add this style to make meta info expand when image is hidden */
.comic-cover-container:empty,
.comic-cover-container:has(.comic-cover-image[style*="display:none"]),
.comic-cover-container:has(.comic-cover-image[style*="display: none"]) {
  display: none;
}

/* When cover is missing, let meta info take full width */
.comic-meta-container:has(.comic-cover-container:empty) .comic-meta-info,
.comic-meta-container:has(.comic-cover-image[style*="display:none"]) .comic-meta-info,
.comic-meta-container:has(.comic-cover-image[style*="display: none"]) .comic-meta-info {
  width: 100%;
}

/* Style for when JavaScript adds the no-cover class */
.comic-meta-container.no-cover .comic-cover-container {
  display: none;
}

.comic-meta-container.no-cover .comic-meta-info {
  width: 100%;
}

/* comic Meta Card Mobile Styles */
@media only screen and (max-width: 768px) {
  /* Make comic meta container stack vertically on mobile */
  .comic-meta-container {
    flex-direction: column;
    align-items: center;
  }
  
  /* Make comic cover take full width and center it */
  .comic-cover-container {
    width: 100%;
    max-width: 250px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
  }
  
  .comic-cover-image {
    max-width: 100%;
    height: auto;
  }
  
  /* Make meta info take full width */
  .comic-meta-info {
    width: 100%;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Make both left and right sections take full width */
  .comic-meta-left,
  .comic-meta-right {
    width: 100%;
    min-width: 100%;
  }
}

/* Smaller mobile screens */
@media only screen and (max-width: 500px) {
  .comic-meta-card {
    padding: 1rem;
  }
  
  .comic-cover-container {
    max-width: 100%;
  }
  
  .comic-meta-left {
    font-size: 1.4rem;
  }
}

/* black hole loader */
.loading-animation .outer-circle {
  position: relative;
  height: 40px;
  width: 40px;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  border-radius: 50%;
  animation: rotate 1.5s linear infinite;
}

.loading-animation .outer-circle span {
  position: absolute;
  height: 40px;
  width: 40px;
  background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  border-radius: 50%;
}

.loading-animation span:nth-child(1) {
  filter: blur(1px);
}

.loading-animation span:nth-child(2) {
  filter: blur(2px);
}

.loading-animation span:nth-child(3) {
  filter: blur(5px);
}

.loading-animation span:nth-child(4) {
  filter: blur(30px);
}

.loading-animation .inner-circle {
  height: 36px;
  width: 36px;
  position: absolute;
  background: black;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  z-index: 9;
}

@keyframes rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Comic Page Image Styles */
.page-image-container {
  text-align: center;
  margin: 0 auto 20px;
  max-width: 100%;
}

.page-image {
  max-width: 100%;
  height: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  display: block;
  margin: 0 auto;
}

/* Comic Page Thumbnails */
.page-thumbnails {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.page-thumbnail-item {
  display: block;
  text-decoration: none;
  transition: transform 0.2s;
}

.page-thumbnail-item:hover {
  transform: translateY(-5px);
}

.page-thumbnail-wrapper {
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  aspect-ratio: 5/8;
}

.page-thumbnail {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
/* Comic examples display styles */
.comic-examples-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
}

.comic-example {
  flex: 1;
  width: calc(33.333% - 7px);
  height: auto;
  object-fit: cover;
}

@media (max-width: 768px) {
  .comic-examples-container {
    gap: 5px;
  }
  
  .comic-example {
    width: calc(33.333% - 3.5px);
  }
}

@media (max-width: 500px) {
  .comic-examples-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .comic-example {
    width: 100%;
    margin-bottom: 0;
  }
}