@layer components{.tones{max-inline-size:var(--container);margin-inline:auto}.tones__lede{font-size:var(--text-lg);color:var(--color-muted);line-height:var(--leading-body);max-inline-size:60ch}.tones__section{margin-block-start:var(--space-5)}.tone-list{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-3)}.tone-list__item{padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-inline-start:4px solid var(--color-border-strong);border-radius:var(--radius-sm)}.tone-list__item--t1{border-inline-start-color:#c43d3d}.tone-list__item--t2{border-inline-start-color:#b07418}.tone-list__item--t3{border-inline-start-color:#2e7d44}.tone-list__item--t4{border-inline-start-color:#2b5dab}.tone-list__item--t5{border-inline-start-color:var(--color-border-strong)}.tone-list__name{margin:0 0 var(--space-1);font-size:var(--text-lg)}.tone-list__desc{margin:0;color:var(--color-muted);line-height:var(--leading-body)}.tones__note{margin-block-start:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-jade-soft);border-radius:var(--radius-sm);color:var(--color-text);line-height:var(--leading-body)}.tone-grid__intro{color:var(--color-muted);line-height:var(--leading-body);max-inline-size:60ch}.tone-grid__scroll{margin-block-start:var(--space-4);overflow-x:auto}.tone-grid{border-collapse:collapse;inline-size:100%;min-inline-size:32rem}.tone-grid caption{caption-side:top;text-align:start;margin-block-end:var(--space-3);color:var(--color-faint);font-size:var(--text-sm)}.tone-grid th,.tone-grid td{border:1px solid var(--color-border);padding:var(--space-2);text-align:center;vertical-align:top}.tone-grid__corner{background:var(--color-bg);text-align:start;line-height:1.3}.tone-grid__axis{font-size:var(--text-sm);font-weight:600;color:var(--color-muted)}.tone-grid__axis--row-label,.tone-grid__axis--col-label{display:block;font-weight:500;color:var(--color-faint)}.tone-grid__axis--col-label{text-align:end}.tone-grid__axis--col{inline-size:18%}.tone-grid th[scope=row],.tone-grid th[scope=col]{background:var(--color-surface-hover);white-space:nowrap}.tone-cell{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.tone-cell__link{display:inline-flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:inherit;border-radius:var(--radius-sm);padding:var(--space-1)}.tone-cell__link:hover{background:var(--color-accent-soft)}.tone-cell__hanzi{font-size:var(--text-xl);line-height:1.15}.tone-cell__reading{font-size:var(--text-sm);color:var(--color-muted)}.tone-cell__gloss{font-size:var(--text-sm);color:var(--color-faint)}.tone-cell--empty{background:repeating-linear-gradient(135deg,var(--color-bg),var(--color-bg) 6px,var(--color-surface-hover) 6px,var(--color-surface-hover) 12px)}.tone-cell__dash{color:var(--color-faint);font-size:var(--text-lg)}.syllabary__yue-note{display:none;color:var(--color-muted);font-size:var(--text-sm)}:root[data-lang=yue] .syllabary .syllabary__scroll,:root[data-lang=yue] .syllabary .tone-grid__intro{display:none}:root[data-lang=yue] .syllabary__yue-note{display:block}.syllabary__scroll{overflow:auto;max-block-size:80vh;margin-block-start:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.syllabary__table{border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}.syllabary__table th,.syllabary__table td{border-block-end:1px solid var(--color-border);border-inline-end:1px solid var(--color-border)}.syllabary__final,.syllabary__corner{position:sticky;inset-block-start:0;z-index:2;background:var(--color-surface);padding:var(--space-1) var(--space-2);font-weight:600;color:var(--color-muted)}.syllabary__initial,.syllabary__corner{position:sticky;inset-inline-start:0;z-index:1;background:var(--color-surface);padding:var(--space-1) var(--space-2);font-weight:700;text-align:center}.syllabary__corner{z-index:3;display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--text-xs)}.syllabary__corner-col{color:var(--color-faint)}.syllabary__cell{padding:2px var(--space-1) var(--space-1);text-align:center;vertical-align:top;min-inline-size:3rem}.syllabary__empty{background:var(--color-surface-2, var(--color-bg))}.syllabary__base{display:block;color:var(--color-text);line-height:1.1}.syllabary__chips{display:inline-flex;gap:2px;margin-block-start:2px}.syllabary__chip{inline-size:1.1rem;block-size:1.1rem;display:grid;place-items:center;padding:0;border:none;border-radius:var(--radius-sm);color:#fff;font-size:.7rem;font-weight:700;line-height:1;cursor:pointer}.syllabary__chip:hover,.syllabary__chip:focus-visible{outline:2px solid var(--color-text);outline-offset:1px}.syllabary__chip--t1{background:#c43d3d}.syllabary__chip--t2{background:#b07418}.syllabary__chip--t3{background:#2e7d44}.syllabary__chip--t4{background:#2b5dab}.syllabary__chip--t5{background:var(--color-faint)}}