/* Site shell (Hugo 2026-10-17 「Footer 跟 Navigation 其實都是沿用的，中間才會換成不同的 Component」): every page on muninlabs.ai
   links this file for the brand colors, the grainy night to steel background, the nav and the footer. The nav and footer markup
   comes from website/components/shell.mjs (node web/tools/site_shell.mjs writes it into each page; test_site_shell.mjs checks it).
   Pages only add their own middle. Buttons are not styled here: they come from /components/button.css */
:root{
  /* one theme for light and dark schemes: the page is a night to steel gradient, type is white on glass (Hugo 10-16, Pond material reference) */
  --paper:#070A10; --card:rgba(255,255,255,.07); --wash:rgba(255,255,255,.06); --ink:#F2F5F8; --ink-2:rgba(226,233,240,.74); --ink-3:rgba(226,233,240,.5);
  --line:rgba(255,255,255,.16); --signal:#B3C4FF; --rec:#FF6B5E;
  --mn-glass:rgba(255,255,255,.08); --mn-blur:blur(16px) saturate(150%);
  --display:"Geist",system-ui,-apple-system,sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gutter:24px; --max:1200px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;position:relative;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;z-index:10;color:var(--ink);background:var(--paper)}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ink{fill:var(--ink)}

/* material: grainy night to steel gradient behind the whole page, liquid glass panels on top */
body{background:
  radial-gradient(60% 20% at 50% 8%,rgba(120,150,200,.10),transparent 70%),
  radial-gradient(50% 16% at 80% 50%,rgba(140,165,215,.07),transparent 70%),
  linear-gradient(180deg,#06080C 0%,#0A101B 22%,#0F1828 50%,#152238 78%,#1A2A44 100%)}
body::after{content:"";position:absolute;inset:0;z-index:50;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 45%,rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 24px rgba(255,255,255,.05)}
.flat{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(30,42,62,.94)}}

/* nav: brand left, Sign in then Waitlist right */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:20px;letter-spacing:-0.03em;text-decoration:none}
.brand svg{width:24px;height:24px}
.nav-r{display:flex;align-items:center;gap:8px}

/* footer */
/* the top rule lines up with the content edge, not the gutter */
.site-footer{background:linear-gradient(var(--line),var(--line)) var(--gutter) 0/calc(100% - 2 * var(--gutter)) 1px no-repeat;padding-block:72px 128px;display:flex;flex-direction:column;gap:56px}
.f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.f-brand{display:flex;flex-direction:column;gap:8px}
.f-cta{margin-top:16px}
.f-brand p{color:var(--ink-2)}
.f-menu{display:flex;gap:clamp(48px,8vw,120px)}
.f-col{display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--ink-2);min-width:150px}
.f-col h3{margin:0 0 4px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.f-col a{text-decoration:none}
.f-col a:hover{color:var(--ink)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:28px;font:13px var(--mono);color:var(--ink-3)}
.f-social{display:flex;gap:16px}
.f-social svg{width:18px;height:18px;color:var(--ink-2)}
@media (max-width:760px){
  .f-top{flex-direction:column}
  .f-menu{width:100%;justify-content:space-between;gap:24px}
  .f-col{min-width:0}
  .site-footer{padding-block:56px 96px}
}
@media (max-height:760px) and (min-width:761px){.nav{padding-block:12px}}