
.demo-grid{align-items:start}.demo{padding:24px!important;display:block!important;min-width:0}.demo[hidden]{display:none!important}.demo h3{margin:0 0 12px}.demo-tags{gap:6px 12px;margin-bottom:18px}.demo .tag{padding:0;background:none;color:#526c7c;font-size:11px;line-height:1.6;letter-spacing:.06em}.jhn-player{border-top:1px solid #aab7c0;padding-top:16px;margin-top:16px}.jhn-player [hidden]{display:none!important}.jhn-controls{display:flex;align-items:center;gap:14px}.jhn-play{flex:0 0 48px;width:48px;height:48px;border:0;border-radius:50%;background:#960001;color:white;font-size:20px;cursor:pointer}.jhn-track{flex:1;min-width:0}.jhn-seek{display:block;width:100%;height:28px;accent-color:#960001;margin:0;cursor:pointer}.jhn-time{display:block;font:12px/1.4 Arial,sans-serif;color:#425664;font-variant-numeric:tabular-nums}.jhn-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:0 12px;margin-top:8px}.jhn-copy{min-height:44px;padding:0;background:none;border:0;color:#344f64;font:700 13px/1.4 Arial,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.jhn-status{font:12px/1.4 Arial,sans-serif;color:#425664}.jhn-copy-fallback{width:100%;padding:10px;font:13px Arial,sans-serif}.jhn-player audio{width:100%}.demo-feature .main{min-width:0}.jhn-play:focus-visible,.jhn-seek:focus-visible,.jhn-copy:focus-visible{outline:3px solid #193a56;outline-offset:4px}.jhn-play:disabled{opacity:.6;cursor:wait}@media(max-width:600px){.demo{padding:20px!important}.jhn-controls{gap:12px}}

.demo{min-height:0!important;height:auto!important}.jhn-bottom{min-height:44px}

.demo-tags{gap:4px 0}.demo-tags .tag+.tag::before{content:"•";display:inline-block;margin:0 9px;color:#718497}

/* Approved reference: outlined circle glyph in a rounded red square; neutral seek. */
.jhn-play{border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0;background:#960001;color:#fff}
.jhn-play svg{display:block;width:26px;height:26px;pointer-events:none}
.jhn-seek{accent-color:#526c7c}
.jhn-seek::-webkit-slider-thumb{accent-color:#526c7c}

/* Square red control, white icon. */
.jhn-play{width:48px;height:48px;flex:0 0 48px;border-radius:0!important;background:#960001;color:#fff}

/* R1: independent facets, wrapping tags, and share-page consistency. */
.demo-facets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0}.demo-facet{min-width:0}.demo-facet label{display:block}.demo-facet select{width:100%;min-width:0}.demo-tags{display:flex;flex-wrap:wrap}.demo-tags .tag{white-space:normal;overflow-wrap:anywhere}.detail .jhn-player{max-width:720px}.jhn-copy-fallback{box-sizing:border-box;max-width:100%}@media(max-width:770px){.demo-facets{grid-template-columns:1fr;gap:12px}}
