/* Original film-library appearance, with the expanded catalogue controls. */
:root {
  --v2-ink: #17243a;
  --v2-muted: #697386;
  --v2-line: #b8bdc5;
  --v2-paper: #f6f2e9;
  --v2-sage: #f1e5c5;
}
body {
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(23,36,58,.1) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
article:focus-visible, summary:focus-visible { outline-color: #ad7b1f; }
.sidebar { color: #f8f6f0; background: #17243a; border-right: 0; }
.brand { border: 1px solid #ffffff59; background: #ffffff0f; box-shadow: none; }
.brand-dot { background: var(--yellow); border-color: #fff; }
.side-link:hover, .side-link.is-active { color: var(--ink); border-color: var(--yellow); background: var(--yellow); }
.save-pocket { color: var(--ink); background: #fff; }
.top-rule { height: 9px; background: var(--pink); }
.masthead { min-height: 224px; padding: 38px 1vw 28px; gap: 30px; border-bottom: 1px solid #17243a47; }
.masthead h1 { font: 900 clamp(38px, 5.2vw, 72px)/.96 "Arial Black", "Hiragino Sans", sans-serif; letter-spacing: -.065em; color: var(--ink); }
.masthead-note { min-width: 185px; max-width: 240px; padding: 18px 20px; }
.masthead-note p { color: var(--ink); font-size: 11px; }
.masthead-note small { display: block; color: var(--muted); font-size: 9px; line-height: 1.7; }
.scribble { color: #33445f; font: 800 10px/1 ui-monospace, monospace; letter-spacing: .14em; border: 0; }
.category-tabs { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; margin: 0 0 20px; padding: 2px 0 10px; }
.category-tab { flex: 0 0 auto; display: inline-flex; gap: 8px; padding: 11px 17px; font-size: 12px; font-weight: 800; line-height: 1.4; white-space: nowrap; border: 1px solid #9ca5b2; border-radius: 999px; background: #ffffffb8; color: var(--ink); }
.category-tab[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--yellow); }
.category-tab:hover { color: var(--ink); background: var(--pink-soft); }
.discovery { padding: 16px 18px; margin-bottom: 20px; border: 0; border-radius: 18px; background: #ffffffd6; box-shadow: var(--shadow); }
.discovery h2 { margin: 0 0 10px; font-size: 13px; }
.discovery .search-box { height: 48px; border: 1px solid #aeb5bf; border-radius: 11px; background: #fff; }
.discovery .search-box input { font-size: 13px; }
.search-examples { margin-top: 7px; }
.search-examples button { color: #44516a; }
.v2-filters select { border-radius: 8px; color: var(--ink); }
#impressionChips button { color: var(--ink); }
#impressionChips button::before { color: #997730; }
#impressionChips button[aria-pressed="true"] { background: var(--pink-soft); border-color: #b4934a; }
.filter-chip { border-color: #9ca5b2; }
.filter-chip.is-active { color: #fff; border-color: var(--ink); background: var(--ink); }
.sample-panel { border: 1px solid #d7c698; border-radius: 14px; background: #f6edd7; }
.sample-panel input { border-color: #b4aa8e; border-radius: 8px; }
.sample-panel .sample-note { color: #696145; }
#pauseMotion { color: var(--ink); border-color: transparent; border-radius: 999px; }
.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card-grid .motion-card { aspect-ratio: auto; border: 1px solid #17243a57; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px #17243a0f; }
.card-grid .motion-card:hover, .card-grid .motion-card:focus-within { border-color: #17243a57; transform: translateY(-5px); box-shadow: 0 18px 34px #17243a2e; }
.card-grid .motion-card::after { display: block; height: 5px; background: var(--pink); }
.card-grid .preview { height: auto; aspect-ratio: 16/11; border-bottom: 1px solid #17243a40; background-color: #f9faf7; }
.card-grid [data-media-mode="B"] .preview, .card-grid [data-media-mode="C"] .preview { aspect-ratio: 16/9; }
.card-grid .card-info { height: auto; min-height: 104px; padding: 9px 10px 12px; background: #fff; }
.card-grid .card-info p { font-size: 12px; font-weight: 900; line-height: 1.4; min-height: 2.8em; margin: 3px 0; padding: 0; }
.card-grid .card-info small { color: var(--muted); font-size: 9px; line-height: 1.5; margin: 3px 0; padding: 0; }
.card-grid .card-info .v2-category, .card-grid .card-info .card-explanation { display: none; }
.card-grid .card-info .english-name { font-family: ui-monospace, monospace; }
.card-save { border: 1px solid #17243a66; border-radius: 50%; color: var(--ink); }
.card-save.is-saved { background: var(--yellow); }
.card-id { color: var(--muted); font-size: 8px; }
.compare-pick { color: var(--ink); border-color: #b5bac1; border-radius: 999px; font-size: 8px; padding: 5px 6px; }
.compare-pick.is-picked { background: var(--ink); border-color: var(--ink); }
.card-prompt-actions { margin-top: 8px; gap: 3px 6px; }
.card-prompt-actions button { padding: 5px 6px; font-size: 9px; color: var(--ink); border-color: #c6c9cd; border-radius: 6px; background: #f6f2e9; }
.card-prompt-actions button:hover { background: var(--pink-soft); }
.card-prompt-actions .card-open { padding: 5px 0; }
.card-grid .motion-text, .card-grid .caption-line { font-size: 20px; }
.card-grid .font-sample { font-size: 26px; }
.preview .motion-scene, .preview .caption-scene { background: #fff; }
/* The border follows the text box; padding keeps every edge clear of glyphs. */
.m-draw-box, .m-box-blink { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
.motion-frame { position: relative; display: block; width: max-content; min-width: 0; max-width: 86%; box-sizing: border-box; padding: clamp(8px, 4cqw, 16px) clamp(10px, 5cqw, 20px); }
.motion-frame .motion-decor { inset: 0; }
.preview .motion-frame .motion-text { display: block; min-width: 0; max-width: 100%; margin: 0; font-size: clamp(10px, 6cqw, 24px); line-height: 1.4; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.media-specimen, .browser-fx { background: #edf0f2; }
.media-specimen figcaption { color: #384459; font-size: 8px; }
.results-end { min-height: 90px; display: grid; place-items: center; padding: 24px 0; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.8; }
.results-end[data-complete="true"] { color: var(--ink); }
.results-end p { margin: 0; }
.comparison-tray { background: #fffdf7; border-color: #baa163; border-radius: 14px; box-shadow: 0 5px 30px #17243a30; }
.comparison-tray button { border-color: var(--ink); background: var(--ink); border-radius: 8px; }
.comparison-tray #clearComparison { color: var(--ink); }
.comparison-dialog { color: var(--ink); background: var(--paper); border: 0; border-radius: 20px; }
.comparison-dialog button, .difference-block button { color: var(--ink); border-color: #b8bdc5; border-radius: 8px; }
#comparisonNote { color: var(--muted); }
#comparisonGrid article { border-color: #c6c9cd; border-radius: 12px; }
.compare-difference, .difference-block { background: #f1e5c5; border-radius: 10px; }
#relatedItems .related-compare { color: var(--ink); background: var(--pink-soft); }
.type-intro h2, .font-intro h2 { color: var(--ink); }
.availability-note { border-color: #d4c9ac; border-radius: 12px; background: #faf6ec; }
.availability-note p { color: #655d47; }
.availability-note button { color: var(--ink); border-color: #b5a372; border-radius: 8px; }
@media (max-width: 1100px) { .masthead-note { display: none; } }
@media (max-width: 1000px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sidebar { border-bottom: 0; gap: 12px; }
  .side-link { width: auto; }
  .side-link span:not(.side-icon) { display: inline; }
  .brand { width: auto; }
  .brand-mark { font-size: 16px; }
  .masthead { min-height: 170px; padding: 30px 0 24px; }
  .masthead h1 { font-size: clamp(30px, 5.8vw, 42px); line-height: 1.08; }
  .top-rule { height: 5px; }
  .category-tabs { gap: 6px; margin-bottom: 12px; }
  .category-tab { padding: 9px 12px; font-size: 10px; }
  .discovery { padding: 14px; }
  .discovery h2 { font-size: 13px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card-grid .motion-text, .card-grid .caption-line { font-size: 16px; }
  .card-grid .font-sample { font-size: 22px; }
  .card-grid .card-info { padding: 8px 9px 12px; }
  .result-bar p:last-child { max-width: none; }
  .speed-control { border-radius: 16px; }
  .comparison-tray { left: 50%; }
}
@media (max-width: 400px) { .side-link .side-count { display: none; } .sidebar { padding: 10px; gap: 8px; } }
@media (max-width: 480px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .card-grid .motion-card:hover, .card-grid .motion-card:focus-within { transform: none; } }