#ceu-catalog {
  width: min(1040px, calc(100vw - 54px));
  height: min(810px, 90vh);
  height: min(810px, 90dvh);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 27px 32px 16px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #87988a;
  border-radius: 7px;
  box-shadow: 0 20px 80px #0004;
  font: 16px/1.55 var(--sans);
}

#ceu-catalog[open] { display: flex; flex-direction: column; }
#ceu-catalog::backdrop { background: #071b16bd; backdrop-filter: blur(3px); }
.ceu-heading { display: flex; flex: none; align-items: start; justify-content: space-between; gap: 18px; }
.ceu-kicker, .ceu-nav-title, .ceu-group-label { color: var(--accent); font-size: 13px; font-weight: 700; }
.ceu-kicker { letter-spacing: .06em; }
#ceu-heading { margin: 3px 0 4px; font: 700 clamp(27px, 3vw, 40px)/1.28 var(--serif); letter-spacing: -.04em; }
.ceu-close { padding: 5px 11px; border: 1px solid #9aab9e; border-radius: 3px; white-space: nowrap; font-size: 14px; }
.ceu-intro { flex: none; margin: 4px 0 18px; max-width: 85ch; color: var(--muted); }
.ceu-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 26px; padding-top: 18px; border-top: 1px solid var(--ink); }
.ceu-nav { min-width: 0; overflow: auto; overscroll-behavior: contain; }
.ceu-nav-title { padding: 3px 8px 9px 0; }
.ceu-nav-list { display: grid; gap: 1px; }
.ceu-nav-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 10px; width: 100%; text-align: left; font-size: 15px; border-bottom: 1px solid var(--rule); }
.ceu-nav-list button small { color: var(--muted); font: 14px Georgia, serif; }
.ceu-nav-list button[aria-pressed=true] { box-shadow: inset 3px 0 var(--accent); background: var(--soft); color: var(--accent); font-weight: 700; }
.ceu-nav-list button:hover { background-color: #e9ede2; }
.ceu-nav-list button:focus-visible { outline-offset: -3px; }
.ceu-group-label { display: none; }
.ceu-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ceu-search { display: flex; flex: none; gap: 10px; align-items: center; padding: 7px 12px; border: 1px solid #98a99b; border-radius: 4px; background: #fdfcf7; font-size: 14px; color: var(--accent); font-weight: 700; }
.ceu-search > span { flex: none; white-space: nowrap; }
.ceu-search input { flex: 1; color: var(--ink); min-width: 0; border: 0; background: transparent; font: 16px/1.55 var(--sans); outline: none; }
.ceu-search:focus-within, .ceu-group:focus-visible, .ceu-scroll:focus-visible { outline: 2px solid #ad6c22; outline-offset: -2px; }
.ceu-search input::placeholder { color: #68756b; }
.ceu-status { flex: none; padding: 9px 0; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ceu-scroll { flex: 1; min-height: 0; padding-right: 7px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--rule); scrollbar-color: #a8b4a5 transparent; }
.ceu-items { list-style: none; padding: 0; margin: 0; }
.ceu-items li { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 12px; padding: 13px 0 14px; border-bottom: 1px solid var(--rule); }
.ceu-number { margin-top: 1px; font: italic 21px/1.35 Georgia, serif; color: var(--accent); }
.ceu-item-title { display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline; }
.ceu-item-title h3 { font: 700 19px/1.4 var(--sans); color: var(--ink); letter-spacing: 0; }
.ceu-item-title span { font-size: 12px; color: var(--muted); }
.ceu-items p { margin: 3px 0; font-size: 16px; line-height: 1.55; }
.ceu-items code { display: block; color: var(--muted); font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.ceu-empty { color: var(--muted); padding: 25px 3px; }
.ceu-empty button { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ceu-source { flex: none; margin-top: 13px; padding-top: 9px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; line-height: 1.5; }

@media (max-width: 690px) {
  #ceu-catalog { width: calc(100vw - 16px); height: 95vh; height: 95dvh; padding: 16px 15px 12px; }
  .ceu-kicker { font-size: 12px; }
  .ceu-intro { margin: 5px 0 11px; font-size: 14px; }
  .ceu-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
  .ceu-nav { flex: none; overflow: visible; }
  .ceu-nav-title, .ceu-nav-list { display: none; }
  .ceu-group-label { display: flex; gap: 10px; align-items: center; }
  .ceu-group { flex: 1; min-width: 0; font: 16px/1.4 var(--sans); color: var(--ink); background: #fdfcf7; padding: 5px 6px; border: 1px solid #98a99b; border-radius: 3px; }
  .ceu-main { flex: 1; }
  .ceu-scroll { padding-right: 3px; }
  .ceu-items li { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; }
  .ceu-item-title h3 { font-size: 18px; }
  .ceu-source { margin-top: 8px; padding-top: 6px; font-size: 11px; }
}

@media (max-height: 530px) {
  #ceu-catalog { height: calc(100vh - 12px); height: calc(100dvh - 12px); padding: 10px 16px; }
  .ceu-kicker { display: none; }
  #ceu-heading { font-size: 24px; margin: 0; }
  .ceu-intro { font-size: 13px; line-height: 1.4; margin: 4px 0 8px; }
  .ceu-body { padding-top: 7px; gap: 8px; }
  .ceu-source { margin-top: 5px; padding-top: 4px; }
}

@media print { #ceu-catalog[open] { display: none !important; } }