@layer page {
  @font-face {
    font-family: FitDevanagari;
    src: url("FitDevanagariVariable-VF.woff2") format("woff2"),
         url("FitDevanagariVariable-VF.woff") format("woff");
    font-display: swap;
  }

  .mini-fit-devanagari .wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 61rem;
    padding-left: calc(env(safe-area-inset-left) + 2rem);
    padding-right: calc(env(safe-area-inset-right) + 2rem);
    position: relative;
  }

  .mini-fit-devanagari section {
    border: none;
    clear: both;
    padding: 4em 0;
    overflow: hidden;
  }

  /* Section color regimes */
  .mini-fit-devanagari section.white { background: #fff; color: #000; }
  .mini-fit-devanagari section.white .alt,
  .mini-fit-devanagari section.white a { color: #636466; }
  .mini-fit-devanagari section.white a:hover { color: #bfe800; }

  .mini-fit-devanagari section.gray { background: #636466; color: #e0ff4f; }
  .mini-fit-devanagari section.gray .alt { color: #fff; }
  .mini-fit-devanagari section.gray a { color: #e0ff4f; }
  .mini-fit-devanagari section.gray a:hover { color: #e9ff82; }
  .mini-fit-devanagari section.gray h2 {
    color: #fff; font-weight: 700; letter-spacing: .2em;
    text-align: center; text-transform: uppercase;
  }
  .mini-fit-devanagari section.gray h3 {
    color: #fff; font-size: 1.5em; font-weight: 400; letter-spacing: 0;
    text-align: center; text-transform: none;
  }

  .mini-fit-devanagari section.green { background: linear-gradient(180deg, #e0ff4f, #d7ff1c); }
  .mini-fit-devanagari section.green div,
  .mini-fit-devanagari section.green figure,
  .mini-fit-devanagari section.green span { color: #636466; }
  .mini-fit-devanagari section.green div .alt,
  .mini-fit-devanagari section.green figure .alt,
  .mini-fit-devanagari section.green span .alt { color: #000; }
  .mini-fit-devanagari section.green a { color: #fbffe8; }
  .mini-fit-devanagari section.green a:hover { color: #fff; }
  .mini-fit-devanagari section.green figure.black { color: #000 !important; }
  .mini-fit-devanagari section .black { color: #000; }

  /* Fit-to-width display lines */
  .mini-fit-devanagari .ftw {
    font-family: FitDevanagari;
    width: 100%;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
  }
  .mini-fit-devanagari .big { font-size: 5in; }
  .mini-fit-devanagari #charset figure { margin: 1.75rem 0; }
  .mini-fit-devanagari #fit-title .wrapper { padding: .2em; }

  /* Resize boxes (drag handles) */
  .mini-fit-devanagari .resize-box { padding: 0 .5em; position: relative; }
  .mini-fit-devanagari .resize-box + .resize-box { margin-top: .5rem; }
  .mini-fit-devanagari .resize-box .handle {
    background: transparent; border: none; box-sizing: border-box;
    font-size: .5rem; position: absolute; z-index: 5;
  }
  .mini-fit-devanagari .resize-box .handle-e {
    bottom: 0; cursor: ew-resize; right: -.5em; top: 0; width: .5rem;
  }
  .mini-fit-devanagari .resize-box.resize-box--basic { border: none; }
  .mini-fit-devanagari .resize-box.resize-box--basic .handle-e { width: 3rem; }
  .mini-fit-devanagari .resize-box.resize-box--basic .handle::after {
    border: 1px solid #000; bottom: 50%; color: #000; content: "\2194";
    display: block; font-size: .75rem; height: 1rem; line-height: .75rem;
    opacity: .33; position: absolute; right: -.5rem; width: auto;
  }
  .mini-fit-devanagari .resize-box.resize-box--basic:hover .handle-e::after { opacity: 1; }
  .mini-fit-devanagari .green .resize-box { border: 1px solid #000; }

  /* Imagery */
  .mini-fit-devanagari .fill { margin-left: -7.25%; max-width: 114.5%; width: 114.5%; }
  .mini-fit-devanagari img.margin-big { display: block; margin: 0 auto; max-width: 100%; }
  .mini-fit-devanagari img.margin-small { display: block; margin: 0 auto; max-width: 100%; }

  /* Buy-now circular badge */
  .mini-fit-devanagari #buy-now-button { position: absolute; text-align: center; width: 100%; }
  .mini-fit-devanagari #buy-now-button a svg { width: 9em; }
  .mini-fit-devanagari #buy-now-button a:hover svg { margin-top: -.5em; width: 10em; }
  .mini-fit-devanagari #buy-now-button a .buy-now-border { fill: #000; }
  .mini-fit-devanagari #buy-now-button a .buy-now-letters { fill: #fff; }

  /* Descriptions */
  .mini-fit-devanagari .font-desc2 { margin-right: auto; max-width: 38em; padding: .2rem; }
  .mini-fit-devanagari #abc .font-desc2 { color: #000; }
  .mini-fit-devanagari #styles .font-desc {
    color: #fff; max-width: 27em; position: absolute; right: 4em; top: 1em;
  }

  /* Type tester */
  .mini-fit-devanagari input.tester {
    border: 1px solid #000; display: block; font-size: 1.5rem;
    letter-spacing: -.06em; padding: .5rem; position: relative; z-index: 1;
    width: calc(100% - 1rem - 2px);
  }
  .mini-fit-devanagari #try-me .try-me-text { color: #000; }
  .mini-fit-devanagari figure.no-resize { white-space: nowrap; }

  /* Big call-to-action button */
  .mini-fit-devanagari .big-button {
    background: #636466; border: 1px; color: #e0ff4f; display: block;
    font-weight: 400; height: auto; letter-spacing: 0; margin: 2em auto;
    padding: 1rem; text-align: center; text-decoration: none; width: auto;
  }
  .mini-fit-devanagari .big-button:hover { background: #444; }
  .mini-fit-devanagari .big-button figure {
    font-size: 30vh; height: auto; line-height: 22vh;
    margin-bottom: .7rem; margin-top: .7rem;
  }
  .mini-fit-devanagari #call-to-action .big-button {
    background: #000; border-color: #e0ff4f; color: #e0ff4f;
  }
  .mini-fit-devanagari #call-to-action .big-button:hover { background: #636466; }
}