.palette-color{flex:1 1 0;height:48px;display:flex;align-items:flex-end;justify-content:center;font-size:var(--font-size-sm);color:#fff;font-weight:var(--font-weight-bold);padding-bottom:.3em;letter-spacing:.5px}.css-demo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2em;margin-bottom:2em}.css-demo-card{background:var(--project-code-bg,#f8f5ff);border:1px solid var(--project-border,#e8e1f5);border-radius:14px;box-shadow:0 4px 18px rgba(80,60,120,.07);padding:1.5em;display:flex;flex-direction:column;align-items:flex-start;gap:1em}.css-demo-card pre{background:var(--project-code-bg);color:var(--project-code-text);border-radius:8px;padding:1em 1.2em;font-size:var(--font-size-md);overflow-x:auto;margin:0;width:100%;box-sizing:border-box;max-width:100%}.css-demo-buttons{display:flex;flex-direction:column;gap:1em;width:100%;align-items:stretch}.css-demo-buttons .button-link{background:var(--project-link-button-bg,#8f50ff);color:var(--project-link-button-text,#fff);border:none;border-radius:8px;padding:.7em 1.2em;font-size:var(--font-size-md);font-family:inherit;font-weight:var(--font-weight-bold);cursor:pointer;display:inline-flex;align-items:center;gap:.6em;box-shadow:0 2px 8px rgba(80,60,120,.07);transition:background .2s,color .2s,transform .1s;margin:0;width:100%;justify-content:center}.css-demo-buttons .button-link:hover{background:var(--project-link-button-hover-bg,#7a33e0);color:var(--project-link-button-text,#fff);transform:translateY(-2px)}.css-demo-buttons .button-link:active{background:var(--project-accent,#8f50ff);color:var(--project-link-button-text,#fff);transform:scale(.98)}@media (max-width:600px){.css-demo-buttons{gap:.7em}.css-demo-buttons .button-link{font-size:1em;padding:.6em 1em}}.css-demo-typography h3{margin:0 0 .3em}.css-demo-badge{display:inline-block;background:var(--project-accent,#8f50ff);color:#fff;border-radius:6px;padding:.3em .8em;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);margin-right:.5em}.css-demo-link{color:var(--project-link,#8f50ff);text-decoration:underline;font-weight:var(--font-weight-bold)}.palette-preview-color{position:relative;cursor:pointer}#palette-color-tooltip{display:none;position:absolute;z-index:1000;padding:.4em .8em;background:rgba(30,30,40,.97);color:#fff;border-radius:6px;font-size:var(--font-size-md);box-shadow:0 2px 8px rgba(0,0,0,.13)}.popup-container{align-items:center;background-color:rgba(0,0,0,.5);display:flex;height:100vh;justify-content:center;left:0;opacity:0;position:fixed;top:0;width:100vw;z-index:1000;transition:.15s cubic-bezier(.4, 2, .6, 1);backdrop-filter:blur(8px)}.popup-content{background-color:var(--background-card,#f8f5ff);border-radius:16px;box-shadow:0 8px 32px rgba(40,30,60,.18);max-width:90vw;padding:18px 28px 14px;text-align:center;transform:scale(.96);transition:.15s cubic-bezier(.4, 2, .6, 1);width:320px;font-family:Inter,"San Francisco","Segoe UI",Arial,sans-serif}.popup-content i{font-size:var(--font-size-xxl);margin-bottom:6px;color:var(--primary-accent,#8f50ff);filter:drop-shadow(0 2px 6px rgba(80, 60, 120, .08))}.popup-content p{margin:0 0 14px;font-size:var(--font-size-lg);color:var(--text-primary,#2a1a3a);font-weight:var(--font-weight-bold);letter-spacing:.01em}.popup-buttons{display:flex;justify-content:center;margin-top:0}.popup-buttons .rainbow-button{background:var(--primary-accent,#8f50ff);color:#fff;border:none;border-radius:8px;padding:7px 22px;font-size:var(--font-size-md);font-weight:var(--font-weight-bold);box-shadow:0 2px 8px rgba(80,60,120,.07);transition:background .18s,transform .13s;font-family:inherit}.popup-buttons .rainbow-button:hover{background:var(--primary-accent-dark,#7a33e0);transform:translateY(-2px) scale(1.04)}.secret-switches{display:flex;gap:1.5em;align-items:center;flex-wrap:wrap}.secret-switch-col{display:flex;flex-direction:column;align-items:center;gap:.3em}