/* Hallmark · studied-DNA: vibeprompts.dev · sidebar catalog · Archivo / Inter / JetBrains Mono
 * pre-emit critique: P5 H5 E4 S5 R5 V4. Source geometry and neutral palette preserved. */
:root {
  --font-zh: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --focus: var(--ink);
  --language-shadow: color-mix(in srgb, var(--ink) 4%, transparent);
  --sidebar-paper: color-mix(in srgb, var(--paper) 60%, var(--card));
}
html, body { overflow-x: clip; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button:active { transform: translateY(1px); }
.hero-title, .detail-title, .name { overflow-wrap: anywhere; min-width: 0; }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.card { min-width: 0; }
.site-foot .foot-copy { display: block; }
.view-code, .source-btn, .size, .code-tab, .related-all { white-space: nowrap; }
.language-control { display: flex; align-items: center; gap: 8px; margin: 24px 8px 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 12px; }
.language-control > svg { width: 16px; height: 16px; flex-shrink: 0; }
.language-control > span { flex: 1; }
.language-options { display: flex; align-items: center; gap: 3px; padding: 3px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; }
.language-options button { min-width: 39px; height: 28px; padding: 0 8px; color: var(--ink-faint); border-radius: 5px; font-size: 11px; font-weight: 500; white-space: nowrap; transition: color 150ms, background 150ms; }
.language-options button:hover { color: var(--ink); }
.language-options button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--language-shadow); }
@media (min-width: 861px) {
  .side-brand, .side-search, .language-control { flex-shrink: 0; }
  .side-nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .language-control { margin-top: 14px; padding-block: 14px 4px; background: var(--sidebar-paper); }
}
.app.side-collapsed .language-control { margin-inline: 0; justify-content: center; }
.app.side-collapsed .language-control > svg, .app.side-collapsed .language-control > span { display: none; }
.app.side-collapsed .language-options { flex-direction: column; }
.translation-note { font-size: 12px; color: var(--ink-faint); margin-top: 12px; line-height: 1.65; }
.translation-note:empty { display: none; }
.prompt-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.prompt-copy { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-dim); font-size: 12px; white-space: nowrap; transition: color 150ms, border-color 150ms, background 150ms; }
.prompt-copy svg { width: 15px; height: 15px; }
.prompt-copy:hover { color: var(--ink); border-color: var(--line-2); background: var(--paper); }
.prompt-copy.copied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.prompt-copy:disabled { cursor: wait; opacity: .65; }
@media (pointer: coarse) { .prompt-copy { min-height: 44px; } }
.reset-search { margin-top: 18px; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 16px; font-size: 13px; background: var(--card); }
.reset-search:hover { background: var(--paper-2); }
.code-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.code-body pre[data-lang="html"] { white-space: pre; overflow-wrap: normal; }
.code-tabs { overflow-x: auto; }
.code-modal-content .code-panel { min-width: 0; }
.code-modal-title { overflow-wrap: anywhere; }
html[lang="zh-CN"] body { font-family: var(--font-body), var(--font-zh); }
html[lang="zh-CN"] .hero-title { font-family: var(--font-display), var(--font-zh); font-size: clamp(34px, 5.1vw, 66px); line-height: 1.12; letter-spacing: -.035em; }
html[lang="zh-CN"] .hero-sub { line-height: 1.85; }
html[lang="zh-CN"] .detail-title { line-height: 1.3; }
html[lang="zh-CN"] .eyebrow { letter-spacing: .1em; }
html[lang="zh-CN"] .card-foot .desc { line-height: 1.6; }
@media (max-width: 860px) {
  .sidebar { position: relative; }
  .side-brand { padding-right: 90px; }
  .language-control { position: absolute; right: 65px; top: 26px; margin: 0; padding: 0; border: 0; }
  .language-control > svg, .language-control > span { display: none; }
  .side-burger { position: absolute; right: 26px; top: 28px; }
  .language-options button { min-width: 34px; padding-inline: 5px; }
  .app.side-collapsed { --rail-w: 0px; }
  .app.side-collapsed .sidebar { width: 100%; padding: 22px 18px; }
  .app.side-collapsed .brand-name, .app.side-collapsed .side-search, .app.side-collapsed .cat-name, .app.side-collapsed .cat-count { display: revert; }
  .app.side-collapsed .side-search { display: flex; }
  .app.side-collapsed .side-brand { padding: 6px 90px 4px 8px; margin-bottom: 18px; }
  .app.side-collapsed .cat { justify-content: space-between; padding: 10px 12px; }
  .app.side-collapsed .cat-ico { display: none; }
  .app.side-collapsed .language-options { flex-direction: row; }
  .code-modal-dialog { max-width: calc(100vw - 24px); }
  .side-burger, .language-options button { min-height: 34px; }
}
@media (max-width: 380px) {
  .brand-name { font-size: 15px; }
  .side-brand { gap: 7px; padding-left: 0; }
  .brand-home { gap: 8px; }
  .language-control { right: 60px; }
  .side-burger { right: 18px; }
  .hero, .results { padding-inline: 18px; }
  .hero-title { font-size: 36px; }
  .code-tab { padding-inline: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}