[data-democracy] { container:democracy/inline-size; box-sizing:border-box; margin:12px 0 2px; padding:10px 5px 6px; color:#b8cfca; border-top:1px solid #617b7c33; font:10px/1.4 'Courier New',monospace; text-align:left; }
[data-democracy] *,[data-democracy] *::before { box-sizing:border-box; }
[data-democracy] .dem-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:9px; }
[data-democracy] h2 { margin:0; color:#bfd6ce; font:400 11px/1.4 'Courier New',monospace; letter-spacing:.02em; }
[data-democracy] h2 span { color:#91a3a4; font-size:9px; letter-spacing:0; }
[data-democracy] .dem-clock { color:#91a3a4; font-size:9px; font-variant-numeric:tabular-nums; }
[data-democracy] .dem-candidates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
[data-democracy] .dem-choice { display:grid; grid-template-columns:24px minmax(0,1fr); gap:2px 6px; position:relative; min-width:0; min-height:62px; margin:0; padding:7px 6px; border:1px solid #526c6644; border-radius:2px; background:#101e2499; color:#d0ded6; text-align:left; font:inherit; cursor:pointer; transition:background .15s,border-color .15s; }
[data-democracy] .dem-choice:hover:not(:disabled) { border-color:#8ba19c; background:#1a3037; }
[data-democracy] .dem-choice:focus-visible { outline:2px solid #b8efce; outline-offset:3px; }
[data-democracy] .dem-choice:disabled { opacity:1; cursor:default; }
[data-democracy] .dem-choice[aria-pressed=true] { border-color:#829c7c; background:#19302a99; }
[data-democracy] .dem-art { position:relative; grid-column:1; grid-row:1/3; width:24px; height:24px; align-self:center; display:grid; place-items:center; overflow:hidden; background:#203738; color:#9ebcb4; }
[data-democracy] .dem-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
[data-democracy] .dem-record { font-size:15px; }
[data-democracy] .dem-letter,[data-democracy] .dem-album { display:none; }
[data-democracy] .dem-song { grid-column:2; font-size:10px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-democracy] .dem-artist { grid-column:2; color:#9ebcb4; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-democracy] .dem-tally { grid-column:1/-1; display:flex; gap:6px; padding-top:4px; color:#a1b4b5; font-size:8px; }
[data-democracy] .dem-percent { color:#b8cfca; font-weight:normal; }
[data-democracy] .dem-bar { position:absolute; bottom:0; left:0; right:0; height:1px; }
[data-democracy] .dem-bar > span { display:block; height:100%; background:#87aaa3; transition:width .3s; }
[data-democracy] .dem-action { position:absolute; bottom:6px; right:6px; color:#a9c2b7; font-size:8px; }
[data-democracy] .dem-meta { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:7px 0 3px; color:#91a3a4; font-size:9px; }
[data-democracy] .dem-status { margin:0; min-width:0; font:inherit; color:inherit; }
[data-democracy] [data-total] { flex-shrink:0; }
[data-democracy] .dem-info { margin:0; padding:0; border:0; }
[data-democracy] .dem-info summary { display:list-item; width:max-content; margin:0; padding:4px 0; min-height:24px; color:#91a3a4; font-size:9px; cursor:pointer; }
[data-democracy] .dem-info > p { margin:8px 0; color:#a1b4b5; font:10px/1.6 'Courier New',monospace; }
[data-democracy] .dem-mode { display:flex; justify-content:space-between; gap:8px; margin:8px 0; font-size:8px; color:#91a3a4; }
[data-democracy] h3 { margin:12px 0 8px; color:#b8cfca; font:400 10px/1.4 'Courier New',monospace; }
[data-democracy] ol { display:grid; gap:8px; margin:0 0 10px; padding:0; list-style:none; }
[data-democracy] li { margin:0; color:#a1b4b5; font:9px/1.5 'Courier New',monospace; overflow-wrap:anywhere; }
[data-democracy] li strong { display:block; color:#b8cfca; font-weight:normal; }
[data-democracy] li span { display:block; color:#91a3a4; }
@container democracy (max-width:400px) {
  [data-democracy] .dem-candidates { grid-template-columns:1fr; gap:5px; }
  [data-democracy] .dem-choice { grid-template-columns:24px minmax(0,1fr) 60px; min-height:44px; padding:5px 7px; }
  [data-democracy] .dem-tally { grid-column:3; grid-row:1; justify-content:flex-end; padding:0; align-self:center; }
  [data-democracy] .dem-action { right:7px; bottom:7px; }
}
@media(prefers-reduced-motion:reduce) { [data-democracy] * { transition:none !important; } }