@layer atoms {
      .m-text {
        font-family: var(--font-1);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: -0.005em;
        text-transform: none;
        font-style: normal;
      }

      .m-text-2 {
        font-family: var(--font-1);
        font-size: clamp(34px, 6.25vw, 112px);
        font-weight: 500;
        line-height: 0.88;
        letter-spacing: -0.05em;
        text-transform: none;
        font-style: normal;
      }

      .m-text-3 {
        font-family: var(--font-1);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0;
        text-transform: none;
        font-style: normal;
      }

      .m-text-4 {
        font-family: var(--font-1);
        font-size: clamp(19px, 1.75vw, 28px);
        font-weight: 500;
        line-height: 1.12;
        letter-spacing: -0.025em;
        text-transform: none;
        font-style: normal;
      }

      .m-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 26px;
        border: 0;
        border-radius: var(--radius-1);
        background: var(--color-2);
        color: var(--color-1);
        font-family: var(--font-1);
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;
        text-decoration: none;
        overflow: hidden;
        isolation: isolate;
        cursor: pointer;
      }

      .m-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--color-6);
        transform: scaleX(0);
        transform-origin: 37% 50%;
        transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1);
      }

      .m-btn__label {
        position: relative;
      }

      @media (hover: hover) {
        .m-btn:hover::before {
          transform: scaleX(1);
        }
      }

      .m-btn-3 {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 16px;
        border: 0;
        border-radius: var(--radius-1);
        background: var(--color-2);
        color: var(--color-1);
        box-shadow: var(--shadow-1);
        font-family: var(--font-1);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0;
        overflow: hidden;
        isolation: isolate;
        cursor: pointer;
      }

      .m-btn-3::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--color-6);
        transform: scaleX(0);
        transform-origin: 37% 50%;
        transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
      }

      .m-btn-3__label {
        position: relative;
      }

      @media (hover: hover) {
        .m-btn-3:hover::before {
          transform: scaleX(1);
        }
      }

      .m-link {
        color: var(--color-2);
        font-weight: 600;
        text-decoration: none;
        background-image: linear-gradient(var(--color-2), var(--color-2)), linear-gradient(var(--color-3), var(--color-3));
        background-repeat: no-repeat;
        background-position: 0 100%, 0 100%;
        background-size: 100% 1px, 100% 0%;
        padding: 0 1px 1px;
        transition: background-size 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

      @media (hover: hover) {
        .m-link:hover {
          background-size: 100% 1px, 100% 100%;
        }
      }

      .m-link-2 {
        color: var(--color-1);
        font-weight: 600;
        text-decoration: none;
        background-image: linear-gradient(var(--color-1), var(--color-1)), linear-gradient(var(--color-6), var(--color-6));
        background-repeat: no-repeat;
        background-position: 0 100%, 0 100%;
        background-size: 100% 1px, 100% 0%;
        padding: 0 1px 1px;
        transition: background-size 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

      @media (hover: hover) {
        .m-link-2:hover {
          background-size: 100% 1px, 100% 100%;
        }
      }

      .m-link-3 {
        color: var(--color-2);
        font-family: var(--font-1);
        font-size: clamp(34px, 5vw, 76px);
        font-weight: 500;
        line-height: 0.95;
        letter-spacing: -0.05em;
        text-transform: none;
        font-style: normal;
        text-decoration: none;
        background-image: linear-gradient(var(--color-2), var(--color-2)), linear-gradient(var(--color-3), var(--color-3));
        background-repeat: no-repeat;
        background-position: 0 100%, 0 100%;
        background-size: 100% 2px, 100% 0%;
        transition: background-size 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

      @media (hover: hover) {
        .m-link-3:hover {
          background-size: 100% 2px, 100% 100%;
        }
      }

      .m-icon {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 48px;
        height: 48px;
        border: 1px solid var(--color-2);
        border-radius: var(--radius-1);
        background: var(--color-1);
        color: var(--color-2);
        overflow: hidden;
        isolation: isolate;
        cursor: pointer;
        padding: 0;
      }

      .m-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--color-2);
        transform: scaleX(0);
        transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
      }

      .m-icon__glyph {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        transition: color 0.3s;
      }

      @media (hover: hover) {
        .m-icon:hover::before {
          transform: scaleX(1);
        }

        .m-icon:hover {
          color: var(--color-1);
        }
      }

      .m-surface {
        background: var(--color-3);
        color: var(--color-2);
      }

      .m-surface-2 {
        background: var(--color-1);
        color: var(--color-2);
        box-shadow: var(--shadow-2);
      }

      .m-surface-3 {
        background: var(--color-2);
        color: var(--color-1);
      }

      .m-photo {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) contrast(1.04);
        background: var(--color-3);
      }

      .m-field {
        display: grid;
        gap: 6px;
      }

      .m-field__label {
        font-family: var(--font-1);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0;
      }

      .m-field__input {
        width: 100%;
        padding: 8px 0 9px;
        border: 0;
        border-bottom: 1px solid var(--color-2);
        border-radius: 0;
        background: transparent;
        color: var(--color-2);
        font-family: var(--font-1);
        font-size: 17px;
        font-weight: 400;
        line-height: 1.3;
        resize: vertical;
      }

      .m-field__input:focus-visible {
        outline: 2px solid var(--color-6);
        outline-offset: 2px;
      }
    }