.playground-shell{--sidebar-width:288px;--playground-inset:var(--space-8);--playground-offset:calc(var(--sidebar-width) + var(--playground-inset) * 2)}.playground-sidebar{inset:var(--playground-inset) auto var(--playground-inset) var(--playground-inset);width:var(--sidebar-width);z-index:30;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-14);padding:var(--space-8);gap:var(--space-8);flex-direction:column;display:flex;position:fixed}.playground-sidebar-heading{justify-content:flex-end;display:none}.playground-sidebar-toolbar{min-height:34px;display:grid}.playground-sidebar-tabs{flex-shrink:0;width:100%;display:flex}.playground-sidebar-tabs .btn{flex:1}.playground-sidebar-toolbar:has(#templates-back[hidden]){display:none}.playground-sidebar-toolbar .btn{--button-padding-x:var(--button-padding-x-sm);--button-icon-size:16px;--button-icon-gap:var(--space-3);justify-content:flex-start;justify-self:start}.playground-sidebar-scroll{scrollbar-width:none;min-height:0;padding-block:var(--space-2);flex:1;overflow-y:auto}.playground-sidebar-scroll :focus-visible{outline-offset:-2px}.playground-templates,.playground-palette-grid{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.playground-template,.playground-variation{appearance:none;cursor:pointer;text-align:left;color:var(--text-primary);background:var(--surface-raised);border-radius:var(--radius-6);padding:var(--space-2);gap:var(--space-2);border:0;align-content:start;min-width:0;display:grid}.playground-template img,.playground-variation img{aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-4);width:100%;height:auto}.playground-card-copy{padding:var(--space-2) var(--space-4);gap:0;display:grid}.playground-template .text-body-sm{font-size:13px}.playground-template .text-caption{color:var(--text-muted)}.playground-variation[aria-pressed=true],.playground-template[aria-pressed=true]{outline:2px solid var(--text-primary);outline-offset:-2px}.playground-variations{gap:var(--space-12);display:grid}.playground-search-label{margin-bottom:var(--space-8);display:block}.playground-search-label .search-field{width:100%}.playground-pagination{justify-content:space-between;align-items:center;gap:var(--space-4);flex-shrink:0;display:flex}.playground-pagination[hidden]{display:none}.playground-pagination .custom-select{flex:none;width:max-content}#playground-browser-status{color:var(--text-secondary);margin-block:var(--space-8)}.playground-palette-group h3{margin-bottom:var(--space-4);color:var(--text-muted)}.playground-right{margin-left:var(--playground-offset)}.playground-main{padding:var(--space-8) var(--space-12) var(--space-12)}.playground-controls{align-items:center;gap:var(--space-8);margin-bottom:var(--space-12);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);display:grid}.playground-preview{--sample-ink:#f8f8fa;--sample-muted:#ffffffb8;--sample-panel:#ffffff0f;--sample-outline:#ffffff14;border-radius:var(--gradient-card-radius);border:1px solid var(--border-subtle);overflow:hidden}.playground-preview[data-mode=light]{--sample-ink:#15151a;--sample-muted:#15151ab8;--sample-panel:#fff6;--sample-outline:#15151a0a}.preview-panel{min-height:660px;color:var(--sample-ink);background-image:var(--preview-gradient);padding:var(--space-20);background-position:50%;background-size:cover}.sample-nav{justify-content:space-between;align-items:center;gap:var(--space-8);display:flex}.sample-brand{font-size:var(--font-size-24);font-weight:var(--font-weight-medium)}.sample-nav-label{align-items:center;gap:var(--space-3);font-size:var(--font-size-14);color:inherit;display:flex}.sample-hero{text-align:center;justify-content:center;align-items:center;gap:var(--space-10);min-height:440px;padding-block:var(--space-20);flex-direction:column;display:flex}.sample-hero h2{letter-spacing:var(--letter-spacing-tight);font-size:clamp(36px,4.5vw,64px);line-height:1.1}.sample-hero p{max-width:420px;color:var(--sample-muted)}.sample-eyebrow{color:var(--sample-muted)}.sample-button{align-items:center;gap:var(--space-4);border-radius:var(--radius-full);padding:var(--space-6) var(--space-10);background:var(--sample-ink);color:#15151a;font-size:var(--font-size-14);font-weight:var(--font-weight-medium);text-decoration:none;display:inline-flex}[data-mode=light] .sample-button{color:#fff}.sample-work{gap:var(--space-8);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.sample-work>div,.sample-reading-card{background:var(--sample-panel);border:1px solid var(--sample-outline);border-radius:var(--radius-10);padding:var(--space-12);backdrop-filter:blur(12px)}.sample-work span{color:var(--sample-muted)}.sample-work h3{margin-top:var(--space-4)}.playground-gradient-name{text-align:right;color:var(--text-secondary);overflow-wrap:anywhere;grid-area:1/3;justify-self:end}.playground-brand{font-size:var(--font-size-18);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-tight);color:#fff;grid-area:1/1;justify-self:start;text-decoration:none}.playground-controls .playground-layout-tabs{grid-area:1/2}.playground-controls .playground-open{grid-area:1/-2;justify-self:end}.sample-cards-panel{background:var(--surface-canvas);color:var(--text-primary);align-content:center;gap:var(--space-16);display:grid}.sample-card-grid{gap:var(--space-8);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.sample-gradient-card{min-height:300px;padding:var(--space-12);border-radius:var(--gradient-card-image-radius);background-image:var(--preview-gradient);color:var(--sample-ink);justify-content:space-between;gap:var(--space-12);background-position:50%;background-size:cover;flex-direction:column;display:flex}.sample-image-card{border-radius:var(--gradient-card-image-radius);background:var(--surface-card);overflow:hidden}.sample-card-art{aspect-ratio:16/9;background-image:var(--preview-gradient);background-position:50%;background-size:cover}.sample-image-card>div:last-child{padding:var(--space-12);gap:var(--space-4);display:grid}.sample-image-card p,.sample-image-card span{color:var(--text-secondary)}.sample-quote h3{font-size:var(--font-size-32)}.sample-article{max-width:600px;margin:var(--space-32) auto 0;gap:var(--space-12);display:grid}.sample-article>p,.sample-reading-card p{color:var(--sample-muted)}.sample-reading-card p{margin-top:var(--space-4)}.sample-reading-card{border:0}.playground-open,.playground-close{display:none}@media (width<=899px){.playground-sidebar-heading{display:flex}}@media (width<=1199px){.preview-panel{padding:var(--space-12)}.sample-card-grid{grid-template-columns:1fr}.sample-gradient-card{min-height:220px}.sample-work{gap:var(--space-4)}.sample-work>div{padding:var(--space-8)}}@media (width<=899px){.playground-right{margin-left:0}.playground-sidebar{width:min(320px, calc(100% - var(--space-16)));display:none;box-shadow:0 0 0 100vmax #0009}.playground-sidebar[data-open]{display:flex}.playground-open,.playground-close{display:inline-flex}.playground-controls{grid-template-columns:minmax(0,1fr) auto}.playground-controls .playground-layout-tabs{grid-area:2/1/auto/-1;justify-self:center}}@media (width<=479px){.playground-main{padding-inline:var(--space-8)}.playground-layout-tabs{justify-content:center;gap:0;width:100%}.playground-layout-tabs .btn{padding-inline:var(--space-4);font-size:var(--font-size-12)}.preview-panel{padding:var(--space-8);min-height:600px}.sample-work{grid-template-columns:1fr}.sample-hero{min-height:380px}.sample-hero h2{font-size:var(--font-size-32)}}.playground-sidebar-scroll::-webkit-scrollbar{display:none}.sample-footer-panel{--text-primary:var(--sample-ink);--text-secondary:var(--sample-muted);--text-muted:var(--sample-muted);--border-subtle:var(--sample-outline);padding:var(--space-20);background:var(--surface-canvas);align-content:center;min-height:660px;display:grid}@media (width<=1199px){.sample-footer-panel{padding:var(--space-12)}}@media (width<=479px){.sample-footer-panel{padding:var(--space-8);min-height:600px}}.playground-layout-tabs{scrollbar-width:none;min-width:0;max-width:100%;overflow-x:auto}.playground-layout-tabs::-webkit-scrollbar{display:none}@media (width>=900px) and (width<=1199px){.playground-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.playground-gradient-name{grid-column:2}.playground-controls .playground-layout-tabs{grid-area:2/1/auto/-1;justify-self:center}}@media (width<=639px){.playground-layout-tabs{justify-content:flex-start}}@media (width<=899px){.playground-gradient-name{grid-area:3/1/auto/-1}}