/* Flakk language picker (06.11.2026). Self-contained palette (works on the flat page and over the 3D page). Night = dark glass with an amber edge, day = light glass. */
.lang-trig, .lp, .lp-chip { --lp-ink: #F5F1E8; --lp-soft: #93A3B8; --lp-bg: rgba(8, 20, 38, .8); --lp-line: rgba(255, 255, 255, .13); --lp-item: rgba(255, 255, 255, .045); --lp-amber: #F2A741; --lp-amber-t: #F2A741; --lp-pill: rgba(127, 150, 180, .16); }
html.day .lang-trig, html.day .lp, html.day .lp-chip { --lp-ink: #0F2A47; --lp-soft: #5A687C; --lp-bg: rgba(255, 252, 246, .84); --lp-line: rgba(15, 42, 71, .16); --lp-item: rgba(15, 42, 71, .045); --lp-amber-t: #98590B; --lp-pill: rgba(15, 42, 71, .07); }
.lang.lp-off { display: none !important; }

/* trigger: the pill hugs globe + name symmetrically in every language */
.lang-trig { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--lp-pill); color: var(--lp-ink); font: 500 14px/1 var(--f-u, "Geist", system-ui, sans-serif); cursor: pointer; white-space: nowrap; flex: none; box-sizing: border-box; }
.lang-trig svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; display: block; }
.lang-trig .lt-n { display: block; line-height: 1; padding-block-start: 1px; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.lang-trig[aria-expanded=true] { box-shadow: 0 0 0 1px rgba(242, 167, 65, .6), 0 0 24px -4px rgba(242, 167, 65, .45); }
@media (max-width: 640px) { .lang-trig { padding: 0 11px; gap: 6px; } .lang-trig .lt-n { max-width: 9ch; } }

/* panel */
.lp { position: fixed; inset: 0; z-index: 150; } .lp[hidden] { display: none; }
.lp-back { position: absolute; inset: 0; background: rgba(3, 8, 16, calc(var(--lp-dim, 1) * .0)); }
.lp-card { position: absolute; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 4px; padding: 14px; border-radius: 24px; color: var(--lp-ink); background: var(--lp-bg); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 0 0 1px var(--lp-line), 0 0 0 1px rgba(242, 167, 65, .28), 0 30px 80px -20px rgba(0, 0, 0, .65), 0 0 70px -14px rgba(242, 167, 65, .3); overflow: hidden; }
html.day .lp-card { box-shadow: 0 0 0 1px var(--lp-line), 0 0 0 1px rgba(242, 167, 65, .4), 0 30px 70px -24px rgba(15, 42, 71, .4), 0 0 60px -16px rgba(242, 167, 65, .4); }
.lp.out .lp-card { animation: lp-out 220ms var(--m-inout, ease) forwards; } @keyframes lp-out { to { opacity: 0; scale: .9; translate: 0 -8px; } }
.lp.noglobe .lp-card { grid-template-columns: minmax(0, 1fr); } .lp.noglobe .lp-globe { display: none; }
.lp-globe { align-self: center; aspect-ratio: 1; margin: 6px; position: relative; } .lp-globe canvas { width: 100%; height: 100%; display: block; }
.lp-main { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; min-width: 0; }
.lp-search { display: flex; align-items: center; gap: 10px; height: 46px; padding-inline: 14px 8px; border-radius: 14px; background: var(--lp-item); box-shadow: inset 0 0 0 1px var(--lp-line); }
.lp-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--lp-amber); }
.lp-search > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--lp-soft); stroke-width: 1.8; stroke-linecap: round; }
.lp-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: 500 15px var(--f-u, system-ui, sans-serif); } .lp-search input::placeholder { color: var(--lp-soft); }
.lp-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--lp-soft); cursor: pointer; display: grid; place-items: center; flex: none; } .lp-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .lp-x:hover, .lp-x:focus-visible { background: var(--lp-item); color: var(--lp-ink); outline: none; }
.lp-list { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; align-content: start; overflow: auto; padding: 2px 4px 10px 2px; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(127, 150, 180, .4) transparent; }
.lp-i { position: relative; display: grid; gap: 2px; text-align: start; padding: 10px 14px; min-height: 56px; border-radius: 14px; border: 0; background: var(--lp-item); color: inherit; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: translate var(--m-spring-dur, 520ms) var(--m-spring, ease-out), background-color .2s, box-shadow .2s; animation-delay: calc(90ms + var(--i, 0) * 16ms); }
.lp-i[hidden] { display: none; }
.lp-i .n { font: 500 15.5px/1.25 var(--f-u, system-ui, sans-serif); } .lp-i small { font: 500 10.5px/1.2 var(--f-m, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--lp-soft); }
.lp-i .dot { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-amber); box-shadow: 0 0 10px 2px rgba(242, 167, 65, .6); opacity: 0; scale: .3; transition: opacity .2s, scale var(--m-spring-dur, 520ms) var(--m-spring, ease-out); }
.lp-i[aria-selected=true] .dot { opacity: 1; scale: 1; }
.lp-i:hover, .lp-i.act { translate: 0 -2px; background: rgba(242, 167, 65, .12); box-shadow: inset 0 0 0 1px rgba(242, 167, 65, .55), 0 8px 22px -10px rgba(242, 167, 65, .5); }
.lp-i:active { scale: .96; } .lp-i:focus-visible { outline: 2px solid var(--lp-amber); outline-offset: 2px; }
.lp-grab { display: none; }

/* bottom sheet */
@media (max-width: 700px) {
  .lp-back { background: rgba(3, 8, 16, calc(var(--lp-dim, 1) * .55)); transition: background-color .2s; }
  .lp-card { left: 0 !important; top: auto !important; right: 0; bottom: 0; width: auto !important; max-height: min(82vh, 640px) !important; grid-template-columns: minmax(0, 1fr); border-radius: 24px 24px 0 0; padding: 8px 12px max(14px, env(safe-area-inset-bottom)); touch-action: pan-y; transform-origin: 50% 100%; }
  .lp-card.m-open { animation: lp-sheet var(--m-spring-dur, 520ms) var(--m-spring, ease-out) both; } @keyframes lp-sheet { from { translate: 0 100%; opacity: .6; } }
  .lp.out .lp-card { animation: lp-sheet-out 220ms var(--m-inout, ease) forwards; } @keyframes lp-sheet-out { to { translate: 0 100%; opacity: .8; } }
  .lp-globe { display: none; } .lp-grab { display: block; padding: 8px 0 6px; cursor: grab; touch-action: none; } .lp-grab i { display: block; width: 42px; height: 5px; border-radius: 3px; margin: 0 auto; background: var(--lp-soft); opacity: .6; }
  .lp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-i { min-height: 58px; }
}

/* the one-tap suggestion */
.lp-chip { position: absolute; z-index: 60; inset-block-start: calc(100% + 10px); inset-inline-end: 0; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--lp-bg); color: var(--lp-ink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(242, 167, 65, .5), 0 14px 34px -12px rgba(0, 0, 0, .55); white-space: nowrap; font: 600 14px var(--f-u, system-ui, sans-serif); animation-delay: 0ms; }
.lp-chip .go { display: inline-flex; gap: 2px; align-items: baseline; padding: 8px 12px 8px 14px; border: 0; border-radius: 999px; background: var(--lp-amber); color: #071322; font: inherit; cursor: pointer; } .lp-chip .go b { font-weight: 700; }
.lp-chip .x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--lp-soft); cursor: pointer; display: grid; place-items: center; } .lp-chip .x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lp-chip .go:focus-visible, .lp-chip .x:focus-visible { outline: 2px solid var(--lp-amber); outline-offset: 2px; }

/* fade veil for plain navigation (3D page) */
.lp-veil { position: fixed; inset: 0; z-index: 200; background: #071322; opacity: 0; transition: opacity .2s ease; pointer-events: all; } html.day .lp-veil { background: #FBF8F2; }
@media (prefers-reduced-motion: reduce) { .lp.out .lp-card { animation-duration: 120ms; } .lp-i, .lp-i .dot { transition: opacity .15s, background-color .15s; } .lp-i:hover, .lp-i.act { translate: none; } }