.playground-page{min-height:calc(100vh - 4rem)}.playground-hero{display:flex;align-items:end;justify-content:space-between;gap:2rem;padding:1.5rem 0 2rem}.playground-field{display:grid;gap:.45rem;color:#475569;font-size:.78rem}.dark .playground-field{color:#cbd5e1}.playground-field>span{font-weight:700}.playground-field input{width:100%;border-radius:.6rem;border:1px solid rgb(226 232 240);background:#fff;padding:.65rem .8rem;color:#0f172a;font:inherit;font-weight:500}.dark .playground-field input{border-color:#334155;background:#0f172ab8;color:#fff}.playground-picker-note{margin:-.35rem 0 .85rem;color:#64748b;font-size:.78rem;line-height:1.5}.dark .playground-picker-note{color:#94a3b8}.playground-loomi-select{display:block;width:100%}.playground-shell{display:grid;gap:1rem}@media(min-width:64rem){.playground-shell{grid-template-columns:minmax(0,1fr) 22rem;align-items:start}}.playground-side{display:grid;gap:1rem;align-content:start}.playground-preview-panel,.playground-picker-panel,.playground-controls-panel{border:1px solid rgb(226 232 240);border-radius:1rem;background:#fff;box-shadow:0 18px 45px -32px #0f172a66}.dark .playground-preview-panel,.dark .playground-picker-panel,.dark .playground-controls-panel{border-color:#334155;background:#0f172ab8}.playground-preview-panel{overflow:hidden}.playground-panel-top,.playground-controls-heading,.playground-code-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.playground-panel-top{border-bottom:1px solid rgb(226 232 240);padding:1rem}.dark .playground-panel-top{border-color:#334155}.playground-panel-top h2,.playground-controls-heading h2{margin:0;color:#0f172a;font-size:1rem;font-weight:750}.dark .playground-panel-top h2,.dark .playground-controls-heading h2{color:#fff}.playground-panel-top p{margin:.25rem 0 0;color:#64748b;font-size:.86rem;line-height:1.5}.dark .playground-panel-top p{color:#94a3b8}.playground-docs-link,.playground-reset,.playground-copy-button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border:0;background:transparent;color:#2563eb;font-size:.82rem;font-weight:750;text-decoration:none;cursor:pointer}.dark .playground-docs-link,.dark .playground-reset,.dark .playground-copy-button{color:#60a5fa}.playground-preview-stage{display:grid;min-height:25rem;place-items:center;padding:2rem;background:linear-gradient(90deg,rgb(226 232 240 / .55) 1px,transparent 1px),linear-gradient(rgb(226 232 240 / .55) 1px,transparent 1px),#f8fafc;background-size:28px 28px}.dark .playground-preview-stage{background:linear-gradient(90deg,rgb(51 65 85 / .55) 1px,transparent 1px),linear-gradient(rgb(51 65 85 / .55) 1px,transparent 1px),#020617}.playground-preview{display:flex;width:min(100%,44rem);min-height:12rem;align-items:center;justify-content:center;border:1px solid rgb(226 232 240);border-radius:1rem;background:#fff;padding:2rem}.dark .playground-preview{border-color:#334155;background:#0f172a}.playground-preview :is(loomi-select,loomi-datepicker,loomi-tag-input,loomi-divider,loomi-pagination,loomi-input,loomi-textarea,loomi-password,loomi-number,loomi-slider,loomi-progress-bar,loomi-countries,loomi-timezonepicker,loomi-filepicker,loomi-card,loomi-text-editor){width:100%}.playground-preview loomi-divider[orientation=vertical]{width:auto;min-height:8rem}.playground-code-block{border-top:1px solid rgb(226 232 240);background:#f1f5f9}.dark .playground-code-block{border-color:#334155;background:#1e293b99}.playground-code-header{border-bottom:1px solid rgb(226 232 240);padding:.75rem 1rem;color:#64748b;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.dark .playground-code-header{border-color:#334155;color:#94a3b8}.playground-copy-button{min-height:2rem;border-radius:.5rem;padding:0 .65rem;color:#64748b}.playground-copy-button:hover,.playground-copy-button.is-copied{background:#e2e8f0;color:#0f172a}.dark .playground-copy-button{color:#94a3b8}.dark .playground-copy-button:hover,.dark .playground-copy-button.is-copied{background:#334155;color:#fff}.playground-code-block pre{margin:0;overflow-x:auto;padding:1rem}.playground-code-block code{color:#334155;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;font-size:.82rem;line-height:1.6}.dark .playground-code-block code{color:#cbd5e1}.playground-code-block .tok-tag{color:#2563eb}.dark .playground-code-block .tok-tag{color:#60a5fa}.playground-code-block .tok-attr{color:#7c3aed}.dark .playground-code-block .tok-attr{color:#a78bfa}.playground-code-block .tok-str{color:#15803d}.dark .playground-code-block .tok-str{color:#4ade80}.playground-picker-panel,.playground-controls-panel{padding:1rem}@media(min-width:64rem){.playground-side{position:sticky;top:5rem;max-height:calc(100vh - 6rem)}.playground-controls-panel{overflow-y:auto}}.playground-controls-heading{margin-bottom:1rem}.playground-controls{display:grid;gap:.85rem}.playground-check-control{display:flex;min-height:2.55rem;align-items:center;justify-content:space-between;gap:.75rem;border:1px solid rgb(226 232 240);border-radius:.6rem;padding:.6rem .7rem;color:#334155;font-size:.85rem;font-weight:650}.dark .playground-check-control{border-color:#334155;color:#e2e8f0}.playground-check-control loomi-toggle{margin-bottom:0;flex:none}.playground-range-row{display:grid;grid-template-columns:minmax(0,1fr) 3rem;align-items:center;gap:.7rem}.playground-range-row input{padding-inline:0;accent-color:rgb(37 99 235)}.playground-range-row output{border-radius:.45rem;background:#f1f5f9;padding:.35rem .45rem;color:#334155;font-size:.78rem;font-weight:750;text-align:center}.dark .playground-range-row output{background:#1e293b;color:#e2e8f0}