/* Dougu's own part of the demo: the stage, the sliders and the gallery. family.css is the shared look. */
.controls { padding-bottom: 10px; }
.note { color: var(--muted); font-size: .9rem; border-top: 1px solid var(--rule); padding-top: 12px; }
.stage { border-top: 1px solid var(--rule); padding: 24px 12px; display: grid; justify-items: center; align-items: center; min-height: 320px; overflow-x: auto; color: var(--ink); }
.stage[data-look="light"] { background: #ffffff; color: #20262d; }
.stage[data-look="dark"] { background: #14181c; color: #eef1f3; }
.stage svg { display: block; max-width: 100%; height: auto; }
select.fam-field { max-width: 100%; min-width: 14rem; height: 44px; -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.range { flex: 1 1 10rem; min-width: 8rem; height: 44px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--rule); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rule); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--felt); border: 2px solid var(--surface); }
.range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--felt); border: 2px solid var(--surface); }
.range:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
output { min-width: 3.5rem; font-variant-numeric: tabular-nums; color: var(--muted); }
details { margin: 10px 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
summary { cursor: pointer; padding: 12px 14px; min-height: 44px; font-weight: 600; }
details > pre { margin: 0; padding: 0 14px 14px; overflow-x: auto; font-family: var(--mono); font-size: .8rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cards li { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 12px; }
.cards h3 { margin: 0 0 2px; font-size: 1rem; }
.cards h3 span { color: var(--muted); font-weight: 500; font-size: .85rem; margin-left: 6px; }
.cards p { margin: 0 0 8px; font-size: .8rem; }
.cards p.about { color: var(--muted); }
.cards .styles, .cards .turns { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.cards .engraved small { font-size: .8rem; align-self: center; font-family: ui-monospace, monospace; }
.cards .turns { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.cards figure { margin: 0; text-align: center; font-size: .75rem; color: var(--muted); }
.cards svg { display: block; margin: 0 auto 2px; }
.credits { margin-top: 12px; }
.finder { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.finder .fam-field { flex: 1 1 14rem; min-height: 44px; }
.finder .count { margin: 0; color: var(--muted); font-size: .85rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 22px; color: var(--ink); text-decoration: none; background: var(--surface); }
.chips a span { color: var(--muted); margin-left: 6px; font-size: .8rem; }
.cards .copies { display: flex; gap: 8px; margin: 10px 0 0; }
.cards .copies button { min-height: 44px; }
.cards li[hidden], #sections section[hidden] { display: none; }
.stage:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.stage { cursor: grab; }
.hint { margin-top: 0; }
.fam-button.play, .case-play { min-height: 44px; min-width: 44px; }
.play .when-on, .play .when-off, .case-play .when-on, .case-play .when-off { display: none; }
.play[aria-pressed="false"] .when-off, .play[aria-pressed="true"] .when-on, .case-play[aria-pressed="false"] .when-off, .case-play[aria-pressed="true"] .when-on { display: inline; }
.case { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.case li { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 12px; display: grid; justify-items: center; gap: 8px; }
.case-stage { min-height: 100px; display: grid; align-items: center; justify-items: center; color: var(--ink); }
.case-stage:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.case-stage svg { display: block; }
.compose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.compose-card { border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); padding: 12px; min-width: 0; }
.compose-card h3 { margin: 0 0 8px; font-size: 1rem; }
.compose-card .art { color: var(--ink); display: grid; justify-items: center; overflow-x: auto; }
.compose-card .art[data-look="light"] { background: #ffffff; color: #20262d; }
.compose-card .art[data-look="dark"] { background: #14181c; color: #eef1f3; }
.compose-card .art svg { max-width: 100%; height: auto; }
.compose-card pre { margin: 8px 0; padding: 8px; overflow-x: auto; font-family: var(--mono); font-size: .75rem; border: 1px solid var(--rule); border-radius: 8px; }
.compose-card .copies { margin: 8px 0 0; }
.compose-card .copy { min-height: 44px; }
.sprite-grid { display: flex; flex-wrap: wrap; gap: 4px; line-height: 0; }
.sprite-stats { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }
.compose-card img.uri { display: block; margin: 0 auto; }
.compose-card .backdrop { width: 96px; height: 96px; background-size: contain; background-repeat: no-repeat; background-position: center; margin: 0 auto; }