/* 마이너스베타스튜디오 공용 톤 파일 — 색(라이트 하나)·모양·글자·공용 부품의 단 하나의 원본 (T-261013-004 색, T-261024-026 톤, T-261024-050 부품 확장, T-261024-058 다크 해제).
   회사의 모든 사이트가 https://kangdaejong.com/brand/current/tokens.css 를 페이지 머리말에서 읽는다(파일 이름은 그대로 둔다 — 이미 모든 사이트가 이 주소를 읽는다).
   세 부분으로 되어 있다.
     ① 색: --bg·--fg·--accent … 라이트 값은 첫이름(토스 톤)과 같다(T-261024-020). 다크 모드는 없다 — 2026-10-24 대종님 「다크를 풀고 전부 라이트」(T-261024-058):
        회사 홈·작업장·대표소개·단백질 모두 기기 설정과 무관하게 이 라이트 값 하나로 그린다. 다크 블록을 다시 넣지 않는다(각 저장소 verify-tone-copies 가 원본 밖 다크 규칙을 막고,
        site-release 계약이 라이브 전 화면을 다크 기기 에뮬레이션으로도 밝은지 검사한다). 회사 홈은 T-261024-050 부터 라이트 고정이었고, 이제 전부가 그렇다.
     ② 톤: --tone-* (모양·글자·크기·간격). 첫이름(토스 톤, web/studio.css 스펙 v3 + landing.css) 값이고 다크에서도 같다. 사이트 자기 값(--radius-card 등)과 이름이 겹치지 않게 --tone- 을 붙였다.
        사이트는 자기 값을 var(--tone-*) 로 바꿔 연결한다(검토 없이 다른 사이트 모양이 바뀌지 않게). 900px 이상에서 바뀌는 값(여백·카드 안쪽·첫 제목)은 아래 @media 블록이 첫이름과 같은 기준으로 바꾼다.
     ③ 공용 부품: .mb-shell·.mb-btn(.mb-btn--primary·--secondary·--block)·.mb-card·.mb-chip·.mb-eyebrow·.mb-link·.mb-field(.mb-label·.mb-input·.mb-textarea·.mb-select·.mb-help·.mb-error)·
        .mb-option·.mb-table·.mb-faq·.mb-row·.mb-press-card·.mb-toast·[data-mb-reveal]. class(표시)를 붙인 곳에만 적용된다.
   색·톤을 바꾸려면 이 파일만 고치고 회사홈(kangdaejong-com)만 배포한다. 다른 곳에 색 값이나 --tone-* 정의를 복사하지 않는다 —
   각 저장소의 palette-copies 검사가 막는다. 그림 생성기는 같은 원본에서 빌드 때 만든 tokens.json 을 읽는다. */
:root {
  color-scheme: light;
  --page-max: 1440px;
  /* ② 톤 — 첫이름(토스 톤) 값. 모드와 무관하다. */
  --tone-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --tone-weight: 400;
  --tone-weight-bold: 700;
  --tone-tracking-title: -0.02em;
  --tone-display-size: 30px; /* 첫 화면 큰 제목(휴대전화 기준, 900px 이상 44px) */
  --tone-display-line: 40px;
  --tone-title-size: 24px; /* 구역 제목 */
  --tone-title-line: 32px;
  --tone-subtitle-size: 20px; /* 카드 제목 */
  --tone-subtitle-line: 28px;
  --tone-body-size: 17px; /* 본문·버튼 글자 */
  --tone-body-line: 26px;
  --tone-label-size: 15px; /* 카드 설명·목록 */
  --tone-label-line: 22px;
  --tone-caption-size: 13px; /* 작은 안내·라벨 */
  --tone-caption-line: 18px;
  --tone-radius-control: 14px; /* 버튼·입력칸 */
  --tone-radius-card: 20px; /* 카드 */
  --tone-radius-sheet: 24px; /* 큰 판·시트 */
  --tone-radius-pill: 999px; /* 칩 */
  --tone-control-height: 56px; /* 버튼·입력칸 높이 */
  --tone-control-padding: 16px; /* 버튼·입력칸 좌우 안쪽 (T-261024-050) */
  --tone-input-border: 2px; /* 입력칸·선택칸 테두리 두께(평소 투명, 초점·선택 때 파랑) */
  --tone-textarea-min: 96px; /* 여러 줄 입력칸 최소 높이 */
  --tone-tap-height: 44px; /* 링크·작은 버튼이 손가락으로 눌리는 최소 높이 */
  --tone-chip-height: 26px; /* 칩·태그 높이 */
  --tone-header-height: 64px; /* 공용 헤더 높이 */
  --tone-card-padding: 20px; /* 카드 안쪽(900px 이상 24px) */
  --tone-gutter: 20px; /* 화면 좌우 여백(900px 이상 32px) */
  --tone-page-max: 1080px; /* PC 본문 최대 폭(첫이름 .shell) — 사이트는 자기 --page-max 를 이 값에 연결해 쓴다 */
  --tone-prose-max: 680px; /* 긴 글·안내문 최대 폭(첫이름 .prose·.article) */
  --tone-flow-max: 480px; /* 한 줄 흐름(결제·양식) 최대 폭(첫이름 .flow) */
  --tone-hero-top: 40px; /* 첫 화면 위 여백(900px 이상 56px) */
  --tone-section-gap: 56px; /* 구역 사이 간격 */
  --tone-space-1: 8px; /* 간격 눈금 — 첫이름이 쓰는 값만 */
  --tone-space-2: 12px;
  --tone-space-3: 16px;
  --tone-space-4: 24px;
  --tone-space-5: 32px;
  --tone-space-6: 40px;
  --tone-focus-width: 2px; /* 키보드 초점 테두리 */
  --tone-focus-offset: 3px;
  --tone-underline-offset: 4px; /* 글 링크 밑줄 간격 */
  --tone-press-scale: 0.98; /* 누를 때 살짝 작아짐 */
  --tone-press-ms: 100ms; /* 누름·색 전환 시간 */
  --tone-reveal-ms: 400ms; /* 카드가 아래에서 올라오며 나타나는 시간·토스트가 뜨고 지는 시간 (T-261025-009) */
  --tone-reveal-step: 80ms; /* 함께 들어온 카드끼리의 시간차(스태거) */
  --bg: #ffffff;
  --bg-elev: #f5f6f8;
  --bg-elev2: #eceef1;
  --bg-tint: #f0efe9;
  --fg: #191c21;
  --fg-dim: #4e5561;
  --fg-mute: #69717d;
  --fg-faint: #69717d;
  --border: #e6e8eb;
  --border-soft: #eceef2;
  --accent: #2f6feb;
  --accent-hover: #2459c4;
  --accent-dim: #2459c4;
  --accent-tint: #eaf1fe;
  --accent-bg: #eaf1fe;
  --accent-disabled: #c9d9fa; /* 비활성 파란 버튼 바탕(첫이름 primaryDisabled, T-261024-050). */
  --accent-cta: #2f6feb;
  --cta-bg: #2f6feb;
  --cta-fg: #ffffff;
  --accent-2: #466448;
  --cyan: #2f6feb;
  --magenta: #466448;
  --code-bg: #f5f6f8;
  --danger: #b02f29;
  --danger-bg: #faeae6;
  --success: #3c664b;
  --warn: #84601e;
  --invert-bg: #282e25;
  --invert-fg: #f8f7ef;
  --invert-dim: #c5cbbb;
  --invert-border: #495041;
  --shadow: 0 6px 24px #24293008;
  --shadow-pop: 0 16px 40px #24293012;
  /* 역할 이름 — 기본 이름과 같은 색은 그 이름을 그대로 가리킨다. */
  --text-2: var(--fg-dim);
  --text-3: var(--fg-mute);
  --text-4: #98a4b5;
  --surface: #ffffff; /* 카드·패널 바탕 */
  --surface-2: #f5f6f8;
  --surface-3: #eceef1;
  --line-soft: #f0f1f4;
  --line-strong: #c6d0da;
  --accent-line: #dce4f4;
  --accent-line-2: #b8c8e8;
  --accent-text: #183665;
  --accent-text-2: #3d5790;
  --accent-text-3: #4b5d7b;
  --mood-fg: #4b5145;
  --mood-hover: #f0f0e8;
  --mood-hover-line: #88927b;
  --social-fg: #4a5361;
  /* 공용 헤더·푸터(mb-components.js, tone="studio")가 상속받는 호스트 팔레트. */
  --mb-host-bg: var(--bg);
  --mb-host-elev: var(--bg-elev);
  --mb-host-fg: var(--fg);
  --mb-host-dim: var(--fg-dim);
  --mb-host-mute: var(--fg-mute);
  --mb-host-border: var(--border);
  --mb-host-soft: var(--surface-2);
  --mb-host-accent: var(--accent);
  --mb-host-cta-bg: var(--accent-cta);
  --mb-host-shadow: #24293026;
}

/* ② 톤 — 900px 이상에서 첫이름(studio.css @media (min-width: 900px))과 같은 기준으로 바뀌는 값. 사이트는 var() 만 쓰면 같이 바뀐다. */
@media (min-width: 900px) {
  :root {
    --tone-gutter: 32px;
    --tone-card-padding: 24px;
    --tone-display-size: 44px;
    --tone-display-line: 56px;
    --tone-hero-top: 56px;
  }
}

/* 공용 헤더·푸터의 폭도 본문과 같은 PC 폭을 따른다. */
mb-header,
mb-footer {
  --mb-max: var(--page-max);
}

/* ③ 공용 부품 (T-261024-026, T-261024-050 확장) — class 를 붙인 곳에만 적용된다. 값은 위 ①색·②톤 이름만 쓴다.
   첫이름 web/studio.css(스펙 v3)·landing.css 의 .shell·.btn-primary·.btn-secondary·.card·.tags span·.eyebrow·.text-link·.field·.option·table·.faq-item·.row 와 같은 값이다.
   색 규칙은 .mb-btn.mb-btn--primary 처럼 class 를 두 번 써서, 사이트 공용 초기화(.studio-page a { color: inherit })보다 앞선다. */
.mb-shell {
  box-sizing: border-box;
  width: min(calc(100% - var(--tone-gutter) * 2), var(--tone-page-max));
  margin-inline: auto;
}
.mb-prose {
  box-sizing: border-box;
  width: min(calc(100% - var(--tone-gutter) * 2), var(--tone-prose-max));
  margin-inline: auto;
}
.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tone-space-1);
  box-sizing: border-box;
  height: var(--tone-control-height);
  min-height: var(--tone-control-height);
  padding: 0 var(--tone-control-padding);
  border: 0;
  border-radius: var(--tone-radius-control);
  font: var(--tone-weight-bold) var(--tone-body-size)/var(--tone-body-line) var(--tone-font);
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tone-press-ms) linear, background-color var(--tone-press-ms) linear;
}
.mb-btn:active { transform: scale(var(--tone-press-scale)); }
/* 첫이름처럼 올려도 색은 그대로이고, 누르는 동안만 눌린 파랑으로 바뀐다. */
.mb-btn.mb-btn--primary, .mb-btn.mb-btn--primary:hover, .mb-btn.mb-btn--primary:focus-visible { background: var(--cta-bg); color: var(--cta-fg); }
.mb-btn.mb-btn--primary:active { background: var(--accent-hover); }
.mb-btn.mb-btn--secondary, .mb-btn.mb-btn--secondary:hover, .mb-btn.mb-btn--secondary:focus-visible { background: var(--bg-elev); color: var(--fg); }
.mb-btn.mb-btn--primary:disabled, .mb-btn.mb-btn--primary[aria-disabled="true"] { background: var(--accent-disabled); color: var(--fg-dim); cursor: default; transform: none; }
.mb-btn.mb-btn--secondary:disabled, .mb-btn.mb-btn--secondary[aria-disabled="true"] { background: var(--bg-elev2); color: var(--fg-mute); cursor: default; transform: none; }
.mb-btn--block { display: flex; width: 100%; }
/* 회색 카드 위에서는 회색 버튼이 흰 바탕이다(첫이름이 회색 카드 위 고르는 칸에 흰 바탕을 쓰는 것과 같은 규칙). */
.mb-card .mb-btn.mb-btn--secondary, .mb-card .mb-btn.mb-btn--secondary:hover, .mb-card .mb-btn.mb-btn--secondary:focus-visible { background: var(--bg); }
.mb-card {
  box-sizing: border-box;
  background: var(--bg-elev);
  color: var(--fg);
  border: 0;
  border-radius: var(--tone-radius-card);
  padding: var(--tone-card-padding);
}
.mb-card > h3, .mb-card .mb-card-title { margin: 0 0 var(--tone-space-1); font: var(--tone-weight-bold) var(--tone-subtitle-size)/var(--tone-subtitle-line) var(--tone-font); letter-spacing: var(--tone-tracking-title); }
.mb-card > p, .mb-card .mb-card-text { margin: 0; color: var(--fg-dim); font-size: var(--tone-body-size); line-height: var(--tone-body-line); }
.mb-card > p + p { margin-top: var(--tone-space-2); }
.mb-chip.mb-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--tone-chip-height);
  padding: 0 10px;
  border-radius: var(--tone-radius-pill);
  background: var(--bg);
  color: var(--fg-dim);
  font: var(--tone-weight-bold) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font);
  letter-spacing: normal;
  text-decoration: none;
}
.mb-eyebrow.mb-eyebrow {
  margin: 0 0 var(--tone-space-1);
  color: var(--fg-dim);
  font: var(--tone-weight-bold) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font);
  letter-spacing: normal;
  text-transform: none;
}
/* 글 링크(첫이름 .text-link): 파란 굵은 글자에 밑줄, 손가락 높이 44px. 회색 카드 위에서는 눌린 파랑(4.5:1). */
.mb-link.mb-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tone-tap-height);
  color: var(--accent);
  font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-body-line) var(--tone-font);
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: var(--tone-underline-offset);
}
.mb-link.mb-link:hover, .mb-link.mb-link:focus-visible { color: var(--accent-hover); }
.mb-card .mb-link.mb-link { color: var(--accent-hover); }
/* 글 링크 모양의 버튼(예: 「주소 복사」) — 버튼 기본 바탕·테두리를 지운다. */
button.mb-link.mb-link { padding: 0; border: 0; background: none; cursor: pointer; }
/* 입력(첫이름 .field): 라벨 15/22 굵게, 칸 56px 회색 면·투명 2px 테두리, 초점이면 파란 테두리. */
.mb-field { display: flex; flex-direction: column; gap: var(--tone-space-1); margin: 0 0 var(--tone-space-3); }
.mb-label.mb-label { margin: 0; color: var(--fg); font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); }
.mb-input.mb-input, .mb-textarea.mb-textarea, .mb-select.mb-select {
  box-sizing: border-box;
  width: 100%;
  height: var(--tone-control-height);
  margin: 0;
  padding: 0 var(--tone-control-padding);
  border: var(--tone-input-border) solid transparent;
  border-radius: var(--tone-radius-control);
  background: var(--bg-elev);
  color: var(--fg);
  font: var(--tone-weight) var(--tone-body-size)/var(--tone-body-line) var(--tone-font);
  letter-spacing: normal;
}
.mb-textarea.mb-textarea { height: auto; min-height: var(--tone-textarea-min); padding: var(--tone-control-padding); resize: vertical; }
.mb-input.mb-input::placeholder, .mb-textarea.mb-textarea::placeholder { color: var(--fg-mute); opacity: 1; }
.mb-input.mb-input:focus, .mb-textarea.mb-textarea:focus, .mb-select.mb-select:focus { outline: none; border-color: var(--accent); }
.mb-help.mb-help { margin: 0; color: var(--fg-dim); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); }
.mb-error.mb-error { display: none; margin: 0; color: var(--danger); font: var(--tone-weight) var(--tone-caption-size)/var(--tone-caption-line) var(--tone-font); }
.mb-field.is-error .mb-input, .mb-field.is-error .mb-textarea, .mb-field.is-error .mb-select { border-color: var(--danger); }
.mb-field.is-error .mb-error { display: block; }
/* 고르는 칸(첫이름 .option·.method): 56px 줄, 고르면 연한 파란 바탕에 파란 테두리. 회색 카드 위에서는 흰 바탕(.mb-card .mb-option). */
.mb-option.mb-option {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tone-space-2);
  box-sizing: border-box;
  min-height: var(--tone-control-height);
  padding: var(--tone-space-2) var(--tone-control-padding);
  border: var(--tone-input-border) solid transparent;
  border-radius: var(--tone-radius-control);
  background: var(--bg-elev);
  color: var(--fg);
  font: var(--tone-weight-bold) var(--tone-body-size)/var(--tone-body-line) var(--tone-font);
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
}
.mb-option--block { display: flex; width: 100%; }
.mb-card .mb-option.mb-option { background: var(--bg); }
.mb-option.mb-option[aria-pressed="true"], .mb-option.mb-option.is-selected, .mb-card .mb-option.mb-option[aria-pressed="true"], .mb-card .mb-option.mb-option.is-selected { background: var(--accent-tint); border-color: var(--accent); }
.mb-option.mb-option[aria-pressed="true"]::after, .mb-option.mb-option.is-selected::after {
  content: "";
  box-sizing: border-box;
  width: 7px;
  height: 12px;
  flex: none;
  margin-bottom: 3px;
  border-right: var(--tone-input-border) solid var(--accent);
  border-bottom: var(--tone-input-border) solid var(--accent);
  transform: rotate(45deg);
}
/* 표(첫이름 table): 15/22, 칸 12px, 아래 가는 줄만. */
.mb-table.mb-table { width: 100%; margin-block: var(--tone-space-3); border-collapse: collapse; font: var(--tone-weight) var(--tone-label-size)/var(--tone-label-line) var(--tone-font); }
.mb-table.mb-table th, .mb-table.mb-table td { padding: var(--tone-space-2); border: 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.mb-table.mb-table th { color: var(--fg-dim); font-weight: var(--tone-weight-bold); background: transparent; }
/* 접는 항목(첫이름 landing .faq-item): 회색 둥근 면, 56px 제목 줄, 오른쪽 꺾쇠. */
.mb-faq.mb-faq { box-sizing: border-box; margin-top: var(--tone-space-1); padding: 4px var(--tone-card-padding); border: 0; border-radius: var(--tone-radius-card); background: var(--bg-elev); color: var(--fg); }
.mb-faq.mb-faq > summary {
  display: flex;
  align-items: center;
  gap: var(--tone-space-2);
  position: relative;
  min-height: var(--tone-control-height);
  padding: var(--tone-space-3) var(--tone-space-5) var(--tone-space-3) 0;
  list-style: none;
  cursor: pointer;
  color: var(--fg);
  font: var(--tone-weight-bold) var(--tone-body-size)/var(--tone-body-line) var(--tone-font);
  letter-spacing: normal;
}
.mb-faq.mb-faq > summary::-webkit-details-marker { display: none; }
.mb-faq.mb-faq > summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-right: var(--tone-input-border) solid var(--fg-dim);
  border-bottom: var(--tone-input-border) solid var(--fg-dim);
  transform: rotate(45deg);
}
.mb-faq.mb-faq[open] > summary::after { transform: rotate(225deg); top: 26px; }
.mb-faq.mb-faq > p { margin: 0; padding-bottom: var(--tone-space-1); color: var(--fg-dim); font-size: var(--tone-body-size); line-height: var(--tone-body-line); max-width: var(--tone-prose-max); }
/* 이름·값 한 줄(첫이름 .row): 위 가는 줄, 왼쪽 회색 이름, 오른쪽 굵은 값. */
.mb-row.mb-row { display: flex; justify-content: space-between; gap: var(--tone-space-3); padding-block: var(--tone-space-3); border-top: 1px solid var(--border); color: var(--fg); font-size: var(--tone-label-size); }
.mb-row.mb-row > span:first-child, .mb-row.mb-row > dt { color: var(--fg-dim); flex-shrink: 0; }
.mb-row.mb-row > b, .mb-row.mb-row > dd { margin: 0; text-align: right; font-weight: var(--tone-weight-bold); }
/* 누르는 카드(T-261025-009, 인사이트 「UI 용어 24가지」의 호버 이펙트·마이크로 인터랙션): 링크가 하나뿐인 카드 전체를 누르는 곳으로 만든다.
   카드에 .mb-press-card, 그 하나뿐인 링크에 .mb-press-target 을 단다 — 링크의 ::after 가 카드 전체를 덮어서 카드 어디를 눌러도 그 링크로 간다.
   올리면 회색이 한 단계 진해지고(--bg-elev2), 누르는 동안 버튼처럼 0.98 로 작아진다. 키보드 초점은 카드 테두리 전체에 그린다. 동작 줄이기면 크기는 그대로다.
   링크가 여러 개인 카드에는 달지 않는다(덮개가 다른 링크를 가린다). */
.mb-press-card { position: relative; transition: transform var(--tone-press-ms) linear, background-color var(--tone-press-ms) linear; }
.mb-press-card .mb-press-target::after { content: ""; position: absolute; inset: 0; border-radius: var(--tone-radius-card); }
.mb-press-card .mb-press-target:focus-visible { outline: none; }
.mb-press-card .mb-press-target:focus-visible::after { outline: var(--tone-focus-width) solid var(--accent); outline-offset: var(--tone-focus-offset); }
@media (hover: hover) { .mb-press-card.mb-press-card:hover { background: var(--bg-elev2); } }
.mb-press-card.mb-press-card:active { transform: scale(var(--tone-press-scale)); }
/* 토스트(T-261025-009): 화면 아래 가운데에 3초 떴다가 사라지는 알림. mb-components.js 가 만들고 글을 넣는다(role="status" 라 화면 읽기에도 들린다). */
.mb-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tone-space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - var(--tone-gutter) * 2);
  padding: var(--tone-space-2) var(--tone-control-padding);
  border-radius: var(--tone-radius-control);
  background: var(--fg);
  color: var(--bg);
  font: var(--tone-weight-bold) var(--tone-label-size)/var(--tone-label-line) var(--tone-font);
  letter-spacing: normal;
  text-align: center;
  word-break: keep-all;
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%);
  transition: opacity var(--tone-reveal-ms) ease-out, transform var(--tone-reveal-ms) ease-out;
}
.mb-toast[hidden] { display: none; }
.mb-toast.is-leaving { opacity: 0; transform: translate(-50%, var(--tone-space-2)); }
/* 스크롤 리빌 + 스태거(T-261025-009): data-mb-reveal 을 단 묶음의 카드가 화면에 들어올 때 아래에서 살짝 올라오며 나타나고,
   한 번에 들어온 카드끼리는 --tone-reveal-step 간격으로 차례로 나온다. 숨기는 일은 mb-components.js 가 html 에 mb-reveal-on 을 붙인 뒤에만 한다 —
   스크립트가 없거나, 동작 줄이기 설정이거나, 자동화 브라우저(배포 검사·화면 캡처)면 처음부터 다 보인다. 첫 화면에 이미 보이던 카드(.is-static)는 숨기지 않는다. */
@keyframes mb-reveal { from { opacity: 0; transform: translateY(var(--tone-space-2)); } }
@media (prefers-reduced-motion: no-preference) {
  .mb-reveal-on [data-mb-reveal] > :not(.is-revealed, .is-static) { opacity: 0; }
  .mb-reveal-on [data-mb-reveal] > .is-revealed { animation: mb-reveal var(--tone-reveal-ms) ease-out backwards; animation-delay: calc(var(--mb-reveal-index, 0) * var(--tone-reveal-step)); }
}
@media (prefers-reduced-motion: reduce) {
  .mb-press-card.mb-press-card { transition: none; }
  .mb-press-card.mb-press-card:active { transform: none; }
  .mb-toast { transition: none; }
}