.reading-mode{border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:4px;inline-size:min(100%,22rem);min-inline-size:0;margin:0;padding:4px;display:grid}.reading-mode[data-reading-mode-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));inline-size:min(100%,30rem)}.reading-mode[data-reading-mode-count="4"]{border-radius:var(--radius-lg);grid-template-columns:repeat(4,minmax(0,1fr));inline-size:min(100%,36rem)}.reading-mode__option{cursor:pointer;min-inline-size:0;margin:0;display:block;position:relative}.reading-mode:disabled .reading-mode__option{cursor:not-allowed}.reading-mode__input{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;margin:-1px;position:absolute;overflow:hidden}.reading-mode__label{box-sizing:border-box;block-size:100%;inline-size:100%;min-inline-size:0;min-block-size:var(--interaction-target-min-size);border-radius:var(--radius-pill);color:var(--muted);font-family:var(--font-sans);font-size:var(--font-size-sm);overflow-wrap:anywhere;text-align:center;white-space:normal;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;justify-content:center;align-items:center;padding:.35rem clamp(.35rem,2vw,1.1rem);font-weight:600;display:flex}.reading-mode:not(:disabled) .reading-mode__option:hover .reading-mode__label{color:var(--ink)}.reading-mode__input:checked+.reading-mode__label{background:var(--brand-yellow);color:var(--on-brand)}.reading-mode__input:focus-visible+.reading-mode__label{outline:2px solid var(--focus-ring);outline-offset:2px}@media (width<=480px){.reading-mode{inline-size:100%}.reading-mode[data-reading-mode-count="4"]{border-radius:var(--radius-lg);grid-template-columns:repeat(2,minmax(0,1fr))}}
