@import "/buttons.css?v=8c9fd9e99c04d35c";
@import "/close-control.css?v=8c9fd9e99c04d35c";
/* Shared navigation only: no page/body/editor resets. Brand tokens are supplied by themes.css. */
.nav, .foot { --content-max: 1180px; --content-pad: 24px; --ease: cubic-bezier(0.16, 1, 0.3, 1); font-family: var(--dw-body); line-height: 1.5; }
@media (min-width: 1280px) { .nav, .foot { --content-max: 1440px; } }
@media (min-width: 1280px) and (max-width: 1439.98px) { .nav, .foot { --content-pad: 16px; } }
.nav *, .foot * { box-sizing: border-box; }
.nav button, .foot button { min-height: 0; }
.nav img, .foot img { display: block; max-width: 100%; }
.nav :focus-visible, .foot :focus-visible { outline: 2px solid #8e80ff; outline-offset: 3px; }
/* Owned NBS nav geometry (site/public/css/nav.css): the same content stays put
   while its surface contracts over the first 20px of root scroll. DreamWild's
   dark glass uses the measured Blake surface, with our existing radius token. */
@property --dw-nav-progress { syntax: "<number>"; inherits: true; initial-value: 0; }
.nav {
  --dw-nav-progress: 0;
  --nav-float-inset: -14px;
  position: fixed; top: calc(16px * var(--dw-nav-progress)); left: 50%; z-index: 40;
  width: min(1280px, calc(100% - 40px)); height: 64px; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: env(safe-area-inset-top); background: transparent; isolation: isolate;
}
.nav::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 calc((50% - 50vw) * (1 - var(--dw-nav-progress)) + var(--nav-float-inset) * var(--dw-nav-progress));
  border: 1px solid rgb(255 255 255 / calc(.08 * var(--dw-nav-progress)));
  border-radius: calc(var(--dw-button-radius) * var(--dw-nav-progress));
  background: rgb(14 16 19 / calc(.72 * var(--dw-nav-progress)));
  -webkit-backdrop-filter: blur(calc(20px * var(--dw-nav-progress)));
  backdrop-filter: blur(calc(20px * var(--dw-nav-progress)));
  box-shadow: 0 calc(10px * var(--dw-nav-progress)) calc(40px * var(--dw-nav-progress)) calc(-10px * var(--dw-nav-progress)) rgb(0 0 0 / calc(.6 * var(--dw-nav-progress))),
    inset 0 1px 0 rgb(255 255 255 / calc(.06 * var(--dw-nav-progress)));
}
@supports (animation-timeline: scroll()) {
  .nav:not([data-nav-fallback]) {
    animation: dw-nav-float linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px 20px;
  }
  @keyframes dw-nav-float { from { --dw-nav-progress: 0; } to { --dw-nav-progress: 1; } }
}
@media (prefers-reduced-motion: reduce) { .nav { animation: none !important; } }
/* Above phone width the nav's floating frame (which overhangs the nav by --nav-float-inset) lines up with the content edges. */
@media (min-width: 761px) { .nav { width: calc(min(var(--content-max), 100%) - 2 * var(--content-pad) + 2 * var(--nav-float-inset)); } }
:is(.nav, .foot) .brand { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1 var(--dw-wordmark); letter-spacing: -0.02em; text-decoration: none; }
/* Menus: WAI-ARIA disclosure navigation (buttons with aria-expanded over their panels; nav-list.js, common.js).
   Measured from noboringsites.com's Products menu (founder's reference, 28 September): opaque panel, 8px padding,
   14px radius; 64px rows with 10px padding and a 12px gap; 44px icon tiles at 12px radius; title 14.4px/600,
   line 12.8px. In DreamWild's colours. Below 1100px the same list is a card under the bar, as on NBS. */
.nav-links { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; }
.nav-trigger, .nav-top { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border: 0; border-radius: 10px;
  background: none; color: rgb(236 238 243 / 80%); font: 600 14.4px/1 var(--dw-body); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .15s, background-color .15s; }
.nav-trigger:hover, .nav-top:hover, .nav-trigger[aria-expanded="true"] { color: var(--dw-fg); background: rgb(255 255 255 / 5%); }
.nav-top[aria-current="page"] { color: var(--dw-fg); }
.nav-chev { transition: transform .2s var(--ease); }
.nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); }
.nav-panel { display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: 340px; padding: 8px;
  border: 1px solid rgb(255 255 255 / 9%); border-radius: 14px; background: #111317;
  box-shadow: 0 28px 70px -18px rgb(0 0 0 / 80%), inset 0 1px 0 rgb(255 255 255 / 5%);
  opacity: 0; translate: 0 -6px; transition: opacity .12s ease, translate .12s ease, display .12s allow-discrete; }
/* The gap between trigger and panel still counts as the menu for the pointer. */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
/* A menu drops in on the expo ease and leaves in a quicker fade; display holds until the fade ends. */
.nav-item[data-open] .nav-panel { display: block; opacity: 1; translate: none; transition-duration: .18s; transition-timing-function: var(--ease); }
@starting-style { .nav-item[data-open] .nav-panel { opacity: 0; translate: 0 -6px; } }
.nav-item-wide { position: static; }
.nav-panel-products { left: -8px; transform: none; width: 400px; }
.nav-panel-products .nav-cols { grid-template-columns: 1fr; }
.nav-panel-resources { top: calc(100% - 2px); left: 50%; transform: translateX(-50%); width: min(1000px, calc(100vw - 48px)); }
.nav-panel-resources .nav-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nav-panel-uses { left: -8px; transform: none; width: 400px; }
.nav-panel ul { margin: 0; padding: 0; list-style: none; }
.nav-m-label { display: none; }
.nav-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.nav-label { margin: 8px 10px 4px; color: var(--dw-subtle); font: 700 10.5px/1.2 var(--dw-body); letter-spacing: .16em; text-transform: uppercase; }
.nav-group-tint { padding-bottom: 4px; border-radius: 10px; background: rgb(255 255 255 / 3%); }
.nav-rich { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px; border-radius: 10px; color: var(--dw-fg);
  text-decoration: none; transition: background-color .15s; }
/* Icon tiles: noboringsites' .dd-ico, measured 30 September (founder's reference): 2px accent outline, an accent drop
   shadow that grows on hover, and a lift-and-tilt on its overshooting spring. Its light tile sits a shade above its
   panel; ours does the same in DreamWild's dark, with the brand blue. */
.nav-tile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; color: var(--dw-fg);
  background: #1c1c1f; border: 2px solid #2b6afe; box-shadow: 0 5px 14px -8px rgb(43 106 254 / 85%);
  transition: box-shadow .3s var(--ease), transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.nav-text { display: grid; gap: 2px; min-width: 0; }
.nav-text b, .nav-plain b, .nav-platforms b { font: 600 14.4px/1.35 var(--dw-body); }
.nav-text b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nav-badge { padding: 2px 5px; border-radius: 4px; color: #cddcff; background: rgb(43 106 254 / 18%); font: 700 9px/1.2 var(--dw-body); letter-spacing: .025em; text-transform: uppercase; }
.nav-text span, .nav-plain span { color: var(--dw-muted); font-size: 12.8px; line-height: 1.35; }
.nav-plain a { display: grid; gap: 2px; padding: 10px; border-radius: 10px; color: var(--dw-fg); text-decoration: none; transition: background-color .15s; }
.nav-platforms a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--dw-fg); text-decoration: none;
  transition: background-color .15s; }
.nav-platforms .ph { color: #aab6ff; }
.nav-rich:hover, .nav-plain a:hover, .nav-platforms a:hover, .nav-more:hover { background: rgb(255 255 255 / 5%); }
.nav-rich:is(:hover, :focus-visible) .nav-tile { box-shadow: 0 9px 20px -8px rgb(43 106 254 / 85%); transform: translateY(-2px) rotate(-4deg); }
.nav-more { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 12px 10px; border-top: 1px solid rgb(255 255 255 / 8%);
  border-radius: 0 0 10px 10px; color: var(--dw-muted); font: 600 13px/1 var(--dw-body); text-decoration: none; }
.nav-group .nav-more { margin: 4px 0 0; border-top: 0; border-radius: 10px; color: #aab6ff; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-login { height: 44px; padding: 0 14px; border: 0; border-radius: var(--dw-button-radius); background: rgb(255 255 255 / 4%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%); color: var(--dw-fg); font: 600 14px/1 var(--dw-body); cursor: pointer; transition: background-color .15s; }
.nav-login:hover { background: rgb(255 255 255 / 9%); }
.nav-burger:not(.dw-auth-close) { display: none; place-content: center; gap: 5px; width: 38px; height: 38px; padding: 0; border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 10px; background: rgb(255 255 255 / 4%); cursor: pointer; }
.nav-burger span { display: block; width: 16px; height: 1.5px; border-radius: 1px; background: var(--dw-fg); transition: transform .25s var(--ease); }
.nav-burger { position: relative; }
.nav-burger .nav-close-icon { display: none; }
.nav-burger.dw-auth-close span { display: none; }
.nav-burger.dw-auth-close .nav-close-icon { display: block; }
.nav-burger::before { content: ""; position: absolute; inset: -5px; }
/* The signed-in header (web/marketing-login/account-header.ts, founder-approved 4 October): until the session check
   answers, Log In and Create Now hold their exact size as neutral placeholders, so neither version flashes and nothing
   moves. Only pages that load the account module (boot.js) wait; if the check never answers, the buttons show at 3s. */
@keyframes dw-account-wait { from, to { color: transparent; background: rgb(255 255 255 / 5%); box-shadow: none; pointer-events: none; } }
html:has(script[src*="/login-modal/boot.js"]) [data-dw-account-slot]:not([data-dw-account]) > :is([data-login-dialog], [data-waitlist]) { animation: dw-account-wait 3s linear; }
@media (max-width: 1100px) {
  .nav-burger:not(.dw-auth-close) { display: grid; }
  /* NBS's phone menu: one card under the floating bar, every section open, CTA row kept in the bar. */
  .nav-links { display: none; position: absolute; top: calc(100% + 8px); left: var(--nav-float-inset); right: var(--nav-float-inset);
    max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px; border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 20px; background: #111317; box-shadow: 0 28px 70px -18px rgb(0 0 0 / 85%);
    opacity: 0; translate: 0 -6px; transition: opacity .12s ease, translate .12s ease, display .12s allow-discrete; }
  .nav[data-menu] .nav-links { display: block; opacity: 1; translate: none; transition-duration: .2s; transition-timing-function: var(--ease); }
  @starting-style { .nav[data-menu] .nav-links { opacity: 0; translate: 0 -6px; } }
  /* Hidden at first paint, so the list skips the entrance rise; restarting it on close would blank the fading card. */
  .nav .nav-links .nav-list { animation: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-trigger { display: flex; justify-content: space-between; width: 100%; height: 48px; padding: 0 10px; font-size: 15px; }
  .nav-trigger::after { content: "+"; font-size: 22px; font-weight: 400; }
  .nav-trigger[aria-expanded="true"]::after { content: "−"; }
  .nav-top { width: 100%; height: 48px; padding: 0 10px; color: var(--dw-fg); font-size: 15px; }
  .nav-item + .nav-item { border-top: 1px solid rgb(255 255 255 / 7%); }
  .nav-panel, .nav-panel-products, .nav-panel-uses, .nav-panel-resources { display: none; position: static; width: auto; transform: none; padding: 0 0 6px; border: 0;
    background: none; box-shadow: none; opacity: 1; translate: none; transition: none; }
  .nav-panel::before { content: none; }
  .nav-m-label { display: none; margin: 14px 10px 4px; color: var(--dw-subtle); font: 700 10.5px/1.2 var(--dw-body); letter-spacing: .16em; text-transform: uppercase; }
  .nav-cols, .nav-panel-products .nav-cols, .nav-panel-resources .nav-cols { grid-template-columns: 1fr; gap: 0; }
  .nav-label { margin: 8px 10px 2px; color: var(--dw-subtle); font-size: 10px; }
  .nav-group-tint { background: none; }
  .nav-rich { min-height: 0; gap: 12px; padding: 8px 10px; }
  .nav-tile { width: 32px; height: 32px; border-radius: 9px; }
  .nav-tile svg { width: 18px; height: 18px; }
  .nav-text span { display: block; font-size: 12px; }
  .nav-plain span { display: none; }
  .nav-text b, .nav-plain b, .nav-platforms b { font-size: 15px; }
  .nav-more { margin: 0; border-top: 0; }
  html[data-nav-menu] { overflow: hidden; }
  html[data-nav-menu] :is(.sticky-cta, .consent) { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .nav-panel, .nav .nav-links { transition: none; } .nav-rich:is(:hover, :focus-visible) .nav-tile { transform: none; } }

/* The site footer, laid out like noboringsites.com's (measured 27 September at 1440: 84px above,
   brand and mission left, named link columns right, a separate copyright and contact bar). */
.foot { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad) 96px; font-size: 13px; color: var(--dw-subtle); }
.foot a { color: var(--dw-muted); text-decoration: none; transition: color .15s ease; }
.foot a:hover, .foot a[aria-current="page"] { color: var(--dw-fg); }
.foot-consent { padding: 0; border: 0; background: none; color: var(--dw-muted); font: inherit; cursor: pointer; transition: color .15s ease; }
.foot-consent:hover { color: var(--dw-fg); }
.foot-top { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.6fr); gap: 48px; padding: 84px 0 64px; border-top: 1px solid var(--dw-line); }
.foot-brand p { max-width: 26ch; margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--dw-muted); text-wrap: balance; }
.foot-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-h { margin-bottom: 18px; font: 700 11px/1.3 var(--dw-body); letter-spacing: .14em; text-transform: uppercase; color: var(--dw-subtle); }
.foot-col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.foot-col a { font-size: 14px; line-height: 1.45; }
.foot-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 28px; border-top: 1px solid var(--dw-line); }
.foot-mark { opacity: .7; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
.foot-mail { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1080px) { .foot-top { grid-template-columns: 1fr; gap: 40px; } }

@media (max-width: 760px) {
  .nav { --nav-float-inset: -8px; gap: 10px; }
  .nav .brand { gap: 6px; font-size: 15px; }
  .nav-actions { gap: 7px; }
  .nav-actions .btn { height: 44px; padding: 0 10px; font-size: 12px; }
  .foot { padding: 0 20px 150px; }
  .foot-top { grid-template-columns: 1fr; gap: 40px; padding: 64px 0 48px; }
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
  .foot-bar { grid-template-columns: 1fr; justify-items: start; }
  .foot-mark { display: none; }
  .foot-links { justify-content: flex-start; }
}
@media (max-width: 360px) {
  .nav { width: calc(100% - 24px); gap: 6px; }
  .nav .brand { font-size: 13px; gap: 4px; }
  .nav .brand img { width: 18px; height: auto; }
}

@media (max-width: 360px) {
  .nav .nav-actions { gap: 5px; }
  .nav .nav-login { padding-inline: 8px; font-size: 12px; }
  .nav .nav-actions .btn { padding-inline: 8px; font-size: 11px; }
}
/* Founder, 28 September: the same look and feel as the navbar. Its floating surface at full scroll (.nav::before
   with --dw-nav-progress 1: width, radius, glass, hairline, shadow) and its buttons (Log In's outline, Create Now). */
.consent { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  width: min(1308px, calc(100% - 12px)); min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 10px 14px 10px 22px; border: 1px solid rgb(255 255 255 / 8%); border-radius: var(--dw-button-radius); background: rgb(14 16 19 / 72%);
  box-shadow: 0 10px 40px -10px rgb(0 0 0 / 60%), inset 0 1px 0 rgb(255 255 255 / 6%); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.consent[hidden] { display: none; }
.consent p { color: var(--dw-muted); font-size: 14px; line-height: 1.5; }
.consent a { color: var(--dw-fg); }
.consent div { display: flex; flex: none; align-items: center; gap: 10px; }
@media (max-width: 760px) {
  .consent { width: calc(100% - 24px); }
}
@media (max-width: 600px) {
  .consent { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .consent div > * { flex: 1; }
}