@charset "UTF-8";

/* ===========================
   Base Styles
   =========================== */

:root {
    --color-lr: #4bbdc3;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-save: #6bbfc1;
    --font-jp: "Zen Kaku Gothic New", sans-serif;
}

* {
    outline: none;
    vertical-align: baseline;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    /* 750pxデザインの等比スケール基準: 1rem = Figma 10px (最大450px幅) */
    font-size: calc(min(100vw, 450px) / 75);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: "Tenor Sans", sans-serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: normal;
    color: var(--color-black);
    background-color: var(--color-white);
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
}

h1 {
    position: relative;
    font-weight: 400;
}

*:focus {
    outline: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

.w100 {
    width: 100%;
    height: auto;
}

/* ===========================
   Layout
   =========================== */

.adlp-outer {
    width: 100%;
    background-color: var(--color-white);
    display: flex;
    justify-content: center;
}

.adlp-wrapper {
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
}

.adlp-main {
    width: 100%;
}

/* ===========================
   FV Section (Figma y0-1061)
   =========================== */

.fv {
    position: relative;
    width: 100%;
    height: 106.1rem;
    overflow: hidden;
    background-color: var(--color-white);
}

.fv__photo {
    position: absolute;
    left: 0;
    top: 0;
    width: 75rem;
    height: 106.1rem;
    max-width: none;
}

/* line-height: Figmaは行高(0.9)を整数pxに丸めて描画するため、テキストボックス実高(57px / 24px)を指定。以降のテキストも同様 */
.fv__title,
.fv__tagline {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    color: var(--color-white);
}

.fv__title {
    left: 50%;
    top: 55.5rem;
    font-size: 6.3rem;
    line-height: 5.7rem;
    letter-spacing: 0.315rem;
}

.fv__tagline {
    left: calc(50% + 0.05rem);
    top: 63rem;
    font-size: 2.7rem;
    line-height: 2.4rem;
    letter-spacing: 0.135rem;
}

/* ===========================
   Statement Section (Figma y1061-2233)
   =========================== */

.sec-statement {
    position: relative;
    width: 100%;
    height: 117.2rem;
    overflow: hidden;
    background-color: var(--color-white);
}

/* PROFILE背景ぼかしの上方向への滲み(Figma上は淡色ベタの下のレイヤー) y2180-2233 */
.sec-statement__bleed {
    position: absolute;
    left: 0;
    top: 111.9rem;
    width: 75rem;
    height: 5.3rem;
    max-width: none;
}

.sec-statement__tint {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(198, 226, 215, 0.34);
}

.sec-statement__text {
    position: absolute;
    /* + 0.0805rem: Figmaは行末の字間(1.61px)を中央揃えの幅に含めないため、その半分だけ右へ */
    left: calc(50% + 0.05rem + 0.0805rem);
    top: 6.8rem; /* Figma 1128px + ref実測補正 1px(FigmaとChromeのベースライン丸め差) */
    width: 62.9rem;
    height: 52.3rem;
    transform: translateX(-50%);
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 2.3rem;
    line-height: 4.5rem; /* 1.94 x 23px = 44.62px → Figma描画 45px(ref実測の行送り) */
    letter-spacing: 0.161rem;
    text-align: center;
    color: var(--color-black);
}

/* 注記記号: Figmaでは別テキストノードの絶対配置(本文ブロック左上 x61,y1129 が原点) */
.sec-statement__mark,
.sec-statement__note {
    position: absolute;
    transform: translateX(-50%);
    font-family: var(--font-jp);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.7rem;
    letter-spacing: 0.072rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

.sec-statement__mark.--first {
    left: calc(56.65rem - 0.0805rem);
    top: 18.9rem;
}

.sec-statement__mark.--second {
    left: calc(38.95rem - 0.0805rem);
    top: 45.9rem;
}

.sec-statement__note {
    left: 50%;
    top: 63.5rem;
}

/* ---- 動画サムネイル(実体は button)。画像は YouTube(data-video-id)なら JS が生成して差し込み、MP4(data-video-src)なら HTML のポスター画像を使う。
   寸法・地色のみを持ち、配置は各セクションのミックスクラス(.sec-statement__video / .sec-videos__card)が担う ---- */
.adlp-video-card {
    position: absolute;
    display: block;
    width: 69rem;
    height: 36.2rem;
    padding: 0;
    border: 0;
    overflow: hidden;
    font: inherit;
    color: var(--color-white);
    background: #d9d9d9;
    cursor: pointer;
}

.adlp-video-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.adlp-video-card__play {
    position: absolute;
    left: 30.8rem;
    top: 14.4rem;
    z-index: 1;
    width: 7.5rem;
    height: 7.5rem;
    max-width: none;
}

/* 動画1(Figma x30, y1798) */
.sec-statement__video {
    left: 3rem;
    top: 73.7rem;
}

/* ===========================
   Profile Section (Figma y2233-3698)
   =========================== */

.sec-profile {
    position: relative;
    width: 100%;
    height: 146.5rem;
    overflow: hidden;
    background-color: var(--color-white);
}

.sec-profile img {
    position: absolute;
    max-width: none;
}

.sec-profile__bg {
    left: 0;
    top: 0;
    width: 75rem;
    height: 146.5rem;
}

/* カードのドロップシャドウ。Figma「Mask group」(x74-676, y2387-3368, 角丸20)の書き出し実測: offset 0 / blur 20 / #000 10% */
.sec-profile__shadow {
    position: absolute;
    left: 7.4rem;
    top: 15.4rem;
    width: 60.2rem;
    height: 98.1rem;
    border-radius: 2rem;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
}

/* 白ヘッダ(y2387-2510) + 写真(-y3172) を1枚に合成した画像 */
.sec-profile__photo {
    left: 7.4rem;
    top: 15.4rem;
    width: 60.2rem;
    height: 78.5rem;
    border-radius: 2rem 2rem 0 0;
}

.sec-profile__polaroid {
    left: 50.4rem;
    top: 24.1rem;
    width: 22rem;
    height: 25.6rem;
}

.sec-profile__panel {
    position: absolute;
    left: 7.4rem;
    top: 93.9rem;
    width: 60.2rem;
    height: 40.4rem;
    border-radius: 0 0 2rem 2rem;
    background-color: var(--color-white);
}

.sec-profile__cutout {
    left: 0;
    top: 72.45rem;
    width: 28.7rem;
    height: 44rem;
}

.sec-profile__title {
    position: absolute;
    left: calc(50% - 9.9rem);
    top: 18rem;
    font-weight: 400;
    font-size: 3.7rem;
    line-height: 5.6rem;
    letter-spacing: 0.185rem;
    white-space: nowrap;
    color: var(--color-black);
}

.sec-profile__term,
.sec-profile__desc {
    position: absolute;
    line-height: 1.5;
    white-space: nowrap;
}

.sec-profile__term {
    /* top は Figma値 + ref実測補正 1px(Tenor Sans のベースライン丸め差) */
    left: 28.9rem;
    font-size: 2rem;
    letter-spacing: 0.1rem;
    color: var(--color-lr);
}

.sec-profile__desc {
    font-family: var(--font-jp);
    font-weight: 500;
    font-size: 2.4rem;
    letter-spacing: 0.12rem;
    color: var(--color-black);
}

.sec-profile__term.--name {
    top: 95.809rem;
}

.sec-profile__term.--birthday {
    top: 100.126rem;
}

.sec-profile__term.--skin {
    top: 104.401rem;
}

.sec-profile__term.--item {
    top: 108.8rem;
}

.sec-profile__term.--comment {
    left: 10rem;
    top: 117.902rem;
}

.sec-profile__desc.--name {
    left: 36.7rem;
    top: 95.2rem;
}

.sec-profile__desc.--birthday {
    left: 39.5rem;
    top: 99.8rem;
    font-family: "Tenor Sans", sans-serif;
    font-weight: 400;
}

.sec-profile__desc.--skin {
    left: 40.9rem;
    top: 103.901rem;
}

.sec-profile__desc.--item {
    left: 29rem;
    top: 111.902rem;
    font-size: 1.8rem;
    letter-spacing: 0.09rem;
}

.sec-profile__desc.--comment {
    left: calc(50% - 27.7rem);
    top: 121.1rem;
    width: 55.4199rem;
    font-size: 1.8rem;
    line-height: 3rem; /* 1.65 x 18px = 29.7px → Figma描画 30px(ref実測の行送り) */
    letter-spacing: 0.126rem;
    white-space: normal;
    word-break: break-word;
}

/* 点線(1px / dash 2-2)。SVGは線の上下に1pxずつ余白を持つ3px高(縮小時に画像ボックスが0pxへ潰れて線が消えるのを防ぐ)。
   線の中心がFigmaのy座標になるよう 0.15rem 上げる */
.sec-profile__dot {
    left: 28.9rem;
    height: 0.3rem;
}

.sec-profile__dot.--name {
    top: calc(99.1rem - 0.15rem);
    width: 17.1rem;
}

.sec-profile__dot.--birthday {
    top: calc(103.7rem - 0.15rem);
    width: 17.1rem;
}

.sec-profile__dot.--skin {
    top: calc(108.2rem - 0.15rem);
    width: 22.6rem;
}

.sec-profile__dot.--item {
    top: calc(115.6rem - 0.15rem);
    width: 31.2rem;
}

.sec-profile__product {
    left: 60.3rem;
    top: 98.9rem;
    width: 10.5rem;
    height: 19.2rem;
}

/* ===========================
   Videos Section (Figma y3698-5043 + 白2px y5043-5045)
   =========================== */

/* 地色: 白地に rgba(248,248,217,0.41)(ref実測 #fcfcef)。Next との間の白2pxは border で再現 */
.sec-videos {
    position: relative;
    width: 100%;
    height: 134.7rem;
    overflow: hidden;
    border-bottom: 0.2rem solid var(--color-white);
    background-color: rgba(248, 248, 217, 0.41);
}

/* PROFILE背景ぼかしの下方向への滲み(Figma上は動画セクションより上のレイヤー) y3698-3730 */
.sec-videos__bleed {
    position: absolute;
    left: 0;
    top: 0;
    width: 75rem;
    height: 3.2rem;
    max-width: none;
    pointer-events: none;
}

/* 動画カード(690x362)の左上が原点。Figma x30, y3757 / 4181 / 4605 */
.sec-videos__item {
    position: absolute;
    left: 3rem;
    width: 69rem;
}

.sec-videos__item.--behind {
    top: 5.9rem;
}

.sec-videos__item.--interview1 {
    top: 48.3rem;
}

.sec-videos__item.--interview2 {
    top: 90.7rem;
}

.sec-videos__card {
    left: 0;
    top: 0;
}

/* キャプション(Tenor Sans 20px lh1.5)。top はカード上端基準 Figma 367 / 368 / 369px + ref実測補正 1px(Tenor Sans のベースライン丸め差) */
.sec-videos__caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

/* Figma: left 50%-95px, 幅191px(中央揃えではなく左固定) */
.--behind .sec-videos__caption {
    left: calc(50% - 9.5rem);
    top: 36.8rem;
    width: 19.1rem;
    transform: none;
    text-align: left;
}

.--interview1 .sec-videos__caption {
    left: calc(50% + 0.05rem);
    top: 36.9rem;
}

.--interview2 .sec-videos__caption {
    top: 37rem;
}

/* ===========================
   Next Section (Figma y5045-5637)
   =========================== */

.sec-next {
    position: relative;
    width: 100%;
    height: 59.2rem;
    overflow: hidden;
    background-color: var(--color-white);
    background-image: linear-gradient(71.85394083130988deg, rgba(0, 148, 157, 0.283) 0.88899%, rgba(107, 191, 193, 0.41) 34.417%, rgba(161, 209, 199, 0.41) 57.083%, rgba(198, 226, 215, 0.41) 75.972%, rgba(248, 248, 217, 0.41) 99.111%);
}

/* カード形状(565x400)の左上が原点。Figma x93, y5129 */
.sec-next__card {
    position: absolute;
    left: 9.3rem;
    top: 8.4rem;
    width: 56.5rem;
    height: 40rem;
}

.sec-next__card img {
    position: absolute;
    max-width: none;
}

/* 影込みSVG(627x462)。形状は内側 31px から始まる */
.sec-next__card-bg {
    left: -3.1rem;
    top: -3.1rem;
    width: 62.7rem;
    height: 46.2rem;
}

.sec-next__badge {
    position: absolute;
    left: 23.6rem;
    top: 0.4rem;
    width: 9.3rem;
    height: 9.3rem;
    border-radius: 50%;
    background-color: var(--color-lr);
}

.sec-next__logo {
    left: 1.8rem;
    top: 3.1rem;
    width: 6.2rem;
    height: 2.5rem;
}

.sec-next__label {
    position: absolute;
    left: 21rem;
    top: 10.7rem; /* Figma 106px + ref実測補正 1px */
    font-size: 5.7rem;
    line-height: 6.7rem;
    letter-spacing: 0.342rem;
    white-space: nowrap;
    color: var(--color-lr);
}

.sec-next__title {
    position: absolute;
    left: 50%;
    top: 19.2rem;
    transform: translateX(-50%);
    font-family: "Tenor Sans", var(--font-jp);
    font-weight: 500;
    font-size: 3.9rem;
    line-height: normal;
    letter-spacing: 0.156rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

.sec-next__title-en {
    font-weight: 400;
}

.sec-next__info {
    position: absolute;
    left: 50%;
    top: 26.1rem;
    width: 38.5rem;
    transform: translateX(-50%);
    font-size: 2.4rem;
    line-height: 2.8rem;
    letter-spacing: 0.144rem;
    text-align: center;
    color: var(--color-black);
}

/* 罫線 0.75px。SVGは線の両側に余白を持つ3px幅(縮小時の消失防止)。線の中心がFigma座標になるよう 0.15rem ずらす */
.sec-next__line.--h {
    left: 0.25rem;
    top: calc(33.4rem - 0.15rem);
    width: 56.05rem;
    height: 0.3rem;
}

.sec-next__line.--v {
    left: calc(28.2rem - 0.15rem);
    top: 33.4rem;
    width: 0.3rem;
    height: 6.6rem;
}

.sec-next__action {
    position: absolute;
    top: 35.1rem;
    transform: translateX(-50%);
    font-size: 2.4rem;
    line-height: 2.8rem;
    letter-spacing: 0.144rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-save);
}

.sec-next__action.--save {
    left: 13.85rem;
}

.sec-next__action.--keep {
    left: 42.55rem;
}

/* ===========================
   Footer
   =========================== */

/* Figma: Next部下端 y5637 → タグライン上端 y5720(8.3rem)、コピーライト下端 y6115 → フレーム下端 y6195(8rem) */
.adlp-footer {
    width: 100%;
    padding: 8.3rem 3rem 8rem;
    background-color: var(--color-white);
}

.adlp-footer__tagline {
    height: 7.3rem;
    padding-left: 0.1rem;
    font-size: 2.8rem;
    line-height: normal;
    letter-spacing: 0.112rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

.adlp-footer__links {
    width: 100%;
}

.adlp-footer__item + .adlp-footer__item {
    margin-top: 1.8rem;
}

.adlp-footer__btn {
    position: relative;
    display: block;
    width: 69rem;
    height: 7.5rem;
    border: 0.2rem solid var(--color-lr);
    border-radius: 0.2rem;
    background-color: var(--color-white);
    color: var(--color-black);
}

/* 子要素の座標はボタン外枠(border-box)左上が原点。border 0.2rem 分を差し引いて配置 */
.adlp-footer__icon {
    position: absolute;
    max-width: none;
}

.adlp-footer__icon.--cart {
    left: calc(4.878rem - 0.2rem);
    top: calc(2.25rem - 0.2rem);
    width: 3.388rem;
    height: 2.974rem;
    transform: scaleX(-1);
}

.adlp-footer__icon.--instagram {
    left: calc(5.216rem - 0.2rem);
    top: calc(2.4215rem - 0.2rem);
    width: 2.657rem;
    height: 2.657rem;
}

.adlp-footer__icon.--website {
    left: calc(5.052rem - 0.2rem);
    top: calc(2.357rem - 0.2rem);
    width: 3.0998rem;
    height: 2.8929rem;
}

.adlp-footer__label {
    position: absolute;
    display: block;
    height: 3rem;
    font-size: 2.4rem;
    line-height: normal;
    letter-spacing: 0.096rem;
    white-space: nowrap;
    color: var(--color-black);
}

.adlp-footer__label.--shop {
    left: calc(12.796rem - 0.2rem);
    top: calc(2.25rem - 0.2rem);
}

.adlp-footer__label.--instagram {
    left: calc(11.596rem - 0.2rem);
    top: calc(2.357rem - 0.2rem);
    width: 18.7138rem;
    text-align: center;
}

.adlp-footer__label.--brand {
    left: calc(12.796rem - 0.2rem);
    top: calc(2.464rem - 0.2rem);
}

.adlp-footer__arrow {
    position: absolute;
    left: calc(64.178rem - 0.05rem - 0.2rem);
    top: calc(2.893rem - 0.05rem - 0.2rem);
    width: 0.565969rem;
    height: 1.8143rem;
    max-width: none;
    transform: scaleY(-1);
}

.adlp-footer__copyright {
    height: 1.9rem;
    margin-top: 4.2rem;
    padding-left: 0.1rem;
    font-size: 1.4rem;
    line-height: normal;
    letter-spacing: 0.056rem;
    text-align: center;
    white-space: nowrap;
    color: var(--color-black);
}

/* ===========================
   Video Modal
   ビューポート基準のUIのため rem スケール対象外(px / vw / dvh)
   =========================== */

/* モーダル表示中は背面スクロールを抑止 */
html:has(dialog[open]) {
    overflow: hidden;
}

/* body は overflow-x: hidden + height: 100% のため、html を hidden にすると body 自身がスクロールコンテナ化して
   スクロール位置が先頭へ飛ぶ。モーダル表示中だけ visible に戻して現在位置を維持する */
html:has(dialog[open]) body {
    overflow: visible;
}

.adlp-video-card:focus-visible,
.adlp-video-modal__close:focus-visible,
.adlp-video-notice__link:focus-visible {
    outline: 3px solid #4c9aff;
    outline-offset: 3px;
}

.adlp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* 背景クリック判定(event.target === dialog)のため dialog 自体は余白ゼロ */
/* 本番はホスト(ec-force)のレイアウトに包まれ外部CSSが当たるため、クラス名はLP固有の接頭辞にし、
   中央寄せ(fixed + inset 0 + margin auto + fit-content)もブラウザ既定に頼らず id+class で明示する */
#adlp-video-modal.adlp-video-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: fit-content;
    height: fit-content;
    margin: auto;
    transform: none;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    background: transparent;
}

.adlp-video-modal::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

/* ラッパー自体はクリックを透過させ、×ボタン横の空白も「背景クリック」として扱う。
   dialog(margin: auto)のボックス = 動画枠のサイズにして、枠自体がビューポート中央に来るようにする */
.adlp-video-modal__inner {
    position: relative;
    pointer-events: none;
}

.adlp-video-modal__close,
.adlp-video-modal__frame {
    pointer-events: auto;
}

/* 閉じるボタンは動画枠の右上外側に絶対配置(通常フローに置くと枠が中央から 26px 下がる)。
   枠の高さを 100dvh - 120px 以下に抑えているので、上の 60px に必ず収まる */
.adlp-video-modal__close {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-family: inherit;
    font-size: 28px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.adlp-video-modal__close:hover {
    background: rgba(255, 255, 255, 0.32);
}

.adlp-video-modal__frame {
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

/* 横型 16:9(dvh 未対応ブラウザ向けに vh を先に宣言)。高さは 100dvh - 120px(上下 60px = ×ボタン分の余白)が上限 */
.adlp-video-modal[data-orientation="landscape"] .adlp-video-modal__frame {
    aspect-ratio: 16 / 9;
    width: min(92vw, calc((100vh - 120px) * 16 / 9), 1120px);
    width: min(92vw, calc((100dvh - 120px) * 16 / 9), 1120px);
}

/* 縦型 9:16 */
.adlp-video-modal[data-orientation="portrait"] .adlp-video-modal__frame {
    aspect-ratio: 9 / 16;
    width: min(92vw, calc((100vh - 120px) * 9 / 16), 480px);
    width: min(92vw, calc((100dvh - 120px) * 9 / 16), 480px);
}

.adlp-video-modal__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

/* 自前ホストの MP4(縦型 2160x3840)。枠は 9:16 だが端数差は黒地で吸収する */
.adlp-video-modal__frame video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain;
}

/* 案内パネル(file:// で開かれたとき / MP4 を再生できないとき。枠内スクロール可) */
.adlp-video-notice {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px;
    text-align: left;
    background: #1b1f24;
}

/* margin: auto で中央寄せ(あふれた場合も上端が切れない) */
.adlp-video-notice__body {
    margin: auto;
    max-width: 100%;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.adlp-video-notice__body p {
    margin: 0 0 12px;
}

.adlp-video-notice__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 20px;
    border-radius: 999px;
    font-weight: 600;
    color: #1b1f24;
    text-decoration: none;
    background: #fff;
}

.adlp-video-notice__link:hover {
    background: #e6e8eb;
}

@media (prefers-reduced-motion: no-preference) {
    .adlp-video-modal[open] {
        animation: modal-in 0.2s ease-out;
    }

    .adlp-video-modal[open]::backdrop {
        animation: backdrop-in 0.2s ease-out;
    }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
}

@keyframes backdrop-in {
    from {
        opacity: 0;
    }
}