.hamd-preview-controls { display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:16px 18px;margin:18px 0;border:1px solid #36778666;border-radius:10px;background:#3ed8f507; }
.hamd-preview-controls h3 { margin:0 0 5px;font-size:14px;font-weight:600;color:#83e7ef; }
.hamd-preview-controls p { margin:0;color:var(--muted);font-size:12px;line-height:1.7; }
.hamd-preview-controls>div { flex:1 1 260px; }
.hamd-hover-option { display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.7;color:var(--muted); }
.hamd-hover-option input { accent-color:#67e8f9;min-width:18px;min-height:18px; }
.hamd-preview-status:not(:empty) { flex-basis:100%; }
.hamd-preview-status:empty { display:none; }
.hamd-preview-button,.hamd-preview-stop-all { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;max-width:100%;padding:8px 12px;border:1px solid #367786;border-radius:6px;background:#0c2730;color:#8bebf5;font:500 12px/1.4 Arial,sans-serif;cursor:pointer; }
.hamd-preview-button:disabled { color:var(--muted);background:transparent;border-color:var(--line);cursor:default; }
.hamd-preview-button:not(:disabled):hover,.hamd-preview-button[aria-pressed="true"] { background:#185063;border-color:#67e8f9;color:#eaffff; }
.hamd-preview-button:focus-visible,.hamd-preview-stop-all:focus-visible { outline:3px solid var(--board-accent,#ff9638);outline-offset:3px; }
.hamd-preview-button .hamd-preview-stop { display:none; }
.hamd-preview-button[aria-pressed="true"] .hamd-preview-play { display:none; }
.hamd-preview-button[aria-pressed="true"] .hamd-preview-stop { display:inline; }
.hamd-preview-button.is-icon { min-width:40px;padding:8px; }
.hamd-preview-button.is-icon .hamd-preview-label { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.board-cell>.hamd-preview-button { display:flex;width:100%;min-height:36px;border-radius:0 0 5px 5px;font-size:11px; }
.board-cell { display:flex;flex-direction:column; }
.board-cell>.board-tile { flex:1;height:auto; }
html:not(.has-js):not(.is-ready) .hamd-preview-button { display:none; }
[data-hamd-playing="true"] { outline:2px solid #67e8f9;outline-offset:-2px; }
.lyric-title>.hamd-preview-button { margin-inline-start:auto; }
.musical-note .hamd-preview-button { margin:8px 12px 8px 0; }
html[data-theme="light"] .hamd-preview-controls h3 { color:#006775; }
html[data-theme="light"] .hamd-preview-button:not(:disabled),html[data-theme="light"] .hamd-preview-stop-all { background:#e3f6fa;color:#075b6b;border-color:#6eabb7; }
@media(max-width:560px) { .hamd-preview-controls { padding:13px;gap:12px; }.lyric-title>.hamd-preview-button { margin-inline-start:0; } }