.grapheme-analyzer{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-md);padding:18px;margin-block:18px 26px}
.grapheme-analyzer.article-wide{width:100%;max-width:100%;margin-inline:0}
.grapheme-analyzer-head{display:flex;justify-content:space-between;gap:14px;align-items:start;margin-bottom:14px}
.grapheme-analyzer h3{margin:0 0 4px;font-size:24px}
.grapheme-analyzer label{display:block;font-weight:700;margin-bottom:8px}
.grapheme-analyzer textarea{min-height:120px}
.grapheme-actions,.grapheme-summary{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grapheme-actions{margin:12px 0}
.grapheme-summary{margin:12px 0}
.grapheme-summary output{border:1px solid var(--color-border);border-radius:999px;padding:6px 10px;color:var(--color-muted);background:color-mix(in srgb,var(--color-bg) 70%,var(--color-surface))}
.grapheme-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.grapheme-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-bg) 45%,var(--color-surface));padding:12px}
.grapheme-glyph{font-size:32px;line-height:1.2;margin-bottom:8px}
.grapheme-card dl{grid-template-columns:1fr;gap:4px}
.grapheme-card code{white-space:normal;overflow-wrap:anywhere}
.grapheme-boundaries{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:10px;background:var(--color-surface);font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;overflow:auto}
@media(max-width:620px){.grapheme-analyzer-head{display:block}.grapheme-analyzer-head .badge{display:inline-flex;margin-top:8px}}