main.kh-main--playground{padding:var(--kh-header-h) 20px 24px;display:flex}.kh-pg-shell{flex-direction:column;justify-content:space-between;gap:20px;width:100%;max-width:420px;display:flex}.kh-pg-title{letter-spacing:-.02em;margin:8px 0 0;font-family:Cormorant Garamond,serif;font-size:clamp(26px,3.4vw,38px);font-weight:500;line-height:1.05}.kh-pg-lead{color:#deeaf7ad;max-width:34em;margin:8px 0 0;font-size:13.5px;font-weight:300;line-height:1.5}.kh-pg-group{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.kh-pg-btn{border:1px solid var(--kh-line);color:var(--kh-ash);font:inherit;cursor:pointer;background:#ffffff08;border-radius:999px;padding:8px 14px;font-size:13px;transition:opacity .2s,border-color .2s,color .2s}.kh-pg-btn:hover{color:var(--kh-ink-bright)}.kh-pg-btn[aria-pressed=true]{border-color:var(--kh-teal-soft);color:var(--kh-teal-soft);background:#7de0d21a}.kh-pg-btn:disabled{opacity:.4;cursor:default}.kh-pg-panel{border:1px solid var(--kh-line);background:#ffffff08;border-radius:14px;flex-direction:column;gap:12px;margin-top:14px;padding:14px 16px;display:flex}.kh-pg-field{color:var(--kh-ash);flex-direction:column;gap:6px;font-size:12.5px;display:flex}.kh-pg-field code{color:var(--kh-ink-bright);font-size:12px}.kh-pg-field input[type=range]{width:100%}.kh-pg-toggle{color:var(--kh-ash);cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.kh-pg-panel--aurora{gap:10px}.kh-pg-sliders{grid-template-columns:1fr;gap:10px 18px;display:grid}@media (min-width:520px){.kh-pg-sliders{grid-template-columns:1fr 1fr}}.kh-pg-field--slider input[type=range]{appearance:none;cursor:pointer;background:#ffffff1f;border-radius:999px;outline:none;height:6px;transition:box-shadow .2s}.kh-pg-field--geo input[type=range]{accent-color:var(--kh-teal-soft)}.kh-pg-field--drift input[type=range]{accent-color:var(--kh-amber)}.kh-pg-field--slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;border:2px solid #0a0c12cc;border-radius:50%;width:15px;height:15px;transition:transform .15s}.kh-pg-field--slider input[type=range]::-moz-range-thumb{cursor:pointer;border:2px solid #0a0c12cc;border-radius:50%;width:15px;height:15px;transition:transform .15s}.kh-pg-field--geo input[type=range]:hover,.kh-pg-field--geo input[type=range]:focus-visible{box-shadow:0 0 0 6px #7de0d21f}.kh-pg-field--drift input[type=range]:hover,.kh-pg-field--drift input[type=range]:focus-visible{box-shadow:0 0 0 6px #e6b25a1f}.kh-pg-field--slider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}.kh-pg-field--slider input[type=range]:active::-moz-range-thumb{transform:scale(1.25)}@media (prefers-reduced-motion:reduce){.kh-pg-field--slider input[type=range]::-webkit-slider-thumb{transition:none}.kh-pg-field--slider input[type=range]::-moz-range-thumb{transition:none}}.kh-pg-swatch-wrap{position:relative}.kh-pg-swatches{flex-wrap:wrap;gap:6px;display:flex}.kh-pg-swatch{cursor:pointer;opacity:.85;border:1px solid #ffffff29;border-radius:5px;width:30px;height:20px;padding:0;transition:opacity .2s,transform .2s,border-color .2s,box-shadow .2s}.kh-pg-swatch:hover{opacity:1;transform:translateY(-1px)}.kh-pg-swatch[aria-pressed=true]{opacity:1;border-color:#ffffffd9;box-shadow:0 0 10px #ffffff47}.kh-pg-swatch:not(.kh-pg-swatch--accent)+.kh-pg-swatch--accent{margin-left:8px}.kh-pg-popover{z-index:20;border:1px solid var(--kh-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080a10e0;border-radius:10px;width:fit-content;padding:10px;position:absolute;bottom:calc(100% + 8px);left:0;box-shadow:0 12px 32px #00000073}.kh-pg-popover .react-colorful{width:200px;height:160px}.kh-pg-panel-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.kh-pg-hint{color:var(--kh-ash);margin:0;font-size:11.5px;line-height:1.4}.kh-pg-motion{align-items:center;gap:10px;margin-top:12px;display:flex}.kh-pg-motion-btn[aria-pressed=true]{border-color:var(--kh-amber);color:var(--kh-amber);background:#e6b25a1a}.kh-pg-motion-note{color:var(--kh-ash);margin:0;font-size:11.5px;line-height:1.4}.kh-pg-dialog{border:1px solid var(--kh-line);max-width:420px;color:var(--kh-ink-bright);background:#080a10f5;border-radius:14px;padding:20px}.kh-pg-dialog::backdrop{background:#00000080}.kh-pg-dialog-title{margin:0 0 8px;font-weight:600}.kh-pg-dialog-body{color:var(--kh-ash);margin:0 0 16px;font-size:13px;line-height:1.5}.kh-pg-dialog-actions{justify-content:flex-end;gap:8px;display:flex}.kh-pg-btn--primary{border-color:var(--kh-amber);color:var(--kh-amber);background:#e6b25a24}.kh-pg-btn--primary:hover{color:var(--kh-amber);background:#e6b25a38}