.skip-link{z-index:1000;background:var(--accent);color:var(--accent-contrast);border-radius:var(--radius-full);box-shadow:var(--shadow-hover);padding:.6rem 1.2rem;font-size:.875rem;font-weight:600;text-decoration:none;transition:top .2s;position:absolute;top:-100%;left:1rem}.skip-link:focus{outline:2px solid var(--accent-contrast);outline-offset:2px;box-shadow:var(--ring);top:1rem}.header-left{align-items:center;gap:1rem;display:flex}.avatar-btn-img{object-fit:cover;width:100%;height:100%}.site-header{z-index:50;background:color-mix(in srgb, var(--surface) 85%, transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid color-mix(in srgb, var(--surface-variant) 30%, transparent);padding-top:env(safe-area-inset-top);position:fixed;top:0;left:0;right:0;box-shadow:0 1px 8px #00000008}.header-inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1120px;height:3.75rem;margin:0 auto;padding-left:1rem;padding-right:1rem;display:flex}.brand{background:0 0;border:none;justify-content:center;align-items:center;padding:.25rem 0;line-height:1;text-decoration:none;transition:opacity .15s;display:inline-flex}.brand:hover{opacity:.85}.brand:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}.brand-sm{padding:.125rem 0}.header-actions{align-items:center;gap:.5rem;display:flex}.desktop-nav{align-items:center;gap:.25rem;display:none}.desktop-link{min-height:44px;color:var(--on-surface-variant);white-space:nowrap;border-radius:999px;align-items:center;padding:.375rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .15s,background-color .15s;display:inline-flex}.desktop-link:hover{color:var(--on-surface);background:var(--surface-container)}.desktop-link.is-active{background:var(--surface-container-high);color:var(--on-surface);font-weight:600}.icon-btn{min-width:44px;min-height:44px;color:var(--on-surface-variant);cursor:pointer;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;padding:.625rem;transition:color .15s,background-color .15s;display:inline-flex}.icon-btn:hover{color:var(--on-surface);background:var(--surface-container)}.avatar-btn{border:1px solid var(--surface-variant);background:var(--primary-container);width:2.25rem;min-width:40px;height:2.25rem;min-height:40px;color:var(--on-primary);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:0;font-size:.75rem;font-weight:700;transition:border-color .15s;display:inline-flex;overflow:hidden}.avatar-btn:hover{border-color:var(--outline)}.create-btn{background:var(--primary-container);min-height:44px;color:var(--on-primary);white-space:nowrap;border-radius:999px;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;text-decoration:none;transition:opacity .15s;display:none}.create-btn:hover{opacity:.95;color:var(--on-primary)}.signin-link{min-height:44px;color:var(--on-surface-variant);white-space:nowrap;align-items:center;padding:.5rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .15s;display:none}.signin-link:hover{color:var(--on-surface)}.signup-btn{background:var(--primary-container);min-height:44px;color:var(--on-primary);white-space:nowrap;border-radius:999px;align-items:center;padding:.5rem 1rem;font-size:.875rem;font-weight:600;text-decoration:none;transition:opacity .15s;display:inline-flex}.signup-btn:hover{opacity:.95;color:var(--on-primary)}.hamburger{min-width:44px;min-height:44px;color:var(--on-surface-variant);cursor:pointer;background:0 0;border:0;border-radius:.75rem;justify-content:center;align-items:center;margin-left:.25rem;padding:.5rem;transition:color .15s,background-color .15s;display:inline-flex}.hamburger:hover{color:var(--on-surface);background:var(--surface-container)}@media (width>=640px){.create-btn{display:inline-flex}.signin-link{display:inline}}@media (width>=840px){.header-inner{height:4rem;padding-left:1.5rem;padding-right:1.5rem}.desktop-nav{display:flex}.hamburger{display:none}}.offcanvas-backdrop{z-index:60;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;background:#0006;transition:opacity .25s;position:fixed;inset:0}.offcanvas-backdrop.open{opacity:1;pointer-events:auto}.offcanvas{z-index:70;background:var(--surface);border-left:1px solid var(--border);visibility:hidden;width:min(86vw,340px);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);flex-direction:column;transition:transform .28s cubic-bezier(.32,.72,0,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(102%);box-shadow:-16px 0 48px #0000002e}.offcanvas.open{visibility:visible;transform:translate(0)}.offcanvas-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.offcanvas-nav{flex-direction:column;gap:.25rem;padding:1rem;display:flex;overflow-y:auto}.offcanvas-link{min-height:44px;color:var(--on-surface-variant);border-radius:.75rem;align-items:center;gap:.75rem;padding:.625rem .75rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:color .15s,background-color .15s;display:flex}.offcanvas-link:hover{background:var(--surface-container);color:var(--on-surface)}.offcanvas-link.is-active{background:var(--surface-container-high);color:var(--on-surface);font-weight:600}.offcanvas-divider{background:var(--border);height:1px;margin:0 1rem}.offcanvas-cta{flex-direction:column;gap:.5rem;margin-top:auto;padding:1rem;display:flex}.offcanvas-primary{background:var(--primary-container);min-height:44px;color:var(--on-primary);border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:600;text-decoration:none;display:flex;box-shadow:0 1px 2px #0000000d}.offcanvas-primary:hover{color:var(--on-primary)}.offcanvas-outline{border:1px solid var(--outline-variant);min-height:44px;color:var(--on-surface);border-radius:.75rem;justify-content:center;align-items:center;padding:.625rem 1rem;font-size:.875rem;font-weight:600;text-decoration:none;display:flex}.offcanvas-outline:hover{background:var(--surface-container)}.offcanvas-grid{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.offcanvas-secondary{background:var(--surface-container);min-height:44px;color:var(--on-surface);border-radius:.75rem;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.75rem;font-weight:500;text-decoration:none;display:flex}.offcanvas-secondary:hover{background:var(--surface-container-high)}.offcanvas-user{border-radius:.75rem;align-items:center;gap:.625rem;min-height:44px;padding:.5rem .75rem;text-decoration:none;display:flex}.offcanvas-user:hover{background:var(--surface-container)}.offcanvas-avatar{background:var(--primary-container);width:2rem;height:2rem;color:var(--on-primary);border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;font-size:.75rem;font-weight:700;display:inline-flex}.offcanvas-user-text{flex-direction:column;min-width:0;line-height:1.3;display:flex}.offcanvas-user-name{color:var(--on-surface);text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:600;overflow:hidden}.offcanvas-user-handle{color:var(--on-surface-variant);text-overflow:ellipsis;white-space:nowrap;font-size:.75rem;overflow:hidden}.offcanvas-theme-row{background:var(--surface-container-low);border:1px solid var(--border);border-radius:.75rem;justify-content:space-between;align-items:center;margin-top:.25rem;padding:.5rem .75rem;display:flex}.offcanvas-theme-label{color:var(--on-surface-variant);font-size:.8125rem;font-weight:600}.offcanvas-theme-btn{border:1px solid var(--border);background:var(--surface);color:var(--on-surface);cursor:pointer;border-radius:999px;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;transition:background-color .15s,color .15s,border-color .15s;display:inline-flex}.offcanvas-theme-btn:hover{background:var(--surface-container);border-color:var(--border-strong)}@media (width>=840px){.offcanvas,.offcanvas-backdrop{display:none}}