.playground-shell{background:linear-gradient(180deg, color-mix(in srgb, var(--color-panel), transparent 10%), transparent 16rem), var(--color-bg)}.playground-main{width:min(1280px,100% - 2rem);margin:0 auto;padding:1.65rem 0 2.4rem}.playground-head{gap:var(--space-lg);margin-bottom:var(--space-md);grid-template-columns:minmax(0,1fr) max-content;align-items:end;display:grid}.playground-head h1{max-width:none;font-size:clamp(2.7rem,6vw,4.1rem)}.playground-lead{max-width:48rem;color:var(--color-muted);margin:.9rem 0 0;font-size:1.02rem}.playground-status{border:1px solid var(--color-line);border-left:4px solid var(--color-muted);background:var(--color-bg);min-height:2.35rem;color:var(--color-muted);font-size:var(--text-xs);align-items:center;padding:.42rem .75rem;font-weight:700;display:inline-flex}[data-playground-state=ready] .playground-status{border-left-color:var(--color-accent);color:var(--color-accent-strong)}[data-playground-state=warn] .playground-status{border-left-color:var(--color-gold);color:var(--color-status-warn)}[data-playground-state=error] .playground-status{border-left-color:var(--color-status-error);color:var(--color-status-error)}.playground-toolbar{justify-content:space-between;align-items:center;gap:.75rem var(--space-md);margin-bottom:var(--space-md);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-bg);flex-wrap:wrap;padding:.8rem;display:flex}.sample-picker,.scale-picker{min-width:0;color:var(--color-muted);font-size:var(--text-xs);align-items:center;gap:.65rem;font-weight:720;display:flex}.sample-picker select,.scale-picker select{border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-bg);min-height:2.75rem;color:var(--color-ink);font:inherit;padding:0 .65rem;font-weight:650}.sample-picker select{min-width:min(22rem,62vw)}.scale-picker select{min-width:min(8rem,30vw)}.labels-toggle{color:var(--color-muted);font-size:var(--text-xs);cursor:pointer;align-items:center;gap:.45rem;font-weight:720;display:flex}.labels-toggle input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--color-accent);cursor:pointer}.playground-actions{flex-wrap:wrap;justify-content:flex-end;gap:.55rem;display:flex}.playground-actions .button{min-height:2.75rem;padding:.55rem var(--space-md);border:1px solid var(--color-line);cursor:pointer;font:inherit}.playground-actions .button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.playground-actions .button:disabled{cursor:not-allowed;opacity:.7}.playground-share-live{min-height:1.2rem;color:var(--color-muted);font-size:var(--text-2xs);flex:100%;margin-top:.25rem;font-weight:700}.playground-share-live:empty{display:none}.playground-workspace{gap:var(--space-md);grid-template-rows:minmax(31rem,calc(100vh - 18.5rem)) minmax(10rem,auto);grid-template-columns:minmax(24rem,.94fr) minmax(0,1.06fr);align-items:stretch;min-height:42rem;display:grid}.playground-panel{border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-bg);min-width:0;box-shadow:0 14px 34px var(--shadow-color);overflow:hidden}.editor-workbench,.preview-workbench{grid-template-rows:auto minmax(0,1fr);display:grid}.diagnostics-workbench{grid-column:1/-1;grid-template-rows:auto minmax(0,1fr);display:grid}.playground-panel-bar{justify-content:space-between;align-items:center;gap:var(--space-md);border-bottom:1px solid var(--color-line);background:var(--color-panel);min-height:2.55rem;color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-2xs);padding:0 .9rem;display:flex}.playground-panel-bar span:first-child{color:var(--color-ink);font-weight:760}.cm-editor-host{width:100%;height:100%;overflow:hidden}.cm-editor-host .cm-editor{height:100%}.cm-editor-host:focus-within .cm-editor{outline:2px solid var(--color-accent);outline-offset:-2px}.cm-editor-host:focus-within{outline:1px solid var(--color-terminal-ink);outline-offset:-4px}@media (prefers-reduced-motion:reduce){.cm-editor-host .cm-cursorLayer{animation:none!important}}:root[data-a11y-reduced-motion=true] .cm-editor-host .cm-cursorLayer{animation:none!important}.preview-surface{background:linear-gradient(90deg, color-mix(in srgb, var(--color-accent), transparent 93%) 1px, transparent 1px) 0 0 / 2.8rem 100%, linear-gradient(180deg, color-mix(in srgb, var(--color-ink), transparent 94%) 1px, transparent 1px) 0 0 / 100% 2.8rem, var(--color-panel);touch-action:none;cursor:grab;user-select:none;min-height:100%;transition:opacity .15s;position:relative;overflow:hidden}.preview-surface.is-panning{cursor:grabbing}.pan-zoom-stage{transform-origin:0 0;will-change:transform;width:100%;height:100%;transition:transform .18s}.pan-zoom-stage.is-panning{transition:none}.pan-zoom-placeholder{color:var(--color-muted);margin:0;padding:0}.pan-zoom-reset{border:1px solid var(--color-line);border-radius:var(--radius-md);background:color-mix(in srgb, var(--color-bg), transparent 15%);min-width:2.75rem;min-height:2.75rem;color:var(--color-muted);cursor:pointer;justify-content:center;align-items:center;transition:background .1s,color .1s;display:inline-flex;position:absolute;top:.65rem;right:.65rem}.pan-zoom-reset:hover{background:var(--color-panel);color:var(--color-ink)}.pan-zoom-reset:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.pan-zoom-stage{transition:none}}:root[data-a11y-reduced-motion=true] .pan-zoom-stage{transition:none}.preview-surface p,.diagnostics-empty{color:var(--color-muted);margin:0}.preview-retry-btn{border:1px solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-accent);font-size:var(--text-xs);cursor:pointer;background:0 0;margin-top:.75rem;padding:.35em 1em;display:block}.preview-retry-btn:hover{background:var(--color-accent);color:var(--color-on-accent)}.preview-retry-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.pan-zoom-stage svg{background:var(--color-bg);box-shadow:0 8px 24px var(--shadow-color);display:block}.diagnostics-surface{background:var(--color-bg);min-height:10rem;max-height:18rem;padding:.85rem;overflow:auto}.playground-diagnostic-list{gap:.55rem;margin:0;padding:0;list-style:none;display:grid}.playground-diagnostic{padding:var(--space-sm);border:1px solid var(--color-line);border-left:4px solid var(--color-muted);border-radius:var(--radius-md);color:var(--color-muted);font-family:var(--font-mono);font-size:var(--text-2xs);grid-template-columns:4.2rem 4.4rem minmax(0,1fr);align-items:baseline;gap:.65rem;display:grid}.playground-diagnostic.error{border-left-color:var(--color-status-error)}.playground-diagnostic.warning{border-left-color:var(--color-gold)}.playground-diagnostic.info{border-left-color:var(--color-sky)}.playground-diagnostic span{color:var(--color-ink);font-weight:760}.playground-diagnostic.error span{color:var(--color-status-error)}.playground-diagnostic.warning span{color:var(--color-status-warn)}.playground-diagnostic.info span{color:var(--color-sky)}.playground-diagnostic strong{color:var(--color-muted);font-weight:650}.playground-diagnostic p{overflow-wrap:anywhere;margin:0}@keyframes pg-spin{to{transform:rotate(360deg)}}@keyframes pg-flash-ready{0%{background:color-mix(in srgb, var(--color-accent), transparent 70%)}to{background:var(--color-bg)}}@keyframes pg-flash-warn{0%{background:color-mix(in srgb, var(--color-gold), transparent 70%)}to{background:var(--color-bg)}}@keyframes pg-flash-error{0%{background:color-mix(in srgb, var(--color-status-error), transparent 65%)}to{background:var(--color-bg)}}[data-playground-state=loading] .playground-status:before{content:"";width:.72rem;height:.72rem;border:2px solid;border-top-color:#0000;border-radius:50%;flex-shrink:0;margin-inline-end:var(--space-xs);animation:.65s linear infinite pg-spin;display:inline-block}[data-playground-state=loading] .preview-surface{opacity:.5}[data-playground-state=ready] .playground-status{animation:.35s ease-out both pg-flash-ready}[data-playground-state=warn] .playground-status{animation:.35s ease-out both pg-flash-warn}[data-playground-state=error] .playground-status{animation:.4s ease-out both pg-flash-error}@media (prefers-reduced-motion:reduce){[data-playground-state=loading] .playground-status:before,[data-playground-state=ready] .playground-status,[data-playground-state=warn] .playground-status,[data-playground-state=error] .playground-status{animation:none}.preview-surface{transition:none}}:root[data-a11y-reduced-motion=true] [data-playground-state=loading] .playground-status:before,:root[data-a11y-reduced-motion=true] :is([data-playground-state=ready],[data-playground-state=warn],[data-playground-state=error]) .playground-status{animation:none}:root[data-a11y-reduced-motion=true] .preview-surface{transition:none}.tdsl-tooltip{z-index:200;pointer-events:none;background:var(--color-ink);color:var(--color-bg);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:var(--text-2xs);word-break:break-word;max-width:22rem;box-shadow:0 4px 12px var(--shadow-color-strong);opacity:0;white-space:normal;padding:.3rem .6rem;line-height:1.45;transition:opacity .15s;position:fixed}.tdsl-tooltip[data-visible=true]{opacity:1}@media (prefers-reduced-motion:reduce){.tdsl-tooltip{transition:none}}:root[data-a11y-reduced-motion=true] .tdsl-tooltip{transition:none}@media (width<=820px){.playground-main{width:min(100% - 1rem,1280px);padding-top:var(--space-md)}.playground-head,.playground-workspace{grid-template-columns:1fr}.playground-head{align-items:start}.playground-status{width:fit-content}.playground-toolbar{flex-direction:column;align-items:stretch}.sample-picker,.scale-picker{align-items:stretch;gap:var(--space-2xs);flex-direction:column}.labels-toggle{justify-content:flex-start}.sample-picker select,.scale-picker select{width:100%;min-width:0}.playground-actions{justify-content:flex-start}.playground-workspace{grid-template-rows:minmax(22rem,42vh) minmax(22rem,42vh) auto;min-height:auto}.diagnostics-workbench{grid-column:auto}.diagnostics-surface{max-height:16rem}.playground-diagnostic{grid-template-columns:4.2rem minmax(0,1fr)}.playground-diagnostic p{grid-column:1/-1}}@media (width<=480px){.playground-head h1{font-size:2.55rem}.playground-lead{font-size:var(--text-md)}.playground-actions .button{flex:10rem}.playground-panel-bar{padding:0 var(--space-sm);font-size:var(--text-3xs)}.tdsl-editor{font-size:var(--text-2xs);padding:.8rem}.pan-zoom-stage{padding:.75rem}}