:root{--z-background:0;--z-nav:100;--z-overlay:9999;--z-modal:10000;--z-mobile-nav:200001}.style-selector{position:fixed;top:16px;right:16px;z-index:1001;transition:all .3s ease}.style-selector.minimized{background:transparent;width:auto;height:auto;border-radius:9999px;box-shadow:none;border:none}.style-selector-toggle{width:100%;height:100%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#6b7280;transition:all .2s ease}.style-selector-toggle.customize-button{padding:6px 12px;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.06);border-radius:9999px;box-shadow:0 4px 16px rgba(0,0,0,.08)}.style-selector-toggle.customize-button:hover{background:rgba(255,255,255,1);box-shadow:0 6px 20px rgba(0,0,0,.12)}.style-selector-toggle:hover{color:#374151}.style-selector-toggle svg{transition:transform .2s ease}.style-selector-toggle:hover svg{transform:rotate(90deg)}.style-selector.expanded{background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-radius:10px;padding:10px 12px;box-shadow:0 4px 20px rgba(0,0,0,.1);border:1px solid rgba(255,255,255,.2);width:200px}.style-selector.expanded.traditional{width:140px}.style-selector.traditional{left:50%;right:auto;top:35px;transform:translateX(-50%)}.pill-selector-inline .style-selector{position:static;top:auto;right:auto}.style-selector-container{display:flex;flex-direction:column;gap:8px}.style-selector-header{display:flex;align-items:center;justify-content:space-between}.style-label{font-size:12px;font-weight:600;color:#374151;white-space:nowrap}.style-selector-close{background:none;border:none;cursor:pointer;font-size:16px;color:#6b7280;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.style-selector-close:hover{background:rgba(0,0,0,.05);color:#374151}.style-buttons{display:flex;gap:3px}.style-btn{padding:4px 8px;font-size:10px;font-weight:500;border:1px solid #d1d5db;background:#ffffff;color:#6b7280;border-radius:4px;cursor:pointer;transition:all .2s ease;flex:1;text-align:center}.style-btn:hover{background:#f9fafb;border-color:#9ca3af;color:#374151}.style-btn.active{background:#3b82f6;border-color:#3b82f6;color:#ffffff}@media (max-width:768px){.inline-style-selector .style-selector{position:relative;top:auto;right:auto;left:auto;transform:none}.style-selector.expanded{width:180px;padding:10px 12px}.style-selector.expanded.traditional{width:140px}.style-buttons{flex-direction:column;gap:6px}.style-btn{width:100%}.traditional-nav .nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.traditional-nav .nav-container{padding-right:3rem}}.traditional-nav{position:fixed;top:0;left:0;right:0;z-index:200000;background:color-mix(in oklab,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:all .3s ease}.nav-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;align-items:center;justify-content:flex-start;height:70px;gap:2rem;position:relative}.traditional-nav .nav-container{padding-right:1rem}.nav-brand{display:flex;align-items:center}.nav-logo{font-size:1.5rem;font-weight:700;color:var(--txt);text-decoration:none;transition:color .2s ease}.nav-logo:hover{color:var(--brand)}.nav-menu{display:flex;align-items:center;gap:2rem}.traditional-nav .nav-actions{margin-left:auto}.nav-link{font-size:1rem;font-weight:500;color:var(--txt-muted);text-decoration:none;padding:.5rem 0;position:relative;transition:color .2s ease}.nav-link:hover{color:var(--txt)}.nav-link.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--active-underline-color,#3b82f6);border-radius:1px}.mobile-menu-button{display:none;flex-direction:column;justify-content:center;align-items:center;width:30px;height:30px;background:none;border:none;cursor:pointer;padding:0;position:absolute;right:1rem;top:50%;transform:translateY(-50%);z-index:200006;pointer-events:auto}.hamburger{position:relative}.hamburger,.hamburger:after,.hamburger:before{width:24px;height:2px;background:var(--txt);transition:all .3s ease}.hamburger:after,.hamburger:before{content:"";position:absolute}.hamburger:before{top:-8px}.hamburger:after{bottom:-8px}.hamburger.open{background:transparent}.hamburger.open:before{top:0;transform:rotate(45deg)}.hamburger.open:after{bottom:0;transform:rotate(-45deg)}.mobile-menu-portal,.mobile-scrim{position:fixed;inset:0;z-index:200001}.mobile-scrim{background:rgba(0,0,0,0)}.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;background:color-mix(in oklab,var(--bg) 98%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:1rem;flex-direction:column;gap:.5rem;z-index:200002;will-change:transform,opacity}.mobile-menu.open{display:flex}.mobile-nav-link{font-size:1.1rem;font-weight:500;color:var(--txt-muted);text-decoration:none;padding:.75rem 0;border-bottom:1px solid var(--line);transition:color .2s ease}.mobile-nav-link:hover{color:var(--txt)}.logo-text{font-size:1.5rem;font-weight:700;color:var(--txt)}.card-nav .logo-text{font-size:1.25rem;font-weight:600;color:var(--txt)}.inline-customize-toggle{background:var(--bg-elev);color:var(--txt);border:1px solid var(--line);height:var(--nav-h,44px);padding:0 var(--pill-pad-x,12px);border-radius:9999px;display:inline-flex;align-items:center;justify-content:center}.inline-customize-toggle:hover{background:color-mix(in oklab,var(--bg-elev) 92%,transparent)}.inline-style-selector{position:relative;overflow:visible;z-index:2000}.inline-style-selector .style-selector{position:relative;top:auto;right:auto;left:auto;transform:none}.style-selector-popover{position:relative;display:inline-block;min-width:260px;max-width:90vw;padding:12px;border-radius:12px;background:var(--popover-bg,#ffffff);color:var(--popover-fg,#111111);box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.06);z-index:2050}.style-selector-popover .style-selector{display:block}.dark .style-selector-popover{background:var(--popover-bg-dark,#0b0f19);color:var(--popover-fg-dark,#e5e7eb);border-color:rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.45)}.card-nav .nav-actions{display:flex;align-items:center}.card-nav .style-selector-popover{height:100%;display:inline-flex;align-items:center;padding:0 10px;border-radius:calc(.75rem - .35rem);white-space:nowrap}.card-nav .style-selector-popover .style-selector.expanded{height:100%;background:transparent;border:0;box-shadow:none;padding:0;width:auto;min-width:0}.card-nav .style-selector-popover .style-selector-container{flex-direction:row;align-items:center;gap:10px}.card-nav .style-selector-popover .style-buttons{display:flex;flex-direction:row;gap:6px}.card-nav .style-selector-popover .style-selector-header{gap:8px}@media (min-width:769px){.inline-style-selector .style-selector.expanded{display:flex;align-items:center;height:var(--nav-h,44px);border-radius:9999px;padding:0 10px;width:auto;z-index:2000;white-space:nowrap}.inline-style-selector .style-selector-container{flex-direction:row;align-items:center;gap:10px}.inline-style-selector .style-selector-header{display:flex;align-items:center;gap:8px}.inline-style-selector .style-buttons{display:flex;flex-direction:row;gap:6px}.inline-style-selector .style-btn{height:calc(var(--nav-h) - 10px);display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:0 10px}}.inline-style-selector .style-selector.minimized .customize-button{transform-origin:center;transition:transform .3s ease,opacity .3s ease,width .3s ease,height .3s ease}.inline-style-selector .style-selector.expanded{animation:selector-grow .28s ease forwards}@keyframes selector-grow{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}@media (max-width:768px){.desktop-menu{display:none}.mobile-menu-button{display:flex}.mobile-menu{display:none}.mobile-menu.open{display:flex}.style-selector{top:10px;right:10px}.style-selector.traditional{left:50%;right:auto;top:35px;transform:translateX(-50%)}.style-selector.pill{left:10px;right:auto}.style-selector.card{right:10px;left:auto;top:76px}.style-selector.minimized{width:auto;height:auto}.style-selector.expanded{padding:8px 10px;width:200px}.style-selector.expanded.traditional{width:136px}.traditional-nav .nav-container{padding-right:3.75rem}.style-btn{font-size:9px;padding:3px 6px}.pill-nav .nav-actions,.pill-nav .pill-logo{display:none}}@media (max-width:480px){.nav-container{padding:0 .75rem}.nav-logo{font-size:1.25rem}.style-selector{top:10px;right:10px}.style-selector.minimized{width:auto;height:auto}.style-selector.expanded{padding:6px 8px;width:200px}.style-label{font-size:11px}.style-btn{font-size:8px;padding:2px 4px}}@media (max-width:768px){.traditional-nav .inline-style-selector .style-selector.traditional{position:relative;top:0;right:auto;left:auto;transform:none}.traditional-nav .inline-style-selector{display:inline-flex;align-items:center;height:100%}.traditional-nav .inline-style-selector .style-selector-toggle.customize-button{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;line-height:1}}body.has-fixed-nav{padding-top:80px}.navigation-container,header[role=banner]{position:relative;z-index:100000}.traditional-nav.non-sticky{position:static;background:transparent;border-bottom:none;backdrop-filter:none}*{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.inline-style-selector .style-selector.minimized .customize-button,.pill-selector-inline .style-selector.minimized .customize-button{background:var(--pill-bg,#fff);color:var(--pill-text,#000);height:var(--nav-h);padding:0 var(--pill-pad-x);border-radius:9999px;border:none}