.playground.svelte-j6hxly{padding:var(--space-2xl) var(--space-xl) var(--space-4xl)}.playground-header.svelte-j6hxly{margin-bottom:var(--space-xl)}.playground-header.svelte-j6hxly h1:where(.svelte-j6hxly){margin-bottom:var(--space-sm)}.playground-header.svelte-j6hxly p:where(.svelte-j6hxly){color:var(--text-secondary)}.example-tabs.svelte-j6hxly{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap}.example-tab.svelte-j6hxly{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.825rem;font-weight:500;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-primary);transition:all var(--transition-fast)}.example-tab.svelte-j6hxly:hover{border-color:var(--odin-accent);color:var(--text-primary)}.example-tab.active.svelte-j6hxly{background:var(--odin-accent);color:var(--text-on-accent);border-color:var(--odin-accent)}.panels.svelte-j6hxly{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-md);align-items:stretch;margin-bottom:var(--space-lg)}.panel.svelte-j6hxly{border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}.panel-header.svelte-j6hxly{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary)}.panel-label.svelte-j6hxly{display:flex;align-items:center;gap:var(--space-xs);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary)}.panel-stats-bar.svelte-j6hxly{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xs) var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);font-size:.725rem;color:var(--text-primary)}.panel-stats-bar.svelte-j6hxly .accent:where(.svelte-j6hxly){color:var(--odin-accent);font-weight:600}.panel-body.svelte-j6hxly{flex:1;min-height:520px;max-height:520px;overflow:auto}.panel-arrow.svelte-j6hxly{display:flex;align-items:center;color:var(--text-primary)}.error-display.svelte-j6hxly{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-lg);color:#ef4444;font-family:var(--font-mono);font-size:.825rem;line-height:1.6}.error-display.svelte-j6hxly svg{flex-shrink:0;margin-top:2px}.code-highlight.svelte-j6hxly{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;padding:var(--space-md);background:var(--bg-code);font-family:var(--font-mono);font-size:.825rem;line-height:1.7;border:none;border-radius:0;pointer-events:none;white-space:pre-wrap;word-wrap:break-word;overflow:auto}.editor-wrapper.svelte-j6hxly{position:relative;overflow:hidden}.code-editor.svelte-j6hxly{position:relative;width:100%;height:100%;padding:var(--space-md);background:transparent;color:transparent;caret-color:var(--text-primary);font-family:var(--font-mono);font-size:.825rem;line-height:1.7;border:none;resize:none;outline:none;white-space:pre-wrap;word-wrap:break-word;overflow:auto}.code-output.svelte-j6hxly{margin:0;padding:var(--space-md);height:100%;border:none;border-radius:0;font-size:.825rem;background:var(--bg-code)}.savings-bar.svelte-j6hxly{display:flex;align-items:center;gap:var(--space-lg);margin-left:auto}.savings-token.svelte-j6hxly{font-size:1.3rem;font-weight:400;color:#22c55e}.savings-size.svelte-j6hxly{font-size:1.3rem;font-weight:400;color:var(--odin-orange)}.explore-grid.svelte-j6hxly{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);margin-top:var(--space-xl)}.explore-card.svelte-j6hxly{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-xl) var(--space-lg);background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);text-decoration:none;color:var(--text-primary);transition:border-color var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}.explore-card.svelte-j6hxly:hover{border-color:var(--odin-accent);transform:translateY(-3px);box-shadow:0 8px 24px #00000026}.explore-card.svelte-j6hxly svg{color:var(--odin-accent)}.explore-card.svelte-j6hxly h3:where(.svelte-j6hxly){font-size:1.05rem;font-weight:600;margin-top:var(--space-xs)}.explore-card.svelte-j6hxly p:where(.svelte-j6hxly){font-size:.825rem;color:var(--text-secondary);line-height:1.6;flex:1}.explore-cta.svelte-j6hxly{display:flex;align-items:center;gap:var(--space-xs);font-size:.8rem;font-weight:600;color:var(--odin-accent);margin-top:var(--space-sm);transition:gap var(--transition-fast)}.explore-card.svelte-j6hxly:hover .explore-cta:where(.svelte-j6hxly){gap:var(--space-sm)}@media(max-width:1024px){.panels.svelte-j6hxly{grid-template-columns:1fr}.panel-arrow.svelte-j6hxly{justify-content:center;padding:var(--space-sm);transform:rotate(90deg)}.panel-body.svelte-j6hxly{min-height:350px;max-height:350px}.explore-grid.svelte-j6hxly{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.explore-grid.svelte-j6hxly{grid-template-columns:1fr}}