.romaji-tool{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
.romaji-system{margin:0;font-size:14px;color:var(--mut,#555)}
.romaji-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.romaji-field{display:grid;gap:var(--s1);min-width:0;align-content:start}
.romaji-field{grid-row:span 3;grid-template-rows:subgrid}
.romaji-field input{font-size:20px;min-height:48px;padding:6px 10px}
.romaji-out{display:grid;gap:10px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:var(--s3);min-width:0}
.romaji-out[hidden]{display:none}
.romaji-result{font-size:26px;font-weight:700;letter-spacing:.04em;margin:0;overflow-wrap:anywhere}
.romaji-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.romaji-chips .chip{min-height:var(--touch);font-size:14px}
.romaji-chips .chip[aria-pressed="true"]{border-color:var(--b);box-shadow:inset 0 0 0 1px var(--b);color:var(--tx);background:var(--soft);font-weight:600}
.romaji-chips .chip[aria-pressed="true"]::before{content:"✓ ";content:"✓ " / ""}
.romaji-variants{border:0;margin:0;padding:0;min-width:0;display:grid;gap:6px}
.romaji-variants legend{font-size:14px;margin-bottom:var(--s1)}
.romaji-variant-list{display:flex;flex-wrap:wrap;gap:var(--s2)}
.romaji-variant{position:relative;display:inline-flex}
.romaji-variant input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.romaji-variant span{display:inline-flex;align-items:center;min-height:var(--touch);padding:0 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);font-size:16px;font-weight:600;letter-spacing:.03em}
.romaji-variant input:checked+span{border-color:var(--b);box-shadow:inset 0 0 0 1px var(--b)}
.romaji-variant input:checked+span::before{content:"✓ ";content:"✓ " / ""}
.romaji-variant input:focus-visible+span{outline:3px solid var(--focus-ring,var(--b));outline-offset:2px}
.romaji-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.romaji-example{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.romaji-tool .status:empty{display:none}
.romaji-rules ul{margin:6px 0;padding-left:1.2em}
.romaji-rules .note{overflow-wrap:anywhere}