@import url("https://cdn.jsdelivr.net/npm/destyle.css@4.0.1/destyle.min.css");

#design-vocabulary {
  color-scheme: light dark;
  --dvui-page: light-dark(#eef1f5, #101218);
  --dvui-surface: light-dark(#ffffff, #181b23);
  --dvui-soft: light-dark(#edf1f6, #202530);
  --dvui-text: light-dark(#111318, #f5f7fb);
  --dvui-muted: light-dark(#667085, #a8b1c1);
  --dvui-line: light-dark(#d8dee8, #303746);
  --dvui-control-border: light-dark(#c3ccd9, #465064);
  --dvui-accent: light-dark(#335cff, #7d9aff);
  --dvui-accent-hover: light-dark(#254bdf, #9aafff);
  --dvui-accent-active: light-dark(#1e3db5, #b8c7ff);
  --dvui-selection: light-dark(#335cff, #7d9aff);
  --dvui-selection-text: light-dark(#2345d8, #aebfff);
  --dvui-strong-text: light-dark(#ffffff, #101218);
  --dvui-focus: light-dark(#335cff, #9aafff);
  --dvui-focus-ring: light-dark(rgb(51 92 255 / 0.22), rgb(125 154 255 / 0.3));
  --dvui-near: light-dark(#edf1f6, #262c37);
  --dvui-near-text: light-dark(#526071, #b5becd);
  --dvui-chrome: light-dark(#151c2d, #0b0f19);
  --dvui-chrome-surface: light-dark(#20293d, #151b29);
  --dvui-chrome-text: #f7f9ff;
  --dvui-chrome-muted: #b4bed0;
  --dvui-chrome-line: #344158;
  width: 100%;
  color: var(--dvui-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

#design-vocabulary *,
#design-vocabulary *::before,
#design-vocabulary *::after { box-sizing: border-box; }
#design-vocabulary button,
#design-vocabulary select,
#design-vocabulary input { font: inherit; }
#design-vocabulary button,
#design-vocabulary select,
#design-vocabulary a { min-height: 2.75rem; }
#design-vocabulary select,
#design-vocabulary input[type="checkbox"] { appearance: auto; }
#design-vocabulary [hidden] { display: none !important; }

#design-vocabulary :where(button, select, input, a, summary):focus-visible {
  outline: 2px solid var(--dvui-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--dvui-focus-ring);
}

#design-vocabulary .dvui-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#design-vocabulary .dvui-window {
  overflow: visible;
  background: var(--dvui-page);
  color: var(--dvui-text);
}

#design-vocabulary .dvui-topbar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  min-height: 9rem;
  padding: 1.5rem clamp(1.5rem, 4vw, 4rem);
  border-block-end: 1px solid var(--dvui-chrome-line);
  background:
    radial-gradient(circle at 82% -45%, rgb(51 92 255 / 0.4), transparent 27rem),
    linear-gradient(135deg, #111827, var(--dvui-chrome) 62%, #1d2942);
  color: var(--dvui-chrome-text);
}

#design-vocabulary .dvui-topbar::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(90deg, transparent 22%, #000 72%, transparent);
}

#design-vocabulary .dvui-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

#design-vocabulary .dvui-brand h1 {
  max-width: 13em;
  font-size: clamp(2.25rem, 3.8vw, 3.4rem);
  line-height: 1.17;
  letter-spacing: -0.045em;
}

#design-vocabulary .dvui-brand-eyebrow {
  margin-block-end: 0.4rem;
  color: #8fa8ff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
}

#design-vocabulary .dvui-brand-lead {
  margin-block-start: 0.5rem;
  color: var(--dvui-chrome-muted);
  font-size: 1rem;
  line-height: 1.5;
}

#design-vocabulary h1,
#design-vocabulary h2,
#design-vocabulary h3,
#design-vocabulary h4,
#design-vocabulary p { margin-block: 0; }

#design-vocabulary h1,
#design-vocabulary h2,
#design-vocabulary h3,
#design-vocabulary h4 {
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

#design-vocabulary h1 { font-size: 2rem; }
#design-vocabulary h2 { font-size: 1.5rem; }
#design-vocabulary h3 { font-size: 1.25rem; }
#design-vocabulary h4 { font-size: 1.125rem; }

#design-vocabulary .dvui-prototype-note,
#design-vocabulary .dvui-card-en,
#design-vocabulary .dvui-card-description,
#design-vocabulary .dvui-detail-en,
#design-vocabulary .dvui-detail-note,
#design-vocabulary .dvui-empty { color: var(--dvui-muted); }

#design-vocabulary .dvui-prototype-note {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  color: var(--dvui-chrome-muted);
  font-size: 0.8125rem;
  text-align: end;
  backdrop-filter: blur(0.75rem);
}

#design-vocabulary .dvui-prototype-note::before {
  content: "";
  width: 0.45rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #6f8cff;
  box-shadow: 0 0 0.8rem rgb(111 140 255 / 0.8);
}

#design-vocabulary .dvui-layout {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: calc(100dvh - 9rem);
  padding: 0;
}

#design-vocabulary .dvui-sidebar {
  min-width: 0;
  border-inline-end: 1px solid var(--dvui-chrome-line);
  background: var(--dvui-chrome);
  color: var(--dvui-chrome-text);
}
#design-vocabulary .dvui-sidebar-content {
  position: sticky;
  inset-block-start: 0;
  max-height: 100dvh;
  padding: 1.75rem 1.25rem;
  overflow-y: auto;
}
#design-vocabulary .dvui-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 1.5rem; }
#design-vocabulary .dvui-sidebar-head h2 { font-size: 1rem; white-space: nowrap; }
#design-vocabulary .dvui-sidebar-head .dvui-clear { padding-inline: 0.65rem; font-size: 0.75rem; }
#design-vocabulary .dvui-sidebar .dvui-quick-filters { display: block; }
#design-vocabulary .dvui-sidebar .dvui-favorites-filter { margin-block: 0 1.5rem; }
#design-vocabulary .dvui-sidebar-groups { display: grid; }
#design-vocabulary .dvui-sidebar-condition {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding-block: 1rem;
  border-block-start: 1px solid var(--dvui-chrome-line);
  color: var(--dvui-chrome-text);
  text-align: start;
}
#design-vocabulary .dvui-sidebar-condition-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }
#design-vocabulary .dvui-sidebar-condition-title > small { flex-shrink: 0; color: var(--dvui-chrome-muted); font-size: 0.75rem; font-weight: 400; white-space: nowrap; }
#design-vocabulary .dvui-sidebar-selected {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--dvui-chrome-muted);
  font-size: 0.8125rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
#design-vocabulary .dvui-sidebar-condition.is-selected .dvui-sidebar-selected { color: #d3dcff; }
#design-vocabulary .dvui-sidebar-edit { width: 100%; margin-block-start: 0.5rem; }

#design-vocabulary .dvui-filter-dialog {
  width: min(70rem, calc(100vw - 3rem));
  height: calc(100dvh - 3rem);
  max-width: none;
  max-height: calc(100dvh - 3rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dvui-chrome-line);
  border-radius: 1rem;
  background: var(--dvui-chrome);
  color: var(--dvui-chrome-text);
  box-shadow: 0 1.5rem 5.5rem rgb(7 10 18 / 0.4);
}
#design-vocabulary .dvui-filter-dialog[open] { display: flex; flex-direction: column; }
#design-vocabulary .dvui-filter-dialog::backdrop { background: rgb(10 14 24 / 0.6); }

#design-vocabulary .dvui-filters {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 1.5rem 1rem;
  overflow: hidden;
}
#design-vocabulary .dvui-quick-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }

#design-vocabulary .dvui-filter-groups {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}
#design-vocabulary .dvui-filter-section + .dvui-filter-section { margin-block-start: 1.5rem; }
#design-vocabulary .dvui-filter-section h4 {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  margin-block-end: 0.5rem;
  padding-block: 0.5rem;
  background: var(--dvui-chrome);
  color: var(--dvui-chrome-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  text-wrap: wrap;
}

#design-vocabulary .dvui-filter-footer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-block-start: 1px solid var(--dvui-chrome-line);
}
#design-vocabulary .dvui-filter-footer p { color: var(--dvui-chrome-muted); font-size: 0.8125rem; }
#design-vocabulary .dvui-show-results {
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--dvui-accent);
  color: var(--dvui-strong-text);
  cursor: pointer;
}

#design-vocabulary .dvui-filter-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
}

#design-vocabulary .dvui-filter-head,
#design-vocabulary .dvui-list-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

#design-vocabulary .dvui-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  margin: 0;
  padding: 1rem 1.5rem;
}
#design-vocabulary .dvui-filter-head h2 { color: var(--dvui-chrome-text); font-size: 1.25rem; white-space: nowrap; }
#design-vocabulary .dvui-list-toolbar {
  align-items: end;
  margin-block-end: 1.25rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--dvui-line);
}
#design-vocabulary .dvui-list-toolbar h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; }
#design-vocabulary .dvui-clear,
#design-vocabulary .dvui-copy-button,
#design-vocabulary .dvui-favorite,
#design-vocabulary .dvui-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid var(--dvui-control-border);
  border-radius: 0.625rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  min-height: 2.75rem;
  background: var(--dvui-surface);
  color: var(--dvui-text);
  font-size: 0.875rem;
}

#design-vocabulary .dvui-clear {
  border-color: var(--dvui-chrome-line);
  background: var(--dvui-chrome-surface);
  color: var(--dvui-chrome-text);
}

#design-vocabulary .dvui-keyword-search {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 1.5rem;
}

#design-vocabulary .dvui-keyword-search label { color: var(--dvui-chrome-muted); font-size: 0.8125rem; font-weight: 600; }

#design-vocabulary .dvui-keyword-search input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid var(--dvui-chrome-line);
  border-radius: 0.5rem;
  padding-inline: 0.75rem;
  background: var(--dvui-chrome-surface);
  color: var(--dvui-chrome-text);
}

#design-vocabulary .dvui-keyword-search input::placeholder { color: var(--dvui-chrome-muted); }

#design-vocabulary .dvui-filter-group {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-block-start: 1px solid var(--dvui-chrome-line);
  overflow: hidden;
}

#design-vocabulary .dvui-filter-summary {
  font-size: 1rem;
  line-height: 1.5;
  min-height: 3rem;
  padding-block: 0.75rem;
  box-shadow: inset 0 -1px var(--dvui-chrome-line);
  background: var(--dvui-chrome);
}

#design-vocabulary .dvui-filter-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

#design-vocabulary .dvui-filter-label { color: var(--dvui-chrome-text); font-weight: 600; }
/* fieldsetを直接スクロールさせると、小分類間の余白上でホイールが反応しないため分離する。 */
#design-vocabulary .dvui-filter-fields {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 0 1rem;
  border: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  scroll-padding-block-start: 3rem;
}
#design-vocabulary .dvui-filter-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#design-vocabulary .dvui-filter-meta { color: var(--dvui-chrome-muted); font-size: 14px; white-space: nowrap; }
#design-vocabulary .dvui-options { display: grid; gap: 0.5rem; }

#design-vocabulary .dvui-option,
#design-vocabulary .dvui-favorites-only {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--dvui-chrome-line);
  border-radius: 0.5rem;
  background: var(--dvui-chrome-surface);
  cursor: pointer;
  line-break: strict;
  overflow-wrap: break-word;
  color: var(--dvui-chrome-text);
  transition: background 140ms ease, border-color 140ms ease;
}

#design-vocabulary .dvui-option:has(input:checked),
#design-vocabulary .dvui-favorites-only:has(input:checked) {
  border-color: #7d9aff;
  background: rgb(51 92 255 / 0.26);
  color: var(--dvui-chrome-text);
}

#design-vocabulary .dvui-option input,
#design-vocabulary .dvui-favorites-only input {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--dvui-selection);
}

#design-vocabulary .dvui-results {
  min-width: 0;
  padding: 1.75rem clamp(1.5rem, 4vw, 4rem) calc(6.5rem + env(safe-area-inset-bottom));
  background: var(--dvui-page);
}
#design-vocabulary .dvui-sort-wrap { display: grid; gap: 0.35rem; min-width: 9.5rem; }
#design-vocabulary .dvui-sort-label { color: var(--dvui-muted); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }

#design-vocabulary .dvui-sort-control {
  position: relative;
  display: block;
  color: var(--dvui-text);
}

#design-vocabulary .dvui-sort-control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

#design-vocabulary .dvui-sort-wrap select {
  width: 100%;
  border: 1px solid var(--dvui-control-border);
  border-radius: 0.5rem;
  padding-inline: 0.9rem 2.75rem;
  background: var(--dvui-surface);
  color: var(--dvui-text);
  cursor: pointer;
  appearance: none;
}

#design-vocabulary .dvui-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  column-gap: 1.5rem;
}

#design-vocabulary .dvui-more-controls {
  display: flex;
  justify-content: center;
}

#design-vocabulary .dvui-card {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 0;
  column-gap: 0.75rem;
  margin-block-end: 2.25rem;
  padding-block-end: 1rem;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--dvui-line);
  border-radius: 0.75rem;
  background: var(--dvui-surface);
  color: var(--dvui-text);
  box-shadow: 0 1px 3px light-dark(rgb(16 24 40 / 0.08), rgb(0 0 0 / 0.34));
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 180ms ease;
}

#design-vocabulary .dvui-card-link,
#design-vocabulary .dvui-card-link:visited { color: var(--dvui-text); text-decoration: none; }
#design-vocabulary .dvui-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
#design-vocabulary .dvui-card:has(.dvui-card-link:focus-visible) { outline: 2px solid var(--dvui-focus); outline-offset: 3px; }
#design-vocabulary .dvui-favorite { gap: 0.45rem; }
#design-vocabulary .dvui-favorite svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
#design-vocabulary .dvui-favorite[aria-pressed="true"] { color: var(--dvui-accent); border-color: var(--dvui-accent); }
#design-vocabulary .dvui-favorite[aria-pressed="true"] svg { fill: currentColor; }
#design-vocabulary .dvui-card .dvui-favorite {
  position: relative;
  z-index: 2;
  width: 2rem;
  min-height: 2rem;
  padding: 0.25rem 0.375rem;
  gap: 0.25rem;
  border-radius: 0.375rem;
  line-height: 1.2;
}
/* 見た目を小さくしても、周囲の透明な領域を含めて44px四方の操作範囲を保つ。 */
#design-vocabulary .dvui-card .dvui-favorite::after { content: ''; position: absolute; inset: -0.375rem; }
#design-vocabulary .dvui-card .dvui-favorite svg { width: 1rem; height: 1rem; }
#design-vocabulary .dvui-card .dvui-favorite-label { display: none; }
#design-vocabulary .dvui-favorites-filter { margin-block: 1.8rem 1.5rem; }
#design-vocabulary .dvui-favorites-only { font-size: 0.875rem; }
#design-vocabulary .dvui-favorites-status:empty { display: none; }
#design-vocabulary .dvui-favorites-status { position: fixed; inset-block-end: 6rem; inset-inline-start: 50%; transform: translateX(-50%); z-index: 1000; width: max-content; max-width: calc(100% - 2.5rem); padding: 0.8rem 1.2rem; border: 1px solid var(--dvui-control-border); border-radius: 0.75rem; background: var(--dvui-surface); box-shadow: 0 4px 20px rgb(0 0 0 / 0.15); color: var(--dvui-text); font-size: 0.875rem; }
#design-vocabulary .dvui-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
#design-vocabulary .dvui-favorite:disabled { display: none; }
#design-vocabulary .dvui-card > .dvui-board {
  grid-row: 1;
  grid-column: 1 / -1;
}
#design-vocabulary .dvui-card-en,
#design-vocabulary .dvui-detail-en { display: block; margin-block-start: 0.15rem; font-size: 14px; }
#design-vocabulary .dvui-card-en { grid-row: 3; grid-column: 1; min-width: 0; margin-inline-start: 1rem; overflow-wrap: anywhere; }
#design-vocabulary .dvui-card-description { line-break: strict; overflow-wrap: break-word; }

#design-vocabulary .dvui-card-description {
  grid-row: 4;
  grid-column: 1 / -1;
  margin-block-start: 0.65rem;
  margin-inline: 1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}

#design-vocabulary .dvui-card h4 {
  grid-row: 2;
  grid-column: 1;
  min-width: 0;
  margin-block-start: 0.9rem;
  margin-inline-start: 1rem;
  color: var(--dvui-text);
  text-decoration: none;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

#design-vocabulary .dvui-result-kind {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

#design-vocabulary .dvui-result-kind--near { background: var(--dvui-near); color: var(--dvui-near-text); }
#design-vocabulary .dvui-card-meta {
  display: inline-flex;
  grid-row: 2 / span 2;
  grid-column: 2;
  align-self: start;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.9rem;
  margin-inline-start: auto;
  margin-inline-end: 1rem;
}

@media (hover: hover) {
  #design-vocabulary .dvui-clear:hover,
  #design-vocabulary .dvui-copy-button:hover,
  #design-vocabulary .dvui-favorite:hover,
  #design-vocabulary .dvui-load-more:hover {
    background: var(--dvui-soft);
    color: var(--dvui-text);
  }

  #design-vocabulary .dvui-clear:hover {
    border-color: #52617b;
    background: #1c263b;
    color: var(--dvui-chrome-text);
  }

  #design-vocabulary .dvui-card:hover {
    border-color: var(--dvui-accent);
    box-shadow: 0 0.75rem 1.6rem light-dark(rgb(16 24 40 / 0.15), rgb(0 0 0 / 0.46));
    transform: scale(1.008);
  }


  #design-vocabulary :where(.dvui-back-link, .dvui-image-search, .dvui-source-link):hover { text-decoration-thickness: 3px; }

  #design-vocabulary .dvui-option:hover,
  #design-vocabulary .dvui-favorites-only:hover { border-color: #7d9aff; background: rgb(51 92 255 / 0.18); }

  #design-vocabulary .dvui-keyword-search input:hover,
  #design-vocabulary .dvui-sort-wrap select:hover { border-color: var(--dvui-accent); }
}

#design-vocabulary .dvui-card:active { transform: scale(0.997); }
#design-vocabulary .dvui-copy-button:active,
#design-vocabulary .dvui-load-more:active { background: var(--dvui-soft); color: var(--dvui-text); }
#design-vocabulary .dvui-clear:active { background: #222d45; color: var(--dvui-chrome-text); }
#design-vocabulary .dvui-sort-wrap select:active { background: var(--dvui-soft); }

#design-vocabulary .dvui-empty { padding-block: 2rem; text-align: center; }

#design-vocabulary .dvui-board {
  --dvboard-bg: light-dark(#f5f3ed, #f5f3ed);
  --dvboard-ink: light-dark(#20211f, #20211f);
  --dvboard-a: light-dark(#ce4437, #ce4437);
  --dvboard-b: light-dark(#1d4b76, #1d4b76);
  --dvboard-c: light-dark(#e1be4a, #e1be4a);
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dvboard-bg);
  color: var(--dvboard-ink);
}

#design-vocabulary .dvui-board-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#design-vocabulary .dvui-image-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 1.5rem;
  background: var(--dvui-soft);
  color: var(--dvui-muted);
  text-align: center;
  line-height: 1.6;
}

#design-vocabulary .dvui-image-placeholder > span { font-size: 1rem; font-weight: 600; }

#design-vocabulary .dvui-detail-page {
  width: min(76rem, 100%);
  margin-inline: auto;
  padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 6rem;
}

#design-vocabulary .dvui-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.75rem;
}

#design-vocabulary :where(.dvui-back-link, .dvui-image-search, .dvui-source-link) {
  color: var(--dvui-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

#design-vocabulary :where(.dvui-image-search, .dvui-source-link) {
  justify-self: start;
  line-height: 1.7;
}

#design-vocabulary :where(.dvui-back-link, .dvui-image-search, .dvui-source-link):visited { color: var(--dvui-accent); }
#design-vocabulary .dvui-detail-article { display: grid; gap: 3rem; margin-block-start: 1.75rem; }

#design-vocabulary .dvui-detail-hero {
  display: grid;
  grid-template-areas: "image heading";
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

#design-vocabulary .dvui-detail-board {
  grid-area: image;
  width: min(100%, 28rem);
  justify-self: center;
  min-width: 0;
  overflow: hidden;
}
#design-vocabulary .dvui-detail-board > .dvui-board,
#design-vocabulary .dvui-detail-board .dvui-image-placeholder { background: transparent; }

#design-vocabulary .dvui-detail-heading {
  grid-area: heading;
  min-width: 0;
  color: var(--dvui-text);
}
#design-vocabulary .dvui-detail-kicker { margin-block-end: 0.6rem; color: var(--dvui-accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; }
#design-vocabulary .dvui-detail-heading h2 {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  line-height: 1.4;
  letter-spacing: -0.025em;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
#design-vocabulary .dvui-detail-summary { max-width: 52rem; margin-block-start: 1rem; color: var(--dvui-muted); line-height: 1.8; }
#design-vocabulary .dvui-detail-heading .dvui-detail-en { margin-block-start: 0.5rem; color: var(--dvui-muted); overflow-wrap: anywhere; }

#design-vocabulary .dvui-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.7fr);
  gap: 1.5rem;
  align-items: start;
}

#design-vocabulary .dvui-detail-section {
  min-width: 0;
  border-block-start: 1px solid var(--dvui-line);
  padding-block-start: 1.25rem;
}

#design-vocabulary .dvui-detail-section h3 { margin-block-end: 0.65rem; }
#design-vocabulary .dvui-detail-section ul { margin: 0; padding-inline-start: 1.2rem; list-style: disc; }
#design-vocabulary .dvui-detail-section li + li { margin-block-start: 0.35rem; }
#design-vocabulary .dvui-color-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#design-vocabulary .dvui-color-item { display: grid; }
#design-vocabulary .dvui-color-target {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0.5rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
#design-vocabulary .dvui-color-target:focus-visible { background: var(--dvui-surface); }
@media (hover: hover) {
  #design-vocabulary .dvui-color-target:hover { background: var(--dvui-surface); }
}
#design-vocabulary .dvui-color-target:active { background: var(--dvui-soft); }
#design-vocabulary .dvui-color-list .dvui-color-item { margin: 0; }
#design-vocabulary .dvui-detail-section .dvui-color-list { padding: 0; list-style: none; }
#design-vocabulary .dvui-color-swatch {
  display: block;
  width: 2.75rem;
  aspect-ratio: 1;
  border: 1px solid var(--dvui-control-border);
  border-radius: 0.4rem;
}
#design-vocabulary .dvui-color-copy { display: grid; gap: 0.05rem; }
#design-vocabulary .dvui-color-code-line { display: flex; align-items: center; gap: 0.375rem; }
#design-vocabulary .dvui-color-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; }
#design-vocabulary .dvui-color-role { color: var(--dvui-muted); font-size: 0.875rem; }
#design-vocabulary .dvui-color-copy-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--dvui-muted); }
#design-vocabulary .dvui-palette-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block-start: 1rem;
}
#design-vocabulary .dvui-palette-actions .dvui-copy-button { min-width: 13em; }
#design-vocabulary .dvui-palette-actions small { color: var(--dvui-muted); font-size: 0.875rem; }
#design-vocabulary .dvui-prompt-box {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--dvui-control-border);
  border-radius: 0.75rem;
  background: var(--dvui-soft);
}
#design-vocabulary .dvui-prompt-example {
  line-height: 1.8;
}
#design-vocabulary .dvui-copy-button {
  justify-self: end;
  background: var(--dvui-surface);
}
#design-vocabulary .dvui-detail-section .dvui-source-list { display: grid; gap: 1rem; padding: 0; list-style: none; }
#design-vocabulary .dvui-source-list li { display: grid; gap: 0.15rem; }
#design-vocabulary .dvui-source-list li + li { margin-block-start: 0; }
#design-vocabulary .dvui-source-list small { color: var(--dvui-muted); }
#design-vocabulary .dvui-detail-actions { display: grid; justify-items: start; gap: 0.25rem; }

#design-vocabulary .dvui-filter-trigger {
  display: none;
  position: fixed;
  z-index: 15;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: auto;
  min-height: 3.5rem;
  margin: 0;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 999px;
  padding: 0.75rem 1rem;
  background: var(--dvui-accent);
  color: #fff;
  box-shadow: 0 0.75rem 2rem rgb(7 10 18 / 0.28);
  cursor: pointer;
  transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

#design-vocabulary .dvui-filter-trigger[aria-expanded="true"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
}

#design-vocabulary .dvui-filter-trigger-icon {
  display: grid;
  flex: 0 0 1.25rem;
  width: 1.25rem;
  place-items: center;
}

#design-vocabulary .dvui-filter-trigger-icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

#design-vocabulary .dvui-filter-trigger-label { font-weight: 650; }
#design-vocabulary .dvui-filter-trigger-count {
  padding-inline-start: 0.625rem;
  border-inline-start: 1px solid rgb(255 255 255 / 0.32);
  color: rgb(255 255 255 / 0.82);
  font-size: 0.875rem;
  white-space: nowrap;
}

#design-vocabulary .dvui-filter-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--dvui-chrome-line);
  border-radius: 0.625rem;
  background: var(--dvui-chrome-surface);
  color: var(--dvui-chrome-text);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 980px) {
  #design-vocabulary .dvui-layout { display: block; }
  #design-vocabulary .dvui-sidebar { display: none; }
  #design-vocabulary .dvui-filter-trigger { display: flex; }
  #design-vocabulary .dvui-quick-filters { display: block; }
  #design-vocabulary .dvui-detail-hero {
    grid-template-areas: "heading" "image" "summary";
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  #design-vocabulary .dvui-detail-heading { display: contents; }
  #design-vocabulary .dvui-detail-title { grid-area: heading; }
  #design-vocabulary .dvui-detail-kicker { display: none; }
  #design-vocabulary .dvui-detail-summary { grid-area: summary; margin-block-start: 0; }
  #design-vocabulary .dvui-detail-grid { grid-template-columns: 1fr; }
  #design-vocabulary .dvui-filter-dialog { width: calc(100vw - 1rem); height: auto; max-height: calc(100dvh - 1rem); border-radius: 0.75rem; }
  #design-vocabulary .dvui-filters { display: block; flex: 0 1 auto; padding: 0 1rem 1rem; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; scroll-padding-block-start: 6rem; }
  #design-vocabulary .dvui-filter-groups { display: block; }
  #design-vocabulary .dvui-filter-group { display: block; overflow: visible; }
  #design-vocabulary .dvui-filter-group + .dvui-filter-group { margin-block-start: 1rem; }
  #design-vocabulary .dvui-filter-summary { position: sticky; inset-block-start: 0; z-index: 2; }
  /* カテゴリー見出しの1行分と上下余白（計3rem）の下に小見出しを置く。 */
  #design-vocabulary .dvui-filter-section h4 { inset-block-start: 3rem; }
  #design-vocabulary .dvui-filter-fields { overflow: visible; scrollbar-gutter: auto; }
  #design-vocabulary .dvui-filter-head,
  #design-vocabulary .dvui-filter-footer { padding: 1rem; }
  #design-vocabulary .dvui-favorites-filter { margin-block: 0 1rem; }
  #design-vocabulary .dvui-filter-footer p { display: none; }
  #design-vocabulary .dvui-show-results { width: 100%; }
}

@media (max-width: 620px) {
  #design-vocabulary .dvui-topbar,
  #design-vocabulary .dvui-list-toolbar { align-items: stretch; flex-direction: column; }
  #design-vocabulary .dvui-prototype-note { display: none; }
  #design-vocabulary .dvui-topbar { gap: 0; min-height: 0; padding-block: 1.5rem; }
  #design-vocabulary .dvui-brand h1 { font-size: 2.125rem; line-height: 1.18; }
  #design-vocabulary .dvui-results { padding: 1.5rem 1.25rem calc(6.5rem + env(safe-area-inset-bottom)); }
  #design-vocabulary .dvui-sort-wrap { width: 100%; }
  #design-vocabulary .dvui-detail-page { padding: 2rem 1.25rem 4rem; }
  #design-vocabulary[data-page="style"] .dvui-topbar { padding: 0.75rem 1.25rem; }
  #design-vocabulary[data-page="style"] .dvui-brand h1 { font-size: 1.25rem; line-height: 1.35; }
  #design-vocabulary[data-page="style"] .dvui-brand-eyebrow,
  #design-vocabulary[data-page="style"] .dvui-brand-lead { display: none; }
  #design-vocabulary[data-page="style"] .dvui-detail-page { padding-block-start: 1rem; }
  #design-vocabulary[data-page="style"] .dvui-detail-article { margin-block-start: 0.75rem; }
}

@media (forced-colors: active) {
  #design-vocabulary .dvui-filter-dialog,
  #design-vocabulary .dvui-card,
  #design-vocabulary .dvui-detail-board,
  #design-vocabulary .dvui-sort-wrap select,
  #design-vocabulary .dvui-keyword-search input,
  #design-vocabulary .dvui-clear,
  #design-vocabulary .dvui-copy-button {
    border-color: CanvasText;
    box-shadow: none;
  }

  #design-vocabulary :where(button, select, input, a, summary):focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

#design-vocabulary .dvui-filter-trigger:disabled { display: none; }
#design-vocabulary [disabled] { cursor: default; }
#design-vocabulary .dvui-search-error { padding-block: 1rem; color: var(--dvui-muted); }