@font-face {
  font-family: "Inter";
  src: url("/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fbfaf6;
}

* { box-sizing: border-box; }
html, body, #experience { width: 100%; min-width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { background: #fbfaf6; color: #050507; }
button, a { font: inherit; }
a { color: inherit; }
button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }

#experience { position: relative; isolation: isolate; background: #fbfaf6; }
.anchor { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#experience::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 56% at 13% 2%, rgba(255,255,255,.96), transparent 62%),
    radial-gradient(ellipse 58% 48% at 96% 100%, rgba(231,224,212,.48), transparent 62%),
    linear-gradient(135deg, #fffefa, #f4f0e8 100%);
}

#mirror-backdrop {
  position: absolute;
  z-index: 0;
  inset: -24px;
  background-image:
    linear-gradient(115deg, rgba(255,244,222,.26), rgba(7,9,13,.18) 46%, rgba(255,214,157,.30)),
    url('/DEMO-MIRROR.webp');
  background-size: cover;
  background-position: center 48%;
  filter: blur(14px) saturate(.88) brightness(1.01);
  opacity: .38;
  transform: scale(1.045);
  pointer-events: none;
}
#mirror-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.08), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.12), rgba(247,240,230,.26));
  mix-blend-mode: screen;
}
#webgl { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; }

#dom-projection {
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}
#dom-projection > * { position: absolute; inset: 0; }
.transparent-link, .selectable-copy {
  position: absolute;
  display: block;
  margin: 0;
  color: transparent;
  text-shadow: none;
  background: transparent;
  border: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.selectable-copy { user-select: text; cursor: text; }
.transparent-link { user-select: none; cursor: pointer; }
.transparent-link:focus-visible, .back-hit:focus-visible { outline: 1px solid #05c9ff; outline-offset: 4px; }
.selectable-copy::selection, .transparent-link::selection { color: transparent; background: rgba(5,201,255,.82); }

.brand-hit { left: 1.4%; top: 13%; width: 16%; height: 72%; }
.brand-hit img { position: relative; display: block; width: clamp(70px, 8vw, 112px); height: auto; max-height: none; object-fit: contain; object-position: left center; filter: drop-shadow(1px 0 0 rgba(5,5,7,.72)) drop-shadow(-1px 0 0 rgba(5,5,7,.72)) drop-shadow(0 1px 0 rgba(5,5,7,.72)) drop-shadow(0 -1px 0 rgba(5,5,7,.72)) drop-shadow(0 2px 2px rgba(5,5,7,.26)); }
.nav-hit { top: 13%; height: 72%; }
.nav-studio { left: 35%; width: 9%; }
.nav-materials { left: 43%; width: 12%; }
.nav-pricing { left: 54.5%; width: 11%; }
.sign-in-hit { right: 1.4%; top: 13%; width: 14%; height: 72%; }

/* The model is separated from the mirror UI: only the portrait, its outline, and the middle preview slider remain. */
.model-reflection { position: absolute; z-index: 0; left: 55%; top: 15%; width: 28%; height: 73%; overflow: visible; transform: translateX(-50%); pointer-events: none; background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.20) 72%, rgba(255,255,255,.94) 93%, rgba(255,255,255,1)), url('/SmartHome-AP.webp'); background-size: cover, auto 230%; background-position: center, 50% 57%; background-repeat: no-repeat; filter: saturate(.78) contrast(1.02) brightness(1.04); opacity: .84; -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 43%, rgba(0,0,0,.86) 56%, transparent 77%); mask-image: radial-gradient(ellipse at 50% 48%, #000 0 43%, rgba(0,0,0,.86) 56%, transparent 77%); }
.model-reflection::after { content: ""; position: absolute; inset: 8% 7% 9%; border-radius: 50%; background: radial-gradient(ellipse at center, transparent 49%, rgba(255,255,255,.68) 50%, rgba(255,255,255,.24) 51%, transparent 53%), radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 68%); box-shadow: 0 0 30px rgba(255,255,255,.3), inset 0 0 22px rgba(255,255,255,.12); }
.model-outline { position: absolute; inset: 8% 7% 9%; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 5px rgba(187,166,255,.72), 0 0 22px rgba(255,255,255,.42), inset 0 0 15px rgba(255,255,255,.16); }
.model-slider { position: absolute; z-index: 2; left: 50%; top: 8%; width: 1px; height: 84%; transform: translateX(-50%); background: linear-gradient(to bottom, transparent, rgba(255,255,255,.86) 14%, rgba(255,255,255,.86) 86%, transparent); box-shadow: 0 0 5px rgba(255,255,255,.7); }
.model-slider::before, .model-slider::after { content: ""; position: absolute; left: 50%; width: 1px; height: 15px; transform: translateX(-50%); background: rgba(255,255,255,.8); }
.model-slider::before { top: 0; }.model-slider::after { bottom: 0; }
.model-slider i { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.95); border-radius: 50%; background: radial-gradient(circle, rgba(184,160,255,.9) 0 20%, rgba(184,160,255,.24) 21% 58%, rgba(255,255,255,.15) 59%); box-shadow: 0 0 15px rgba(225,214,255,.95); }

.eyebrow-copy { left: 7.4%; top: 23%; width: 48%; height: 5%; }
.headline-copy { left: 7.4%; top: 33%; width: 58%; height: 35%; }
.sub-copy { left: 7.4%; top: 62%; width: 48%; height: 11%; }
.studio-hit { left: 7.4%; top: 74%; width: 16%; height: 7%; }
.paper-hit { left: 7.4%; top: 83%; width: 19%; height: 7%; text-align: left; }
.footer-left { left: 7.4%; bottom: 4%; width: 20%; height: 4%; }
.footer-right { right: 7.4%; bottom: 4%; width: 36%; height: 4%; text-align: right; }

#definitions { position: absolute; z-index: 4; inset: 0; opacity: 0; pointer-events: none; transition: opacity 240ms ease; background: rgba(251,250,246,.82); }
#definitions.visible { pointer-events: auto; }
.definition-column { position: absolute; left: 32.4vw; top: 32.8vh; width: 33.9vw; }
.definition-column h2 { margin: 0 0 2.25vw; color: #050507; font-size: 1.36vw; font-weight: 650; letter-spacing: -.022em; line-height: 1.08; }
.terms { display: grid; gap: 1.05vw; }
.terms p { margin: 0; color: rgba(5,5,7,.62); font-size: .73vw; font-weight: 450; line-height: 1.72; }
.terms strong { color: #050507; font-weight: 650; }.terms span { padding-left: .18em; }
.back-hit { position: absolute; left: 14.7vw; top: 16.9vh; width: 14vw; height: 11vh; color: transparent; pointer-events: auto; }

#static-fallback { display: none; }
html.static-mode #webgl, html.static-mode #dom-projection, html.static-mode #definitions { display: none; }
html.static-mode #static-fallback { display: block; position: absolute; inset: 0; padding: clamp(16px, 8.5vh, 82px) 5.5vw; }
.fallback-frame { height: 100%; display: grid; grid-template-rows: 10.8% 1fr; gap: 14px; }
.fallback-nav, .fallback-grid > * { border: 1px solid rgba(5,5,7,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 14px 40px rgba(93,82,66,.13); background: linear-gradient(128deg, rgba(255,255,255,.77), rgba(226,233,232,.53) 46%, rgba(255,255,255,.74)); backdrop-filter: blur(12px); }
.fallback-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px,2vw,36px); font-size: clamp(10px,.72vw,13px); color: rgba(5,5,7,.62); }
.fallback-nav a { text-decoration: none; color: #050507; }.fallback-brand { display:flex; align-items:center; }.fallback-brand img { width: clamp(68px, 7vw, 112px); height:auto; }
.fallback-grid { position: relative; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 37% 24% 39%; grid-template-rows: 42% 58%; gap: 10px; background: transparent; }
.fallback-hero { grid-row: 1 / span 2; position: relative; z-index: 3; padding: clamp(24px, 5vw, 88px); clip-path: polygon(0 0, 64% 0, 86% 68%, 59% 100%, 0 100%); }
.fallback-eyebrow { margin:0 0 13%; color: rgba(5,5,7,.48); font-size:clamp(9px,.65vw,11px); letter-spacing:.16em; }.fallback-hero h1 { margin:0; font-weight:520; font-size:clamp(44px,7.5vw,132px); letter-spacing:-.058em; line-height:.9; color:#050507; }.fallback-hero > p:not(.fallback-eyebrow) { max-width: 340px; margin: 8% 0; color:rgba(5,5,7,.62); font-size:clamp(12px,1vw,17px); line-height:1.5; }
.fallback-actions { display:flex; gap:18px; align-items:center; }.fallback-actions a { background:#05c9ff; padding:11px 16px; color:#050507; text-decoration:none; border-radius:6px; font-size:12px; font-weight:600; }.fallback-actions button { color:#050507; font-size:12px; }.fallback-hero footer { position:absolute; left:clamp(24px,5vw,88px); right:clamp(24px,5vw,88px); bottom:clamp(18px,3vw,44px); display:flex; justify-content:space-between; gap:12px; color:rgba(5,5,7,.46); font-size:clamp(9px,.62vw,11px); }
.fallback-shard { position:relative; display:block; min-height:0; background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(218,231,233,.5)); }.shard-b { clip-path: polygon(2% 0, 100% 0, 82% 100%, 25% 100%); }.shard-c { clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); }.shard-d { clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%, 8% 65%); }.shard-e { clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%, 0 28%); }
.fallback-definitions { display:none; position:absolute; inset:0; background:#fbfaf6; }.show-definitions .fallback-frame { opacity:0; pointer-events:none; transition:opacity .25s ease; }.show-definitions .fallback-definitions { display:block; }.fallback-definitions > div { position:absolute; left:32.4vw; top:32.8vh; width:33.9vw; }.fallback-definitions h2 { color:#050507; font-size:clamp(18px,1.36vw,28px); margin:0 0 32px; letter-spacing:-.022em; }.fallback-definitions p { color:rgba(5,5,7,.62); font-size:clamp(12px,.73vw,15px); line-height:1.7; margin:0 0 17px; }.fallback-definitions b { color:#050507; }.fallback-definitions button { position:absolute; left:14.7vw; top:16.9vh; color:#050507; font-size:clamp(12px,.7vw,15px); background:rgba(255,255,255,.7); border:1px solid rgba(5,5,7,.2); padding:15px 31px; transform:rotate(-7deg); box-shadow:0 10px 30px rgba(93,82,66,.16); }

@media (prefers-reduced-motion: reduce) { html:not(.force-webgl) #webgl, html:not(.force-webgl) #dom-projection, html:not(.force-webgl) #definitions { display:none; } html:not(.force-webgl) #static-fallback { display:block; position:absolute; inset:0; padding:clamp(16px,8.5vh,82px) 5.5vw; } }
@media (max-width: 700px) {
  .definition-column { left: 14vw; top: 31vh; width: 72vw; }.definition-column h2 { font-size: 4.6vw; margin-bottom: 7vw; }.terms { gap: 4.5vw; }.terms p { font-size: 3.1vw; }.back-hit { left: 10vw; top: 11vh; width: 30vw; height: 10vh; }
  #mirror-backdrop { background-image: radial-gradient(ellipse at 50% 42%, rgba(255,224,194,.44), transparent 38%), radial-gradient(ellipse at 12% 82%, rgba(255,184,117,.34), transparent 28%), linear-gradient(135deg, #ddd8d1, #f5eee4 58%, #c9c5c0); filter: blur(20px) saturate(.76) brightness(1.02); opacity: .42; }
  .model-reflection { left: 58%; width: 34%; height: 69%; top: 17%; background-size: cover, auto 250%; background-position: center, 50% 57%; }
  .fallback-nav span { display:none; }.fallback-grid { grid-template-columns:48% 52%; grid-template-rows:43% 57%; }.fallback-hero { padding:clamp(22px,7vw,44px); clip-path:polygon(0 0,82% 0,100% 64%,76% 100%,0 100%); }.fallback-hero footer { left:clamp(22px,7vw,44px); right:clamp(22px,7vw,44px); }.fallback-hero h1 { font-size:clamp(38px,11vw,72px); }.fallback-definitions > div { left:14vw; top:29vh; width:72vw; }.fallback-definitions button { left:10vw; top:11vh; }
}

/* Alternate dark presentation: light remains the default. */
html.dark-theme { color-scheme: dark; }
html.dark-theme body,
html.dark-theme #experience { background: #05070b; color: #edf2f6; }
html.dark-theme #experience::before {
  background:
    radial-gradient(ellipse 62% 56% at 12% 0%, rgba(24,89,126,.24), transparent 62%),
    radial-gradient(ellipse 58% 48% at 96% 100%, rgba(92,52,145,.22), transparent 62%),
    linear-gradient(135deg, #080b12, #111927 100%);
}
html.dark-theme #mirror-backdrop { filter: blur(3px) saturate(1.12) brightness(.42); opacity: .62; }
html.dark-theme #mirror-backdrop::after { background: radial-gradient(ellipse at 50% 38%, rgba(12,177,228,.12), transparent 52%), linear-gradient(180deg, rgba(5,9,18,.16), rgba(26,14,54,.24)); mix-blend-mode: normal; }
html.dark-theme .theme-toggle { color: rgba(238,245,255,.8); }
html.dark-theme .theme-sun { opacity: 0; transform: scale(.72) rotate(16deg); }
html.dark-theme .theme-moon { opacity: .8; transform: scale(1) rotate(0deg); }
html.dark-theme #definitions { background: rgba(5,7,11,.9); }
html.dark-theme .definition-column h2 { color: #eef4f8; }
html.dark-theme .terms p { color: rgba(233,241,246,.62); }
html.dark-theme .terms strong { color: #fff; }
html.dark-theme #static-fallback { background: #05070b; color: #edf2f6; }
html.dark-theme .fallback-nav,
html.dark-theme .fallback-grid > * { border-color: rgba(165,210,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.36); background: linear-gradient(128deg, rgba(32,51,65,.88), rgba(10,17,27,.92) 46%, rgba(32,24,53,.88)); }
html.dark-theme .fallback-nav { color: rgba(238,245,255,.68); }
html.dark-theme .fallback-nav a,
html.dark-theme .fallback-brand { color: #edf2f6; }
html.dark-theme .fallback-eyebrow { color: rgba(224,240,255,.52); }
html.dark-theme .fallback-hero h1 { background: linear-gradient(#f1f7fb, #a8c5d8); background-clip: text; -webkit-background-clip: text; }
html.dark-theme .fallback-hero > p:not(.fallback-eyebrow) { color: rgba(231,242,248,.64); }
html.dark-theme .fallback-actions a { background: #05c9ff; color: #050507; }
html.dark-theme .fallback-actions button { color: #dbe8ef; }
html.dark-theme .fallback-hero footer { color: rgba(223,238,247,.42); }
html.dark-theme .fallback-definitions { background: #05070b; }
html.dark-theme .fallback-definitions h2,
html.dark-theme .fallback-definitions b,
html.dark-theme .fallback-definitions button { color: #eef4f8; }
html.dark-theme .fallback-definitions p { color: rgba(233,241,246,.62); }
html.dark-theme .fallback-definitions button { background: linear-gradient(135deg,#203d50,#171528); border-color: rgba(165,210,255,.24); box-shadow: 0 10px 30px rgba(0,0,0,.42); }

.theme-toggle { right: 0%; top: 18%; width: 2.2%; height: 64%; display: grid; place-items: center; color: rgba(5,5,7,.8); }
.theme-icon { position: absolute; width: 16px; height: 16px; opacity: .8; filter: grayscale(1); transition: opacity .2s ease, transform .2s ease; }
.theme-moon { opacity: 0; transform: scale(.72) rotate(-16deg); }
.theme-sun { opacity: .8; transform: scale(1) rotate(0deg); }
.theme-toggle:hover .theme-icon { opacity: 1; }

/* Fixed navigation system: calm hierarchy above the experimental shard canvas. */
.site-nav { position: fixed; z-index: 20; top: clamp(14px, 3.2vh, 34px); left: clamp(16px, 5.5vw, 88px); right: clamp(16px, 5.5vw, 88px); min-height: 70px; display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(150px, 1fr); align-items: center; padding: 10px 18px 10px 22px; border: 1px solid rgba(5,5,7,.16); border-radius: 18px; background: linear-gradient(125deg, rgba(255,255,255,.78), rgba(224,233,232,.53) 52%, rgba(255,255,255,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 16px 44px rgba(82,73,62,.14); backdrop-filter: blur(16px) saturate(1.08); }
.site-brand { display: inline-flex; align-items: center; justify-self: start; width: fit-content; line-height: 0; }.site-brand img { display: block; width: clamp(82px, 8vw, 118px); height: auto; filter: drop-shadow(1px 0 0 rgba(5,5,7,.58)) drop-shadow(-1px 0 0 rgba(5,5,7,.58)) drop-shadow(0 2px 2px rgba(5,5,7,.22)); }
.site-links { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3.3vw, 56px); }.site-nav-link, .site-account { position: relative; color: rgba(5,5,7,.64); font-size: clamp(12px, .82vw, 15px); font-weight: 560; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: color .2s ease; }.site-nav-link::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 2px; transform: scaleX(0); transform-origin: center; border-radius: 99px; background: #05c9ff; transition: transform .2s ease; }.site-nav-link:hover, .site-nav-link:focus-visible, .site-account:hover, .site-account:focus-visible, .site-nav-link.is-active { color: #050507; }.site-nav-link:hover::after, .site-nav-link:focus-visible::after, .site-nav-link.is-active::after { transform: scaleX(1); }
.site-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }.site-account { font-size: clamp(11px, .76vw, 14px); }.site-theme-toggle { position: relative; display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 34px; color: rgba(5,5,7,.78); border: 1px solid rgba(5,5,7,.16); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(209,224,225,.48)); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -2px 0 rgba(5,5,7,.1), 0 4px 12px rgba(67,58,48,.14); }.site-theme-toggle:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(5,5,7,.12), 0 7px 16px rgba(5,201,255,.2); }.site-theme-toggle:focus-visible, .mobile-menu-toggle:focus-visible, .site-brand:focus-visible, .site-nav-link:focus-visible, .site-account:focus-visible { outline: 2px solid #05c9ff; outline-offset: 4px; }.site-theme-toggle .theme-icon { position: absolute; width: 16px; height: 16px; opacity: .8; filter: grayscale(1); transition: opacity .2s ease, transform .2s ease; }.site-theme-toggle .theme-moon { opacity: 0; transform: scale(.72) rotate(-16deg); }.site-theme-toggle .theme-sun { opacity: .8; transform: scale(1) rotate(0deg); }
.mobile-menu-toggle { display: none; width: 34px; height: 34px; place-items: center; gap: 5px; border: 1px solid rgba(5,5,7,.16); border-radius: 50%; background: rgba(255,255,255,.42); }.mobile-menu-toggle span { display: block; width: 13px; height: 1.5px; background: currentColor; transition: transform .2s ease; }.mobile-menu { display: none; }
html.dark-theme .site-nav { border-color: rgba(165,210,255,.24); background: linear-gradient(125deg, rgba(32,51,65,.9), rgba(10,17,27,.88) 52%, rgba(32,24,53,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 48px rgba(0,0,0,.34); }.dark-theme .site-nav-link, .dark-theme .site-account { color: rgba(238,245,255,.7); }.dark-theme .site-nav-link:hover, .dark-theme .site-nav-link:focus-visible, .dark-theme .site-account:hover, .dark-theme .site-account:focus-visible, .dark-theme .site-nav-link.is-active { color: #f1f7fb; }.dark-theme .site-theme-toggle { color: rgba(238,245,255,.82); border-color: rgba(156,220,255,.4); background: linear-gradient(145deg, rgba(39,70,88,.92), rgba(28,29,55,.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.38), 0 5px 16px rgba(0,0,0,.3); }.dark-theme .mobile-menu-toggle { color: #edf2f6; border-color: rgba(156,220,255,.4); background: rgba(31,53,69,.72); }.dark-theme .site-brand img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.76)); }
.projected-nav { display: none !important; }
@media (max-width: 760px) { .site-nav { grid-template-columns: 1fr auto; min-height: 60px; padding: 8px 12px 8px 16px; border-radius: 15px; }.site-brand img { width: 82px; }.site-links, .site-account { display: none; }.site-actions { gap: 8px; }.mobile-menu-toggle { display: grid; }.mobile-menu { position: absolute; top: calc(100% + 10px); right: 0; left: 0; display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(5,5,7,.14); border-radius: 15px; background: rgba(255,255,255,.82); box-shadow: 0 16px 36px rgba(82,73,62,.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }.mobile-menu a { padding: 13px 14px; border-radius: 10px; color: #050507; font-size: 14px; font-weight: 560; text-decoration: none; }.mobile-menu a:hover, .mobile-menu a:focus-visible { background: rgba(5,201,255,.12); }.dark-theme .mobile-menu { border-color: rgba(165,210,255,.24); background: rgba(18,30,43,.94); }.dark-theme .mobile-menu a { color: #edf2f6; } }

/* Fixed navigation system: calm hierarchy above the experimental shard canvas. */
.site-nav { position: fixed; z-index: 20; top: clamp(14px, 3.2vh, 34px); left: clamp(16px, 5.5vw, 88px); right: clamp(16px, 5.5vw, 88px); min-height: 70px; display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(150px, 1fr); align-items: center; padding: 10px 18px 10px 22px; border: 1px solid rgba(5,5,7,.16); border-radius: 18px; background: linear-gradient(125deg, rgba(255,255,255,.78), rgba(224,233,232,.53) 52%, rgba(255,255,255,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 16px 44px rgba(82,73,62,.14); backdrop-filter: blur(16px) saturate(1.08); }
.site-brand { display: inline-flex; align-items: center; justify-self: start; width: fit-content; line-height: 0; }.site-brand img { display: block; width: clamp(82px, 8vw, 118px); height: auto; filter: drop-shadow(1px 0 0 rgba(5,5,7,.58)) drop-shadow(-1px 0 0 rgba(5,5,7,.58)) drop-shadow(0 2px 2px rgba(5,5,7,.22)); }
.site-links { display: flex; align-items: center; justify-content: center; gap: clamp(22px, 3.3vw, 56px); }.site-nav-link, .site-account { position: relative; color: rgba(5,5,7,.64); font-size: clamp(12px, .82vw, 15px); font-weight: 560; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: color .2s ease; }.site-nav-link::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 2px; transform: scaleX(0); transform-origin: center; border-radius: 99px; background: #05c9ff; transition: transform .2s ease; }.site-nav-link:hover, .site-nav-link:focus-visible, .site-account:hover, .site-account:focus-visible, .site-nav-link.is-active { color: #050507; }.site-nav-link:hover::after, .site-nav-link:focus-visible::after, .site-nav-link.is-active::after { transform: scaleX(1); }
.site-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }.site-account { font-size: clamp(11px, .76vw, 14px); }.site-theme-toggle { position: relative; display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 34px; color: rgba(5,5,7,.78); border: 1px solid rgba(5,5,7,.16); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(209,224,225,.48)); box-shadow: inset 0 1px 0 rgba(255,255,255,.98), inset 0 -2px 0 rgba(5,5,7,.1), 0 4px 12px rgba(67,58,48,.14); }.site-theme-toggle:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(5,5,7,.12), 0 7px 16px rgba(5,201,255,.2); }.site-theme-toggle:focus-visible, .mobile-menu-toggle:focus-visible, .site-brand:focus-visible, .site-nav-link:focus-visible, .site-account:focus-visible { outline: 2px solid #05c9ff; outline-offset: 4px; }.site-theme-toggle .theme-icon { position: absolute; width: 16px; height: 16px; opacity: .8; filter: grayscale(1); transition: opacity .2s ease, transform .2s ease; }.site-theme-toggle .theme-moon { opacity: 0; transform: scale(.72) rotate(-16deg); }.site-theme-toggle .theme-sun { opacity: .8; transform: scale(1) rotate(0deg); }
.mobile-menu-toggle { display: none; width: 34px; height: 34px; place-items: center; gap: 5px; border: 1px solid rgba(5,5,7,.16); border-radius: 50%; background: rgba(255,255,255,.42); }.mobile-menu-toggle span { display: block; width: 13px; height: 1.5px; background: currentColor; transition: transform .2s ease; }.mobile-menu { display: none; }
html.dark-theme .site-nav { border-color: rgba(165,210,255,.24); background: linear-gradient(125deg, rgba(32,51,65,.9), rgba(10,17,27,.88) 52%, rgba(32,24,53,.88)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 48px rgba(0,0,0,.34); }.dark-theme .site-nav-link, .dark-theme .site-account { color: rgba(238,245,255,.7); }.dark-theme .site-nav-link:hover, .dark-theme .site-nav-link:focus-visible, .dark-theme .site-account:hover, .dark-theme .site-account:focus-visible, .dark-theme .site-nav-link.is-active { color: #f1f7fb; }.dark-theme .site-theme-toggle { color: rgba(238,245,255,.82); border-color: rgba(156,220,255,.4); background: linear-gradient(145deg, rgba(39,70,88,.92), rgba(28,29,55,.86)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.38), 0 5px 16px rgba(0,0,0,.3); }.dark-theme .mobile-menu-toggle { color: #edf2f6; border-color: rgba(156,220,255,.4); background: rgba(31,53,69,.72); }.dark-theme .site-brand img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.76)); }
.projected-nav { display: none !important; }
@media (max-width: 760px) { .site-nav { grid-template-columns: 1fr auto; min-height: 60px; padding: 8px 12px 8px 16px; border-radius: 15px; }.site-brand img { width: 82px; }.site-links, .site-account { display: none; }.site-actions { gap: 8px; }.mobile-menu-toggle { display: grid; }.mobile-menu { position: absolute; top: calc(100% + 10px); right: 0; left: 0; display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(5,5,7,.14); border-radius: 15px; background: rgba(255,255,255,.82); box-shadow: 0 16px 36px rgba(82,73,62,.16); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }.mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }.mobile-menu a { padding: 13px 14px; border-radius: 10px; color: #050507; font-size: 14px; font-weight: 560; text-decoration: none; }.mobile-menu a:hover, .mobile-menu a:focus-visible { background: rgba(5,201,255,.12); }.dark-theme .mobile-menu { border-color: rgba(165,210,255,.24); background: rgba(18,30,43,.94); }.dark-theme .mobile-menu a { color: #edf2f6; } }