.playground{border:1px solid var(--color-border);border-radius:var(--radius-panel);background:var(--color-surface);min-width:0;color:var(--color-fg);isolation:isolate;margin-block:36px;overflow:clip;container-type:inline-size}.playground .playground-heading{color:var(--color-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:20px 24px;font-size:.75rem;line-height:1.5;display:flex}.playground .playground-heading>span:first-child{color:var(--color-fg);font-size:.8125rem;font-weight:500}.playground .playground-stage{border-block:1px solid var(--color-border);background:var(--color-preview);width:100%;height:auto;display:block}.playground .playground-stage[data-layout=compact]{display:none}@container (max-width:480px){.playground .playground-stage[data-layout=wide]{display:none}.playground .playground-stage[data-layout=compact]{display:block}}.pg-line{fill:none;stroke:var(--color-faint);stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round}.pg-line[data-tone=strong]{stroke:var(--color-fg);stroke-width:1.75px}.pg-line[data-tone=accent]{stroke:var(--color-accent);stroke-width:1.75px}.pg-line[data-tone=quiet]{stroke:var(--color-border)}.pg-line[data-dashed]{stroke-dasharray:4 5}.pg-fill{fill:var(--color-caption)}.pg-fill[data-tone=strong]{fill:var(--color-fg)}.pg-fill[data-tone=accent]{fill:var(--color-accent)}.pg-fill[data-tone=quiet]{fill:color-mix(in srgb, var(--color-faint) 42%, var(--color-preview))}.pg-fill[data-tone=ground]{fill:var(--color-surface-raised)}.pg-box{fill:var(--color-surface);stroke:var(--color-border);stroke-width:1px}.pg-box[data-tone=strong]{stroke:var(--color-fg)}.pg-box[data-tone=accent]{stroke:var(--color-accent)}.pg-box[data-tone=quiet]{fill:#0000;stroke-dasharray:3 4}.pg-ring{fill:none;stroke:var(--color-fg);stroke-width:1.5px}.pg-text{fill:var(--color-muted);font-size:12px}.pg-text[data-tone=strong]{fill:var(--color-fg)}.pg-text[data-tone=quiet]{fill:var(--color-faint)}.pg-text[data-size=small]{font-size:10.5px}.pg-text[data-size=large]{font-size:14px;font-weight:500}.pg-move{transition:fill .15s,stroke .15s,opacity .15s}.playground .playground-controls{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 24px;padding:20px 24px 4px;display:grid}.playground .playground-field{border:0;min-width:0;margin:0;padding:0}.playground .playground-field-heading{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;display:flex}.playground .playground-field label,.playground .playground-field legend{color:var(--color-muted);font-size:.75rem;line-height:1.5}.playground .playground-field legend{margin-bottom:8px;padding:0}.playground .playground-field output{color:var(--color-fg);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.playground input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:28px;margin:0;display:block}.playground input[type=range]::-webkit-slider-runnable-track{background:var(--color-border);border-radius:2px;height:4px}.playground input[type=range]::-moz-range-track{background:var(--color-border);border-radius:2px;height:4px}.playground input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-fg);border:0;border-radius:50%;width:18px;height:18px;margin-top:-7px}.playground input[type=range]::-moz-range-thumb{background:var(--color-fg);border:0;border-radius:50%;width:18px;height:18px}.playground .playground-field-wide{grid-column:1/-1}.playground .playground-rules{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;display:grid}.playground .playground-rule{border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-raised);cursor:pointer;place-items:center;min-height:48px;padding:8px 4px;transition:border-color .15s;display:grid}.playground .playground-rule svg{width:34px;height:26px;display:block}.pg-cell{fill:none;stroke:var(--color-faint);stroke-width:1px}.pg-cell[data-on]{fill:var(--color-caption);stroke:var(--color-caption)}.pg-cell[data-result][data-on]{fill:var(--color-accent);stroke:var(--color-accent)}@container (max-width:480px){.playground .playground-rules{grid-template-columns:repeat(4,minmax(0,1fr))}}.playground .playground-options{flex-wrap:wrap;gap:6px;display:flex}.playground .playground-options label{display:inline-flex;position:relative}.playground .playground-options input{opacity:0;cursor:pointer;position:absolute;inset:0}.playground .playground-options span{border:1px solid var(--color-border);border-radius:var(--radius-control);min-height:36px;color:var(--color-muted);align-items:center;padding:7px 12px;font-size:.8125rem;line-height:1.4;transition:color .15s,background-color .15s,border-color .15s;display:inline-flex}.playground .playground-options input:checked+span{border-color:var(--color-faint);background:var(--color-surface-raised);color:var(--color-fg)}.playground .playground-options input:focus-visible+span{outline:2px solid var(--color-accent);outline-offset:2px}.playground .playground-switch{min-height:36px;color:var(--color-paragraph);cursor:pointer;align-items:center;gap:10px;font-size:.8125rem;line-height:1.4;display:inline-flex;position:relative}.playground .playground-switch input{opacity:0;position:absolute}.playground .playground-switch>span{background:var(--color-border);border-radius:999px;flex-shrink:0;width:34px;height:20px;transition:background-color .15s;position:relative}.playground .playground-switch>span:after{content:"";background:var(--color-muted);border-radius:50%;width:14px;height:14px;transition:translate .15s,background-color .15s;position:absolute;top:3px;left:3px}.playground .playground-switch input:checked+span{background:var(--color-faint)}.playground .playground-switch input:checked+span:after{background:var(--color-fg);translate:14px}.playground .playground-switch input:focus-visible+span{outline:2px solid var(--color-accent);outline-offset:2px}.playground .playground-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.playground .playground-action{border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface-raised);min-height:36px;color:var(--color-fg);cursor:pointer;align-items:center;padding:7px 13px;font-size:.8125rem;line-height:1.4;transition:border-color .15s,scale .2s ease-out;display:inline-flex}.playground .playground-action:disabled{color:var(--color-faint);cursor:default}.playground .playground-status{color:var(--color-fg);text-wrap:pretty;margin:0;padding:16px 24px 0;font-size:16px;line-height:26px}.playground .playground-caption{color:var(--color-muted);text-wrap:pretty;margin:0;padding:8px 24px 22px;font-size:.75rem;line-height:1.6}.playground :is(input,button):focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}@media (max-width:600px){.playground .playground-heading{padding:16px 18px}.playground .playground-controls{padding:16px 18px 2px}.playground .playground-status{padding:14px 18px 0}.playground .playground-caption{padding:8px 18px 18px}}@media (hover:hover) and (pointer:fine){.playground .playground-options label:hover span,.playground .playground-rule:hover,.playground .playground-action:not(:disabled):hover{border-color:var(--color-faint);color:var(--color-fg)}}@media (prefers-reduced-motion:no-preference){.playground .playground-action:not(:disabled):active{scale:.98}}@media (prefers-reduced-motion:reduce){.pg-move,.playground .playground-options span,.playground .playground-switch>span,.playground .playground-switch>span:after{transition:none}}@media print{.playground .playground-controls{display:none}}