@font-face { font-family: "DX Rounded"; src: url("assets/fonts/zen-maru.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DX Mincho"; src: url("assets/fonts/shippori-mincho.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DX Handwritten"; src: url("assets/fonts/yusei-magic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
[data-font="theme"] { --chosen-font: var(--display-font, -apple-system, sans-serif); }
[data-font="standard"] { --chosen-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif; }
[data-font="rounded"] { --chosen-font: "DX Rounded", sans-serif; }
[data-font="mincho"] { --chosen-font: "DX Mincho", serif; }
[data-font="handwritten"] { --chosen-font: "DX Handwritten", sans-serif; }
body[data-surface="display"] .display-screen,
body[data-surface="display"] .display-card,
.dx-font-sample, .dx-theme-sample, #dx-cue-root .delta-value { font-family: var(--chosen-font, var(--display-font, inherit)); }
body[data-surface="display"] .dx-display-actions { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif; }
body[data-font="theme"] .dx-theme-sample { font-family: var(--display-font); }
.dx-font-picker { margin-top: 0; }
.dx-font-option { display: grid; grid-template-columns: minmax(110px, .6fr) minmax(0, 1fr); align-items: center; gap: 14px; width: 100%; padding: 16px; background: #fff; color: var(--dx-text); border-bottom: 1px solid var(--dx-line); text-align: left; }
.dx-font-option:last-child { border-bottom: 0; }
.dx-font-option[aria-pressed="true"] { background: #fff2f6; }
.dx-font-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.dx-font-label svg { width: 18px; height: 18px; color: var(--dx-tint); }
.dx-font-sample { display: grid; gap: 6px; min-width: 0; color: #28242b; }
.dx-font-sample > span { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.dx-font-sample > strong { font-size: 30px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.dx-font-sample small { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; line-height: 1.5; }
.dx-font-sample small span:first-child { color: #bd2855; }
.dx-font-sample small span:last-child { color: #256dad; }
@media (min-width: 900px) {
  .dx-font-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-font-option { border-right: 1px solid var(--dx-line); }
}