.spacer-playground{margin:var(--space-l) 0}.spacer-playground figcaption{color:var(--color-text-muted);font-size:.9rem;margin-bottom:var(--space-m)}.playground-controls{display:grid;gap:.5rem;padding:.9rem 1.1rem;background:var(--color-surface-muted, var(--color-bg));border:1px solid var(--color-border);border-radius:8px;margin-bottom:var(--space-l, 1.75rem)}.playground-slider{display:grid;grid-template-columns:8rem 1fr 3.5rem;align-items:center;gap:1rem;cursor:pointer;min-height:1.75rem}.playground-slider-label,.playground-toggle>span{font-size:.72rem;font-weight:700;color:var(--color-text-muted);letter-spacing:.1em;text-transform:uppercase}.playground-slider input[type=range]{width:100%;margin:0;accent-color:var(--color-accent, #0066cc)}.playground-slider-value{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--color-text);text-align:right;font-weight:600}.playground-toggle{display:flex;align-items:center;gap:.6rem;cursor:pointer;min-height:1.75rem;padding-bottom:.55rem;border-bottom:1px solid var(--color-border)}.playground-toggle input[type=checkbox]{width:1.1rem;height:1.1rem;margin:0;accent-color:var(--color-accent, #0066cc);cursor:pointer}@media(max-width:520px){.playground-slider{grid-template-columns:1fr auto;gap:.25rem .75rem}.playground-slider-label{grid-column:1 / -1}.playground-slider input[type=range]{grid-column:1}.playground-slider-value{grid-column:2}}.playground-split{display:grid;grid-template-columns:1fr;gap:var(--space-l, 1.75rem)}.playground-panel{border:1px solid var(--color-border);border-radius:6px;overflow:hidden;background:var(--color-bg)}.playground-panel-label{padding:.4rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);background:var(--color-surface-muted, var(--color-bg))}.playground-preview{padding:var(--space-m);overflow-x:auto}.playground-source{--pg-syntax-tag: #0550ae;--pg-syntax-attr: #953800;--pg-syntax-value: #0a3622;--pg-syntax-punct: #6e7781;--pg-syntax-comment: #6e7781;--pg-syntax-gutter: rgba(0, 0, 0, .04);--pg-syntax-linenum: #8c959f;margin:0;padding:0;font-size:clamp(.7rem,1.1vw,.82rem);line-height:1.55;overflow:hidden;background:var(--color-bg);color:var(--color-text);counter-reset:pg-line}@media(prefers-color-scheme:dark){.playground-source{--pg-syntax-tag: #79c0ff;--pg-syntax-attr: #ffa657;--pg-syntax-value: #a5d6ff;--pg-syntax-punct: #8b949e;--pg-syntax-comment: #8b949e;--pg-syntax-gutter: rgba(255, 255, 255, .04);--pg-syntax-linenum: #6e7681}}.playground-source code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.playground-source .pg-ln{counter-increment:pg-line;display:block;padding:0 .9rem 0 3.25rem;position:relative;white-space:pre}.playground-source .pg-ln:before{content:counter(pg-line);position:absolute;left:0;top:0;bottom:0;width:2.5rem;padding-right:.6rem;text-align:right;color:var(--pg-syntax-linenum);background:var(--pg-syntax-gutter);font-variant-numeric:tabular-nums;user-select:none}.playground-source .pg-t{color:var(--pg-syntax-tag)}.playground-source .pg-a{color:var(--pg-syntax-attr)}.playground-source .pg-v{color:var(--pg-syntax-value)}.playground-source .pg-p{color:var(--pg-syntax-punct)}.playground-source .pg-c{color:var(--pg-syntax-comment);font-style:italic}.playground-source .pg-hl{background:#fff8c5;border-radius:3px;padding:0 .15em;box-shadow:0 0 0 1px #eac54f inset}@media(prefers-color-scheme:dark){.playground-source .pg-hl{background:#bb800959;box-shadow:0 0 0 1px #bb800999 inset}}.playground-stats{margin:var(--space-l, 1.75rem) 0 0;background:var(--color-surface-muted, var(--color-bg));border:1px solid var(--color-border);border-radius:8px;overflow:hidden;font-variant-numeric:tabular-nums}.playground-stats-row{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0}.playground-stats-row--modern{grid-template-columns:1fr;border-top:1px solid var(--color-border);background:color-mix(in srgb,var(--color-accent, #0066cc) 6%,transparent)}.playground-stat{margin:0;padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;position:relative}.playground-stat+.playground-stat:before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:1px;background:var(--color-border)}.playground-stat dt{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin:0}.playground-stat dd{margin:0;display:flex;align-items:baseline;gap:.35rem;line-height:1}.playground-stat dd strong{font-size:1.6rem;font-weight:700;color:var(--color-text);letter-spacing:-.01em}.playground-stat-unit{font-size:.85rem;color:var(--color-text-muted);font-weight:500}.playground-stat-note{font-size:.8rem;color:var(--color-text-muted)}.playground-stats-row--modern .playground-stat dd strong{color:var(--color-accent, var(--color-text))}.playground-compare{border-top:1px solid var(--color-border);background:color-mix(in srgb,var(--color-accent, #0066cc) 6%,transparent);padding:1rem 1.1rem 1.1rem;display:grid;gap:.9rem}.playground-compare-headline{display:flex;align-items:baseline;flex-wrap:wrap;gap:.35rem .6rem;line-height:1.1}.playground-compare-num{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--color-accent, var(--color-text));letter-spacing:-.02em;font-variant-numeric:tabular-nums}.playground-compare-unit{font-size:1.1rem;font-weight:700;color:var(--color-text)}.playground-compare-note{flex-basis:100%;font-size:.82rem;color:var(--color-text-muted)}.playground-compare-bars{display:grid;gap:.55rem}.playground-compare-row{display:grid;grid-template-columns:10.5rem 1fr;align-items:center;gap:.9rem}.playground-compare-row-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted)}.playground-compare-row-bar{position:relative;height:1.9rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;overflow:hidden}.playground-compare-row-fill{position:absolute;inset:0 auto 0 0;width:0%;transition:width .32s ease-out}.playground-compare-row-fill--old{background:repeating-linear-gradient(45deg,#ff3b30,#ff3b30 4px,#ffd60a 4px 8px);opacity:.85}.playground-compare-row-fill--new{background:var(--color-accent, #0066cc);opacity:.75}.playground-compare-row-tag{position:absolute;inset:0;display:flex;align-items:center;padding:0 .6rem;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--color-text);mix-blend-mode:normal;z-index:1}@media(max-width:520px){.playground-compare-row{grid-template-columns:1fr;gap:.3rem}}.playground-modern{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1px;background:var(--color-border);border:1px solid var(--color-border);border-top:none;border-radius:0 0 8px 8px;overflow:hidden}@media(max-width:640px){.playground-modern{grid-template-columns:1fr}}.playground-modern-col{background:var(--color-bg);display:flex;flex-direction:column}.playground-modern-label{padding:.4rem .9rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);background:color-mix(in srgb,var(--color-accent, #0066cc) 6%,transparent);border-bottom:1px solid var(--color-border)}.playground-source--modern{flex:1;padding-bottom:.6rem}@media(max-width:560px){.playground-stats-row{grid-template-columns:1fr}.playground-stat+.playground-stat:before{left:1.1rem;right:1.1rem;top:0;bottom:auto;width:auto;height:1px}}.playground-table{border-collapse:collapse;background:#fff;color:#000;font-family:Verdana,Geneva,sans-serif;font-size:12px}.playground-table td{padding:0;border:none;text-align:left}.playground-table .pg-header{background:#036;color:#fff;font-weight:700;padding:8px 12px}.playground-table .pg-cell{padding:0;vertical-align:top}.pg-cell-inner{padding:8px}.playground-table .pg-cell--sidebar{background:#eef3f8}.playground-table .pg-cell--main,.playground-table .pg-cell--gutter{background:#fff}.playground-table a{color:#00e;text-decoration:underline}.pg-spacer{display:block;background:transparent}.pg-spacer--h{height:1px}.pg-spacer--v{width:1px}.pg-spacer[data-spacer=sidebar]{width:var(--pg-sidebar, 140px)}.pg-spacer[data-spacer=gutter]{width:var(--pg-gutter, 20px)}.pg-spacer[data-spacer=rowgap]{height:var(--pg-rowgap, 20px)}.pg-spacer--1x1{width:1px;height:1px}.pg-line{background:#036;padding:0;font-size:0;line-height:0}.pg-line--h{height:1px}.pg-line--v{width:1px}.spacer-playground.show-spacers .pg-spacer{background:repeating-linear-gradient(45deg,#ff3b30,#ff3b30 3px,#ffd60a 3px 6px);outline:1px dashed #ff3b30}.spacer-playground.show-spacers .pg-spacer--1x1{animation:pg-spacer-pulse 1.4s ease-in-out infinite}@keyframes pg-spacer-pulse{0%,to{outline-color:#ff3b30;outline-width:1px;box-shadow:0 0 #ff3b3080}50%{outline-color:#ffd60a;outline-width:2px;box-shadow:0 0 0 3px #ff3b3040}}@media(prefers-reduced-motion:reduce){.spacer-playground.show-spacers .pg-spacer--1x1{animation:none}}@media(prefers-reduced-motion:reduce){.pg-spacer,.playground-table{transition:none!important}}