crypto-playground { display: block; min-width: 0; container-type: inline-size; --cp-primary: #c194ff; --cp-primary-ink: #17101e; --cp-selection: var(--accent, #b99af5); --cp-selection-ink: var(--btn-text, #17101e); color: var(--text, #fff); font-family: 'Figtree', sans-serif; font-size: 14px; line-height: 1.5; }
.theme-light crypto-playground { --cp-primary: var(--accent, #5f3573); --cp-primary-ink: #fff; }
crypto-playground *, crypto-playground *::before, crypto-playground *::after { box-sizing: border-box; }
crypto-playground [hidden] { display: none !important; }
crypto-playground .cp-panel { position: relative; border: 1px solid var(--cp-border); overflow: clip; }
crypto-playground .cp-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border, #333); }
crypto-playground .cp-brand { display: flex; align-items: center; min-width: 0; }
crypto-playground .cp-brand strong { font-weight: 700; line-height: 1.35; }
/* Native adaptation of shadcn's Avatar image/fallback anatomy. The artwork
   supplies the glass material; its transparent canvas needs no opaque tile. */
crypto-playground .cp-mark { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; color: var(--accent, #b99af5); }
crypto-playground .cp-mark-image { display: block; width: 100%; height: 100%; object-fit: contain; }
crypto-playground .cp-mark-fallback { display: none; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
crypto-playground .cp-mark[data-state="fallback"] { background: color-mix(in srgb, var(--accent, #b99af5) 10%, transparent); border: 1px solid var(--cp-glass-border); }
crypto-playground .cp-mark[data-state="fallback"] .cp-mark-image { display: none; }
crypto-playground .cp-mark[data-state="fallback"] .cp-mark-fallback { display: block; }
crypto-playground button, crypto-playground input, crypto-playground textarea, crypto-playground select { font: inherit; }
crypto-playground button, crypto-playground summary, crypto-playground select { cursor: pointer; }
crypto-playground button { touch-action: manipulation; }
crypto-playground button:disabled, crypto-playground select:disabled { opacity: .5; cursor: default; }
crypto-playground input { display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--cp-border); border-radius: 7px; background: var(--cp-field); color: var(--text, #fff); padding: 10px 11px; outline: none; }
crypto-playground textarea, crypto-playground select { display: block; width: 100%; min-width: 0; border: 1px solid var(--cp-border); border-radius: 7px; background: var(--cp-field); color: var(--text, #fff); outline: none; }

crypto-playground .cp-algorithm-picker { position: relative; }
crypto-playground .cp-algorithm-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; min-height: 34px; height: 34px; border: 1px solid var(--cp-border); border-radius: 7px; padding: 6px 10px; background: var(--cp-field); color: var(--text, #fff); font-size: 12px; text-align: left; transition: border-color .18s ease, background-color .18s ease; }
crypto-playground .cp-algorithm-trigger:hover:not(:disabled), crypto-playground .cp-algorithm-trigger[aria-expanded="true"] { border-color: var(--accent, #b99af5); }
crypto-playground .cp-algorithm-trigger svg, crypto-playground .cp-key-chevron { flex: none; color: var(--accent, #b99af5); transition: transform .18s cubic-bezier(.22,1,.36,1); }
crypto-playground .cp-algorithm-trigger[aria-expanded="true"] svg, crypto-playground .cp-key-settings[open] summary .cp-key-chevron { transform: rotate(180deg); }
crypto-playground .cp-algorithm-trigger [data-algorithm-label] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
crypto-playground .cp-panel.cp-algorithm-open { overflow: visible; }
crypto-playground .cp-algorithm-options { position: absolute; z-index: 2; top: calc(100% + 4px); left: 0; right: 0; display: grid; gap: 4px; min-width: max-content; margin: 0; border: 1px solid var(--cp-border); border-radius: 9px; padding: 6px; background: var(--cp-surface, var(--surface, #19171b)); color: var(--text, #fff); font: inherit; font-size: 13px; box-shadow: 0 4px 8px rgb(0 0 0 / .24); }
crypto-playground .cp-algorithm-options.cp-picker-floating { position: fixed; right: auto; bottom: auto; }
crypto-playground .cp-algorithm-option { display: flex; align-items: center; min-height: 44px; border-radius: 6px; padding: 8px 12px; font-weight: 500; line-height: 1.35; white-space: nowrap; cursor: pointer; transition: background-color .16s ease, color .16s ease; }
crypto-playground .cp-algorithm-option:not([data-selected="true"]):is(:hover,[data-active="true"]) { background: color-mix(in srgb,var(--accent, #b99af5) 14%,var(--cp-surface, #19171b)); }
crypto-playground .cp-algorithm-option[data-selected="true"] { background: var(--cp-selection); color: var(--cp-selection-ink); font-weight: 600; }
@container (max-width: 519px) {
  crypto-playground .cp-algorithm-trigger { min-height: 44px; height: 44px; font-size: 15px; }
  crypto-playground .cp-algorithm-options { font-size: 15px; }
}
/* Style the real picker so option highlights use lavender instead of OS blue. */
@supports (appearance: base-select) {
  crypto-playground select, crypto-playground select::picker(select) { appearance: base-select; }
  crypto-playground select { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  crypto-playground select::picker-icon { color: var(--accent, #b99af5); }
  crypto-playground select::picker(select) { border: 1px solid var(--cp-border); border-radius: 7px; padding: 4px; margin-top: 4px; background: var(--cp-surface, var(--surface, #19171b)); color: var(--text, #fff); font: inherit; }
  crypto-playground select option { min-height: 44px; padding: 8px 10px; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
  crypto-playground select option:is(:checked, :hover, :focus) { background: var(--cp-selection); color: var(--cp-selection-ink); outline: none; }
  crypto-playground select option::checkmark { order: 1; margin-left: auto; color: currentColor; }
  /* The process view's lists (22 states, 80 quarter rounds) show about five
     options and scroll inside; reaching either end does not scroll on. */
  /* Always below, as the chevron says: the browser's fallback flips a list
     that doesn't fit upwards, so instead it stays below and is cut to the
     room left there, which the component measures as the list opens
     (--picker-room, fitPicker). */
  crypto-playground .cp-dialog select::picker(select) { position-try-fallbacks: none; max-height: min(252px, var(--picker-room, 252px)); overflow-y: auto; overscroll-behavior: contain; }
}
crypto-playground textarea { resize: vertical; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
crypto-playground textarea::placeholder, crypto-playground input::placeholder { color: var(--text2, #b5b1bc); opacity: 1; }
crypto-playground .cp-output { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
crypto-playground :is(button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--accent, #b99af5); outline-offset: 3px; }
crypto-playground [aria-invalid="true"] { border-color: var(--danger, #ff8a80); }
crypto-playground .cp-modes { display: flex; flex: none; }

crypto-playground .cp-workspace { display: grid; grid-template-columns: minmax(0, 1fr); }
crypto-playground .cp-workspace > div { min-width: 0; }
crypto-playground .cp-label { display: block; margin: 0 0 8px; color: var(--text); line-height: 1.5; }
crypto-playground .cp-help { margin: 8px 0 0; overflow-wrap: anywhere; }
crypto-playground .cp-field-error { color: var(--danger, #ff8a80); font-size: 12px; margin-top: 6px; }
crypto-playground .cp-input-tools { display: flex; justify-content: space-between; align-items: center; }

crypto-playground .cp-text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 0; background: none; border: none; color: var(--accent); font-size: 12px; font-weight: 600; text-underline-offset: 4px; }
crypto-playground .cp-text-button:hover { text-decoration: underline; }
crypto-playground .cp-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-weight: 700; line-height: 1.35; }
crypto-playground .cp-secondary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; border-radius: 8px; padding: 10px 12px; font-size: 12px; font-weight: 700; line-height: 1.35; }
crypto-playground .cp-primary { background: var(--cp-primary); color: var(--cp-primary-ink); border: 0; transition: filter .15s ease; }
crypto-playground .cp-primary:hover { filter: brightness(1.06); }
crypto-playground .cp-primary span[aria-hidden] { font-size: 18px; line-height: 1; }
crypto-playground .cp-primary span[aria-hidden] svg { display: block; width: .85em; height: .85em; }
crypto-playground .cp-arx-arrow svg { vertical-align: -.125em; }
crypto-playground .cp-secondary { border: 1px solid var(--cp-border); background: transparent; color: var(--accent); }
crypto-playground .cp-secondary:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

crypto-playground .cp-key-settings summary { list-style: none; display: flex; justify-content: flex-start; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }
crypto-playground .cp-key-settings summary::-webkit-details-marker { display: none; }

crypto-playground .cp-key-fields .cp-label:not(:first-child) { margin-top: 13px; }

crypto-playground [data-caesar] { margin-top: 18px; }
crypto-playground .cp-brute { margin-top: 10px; }

crypto-playground .cp-output-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
crypto-playground .cp-output-heading .cp-label { margin: 0; }
crypto-playground .cp-copy { padding: 0; }
crypto-playground .cp-use-output { text-align: left; justify-content: flex-start; }
crypto-playground .cp-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
crypto-playground .cp-result-actions .cp-secondary { width: auto; }
crypto-playground .cp-brute-results { max-height: 360px; overflow-y: auto; scrollbar-width: thin; }
crypto-playground .cp-brute-results ol { list-style: none; margin: 0; padding: 0; }
crypto-playground .cp-brute-results li { padding: 10px 0; border-bottom: 1px solid var(--border); }
crypto-playground .cp-brute-results li span { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; }
crypto-playground .cp-brute-results code { display: block; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
crypto-playground .cp-footer { justify-content: space-between; }

crypto-playground .cp-status { margin: 0; overflow-wrap: anywhere; }
crypto-playground .cp-status[data-kind="error"] { color: var(--danger, #ff8a80); }

crypto-playground .cp-status[data-kind="loading"] { color: var(--text); }
crypto-playground .cp-dialog { color: var(--text); background: var(--surface); border: 1px solid var(--cp-border); border-radius: 12px; padding: 24px; width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; margin: auto; }
crypto-playground .cp-dialog { overscroll-behavior: contain; }
crypto-playground .cp-dialog::backdrop { background: rgb(0 0 0 / .72); }
/* While the process view is open the page stays put, whether or not the
   dialog has anything of its own to scroll. */
html:has(crypto-playground .cp-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
crypto-playground .cp-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
crypto-playground .cp-dialog h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
crypto-playground .cp-close { display: grid; place-items: center; flex: none; min-height: 44px; min-width: 44px; border: 1px solid var(--cp-border); border-radius: 999px; background: var(--cp-field); color: var(--text); font-size: 26px; }
crypto-playground .cp-dialog-lead { color: var(--text2); font-size: 14px; line-height: 1.65; margin-top: 12px; max-width: 70ch; }
crypto-playground .cp-visualization { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; }
crypto-playground .cp-visualization h3 { color: var(--text); font-size: 16px; font-weight: 700; margin-bottom: 16px; }
crypto-playground .cp-visualization select { margin: 0 0 16px; }
crypto-playground .cp-matrix { border: 1px solid var(--cp-border); border-radius: 8px; overflow: clip; }
crypto-playground .cp-matrix [role="row"] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
crypto-playground .cp-matrix code { min-width: 0; display: grid; place-items: center; padding: 14px 3px; font-size: clamp(9px, 1.1vw, 12px); color: var(--text2); background: var(--cp-field); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
crypto-playground .cp-matrix [role="row"]:last-child code { border-bottom: 0; }
crypto-playground .cp-matrix code:last-child { border-right: 0; }
crypto-playground .cp-matrix code.cp-changed { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--cp-field)); }
crypto-playground .cp-arx-block .cp-help { margin: 0 0 14px; }
/* The toggle keeps its 44px target; the -12px lifts the title back level
   with the matrix's on the left. */
crypto-playground .cp-arx-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: -12px 0 4px; }
crypto-playground .cp-visualization .cp-arx-heading h3 { margin: 0; }
/* One group per line of the quarter round (ADD, XOR, ROT), one row a step:
   the step's name in a narrow column, the operation beside it. */
crypto-playground .cp-arx-groups { margin: 0; padding: 0; list-style: none; }
crypto-playground .cp-arx-groups > li { border-bottom: 1px solid var(--border); padding: 10px 0; }
crypto-playground .cp-arx-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
crypto-playground .cp-arx-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
crypto-playground .cp-arx-op { color: var(--accent); font-size: 11px; font-weight: 700; }
crypto-playground .cp-arx-list code { display: block; color: var(--text); font-size: 11px; overflow-wrap: break-word; }
crypto-playground .cp-arx-bits { grid-column: 2; color: var(--text2); font: 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; margin: 2px 0 0; }
@media (min-width: 760px) { crypto-playground .cp-visualization { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* One column: the matrix and the ARX steps are two tabs, like Encrypt and
   Decrypt, and the tab names stand in for the two titles. */
crypto-playground .cp-steps-tabs { display: none; }
@media (max-width: 759px) {
  /* Held at the top: the two tabs differ in height, and centred the tabs
     would jump from under the finger. */
  crypto-playground .cp-dialog { margin-top: 12px; }
  crypto-playground .cp-visualization { gap: 16px; margin-top: 16px; }
  crypto-playground .cp-steps-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); }
  crypto-playground .cp-steps-tabs button { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--cp-muted); font-size: 13px; font-weight: 600; }
  crypto-playground .cp-steps-tabs button[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
  crypto-playground .cp-visualization[data-tab="state"] .cp-arx-block, crypto-playground .cp-visualization[data-tab="arx"] .cp-state-block { display: none; }
  crypto-playground .cp-state-block > h3, crypto-playground .cp-arx-heading h3 { display: none; }
  crypto-playground .cp-arx-heading { justify-content: flex-end; margin: -8px 0 0; }
}
@media (max-width: 600px) {
  crypto-playground { font-size: 14px; }

  crypto-playground .cp-modes { margin-left: auto; }

  
  crypto-playground input { font-size: 16px; }
  
  crypto-playground .cp-text-button { font-size: 13px; }

  crypto-playground .cp-dialog { padding: 16px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  crypto-playground .cp-dialog h2 { font-size: 22px; }
  crypto-playground .cp-matrix code { font-size: 10px; }
}

/* Glass workspace; menus retain their opaque surface for clear selection. */
crypto-playground {
  --cp-surface: #15161b;
  --cp-field: rgb(24 25 32 / .42);
  --cp-border: #30303a;
  --cp-muted: #bdb7cd;
  --cp-glass-fill: rgb(21 22 27 / .24);
  --cp-glass-sheen: rgb(255 255 255 / .05);
  --cp-glass-border: rgb(255 255 255 / .14);
  --cp-glass-rim: rgb(255 255 255 / .06);
}
.theme-light crypto-playground {
  --cp-surface: var(--surface);
  --cp-field: color-mix(in srgb,var(--surface) 46%,transparent);
  --cp-border: color-mix(in srgb,var(--text) 18%,transparent);
  --cp-muted: var(--text2);
  --cp-glass-fill: rgb(255 255 255 / .42);
  --cp-glass-sheen: rgb(255 255 255 / .3);
  --cp-glass-border: color-mix(in srgb,var(--accent) 18%,transparent);
  --cp-glass-rim: rgb(255 255 255 / .55);
}
crypto-playground .cp-panel {
  isolation: isolate;
  background: transparent;
  border-color: var(--cp-glass-border);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 var(--cp-glass-rim);
}
/* Blur only the glass layer, keeping the grid visible and controls crisp. */
crypto-playground .cp-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,var(--cp-glass-sheen),transparent 55%),var(--cp-glass-fill);
  -webkit-backdrop-filter: blur(1px) saturate(115%);
  backdrop-filter: blur(1px) saturate(115%);
}
crypto-playground .cp-header { min-height: 46px; padding: 0 18px; gap: 12px; flex-wrap: nowrap; }
crypto-playground .cp-brand { gap: 10px; }
crypto-playground .cp-brand strong { font-size: 12px; }
crypto-playground .cp-modes { border: 0; padding: 0; gap: 8px; border-radius: 0; background: none; }
crypto-playground .cp-modes button { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 4px; border: 0; border-radius: 0; background: none; color: var(--cp-muted); font-size: 10px; font-weight: 500; text-decoration: none; }
crypto-playground .cp-modes button[aria-pressed="true"] { background: none; color: var(--accent); box-shadow: inset 0 -1px var(--accent); }
crypto-playground .cp-workspace { padding: 18px; gap: 18px; }
crypto-playground .cp-label { font-size: 12px; font-weight: 600; margin-bottom: 7px; }
crypto-playground .cp-help { color: var(--cp-muted); font-size: 11px; line-height: 1.45; margin-top: 6px; }
crypto-playground .cp-panel[data-algorithm="chacha20"] [data-algorithm-hint] { display: none; }
crypto-playground textarea { font-family: Consolas,SFMono-Regular,ui-monospace,monospace; font-size: 12px; font-weight: 400; line-height: 1.5; height: 104px; min-height: 104px; padding: 10px 11px; }
crypto-playground .cp-output { font-size: 12px; }
crypto-playground input[data-field="key"], crypto-playground input[data-field="nonce"] { font-family: inherit; font-size: 12px; }
crypto-playground select { min-height: 34px; height: 34px; padding: 6px 10px; font-size: 12px; }
crypto-playground .cp-input-tools { min-height: 24px; gap: 6px; }
crypto-playground .cp-input-tools .cp-text-button { min-height: 24px; font-size: 10px; padding: 2px 0; }
crypto-playground .cp-count { font-size: 9px; color: var(--cp-muted); }
crypto-playground .cp-primary { margin-top: 6px; min-height: 40px; border-radius: 7px; font-size: 12px; padding: 9px 10px; }
crypto-playground .cp-key-settings { margin-top: 4px; }
crypto-playground .cp-key-settings summary { min-height: 28px; font-size: 11px; }
crypto-playground .cp-key-fields { padding: 8px 0 12px; }
crypto-playground .cp-generate { margin-top: 12px; }
crypto-playground .cp-key-reminder { margin-top: 8px; }
crypto-playground .cp-output-heading { min-height: 18px; height: 18px; margin: 0 0 7px; }
crypto-playground .cp-copy { min-height: 22px; font-size: 10px; }
crypto-playground .cp-copy span { display: none; }
crypto-playground .cp-copied-icon, crypto-playground .cp-copy[data-copied="true"] .cp-copy-icon { display: none; }
crypto-playground .cp-copy[data-copied="true"] .cp-copied-icon { display: block; }
crypto-playground .cp-copy[data-copied="true"] span { display: inline; }
crypto-playground .cp-footer { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; gap: 0 12px; padding: 0 18px 6px; border-top: 0; }
crypto-playground .cp-status { flex: 1 1 180px; font-size: 10px; color: var(--cp-muted); line-height: 1.5; }
crypto-playground .cp-status[data-kind="success"] { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; background: rgb(56 200 166 / .1); color: #75dfc5; }
crypto-playground .cp-status[data-kind="success"]::before { content: "✓"; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #6bd5bd; color: #10211d; font-size: 11px; }
.theme-light crypto-playground .cp-status[data-kind="success"] { color: #126b55; background: rgb(23 131 102 / .1); }
crypto-playground .cp-reset { display: inline-flex; min-height: 28px; margin: 0 0 0 auto; padding: 0; font-size: 10px; }
crypto-playground .cp-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
crypto-playground .cp-algorithm-heading { display: flex; align-items: center; justify-content: space-between; }
crypto-playground .cp-mobile-modes { display: flex; }
@container (min-width:520px) {
  crypto-playground .cp-workspace { grid-template-columns: minmax(0,1fr) minmax(132px,.82fr) minmax(0,1fr); gap: 14px; }
  crypto-playground .cp-settings-column { border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 14px; }
  crypto-playground .cp-mobile-modes { display: none; }
}
@container (max-width:519px) {
  crypto-playground .cp-header { min-height: 56px; padding: 0 18px; }
  crypto-playground .cp-brand strong { font-size: 13px; }
  crypto-playground .cp-header .cp-modes { display: none; }
  crypto-playground .cp-workspace { padding: 16px 18px 8px; gap: 12px; }
  crypto-playground .cp-modes button { min-height: 44px; padding: 0 7px; font-size: 11px; }
  crypto-playground .cp-algorithm-heading { margin-top: -4px; margin-bottom: 3px; }
  crypto-playground .cp-algorithm-heading .cp-label { margin: 0; }
  crypto-playground .cp-label { font-size: 14px; }
  crypto-playground textarea, crypto-playground .cp-output { font-size: 14px; height: 90px; min-height: 90px; }
  crypto-playground select { height: 44px; min-height: 44px; font-size: 15px; }
  crypto-playground input { font-size: 16px; }
  crypto-playground .cp-input-tools { min-height: 32px; }
  crypto-playground .cp-input-tools .cp-text-button { min-height: 44px; font-size: 13px; text-decoration: underline; }
  crypto-playground .cp-count { font-size: 10px; }
  crypto-playground .cp-key-settings { margin: 3px 0 0; }
  crypto-playground .cp-key-settings summary { min-height: 44px; font-size: 13px; }
  crypto-playground .cp-primary { min-height: 44px; margin-top: 5px; font-size: 15px; }
  crypto-playground .cp-output-heading { height: 32px; min-height: 32px; margin-bottom: 4px; }
  crypto-playground .cp-copy { min-height: 44px; font-size: 13px; }
  crypto-playground .cp-copy span { display: inline; }
  crypto-playground .cp-help { font-size: 11px; }
  crypto-playground .cp-footer { padding: 3px 18px 8px; gap: 0 12px; }
  crypto-playground .cp-status { flex-basis: 160px; font-size: 11px; }
  crypto-playground .cp-reset { min-height: 44px; min-width: 44px; font-size: 11px; }
}