.camelot-wheel { max-width: 440px; width: 100%; }
.camelot-svg { width: 100%; height: auto; display: block; }
.camelot-segment { cursor: pointer; transition: opacity 0.15s ease; outline: none; }
.camelot-segment path { stroke: #ffffff; stroke-width: 2; transition: stroke-width 0.15s ease; }
.camelot-segment.is-dimmed { opacity: 0.28; }
.camelot-segment.is-selected path { stroke: #111111; stroke-width: 4; }
.camelot-segment:hover { opacity: 1; }
.camelot-segment:focus-visible path { stroke: #0071e3; stroke-width: 4; }
.camelot-code { font-size: 15px; font-weight: 700; fill: #111111; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.camelot-key { font-size: 8.5px; font-weight: 600; fill: #222222; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.camelot-match { border: 1px solid var(--glass-border); background: rgba(0, 113, 227, 0.04); }
body.dark-mode .camelot-segment path { stroke: #1c1c1e; }
body.dark-mode .camelot-segment.is-selected path { stroke: #ffffff; }
body.dark-mode .camelot-match { background: rgba(41, 151, 255, 0.08); }