.live-ui-preview{width:100%;margin:0}.live-ui-preview__tabs{-webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:.5rem;margin-bottom:1rem;padding-bottom:4px;display:flex;overflow:auto hidden}.live-ui-preview__tab{white-space:nowrap;flex:none;min-height:36px}.live-ui-preview__container{background-color:var(--bg-card);border-radius:12px;max-width:100%;min-height:400px;display:flex;overflow:hidden;box-shadow:0 4px 12px #0006}.live-ui-preview__sidebar{flex-direction:column;gap:2rem;width:240px;padding:1.5rem;display:flex}.live-ui-preview__logo{letter-spacing:-.025em;font-size:1.25rem;font-weight:600}.live-ui-preview__nav{flex-direction:column;gap:.5rem;display:flex}.live-ui-preview__nav-item{cursor:pointer;border-radius:8px;padding:.75rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s}.live-ui-preview__nav-item:hover{opacity:.8}.live-ui-preview__nav-item--active{font-weight:600}.live-ui-preview__main{flex-direction:column;flex:1;display:flex}.live-ui-preview__header{justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.live-ui-preview__header h2{margin:0;font-size:1.5rem;font-weight:600}.live-ui-preview__button{cursor:pointer;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:opacity .2s}.live-ui-preview__button:hover{opacity:.9}.live-ui-preview__content{flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex}.live-ui-preview__cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;display:grid}.live-ui-preview__card{border-radius:8px;flex-direction:column;gap:.5rem;padding:1.25rem;display:flex}.live-ui-preview__card>div:first-child{font-size:.875rem;font-weight:500}.live-ui-preview__card>div:nth-child(2){font-size:1.5rem;font-weight:600}.live-ui-preview__card>div:last-child{font-size:.875rem;font-weight:500}.live-ui-preview__table{border-radius:8px;overflow:hidden}.live-ui-preview__table-header{grid-template-columns:2fr 1fr 1fr;padding:1rem 1.25rem;font-size:.875rem;font-weight:600;display:grid}.live-ui-preview__table-row{border-top:1px solid;grid-template-columns:2fr 1fr 1fr;padding:1rem 1.25rem;font-size:.875rem;display:grid}.live-ui-preview__badge{border-radius:9999px;padding:.25rem .75rem;font-size:.75rem;font-weight:500;display:inline-block}@media (max-width:768px){.live-ui-preview__container{flex-direction:column}.live-ui-preview__sidebar{width:100%;padding:1rem}.live-ui-preview__nav{flex-direction:row;overflow-x:auto}.live-ui-preview__cards{grid-template-columns:1fr}.live-ui-preview__table-header,.live-ui-preview__table-row{grid-template-columns:1fr;gap:.5rem}}
.accessibility{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;margin:3rem 0;padding:2rem}.accessibility__title{color:#111827;letter-spacing:-.025em;margin:0 0 1.5rem;font-size:1.5rem;font-weight:600}.accessibility__content{flex-direction:column;gap:.75rem;display:flex}.accessibility__item{align-items:flex-start;gap:.75rem;display:flex}.accessibility__bullet{color:#6b7280;flex-shrink:0;font-size:1.125rem;line-height:1.5}.accessibility__text{color:#6b7280;flex:1;font-size:.9375rem;line-height:1.6}.accessibility__notes{border-top:1px solid #e5e7eb;margin-top:1rem;padding-top:1.5rem}.accessibility__notes p{color:#6b7280;margin:0;font-size:.875rem;line-height:1.6}@media (max-width:768px){.accessibility{padding:1.5rem}.accessibility__title{font-size:1.25rem}}
.why-this-works{margin:0}.why-this-works__title{color:var(--text-primary);margin:0 0 var(--spacing-lg)0;letter-spacing:-.01em;font-size:1.75rem;font-weight:600}.why-this-works__list{gap:var(--spacing-md);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.why-this-works__item{align-items:flex-start;gap:var(--spacing-md);color:var(--text-secondary-alt);padding-left:.5rem;font-size:1rem;line-height:1.7;display:flex}.why-this-works__bullet{color:var(--accent-primary);flex-shrink:0;margin-top:-.1rem;font-size:1.25rem;font-weight:700;line-height:1.4}
.color-tokens{margin:0}.color-tokens__grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.color-token{align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);transition:all var(--transition-base);display:flex;position:relative}.color-token:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.color-token--copied{border-color:var(--accent-primary);background-color:#38bdf80d}.color-token__swatch{border-radius:var(--radius-md);border:2px solid var(--bg-soft);width:48px;height:48px;transition:transform var(--transition-base);flex-shrink:0}.color-token:hover .color-token__swatch{transform:scale(1.05)}.color-token__info{flex-direction:column;flex:1;gap:.25rem;min-width:0;display:flex}.color-token__name{color:var(--text-muted);font-size:.875rem;font-weight:500;line-height:1.4}.color-token__hex{color:var(--text-primary);letter-spacing:.02em;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:.9375rem;font-weight:600;line-height:1.4}.color-token__copy-btn{background-color:var(--bg-primary);border:2px solid var(--accent-primary);border-radius:var(--radius-md);width:40px;height:40px;color:var(--accent-primary);cursor:pointer;transition:all var(--transition-base);opacity:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex;box-shadow:0 2px 4px #0003}.color-token:hover .color-token__copy-btn{opacity:1}.color-token__copy-btn:hover{background-color:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-soft);transform:scale(1.05);box-shadow:0 4px 8px #38bdf84d}.color-token--copied .color-token__copy-btn{opacity:1;border-color:var(--accent-primary);color:var(--bg-soft);background-color:var(--accent-primary);box-shadow:0 4px 8px #38bdf84d}.color-token__copy-btn svg{width:18px;height:18px}@media (max-width:768px){.color-tokens__grid{grid-template-columns:1fr}.color-token{padding:var(--spacing-sm)}.color-token__swatch{width:40px;height:40px}.color-token__copy-btn{opacity:1;width:36px;height:36px}.color-token__copy-btn svg{width:16px;height:16px}}@media (min-width:1024px){.color-tokens__grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.code-tabs{margin:0}.code-tabs__tabs{gap:var(--spacing-xs);margin-bottom:var(--spacing-md);flex-wrap:wrap;display:flex}.code-tabs__tab{border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-base);background-color:#0000;padding:.5rem 1rem;font-size:.875rem;font-weight:500}.code-tabs__tab:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.code-tabs__tab--active{background-color:var(--bg-card);border-color:var(--accent-primary);color:var(--accent-primary)}.code-tabs__code-container{background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);position:relative;overflow:hidden}.code-tabs__code{padding:var(--spacing-lg);background-color:var(--bg-card);color:var(--text-secondary-alt);min-height:150px;margin:0;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace;font-size:.875rem;line-height:1.6;overflow-x:auto}.code-tabs__code code{white-space:pre;display:block}.code-tabs__code .keyword{color:var(--accent-primary)}.code-tabs__code .value{color:#a7f3d0}.code-tabs__code .comment{color:var(--text-muted)}.code-tabs__copy-button{top:var(--spacing-md);right:var(--spacing-md);background-color:var(--accent-primary);width:44px;height:44px;color:var(--bg-soft);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;box-shadow:0 2px 4px #38bdf833}.code-tabs__copy-button:hover{background-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 8px #38bdf84d}.code-tabs__copy-icon{flex-shrink:0;width:20px;height:20px}@media (max-width:768px){.code-tabs__code{padding:var(--spacing-md);font-size:.8125rem}.code-tabs__copy-button{width:44px;height:44px;margin-top:var(--spacing-md);margin-left:auto;position:static}.code-tabs__copy-icon{width:20px;height:20px}}
.usage-tips{margin:0}.usage-tips__main-title{color:var(--text-primary);margin:0 0 var(--spacing-lg)0;font-size:1.5rem;font-weight:600}.usage-tips__content{gap:var(--spacing-lg);background-color:#0000;border:none;border-radius:0;grid-template-columns:1fr;padding:0;display:grid}.usage-tips__section{gap:var(--spacing-md);flex-direction:column;display:flex}.usage-tips__title{align-items:center;gap:var(--spacing-xs);color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600;display:flex}.usage-tips__icon{font-size:1.25rem;line-height:1}.usage-tips__list{gap:var(--spacing-sm);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.usage-tips__list li{color:var(--text-secondary-alt);padding-left:1.5rem;font-size:.9375rem;line-height:1.6;position:relative}.usage-tips__list--positive li:before{content:"✓";color:var(--accent-primary);font-size:1rem;font-weight:600;position:absolute;left:0}.usage-tips__list--negative li:before{content:"✗";color:var(--text-muted);font-size:1rem;font-weight:600;position:absolute;left:0}@media (min-width:768px){.usage-tips__content{gap:var(--spacing-xl);grid-template-columns:repeat(2,1fr)}}
.related-palettes{border-top:none;margin-top:0;padding-top:0}.related-palettes__title{color:var(--text-primary);margin:0 0 var(--spacing-lg)0;font-size:1.5rem;font-weight:600}.related-palettes__grid{gap:var(--spacing-md);grid-template-columns:1fr;display:grid}.related-palette-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-md);gap:var(--spacing-sm);transition:all var(--transition-base);flex-direction:column;text-decoration:none;display:flex}.related-palette-card:hover{border-color:var(--accent-primary);transform:translateY(-2px);box-shadow:0 4px 12px #0006}.related-palette-card__preview{border-radius:var(--radius-md);border:1px solid var(--border-color);height:3rem;display:flex;overflow:hidden}.related-palette-card__color{transition:transform var(--transition-base);flex:1}.related-palette-card:hover .related-palette-card__color{transform:scaleY(1.05)}.related-palette-card__title{color:var(--text-primary);transition:color var(--transition-base);margin:0;font-size:.9375rem;font-weight:600}.related-palette-card:hover .related-palette-card__title{color:var(--accent-primary)}@media (min-width:640px){.related-palettes__grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.related-palettes__grid{grid-template-columns:repeat(3,1fr)}.related-palette-card__preview{height:4rem}}
.palette-page{padding:var(--spacing-xl)0;background-color:var(--bg-primary);flex:1}.palette-page__container{max-width:1200px;padding:0 var(--spacing-md);margin:0 auto}.palette-page__header{margin-bottom:var(--spacing-xl);text-align:left}.palette-page__title{color:var(--text-primary);margin:0 0 var(--spacing-md)0;font-size:2.5rem;font-weight:600;line-height:1.2}.palette-page__badges{align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-md);flex-wrap:wrap;display:flex}.palette-page__badge{color:var(--text-secondary);background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:.25rem .75rem;font-size:.875rem;font-weight:500;display:inline-block}.palette-page__badge-separator{color:var(--text-muted);font-size:.875rem}.palette-page__subtitle{color:var(--text-secondary);max-width:800px;margin:0;font-size:1.125rem;line-height:1.7}.palette-page__preview-note{margin-top:var(--spacing-md);color:var(--text-secondary);font-size:.95rem}.palette-page__preview-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;gap:1rem;display:flex}.palette-page__preview-toggle{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:10px;padding:.5rem .9rem;font-size:.875rem;font-weight:600;transition:all .2s}.palette-page__preview-toggle:hover{border-color:var(--text-primary);color:var(--text-primary)}.palette-page__preview-toggle--active{color:#c4b5fd;background:#7c3aed29;border-color:#7c3aed73}.palette-page__variants{margin-bottom:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;display:grid}.palette-page__variant{text-align:left;border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;border-radius:12px;flex-direction:column;gap:.5rem;padding:.75rem;transition:all .2s;display:flex}.palette-page__variant:hover{border-color:#7c3aed80;transform:translateY(-1px)}.palette-page__variant--active{color:var(--text-primary);border-color:#7c3aed99;box-shadow:inset 0 0 0 1px #7c3aed40}.palette-page__variant-name{font-size:.9rem;font-weight:600;line-height:1.3}.palette-page__variant-swatches{border:1px solid #ffffff14;border-radius:999px;display:flex;overflow:hidden}.palette-page__variant-swatch{flex:1;height:16px}.palette-page__preview-empty{border:1px dashed var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);background:#ffffff05;padding:1.1rem}.palette-page__section-title{color:var(--text-primary);margin:0 0 var(--spacing-lg)0;letter-spacing:-.01em;font-size:1.75rem;font-weight:600}.palette-page__preview{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);position:relative}.palette-page__preview:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.palette-page__why-works{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);position:relative}.palette-page__why-works:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.palette-page__content{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);gap:var(--spacing-xl);display:grid;position:relative}.palette-page__content:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.content-block{max-width:800px}.content-block__title{color:var(--text-primary);margin-bottom:var(--spacing-sm);letter-spacing:-.01em;font-size:1.5rem;font-weight:600}.content-block__text{color:var(--text-secondary);margin:0;font-size:1.05rem;line-height:1.7}.palette-page__colors{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);position:relative}.palette-page__colors:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.palette-page__gradients{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);position:relative}.palette-page__gradients:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.gradient-presets{gap:var(--spacing-lg);display:grid}.gradient-presets__item{gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);flex-direction:column;transition:border-color .2s;display:flex}.gradient-presets__item:hover{border-color:var(--border-color);box-shadow:0 2px 8px #0000000d}.gradient-presets__header{justify-content:space-between;align-items:center;display:flex}.gradient-presets__label{color:var(--text-primary);font-size:1rem;font-weight:600}.gradient-presets__preview{border-radius:var(--radius-md);background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border:1px solid #ffffff1a;width:100%;height:120px;transition:transform .2s;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a}.gradient-presets__preview:hover{transform:scale(1.01)}.gradient-presets__preview--linear,.gradient-presets__preview--radial{background-size:100% 100%}.gradient-presets__code{align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-primary);border-radius:var(--radius-sm);border:1px solid var(--border-color);display:flex}.gradient-presets__code-text{color:var(--text-secondary);font-family:var(--font-mono,"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace);word-break:break-all;flex:1;margin:0;font-size:.875rem;line-height:1.5}.gradient-presets__copy-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.gradient-presets__copy-btn:hover{background:var(--bg-card);border-color:var(--text-primary);color:var(--text-primary)}.gradient-presets__copy-btn:active{transform:scale(.95)}.gradient-presets__copy-btn--copied{background:var(--bg-card);border-color:var(--text-primary);color:var(--text-primary)}.gradient-presets__copy-btn svg{width:16px;height:16px}@media (max-width:768px){.gradient-presets__preview{height:100px}.gradient-presets__code-text{font-size:.8125rem}.gradient-presets__item{padding:var(--spacing-md)}}.palette-page__code{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);position:relative}.palette-page__code:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.palette-page__usage{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);position:relative}.palette-page__usage:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.palette-page__related{margin:var(--spacing-xl)0;padding-top:var(--spacing-xl);position:relative}.palette-page__related:before{content:"";background:linear-gradient(to right,transparent,var(--border-color)20%,var(--border-color)80%,transparent);height:1px;position:absolute;top:0;left:0;right:0}.adsense-rectangle{margin:var(--spacing-xl)0;padding:var(--spacing-md)0}.adsense-placeholder{text-align:center;color:var(--text-muted);padding:var(--spacing-md);background-color:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);font-size:.875rem}@media (max-width:768px){.palette-page{padding:var(--spacing-lg)0}.palette-page__container{padding:0 var(--spacing-sm)}.palette-page__header{margin-bottom:var(--spacing-lg)}.palette-page__title{font-size:2rem}.palette-page__badges{margin-bottom:var(--spacing-sm)}.palette-page__badge{padding:.2rem .625rem;font-size:.8125rem}.palette-page__subtitle{font-size:1rem}.palette-page__preview-header{flex-direction:column;align-items:flex-start}.palette-page__preview,.palette-page__why-works,.palette-page__colors,.palette-page__gradients,.palette-page__code,.palette-page__usage,.palette-page__related{margin:var(--spacing-lg)0}}@media (min-width:1024px){.palette-page__container{padding:0 var(--spacing-lg)}.palette-page__title{font-size:3rem}}