.caesar-cipher{--cipher-role:var(--diagram-first);--plain-role:var(--diagram-third)}.caesar-cipher .caesar-cipher-wheel{font-variant-numeric:tabular-nums;max-width:520px}.caesar-cipher-band{fill:color-mix(in srgb, var(--cipher-role) 14%, var(--surface))}.caesar-cipher-band-hole{fill:var(--surface)}.caesar-cipher-turn-band{fill:color-mix(in srgb, var(--plain-role) 16%, var(--surface))}.caesar-cipher-turn-hole{fill:var(--surface)}.caesar-cipher-hub{fill:var(--surface-soft);stroke:var(--line);stroke-width:1px}.caesar-cipher-hub-label{fill:var(--muted);font-size:15px}.caesar-cipher-hub-key{fill:var(--emphasis);font-size:22px;font-weight:700}.caesar-cipher-letter{fill:var(--ink);dominant-baseline:central;font-size:21px}.caesar-cipher-letter[data-ring=cipher]{fill:var(--cipher-role);font-weight:600}.caesar-cipher-letter[data-ring=plain]{fill:var(--plain-role);font-weight:600}.caesar-cipher-letter[data-current]{fill:var(--emphasis);font-size:27px;font-weight:700}.caesar-cipher-mark{fill:none;stroke:var(--emphasis);stroke-width:2.5px;stroke-dasharray:4 3}.caesar-cipher-travel{fill:none;stroke:var(--emphasis);stroke-width:3px}.caesar-cipher-closure{fill:none;stroke:var(--line-strong);stroke-width:2.5px;stroke-dasharray:5 4}.caesar-cipher-head{fill:var(--emphasis)}.caesar-cipher-head[data-ring=closure]{fill:var(--line-strong)}.caesar-cipher-thread{stroke:var(--emphasis);stroke-width:2px;stroke-dasharray:3 3}.caesar-cipher-strip-note{color:var(--muted);font-size:var(--text-support);text-align:center;margin:.6rem 0 .25rem}.caesar-cipher-strip{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.25rem;margin:.2rem 0 .4rem;padding:0;list-style:none;display:flex}.caesar-cipher-gap{width:1rem}.caesar-cipher-cell{border:1px solid var(--line);border-radius:var(--radius-small);background:var(--surface);justify-items:center;gap:.05rem;min-width:2rem;padding:.2rem .25rem .3rem;display:grid}.caesar-cipher-cell[data-current]{border-color:var(--emphasis);background:var(--highlight)}.caesar-cipher-source{color:var(--cipher-role);font-size:1.05rem;font-weight:600}.caesar-cipher-result{color:var(--plain-role);font-size:1.2rem}.caesar-cipher-cell:not([data-shown]) .caesar-cipher-result{color:var(--line-strong)}.caesar-cipher-cell[data-shown]{animation:.3s ease-out both caesar-cipher-open}@keyframes caesar-cipher-open{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.caesar-cipher-cell[data-shown]{animation:none}}.caesar-cipher-note,.caesar-cipher-readout{border-left:4px solid var(--cipher-role);background:var(--surface-soft);font-variant-numeric:tabular-nums;margin:.45rem 0 0;padding:.5rem .75rem;line-height:1.7}.caesar-cipher-readout strong{color:var(--plain-role);font-size:1.15rem}.caesar-cipher-answer{color:var(--emphasis);margin:.55rem 0 0;font-size:1.1rem;font-weight:600;line-height:1.7}.caesar-cipher-reverse{border-left:4px solid var(--plain-role);background:var(--surface-soft);margin:.35rem 0 0;padding:.5rem .75rem;line-height:1.7}.caesar-cipher-chips{font-size:var(--text-support);flex-wrap:wrap;gap:.3rem;margin:.5rem 0 0;padding:0;list-style:none;display:flex}.caesar-cipher-chips li{border:1px solid var(--line);border-radius:var(--radius-small);background:var(--surface);color:var(--muted);font-variant-numeric:tabular-nums;padding:.15rem .45rem}.caesar-cipher-choice{border:1px solid var(--line);border-radius:var(--radius-small);margin:.2rem 0 .6rem;padding:.4rem .7rem .6rem}.caesar-cipher-choice legend{color:var(--muted);font-size:var(--text-support);padding:0 .3rem}.caesar-cipher-option{align-items:center;gap:.4rem;min-height:48px;margin:.2rem .9rem .1rem 0;display:inline-flex}.caesar-cipher-option input{width:20px;height:20px;accent-color:var(--ink)}.caesar-cipher-option span{font-size:1rem}.caesar-cipher-input{color:var(--muted);font-size:var(--text-support);gap:.25rem;margin:.4rem 0;display:grid}.caesar-cipher-input input{border:1px solid var(--line);border-radius:var(--radius-small);background:var(--surface);min-height:48px;color:var(--ink);font-family:var(--font-body);letter-spacing:.06em;padding:.4rem .6rem;font-size:1.1rem}.caesar-cipher-input input:focus-visible{outline:2px solid var(--emphasis);outline-offset:2px}@media (width<=560px){.caesar-cipher-wheel{max-width:100%}.caesar-cipher-cell{min-width:1.7rem}.caesar-cipher-source{font-size:.95rem}.caesar-cipher-result{font-size:1.05rem}}