/* Hallmark · component: floating navigation and appearance · modern-minimal · Texly reference
 * pre-emit critique: P4 H4 E4 S4 R5 V4 · existing page structure preserved */
:root{--color-shadow:oklch(18% .02 260 / .14);--radius-pill:999px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
html[data-theme=night]{color-scheme:dark;--color-paper:oklch(19% .02 260);--color-canvas:oklch(23% .025 260);--color-ink:oklch(96% .006 260);--color-muted:oklch(77% .015 260);--color-line:oklch(36% .025 260);--color-control:oklch(61% .015 260);--color-success:oklch(77% .13 155);--color-warning:oklch(80% .12 75);--color-error:oklch(77% .15 25);--color-focus:var(--color-accent)}
html[data-theme=day]{color-scheme:light}
html[data-theme=night] .hero h1 span{color:var(--color-accent)}
.nav-sentinel{position:absolute;top:48px;height:1px;width:1px;pointer-events:none}
.nav-space{height:88px}.floating-header{position:fixed;inset:0 0 auto;z-index:var(--z-sticky);pointer-events:none}
.floating-header .site-nav{position:relative;pointer-events:auto;max-width:none;width:100%;height:80px;padding:0 32px;background:color-mix(in oklch,var(--color-paper) 94%,transparent);color:var(--color-ink);backdrop-filter:blur(18px);border:1px solid var(--color-line);border-top:0;gap:16px}
.floating-header.is-floating .site-nav{width:min(calc(100% - 24px),1216px);height:64px;margin-top:12px;padding-inline:16px;border-radius:var(--radius-pill);border-top:1px solid var(--color-line);box-shadow:0 18px 52px var(--color-shadow)}
.floating-header .brand{font-size:1.3rem;flex-shrink:0}.floating-header .brand img{width:28px;height:28px}.floating-header .brand-dot{margin-left:-8px}
.nav-actions{display:flex;align-items:center;gap:8px}.nav-actions .nav-cta{border-radius:var(--radius-pill)}
.nav-disclosure{position:relative;padding:0;border:0}.nav-disclosure summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border-radius:var(--radius-pill);padding:8px 12px;font-size:var(--text-sm);font-weight:500;white-space:nowrap}.nav-disclosure summary::-webkit-details-marker{display:none}.nav-disclosure svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.appearance-panel,.mobile-links{position:absolute;right:0;top:calc(100% + 16px);width:240px;padding:16px;border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-paper);color:var(--color-ink);box-shadow:0 18px 52px var(--color-shadow)}
.appearance-panel p{margin:0 0 8px;font-weight:600;font-size:var(--text-sm)}.appearance-panel [role=group]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.appearance-panel button{border:1px solid transparent;border-radius:var(--radius-sm);background:var(--color-canvas);color:var(--color-ink);min-height:64px;padding:8px 4px;font-size:var(--text-sm);display:grid;justify-items:center;gap:4px}.appearance-panel button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-control)}.appearance-panel button[aria-pressed=true]::after{content:'✓';font-size:.75rem}.appearance-panel button::after{content:'';height:12px;line-height:12px}.appearance-panel small{display:block;margin-top:12px;color:var(--color-muted);font-size:.75rem}
.appearance-panel button:active,.nav-disclosure summary:active{transform:translateY(1px)}.appearance-panel button:disabled{opacity:.5;cursor:not-allowed}.appearance-panel [aria-busy=true]{cursor:progress;opacity:.6}.appearance-panel [aria-invalid=true]{border-color:var(--color-error)}
.floating-header .mobile-links{display:flex;flex-direction:column;gap:4px}.mobile-links a{padding:12px;min-height:44px;border-radius:var(--radius-sm)}.floating-header .site-nav>.brand+nav,.nav-actions>.sign-in,.nav-actions>.nav-cta{display:none}
.appearance-menu summary [data-theme-label]{display:none}.floating-header .site-nav{padding-inline:16px}.appearance-panel{right:-44px}
[id]{scroll-margin-top:104px}
@media(hover:hover){.nav-disclosure summary:hover,.mobile-links a:hover{background:var(--color-canvas);color:var(--color-ink);text-decoration:none}.appearance-panel button:hover{border-color:var(--color-control)}}
@media(min-width:40rem){.appearance-menu summary [data-theme-label]{display:inline}.nav-actions>.nav-cta{display:inline-flex}.appearance-panel{right:0}}
@media(min-width:64rem){.floating-header .site-nav>.brand+nav{display:flex;gap:24px}.nav-actions>.sign-in{display:inline;padding:12px}.mobile-menu{display:none}.floating-header .site-nav{padding-inline:32px}}