*{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;min-height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}#root{background-color:#121316;background-image:url(/demos/keel-sidebar/image.png);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:center;align-items:center;width:100%;min-height:100vh;display:flex}.sidebar-container{box-sizing:border-box;-webkit-user-select:none;user-select:none;z-index:100;-webkit-backdrop-filter:blur(24px)saturate(180%)contrast(108%);backdrop-filter:blur(24px)saturate(180%)contrast(108%);background:linear-gradient(#5a5d6661 0%,#373a4259 25%,#2022286b 65%,#14161a85 100%);border:1px solid #ffffff38;border-color:#ffffff6b #ffffff38 #ffffff1f;border-radius:28px;flex-direction:column;align-items:center;width:74px;padding:16px 0 20px;display:flex;position:relative;overflow:visible;box-shadow:0 30px 60px -10px #0009,0 12px 28px -6px #0006,inset 0 1px 1px #ffffff80,inset 0 0 14px #ffffff0d,inset 0 -1px 1px #ffffff1a}.sidebar-container:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(145deg,#ffffff2e 0%,#ffffff0f 40%,#0000 100%);border-radius:28px 28px 0 0;height:40%;position:absolute;top:0;left:0;right:0}.sidebar-traffic-lights{z-index:2;box-sizing:border-box;align-items:center;gap:5.5px;width:100%;height:14px;margin-bottom:10px;padding-left:21px;display:flex;position:relative}.sidebar-traffic-lights .dot{border-radius:50%;width:7px;height:7px;display:inline-block}.sidebar-traffic-lights .dot-red{background-color:#ff5f56;box-shadow:0 0 4px #ff5f56b3}.sidebar-traffic-lights .dot-yellow{background-color:#ffbd2e;box-shadow:0 0 4px #ffbd2eb3}.sidebar-traffic-lights .dot-green{background-color:#27c93f;box-shadow:0 0 4px #27c93fb3}.sidebar-brand-wrapper{z-index:2;box-sizing:border-box;align-items:center;width:100%;height:30px;margin-bottom:6px;display:flex;position:relative}.sidebar-brand-collapsed{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.sidebar-brand-logo{color:#fff;letter-spacing:-.5px;text-shadow:0 2px 8px #00000080;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;font-size:26px;font-weight:800;line-height:1}.sidebar-brand-expanded{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;height:100%;padding:0 16px 0 20px;display:flex}.sidebar-expanded-title{color:#fff;letter-spacing:-.3px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:18px;font-weight:700}.sidebar-bell-btn{color:#fff;cursor:pointer;justify-content:center;align-items:center;margin-right:4px;display:flex;position:relative}.sidebar-bell-badge{color:#fff;background:#e50914;border-radius:50%;justify-content:center;align-items:center;width:13px;height:13px;font-size:8.5px;font-weight:700;display:flex;position:absolute;top:-4px;right:-5px;box-shadow:0 1px 4px #e5091499}.sidebar-expand-btn{cursor:pointer;z-index:10;background:#fff;border:1px solid #fff9;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;padding:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex;position:absolute;top:50%;right:-9px;transform:translateY(-50%);box-shadow:0 2px 7px #00000059}.sidebar-expand-btn:hover{transform:translateY(-50%)scale(1.15);box-shadow:0 3px 10px #00000080}.sidebar-expand-btn:active{transform:translateY(-50%)scale(.95)}.sidebar-collapse-pill{color:#dc2626;white-space:nowrap;pointer-events:none;background:#fff;border-radius:12px;padding:3px 9px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:11px;font-weight:700;animation:.2s forwards fadeIn;position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%);box-shadow:0 3px 10px #0000004d}.sidebar-divider{z-index:2;background:linear-gradient(90deg,#0000 0%,#ffffff26 20%,#ffffffbf 50%,#ffffff26 80%,#0000 100%);height:1px;margin:8px 0;position:relative;box-shadow:0 0 8px .5px #ffffff59}.sidebar-profile-section{z-index:2;box-sizing:border-box;align-items:center;width:100%;height:44px;display:flex;position:relative}.sidebar-profile-card{cursor:pointer;box-sizing:border-box;align-items:center;width:100%;height:100%;padding:0 17px;display:flex}.sidebar-avatar-wrapper{background:#ffffff14;border:1.5px solid #ffffff52;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .2s,border-color .2s;display:flex;overflow:hidden;box-shadow:0 4px 12px #00000073,inset 0 1px 1px #fff6}.sidebar-profile-card:hover .sidebar-avatar-wrapper{border-color:#ffffffa6;transform:scale(1.05)}.sidebar-avatar-img{object-fit:cover;border-radius:50%;width:100%;height:100%;display:block}.sidebar-profile-details{text-align:left;flex-direction:column;flex:1;margin-left:12px;display:flex;overflow:hidden}.sidebar-profile-name{color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13.5px;font-weight:600;line-height:1.2}.sidebar-profile-switch{color:#fff9;align-items:center;gap:4px;margin-top:2px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:9.5px;display:flex}.sidebar-profile-chevron{color:#ffffffa6;flex-shrink:0;margin-left:6px}.sidebar-search-row{box-sizing:border-box;align-items:center;gap:10px;width:100%;height:28px;margin-bottom:4px;padding:0 17px;display:flex}.sidebar-menu-lozenge{flex-shrink:0;justify-content:center;align-items:center;width:40px;height:26px;display:flex}.sidebar-menu-lozenge:before{content:"";background:#ffffff42;border:1px solid #ffffff59;border-radius:4px;width:13px;height:7.5px;position:absolute;transform:rotate(-25deg);box-shadow:inset 0 1px 1px #ffffff4d}.sidebar-lozenge-dot{z-index:2;background:#fff;border-radius:50%;width:3px;height:3px;position:relative;box-shadow:0 0 3px #fff}.sidebar-search-box{box-sizing:border-box;background:#ffffff14;border:1px solid #ffffff1f;border-radius:13px;flex:1;align-items:center;height:26px;padding:0 10px;display:flex;overflow:hidden;box-shadow:inset 0 1px 3px #00000040}.sidebar-search-input{color:#fff;letter-spacing:.8px;background:0 0;border:none;outline:none;width:100%;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:10px;font-weight:500}.sidebar-search-input::placeholder{color:#ffffff73;font-size:9.5px;font-weight:600}.sidebar-section{z-index:2;flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.sidebar-section-title{color:#ffffffa6;letter-spacing:.9px;text-transform:uppercase;box-sizing:border-box;text-shadow:0 1px 2px #0006;align-items:center;width:100%;height:16px;margin-bottom:4px;padding-left:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:8.5px;font-weight:700;display:flex}.sidebar-container.collapsed .sidebar-section-title{justify-content:center;padding-left:0}.sidebar-nav-list{flex-direction:column;align-items:center;gap:3px;width:100%;display:flex}.sidebar-nav-item{cursor:pointer;color:#ffffffad;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background:0 0;justify-content:flex-start;align-items:center;width:100%;height:38px;margin:0;padding:0 17px;transition:color .15s,background-color .15s;display:flex;position:relative;border:none!important;outline:none!important}.sidebar-nav-item:focus,.sidebar-nav-item:focus-visible,.sidebar-nav-item:active{box-shadow:none!important;border:none!important;outline:none!important}.sidebar-nav-item:hover{color:#fff;border:none!important;outline:none!important}.sidebar-nav-icon-slot{flex-shrink:0;justify-content:center;align-items:center;width:40px;height:38px;display:flex}.sidebar-dock-icon-wrapper{transform-origin:50%;will-change:transform;pointer-events:none;justify-content:center;align-items:center;display:flex}.sidebar-nav-label{color:#ffffffe0;text-align:left;white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.1px;flex:1;margin-left:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;overflow:hidden}.sidebar-item-badge{color:#fff;background:#e50914;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;margin-left:auto;font-size:9.5px;font-weight:700;display:flex;box-shadow:0 2px 6px #e5091480}.sidebar-nav-item.active{width:100%;height:38px;color:#fff!important;box-shadow:none!important;background:#e50914!important;border:none!important;outline:none!important}.sidebar-nav-item.active .sidebar-nav-label{color:#fff;font-weight:600}.sidebar-nav-item.active:hover{background:#f40a16!important;border:none!important;outline:none!important}.sidebar-nav-item.active .sidebar-badge-circle{background:#ffffff38;box-shadow:none!important;border:none!important}.sidebar-badge-circle{width:20px;height:20px;box-shadow:none;background:#ffffff29;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background-color .15s;display:flex}.sidebar-nav-item:hover .sidebar-badge-circle{background:#ffffff47}.sidebar-svg-icon{display:block}.sidebar-container.collapsed .sidebar-nav-item[data-tooltip]:after{content:attr(data-tooltip);-webkit-backdrop-filter:blur(12px);color:#fff;white-space:nowrap;pointer-events:none;opacity:0;letter-spacing:.2px;z-index:200;background:#121316e0;border:1px solid #ffffff2e;border-radius:6px;padding:4px 9px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:11px;font-weight:500;transition:opacity .18s,transform .18s;position:absolute;top:50%;left:calc(100% + 14px);transform:translateY(-50%)translate(-4px);box-shadow:0 4px 14px #0000008c}.sidebar-container.collapsed .sidebar-nav-item[data-tooltip]:before{content:"";pointer-events:none;opacity:0;z-index:200;border:4px solid #0000;border-left-width:0;border-right:6px solid #121316e0;transition:opacity .18s;position:absolute;top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.sidebar-container.collapsed .sidebar-nav-item[data-tooltip]:hover:after{opacity:1;transform:translateY(-50%)translate(0)}.sidebar-container.collapsed .sidebar-nav-item[data-tooltip]:hover:before{opacity:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(-50%)scale(.9)}to{opacity:1;transform:translateY(-50%)scale(1)}}@media (width<=1023px){.mnav-shell{--mnav-gap:12px;--mnav-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;width:100%;min-height:100dvh;font-family:var(--mnav-font);color:#fff;-webkit-tap-highlight-color:transparent;position:relative}.mnav-shell:before{content:"";pointer-events:none;background:linear-gradient(#0c0d106b 0%,#0c0d1038 55%,#0000 100%);height:300px;position:fixed;top:0;left:0;right:0}.mnav-shell button{color:inherit;font-family:inherit}.mnav-glass{-webkit-backdrop-filter:blur(24px)saturate(180%)contrast(108%);backdrop-filter:blur(24px)saturate(180%)contrast(108%);background:linear-gradient(#5a5d666b 0%,#373a4266 30%,#20222880 70%,#14161a99 100%);border:1px solid #ffffff38;border-color:#ffffff6b #ffffff38 #ffffff1f;box-shadow:0 24px 48px -12px #0000008c,0 10px 24px -8px #0006,inset 0 1px 1px #ffffff73,inset 0 0 14px #ffffff0d}.mnav-topbar{z-index:50;top:calc(var(--mnav-gap) + env(safe-area-inset-top,0px));left:var(--mnav-gap);right:var(--mnav-gap);box-sizing:border-box;border-radius:22px;justify-content:space-between;align-items:center;height:60px;padding:0 10px 0 12px;display:flex;position:fixed}.mnav-brand{align-items:center;gap:10px;min-width:0;display:flex}.mnav-brand-logo{letter-spacing:-.5px;text-shadow:0 2px 8px #00000080;background:#ffffff1a;border:1px solid #ffffff2e;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;font-size:22px;font-weight:800;line-height:1;display:flex}.mnav-brand-title{letter-spacing:-.3px;white-space:nowrap;font-size:17px;font-weight:700}.mnav-top-actions{flex-shrink:0;align-items:center;gap:4px;display:flex}.mnav-icon-btn{cursor:pointer;color:#fff;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:background-color .15s;display:flex;position:relative}.mnav-icon-btn:active{background:#ffffff24}.mnav-icon-btn:focus-visible,.mnav-avatar-btn:focus-visible,.mnav-tab:focus-visible,.mnav-item:focus-visible,.mnav-profile:focus-visible{outline-offset:-2px;outline:2px solid #ffffffd9}.mnav-dot-badge{color:#fff;background:#e50914;border-radius:8px;justify-content:center;align-items:center;min-width:15px;height:15px;font-size:9.5px;font-weight:700;display:flex;position:absolute;top:5px;right:4px;box-shadow:0 1px 4px #e5091499}.mnav-avatar-btn{cursor:pointer;background:#ffffff14;border:1.5px solid #ffffff52;border-radius:50%;width:40px;height:40px;margin-left:4px;padding:0;overflow:hidden;box-shadow:0 4px 12px #00000073,inset 0 1px 1px #fff6}.mnav-avatar-btn img{object-fit:cover;width:100%;height:100%;display:block}.mnav-main{z-index:1;box-sizing:border-box;min-height:100dvh;padding:calc(60px + var(--mnav-gap) * 2 + 18px + env(safe-area-inset-top,0px)) 24px calc(70px + var(--mnav-gap) * 2 + env(safe-area-inset-bottom,0px));position:relative}.mnav-heading{flex-direction:column;gap:6px;display:flex}.mnav-eyebrow{letter-spacing:1.2px;color:#ffffffd9;text-shadow:0 1px 6px #0000008c;font-size:11px;font-weight:700}.mnav-title{letter-spacing:-.6px;color:#fff;text-shadow:0 2px 14px #0000008c;margin:0;font-size:30px;font-weight:700;line-height:1.15}.mnav-tabbar{z-index:50;left:var(--mnav-gap);right:var(--mnav-gap);bottom:calc(var(--mnav-gap) + env(safe-area-inset-bottom,0px));box-sizing:border-box;border-radius:26px;justify-content:space-between;align-items:stretch;gap:4px;height:70px;padding:6px;display:flex;position:fixed}.mnav-tab{cursor:pointer;color:#ffffffb8;background:0 0;border:none;border-radius:20px;flex-direction:column;flex:1 1 0;justify-content:center;align-items:center;gap:5px;min-width:0;padding:0 2px;transition:background-color .15s,color .15s;display:flex}.mnav-tab.active{color:#fff;background:#e50914;box-shadow:0 6px 16px -4px #e5091499}.mnav-tab.active .sidebar-badge-circle,.mnav-item.active .sidebar-badge-circle{background:#ffffff38}.mnav-tab-icon{justify-content:center;align-items:center;height:22px;display:flex;position:relative}.mnav-circle{width:22px;height:22px}.mnav-tab-badge{color:#fff;box-sizing:content-box;background:#e50914;border:1.5px solid #ffffffe6;border-radius:8px;justify-content:center;align-items:center;min-width:15px;height:15px;font-size:9px;font-weight:700;display:flex;position:absolute;top:-5px;left:calc(100% - 5px)}.mnav-tab.active .mnav-tab-badge{color:#e50914;background:#fff;border-color:#fff}.mnav-tab-label{letter-spacing:-.1px;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:11px;font-weight:600;line-height:1.1;overflow:hidden}.mnav-scrim{z-index:80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0a0b0e73;position:fixed;inset:0}.mnav-drawer{z-index:90;top:calc(10px + env(safe-area-inset-top,0px));max-height:calc(100% - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));box-sizing:border-box;overscroll-behavior:contain;scrollbar-width:none;background:linear-gradient(#4e515ab8 0%,#30333abd 30%,#1e2026cc 70%,#14161adb 100%);border-radius:28px;flex-direction:column;width:min(320px,100vw - 56px);padding:14px 0 18px;display:flex;position:fixed;left:10px;overflow-y:auto}.mnav-drawer::-webkit-scrollbar{display:none}.mnav-drawer-head{flex-shrink:0;justify-content:space-between;align-items:center;padding:0 10px 0 20px;display:flex}.mnav-lights{width:auto;margin:0;padding:0}.mnav-close{background:#ffffff1a}.mnav-drawer-brand{flex-shrink:0;justify-content:space-between;align-items:center;padding:2px 10px 0 20px;display:flex}.mnav-drawer-title{letter-spacing:-.4px;font-size:21px;font-weight:700}.mnav-divider{background:linear-gradient(90deg,#0000 0%,#ffffff26 20%,#ffffffbf 50%,#ffffff26 80%,#0000 100%);flex-shrink:0;height:1px;margin:10px 20px;box-shadow:0 0 8px .5px #ffffff59}.mnav-profile{cursor:pointer;text-align:left;background:0 0;border:none;flex-shrink:0;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 18px 0 17px;display:flex}.mnav-profile-avatar{width:44px;height:44px}.mnav-profile-details{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.mnav-profile-name{font-size:15px;font-weight:600}.mnav-profile-switch{color:#ffffffa6;align-items:center;gap:5px;font-size:12px;display:flex}.mnav-profile-chevron{color:#ffffffa6;flex-shrink:0}.mnav-search{color:#fff9;cursor:text;background:#ffffff14;border:1px solid #ffffff24;border-radius:22px;flex-shrink:0;align-items:center;gap:9px;height:44px;margin:4px 16px 6px;padding:0 14px;display:flex;box-shadow:inset 0 1px 3px #00000040}.mnav-search:focus-within{border-color:#fff6}.mnav-search input{color:#fff;appearance:none;background:0 0;border:none;outline:none;flex:1;min-width:0;height:100%;font-family:inherit;font-size:16px;font-weight:500}.mnav-search input::-webkit-search-cancel-button{appearance:none}.mnav-search input::placeholder{color:#ffffff73;letter-spacing:.8px;font-size:12px;font-weight:600}.mnav-section{flex-direction:column;flex-shrink:0;gap:2px;margin-top:8px;display:flex}.mnav-section-title{color:#ffffffa6;letter-spacing:1px;text-shadow:0 1px 2px #0006;padding:4px 20px;font-size:10px;font-weight:700}.mnav-item{cursor:pointer;color:#ffffffb8;text-align:left;background:0 0;border:none;align-items:center;width:100%;height:46px;padding:0 18px 0 17px;transition:background-color .15s,color .15s;display:flex}.mnav-item:active{background:#ffffff14}.mnav-item.active{color:#fff;background:#e50914}.mnav-item-icon{flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.mnav-item-label{color:#ffffffe6;white-space:nowrap;text-overflow:ellipsis;flex:1;margin-left:8px;font-size:15px;font-weight:500;overflow:hidden}.mnav-item.active .mnav-item-label{color:#fff;font-weight:600}.mnav-item-badge{width:20px;height:20px;font-size:11px}.mnav-item.active .mnav-item-badge{color:#e50914;box-shadow:none;background:#fff}}@media (width<=359px){.mnav-brand-title{display:none}}@media (width>=768px) and (width<=1023px){.mnav-shell{--mnav-gap:20px}.mnav-topbar{height:64px;padding:0 12px 0 14px}.mnav-main{padding:calc(64px + var(--mnav-gap) * 2 + 24px) 40px calc(76px + var(--mnav-gap) * 2)}.mnav-title{letter-spacing:-.8px;font-size:40px}.mnav-eyebrow{font-size:12px}.mnav-tabbar{border-radius:28px;width:560px;height:76px;left:50%;right:auto;transform:translate(-50%)}.mnav-tab-label{font-size:12px}.mnav-drawer{width:340px;max-height:calc(100% - 32px);top:16px;left:16px}}.app-container{box-sizing:border-box;justify-content:center;align-items:center;width:100%;min-height:100vh;padding:24px 0;display:flex}