.PlaygroundShowcase-module__4l6hRG__showcase{background:radial-gradient(circle at 100% 0,#6366f10d,#0000 40%),radial-gradient(circle at 0 100%,#a855f70d,#0000 40%);padding:8rem 0;position:relative}.PlaygroundShowcase-module__4l6hRG__header{text-align:center;max-width:800px;margin:0 auto 4rem}.PlaygroundShowcase-module__4l6hRG__badge{background:rgba(var(--primary-rgb), .1);color:var(--primary);border:1px solid rgba(var(--primary-rgb), .2);border-radius:99px;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;display:inline-flex}.PlaygroundShowcase-module__4l6hRG__title{letter-spacing:-.02em;margin-bottom:1.5rem;font-size:3.5rem;font-weight:800}.PlaygroundShowcase-module__4l6hRG__subtitle{color:var(--sidebar-fg);font-size:1.25rem;line-height:1.6}.PlaygroundShowcase-module__4l6hRG__layout{grid-template-columns:350px 1fr;align-items:start;gap:3rem;display:grid}.PlaygroundShowcase-module__4l6hRG__tabs{flex-direction:column;gap:1rem;display:flex}.PlaygroundShowcase-module__4l6hRG__tabButton{background:var(--card);border:1px solid var(--border);text-align:left;cursor:pointer;border-radius:1.25rem;align-items:center;gap:1.25rem;padding:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.PlaygroundShowcase-module__4l6hRG__tabButton:hover{border-color:var(--primary);transform:translate(8px);box-shadow:0 10px 15px -3px #0000001a}.PlaygroundShowcase-module__4l6hRG__activeTab{background:var(--background);border-color:var(--primary)}.PlaygroundShowcase-module__4l6hRG__tabIcon{background:var(--background);border:1px solid var(--border);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;transition:all .3s;display:flex}.PlaygroundShowcase-module__4l6hRG__tabText{flex-direction:column;display:flex}.PlaygroundShowcase-module__4l6hRG__tabName{color:var(--foreground);margin-bottom:.25rem;font-size:1.1rem;font-weight:700}.PlaygroundShowcase-module__4l6hRG__tabDesc{color:var(--sidebar-fg);font-size:.85rem;line-height:1.4}.PlaygroundShowcase-module__4l6hRG__activeGlow{background:var(--primary);filter:blur(2px);width:4px;position:absolute;top:0;bottom:0;left:0}.PlaygroundShowcase-module__4l6hRG__editorContainer{background:#0f172a;border:1px solid #ffffff1a;border-radius:1.5rem;min-height:500px;padding:4px;position:relative;box-shadow:0 25px 50px -12px #00000080}.PlaygroundShowcase-module__4l6hRG__editorWrapper{height:100%}.PlaygroundShowcase-module__4l6hRG__htmlGrid{background:#1e1e1e;border-radius:1.25rem;grid-template-columns:1fr 1fr;height:600px;display:grid;overflow:hidden}.PlaygroundShowcase-module__4l6hRG__htmlEditor{border-right:1px solid #333;height:100%;overflow:hidden}.PlaygroundShowcase-module__4l6hRG__htmlPreview{background:#fff;flex-direction:column;height:100%;display:flex}.PlaygroundShowcase-module__4l6hRG__previewHeader{color:#64748b;text-transform:uppercase;background:#f8fafc;border-bottom:1px solid #e2e8f0;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.75rem;font-weight:600;display:flex}.PlaygroundShowcase-module__4l6hRG__previewIframe{background:#fff;border:none;width:100%;height:100%}@media (max-width:1024px){.PlaygroundShowcase-module__4l6hRG__htmlGrid{grid-template-columns:1fr;height:800px}.PlaygroundShowcase-module__4l6hRG__htmlEditor{border-bottom:1px solid #333;border-right:none;height:400px}.PlaygroundShowcase-module__4l6hRG__htmlPreview{height:400px}.PlaygroundShowcase-module__4l6hRG__layout{grid-template-columns:1fr}.PlaygroundShowcase-module__4l6hRG__tabs{scrollbar-width:none;flex-direction:row;padding-bottom:1rem;overflow-x:auto}.PlaygroundShowcase-module__4l6hRG__tabs::-webkit-scrollbar{display:none}.PlaygroundShowcase-module__4l6hRG__tabButton{flex-shrink:0;min-width:280px}.PlaygroundShowcase-module__4l6hRG__tabButton:hover{transform:none}}@media (max-width:768px){.PlaygroundShowcase-module__4l6hRG__showcase{padding:5rem 0}.PlaygroundShowcase-module__4l6hRG__title{font-size:2.5rem}.PlaygroundShowcase-module__4l6hRG__tabButton{min-width:250px;padding:1rem}.PlaygroundShowcase-module__4l6hRG__editorContainer{min-height:400px}}