@layer reset,tokens,base,layout;@layer components{.tones{max-inline-size:var(--container);margin-inline:auto}.tones__section{margin-block-start:var(--space-5)}.tone-list{margin:var(--space-4) 0 0;gap:var(--space-3);padding:0;list-style:none;display:grid}.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:var(--tone-1)}.tone-list__item--t2{border-inline-start-color:var(--tone-2)}.tone-list__item--t3{border-inline-start-color:var(--tone-3)}.tone-list__item--t4{border-inline-start-color:var(--tone-4)}.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{color:var(--color-muted);line-height:var(--leading-body);margin:0}.tones__note{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);margin-block-start:var(--space-4)}.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;color:var(--color-faint);font-size:var(--text-sm);margin-block-end:var(--space-3)}.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);color:var(--color-muted);font-weight:600}.tone-grid__axis--row-label,.tone-grid__axis--col-label{color:var(--color-faint);font-weight:500;display:block}.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{align-items:center;gap:var(--space-1);flex-direction:column;display:flex}.tone-cell__link{color:inherit;border-radius:var(--radius-sm);padding:var(--space-1);flex-direction:column;align-items:center;gap:2px;text-decoration:none;display:inline-flex}.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{color:var(--color-muted);font-size:var(--text-sm);display:none}: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{max-block-size:80vh;border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-block-start:var(--space-3);overflow:auto}.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{z-index:calc(var(--z-raised) + 1);background:var(--color-surface);padding:var(--space-1) var(--space-2);color:var(--color-muted);font-weight:600;position:sticky;inset-block-start:0}.syllabary__initial,.syllabary__corner{z-index:var(--z-raised);background:var(--color-surface);padding:var(--space-1) var(--space-2);text-align:center;font-weight:700;position:sticky;inset-inline-start:0}.syllabary__corner{z-index:calc(var(--z-raised) + 2);justify-content:space-between;gap:var(--space-2);font-size:var(--text-xs);display:flex}.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-bg)}.syllabary__base{color:var(--color-text);line-height:1.1;display:block}.syllabary__chips{gap:2px;margin-block-start:2px;display:inline-flex}.syllabary__chip{border-radius:var(--radius-sm);block-size:1.1rem;inline-size:1.1rem;color:var(--color-on-accent);cursor:pointer;border:none;place-items:center;padding:0;font-size:.7rem;font-weight:700;line-height:1;display:grid}.syllabary__chip:hover,.syllabary__chip:focus-visible{outline:2px solid var(--color-text);outline-offset:1px}.syllabary__chip--t1{background:var(--tone-1)}.syllabary__chip--t2{background:var(--tone-2)}.syllabary__chip--t3{background:var(--tone-3)}.syllabary__chip--t4{background:var(--tone-4)}.syllabary__chip--t5{background:var(--tone-chip-5)}}@layer utilities;