.comma-style{display:inline-block;background:#eee9fc;color:#4d3587;padding:8px 14px;border-radius:999px;font-weight:700;font-size:.85rem}
.comma-field{border:0;padding:0;margin:12px 0;min-width:0}
.comma-field legend{font-size:.92rem;color:#505970;margin-bottom:20px}
.comma-sentence{display:flex;flex-wrap:wrap;align-items:center;gap:12px 0;padding:20px 12px;background:#f7f5fc;border:1px solid #e1d8f3;border-radius:18px;line-height:1.6;font-size:clamp(1.05rem,3vw,1.4rem)}
.comma-token{display:inline-flex;align-items:center;position:relative;max-width:100%;overflow-wrap:anywhere}
.comma-gap{width:44px;min-width:44px;height:48px;padding:0;margin:0 3px;border:1px dashed #9786bd;border-radius:10px;color:#76628e;background:#fff;cursor:pointer;font-size:1.3rem;touch-action:manipulation}
.comma-gap[aria-pressed=true]{background:#6e4fc0;border-style:solid;color:#fff;font-size:2rem;font-weight:800}
.comma-gap:focus-visible{outline:3px solid #192d65;outline-offset:3px}
.comma-gap:disabled{opacity:1;cursor:default}
.comma-gap.comma-missing{background:#fff0d0;color:#704600;border:2px solid #a16c00}
.comma-gap.comma-extra{background:#fce5ee;color:#972044;border:2px solid #ba365c}
.comma-token small{font-size:.62rem;position:absolute;bottom:-13px;right:1px;font-weight:800;background:#fff;padding:0 2px}
.comma-reading{border-left:3px solid #b6a4e3;padding:8px 14px;color:#505970;font-size:.95rem}
.wordclass-sentence{font-size:clamp(1.35rem,4vw,1.9rem);line-height:1.7;background:#edf8f4;border:1px solid #cee9df;border-radius:18px;padding:24px;overflow-wrap:anywhere}
.wordclass-sentence mark{background:#165f51;color:white;border-radius:7px;padding:3px 7px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.comma-error-summary{font-size:.92rem}
.solution-comma{background:#e4d8ff;color:#49218c;border-radius:4px;padding:0 2px}
@media(max-width:420px){.comma-sentence{padding:16px 8px}.wordclass-sentence{padding:18px}.comma-gap{margin:0 2px}}