.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 94%, #fff),color-mix(in oklab,var(--bg) 84%, transparent));backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in oklab,var(--line) 84%, var(--accent))}
.header-shell{display:flex;align-items:center;gap:14px;min-height:72px}
.brand{text-decoration:none;color:var(--fg);display:flex;align-items:flex-end;gap:10px;--brand-height:min(calc(42px * var(--logo-scale,1.05)),clamp(32px,8.5vw,56px))}
.brand-mark{height:var(--brand-height);width:auto;display:block;flex:0 0 auto}
.brand-name{height:var(--brand-height);display:inline-flex;align-items:flex-end;gap:2px;font-weight:700;letter-spacing:0;font-size:calc(var(--brand-height) * 0.7 * var(--name-scale,1.05));line-height:.94;white-space:nowrap;padding-bottom:0.02em}

.brand-name-core{font-family:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:.07em;text-transform:uppercase;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;background:linear-gradient(115deg,color-mix(in oklab,var(--accent) 74%, #fff),color-mix(in oklab,var(--accent2) 78%, #fff));-webkit-background-clip:text;background-clip:text;color:transparent;filter:contrast(1.02) saturate(1.03);text-shadow:none}
.themed-brand-mark{filter:drop-shadow(0 6px 14px color-mix(in oklab,var(--accent) 28%, transparent)) saturate(1.03) contrast(1.02);background:transparent}

.site-header .brand{position:relative}
.site-header .brand-name-core{background-image:linear-gradient(120deg,color-mix(in oklab,var(--accent) 82%, #fff),color-mix(in oklab,var(--accent2) 82%, #fff));background-size:100% 100%;background-repeat:no-repeat;animation:none;position:relative}
.site-header .themed-brand-mark{animation:none}

@keyframes header-text-beam{
  0%,58%,100%{text-shadow:0 1px 0 rgba(255,255,255,.32),0 0 10px color-mix(in oklab,var(--accent) 26%, transparent)}
  65%{text-shadow:0 1px 0 rgba(255,255,255,.62),0 0 4px rgba(255,255,255,.65),0 0 22px color-mix(in oklab,var(--accent2) 64%, transparent)}
}

@keyframes header-logo-beam{
  0%,58%,100%{filter:drop-shadow(0 4px 12px color-mix(in oklab,var(--accent) 28%, transparent)) brightness(1.01) saturate(1.03)}
  65%{filter:drop-shadow(0 7px 16px color-mix(in oklab,var(--accent2) 62%, transparent)) brightness(1.24) saturate(1.22)}
}

.site-header .brand::after{content:none}
@keyframes header-brand-beam{
  0%,56%,100%{background-position:-170% 0;opacity:0}
  62%{opacity:.95}
  72%{background-position:180% 0;opacity:.2}
}

@media (prefers-reduced-motion: reduce){
  .site-header .brand-name-core,.site-header .themed-brand-mark{animation:none}
}
.main-nav{display:flex;gap:6px;flex-wrap:nowrap;white-space:nowrap}

.mobile-quick-nav{display:none}
.breadcrumb{margin:8px 0 16px}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;color:var(--muted);font-size:.82rem;letter-spacing:.03em;text-transform:uppercase}
.breadcrumb li{display:inline-flex;align-items:center;gap:6px}
.breadcrumb li+li::before{content:'›';opacity:.6;margin-right:2px}
.breadcrumb a{text-decoration:none;color:var(--muted);border:none !important}
.breadcrumb a:hover{color:var(--fg)}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid transparent;font-weight:600;letter-spacing:.01em}
.nav-link:hover,.nav-link.is-active{background:color-mix(in oklab,var(--card) 96%, var(--accent) 4%);color:var(--fg);border:1px solid color-mix(in oklab,var(--line) 72%, var(--accent))}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{border:1px solid var(--line);background:color-mix(in oklab,var(--card) 97%, transparent);color:var(--fg);padding:8px 10px;border-radius:12px;cursor:pointer}
.profile-wrap{position:relative}
.profile-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:color-mix(in oklab,var(--card) 96%, transparent);color:var(--fg);padding:5px 8px;border-radius:999px;cursor:pointer}
.profile-name{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-wrap{position:relative;display:inline-flex;width:28px;height:28px;border-radius:50%;overflow:hidden;background:var(--accent);align-items:center;justify-content:center}
.avatar-img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{font-size:12px;font-weight:700;color:#111}
.status-dot{position:absolute;right:0;bottom:0;width:9px;height:9px;background:#34d399;border:2px solid var(--card);border-radius:50%}
.profile-menu{display:none;position:absolute;right:0;top:110%;min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 15px 30px rgba(0,0,0,.12)}
.profile-menu.open{display:block}
.profile-menu a{display:block;text-decoration:none;color:var(--fg);padding:6px 2px}
.menu-head,.menu-title{font-weight:700}
.menu-sub{color:var(--muted);font-size:.9rem}

.settings-backdrop{position:fixed;inset:0;background:rgba(5,10,18,.3);backdrop-filter:blur(2px);z-index:10000}
.settings-panel{position:fixed;right:18px;bottom:90px;left:auto;width:min(368px,calc(100vw - 28px));max-height:min(72vh,620px);overflow:auto;display:block;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(10px);z-index:10021;transition:opacity .18s ease, transform .18s ease, visibility .18s ease}
body.kl-dock-left .settings-panel{right:auto;left:18px}
.settings-panel.open,.settings-panel.is-open,#settings-panel.open,#settings-panel.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
.settings-card{background:rgba(15,19,28,.97);color:#eef4ff;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.settings-title{font-weight:700;margin:2px 2px 6px}
.settings-group{margin:10px 0}
.settings-group label{display:block;font-size:.85rem;color:#cdd7e8;margin:0 2px 6px;font-weight:600}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.02);color:#eef4ff;border-radius:999px;padding:6px 10px;cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip.active{outline:2px solid var(--accent);outline-offset:1px}
.icon-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.icon-chip{display:grid;place-items:center;padding:0;height:34px;min-width:34px;border-radius:10px;font-size:15px;line-height:1}
.icon-chip span{display:block;transform:translateY(-.2px)}
.settings-card{font-size:.92rem}
.settings-group{margin:8px 0}


.site-footer{margin-top:30px;border-top:1px solid color-mix(in oklab,var(--line) 75%, var(--accent));padding:20px 0 24px;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 60%, transparent),color-mix(in oklab,var(--panel) 62%, transparent))}
.footer-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.footer-brand,.footer-col{min-width:0}
.footer-brand-mini{margin-bottom:8px}
.site-footer .footer-brand img{width:28px;height:28px}
.site-footer .brand-name-core{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--fg);text-shadow:none;filter:none}
.site-footer .themed-brand-mark{filter:none}
.footer-brand p{margin:.35rem 0;color:var(--muted)}
.footer-note{max-width:54ch;line-height:1.5}
.footer-quick-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.footer-col h4{margin:.2rem 0 .5rem}
.footer-col h4 a{text-decoration:none;color:var(--fg)}
.footer-col h4 a:hover{color:var(--accent)}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.footer-col-wide{grid-column:auto}
.footer-pill-grid{display:flex;flex-wrap:wrap;gap:8px}
.footer-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in oklab,var(--line) 76%, var(--accent));background:color-mix(in oklab,var(--card) 95%, var(--accent) 5%);font-size:.82rem;color:var(--fg)}
.footer-pill:hover{background:color-mix(in oklab,var(--accent) 14%, var(--card))}
.footer-pill.footer-pill-muted{color:var(--muted)}
.footer-col a{text-decoration:none;color:var(--muted);overflow-wrap:anywhere}
.footer-col a:hover{color:var(--fg)}
.footer-col a[href*='linkedin.com'],.footer-col a[href*='x.com']{display:inline-flex;align-items:center;gap:6px}

.footer-mobile-essentials{display:none}

.footer-legal{margin-top:16px;padding-top:14px;border-top:1px solid color-mix(in oklab,var(--line) 82%, transparent);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;justify-content:center}
.footer-legal-top{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:center}
.footer-social{display:flex;flex-wrap:wrap;gap:8px}
.footer-social a{padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-size:.82rem}
.footer-social a:hover{color:var(--fg);border-color:color-mix(in oklab,var(--line) 56%, var(--accent))}
.legal-links{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:center}
.legal-links a{text-decoration:none;color:var(--muted);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
.copyright{color:var(--muted)}

@media (max-width:980px){.main-nav{display:none}.profile-name{display:none}.header-shell{min-height:64px}.mobile-quick-nav{display:flex;gap:8px;overflow:auto;padding:0 0 8px}.mobile-nav-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--muted);background:color-mix(in oklab,var(--card) 94%, transparent);white-space:nowrap}}
@media (min-width:700px){.footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.footer-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1.35fr) repeat(2,minmax(0,.9fr))}}
@media (max-width:700px){
  .header-shell{min-height:58px;gap:8px}
  .head-actions{gap:6px}
  .profile-wrap{display:none}
  #settings-toggle{bottom:max(84px,env(safe-area-inset-bottom) + 76px);right:12px;left:auto}
  body.kl-dock-left #settings-toggle{left:12px;right:auto}
  .settings-panel{bottom:max(152px,env(safe-area-inset-bottom) + 144px);right:12px;left:auto;width:min(94vw,360px)}
  .icon-row{grid-template-columns:repeat(6,minmax(0,1fr))}
  body.kl-dock-left .settings-panel{left:12px;right:auto}
  .site-header .brand{--brand-height:clamp(24px,7vw,30px);gap:6px;min-width:0}
  .site-header .brand-name{font-size:clamp(0.94rem,4.6vw,1.2rem);line-height:1;letter-spacing:.03em;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .mobile-quick-nav{padding-bottom:6px;scrollbar-width:none}
  .mobile-quick-nav::-webkit-scrollbar{display:none}
  .mobile-nav-link{font-size:.86rem;padding:7px 10px}
  .footer-col{display:none}
  .footer-mobile-essentials{display:block}
  .legal-links a:nth-child(n+4){display:none}
}


/* preference panel hardening */
#settings-toggle{position:fixed;right:18px;bottom:88px;display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--fg);box-shadow:0 14px 30px rgba(2,6,23,.24);z-index:10022}
body.kl-dock-left #settings-toggle{right:auto;left:18px}
#settings-toggle:hover{transform:translateY(-1px)}
#settings-toggle svg{display:block;width:22px;height:22px;stroke:currentColor;fill:none}
.settings-toggle-fallback{position:fixed;right:18px;top:76px;z-index:10023;border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:8px 12px;font-weight:700;box-shadow:0 10px 24px rgba(2,6,23,.18)}
body.kl-dock-left .settings-toggle-fallback{left:18px;right:auto}
.settings-toggle-fallback[hidden]{display:none !important}
.settings-card{background:color-mix(in oklab,var(--card) 92%, var(--bg));color:var(--fg);border:1px solid var(--line)}
.settings-group label{color:var(--muted)}
.chip{background:color-mix(in oklab,var(--card) 94%, transparent);color:var(--fg);border:1px solid var(--line);font-weight:600}
.chip:hover{background:color-mix(in oklab,var(--accent) 10%, var(--card));border-color:color-mix(in oklab,var(--accent) 60%, var(--line))}
.chip.active{background:color-mix(in oklab,var(--accent) 16%, var(--card));border-color:color-mix(in oklab,var(--accent) 65%, var(--line))}
#settings-panel[hidden]{display:none !important}
#settings-panel .settings-card, #settings-panel .chip-row, #settings-panel .chip{visibility:visible}

/* chart canvases on pages */
#perf-canvas,#perf-bytes-canvas,.perf-canvas,.game-canvas{border:1px solid var(--line);border-radius:12px;background:color-mix(in oklab,var(--card) 92%, transparent)}


.lb-row{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:color-mix(in oklab,var(--card) 94%, transparent)}
.lb-row span:first-child{color:var(--muted)}

@media print{
  .site-header{
    position:static;
    background:#fff !important;
    border-bottom:1px solid #d0d0d0;
    backdrop-filter:none;
    margin-bottom:14pt;
  }

  .header-shell{min-height:auto;padding:0}
  .main-nav,.head-actions,.settings-panel,.settings-backdrop,.legal-links{display:none !important}

  .brand{align-items:center;gap:8pt}
  .brand-mark{height:32pt}
  .brand-name,.brand-name-core{
    color:#111 !important;
    background:none !important;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    text-shadow:none !important;
    letter-spacing:.05em;
  }

  .site-footer{
    border-top:1px solid #d0d0d0;
    margin-top:18pt;
    padding-top:10pt;
    page-break-inside:avoid;
  }

  .footer-main{grid-template-columns:1fr;gap:8pt}
  .footer-col{display:none}
  .footer-brand p,.copyright{color:#333 !important}
}

.header-cta-btn{display:inline-flex;align-items:center;white-space:nowrap;padding:8px 12px;font-size:.86rem}
.sticky-cta{position:fixed;right:88px;bottom:20px;z-index:10015;display:grid;gap:1px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in oklab,var(--line) 55%, var(--accent));background:color-mix(in oklab,var(--accent) 20%, var(--card));box-shadow:0 14px 30px rgba(2,6,23,.24);text-decoration:none;color:var(--fg);min-width:220px;transition:transform .18s ease,opacity .18s ease}
.sticky-cta-title{font-weight:800;font-size:.92rem;line-height:1.1}
.sticky-cta-sub{font-size:.74rem;color:var(--muted);line-height:1.2}
.sticky-cta:hover{transform:translateY(-1px)}

@media (max-width:920px){
  .header-cta-btn{display:none}
  .sticky-cta{left:12px;right:12px;bottom:max(8px,env(safe-area-inset-bottom) + 4px);min-width:0}
}

body.ai-assistant-open .sticky-cta{opacity:.35;transform:translateY(-72px) scale(.96);pointer-events:none}

@media print{
  .sticky-cta,.header-cta-btn{display:none !important}
}