.dm-stage{position:relative;padding:1.25rem 1.25rem 3.5rem;background:var(--dm-page);color:var(--dm-text);border-radius:6px;transition:background-color .2s}
.dm-stage.is-inverted{filter:invert(1)}
.dm-card{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.9rem;max-width:26rem;padding:.75rem;border:1px solid var(--dm-border);border-radius:10px;background:var(--dm-card);box-shadow:0 1px 2px var(--dm-shadow),0 6px 16px -6px var(--dm-shadow)}
.dm-photo{overflow:hidden;border-radius:6px;align-self:start}
.dm-photo svg{display:block;width:100%;height:auto}
.dm-stage.is-dark .dm-photo{filter:brightness(.85)}
.dm-top{display:flex;flex-wrap:wrap;gap:.25rem .5rem;align-items:center;justify-content:space-between}
.dm-top strong{font-weight:500}
.dm-badge{padding:.05rem .4rem;border-radius:99px;background:var(--dm-okBg);color:var(--dm-okText);font-size:.85em}
.dm-body p{margin:.3rem 0 .6rem;color:var(--dm-muted)}
.dm-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.dm-btn{padding:.3rem .7rem;border-radius:6px;background:var(--dm-accent);color:var(--dm-onAccent)}
.dm-link{color:var(--dm-link);text-decoration:underline;text-underline-offset:2px}
.dm-pop{position:absolute;right:1.25rem;bottom:.9rem;display:grid;min-width:8.5rem;padding:4px;border:1px solid var(--dm-border);border-radius:8px;background:var(--dm-raised);box-shadow:0 10px 30px -8px var(--dm-shadow),0 2px 6px var(--dm-shadow)}
.dm-pop span{padding:.25rem .5rem;border-radius:4px}
.dm-pop span:first-child{background:color-mix(in srgb,var(--dm-text) 8%,transparent)}
.dm-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.35rem .75rem;margin:.9rem 0 0;font-variant-numeric:tabular-nums}
.dm-pairs div{display:flex;justify-content:space-between;gap:.5rem;border-bottom:1px solid var(--rule);padding-bottom:.2rem}
.dm-pairs dt{color:var(--muted)}
.dm-pairs dd{margin:0}
.dm-range{display:flex;gap:.6rem;align-items:center;margin-bottom:.9rem;color:var(--muted)}
.dm-range input{flex:1;min-width:0;padding:0;border:0;accent-color:var(--redline)}
.dm-range output{min-width:2.75rem;text-align:right;color:var(--fg);font-variant-numeric:tabular-nums}
.dm-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.demo .dm-panel{margin:0}
.dm-surf{display:grid;place-items:center;height:8.5rem;border:1px solid var(--rule);border-radius:6px;background:#121212}
.dm-panel.is-light .dm-surf{background:#f2f2f2;border:1px solid var(--rule)}
.dm-sheet{display:grid;place-items:center;width:62%;height:55%;border-radius:8px;color:#e8e8e8;font-size:.9em;transition:background-color .15s,box-shadow .15s}
.dm-panel.is-light .dm-sheet{color:#18181b}
.dm-sheet.no-anim{transition:none}
.dm-panel figcaption{margin-top:.4rem;color:var(--muted);font-size:.9em;text-align:center}
.dm-tokens{display:grid;grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr);gap:.4rem .9rem;align-items:center;font-variant-numeric:tabular-nums}
.dm-tokens > span{display:flex;align-items:center;gap:.4rem;min-width:0}
.dm-tokens .h{color:var(--muted)}
.dm-tokens code{font-size:.95em}
.dm-tokens i{flex:none;width:.9rem;height:.9rem;border:1px solid var(--rule);border-radius:3px;background:var(--c)}
@media (prefers-reduced-motion:reduce){.dm-stage,.dm-sheet{transition:none}}
@media (max-width:520px){
  .dm-card{grid-template-columns:minmax(0,1fr)}
  .dm-photo{max-width:9rem}
  .dm-stage{padding-bottom:1.25rem}
  .demo .dm-pop{position:relative;right:auto;bottom:auto;width:max-content;margin:-.6rem .5rem 0 auto}
  .dm-panels{grid-template-columns:minmax(0,1fr)}
  .dm-surf{height:6.5rem}
  .dm-tokens{grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr);gap:.4rem .5rem;font-size:.92em}
}