.settings { position: relative; }
.settings-trigger { display: flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; }
.settings-trigger::-webkit-details-marker { display: none; }
.settings-trigger svg { width: 19px; height: 19px; }
.settings-menu { position: absolute; z-index: 100; top: calc(100% + 10px); right: 0; width: min(264px, calc(100vw - 32px)); padding: 17px; color: var(--ink); background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.settings-themes { padding: 0; margin: 0; border: 0; min-width: 0; }
.settings-themes legend, .settings-sound { font-size: 13px; font-weight: 650; }
.settings-themes legend { padding: 0; margin-bottom: 10px; }
.settings-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; background: color-mix(in srgb, var(--ink) 7%, var(--paper)); border-radius: 8px; }
.settings-options label { position: relative; cursor: pointer; }
.settings-options input { position: absolute; opacity: 0; }
.settings-options span { display: block; padding: 8px 0; border-radius: 6px; text-align: center; font-size: 12px; font-weight: 600; transition: background .18s, color .18s; }
.settings-options input:checked + span { background: var(--primary); color: #171a10; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.settings-options input:focus-visible + span, .settings-trigger:focus-visible, .settings-sound input:focus-visible + .settings-switch { outline: 2px solid var(--primary); outline-offset: 3px; }
.settings-sound { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 15px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); cursor: pointer; }
.settings-sound input { position: absolute; opacity: 0; }
.settings-switch { position: relative; width: 38px; height: 22px; border-radius: 20px; flex: none; background: color-mix(in srgb, var(--ink) 25%, var(--paper)); transition: background .18s; }
.settings-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px #0003; transition: transform .18s; }
.settings-sound input:checked + .settings-switch { background: var(--primary); }
.settings-sound input:checked + .settings-switch::after { transform: translateX(16px); background: #22251b; }
@media (prefers-reduced-motion: reduce) { .settings-options span, .settings-switch, .settings-switch::after { transition: none; } }