@layer components{.home-nav{justify-content:space-between;align-items:center;gap:var(--space-inline-md);padding:0 var(--spacing-lg);background:var(--header-bg,color-mix(in oklch, var(--color-bg-primary) 85%, transparent));-webkit-backdrop-filter:blur(12px)saturate(180%);border-bottom:1px solid var(--color-border-light);z-index:100;height:var(--nav-height);transition:background-color var(--motion-duration-fast) var(--motion-easing-out), border-color var(--motion-duration-fast) var(--motion-easing-out);display:flex;position:sticky;top:0;overflow:hidden}.home-nav::-webkit-scrollbar{display:none}.nav-left{align-items:center;gap:var(--space-inline-sm);min-width:0;display:flex}.nav-right{align-items:center;gap:var(--space-inline-sm);flex-shrink:0;display:flex}.nav-logo{align-items:center;gap:var(--space-inline-sm);color:var(--color-text);font-family:var(--font-display);font-weight:var(--font-weight-bold,700);letter-spacing:.04em;border-radius:var(--fandex-radius-sm,2px);transition:color var(--motion-duration-fast) var(--motion-easing-out), background-color var(--motion-duration-fast) var(--motion-easing-out);padding:4px 8px;font-size:1.05rem;text-decoration:none;display:inline-flex}.logo-mark{border-radius:var(--fandex-radius-sm,2px);background-image:linear-gradient(135deg, var(--color-accent-base) 0%, var(--color-accent-hover) 100%);width:28px;height:28px;color:var(--color-accent-fg);font-weight:var(--font-weight-extrabold,800);font-size:.85rem;font-family:var(--font-display);letter-spacing:-.02em;box-shadow:0 0 0 1px color-mix(in srgb, var(--color-accent-base) 30%, transparent), 0 2px 8px color-mix(in srgb, var(--color-accent-base) 25%, transparent);transition:transform var(--motion-duration-normal) var(--motion-easing-spring);justify-content:center;align-items:center;display:inline-flex}.nav-logo:hover{color:var(--color-primary);background:var(--color-bg-hover)}.nav-logo:hover .logo-mark{transform:rotate(-8deg)}.logo-text{white-space:nowrap;color:inherit;height:auto;font-size:1.05rem;font-weight:var(--font-weight-bold,700);letter-spacing:.04em;background:0 0;border-radius:0;padding:0;display:inline-block}.nav-action-link{color:var(--color-text-secondary);font-family:var(--font-display);border:1px solid var(--color-border-light);border-radius:var(--fandex-radius-sm,2px);transition:color var(--motion-duration-fast) var(--motion-easing-out), border-color var(--motion-duration-fast) var(--motion-easing-out), background-color var(--motion-duration-fast) var(--motion-easing-out), transform var(--motion-duration-fast) var(--motion-easing-out);background:0 0;align-items:center;gap:6px;padding:5px 12px;font-size:.82rem;font-weight:500;text-decoration:none;display:inline-flex}.nav-action-link:hover{color:var(--color-text);border-color:var(--color-text-secondary);background:var(--color-bg-hover)}.nav-action-link:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.nav-github-link{border:1px solid var(--color-border-light);border-radius:var(--fandex-radius-sm,2px);color:var(--color-text-secondary);font-family:var(--font-display);letter-spacing:.02em;transition:color var(--motion-duration-fast) var(--motion-easing-out), border-color var(--motion-duration-fast) var(--motion-easing-out), background-color var(--motion-duration-fast) var(--motion-easing-out);background:0 0;align-items:center;gap:6px;padding:5px 12px;font-size:.78rem;font-weight:500;text-decoration:none;display:inline-flex}.nav-github-link:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-bg-hover)}.nav-github-link:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.nav-github-text{white-space:nowrap}.nav-fullscreen-btn{border:1px solid var(--color-border-light);border-radius:var(--fandex-radius-sm,2px);cursor:pointer;width:32px;height:32px;color:var(--color-text-secondary);transition:color var(--motion-duration-fast) var(--motion-easing-out), border-color var(--motion-duration-fast) var(--motion-easing-out), background-color var(--motion-duration-fast) var(--motion-easing-out);background:0 0;justify-content:center;align-items:center;padding:5px;display:none}.nav-fullscreen-btn:hover{color:var(--color-text);border-color:var(--color-text-secondary);background:var(--color-bg-hover)}.nav-fullscreen-btn:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.home-main{height:calc(100vh - var(--nav-height));height:calc(100dvh - var(--nav-height));overscroll-behavior-y:none;overflow-y:auto}@media (width<=768px){.home-nav{padding:0 var(--spacing-md)}.nav-action-text{display:none}.nav-fullscreen-btn{display:flex}.nav-github-text{display:none}.nav-logo{font-size:.95rem}.logo-mark{width:24px;height:24px;font-size:.75rem}}@media (width<=480px){.home-nav{padding:0 var(--spacing-sm);gap:var(--space-inline-xs)}.nav-right{gap:4px}.nav-action-link,.nav-github-link{padding:4px 8px}}}
