:root {
      --bg: #f7f0e3;
      --bg-app: #fff;
      --text: #111111;
      --muted: rgba(17, 17, 17, 0.5);
      --line: rgba(17, 17, 17, 0.35);
      --line-active: rgba(17, 17, 17, 0.9);
      --shadow-light: rgba(255, 255, 255, 0.40);
      --shadow-dark: rgba(175, 175, 192, 0.20);
    }

    * {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      min-height: 100%;
      background: var(--bg);
      font-family: Helvetica, Arial, sans-serif;
      color: var(--text);
    }

    body {
      display: flex;
      align-items: center;     /* vertical */
      justify-content: center; /* horizontal */
      min-height: 100vh;
      flex-direction: column;
      padding: 20px;
    }

    .app {
      width: 100%;
      margin: 20px;
      max-width: 920px;
      padding: 48px 42px;
      border-radius: 32px;
      background: var(--bg-app);
      box-shadow:
        18px 18px 36px var(--shadow-dark),
        -18px -18px 36px var(--shadow-light);
    }

    .studio-logo{
      position: fixed;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 160px;
      height: auto;
    }

    /* Screens shorter than 750px */
    @media (max-height: 749px) {
      .studio-logo {
        position: static;
        transform: none;
        margin-top: 50px;
      }
    }

    .headline {
      margin: 0;
      font-size: 60px;
      line-height: 1.02;
      font-weight: 800;
      letter-spacing: -0.04em;
      text-transform: uppercase;
    }

    .line {
      display: block;
    }

    .toggle-group {
      display: inline-flex;
      align-items: center;
      gap: 0.15em;
      flex-wrap: wrap;
    }

    .toggle {
      appearance: none;
      border: none;
      background: transparent;
      padding: 0;
      margin: 0;
      font: inherit;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: -0.04em;
      color: var(--text);
      cursor: pointer;
      transition: opacity 0.2s ease;
    }

    .toggle.inactive,
    .slash.inactive {
      opacity: 0.2;
    }

    .slash {
      transition: opacity 0.2s ease;
    }

    .inline-input {
      display: inline-block;
      min-width: 1.6ch;
      width: auto;
      max-width: 100%;
      padding: 0 0 0.06em 0;
      margin: 0 0.08em;
      border: none;
      border-bottom: 0.06em solid var(--line);
      border-radius: 0;
      background: transparent;
      font: inherit;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.04em;
      color: var(--text);
      text-transform: uppercase;
      outline: none;
      box-shadow: none;
      text-align: center;
      transition: border-color 0.2s ease, opacity 0.2s ease;
    }

    .inline-input:focus {
      border-bottom-color: var(--line-active);
    }

    .suffix {
      white-space: nowrap;
    }

    .footer-note {
      margin-top: 28px;
      font-size: 0.95rem;
      color: rgba(17, 17, 17, 0.55);
      letter-spacing: 0.01em;
    }

    @media (max-width: 700px) {
      .app {
        padding: 34px 22px;
        border-radius: 24px;
      }

      .headline {
        font-size: clamp(2rem, 10vw, 3.4rem);
        line-height: 1.06;
      }

      .inline-input {
        min-width: 2ch;
      }
    }