.cipher-practice { margin-block: 1.5rem; }
.cipher-decoder:not([hidden]) { display: grid; gap: .8rem; padding: clamp(18px, 4vw, 30px); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cipher-practice label { display: block; font-weight: 650; font-size: .92rem; }
.cipher-practice select, .cipher-practice input, .cipher-practice textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: .8rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.cipher-practice textarea { resize: vertical; }
.cipher-practice :is(select, input, textarea):focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.cipher-decoder .button { justify-self: start; }
.cipher-decoder output { display: block; min-height: 1.5em; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-weight: 700; }
.cipher-decoder output.is-error { font: inherit; color: var(--red); }
.cipher-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.cipher-task { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cipher-task.is-solved { border-color: var(--green); }
.cipher-task .cipher-code { margin-block: 16px; font: 700 clamp(18px, 2vw, 24px)/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.cipher-task form:not([hidden]) { display: grid; gap: 10px; }
.cipher-task .button { justify-self: start; }
.cipher-task .cipher-feedback { margin: 0; min-height: 1.5em; font-size: .9rem; }
.cipher-task.is-solved .cipher-feedback { color: var(--green); }
.cipher-task details { margin-top: 14px; }
.cipher-task summary { cursor: pointer; color: var(--cobalt); font-weight: 650; padding-block: 8px; }
@media (max-width: 620px) { .cipher-tasks { grid-template-columns: minmax(0, 1fr); } }