/* with icons: demos hub (site/demos/index.html, generated by demos/_tools/build-hub.mjs). Site tokens only, light + dark. */

.pg-demos { --g: var(--c-duo); --gt: var(--c-duo-text); --gs: var(--c-duo-soft); --go: var(--c-duo-on); }
.dm-fine { color: var(--muted); font-size: var(--step--1); margin: 14px 0 0; max-width: 62ch; }
.pg main > .dm > section + section { margin-top: clamp(40px, 6vw, 72px); }

.dm-how ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.dm-how li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-l); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; color: var(--ink-2); }
.dm-how li svg { grid-row: span 2; color: var(--gt); }
.dm-how b { color: var(--ink); }
.dm-how li span { font-size: var(--step--1); }

.dm-list h2, .dm-keys h2 { font: 800 var(--step-3)/1.05 var(--font-display); letter-spacing: -.03em; margin: 0 0 16px; color: var(--ink); }
.dm-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; }
.dm-filters button { font: 600 var(--step--1) var(--font-sans); display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 15px; cursor: pointer; }
.dm-filters button:hover { border-color: var(--ink); }
.dm-filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dm-filters button:focus-visible, .dm-card a:focus-visible { outline: 2px solid var(--focus-ring, var(--ink)); outline-offset: 2px; }
.dm-count { margin-left: auto; color: var(--muted); font-size: var(--step--1); }

.dm-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.dm-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-xl, 22px); overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--e-out, ease), box-shadow .25s; }
.dm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.dm-card[hidden] { display: none; }
.dm-shot { position: relative; display: block; aspect-ratio: 8 / 5; background: var(--paper-2); overflow: hidden; }
.dm-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.dm-ph { display: block; width: 100%; height: 100%; background: color-mix(in srgb, var(--g) 18%, var(--paper-2)); }
.dm-num { position: absolute; left: 12px; top: 12px; font: 700 13px var(--font-display); background: var(--card); color: var(--ink); border-radius: 999px; padding: 3px 10px; }
.dm-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dm-body p { margin: 0; }
.dm-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dm-tag { display: inline-flex; gap: 6px; align-items: center; font: 600 12px var(--font-sans); background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule); border-radius: 999px; padding: 3px 10px 3px 7px; }
.dm-card h3 { font: 800 var(--step-1)/1.15 var(--font-display); letter-spacing: -.02em; margin: 4px 0 0; }
.pg main .dm-card h3 a { color: var(--ink); text-decoration: none; }
.pg main .dm-card h3 a:hover { text-decoration: underline; }
.dm-tl { color: var(--muted); font-size: var(--step--1); }
.dm-meta, .dm-style { display: flex; gap: 8px; align-items: center; font-size: var(--step--1); color: var(--ink-2); }
.dm-style { color: var(--muted); }
.dm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g); flex: none; }
.dm-lv { display: flex; gap: 6px; margin-top: auto !important; padding-top: 10px; }
.pg main .dm-lv a { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: 6px; text-decoration: none; font: 600 13px var(--font-sans); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: var(--radius-s, 12px); padding: 9px 6px; }
.pg main .dm-lv a:hover { background: var(--paper-2); }
.pg main .dm-lv a.go { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Animated demos (demos.json "motion": true): own section after the main grid */
.dm-anim { background: color-mix(in srgb, var(--gs, var(--paper-2)) 55%, var(--paper)); border: 1px solid var(--rule); border-radius: var(--radius-xl, 22px); padding: clamp(18px, 3vw, 32px); }
.dm-intro { color: var(--ink-2); max-width: 68ch; margin: 0 0 20px; }
.dm-tag.dm-motion { background: var(--g); color: var(--go); border-color: transparent; }
.dm-tag.dm-motion svg { color: currentColor; }

.dm-keys { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dm-keys h2 { grid-column: 1 / -1; margin: 0; }
.dm-keys > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-l); padding: 18px 20px; color: var(--ink-2); }
.dm-keys p { margin: 0 0 6px; }
.dm-keys ul { margin: 0; padding-left: 18px; }
.dm-keys li { margin: 4px 0; }
.dm-keys kbd { font: 600 12px var(--font-mono); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.pg-demos main > .dm { padding-bottom: clamp(48px, 8vw, 96px); }

@media (prefers-reduced-motion: reduce) { .dm-card { transition: none; } .dm-card:hover { transform: none; } }