/* Sproutlink's look (13 Nov 2026, the user picked "C · Editorial" from kies.html, in his palette: navy 60%, cream 30%,
   coral 10%). Navy is the ground, cream the panels, coral only for what you should press or notice. Everything Inter,
   big titles thin (300) like his "Tidewell" reference. The old class names (.glass, .btn.soft, ...)
   keep working, so every page links this file and only adds its own layout. */
@font-face { font-family: Inter; src: url(/static/fonts/inter-latin-opsz-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
:root {
  --navy: #0e1a38; --navy-2: #15244a; --navy-3: #1e3160; --navy-line: rgba(244,236,221,.12);
  --cream: #f4ecdd; --cream-2: #fbf6ec; --cream-3: #efe4d0; --cream-line: #e2d5bf;
  --coral: #ff6f5e; --coral-2: #ef5546; --coral-rgb: 255,111,94;
  /* the names the pages already use */
  --ink: #0e1a38; --text: rgba(14,26,56,.7); --dim: rgba(14,26,56,.5); --line: rgba(14,26,56,.1);
  --on-navy: #f4ecdd; --on-navy-2: rgba(244,236,221,.7); --on-navy-3: rgba(244,236,221,.5);
  --accent: var(--coral); --accent-2: var(--coral-2); --accent-rgb: var(--coral-rgb);
  --hero-1: #1e3160; --hero-2: #0e1a38; --glow: rgba(14,26,56,.55);
  --green: #2fb36b; --green-ink: #1d7a49; --bad-ink: #c73a2e; --amber: #b25f00;
  --ui: Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, monospace;
  --serif: var(--ui); /* (13 Nov) no serif any more: old --serif users get Inter */
  --spring: cubic-bezier(.2,.8,.2,1); --r: 22px; --gap: 16px; color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--navy); -webkit-text-size-adjust: 100%; }
body { color: var(--on-navy); background: var(--navy); font: 400 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; min-height: 100vh; font-variant-numeric: tabular-nums; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
[hidden], .hide { display: none !important; }
::selection { background: rgba(var(--coral-rgb),.35); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 10px; }

/* the ground: deep navy with a very faint grain of light at the top */
.back { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 45% at 50% -8%, rgba(30,49,96,.9), transparent 70%), var(--navy); }
.shade { display: none; }
.wrap { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px 56px; }

/* a panel = cream paper */
.glass { position: relative; background: var(--cream); color: var(--ink); border-radius: var(--r); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 50px -28px rgba(3,8,24,.7); }
.glass.red { background: var(--navy-2); color: var(--on-navy); box-shadow: 0 0 0 1px var(--navy-line), 0 30px 60px -30px rgba(0,0,0,.6); }

/* the bar on top: Robo's eyes, the name, the pages */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; margin: 0 0 8px; padding: 16px 0; background: transparent; box-shadow: none; border-radius: 0; color: var(--on-navy); }
.nav.glass { background: rgba(14,26,56,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--navy-line); border-radius: 0; color: var(--on-navy); }
.logo { display: flex; align-items: center; gap: 11px; font: 650 18px/1 var(--ui); letter-spacing: -.015em; }
.eyes { display: flex; gap: 6px; padding: 8px 10px; border-radius: 999px; background: var(--cream); }
.eyes i { width: 8px; height: 9px; border-radius: 50%; background: var(--navy); }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a, .links button { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; font: 500 14px/1 var(--ui); color: var(--on-navy-2); transition: color .2s, background .2s; }
.links a:hover, .links button:hover { color: var(--on-navy); background: rgba(244,236,221,.08); }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(244,236,221,.08); box-shadow: inset 0 0 0 1px var(--navy-line); font: 600 12px/1 var(--ui); }
.lang button { height: 30px; padding: 0 10px; border-radius: 999px; color: var(--on-navy-3); }
.lang button[aria-pressed="true"] { color: var(--navy); background: var(--cream); }

/* type */
h1, h2, h3 { font-weight: 650; letter-spacing: -.02em; }
.serif, h1.serif, h2.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.005em; color: var(--coral); }
.caps { font: 600 11px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.muted { color: var(--text); }
.eyebrow { font: 600 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--coral); }

/* buttons: coral = do it, navy = second, cream = quiet */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--coral); color: #fff; font: 600 14.5px/1 var(--ui); box-shadow: 0 10px 22px -12px rgba(var(--coral-rgb),.8); transition: transform .25s var(--spring), background .2s, box-shadow .25s; white-space: nowrap; }
.btn:hover { background: var(--coral-2); }
.btn.soft { height: 40px; padding: 0 16px; background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; font-size: 14px; opacity: .92; }
.btn.soft:hover { background: rgba(127,127,127,.1); opacity: 1; }
.btn.white { background: var(--cream); color: var(--navy); box-shadow: none; }
.btn.white:hover { background: #fff; }
.btn.navy { background: var(--navy); color: var(--cream); box-shadow: none; }
.btn.line { background: transparent; color: var(--on-navy); box-shadow: inset 0 0 0 1.5px var(--navy-line); }
.btn.sm { height: 34px; padding: 0 13px; font-size: 13px; }
.btn.big { height: 52px; padding: 0 26px; font-size: 16px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn:active, .press:active { transform: scale(.97); transition-duration: .08s; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font: 600 12px/1.1 var(--ui); white-space: nowrap; background: var(--cream-3); color: var(--text); }
.chip.dark { background: var(--navy); color: var(--cream); }
.chip.red { background: var(--coral); color: #fff; }
.chip.win { background: rgba(47,179,107,.16); color: var(--green-ink); }
.switch { position: relative; width: 48px; height: 29px; flex: none; border-radius: 999px; background: rgba(14,26,56,.18); transition: background .25s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(14,26,56,.3); transition: transform .35s var(--spring); }
.switch.on, .switch[aria-checked="true"] { background: var(--navy); }
.switch.on::after, .switch[aria-checked="true"]::after { transform: translateX(19px); background: var(--coral); }
.msg { font-size: 13px; color: var(--text); min-height: 18px; }
.msg.bad, .msg.err { color: var(--bad-ink); }
.msg.good { color: var(--green-ink); }
.footline { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 26px 20px 40px; font-size: 13px; color: var(--on-navy-3); border-top: 1px solid var(--navy-line); max-width: 1200px; margin: 0 auto; }
.footline a:hover { color: var(--on-navy); }

/* coming in */
.rise { animation: rise .7s var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 640px) { .wrap { padding: 0 16px 44px; } .links a, .links button { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } * { transition: none !important; } }

/* ===== the hero (13 Nov, the user's reference "Tidewell"): one big rounded field of navy with a coral glow, seen through
   reeded glass, a light thin headline, a glass pill menu in the middle, a glass card top right, five points at the bottom.
   .hx-bg + .hx-flute are also the ground of the sign-in screen. ===== */
.hx { position: relative; margin: 16px 0 0; height: min(840px, calc(100vh - 32px)); min-height: 700px; border-radius: 30px; overflow: hidden; color: var(--cream); padding: 20px 30px 0; display: flex; flex-direction: column; isolation: isolate; box-shadow: 0 60px 120px -60px rgba(0,0,0,.9); }
.hx-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: linear-gradient(180deg, #3b4b74 0%, #1f2e57 46%, #111f44 100%); }
.hx-bg i { position: absolute; border-radius: 50%; filter: blur(70px); }
.hx-bg .b1 { left: 40%; top: 18%; width: 52%; height: 78%; background: radial-gradient(closest-side, rgba(255,111,94,.95), rgba(255,111,94,0)); animation: hxd 18s ease-in-out infinite alternate; }
.hx-bg .b2 { left: -12%; top: -24%; width: 62%; height: 74%; background: radial-gradient(closest-side, rgba(176,186,220,.6), transparent); }
.hx-bg .b3 { left: -14%; bottom: -36%; width: 64%; height: 76%; background: radial-gradient(closest-side, rgba(9,16,40,.95), transparent); }
.hx-bg .b4 { left: 62%; top: -6%; width: 34%; height: 46%; background: radial-gradient(closest-side, rgba(255,176,146,.5), transparent); animation: hxd 22s ease-in-out -6s infinite alternate-reverse; }
@keyframes hxd { to { transform: translate(-6%, 5%) scale(1.08); } }
.hx-flute { position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.02) 3px, rgba(0,0,0,0) 9px, rgba(0,0,0,.17) 15px, rgba(255,255,255,.07) 16px); mix-blend-mode: soft-light; }
.hx-nav { display: flex; align-items: center; gap: 16px; height: 52px; position: relative; z-index: 2; }
.hx-logo { display: flex; gap: 9px; align-items: center; font: 650 17px/1 var(--ui); letter-spacing: -.01em; color: var(--cream); }
.hx-menu { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(14,26,56,.32); box-shadow: inset 0 0 0 1px rgba(244,236,221,.16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hx-menu a { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; font: 500 13px/1 var(--ui); color: rgba(244,236,221,.82); transition: background .2s, color .2s; }
.hx-menu a:hover { color: #fff; }
.hx-menu a.on { background: rgba(244,236,221,.15); color: #fff; }
.hx-menu a.on i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.hx-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hx-round { width: 38px; height: 38px; border-radius: 50%; background: rgba(244,236,221,.92); color: var(--navy); font: 700 12px/1 var(--ui); }
.hx-login { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(14,26,56,.32); box-shadow: inset 0 0 0 1px rgba(244,236,221,.18); font: 600 13px/1 var(--ui); color: var(--cream); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hx-card { position: absolute; right: 30px; top: 86px; width: 340px; padding: 14px 12px 12px; border-radius: 20px; background: rgba(30,44,84,.42); box-shadow: inset 0 0 0 1px rgba(244,236,221,.16), 0 30px 60px -30px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); color: var(--cream); z-index: 2; }
.hx-card-h { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--ui); color: rgba(244,236,221,.8); padding: 6px 4px 12px; }
.hx-grab { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 34px; height: 3px; border-radius: 3px; background: rgba(244,236,221,.4); }
.hx-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 13px; border-radius: 14px; background: rgba(244,236,221,.1); box-shadow: inset 0 0 0 1px rgba(244,236,221,.12); margin-bottom: 8px; }
.hx-row .t b { display: block; font: 650 14px/1.25 var(--ui); }
.hx-row .t span { font: 500 11px/1 var(--ui); color: rgba(244,236,221,.65); }
.hx-row .mid em { font: 600 10.5px/1 var(--ui); font-style: normal; padding: 5px 8px; border-radius: 999px; background: rgba(244,236,221,.14); }
.hx-row .r { text-align: right; }
.hx-row .r b { display: block; font: 300 28px/1 var(--ui); letter-spacing: -.03em; }
.hx-row .r span { font: 500 10.5px/1 var(--ui); color: rgba(244,236,221,.65); }
.hx-tag { display: inline-flex; margin: 2px; padding: 6px 11px; border-radius: 999px; background: var(--coral); color: #fff; font: 650 11.5px/1 var(--ui); }
.hx-main { margin-top: auto; display: flex; flex-direction: column; gap: 24px; padding-bottom: 30px; position: relative; z-index: 1; }
.hx-main h1 { font: 300 92px/.98 var(--ui); letter-spacing: -.05em; color: #f8f0e3; max-width: 940px; }
.hx-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.hx-bottom p { max-width: 440px; font: 400 14.5px/1.55 var(--ui); color: rgba(244,236,221,.82); }
.hx-cta { display: flex; align-items: center; gap: 20px; }
.hx-more { display: inline-flex; gap: 6px; align-items: center; font: 600 14px/1 var(--ui); color: var(--cream); }
.hx-feats { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; border-top: 1px solid rgba(244,236,221,.18); padding: 17px 0 22px; position: relative; z-index: 1; }
.hx-feats li { position: relative; display: grid; gap: 8px; font: 500 12.5px/1.35 var(--ui); color: rgba(244,236,221,.85); }
.hx-feats li svg { width: 17px; height: 17px; }
.hx-feats li.on { color: var(--coral); }
.hx-feats li.on::before { content: ""; position: absolute; left: 0; top: -18px; width: 72px; height: 2px; background: var(--coral); }
@media (max-width: 1040px) {
  .hx { height: auto; min-height: 0; padding: 18px 22px 0; }
  /* the headline first, the card under the buttons */
  .hx-card { position: relative; right: auto; top: auto; width: auto; max-width: 420px; margin: 0 0 30px; order: 3; }
  .hx-feats { order: 4; }
  .hx-main { margin-top: 70px; } .hx-main h1 { font-size: 64px; }
  .hx-bottom { flex-direction: column; align-items: flex-start; }
  .hx-feats { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
}
@media (max-width: 640px) {
  .hx { margin-top: 10px; border-radius: 24px; padding: 14px 16px 0; }
  .hx-menu { display: none; } .hx-main h1 { font-size: 44px; } .hx-main { margin-top: 40px; }
  .hx-cta { flex-wrap: wrap; } .hx-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .hx-bg i { animation: none; } }
/* light, thin titles everywhere (no serif any more) */
h1 em, h2 em, .box h1 em, .wel h1 em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; }

/* ===== v8 (13 Nov, user: "de header, het hoofdmenu ziet er mooi uit met dat patroon, doe dat voor alles"): the hero's
   ground behind EVERY page (navy, a coral glow, reeded glass; .back is on every page), and every panel is the hero's smoked
   glass with cream text instead of cream paper. The ink tokens flip to cream, so the pages' own rules follow. ===== */
:root {
  --ink: #f8f0e3; --text: rgba(244,236,221,.74); --dim: rgba(244,236,221,.5); --line: rgba(244,236,221,.14);
  --gl: rgba(30,44,84,.42); --gl-row: rgba(244,236,221,.08); --gl-line: rgba(244,236,221,.16); --gl-blur: blur(18px) saturate(1.3);
  --gl-field: rgba(14,26,56,.38); --gl-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  --green-ink: #8ee5b3; --bad-ink: #ffb4a8; --hero-1: rgba(255,111,94,.32); --hero-2: rgba(30,44,84,.5); --glow: rgba(0,0,0,.5);
  color-scheme: dark;
}
html, body { background: #111f44; }
.back { overflow: hidden; background: linear-gradient(180deg, #3b4b74 0%, #1f2e57 46%, #111f44 100%); }
.back::before { content: ""; position: absolute; inset: -12%; animation: hxd 18s ease-in-out infinite alternate;
  background: radial-gradient(30% 38% at 64% 46%, rgba(255,111,94,.6), rgba(255,111,94,0) 72%),
              radial-gradient(22% 28% at 84% 10%, rgba(255,176,146,.34), rgba(255,176,146,0) 72%),
              radial-gradient(36% 36% at 10% 2%, rgba(176,186,220,.4), rgba(176,186,220,0) 72%),
              radial-gradient(42% 40% at 6% 100%, rgba(9,16,40,.9), rgba(9,16,40,0) 72%); }
.back::after { content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0px, rgba(255,255,255,.02) 3px, rgba(0,0,0,0) 9px, rgba(0,0,0,.17) 15px, rgba(255,255,255,.07) 16px); }
.glass { background: var(--gl); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gl-line), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.glass.red { background: linear-gradient(150deg, rgba(255,111,94,.3), rgba(30,44,84,.48) 60%); box-shadow: inset 0 0 0 1px rgba(255,111,94,.34), var(--gl-shadow); }
.btn.soft:hover { background: rgba(244,236,221,.1); }
.btn.navy { background: var(--gl-field); color: var(--cream); box-shadow: inset 0 0 0 1px var(--gl-line); }
.chip { background: rgba(244,236,221,.1); color: var(--text); box-shadow: inset 0 0 0 1px rgba(244,236,221,.12); }
.chip.dark { background: rgba(14,26,56,.6); color: var(--cream); }
.chip.win { background: rgba(47,179,107,.2); color: var(--green-ink); }
.switch { background: rgba(244,236,221,.18); }
.switch::after { box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.switch.on, .switch[aria-checked="true"] { background: var(--coral); }
.switch.on::after, .switch[aria-checked="true"]::after { background: #fff; }
@media (prefers-reduced-motion: reduce) { .back::before { animation: none; } }

/* ===== v9 (13 Nov, "nog steeds een 2/10 ... jij moet kijken"; I looked at Linear and Raycast): the pattern everywhere made
   everything the same muddy blue. Now the ground is deeper and calmer (the reeds faint, one soft glow), so the hero and
   the closing block stay the moments, and panels are crisp: a solid dark surface with a hairline, cool greys for text,
   coral only for what you press. ===== */
:root {
  --ink: #f5f3ef; --text: #a4acc0; --dim: #6c7690; --line: rgba(255,255,255,.08);
  --gl: rgba(12,19,38,.86); --gl-row: rgba(255,255,255,.035); --gl-line: rgba(255,255,255,.08); --gl-blur: blur(24px) saturate(1.4);
  --gl-field: rgba(255,255,255,.04); --gl-shadow: 0 30px 60px -40px rgba(0,0,0,.85);
}
html, body { background: #080d1c; }
.back { background: linear-gradient(180deg, #121c3a 0%, #0b1226 42%, #080d1c 100%); }
.back::before { background: radial-gradient(34% 30% at 80% -2%, rgba(255,111,94,.2), rgba(255,111,94,0) 72%), radial-gradient(40% 34% at 6% -2%, rgba(140,160,220,.16), rgba(140,160,220,0) 72%); }
.back::after { opacity: .5; }
.glass { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%), var(--gl); }
.glass.red { background: linear-gradient(180deg, rgba(255,111,94,.08), rgba(255,111,94,0) 50%), var(--gl); box-shadow: inset 0 0 0 1px rgba(255,111,94,.36), var(--gl-shadow); }
.btn.soft { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.chip { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.switch { background: rgba(255,255,255,.12); }
.lang { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }

/* ===== v13 (13 Nov, "een nieuw kleurenthema: sand beige 60%, forest green 30%, en die 10% kies jij"): sand is the ground,
   forest green the hero, the closing screen and a few blocks, terracotta (my pick: warm, earthy, it stands out on both the
   sand and the green) only for what you press or notice. The reeded glass stays, now green with a warm terracotta glow.
   The old token names keep working: --navy is now the deep forest ink, --cream the light sand, --coral the terracotta. ===== */
:root {
  --navy: #16301f; --navy-2: #1f3d2b; --navy-3: #2b5239; --navy-line: rgba(244,236,221,.14);
  --cream: #f4ecdd; --cream-2: #fbf7ef; --cream-3: #ece2cf; --cream-line: #ddd0b8;
  --sand: #ede3d1; --sand-2: #f4ecdf; --forest: #1f3d2b; --forest-2: #2b5239; --forest-3: #142a1d;
  --coral: #d2663a; --coral-2: #bb5430; --coral-rgb: 210,102,58;
  --ink: #17291d; --text: rgba(23,41,29,.72); --dim: rgba(23,41,29,.5); --line: rgba(23,41,29,.12);
  --gl: #fbf7ef; --gl-row: rgba(23,41,29,.035); --gl-line: rgba(23,41,29,.1); --gl-blur: none; --gl-field: #fffdf8;
  --gl-shadow: 0 1px 2px rgba(40,50,30,.04), 0 18px 40px -26px rgba(40,50,30,.3);
  --green-ink: #2a7a4b; --bad-ink: #b8432f; color-scheme: light;
}
html, body { background: var(--sand); }
body { color: var(--ink); }
.back { background: linear-gradient(180deg, #f5eee1 0%, #efe6d5 45%, #ebe0cc 100%); }
.back::before { background: radial-gradient(34% 30% at 82% -2%, rgba(210,102,58,.12), rgba(210,102,58,0) 72%), radial-gradient(40% 34% at 6% -2%, rgba(43,82,57,.1), rgba(43,82,57,0) 72%); }
.back::after { opacity: .28; }
::selection { background: rgba(210,102,58,.28); }
.glass { background: var(--gl); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gl-line), var(--gl-shadow); -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass.red { background: linear-gradient(180deg, rgba(210,102,58,.08), rgba(210,102,58,0) 50%), var(--gl); box-shadow: inset 0 0 0 1px rgba(210,102,58,.36), var(--gl-shadow); }
.btn.soft { box-shadow: inset 0 0 0 1px currentColor; }
.btn.soft:hover { background: rgba(23,41,29,.06); }
.chip { background: rgba(23,41,29,.06); color: var(--text); box-shadow: inset 0 0 0 1px rgba(23,41,29,.06); }
.chip.dark { background: var(--forest); color: var(--cream); }
.switch { background: rgba(23,41,29,.18); }
.switch.on, .switch[aria-checked="true"] { background: var(--forest-2); }
.lang { background: rgba(23,41,29,.05); box-shadow: inset 0 0 0 1px var(--line); }
.lang button { color: var(--dim); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.eyes { background: var(--forest); } .eyes i { background: var(--cream); }

/* the hero (and the sign-in, the closing screen): forest green reeded glass with a warm glow */
.hx-bg { background: linear-gradient(180deg, #3a6549 0%, #24472f 46%, #14291c 100%); }
.hx-bg .b1 { background: radial-gradient(closest-side, rgba(214,116,66,.88), rgba(214,116,66,0)); }
.hx-bg .b2 { background: radial-gradient(closest-side, rgba(214,226,190,.42), rgba(214,226,190,0)); }
.hx-bg .b3 { background: radial-gradient(closest-side, rgba(7,22,13,.95), rgba(7,22,13,0)); }
.hx-bg .b4 { background: radial-gradient(closest-side, rgba(242,212,160,.5), rgba(242,212,160,0)); }
.hx-menu, .hx-login { background: rgba(10,30,18,.34); }
.hx-menu a.on { background: rgba(244,236,221,.16); }
.hx-round { color: var(--forest-3); }
.hx-card { background: rgba(22,50,33,.46); box-shadow: inset 0 0 0 1px rgba(244,236,221,.16), 0 30px 60px -30px rgba(0,0,0,.55); }

/* ===== the name is Sproutlink now (13 Nov): the logo is a sprout in a forest circle (Robo's eyes were TwoCode's) ===== */
.mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--forest); color: var(--cream); flex: none; }
.mark svg { width: 19px; height: 19px; }
.hx-logo svg { color: #f4ecdd; }