:root {
  --bg: #1b1b1b;
  --grid: #313131;
  --tab-bg: #272727cc;
  --q-bg: #373737;
  --swatch-bg: #252525f2;
  --glow-1: #595959;
  --glow-2: #3b3b3b;
  --panel: #252525;
  --panel-2: #313131;
  --line: #3d3d3d;
  --line-hi: #5a5a5a;
  --text: #f3f3f3;
  --soft: #c5c5c5;
  --dim: #959595;
  --lime: #e0e0e0;
  --lime-hover: #f4f4f4;
  --lime-ink: #252525;
  --accent-bg: #383838;
  --accent-line: #757575;
  --bar: #494949;
}

.screen, #trust, #law, .end {
  background:
    url('/media/gradient-dither.png') repeat,
    radial-gradient(90% 85% at 12% 0%, #9292924d 0%, transparent 70%),
    radial-gradient(70% 80% at 85% 100%, #0f0f0f55 0%, transparent 75%),
    linear-gradient(120deg, #2e2e2e 0%, #1b1b1b 62%, #252525 100%);
  background-blend-mode: soft-light, normal, normal, normal;
}

.pipe, #finds, #plans {
  --bg: #f8f8f8;
  --grid: #eaeaea;
  --glow-1: #e1e1e1;
  --glow-2: #f0f0f0;
  --panel: #fefefe;
  --panel-2: #f1f1f1;
  --line: #e1e1e1;
  --line-hi: #cecece;
  --text: #2b2b2b;
  --soft: #5c5c5c;
  --dim: #929292;
  --lime: #414141;
  --lime-hover: #2b2b2b;
  --lime-ink: #f9f9f9;
  --accent-bg: #e9e9e9;
  --accent-line: #c6c6c6;
  --bar: #d3d3d3;
  --tab-bg: #fefefecc;
  --q-bg: #e9e9e9;
  --swatch-bg: #fefefef2;
}

.btn-lime, .plan-pro .btn-lime {
  background: linear-gradient(150deg, #717171 0%, #515151 42%, #393939 100%);
  border-color: #868686;
  color: #fff;
}
.btn-lime:hover, .plan-pro .btn-lime:hover {
  background: linear-gradient(150deg, #747474 0%, #5e5e5e 42%, #414141 100%);
}

.mn-panel {
  background: #292929;
  box-shadow: 0 24px 48px -16px #101010cc;
}
.pl-per button small { background: #414141; color: #fff; box-shadow: 0 2px 6px -2px #2b2b2b4d; }
.pl-per button[aria-pressed="true"] { box-shadow: 0 1px 2px #2b2b2b14, 0 2px 8px #2b2b2b0f; }

.plan-pro {
  --panel: #272727;
  --line: #464646;
  --line-hi: #737373;
  --text: #f4f4f4;
  --soft: #c9c9c9;
  --dim: #a2a2a2;
  --lime: #e4e4e4;
  --lime-hover: #f6f6f6;
  --lime-ink: #272727;
  background: url('/media/gradient-dither.png') repeat, radial-gradient(120% 75% at 20% 0%, #72727299 0%, transparent 70%), var(--panel);
  background-blend-mode: soft-light, normal;
  box-shadow: 0 18px 40px -18px #18181859;
}

@media (max-width: 1000px) {
  .screen:has(.top[data-open]) { z-index: 1; }
  .mnav { background: #272727; box-shadow: 0 24px 48px -16px #111111cc; }
  .mn-panel, .mn-item:hover .mn-panel { background: none; box-shadow: none; }
}
body #cookies { background: #242424; border-color: #505050; box-shadow: 0 24px 48px -16px #111111cc; }
body #cookies p { color: #c6c6c6; }
body #cookies button { background: linear-gradient(150deg, #707070 0%, #525252 42%, #3a3a3a 100%); color: #fff; }
body #cookies button:hover { background: linear-gradient(150deg, #747474 0%, #5a5a5a 42%, #444444 100%); }
body #cookies button:focus-visible { outline-color: #dedede; }

.screen::before, .end::before { display: none; }

.pl-board, .pm { background-color: var(--panel); }

.pipe, #finds, #plans { position: relative; isolation: isolate; overflow-x: clip; }
.pipe::before, #finds::before, #plans::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, #707070 1.35px, transparent 1.6px);
  background-size: 18px 18px;
  background-attachment: fixed;
  opacity: .32;
}
body.graphite-dots-ready { background: #f8f8f8; isolation: isolate; }
body.graphite-dots-ready .pipe,
body.graphite-dots-ready #finds,
body.graphite-dots-ready #plans { background: transparent; }
body.graphite-dots-ready .pipe::before,
body.graphite-dots-ready #finds::before,
body.graphite-dots-ready #plans::before { display: none; }
.graphite-dot-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

:root { --dot-text-gap: 4px; --dot-text-feather: 32px; }
.pipe-head > h2, .pipe-head > p, [data-dot-text],
#plans .sec-head > h2, .pl-foot { position: relative; }
.dot-text-zone {
  --dot-text-ramp: transparent 0, #00000002 calc(var(--dot-text-feather) * 0.05), #00000008 calc(var(--dot-text-feather) * 0.1), #00000012 calc(var(--dot-text-feather) * 0.15), #00000020 calc(var(--dot-text-feather) * 0.2), #000000df calc(var(--dot-text-feather) * 0.8), #000000ed calc(var(--dot-text-feather) * 0.85), #000000f7 calc(var(--dot-text-feather) * 0.9), #000000fd calc(var(--dot-text-feather) * 0.95), #000 var(--dot-text-feather), #000 calc(100% - var(--dot-text-feather)), #000000fd calc(100% - var(--dot-text-feather) * 0.95), #000000f7 calc(100% - var(--dot-text-feather) * 0.9), #000000ed calc(100% - var(--dot-text-feather) * 0.85), #000000df calc(100% - var(--dot-text-feather) * 0.8), #00000020 calc(100% - var(--dot-text-feather) * 0.2), #00000012 calc(100% - var(--dot-text-feather) * 0.15), #00000008 calc(100% - var(--dot-text-feather) * 0.1), #00000002 calc(100% - var(--dot-text-feather) * 0.05), transparent 100%;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--bg);
  mask-image: linear-gradient(to right, var(--dot-text-ramp)), linear-gradient(to bottom, var(--dot-text-ramp));
  mask-composite: intersect;
}
.pipe-head > h2, .pl-foot { width: fit-content; max-width: 100%; }
.pipe-head > p { width: fit-content; }
.pl-foot { margin-inline: auto; }

.law, .plan-pro { border-color: var(--line); }

.law-text h2 em { color: var(--lime); font-style: normal; }

html[data-theme='glass'] {
  --palette-black: #0c0c0a;
  --palette-panel: #191a17;
  --palette-raised: #252723;
  --palette-line: #363a34;
  --palette-line-hi: #595f56;
  --palette-soft: #c7cdc7;
  --palette-dim: #a5afa5;
  --palette-primary: #77e7fe;
  --palette-primary-night: #f15419;
  --palette-primary-day: #08728a;
  --palette-primary-soft: #e8fafd;
  --palette-secondary: #f15419;
  --palette-secondary-day: #b1370b;
  --palette-action: #f15419;
  --palette-action-hover: #ff703b;
  --palette-action-ink: #0c0c0a;
  --palette-action-line: #f15419;
}

html[data-theme='glass'] {
  --bg: var(--palette-black);
  --panel: var(--palette-panel);
  --panel-2: var(--palette-raised);
  --line: var(--palette-line);
  --line-hi: var(--palette-line-hi);
  --text: #f3f3f3;
  --soft: var(--palette-soft);
  --dim: var(--palette-dim);
  --lime: var(--palette-primary-night, var(--palette-primary));
  --lime-hover: var(--palette-secondary);
  --lime-ink: var(--palette-black);
  --accent-bg: var(--palette-raised);
  --accent-line: var(--palette-primary-night, var(--palette-primary));
  --bar: var(--palette-line-hi);
  --tab-bg: var(--palette-panel);
  --q-bg: var(--palette-raised);
  --swatch-bg: var(--palette-panel);
}

html[data-theme='glass'] .screen,
html[data-theme='glass'] .glass-band,
html[data-theme='glass'] #trust,
html[data-theme='glass'] #law,
html[data-theme='glass'] .end {
  background:
    url('/media/gradient-dither.png') repeat,
    radial-gradient(90% 85% at 12% 0%, #9292924d 0%, transparent 70%),
    radial-gradient(70% 80% at 85% 100%, #0f0f0f55 0%, transparent 75%),
    linear-gradient(120deg,
      color-mix(in srgb, var(--palette-black) 90%, #999999) 0%,
      var(--palette-black) 62%,
      color-mix(in srgb, var(--palette-black) 95%, #999999) 100%);
  background-blend-mode: soft-light, normal, normal, normal;
  background-attachment: fixed;
}

html[data-theme='glass'] .pipe,
html[data-theme='glass'] #finds,
html[data-theme='glass'] #plans {
  --lime: var(--palette-primary-day);
  --lime-hover: var(--palette-secondary-day);
  --lime-ink: #ffffff;
  --accent-bg: var(--palette-primary-soft);
  --accent-line: var(--palette-primary-day);
  --dim: #686868;
}

html[data-theme='glass'] .plan-pro {
  --panel: var(--palette-panel);
  --panel-2: var(--palette-raised);
  --line: var(--palette-line);
  --line-hi: var(--palette-line-hi);
  --text: #f3f3f3;
  --soft: var(--palette-soft);
  --dim: var(--palette-dim);
  --lime: var(--palette-primary-night, var(--palette-primary));
  --lime-hover: var(--palette-secondary);
  --lime-ink: var(--palette-black);
  background:
    url('/media/gradient-dither.png') repeat,
    radial-gradient(120% 75% at 20% 0%, #72727299 0%, transparent 70%),
    var(--palette-panel);
  background-blend-mode: soft-light, normal;
}

html[data-theme='glass'] .btn-lime,
html[data-theme='glass'] .plan-pro .btn-lime,
html[data-theme='glass'] #cookies button {
  background: var(--palette-action);
  color: var(--palette-action-ink);
  border-color: var(--palette-action-line);
}
html[data-theme='glass'] .btn-lime:hover,
html[data-theme='glass'] .plan-pro .btn-lime:hover,
html[data-theme='glass'] #cookies button:hover { background: var(--palette-action-hover); }
html[data-theme='glass'] .btn-ghost { border-color: var(--lime); }

html[data-theme='glass'] .home .top .mn-push {
  border-color: transparent;
  background: transparent;
  color: var(--soft);
}
html[data-theme='glass'] .home .top .mn-push:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 5px;
}
html[data-theme='glass'] .home .act .btn-secondary {
  border-color: transparent;
  background: color-mix(in srgb, currentColor 12%, var(--bg));
  color: var(--text);
}
html[data-theme='glass'] .home .act .btn-secondary:hover {
  background: color-mix(in srgb, currentColor 18%, var(--bg));
}

html[data-theme='glass'] .tr-num,
html[data-theme='glass'] .law-ic,
html[data-theme='glass'] .law-text h2 em { color: var(--palette-secondary); }
html[data-theme='glass'] #trust .tr-icon { color: var(--palette-primary); }
html[data-theme='glass'] .plan-pro .pl-note b {
  color: color-mix(in srgb, var(--palette-primary-night) 65%, #ffffff);
}
html[data-theme='glass'] .pl-per button small {
  background: var(--palette-action);
  color: var(--palette-action-ink);
}
html[data-theme='glass'] .pl-per button[aria-pressed='true'] {
  background: var(--palette-primary-soft);
  color: var(--palette-primary-day);
}

html[data-theme='glass'] .mn-panel,
html[data-theme='glass'] #cookies { background: var(--palette-panel); border-color: var(--palette-line-hi); }
html[data-theme='glass'] #cookies p { color: var(--palette-soft); }
html[data-theme='glass'] #cookies button:focus-visible { outline-color: var(--palette-primary); }
html[data-theme='glass'] #cookies button:focus-visible { outline-color: var(--palette-primary-night); }

html[data-theme='glass'] .gchat {
  --gc-accent: #08728a;
  --gc-muted: #686868;
}
html[data-theme='glass'] .gc-chart [fill='#3A63A1'] { fill: var(--palette-primary-day); }
html[data-theme='glass'] .gc-chart [fill='#F2912E'] { fill: var(--palette-secondary-day); }

@media (max-width: 1000px) {
  html[data-theme='glass'] .mnav { background: var(--palette-panel); }
  html[data-theme='glass'] .mn-panel { background: none; }
}

html[data-theme='glass'] {
  --glass-radius: 36px;
}

html[data-theme='glass'] body {
  background: #f8f8f8;
}

html[data-theme='glass'] :where(.screen, .glass-band, #trust, #law, .end) {
  position: relative;
  isolation: isolate;
  border-radius: 0;
  box-shadow: inset 0 1px 1px #ffffff38, inset 0 -1px 1px #ffffff14;
}

html[data-theme='glass'] :where(.screen, .glass-band, #trust, #law, .end, .plan-pro, .law, .fapp .gc-bar)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(112deg, #ffffff03 0%, #ffffff14 20%, #ffffff05 34%, transparent 54%),
    linear-gradient(180deg, #ffffff05 0%, transparent 28%, transparent 72%, #00000012 100%);
  background-attachment: fixed;
  box-shadow: inset 1px 0 1px #ffffff14, inset -1px 0 1px #ffffff08;
}

html[data-theme='glass'] .screen {
  border-radius: 0 0 var(--glass-radius) var(--glass-radius);
  box-shadow: inset 0 -1px 1px #ffffff14;
}

html[data-theme='glass'] .end {
  border-radius: var(--glass-radius) var(--glass-radius) 0 0;
  box-shadow: inset 0 1px 1px #ffffff38;
}

html[data-theme='glass'] :where(.plan-pro, .law) {
  position: relative;
  isolation: isolate;
}

html[data-theme='glass'] :where(.plan-pro, .law, .fapp .gc-bar)::after {
  background-attachment: scroll;
}

html[data-theme='glass'] .fapp .gc-bar {
  position: relative;
  isolation: isolate;
  color: var(--palette-soft);
  border-bottom-color: var(--palette-line);
  background:
    url('/media/gradient-dither.png') repeat,
    radial-gradient(100% 180% at 18% -20%, #9292924d 0%, transparent 70%),
    var(--palette-black);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 1px 1px #ffffff38;
}

html[data-theme='glass'] .fapp .gc-url {
  background: #ffffff0a;
  color: var(--palette-soft);
}

html[data-theme='glass'] .plans {
  column-gap: 0;
}

html[data-theme='glass'] .plans > .plan {
  border-radius: 0;
  box-shadow: none;
}

html[data-theme='glass'] .plans > .plan + .plan {
  border-inline-start-width: 0;
}

html[data-theme='glass'] .plans > .plan:first-child {
  border-radius: 22px 0 0 22px;
}

html[data-theme='glass'] .plans > .plan:last-child {
  border-radius: 0 22px 22px 0;
}

@media (max-width: 960px) {
  html[data-theme='glass'] .plans {
    --plans-peek: clamp(16px, 5vw, 24px);
    position: relative;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    row-gap: 0;
    padding-inline: var(--plans-peek);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--plans-peek);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  html[data-theme='glass'] .plans::-webkit-scrollbar {
    display: none;
  }

  html[data-theme='glass'] .plans > .plan {
    min-width: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  html[data-theme='glass'] .plans .pl-note:empty {
    display: block;
  }

  html[data-theme='glass'] .plans:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 4px;
    border-radius: 22px;
  }

  html[data-theme='glass'] .plans-pager:not([hidden]) {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }

  html[data-theme='glass'] .plans-pager button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  html[data-theme='glass'] .plans-pager button::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-hi);
  }

  html[data-theme='glass'] .plans-pager button[aria-pressed='true']::before {
    background: var(--lime);
  }
}

@media (max-width: 760px) {
  html[data-theme='glass'] {
    --glass-radius: 24px;
  }
}