/* The pele toy. Controls come from kit.css; this is only the two panes. */
.pt-box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; }
.pt-in, .pt-out { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pt-lab { font: 500 13px/1.2 Inter, ui-sans-serif, system-ui, sans-serif; color: var(--k-body, #62625f); display: flex; justify-content: space-between; gap: 8px; }
.pt-ms { color: #099268; font-variant-numeric: tabular-nums; }
.pt textarea { box-sizing: border-box; width: 100%; min-height: 240px; white-space: pre; overflow-x: auto; flex: 1; resize: vertical; padding: 12px 14px; border: 0; border-radius: 12px; font: 16px/1.5 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-ligatures: none; color: var(--k-ink, #1c1c1a); background: var(--k-soft, #f4f4f2); box-shadow: var(--k-track, inset 0 0 0 1px rgb(0 0 0 / .06)); }
.pt textarea:focus-visible { outline: 2px solid #2456f5; outline-offset: 2px; }
.pt-svg { flex: 1; min-height: 220px; display: grid; place-items: center; padding: 16px; border-radius: 12px; background: var(--cs-paper); box-shadow: 0 0 0 0.5px var(--cs-edge); overflow: hidden; }
.pt-svg > svg { width: 100%; height: auto; max-height: 360px; }
.pt.pt-tall .pt-svg > svg { max-height: 520px; width: auto; max-width: 100%; }
.pt-ctl { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; }
@media (max-width: 639px) { .pt-box { grid-template-columns: 1fr; } .pt textarea { min-height: 150px; } }