/* Playground (/try). Loaded only by that page, on top of site.css: it uses the same tokens (surface, line, accent, ease). */
.pg-wrap { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; padding-bottom: clamp(72px, 9vw, 128px); }
.pg { min-height: 640px; }
.pg-honest { margin: 20px auto 0; max-width: 720px; text-align: center; }
.pg-noscript { padding: 48px 0; text-align: center; }
.pg.is-loading, .pg.is-broken { display: grid; place-items: center; border-radius: var(--r-panel); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.pg-status { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 15px; }
.pg-status.is-error { flex-direction: column; text-align: center; padding: 0 24px; }
.pg-status[hidden], .pg-stage[hidden] { display: none; }
.pg-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--text-2); animation: spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pg-spinner { animation-duration: 3s; } }

.pg-stage { display: grid; gap: 16px; }
.pg-eyebrow { margin: 0; font: 600 12px/1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }

/* Guided tour */
.pg-tour { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-panel); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.pg-tour-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; }
.pg-tour-count { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-dots { display: flex; gap: 6px; margin-left: auto; }
.pg-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.pg-dots i.is-done { background: var(--text-2); }
.pg-dots i.is-now { background: var(--accent); transform: scale(1.35); }
.pg-tour-main { display: grid; gap: 18px; }
.pg-tour-title { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.14; letter-spacing: -0.018em; font-weight: 600; }
.pg-tour-body { margin-top: 8px; max-width: 34em; color: var(--text-2); font-size: 16px; line-height: 1.45; }
.pg-tour-cmds { margin: 0; padding: 12px 14px; list-style: none; display: grid; gap: 6px; align-content: start; border-radius: 12px; background: var(--bg-alt); font: 400 13px/1.5 var(--mono); }
.pg-tour-cmds li { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.pg-tour-cmds code { overflow-wrap: anywhere; color: var(--text); }
.pg-tour-cmds .pg-who { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fill-2); color: var(--text-2); font: 600 11px/1 var(--font); }
.pg-tour-cmds .is-skip { color: var(--text-2); font-family: var(--font); font-size: 13px; }
.pg-tour-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-tour-doneNote { margin-top: 14px; font-size: 15px; color: var(--text-2); }
.pg-tour-doneNote[hidden] { display: none; }
@media (min-width: 900px) { .pg-tour-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; } }

/* Terminal: the same dark surface as the redis-cli session on the home page, in both themes */
.pg-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pg-cols { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; } }
.pg-term { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-panel); background: #1D1D1F; color: #F5F5F7; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.5); overflow: hidden; }
@media (prefers-color-scheme: dark) { .pg-term { background: #1C1C1E; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); } }
.pg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.pg-tabs { display: inline-flex; padding: 3px; border-radius: 980px; background: rgba(255, 255, 255, 0.08); }
.pg-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 14px; border: 0; border-radius: 980px; background: transparent; color: #A1A1A6; font: 500 13px/1.2 var(--font); letter-spacing: -0.006em; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pg-tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.16); color: #F5F5F7; }
.pg-tab:hover { color: #F5F5F7; }
.pg-tab:focus-visible { outline-color: #FF8FA1; outline-offset: 1px; }
.pg-badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #FF6F86; color: #1D1D1F; font: 700 10px/1 var(--font); }
.pg-badge[hidden] { display: none; }
.pg-bar-actions { display: flex; gap: 4px; }
.pg-link { min-height: 28px; padding: 4px 10px; border: 0; border-radius: 980px; background: transparent; color: #A1A1A6; font: 500 13px/1.2 var(--font); cursor: pointer; transition: color 200ms ease, background-color 200ms ease; touch-action: manipulation; }
.pg-link:hover { color: #F5F5F7; background: rgba(255, 255, 255, 0.08); }
.pg-link:focus-visible, .pg-input:focus-visible, .pg-log:focus-visible, .pg-chip:focus-visible { outline-color: #FF8FA1; outline-offset: -3px; }
.pg-log { flex: 1 1 auto; height: clamp(300px, 46vh, 440px); overflow-y: auto; padding: 14px 16px 6px; font: 400 13.5px/1.6 var(--mono); letter-spacing: 0; overscroll-behavior: contain; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.pg-log[hidden] { display: none; }
.pg-entry { margin-bottom: 8px; }
.pg-cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
.pg-p { color: #8E8E93; -webkit-user-select: none; user-select: none; }
.pg-c { color: #F5F5F7; font-weight: 500; }
.pg-out { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; color: #D1D1D6; }
.pg-out.k-error { color: #FF8FA1; }
.pg-out.k-nil { color: #8E8E93; }
.pg-out.k-info { color: #8E8E93; font-family: var(--font); font-size: 13px; }
.pg-out.k-push { color: #F5F5F7; padding-left: 10px; box-shadow: inset 2px 0 0 #FF6F86; }
.pg-form { display: flex; align-items: center; gap: 8px; padding: 6px 16px 10px; }
.pg-prompt { flex: none; color: #8E8E93; font: 500 13.5px/1.6 var(--mono); -webkit-user-select: none; user-select: none; }
.pg-form input.pg-input { flex: 1 1 auto; width: auto; min-width: 0; min-height: 0; padding: 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #F5F5F7; font: 500 13.5px/1.5 var(--mono); letter-spacing: 0; caret-color: #FF6F86; outline: none; }
.pg-form input.pg-input:focus-visible { box-shadow: none; }
.pg-form:focus-within .pg-prompt { color: #FF8FA1; }
.pg-input::placeholder { color: #6E6E73; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.pg-chip { min-height: 28px; padding: 3px 10px; border: 0; border-radius: 980px; background: rgba(255, 255, 255, 0.08); color: #B9B9BE; font: 400 12px/1.3 var(--mono); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); touch-action: manipulation; }
.pg-chip:hover { background: rgba(255, 255, 255, 0.14); color: #F5F5F7; }
.pg-chip:active { transform: scale(0.97); }
@media (max-width: 733px) {
  .pg-form input.pg-input, .pg-prompt { font-size: 16px; } /* 16px keeps iOS from zooming the page when the field takes focus */
  .pg-log { font-size: 13px; height: clamp(280px, 50vh, 400px); }
}

/* Data explorer */
.pg-explorer { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-panel); background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 30px 80px -50px rgba(0, 0, 0, 0.35); overflow: hidden; }
.pg-explorer-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.pg-count { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-explorer-body { position: relative; flex: 1 1 auto; min-height: 220px; max-height: 480px; overflow-y: auto; padding: 0 10px 10px; }
.pg-keys { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.pg-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: 14px; color: var(--text-2); }
.pg-empty[hidden] { display: none; }
.pg-key { position: relative; border-radius: 12px; background: var(--bg-alt); transition: background-color 900ms ease; overflow: hidden; }
.pg-key.is-new, .pg-key.is-changed { background: color-mix(in srgb, var(--accent) 14%, var(--bg-alt)); transition-duration: 0ms; }
.pg-key-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; }
.pg-key-head:focus-visible { outline-offset: -2px; border-radius: 12px; }
.pg-key-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13.5px/1.3 var(--mono); }
.pg-type { padding: 2px 8px; border-radius: 980px; background: var(--fill-2); color: var(--text-2); font: 500 11px/1.4 var(--mono); }
.pg-ttl { min-width: 5.2em; text-align: right; font: 400 12px/1.3 var(--font); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-ttl.is-timed { color: var(--accent); }
.pg-bar-ttl { position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); opacity: 0.55; transform-origin: left; transform: scaleX(var(--left, 0)); transition: transform 900ms linear; }
.pg-bar-ttl[hidden] { display: none; }
.pg-key-body { padding: 2px 12px 12px; }
.pg-key-body[hidden] { display: none; }
.pg-key-size { margin-bottom: 6px; font-size: 12px; color: var(--text-2); }
.pg-val-text { margin: 0; font: 400 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.pg-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; font: 400 13px/1.5 var(--mono); }
.pg-fields dt { color: var(--text-2); }
.pg-fields dd { margin: 0; overflow-wrap: anywhere; }
.pg-items { margin: 0; padding-left: 22px; font: 400 13px/1.5 var(--mono); overflow-wrap: anywhere; }
.pg-explorer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.pg-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pg-meta [hidden] { display: none; }
.pg-explorer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .pg-key, .pg-bar-ttl, .pg-dots i { transition: none; } }