/* The multi-farm front door (public/landing.html), one screen: golden hour over the hollow. A sunset sky (magenta and
   ember at the hills, violet and teal above) that slowly breathes, fireflies and pollen, the living farm in a glass orb
   with a turning halo, the carved logo, and a glass dock with ONE big action, Play, and how the partner joins (release
   1.0 O7, astra#9); Star us and GitHub sit in the quiet pill row with the other small links.
   Stand-alone on purpose: the game's css/style.css, css/farm.css and css/ideas.css come later, with the sheets
   (js/landing.js), so the first view is this file and one font. Every animation moves transform or opacity only, and
   everything is still under prefers-reduced-motion. Words sit on the glass dock, on the dark hills or on a solid sheet:
   white on the dock is >= 6:1 over any colour of the sky. */

@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/fredoka-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cyrillic (the Bulgarian pass): Fredoka has none; Nunito's, as in css/style.css (the same size match). A Bulgarian
   display line keeps to that one face: its words carry no Latin brand word and no digit (bg/front.js: copy#19) */
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  size-adjust: 103%;
}

:root {
  --night: #160736;      /* the top of the sky */
  --dusk: #2A1458;       /* the near hill, the sheets' ink */
  --plum: #5A1C86;
  --magenta: #FF3E8E;
  --ember: #FF8A3D;
  --honey: #FFC93E;
  --teal: #19C3B4;
  --lime: #A8EC5E;
  --lilac: #EBDDFF;      /* small words on the glass */
  --glass: rgba(28, 10, 66, .5);
  --glass-solid: rgba(36, 14, 80, .92);
  --glass-edge: rgba(255, 255, 255, .24);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --font: 'Fredoka', ui-rounded, system-ui, sans-serif;
  /* the orb sets the scale of the whole screen: by height first (one screen), by width on a phone */
  --orb: clamp(150px, min(36svh, 58vw), 460px);
}
@supports not (height: 1svh) { :root { --orb: clamp(150px, min(36vh, 58vw), 460px); } }

*, *::before, *::after { box-sizing: border-box; }
html:has(body.landing) { min-height: 100%; height: auto; overflow-x: hidden; overflow-y: auto; background: var(--dusk); color-scheme: dark; }
body.landing {
  margin: 0; min-height: 100vh; min-height: 100svh; height: auto; overflow: visible; position: relative;
  font: 500 1rem/1.4 var(--font); color: #fff; background: transparent;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---- the sky ----------------------------------------------------------------------------------------------------- */
.ld-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, var(--night) 0%, #2C0F63 18%, var(--plum) 38%, #A92A88 56%, #F2477A 70%, #FF7B4E 82%, #FFB25A 93%, #FFD27A 100%); }
.ld-glow { position: absolute; border-radius: 50%; will-change: transform; }
.ld-glow--teal { left: -34vmax; top: -40vmax; width: 96vmax; height: 80vmax;
  background: radial-gradient(closest-side, rgba(25, 195, 180, .5), rgba(25, 195, 180, .16) 55%, transparent);
  animation: ld-drift-a 26s ease-in-out infinite alternate; }
.ld-glow--rose { right: -36vmax; top: 6vh; width: 84vmax; height: 70vmax;
  background: radial-gradient(closest-side, rgba(255, 62, 142, .46), rgba(255, 62, 142, .14) 55%, transparent);
  animation: ld-drift-b 32s ease-in-out infinite alternate; }
@keyframes ld-drift-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.08); } }
@keyframes ld-drift-b { to { transform: translate3d(-14vmax, -6vmax, 0) scale(1.12); } }

.ld-hills { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(110px, 24svh, 250px); display: block; }
.ld-hill--far { fill: #8C2A86; opacity: .78; }
.ld-hill--mid { fill: #521A78; }
.ld-hill--near { fill: var(--dusk); }

.ld-motes { position: absolute; inset: 0; }
.ld-motes i { position: absolute; left: var(--x); top: var(--y); border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.ld-fly { width: 5px; height: 5px; background: #FFF6B0;
  box-shadow: 0 0 6px 2px rgba(255, 236, 130, .9), 0 0 16px 6px rgba(196, 255, 120, .35);
  animation: ld-rise var(--d) linear var(--t) infinite; }
.ld-dust { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .7);
  animation: ld-float var(--d) linear var(--t) infinite; }
@keyframes ld-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: 1; }
  26% { opacity: .3; transform: translate3d(2.5vw, -9vh, 0); }
  40% { opacity: 1; }
  58% { opacity: .45; transform: translate3d(-1.5vw, -22vh, 0); }
  74% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(2vw, -40vh, 0); }
}
@keyframes ld-float {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  15% { opacity: .85; }
  85% { opacity: .6; }
  100% { opacity: 0; transform: translate3d(16vw, 12vh, 0); }
}

/* ---- the screen -------------------------------------------------------------------------------------------------- */
.ld { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100svh; overflow-x: clip;
  padding: calc(18px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); }
/* the stage, the dock and the farms sit in the middle of the height that is left; the links stay at the bottom */
.ld-stage { display: flex; flex-direction: column; align-items: center; margin-top: auto; text-align: center; }

/* the orb: the farm in a glass sphere, a turning halo, a planet ring with a spark (the ring's back half passes behind) */
.ld-orb { position: relative; flex: none; width: var(--orb); height: var(--orb); isolation: isolate; }
/* the sun behind the orb: the farm is the evening's sun */
.ld-sun { position: absolute; left: 50%; top: 50%; z-index: -2; width: calc(var(--orb) * 2.6); height: calc(var(--orb) * 2.6);
  margin: calc(var(--orb) * -1.3) 0 0 calc(var(--orb) * -1.3); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 96, .6), rgba(255, 120, 80, .24) 50%, transparent);
  animation: ld-breathe 9s ease-in-out infinite alternate; }
@keyframes ld-breathe { from { transform: scale(.92); opacity: .85; } to { transform: scale(1.06); opacity: 1; } }
.ld-orb::before { content: ''; position: absolute; inset: -16%; z-index: -1; border-radius: 50%; opacity: .5;
  background: conic-gradient(from 20deg, var(--magenta), var(--ember), var(--honey), var(--teal), #8B5CF6, var(--magenta));
  filter: blur(calc(var(--orb) / 12)); animation: ld-spin 18s linear infinite; }
.ld-orb-ring { position: absolute; inset: -8px; z-index: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--magenta), var(--ember), var(--honey), var(--teal), #8B5CF6, var(--magenta));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: ld-spin 14s linear infinite reverse; }
.ld-orb-view { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: 50%; transform: translateZ(0);
  background: radial-gradient(circle at 50% 42%, #86C64C, #4A8A34 62%, #2C5A2A);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .45), 0 0 40px 2px rgba(255, 160, 90, .55), 0 0 110px 20px rgba(255, 62, 142, .3); }
.ld-orb-view img, .ld-orb-view video { position: absolute; inset: -1px; display: block; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }
.ld-orb-view video { opacity: 0; transition: opacity .9s ease; }
.ld-orb-view video.is-on { opacity: 1; }
.ld-orb-shine { position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 31% 22%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 26%),
    radial-gradient(circle at 50% 50%, rgba(28, 10, 66, 0) 62%, rgba(28, 10, 66, .55) 100%);
  box-shadow: inset 0 -14px 34px rgba(255, 120, 60, .35), inset 0 10px 26px rgba(255, 255, 255, .2); }
.ld-orbit { position: absolute; left: -24%; right: -24%; top: 41%; height: 28%; pointer-events: none; transform: rotate(-13deg); }
.ld-orbit::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 236, 200, .5);
  box-shadow: 0 0 14px rgba(255, 201, 62, .28); }
.ld-orbit--back { z-index: 0; }
.ld-orbit--front { z-index: 4; clip-path: inset(50% -12% -40% -12%); }
/* the spark: two eased swings a quarter apart make an ellipse */
/* (a box of no size: a full-width carrier moved by its own width widened the page on a phone) */
.ld-orbit i { position: absolute; left: 0; top: 50%; width: 0; height: 0; animation: ld-sx 4.2s ease-in-out infinite alternate; }
.ld-orbit i::before { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #FFF8E0;
  box-shadow: 0 0 8px 3px rgba(255, 214, 110, .95), 0 0 22px 8px rgba(255, 120, 80, .4);
  animation: ld-sy 4.2s ease-in-out -2.1s infinite alternate; }
@keyframes ld-sx { from { transform: translateX(0); } to { transform: translateX(calc(var(--orb) * 1.48)); } }
@keyframes ld-sy { from { transform: translateY(calc(var(--orb) * -.14)); } to { transform: translateY(calc(var(--orb) * .14)); } }
@keyframes ld-spin { to { transform: rotate(360deg); } }

.ld-logo { position: relative; z-index: 2; margin: calc(var(--orb) * -.17) 0 0; width: clamp(250px, min(80vw, 58svh), 520px); line-height: 0; }
.ld-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 20px rgba(28, 10, 66, .55)); }
.ld-tag { margin: 6px 0 0; max-width: 30ch; text-wrap: balance; font: 600 clamp(1.0625rem, 2.2vw, 1.3125rem)/1.3 var(--font);
  letter-spacing: .005em; text-shadow: 0 2px 14px rgba(28, 10, 66, .75), 0 1px 2px rgba(28, 10, 66, .6); }

/* ---- the dock: Play on glass, the one big button ------------------------------------------------------------------ */
.ld-dock { position: relative; width: min(560px, 100%); margin-top: clamp(14px, 2.6svh, 26px); padding: 12px; border-radius: 30px;
  background: var(--glass-solid); border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 60px -18px rgba(14, 4, 36, .7), inset 0 1px 0 rgba(255, 255, 255, .22); text-align: center; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ld-dock { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
}
.ld-acts { display: flex; justify-content: center; }

.ld-act { --c1: #fff; --c2: #ddd; --c3: #bbb; --ink: #111; --sub: #333; --glow: rgba(0, 0, 0, .4); --icbg: rgba(0, 0, 0, .8); --icfg: #fff;
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 10px;
  border: 0; border-radius: 22px; overflow: hidden; isolation: isolate; text-align: left; text-decoration: none; color: var(--ink);
  background: linear-gradient(135deg, var(--c1), var(--c2) 52%, var(--c3));
  box-shadow: 0 12px 26px -12px var(--glow), 0 2px 0 rgba(255, 255, 255, .5) inset, 0 -3px 0 rgba(0, 0, 0, .14) inset;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.ld-act--play { --c1: #E4FF7A; --c2: #8DE45C; --c3: #2CC98C; --ink: #0B2A18; --sub: #174A2C; --glow: rgba(122, 230, 90, .85); --icbg: #0B2A18; --icfg: #B8F46A;
  width: min(420px, 100%); min-height: 76px; gap: 16px; padding: 12px 22px 12px 12px; border-radius: 26px; }
/* a sheen that crosses the button now and then */
.ld-act::after { content: ''; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 34%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 50%, transparent); transform: translateX(-60%) skewX(-16deg);
  animation: ld-sheen 8s var(--ease-out) infinite; }
@keyframes ld-sheen { 0%, 78% { transform: translateX(-60%) skewX(-16deg); } 100% { transform: translateX(520%) skewX(-16deg); } }
.ld-act:hover, .ld-act:focus-visible { transform: translateY(-3px) scale(1.015); box-shadow: 0 20px 34px -12px var(--glow), 0 0 0 1px rgba(255, 255, 255, .35),
  0 2px 0 rgba(255, 255, 255, .5) inset, 0 -3px 0 rgba(0, 0, 0, .14) inset; }
.ld-act:hover::after, .ld-act:focus-visible::after { animation: ld-sheen-now .7s var(--ease-out) 1; }
@keyframes ld-sheen-now { from { transform: translateX(-60%) skewX(-16deg); } to { transform: translateX(520%) skewX(-16deg); } }
.ld-act:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.ld-act:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ld-act:disabled, .ld-act[aria-disabled="true"] { cursor: not-allowed; filter: grayscale(.7) brightness(.92); transform: none; }
.ld-act-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--icbg); color: var(--icfg);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22); transition: transform .4s var(--ease-back); }
.ld-act-ic svg { width: 24px; height: 24px; fill: currentColor; }
.ld-act--play .ld-act-ic svg { margin-left: 3px; }
.ld-act:hover .ld-act-ic, .ld-act:focus-visible .ld-act-ic { transform: scale(1.1); }
.ld-act--play:hover .ld-act-ic svg, .ld-act--play:focus-visible .ld-act-ic svg { animation: ld-nudge .7s var(--ease-out); }
@keyframes ld-nudge { 0% { transform: translateX(0); } 40% { transform: translateX(4px); } 100% { transform: translateX(0); } }
.ld-act-txt { display: flex; flex-direction: column; min-width: 0; }
.ld-act-t { font: 700 1.375rem/1.1 var(--font); letter-spacing: .005em; }
.ld-act-s { margin-top: 2px; font: 500 .9375rem/1.2 var(--font); color: var(--sub); }
.ld-act--play .ld-act-ic { width: 52px; height: 52px; }
.ld-act--play .ld-act-ic svg { width: 28px; height: 28px; }
.ld-act--play .ld-act-t { font-size: 1.75rem; }
.ld-act--play .ld-act-s { font-size: 1rem; }

/* how the second farmer comes in: one line under Play */
.ld-invite { margin: 12px 0 0; padding: 0 8px; font: 600 1rem/1.35 var(--font); color: #fff; text-wrap: balance; }
/* the moon flows with the words: a line that wraps on a narrow phone starts with it instead of hanging beside two lines */
.ld-ttl { display: block; margin: 6px 0 2px; padding: 0 8px; font: 600 .875rem/1.35 var(--font); color: var(--lilac); text-wrap: balance; }
.ld-ttl-moon { display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -1px; border-radius: 50%;
  box-shadow: inset -4px -2px 0 0 var(--honey); transform: rotate(-20deg); }
.ld-status { margin: 8px 0 0; font: 600 1rem/1.35 var(--font); color: #fff; }
.ld-status:empty { display: none; }
.ld-note { margin: 10px 0 0; padding: 10px 14px; border-radius: 16px; text-align: left; font: 500 .9375rem/1.4 var(--font); color: #fff;
  background: rgba(255, 138, 61, .2); box-shadow: inset 0 0 0 1.5px rgba(255, 201, 62, .7); }
.ld-note p { margin: 0; }
.ld-note-t { margin: 0 0 4px; font: 700 1.0625rem/1.2 var(--font); }

/* ---- this device's farms: a row of glass chips (only when there are any) -------------------------------------------- */
.ld-farms { width: min(900px, 100%); margin-top: 14px; text-align: center; }
/* the label on its own dark pill: white on the bare sunset would be under 4.5:1 */
.ld-farms-t { display: inline-block; margin: 0 0 8px; padding: 4px 12px 5px; border-radius: 999px; font: 600 .875rem/1.2 var(--font); color: #fff;
  background: rgba(28, 10, 66, .62); }
.ld-list { margin: 0; padding: 2px; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-height: 128px; overflow-y: auto; overscroll-behavior: contain; }
.ld-farm { display: flex; align-items: stretch; min-width: 0; border-radius: 18px; background: var(--glass-solid);
  box-shadow: inset 0 0 0 1px var(--glass-edge), 0 10px 24px -14px rgba(14, 4, 36, .8); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ld-farm { background: rgba(28, 10, 66, .62); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
}
.ld-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; border-radius: 18px 0 0 18px; text-align: left;
  text-decoration: none; color: #fff; transition: background .2s; }
.ld-open::after { content: ''; flex: none; margin-left: auto; width: 8px; height: 8px; border: solid #fff; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg);
  transition: transform .2s var(--ease-out); }
.ld-open:hover { background: rgba(255, 255, 255, .1); }
.ld-open:hover::after { transform: translateX(2px) rotate(45deg); }
.ld-open:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ld-open-txt { display: flex; flex-direction: column; min-width: 0; }
.ld-name { font: 700 1.0625rem/1.2 var(--font); overflow-wrap: anywhere; }
.ld-when { font: 500 .8125rem/1.25 var(--font); color: var(--lilac); }
.ld-forget { flex: none; width: 44px; min-height: 44px; border: 0; border-left: 1px solid rgba(255, 255, 255, .16); border-radius: 0 18px 18px 0;
  font: 700 .9375rem/1 var(--font); color: var(--lilac); background: transparent; }
.ld-forget:hover, .ld-forget:focus-visible { color: #fff; background: rgba(255, 62, 142, .4); }
.ld-forget:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* a returning visitor's farms take some height: the orb gives a little */
.ld:has(> .ld-farms:not([hidden])) { --orb: clamp(140px, min(30svh, 54vw), 420px); }

/* ---- where to go if you need: a quiet row of glass pills, over the dark hills -------------------------------------- */
.ld-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(760px, 100%); margin-top: auto; padding-top: 22px; }
.ld-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px;
  font: 600 .9375rem/1.2 var(--font); color: #fff; text-decoration: none; background: rgba(28, 10, 66, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); transition: background .2s, box-shadow .2s; }
.ld-link:hover { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.ld-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Star us and GitHub: pills like the others, each with its glyph; the star's count rides in a small honey pill */
.ld-link-ic { flex: none; width: 18px; height: 18px; margin-right: 7px; fill: currentColor; }
.ld-link--star .ld-link-ic { fill: var(--honey); }
.ld-star-n { flex: none; margin-left: 8px; padding: 3px 8px 4px; border-radius: 999px; font: 700 .8125rem/1 var(--font);
  font-variant-numeric: tabular-nums; color: #3A1A00; background: var(--honey); }
/* the language: "English · Български" (ui/lang-toggle.js) in the top corner, glass like the links; on a phone it takes a
   row of its own above the orb (in a corner it would cover the orb). The game's .lang-pick rules (css/style.css) come
   later with the sheets and lose to these. A Bulgarian page waits (a second at most) for its words: landing.html. */
html.i18n-wait body.landing { visibility: hidden; }
.ld-lang { position: absolute; z-index: 5; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.ld-lang:empty { display: none; }
.ld-lang .lang-pick { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(28, 10, 66, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ld-lang .lang-pick { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
}
.ld-lang .lang-opt { min-height: 38px; padding: 6px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 .9375rem/1.1 var(--font); color: var(--lilac); box-shadow: none; transition: background .2s, color .2s; }
.ld-lang .lang-opt:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.ld-lang .lang-opt[aria-pressed="true"] { color: var(--dusk); background: #fff; box-shadow: 0 6px 16px -6px rgba(255, 201, 62, .8); }
.ld-lang .lang-opt:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ld-lang .lang-dot { padding: 0 1px; font-weight: 700; color: rgba(255, 255, 255, .5); }
@media (pointer: coarse) { .ld-lang .lang-opt { min-height: 44px; padding: 8px 14px; } }
@media (max-width: 699px) {
  .ld-lang { position: static; align-self: flex-end; margin: -12px 0 0; }
  /* the toggle's row comes out of the orb, so the page stays one screen (with the farm chips too) */
  .ld:has(> .ld-lang .lang-pick):not(:has(> .ld-farms:not([hidden]))) { --orb: clamp(150px, min(33svh, 54vw), 460px); }
  .ld:has(> .ld-lang .lang-pick):has(> .ld-farms:not([hidden])) { --orb: clamp(130px, min(27svh, 48vw), 420px); }
}
/* a narrow phone: the seven small links in three rows in both languages (Bulgarian's words are longer) */
@media (max-width: 420px) {
  .ld-more { gap: 6px; }
  .ld-link { padding: 8px 10px; }
}
.ld-noscript { position: relative; margin: 16px; text-align: center; font: 600 1.0625rem/1.4 var(--font); }
.ld-noscript a { color: #fff; }

/* ---- the sheets: the way back in, the ideas box (their insides: css/farm.css, css/ideas.css, css/style.css) ---------- */
.ld-sheet { width: min(600px, calc(100vw - 32px)); max-width: none; max-height: min(90svh, 860px); margin: auto; padding: 0; border: 0;
  border-radius: 28px; overflow: auto; overscroll-behavior: contain; color: var(--dusk); color-scheme: light;
  background: linear-gradient(180deg, #FFFDF9, #FFF3E6); box-shadow: 0 30px 80px rgba(14, 4, 36, .6), 0 0 0 1px rgba(255, 255, 255, .7); }
.ld-sheet::backdrop { background: rgba(18, 6, 46, .62); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .ld-sheet::backdrop { backdrop-filter: blur(5px); } }
.ld-sheet[open] { animation: ld-pop .34s var(--ease-out); }
@keyframes ld-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ld-sheet-in { position: relative; padding: 24px 22px 22px; text-align: left; }
.ld-sheet-in::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--magenta), var(--ember), var(--honey), var(--teal), #8B5CF6); }
.ld-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ld-sheet-t { margin: 4px 0 0; font: 700 1.5rem/1.15 var(--font); color: var(--dusk); text-wrap: balance; }
.ld-sheet-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  font: 700 1.0625rem/1 var(--font); color: var(--dusk); background: #F0E4FF; transition: background .2s, transform .2s var(--ease-out); }
.ld-sheet-x:hover { background: #E2CCFF; transform: rotate(90deg); }
.ld-sheet-x:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.ld-sheet-sub { margin: 0 0 16px; font: 500 1rem/1.45 var(--font); color: #4A3466; text-wrap: pretty; }
.ld-idea-slot { min-height: 420px; }
.ld-idea-slot:has(.idea-box) { min-height: 0; }
.ld-sheet .gate-back { margin: 0; }
.ld-sheet .gate-back .gate-link, .ld .gate-back .gate-link { min-height: 44px; padding: 8px 12px; border: 2px solid #E6C99A; border-radius: 14px;
  background: #fff; font: 600 1rem/1.2 var(--font); color: #3E2612; }
/* a phone: the sheet rises from the bottom edge */
@media (max-width: 599px) {
  .ld-sheet { width: 100%; max-height: 92svh; margin: auto 0 0; border-radius: 26px 26px 0 0; }
  .ld-sheet-in { padding: 22px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .ld-sheet[open] { animation: ld-rise-in .38s var(--ease-out); }
}
@keyframes ld-rise-in { from { transform: translateY(40px); opacity: .4; } }
/* a home-screen app that knows no farm: the way back sits on the page, before the actions */
.ld-back--inline { width: min(600px, 100%); margin-top: 16px; border-radius: 26px; overflow: hidden; color: var(--dusk); color-scheme: light;
  background: linear-gradient(180deg, #FFFDF9, #FFF3E6); box-shadow: 0 24px 60px -18px rgba(14, 4, 36, .7); }
.ld-back--inline .ld-sheet-x { display: none; }

/* ---- the picture viewer (front/gallery.js) ------------------------------------------------------------------------ */
.ld-box { width: min(96vw, 1440px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; }
.ld-box::backdrop { background: rgba(14, 4, 36, .92); }
.ld-box-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ld-box-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 150px); border-radius: 18px; background: var(--dusk);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 60px rgba(255, 62, 142, .3), 0 24px 48px rgba(0, 0, 0, .5); }
.ld-box-meta { max-width: 40em; padding: 0 56px; text-align: center; color: #fff; }
.ld-box-cap { margin: 0; font: 600 1.0625rem/1.35 var(--font); }
.ld-box-n { margin: 4px 0 0; font: 500 .875rem/1.3 var(--font); color: var(--lilac); }
.ld-box-btn { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; padding: 0 0 3px; border: 0; border-radius: 50%;
  font: 700 1.75rem/1 var(--font); color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.ld-box-btn:hover { background: rgba(255, 255, 255, .26); }
.ld-box-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ld-box-x { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); font-size: 1.25rem; padding: 0; }
.ld-box-prev, .ld-box-next { top: 50%; translate: 0 -50%; }
.ld-box-prev { left: calc(10px + env(safe-area-inset-left, 0px)); }
.ld-box-next { right: calc(10px + env(safe-area-inset-right, 0px)); }
@media (max-width: 699px) {
  .ld-box-prev, .ld-box-next { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: none; }
  .ld-box-meta { padding: 0 8px 64px; }
}

/* ---- sizes ------------------------------------------------------------------------------------------------------- */
@media (max-width: 699px) {
  .ld-act-t { font-size: 1.25rem; }
  .ld-act--play .ld-act-t { font-size: 1.375rem; }
}
@media (min-width: 700px) {
  .ld { padding-top: calc(clamp(18px, 3.5svh, 44px) + env(safe-area-inset-top, 0px)); }
  .ld-tag { max-width: none; }
  .ld-dock { padding: 14px; border-radius: 32px; }
  .ld-act { min-height: 78px; padding: 12px 18px 12px 12px; border-radius: 24px; }
  .ld-act-ic { width: 50px; height: 50px; }
  .ld-act-ic svg { width: 26px; height: 26px; }
}
@media (min-width: 1500px) and (min-height: 900px) {
  .ld-dock { width: min(1000px, 100%); }
  .ld-act { min-height: 90px; }
  .ld-act-t { font-size: 1.5rem; }
  .ld-act--play .ld-act-t { font-size: 1.625rem; }
}

/* ---- still, for those who asked ------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ld-glow, .ld-sun, .ld-orb::before, .ld-orb-ring, .ld-orbit i, .ld-orbit i::before, .ld-act::after, .ld-act-ic, .ld-act-ic svg { animation: none !important; }
  .ld-motes i { animation: none; }
  .ld-fly { opacity: .85; }
  .ld-dust { opacity: .5; }
  .ld-orbit i { transform: translateX(calc(var(--orb) * 1.15)); }
  .ld-orbit i::before { transform: translateY(calc(var(--orb) * .1)); }
  .ld-act, .ld-act-ic, .ld-open, .ld-sheet-x, .ld-orb-view video { transition: none; }
  .ld-act:hover, .ld-act:focus-visible { transform: none; }
  .ld-act:hover .ld-act-ic, .ld-act:focus-visible .ld-act-ic { transform: none; }
  .ld-sheet[open] { animation: none; }
}