/* ==========================================================================
   CHROME: the site bar and the Dock footer for pages outside the two app
   designs (the homepage, OptiCord, legal and guide pages). Same parts as
   the app pages, drawn for their dark background.
   ========================================================================== */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --look-ease: cubic-bezier(.16, 1, .3, 1);
  --look-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------- site bar */
.gbar--site { position: absolute; top: 0; left: 0; right: 0; z-index: 100; height: 52px; font-family: var(--look-ui); color: #f1f4f7; transition: background-color .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; }
.gbar--fixed { position: fixed; }
.gbar--fixed.is-scrolled { background: rgba(5, 6, 11, .72); box-shadow: 0 1px 0 rgba(241, 244, 247, .08); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.gbar--site .gbar__in { height: 100%; width: min(100% - 2 * clamp(20px, 4.6vw, 72px), 1440px); margin-inline: auto; display: flex; align-items: center; gap: 24px; }
.gbar--site .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #f1f4f7; text-decoration: none; }
.gbar--site .brand__mark { width: 20px; height: 20px; flex: none; }
.gbar--site .gbar__links { display: flex; gap: clamp(14px, 2.2vw, 30px); margin-left: auto; }
.gbar--site .gbar__links a { font-size: 13px; color: #a6abb3; text-decoration: none; transition: color .2s ease; }
.gbar--site .gbar__links a:hover, .gbar--site .gbar__links a[aria-current="page"] { color: #f1f4f7; }
.gbar--site .look--gbar { margin-left: clamp(18px, 2.4vw, 32px); }
.gbar--site .nav__burger { width: 40px; height: 40px; border: 0; border-radius: 999px; }
@media (max-width: 900px) { .gbar--site .gbar__links { display: none; } .gbar--site .look--gbar { margin-left: auto; } }

/* ------------------------------------------------------------- the switch */
.look { position: relative; flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); isolation: isolate; }
.look::before { content: ""; position: absolute; z-index: -1; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .17); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .45); transition: transform .42s var(--look-ease); }
.look[data-on="eclipse"]::before { transform: translateX(28px); }
.look__opt { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(241, 244, 247, .5); cursor: pointer; transition: color .25s ease; }
.look__opt:hover, .look__opt[aria-pressed="true"], .look__opt[aria-current="page"] { color: #f1f4f7; }
a.look__opt { text-decoration: none; }
html.look-leaving body { opacity: 0; transition: opacity .32s ease; }
.look__opt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.look__tip {
  position: absolute; top: calc(100% + 10px); left: 50%; padding: 4px 9px; border-radius: 7px;
  font: 500 12px/1.3 var(--look-ui); letter-spacing: 0; text-transform: none; white-space: nowrap; color: #f1f4f7;
  background: rgba(36, 38, 44, .94); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 8px 20px -8px rgba(0, 0, 0, .7);
  transform: translate(-50%, -3px); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .22s var(--look-ease);
}
.look__opt:focus-visible .look__tip { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .look__opt:hover .look__tip { opacity: 1; transform: translate(-50%, 0); } }

.look-toast {
  position: fixed; top: 74px; right: max(16px, calc((100vw - 1380px) / 2)); z-index: 150; max-width: calc(100vw - 32px);
  padding: 10px 14px; border-radius: 12px; font: 500 13px/1.35 var(--look-ui); color: #f1f4f7;
  background: rgba(24, 26, 32, .94); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 16px 40px -16px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s ease, transform .3s var(--look-ease);
}
.look-toast.is-on { opacity: 1; transform: none; }

/* --------------------------------------------------------------- footer
   The homepage closes on the same Dock as the app pages. */
.foot--site { position: relative; z-index: 1; padding: clamp(110px, 12vw, 160px) 0 calc(40px + env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(180deg, transparent, rgba(4, 5, 9, .92) 36%); font-family: var(--look-ui); }
/* the Dock's name labels hang past the last icon on a narrow phone; they must not widen the page */
.foot--site { overflow-x: clip; }
.foot--site .foot__in { width: min(1380px, calc(100% - var(--gutter, 22px) * 2)); margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
/* zero specificity: a list reset must not outrank the Dock shelf's own padding */
:where(.foot--site) ul { margin: 0; padding: 0; list-style: none; }
.dock { --icon: clamp(36px, 9.2vw, 56px); --gap: clamp(5px, 1.1vw, 12px); }
.dock__shelf {
  display: flex; align-items: flex-end; gap: var(--gap); height: calc(var(--icon) + 20px); padding: 10px calc(var(--gap) + 5px);
  border-radius: calc(var(--icon) * .3 + 12px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .045));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .55), 0 34px 70px -28px rgba(0, 0, 0, .95);
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
}
.dock__shelf > li { --m: 1; position: relative; display: flex; align-items: flex-end; }
.dock__app { position: relative; display: block; width: calc(var(--icon) * var(--m)); height: calc(var(--icon) * var(--m)); transition: width .26s var(--look-ease), height .26s var(--look-ease); -webkit-tap-highlight-color: transparent; }
.dock__app img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.dock__home { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 23%; color: #fff; background: radial-gradient(120% 90% at 30% 8%, #30353f, #0b0c0f 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px rgba(0, 0, 0, .5); }
.dock__home svg { width: 54%; height: 54%; }
.dock__app[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(241, 244, 247, .7); }
.dock__sep { width: 1px; align-self: stretch; margin: 4px calc(var(--gap) * .35); background: rgba(255, 255, 255, .16); }
.dock__label {
  position: absolute; left: 50%; bottom: calc(100% + 14px); padding: 5px 11px; border-radius: 8px;
  font: 500 13px/1.3 var(--look-ui); white-space: nowrap; color: #f1f4f7;
  background: rgba(36, 38, 44, .94); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 10px 26px -10px rgba(0, 0, 0, .8);
  transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .24s var(--look-ease);
}
.dock__app:focus-visible { outline: none; }
.dock__app:focus-visible > img, .dock__app:focus-visible > .dock__home { outline: 2px solid #c4b5fd; outline-offset: 3px; border-radius: 23%; }
.dock__app:focus-visible .dock__label { opacity: 1; transform: translate(-50%, 0); }
.dock__shelf > li:has(> .dock__app:focus-visible) { --m: 1.3; }
/* magnification is driven by assets/stage/dock.js, frame by frame; without
   it, hovering still names the app */
.dock.is-live .dock__app { transition: none; }
.dock__shelf > li.is-near .dock__label { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) { .dock:not(.is-live) .dock__app:hover .dock__label { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .dock__app { transition: none; } }
.foot--site .foot__tag { margin: 34px 0 0; max-width: none; font-size: 15px; line-height: 1.5; color: #c1c8d9; }
.foot--site .foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 20px; max-width: 760px; }
.foot--site .foot__links a, .foot--site .foot__links button { padding: 0; border: 0; background: none; font: 500 13.5px/1.4 var(--look-ui); color: #8993a9; text-decoration: none; cursor: pointer; transition: color .2s ease; }
.foot--site .foot__links a:hover, .foot--site .foot__links button:hover { color: #f6f7fb; }
.foot--site .foot__base { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; margin: 36px 0 0; max-width: none; font-size: 12.5px; color: #8993a9; }
.foot--site .status { display: inline-flex; align-items: center; gap: 8px; }
.foot--site .status i { width: 7px; height: 7px; border-radius: 50%; background: #69e6bc; box-shadow: 0 0 10px rgba(105, 230, 188, .8); }

/* ------------------------------------------------- the floating header
   Same as the app pages: a glass bar that arrives once the opening has
   scrolled away, with the sections, the sun and moon, and the call to buy. */
.lnav-spacer { height: 64px; }
.lnav--site {
  position: fixed; top: 10px; left: 0; right: 0; z-index: 95; display: flex; justify-content: center; padding-inline: 12px;
  font-family: var(--look-ui); color: #f1f4f7;
  opacity: 0; transform: translateY(-14px); visibility: hidden;
  transition: opacity .45s ease, transform .55s var(--look-ease), visibility 0s .45s;
}
.lnav--site.is-shown { opacity: 1; transform: none; visibility: visible; transition: opacity .45s ease, transform .55s var(--look-ease); }
.lnav--site .lnav__bar {
  width: min(100%, 1060px); min-height: 54px; padding: 8px 8px 8px 18px; border-radius: 30px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  background: rgba(22, 24, 30, .64); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px -20px rgba(0, 0, 0, .7);
}
.lnav--site .lnav__name { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: #f1f4f7; text-decoration: none; white-space: nowrap; }
.lnav--site .lnav__name img { width: 26px; height: 26px; border-radius: 7px; }
.lnav--site .lnav__links { display: flex; justify-content: center; gap: clamp(12px, 1.8vw, 24px); }
.lnav--site .lnav__links a { padding: 6px 2px; font-size: 13.5px; color: #a6abb3; text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.lnav--site .lnav__links a:hover, .lnav--site .lnav__links a[aria-current] { color: #f1f4f7; }
.lnav--site .lnav__end { display: inline-flex; align-items: center; gap: 12px; }
.lnav--site .lnav__price { font-size: 13.5px; color: #a6abb3; white-space: nowrap; }
.lnav--site .lnav__cta { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 15px; border-radius: 999px; background: #f1f4f7; color: #05060a; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: box-shadow .25s ease; }
.lnav--site .lnav__cta:hover { box-shadow: 0 0 0 5px rgba(255, 255, 255, .1); }
.lnav--site .lnav__discord { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #f1f4f7; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lnav--site .lnav__discord svg { width: 16px; height: 16px; fill: currentColor; }
.lnav--site .lnav__toggle { display: none; width: 34px; height: 34px; border: 0; border-radius: 999px; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); color: #f1f4f7; cursor: pointer; }
.lnav--site .lnav__toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .3s ease; }
.lnav--site.is-open .lnav__toggle svg { transform: rotate(180deg); }
@media (max-width: 960px) {
  .lnav--site .lnav__bar { grid-template-columns: 1fr auto; row-gap: 0; }
  .lnav--site .lnav__price { display: none; }
  .lnav--site .lnav__toggle { display: inline-flex; }
  .lnav--site .lnav__links { grid-column: 1 / -1; grid-row: 2; flex-direction: column; align-items: flex-start; gap: 0; max-height: 0; overflow: hidden; transition: max-height .4s var(--look-ease); }
  .lnav--site .lnav__links a { width: 100%; padding: 12px 2px; font-size: 17px; border-top: 1px solid rgba(241, 244, 247, .08); }
  .lnav--site.is-open .lnav__links { max-height: 480px; padding-top: 8px; }
  .lnav--site.is-open .lnav__bar { border-radius: 24px; }
}
@media (max-width: 734px) {
  .lnav--site .look--lnav { display: none; }
  /* Discord stays on a phone, as the icon alone (its link carries the name) */
  .lnav--site .lnav__discord { width: 34px; min-height: 34px; padding: 0; justify-content: center; }
  .lnav--site .lnav__discord span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* the smallest phones: tighter spacing so name, Discord, Buy and the toggle stay on the bar */
@media (max-width: 380px) {
  .lnav--site .lnav__bar { gap: 10px; padding-left: 14px; }
  .lnav--site .lnav__end { gap: 8px; }
}

/* ------------------------------------------------- Horizon and Eclipse
   The two buttons at either end of the top bar, as small as the Discord
   pill: a glass pill with the design's glyph. The design you are in is
   filled (champagne daylight for Horizon, moonlit indigo for Eclipse);
   the other stays glass until it is pointed at, then shows its own fill
   over the page's preview of that design (lookbtn.js). */
.look-btn {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border: 0; border-radius: 999px;
  font: 600 13px/1 "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; letter-spacing: -.004em; text-decoration: none; white-space: nowrap; cursor: pointer;
  color: rgba(241, 244, 247, .88); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.look-btn__i { display: grid; place-items: center; width: 16px; height: 16px; }
.look-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.look-btn--horizon .look-btn__i { color: #f3c98b; }
.look-btn--eclipse .look-btn__i { color: #b8c6ff; }
.look-btn:active { transform: scale(.96); transition-duration: .1s; }
.look-btn:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 2px; }
.look-btn[aria-current="page"], .look-btn[aria-pressed="true"] { cursor: default; transform: none; }
.look-btn--horizon:hover, .look-btn--horizon[aria-current="page"], .look-btn--horizon[aria-pressed="true"] {
  color: #211a10; background: linear-gradient(180deg, #fffaf1 0%, #f7e7cf 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 205, .7), 0 6px 18px -8px rgba(246, 190, 112, .6);
}
.look-btn--horizon:hover .look-btn__i, .look-btn--horizon[aria-current="page"] .look-btn__i, .look-btn--horizon[aria-pressed="true"] .look-btn__i { color: #c0731a; }
.look-btn--eclipse:hover, .look-btn--eclipse[aria-current="page"], .look-btn--eclipse[aria-pressed="true"] {
  color: #f4f6ff; background: linear-gradient(180deg, #283052 0%, #12162a 100%);
  box-shadow: inset 0 0 0 1px rgba(184, 198, 255, .36), inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -8px rgba(110, 140, 255, .7);
}
.look-btn--eclipse:hover .look-btn__i, .look-btn--eclipse[aria-current="page"] .look-btn__i, .look-btn--eclipse[aria-pressed="true"] .look-btn__i { color: #d3dcff; }
.gbar__in > .look-btn--horizon + .brand { margin-left: 4px; }
.gbar__links + .look-btn--eclipse { margin-left: clamp(18px, 2.4vw, 32px); }
@media (max-width: 900px) { .gbar__in > .look-btn--eclipse { margin-left: auto; } }
@media (max-width: 600px) { .look-btn { padding: 0; width: 32px; height: 32px; justify-content: center; } .look-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .look-btn { transition: none; } .look-btn:active { transform: none; } }

/* pointing at the other design shows the page in its light or its dark */
.look-veil { position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
html.look-preview .look-veil { opacity: 1; }
.look-veil[data-tone="light"] { background: radial-gradient(140% 100% at var(--px, 50%) 0%, rgba(255, 255, 255, .92), rgba(245, 247, 249, .78) 55%, rgba(236, 240, 247, .7)); }
.look-veil[data-tone="dark"] { background: radial-gradient(140% 100% at var(--px, 50%) 0%, rgba(0, 0, 0, .55), rgba(2, 3, 6, .86) 60%); }
@media (prefers-reduced-motion: reduce) { .look-veil { transition: none; } }

/* arriving through the dissolve: the page starts under the new colour */
html.dissolve-in-light::after, html.dissolve-in-dark::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; }
html.dissolve-in-light::after { background: #f5f7f9; }
html.dissolve-in-dark::after { background: #030407; }