.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,calc(100% - 2rem));margin:0 auto;padding:1.65rem 0 2.4rem}.playground-head{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:var(--space-lg);align-items:end;margin-bottom:var(--space-md)}.playground-head h1{max-width:none;font-size:clamp(2.7rem,6vw,4.1rem)}.playground-lead{max-width:48rem;margin:.9rem 0 0;color:var(--color-muted);font-size:1.02rem}.playground-status{display:inline-flex;align-items:center;min-height:2.35rem;padding:.42rem .75rem;border:1px solid var(--color-line);border-left:4px solid var(--color-muted);background:var(--color-bg);color:var(--color-muted);font-size:.88rem;font-weight:700}[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{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem var(--space-md);margin-bottom:var(--space-md);padding:.8rem;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-bg)}.sample-picker,.scale-picker{display:flex;align-items:center;gap:.65rem;min-width:0;color:var(--color-muted);font-size:.88rem;font-weight:720}.sample-picker select,.scale-picker select{min-height:2.75rem;padding:0 .65rem;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-ink);font:inherit;font-weight:650}.sample-picker select{min-width:min(22rem,62vw)}.scale-picker select{min-width:min(8rem,30vw)}.playground-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.55rem}.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{flex:1 1 100%;min-height:1.2rem;margin-top:.25rem;color:var(--color-muted);font-size:.82rem;font-weight:700}.playground-share-live:empty{display:none}.playground-workspace{display:grid;grid-template-columns:minmax(24rem,.94fr) minmax(0,1.06fr);grid-template-rows:minmax(31rem,calc(100vh - 18.5rem)) minmax(10rem,auto);gap:var(--space-md);align-items:stretch;min-height:42rem}.playground-panel{min-width:0;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-bg);overflow:hidden;box-shadow:0 14px 34px color-mix(in srgb,var(--color-ink),transparent 92%)}.editor-workbench,.preview-workbench{display:grid;grid-template-rows:auto minmax(0,1fr)}.diagnostics-workbench{grid-column:1 / -1;display:grid;grid-template-rows:auto minmax(0,1fr)}.playground-panel-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:2.55rem;padding:0 .9rem;border-bottom:1px solid var(--color-line);background:var(--color-panel);color:var(--color-muted);font-family:var(--font-mono);font-size:.76rem}.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{position:relative;min-height:100%;overflow:hidden;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);transition:opacity .15s ease;touch-action:none;cursor:grab;user-select:none}.preview-surface.is-panning{cursor:grabbing}.pan-zoom-stage{width:100%;height:100%;transform-origin:0 0;transition:transform .18s ease;will-change:transform}.pan-zoom-stage.is-panning{transition:none}.pan-zoom-placeholder{margin:0;padding:0;color:var(--color-muted)}.pan-zoom-reset{position:absolute;top:.65rem;right:.65rem;display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;border:1px solid var(--color-line);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-bg),transparent 15%);color:var(--color-muted);cursor:pointer;transition:background .1s ease,color .1s ease}.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{margin:0;color:var(--color-muted)}.preview-retry-btn{display:block;margin-top:.75rem;padding:.35em 1em;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:transparent;color:var(--color-accent);font-size:.875rem;cursor:pointer}.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{display:block;background:var(--color-bg);box-shadow:0 8px 24px color-mix(in srgb,var(--color-ink),transparent 90%)}.diagnostics-surface{min-height:10rem;max-height:18rem;overflow:auto;padding:.85rem;background:var(--color-bg)}.playground-diagnostic-list{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}.playground-diagnostic{display:grid;grid-template-columns:4.2rem 4.4rem minmax(0,1fr);gap:.65rem;align-items:baseline;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:.78rem}.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{margin:0;overflow-wrap:anywhere}@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:"";display:inline-block;width:.72rem;height:.72rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;margin-inline-end:var(--space-xs);flex-shrink:0;animation:pg-spin .65s linear infinite}[data-playground-state=loading] .preview-surface{opacity:.5}[data-playground-state=ready] .playground-status{animation:pg-flash-ready .35s ease-out both}[data-playground-state=warn] .playground-status{animation:pg-flash-warn .35s ease-out both}[data-playground-state=error] .playground-status{animation:pg-flash-error .4s ease-out both}@media(prefers-reduced-motion:reduce){[data-playground-state=loading] .playground-status:before{animation:none}[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{animation:none}: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{position:fixed;z-index:200;pointer-events:none;padding:.3rem .6rem;background:var(--color-ink);color:var(--color-bg);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.78rem;line-height:1.45;max-width:22rem;word-break:break-word;box-shadow:0 4px 12px color-mix(in srgb,var(--color-ink),transparent 80%);opacity:0;transition:opacity .15s ease;white-space:normal}.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(max-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{align-items:stretch;flex-direction:column}.sample-picker,.scale-picker{align-items:stretch;flex-direction:column;gap:var(--space-2xs)}.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(max-width:480px){.playground-head h1{font-size:2.55rem}.playground-lead{font-size:.95rem}.playground-actions .button{flex:1 1 10rem}.playground-panel-bar{padding:0 var(--space-sm);font-size:.68rem}.tdsl-editor{padding:.8rem;font-size:.76rem}.pan-zoom-stage{padding:.75rem}}