/* Variant C: Ma */
@font-face { font-family: "Newsreader"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/newsreader-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/newsreader-latin-300-italic.woff2") format("woff2"); }

body.v-c { --bg: #F6F2EA; --fg: #1C1B1A; --muted: #5A5650; transition-duration: 5s; }
body.v-c.is-active { --bg: #161513; --fg: #EDE6D8; --muted: #ADA597; }
.v-c .stage { font-family: Newsreader, "Noto Serif", Georgia, serif; }
.v-c .hdr { padding: 24px 36px; font-size: 0.9375rem; }
.v-c .lang { align-items: baseline; gap: 10px; padding: 10px 0; }
.v-c .lang-glyph { font-size: 0.875rem; letter-spacing: .04em; }
.v-c .lang-name { color: var(--muted); }
.v-c .sound { border: 0; opacity: .85; }
@media (hover: hover) { .v-c .sound:hover { opacity: 1; } }
.v-c .main { padding: 12px 24px 24px; }
.v-c .mark { width: clamp(15rem, 52vmin, 27.5rem); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.v-c .theme { max-width: 80%; overflow-wrap: anywhere; hyphens: auto; font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.75rem); line-height: 1.15; letter-spacing: .01em; }
.v-c .count { order: 1; margin-top: 36px; font-weight: 300; font-size: clamp(1.875rem, 3.4vw, 2.5rem); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .06em; }
.v-c .label { order: 2; margin: 12px 0 0; font-style: italic; font-size: 1rem; color: var(--muted); }
.v-c .sub { order: 3; margin: 24px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); max-width: 38ch; min-height: 26px; }
.v-c .actions { order: 4; gap: 28px; margin-top: 36px; min-height: 46px; font-size: 1.0625rem; }
.v-c .btn { min-height: 2.75rem; padding: 12px 0 4px; border: 0; border-block-end: 1px solid currentColor; font-size: inherit; transition: opacity .3s; }
@media (hover: hover) { .v-c .btn:hover { opacity: .6; } }
.v-c .note { padding: 12px 0 4px; font-style: italic; color: var(--muted); }
.v-c .ftr { align-items: center; gap: 20px; padding: 12px 36px 32px; text-align: center; }
.v-c .steps { gap: 6px; max-width: 52ch; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.v-c .steps .n { display: none; }
.v-c .steps .t { text-wrap: pretty; }
.v-c .safe { font-size: 0.875rem; font-style: italic; color: var(--muted); max-width: 52ch; }
.v-c .row { justify-content: center; gap: 6px 24px; font-size: 0.875rem; font-style: italic; color: var(--muted); }
.v-c .about-btn { padding: 10px 0; font-style: italic; font-size: 0.875rem; text-decoration-thickness: 1px; }
.v-c .about-title { font-weight: 300; font-style: italic; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; text-align: center; margin-bottom: 1.5rem; }
.v-c .story { font-size: 1.125rem; line-height: 1.75; }
.v-c .do-title { margin-top: 2rem; font-style: italic; font-weight: 300; font-size: 1.25rem; }
.v-c .do-body { font-size: 1.125rem; line-height: 1.75; }