@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@300;400;500;700&display=swap";.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.snippet-playground{--bg:#FAF7F4;--bg-card:#ffffff;--bg-sidebar:#5A6D5F;--border:rgba(90, 109, 95, .15);--text:#4A5A4E;--text-muted:#5A6D5F;--text-heading:#3D4A40;--text-on-dark:#FAF7F4;--text-muted-on-dark:rgba(250, 247, 244, .7);--accent:#C88872;--accent-hover:#B67760;--success:#22c55e;--font-sans:"Lato", sans-serif;--font-heading:"Playfair Display", serif;--font-mono:"JetBrains Mono", monospace;font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6}.snippet-playground *,.snippet-playground :before,.snippet-playground :after{box-sizing:border-box}.snippet-playground{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 80px)}@media (max-width:900px){.snippet-playground{grid-template-columns:1fr}}.playground-breadcrumbs{grid-column:1/-1;display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;border-top:1px solid rgba(90,109,95,.1);border-bottom:1px solid rgba(90,109,95,.1);background:#faf7f4;font-size:.875rem}@media (max-width:900px){.playground-breadcrumbs{padding:.75rem 1.25rem}}.playground-breadcrumbs a{color:var(--accent);text-decoration:none;transition:color .15s}.playground-breadcrumbs a:hover{color:var(--accent-hover)}.playground-breadcrumbs svg{width:14px;height:14px;color:var(--text-muted);opacity:.5}.playground-breadcrumbs span{color:var(--text)}.sidebar{background:var(--bg-card);border-right:1px solid var(--border);padding:1.5rem 0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}@media (max-width:900px){.sidebar{display:none}}.sidebar-content{flex:1}.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);margin-top:auto;font-size:.75rem;color:var(--text-muted)}.sidebar-header{padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--border);margin-bottom:1rem}.sidebar-back{display:inline-block;font-size:.75rem;color:var(--text-muted);text-decoration:none;margin-bottom:.75rem;transition:color .15s}.sidebar-back:hover{color:var(--accent)}.sidebar-logo{font-size:.65rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.25rem}.sidebar-title{font-size:1.125rem;font-weight:600;font-family:var(--font-heading);color:var(--text-heading)}.sidebar-section{padding:.5rem .75rem}.sidebar-section-title{font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:.5rem;margin-bottom:.25rem}.nav-item{display:flex;align-items:center;gap:.625rem;padding:.5rem .625rem;border-radius:6px;cursor:pointer;font-size:.8125rem;color:var(--text-muted);transition:all .15s;outline:0}.nav-item:hover{background:#5a6d5f14;color:var(--text-heading)}.nav-item:focus-visible{box-shadow:0 0 0 2px var(--accent)}.nav-item.active{background:#c8887226;color:var(--accent)}.nav-dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}.nav-item.active .nav-dot{opacity:1}.nav-item--guide{background:#5a6d5f14;border:1px solid rgba(90,109,95,.2);border-radius:8px;margin:0 .5rem;padding:.625rem .75rem!important}.nav-item--guide:hover{background:#5a6d5f1f}.nav-item--guide.active{background:#5a6d5f26;border-color:#5a6d5f4d;color:var(--text-heading)}.nav-item--theme{background:#c888721a;border:1px solid rgba(200,136,114,.25);border-radius:8px;margin:0 .5rem .5rem;padding:.625rem .75rem!important}.nav-item--theme:hover{background:#c8887226}.nav-item--theme.active{background:#c8887233;border-color:#c8887266;color:var(--accent)}.nav-item--bundles{background:#5a6d5f14;border:1px solid rgba(90,109,95,.2);border-radius:8px;margin:0 .5rem .5rem;padding:.625rem .75rem!important}.nav-item--bundles:hover{background:#5a6d5f1f}.nav-item--bundles.active{background:#5a6d5f26;border-color:#5a6d5f4d;color:var(--text-heading)}.nav-guide-icon{width:28px;height:28px;flex-shrink:0;background:var(--bg);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.nav-guide-icon svg{width:14px;height:14px}.nav-item.active .nav-guide-icon{background:#c8887226;color:var(--accent)}.nav-item--theme .nav-guide-icon{background:#c888721a;color:var(--accent)}.nav-item--bundles .nav-guide-icon,.nav-item--guide .nav-guide-icon{background:#5a6d5f1a;color:var(--text-muted)}.nav-item--overview{background:#5a6d5f14;border:1px solid rgba(90,109,95,.2);border-radius:8px;margin:0 .5rem .5rem;padding:.625rem .75rem!important}.nav-item--overview:hover{background:#5a6d5f1f}.nav-item--overview.active{background:#5a6d5f26;border-color:#5a6d5f4d;color:var(--text-heading)}.nav-item--overview .nav-guide-icon{background:#5a6d5f1a;color:var(--text-muted)}.nav-item--overview.active .nav-guide-icon{background:#5a6d5f26;color:var(--text-heading)}.main{padding:2rem 2rem 4rem;max-width:900px}.main:has(.guide-layout){max-width:1100px}@media (max-width:900px){.main{padding:1.25rem 1.25rem 3rem}}.mobile-select{display:none;width:100%;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-sans);font-size:.9375rem;margin-bottom:1.5rem}@media (max-width:860px){.mobile-select{display:block}}.component-header{margin-bottom:1.5rem}.component-title{font-size:1.75rem;font-weight:600;margin-bottom:.375rem;font-family:var(--font-heading);color:var(--text-heading)}.component-desc{color:var(--text-muted);font-size:.9375rem}.preview-box{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.25rem}.preview-bar{display:flex;justify-content:space-between;align-items:center;padding:.625rem 1rem;border-bottom:1px solid var(--border);background:#5a6d5f0d}.preview-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.preview-replay{display:flex;align-items:center;gap:.375rem;padding:.375rem .625rem;background:#5a6d5f14;border:1px solid var(--border);border-radius:5px;color:var(--text-muted);font-size:.6875rem;font-weight:500;cursor:pointer;transition:all .15s}.preview-replay:hover{background:#5a6d5f1f;color:var(--text-heading);border-color:var(--text-muted)}.preview-replay svg{width:12px;height:12px}.preview-frame{min-height:280px;display:flex;align-items:center;justify-content:center;padding:2.5rem;background:radial-gradient(circle at 50% 50%,rgba(200,136,114,.06)0,transparent 60%)}.controls-box{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;margin-bottom:1.25rem}.controls-bar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;cursor:pointer;transition:background .15s}.controls-bar:hover{background:#5a6d5f08}.controls-title{font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:.5rem;color:var(--text-heading)}.controls-title svg{width:14px;height:14px;color:var(--text-muted)}.controls-chevron{width:16px;height:16px;color:var(--text-muted);transition:transform .2s}.controls-box.open .controls-chevron{transform:rotate(180deg)}.controls-body{display:none;padding:1rem;gap:1rem;border-top:1px solid var(--border)}.controls-box.open .controls-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.control-group{display:flex;flex-direction:column;gap:.375rem}.control-label{font-size:.6875rem;font-weight:600;color:var(--text-heading);text-transform:uppercase;letter-spacing:.05em}.control-input{padding:.5rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text-heading);font-family:var(--font-sans);font-size:.8125rem}.control-input:focus{outline:0;border-color:var(--accent)}.control-input[type=color]{height:36px;padding:.25rem;cursor:pointer}.control-input[type=range]{padding:0;height:6px;-webkit-appearance:none;background:#5a6d5f33;border-radius:3px;border:0}.control-input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer}.control-range-wrap{display:flex;align-items:center;gap:.75rem}.control-range-wrap .control-input[type=range]{flex:1}.control-range-value{min-width:3rem;padding:.25rem .5rem;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:.75rem;font-weight:500;color:var(--text-heading);text-align:center;font-family:var(--font-mono)}.control-checkbox{display:flex;align-items:center;cursor:pointer}.control-checkbox input{display:none}.control-checkbox-mark{width:36px;height:20px;background:#5a6d5f33;border-radius:10px;position:relative;transition:background .2s}.control-checkbox-mark:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0000001a}.control-checkbox input:checked+.control-checkbox-mark{background:var(--accent)}.control-checkbox input:checked+.control-checkbox-mark:after{transform:translate(16px)}select.control-input{cursor:pointer}.control-hint{font-size:.625rem;color:var(--text-muted);margin-top:.25rem;font-style:italic}.code-box{background:#4a5a4e;border:1px solid var(--border);border-radius:12px;overflow:hidden}.code-bar{display:flex;justify-content:space-between;align-items:center;padding:.625rem 1rem;background:#3d4a40;border-bottom:1px solid rgba(250,247,244,.1)}.code-label{font-size:.65rem;font-weight:500;letter-spacing:.08em;color:#faf7f4b3;font-family:var(--font-mono)}.copy-btn{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.6875rem;font-weight:600;background:var(--accent);border:0;border-radius:5px;color:#fff;cursor:pointer;font-family:var(--font-sans);transition:background .15s}.copy-btn:hover{background:var(--accent-hover)}.copy-btn.copied{background:var(--success)}.copy-btn svg{width:12px;height:12px}.code-body{padding:1rem;overflow-x:auto;max-height:350px;overflow-y:auto}.code-body pre{margin:0;font-family:var(--font-mono);font-size:.75rem;line-height:1.7;color:#faf7f4;white-space:pre-wrap;word-break:break-word}.demo-heading{font-size:2.5rem;font-weight:700;text-align:center;color:var(--text-heading);font-family:var(--font-heading)}.demo-btn{padding:.875rem 2rem;font-size:.9375rem;font-weight:600;background:var(--accent);color:#fff;border:0;border-radius:8px;cursor:pointer;transition:all .2s}.demo-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #c888724d}.typed-cursor{display:inline-block;width:3px;height:1em;background:currentColor;margin-left:2px;animation:blink 1s infinite;vertical-align:text-bottom}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.ba-container{position:relative;width:100%;max-width:480px;aspect-ratio:16/10;overflow:hidden;border-radius:10px;cursor:ew-resize;background:#1a1a1f}.ba-img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.ba-before{clip-path:inset(0 50%0 0)}.ba-slider{position:absolute;top:0;left:50%;width:3px;height:100%;background:#fff;transform:translate(-50%)}.ba-handle{position:absolute;top:50%;left:50%;width:40px;height:40px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d}.ba-handle svg{width:18px;height:18px;color:#333}.ba-label{position:absolute;bottom:12px;padding:4px 10px;background:#0009;color:#fff;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;border-radius:4px;pointer-events:none}.ba-label--before{left:12px}.ba-label--after{right:12px}.tilt-card{width:220px;height:150px;background:linear-gradient(135deg,#fff,#f9f6f2);border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-style:preserve-3d;transition:transform .1s;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 4px 12px #5a6d5f14}.tilt-card-icon{width:40px;height:40px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:.625rem}.tilt-card-icon svg{width:20px;height:20px;color:#fff}.tilt-card-text{font-weight:600;font-size:.875rem;color:var(--text-heading)}.tilt-glare{position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(200,136,114,.15) 0%,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;border-radius:inherit}.split-wrap span{display:inline-block;opacity:0;transform:translateY(25px);animation:splitIn .5s forwards}@keyframes splitIn{to{opacity:1;transform:translateY(0)}}.progress-demo{position:absolute;top:0;left:0;height:4px;background:var(--accent);width:35%;border-radius:0 2px 2px 0}.page-mockup{width:100%;max-width:400px;background:#fff;border-radius:8px;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 12px #5a6d5f14}.page-mockup__browser{display:flex;gap:6px;padding:10px 12px;background:#f9f6f2;border-bottom:1px solid var(--border)}.page-mockup__browser span{width:10px;height:10px;border-radius:50%;background:#5a6d5f33}.page-mockup__content{position:relative;padding:20px;min-height:200px}.page-mockup__header{height:8px;width:30%;background:#5a6d5f26;border-radius:4px;margin-bottom:24px}.page-mockup__hero{margin-bottom:20px}.page-mockup__line{height:6px;background:#5a6d5f1a;border-radius:3px;margin-bottom:8px}.page-mockup__cta{position:absolute;bottom:12px;right:12px;padding:8px 16px;color:#fff;border-radius:50px;font-size:.6875rem;font-weight:600}.noise-demo-wrap{width:100%;max-width:450px}.noise-demo-img{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16px}.noise-demo-overlay{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.noise-demo-label{position:relative;z-index:1;padding:6px 12px;background:#000000b3;color:#fff;font-size:.75rem;font-weight:600;border-radius:4px}.greeting-demo{text-align:center}.greeting-time{color:var(--text-muted);font-size:1rem;margin-top:.75rem;font-weight:500}.ul-demo{display:flex;gap:1.5rem}.ul-link{color:var(--text);text-decoration:none;position:relative;font-size:.9375rem}.ul-link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--accent);transition:width .25s}.ul-link:hover:after{width:100%}.guide-content{max-width:700px}.guide-section{margin-bottom:2.5rem}.guide-heading{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:var(--text-heading);font-family:var(--font-heading)}.guide-text{color:var(--text);margin-bottom:1rem;line-height:1.7}.guide-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}@media (max-width:900px){.guide-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}.guide-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem}.guide-card-header{display:flex;align-items:center;gap:.625rem;margin-bottom:.75rem}.guide-card-icon{width:36px;height:36px;flex-shrink:0;background:#c888721a;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent)}.guide-card-icon svg{width:18px;height:18px}.guide-card h3{font-size:.9375rem;font-weight:600;color:var(--text-heading)}.guide-card p{color:var(--text);font-size:.875rem;margin-bottom:.75rem;line-height:1.6}.guide-path{background:var(--bg);padding:.5rem .75rem;border-radius:6px;font-family:var(--font-mono);font-size:.75rem;color:var(--accent)}.guide-table{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:1rem 0}.guide-table-row{display:grid;grid-template-columns:1fr 1.5fr;gap:1rem;padding:.875rem 1rem;border-bottom:1px solid var(--border);color:var(--text)}.guide-table-row:last-child{border-bottom:none}.guide-table-header{background:#5a6d5f14;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-heading)}.guide-table-row code{background:var(--bg);padding:.125rem .375rem;border-radius:4px;font-size:.8125rem;color:var(--text-heading)}.guide-tip{background:#c888721a;border:1px solid rgba(200,136,114,.2);border-radius:8px;padding:.875rem 1rem;font-size:.875rem;color:var(--text);margin-top:1rem}.guide-steps{display:flex;flex-direction:column;gap:1rem}.guide-step{display:flex;gap:1rem;align-items:flex-start}.guide-step-num{width:28px;height:28px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600;flex-shrink:0}.guide-step-content h4{font-size:.9375rem;font-weight:600;margin-bottom:.25rem;color:var(--text-heading)}.guide-step-content p{color:var(--text);font-size:.875rem;line-height:1.6}.guide-faq{display:flex;flex-direction:column;gap:.5rem}.guide-faq-item{background:var(--bg-card);border:1px solid var(--border);border-radius:8px}.guide-faq-item summary{padding:.875rem 1rem;cursor:pointer;font-weight:500;font-size:.9375rem;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--text-heading)}.guide-faq-item summary::-webkit-details-marker{display:none}.guide-faq-item summary:after{content:"+";font-size:1.25rem;color:var(--text-muted)}.guide-faq-item[open] summary:after{content:"−"}.guide-faq-item p{padding:0 1rem 1rem;color:var(--text);font-size:.875rem;line-height:1.7}.guide-callout{display:flex;gap:.875rem;padding:1rem 1.125rem;border-radius:10px;margin-bottom:1.5rem}.guide-callout-icon{width:32px;height:32px;flex-shrink:0;background:#c8887226;border-radius:8px;display:flex;align-items:center;justify-content:center}.guide-callout-icon svg{width:16px;height:16px}.guide-callout--warning .guide-callout-icon{background:#c8887226;color:var(--accent)}.guide-callout--info .guide-callout-icon{background:#5a6d5f1f;color:var(--text-heading)}.guide-callout--tool .guide-callout-icon{background:#22c55e26;color:#22c55e}.guide-callout strong{display:block;margin-bottom:.25rem;color:var(--text-heading)}.guide-callout p{font-size:.875rem;color:var(--text);margin:0;line-height:1.6}.guide-callout a{color:var(--accent)}.guide-callout--warning{background:#c888721a;border:1px solid rgba(200,136,114,.25)}.guide-callout--warning strong{color:var(--accent)}.guide-callout--info{background:#5a6d5f14;border:1px solid rgba(90,109,95,.2)}.guide-callout--info strong{color:var(--text-heading)}.guide-callout--tool{background:#c888721a;border:1px solid rgba(200,136,114,.25)}.guide-callout--tool strong{color:var(--accent)}.guide-callout--tool .guide-callout-icon{background:#c8887226;color:var(--accent)}.guide-extension-link{display:inline-block;margin-top:.5rem;color:var(--accent);font-weight:500;font-size:.875rem}.guide-layout{display:grid;grid-template-columns:1fr 220px;gap:2rem;align-items:start}@media (max-width:768px){.guide-layout{display:flex;flex-direction:column}}.guide-main{min-width:0}@media (max-width:768px){.guide-main{order:2}}.guide-toc-wrapper{position:sticky;top:100px}@media (max-width:768px){.guide-toc-wrapper{position:static;margin-bottom:1.5rem;order:1}}.guide-toc{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.25rem}.guide-toc-title{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.625rem;cursor:default;display:flex;align-items:center;justify-content:space-between}.guide-toc-toggle{display:none;width:20px;height:20px;color:var(--text-muted);transition:transform .2s}@media (max-width:768px){.guide-toc-title{cursor:pointer}.guide-toc-toggle{display:block}.guide-toc.collapsed .guide-toc-toggle{transform:rotate(-90deg)}.guide-toc.collapsed .guide-toc-list{display:none}}.guide-toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}.guide-toc-list a{color:var(--accent);text-decoration:none;font-size:.875rem;transition:opacity .15s}.guide-toc-list a:hover{opacity:.8}.bundles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.bundle-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.25rem;transition:border-color .2s,transform .2s,box-shadow .2s}.bundle-card:hover{border-color:#5a6d5f4d;transform:translateY(-2px);box-shadow:0 4px 12px #5a6d5f14}.bundle-card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.bundle-icon{width:40px;height:40px;flex-shrink:0;background:#c888721a;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent)}.bundle-icon svg{width:20px;height:20px}.bundle-name{font-size:1.0625rem;font-weight:600;color:var(--text-heading);font-family:var(--font-heading)}.bundle-desc{color:var(--text);font-size:.875rem;line-height:1.6;margin-bottom:1rem}.bundle-snippets{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1rem}.bundle-snippet-tag{background:var(--bg);padding:.25rem .5rem;border-radius:4px;font-size:.6875rem;color:var(--text-muted)}.bundle-btn{width:100%;padding:.625rem;background:0 0;border:1px solid var(--border);border-radius:6px;color:var(--text-heading);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s}.bundle-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}.bundle-back{background:0 0;border:0;color:var(--text-muted);font-size:.875rem;cursor:pointer;padding:0;margin-bottom:1.5rem;transition:color .15s}.bundle-back:hover{color:var(--text-heading)}.bundle-detail-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.bundle-detail-header .bundle-icon{width:48px;height:48px}.bundle-detail-header .bundle-icon svg{width:24px;height:24px}.bundle-detail-name{font-size:1.5rem;font-weight:600;margin-bottom:.25rem;color:var(--text-heading);font-family:var(--font-heading)}.bundle-detail-desc{color:var(--text);font-size:.9375rem}.bundle-actions{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.bundle-copy-all{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:var(--accent);border:0;border-radius:8px;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s}.bundle-copy-all:hover{background:var(--accent-hover)}.bundle-copy-all.copied{background:var(--success)}.bundle-copy-all svg{width:16px;height:16px}.bundle-copy-hint{color:var(--text-muted);font-size:.8125rem}.bundle-snippet-list{display:flex;flex-direction:column;gap:1rem}.bundle-snippet-item{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;overflow:hidden}.bundle-snippet-header{display:flex;align-items:flex-start;gap:.875rem;padding:1rem}.bundle-snippet-num{width:24px;height:24px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;flex-shrink:0}.bundle-snippet-title{font-size:.9375rem;font-weight:600;margin-bottom:.125rem;color:var(--text-heading)}.bundle-snippet-desc{color:var(--text);font-size:.8125rem;line-height:1.5}.bundle-snippet-copy{margin-left:auto;padding:.375rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:5px;color:var(--text-heading);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .15s;flex-shrink:0}.bundle-snippet-copy:hover{border-color:var(--accent);color:var(--accent)}.bundle-snippet-copy.copied{background:var(--success);border-color:var(--success);color:#fff}.bundle-snippet-code-wrap{border-top:1px solid var(--border)}.bundle-snippet-code-wrap summary{padding:.625rem 1rem;font-size:.75rem;color:var(--text-muted);cursor:pointer}.bundle-snippet-code-wrap summary:hover{color:var(--text-heading)}.bundle-snippet-code{margin:0;padding:1rem;background:#4a5a4e;font-family:var(--font-mono);font-size:.6875rem;line-height:1.6;color:#faf7f4;white-space:pre-wrap;word-break:break-word;max-height:200px;overflow-y:auto}.bundle-notes{background:#c888721a;border:1px solid rgba(200,136,114,.25);border-radius:10px;padding:1rem 1.25rem;margin-bottom:1.25rem}.bundle-notes-title{font-weight:600;font-size:.9375rem;color:var(--accent);margin-bottom:.625rem}.bundle-notes-list{margin:0;padding-left:1.25rem}.bundle-notes-list li{font-size:.875rem;color:var(--text);line-height:1.7;margin-bottom:.25rem}.palette-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem}.palette-header{display:flex;align-items:flex-start;gap:.875rem;margin-bottom:1rem}.palette-icon{font-size:1.5rem}.palette-title{font-size:1rem;font-weight:600;margin-bottom:.125rem;color:var(--text-heading);font-family:var(--font-heading)}.palette-desc{font-size:.8125rem;color:var(--text)}.palette-inputs{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.palette-input-group{flex:1;min-width:140px}.palette-input-group label{display:block;font-size:.75rem;font-weight:600;color:var(--text-heading);margin-bottom:.375rem;text-transform:uppercase;letter-spacing:.05em}.palette-input-wrap{display:flex;gap:.5rem;align-items:center}.palette-input-wrap input[type=color]{width:36px;height:36px;border:2px solid var(--border);border-radius:6px;cursor:pointer;padding:2px;background:0 0}.palette-input-wrap input[type=color]::-webkit-color-swatch-wrapper{padding:0}.palette-input-wrap input[type=color]::-webkit-color-swatch{border-radius:4px;border:0}.palette-input-wrap input[type=text]{flex:1;padding:.5rem .625rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text-heading);font-size:.8125rem;font-family:var(--font-mono)}.palette-input-wrap input[type=text]::-moz-placeholder{color:var(--text-muted);opacity:.6}.palette-input-wrap input[type=text]::placeholder{color:var(--text-muted);opacity:.6}.palette-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.palette-apply{padding:.5rem 1rem;background:var(--accent);border:0;border-radius:6px;color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .15s}.palette-apply:hover{background:var(--accent-hover)}.palette-clear{padding:.5rem 1rem;background:0 0;border:1px solid var(--border);border-radius:6px;color:var(--text-muted);font-size:.8125rem;cursor:pointer;transition:all .15s}.palette-clear:hover{border-color:var(--text-heading);color:var(--text-heading)}.palette-status{font-size:.8125rem;color:var(--success)}.bundle-color-preview{display:flex;align-items:center;gap:.5rem;margin-bottom:.875rem;padding-top:.5rem;border-top:1px solid var(--border)}.bundle-color-dot{width:12px;height:12px;border-radius:50%}.bundle-color-label{font-size:.75rem;color:var(--text)}.bundle-palette-applied{background:#c888721a;border:1px solid rgba(200,136,114,.2);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.875rem;color:var(--accent)}.theme-config{max-width:100%}.theme-section{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:2rem;margin-bottom:1.5rem}@media (max-width:600px){.theme-section{padding:1.5rem}}.theme-section-header{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.theme-section-icon{width:40px;height:40px;flex-shrink:0;background:#c888721a;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent)}.theme-section-icon svg{width:20px;height:20px}.theme-section-title{font-size:1.0625rem;font-weight:600;margin:0;line-height:1.3;color:var(--text-heading);font-family:var(--font-heading)}.theme-section-header:not(:has(.theme-section-desc)){align-items:center}.theme-section-header:has(.theme-section-desc) .theme-section-icon{margin-top:2px}.theme-section-desc{font-size:.875rem;color:var(--text);line-height:1.5;margin:.25rem 0 0}.theme-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.75rem 2rem}@media (max-width:600px){.theme-inputs{grid-template-columns:1fr;gap:1.5rem}}.theme-input-group{min-width:0}.theme-input-group--wide{grid-column:1/-1;max-width:100%}@media (min-width:601px){.theme-input-group--wide{max-width:400px}}.theme-input-group label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:.5rem;color:var(--text-heading)}.theme-input-wrap{display:flex;gap:.5rem;align-items:center}.theme-input-wrap input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:44px;min-width:44px;border:2px solid var(--border);border-radius:8px;cursor:pointer;padding:4px;background-color:transparent}.theme-input-wrap input[type=color]::-webkit-color-swatch-wrapper{padding:0}.theme-input-wrap input[type=color]::-webkit-color-swatch{border:0;border-radius:4px}.theme-input-wrap input[type=color]::-moz-color-swatch{border:0;border-radius:4px}.theme-input-wrap input[type=text]{flex:1;padding:.625rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text-heading);font-size:.875rem;font-family:var(--font-mono);transition:border-color .15s}.theme-input-wrap input[type=text]:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px #c8887226}.theme-text-input{width:100%;padding:.625rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text-heading);font-size:.875rem;transition:border-color .15s}.theme-text-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px #c8887226}.theme-text-input::-moz-placeholder{color:var(--text-muted);opacity:.6}.theme-text-input::placeholder{color:var(--text-muted);opacity:.6}.theme-input-hint{display:block;font-size:.75rem;color:var(--text-muted);margin-top:.375rem}.theme-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}.theme-save{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:var(--accent);border:0;border-radius:8px;color:#fff;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .15s}.theme-save:hover{background:var(--accent-hover)}.theme-save svg{width:18px;height:18px}.theme-clear{padding:.75rem 1.25rem;background:0 0;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:.9375rem;cursor:pointer;transition:all .15s}.theme-clear:hover{border-color:#ef4444;color:#ef4444}.theme-status{font-size:.875rem;color:var(--success);font-weight:500}.theme-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.theme-preview-title{font-size:1rem;font-weight:600;margin-bottom:.25rem;color:var(--text-heading);font-family:var(--font-heading)}.theme-preview-desc{font-size:.875rem;color:var(--text);margin-bottom:1.25rem}.theme-preview-samples{display:flex;gap:1.5rem 2rem;flex-wrap:wrap;align-items:center}@media (max-width:600px){.theme-preview-samples{gap:1.25rem}}.theme-preview-sample{display:flex;flex-direction:column;align-items:center;gap:.5rem}.theme-preview-sample span{font-size:.75rem;color:var(--text)}.theme-preview-btn{padding:.625rem 1.25rem;border:0;border-radius:6px;color:#fff;font-size:.875rem;font-weight:600;cursor:default}.theme-preview-progress{width:120px;height:4px;border-radius:2px}.theme-preview-link{padding-bottom:2px;border-bottom:2px solid;font-size:.9375rem;color:var(--text-heading)}.bundles-theme-notice{display:flex;align-items:center;gap:.625rem;background:#c888721a;border:1px solid rgba(200,136,114,.2);border-radius:8px;padding:.75rem 1rem;margin-bottom:1.25rem;font-size:.875rem;color:var(--text)}.bundles-theme-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.bundles-theme-link{margin-left:auto;color:var(--accent);text-decoration:none;font-weight:500}.bundles-theme-link:hover{text-decoration:underline}.bundles-theme-prompt{display:flex;align-items:center;gap:.625rem;background:#c888721a;border:1px solid rgba(200,136,114,.2);border-radius:8px;padding:.75rem 1rem;margin-bottom:1.25rem;font-size:.875rem;color:var(--text)}.bundles-theme-prompt .bundles-theme-link{color:var(--accent)}.guide-list{margin:.5rem 0 0 1.25rem;padding:0;list-style:disc}.guide-list li{font-size:.875rem;color:var(--text);line-height:1.7;margin-bottom:.375rem;display:list-item}.guide-list code{background:#5a6d5f14;padding:.125rem .375rem;border-radius:4px;font-size:.8125rem;color:var(--text-heading)}.overview-note{background:#5a6d5f14;border-left:3px solid rgba(90,109,95,.4);padding:1rem 1.25rem;border-radius:0 8px 8px 0;margin-bottom:1.5rem;font-size:.9375rem;color:var(--text);line-height:1.6}.overview-steps{display:flex;flex-direction:column;gap:1.25rem}.overview-step{display:flex;gap:1rem;align-items:flex-start}.overview-step-num{width:32px;height:32px;min-width:32px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}.overview-step strong{display:block;color:var(--text-heading);margin-bottom:.25rem}.overview-step p{margin:0 0 .5rem;font-size:.875rem;color:var(--text);line-height:1.5}.overview-link{font-size:.8125rem;color:var(--accent);text-decoration:none;font-weight:500}.overview-link:hover{text-decoration:underline}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.overview-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:1rem}.overview-card h4{font-size:.875rem;font-weight:600;margin-bottom:.375rem;color:var(--text-heading)}.overview-card p{font-size:.8125rem;color:var(--text);margin:0;line-height:1.5}.overview-list{list-style:none;padding:0;margin:0}.overview-list li{padding:.5rem 0 .5rem 1.5rem;position:relative;font-size:.875rem;color:var(--text);line-height:1.6}.overview-list li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:600}.overview-muted{font-size:.875rem;color:var(--text)}.overview-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);font-size:.8125rem;color:var(--text-muted)}.overview-footer a{color:var(--accent);text-decoration:none}.overview-footer a:hover{text-decoration:underline}