.kj-playground { background: #fff; }
.pg-main { max-width: 1240px; margin: auto; padding: 62px 36px 88px; }
.pg-eyebrow { color: var(--blue); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.pg-main h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.2; margin: 15px 0 20px; font-weight: 650; letter-spacing: -.035em; }
.pg-main h2 { font-size: 20px; line-height: 1.4; margin: 0 0 17px; letter-spacing: -.02em; }
.pg-intro { max-width: 790px; color: var(--muted); font-size: 16px; margin-bottom: 24px; }
.pg-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; }
.pg-boundary { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: var(--panel); padding: 18px 23px; margin: 30px 0; font-size: 13px; }
.pg-boundary p { margin: 0 0 8px; }
.pg-boundary p:last-child { margin: 0; }
.pg-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 24px; align-items: start; }
.pg-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 27px; min-width: 0; }
.pg-card > :first-child { margin-top: 0; }
.pg-card > :last-child { margin-bottom: 0; }
.pg-section-label { display: block; margin: 25px 0 7px; font-size: 13px; font-weight: 650; }
.pg-help { margin: 6px 0 12px; color: var(--muted); font-size: 12px; }
.pg-main code, .pg-main pre, .pg-main textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.pg-main code { overflow-wrap: anywhere; font-size: .9em; }
.pg-main input[type=password], .pg-main textarea, .pg-main select { width: 100%; min-width: 0; border: 1px solid #c5d4e8; background: #fff; color: var(--ink); border-radius: 9px; padding: 11px 12px; font-size: 13px; }
.pg-main textarea { resize: vertical; line-height: 1.65; tab-size: 2; }
.pg-inline { display: flex; gap: 9px; align-items: center; }
.pg-main button, .pg-button { border: 1px solid var(--blue); border-radius: 9px; color: #fff; background: var(--blue); padding: 11px 16px; font-size: 13px; font-weight: 600; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.pg-main button:hover { background: #005bda; }
.pg-main button:disabled { opacity: .55; cursor: default; }
.pg-main .pg-secondary { background: #fff; color: var(--blue); }
.pg-main .pg-secondary:hover { background: var(--accent); }
.pg-main .pg-key-clear { margin-top: 10px; padding: 7px 12px; }
.pg-main .pg-confirm { display: flex; align-items: flex-start; gap: 9px; margin: 24px 0 18px; border-top: 1px solid var(--line); padding-top: 19px; font-size: 12px; }
.pg-confirm input { width: 17px; height: 17px; flex: none; margin: 3px 0 0; accent-color: var(--blue); }
.pg-call-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-status { font-size: 13px; color: var(--muted); background: var(--panel); border-radius: 9px; padding: 13px 15px; margin: 18px 0 13px; overflow-wrap: anywhere; }
.pg-status[data-state=error], #input-error { color: #9d2f30; }
#input-error { font-size: 12px; min-height: 0; margin: 8px 0; }
.pg-attempt { font-size: 11px; color: var(--muted); margin: 12px 0 0; }
.pg-main pre { font-size: 11px; line-height: 1.7; padding: 17px; border-radius: 10px; background: var(--panel); white-space: pre-wrap; overflow-wrap: anywhere; margin-bottom: 0; max-height: 420px; overflow: auto; }
.pg-main details { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 15px; }
.pg-main summary { font-size: 12px; color: var(--blue); cursor: pointer; }
.pg-plot-title { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.pg-plot { width: 100%; aspect-ratio: 1; display: block; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: 16px 0 9px; font-size: 11px; color: var(--muted); }
.pg-legend span::before { content: ''; display: inline-block; width: 16px; height: 3px; margin: 0 6px 3px 0; background: currentColor; }
.pg-legend .pg-blue { color: #006bff; }.pg-legend .pg-teal { color: #168575; }.pg-legend .pg-grey { color: #7d8999; }.pg-legend .pg-orange { color: #b87418; }
.pg-result { grid-column: 1 / -1; }
.pg-result-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 25px; margin: 0 0 22px; }
.pg-result-facts dt { color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.pg-result-facts dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.pg-table-wrap { overflow-x: auto; }
.pg-main table { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pg-main th, .pg-main td { border-bottom: 1px solid var(--line); padding: 10px 12px; }
.pg-main th { font-weight: 600; color: var(--muted); background: var(--panel); }
.pg-main th:first-child, .pg-main td:first-child { text-align: left; }
.pg-main caption { text-align: left; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.pg-result-json { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.pg-result-json summary { color: var(--blue); }
@media(max-width:1000px) { .pg-main { padding: 42px 24px 65px; }.pg-workspace { grid-template-columns: 1fr; }.pg-plot { max-height: 560px; }.pg-card { padding: 23px; } }
@media(max-width:560px) { .pg-main { padding: 34px 18px 50px; }.pg-main h1 { font-size: 32px; }.pg-card { padding: 19px; }.pg-intro { font-size: 14px; }.pg-boundary { padding: 15px 17px; }.pg-result-facts, .pg-result-json { grid-template-columns: 1fr; }.pg-inline { align-items: stretch; flex-direction: column; }.pg-call-actions { flex-direction: column; }.pg-call-actions button { width: 100%; }.pg-main table { font-size: 11px; }.pg-main th, .pg-main td { padding: 8px; } }