@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@200;300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

/* Palette is taken from the Lynx logo: electric blue #0C6CFC / #0060FC / #0054F0 and navy #0C183C, on white. */
:root{
  /* Lynx brand (fixed in both themes) */
  --lx-blue:#0B6BFF;
  --lx-blue-2:#3D8BFF;
  --lx-blue-deep:#0054F0;
  --lx-blue-glow:rgba(11,107,255,.45);
  --lx-navy:#0C183C;
  --lx-navy-2:#14265A;
  --lx-navy-3:#1E3A8A;
  --lx-green:#17A36B;
  --lx-amber:#E39A1B;
  --lx-red:#E5484D;

  /* Light theme */
  --lx-ink:#0C183C;
  --lx-ink-2:#46557A;
  --lx-ink-3:#8592B0;
  --lx-line:rgba(12,24,60,.08);
  --lx-line-2:rgba(12,24,60,.14);
  --lx-bg:#EEF3FE;              /* tinted well inside a card */
  --lx-bg-2:#E6EEFD;
  --lx-field:#E8EFFC;
  --lx-card:rgba(255,255,255,.68);   /* content material: frosted, no refraction */
  --lx-card-rim:rgba(255,255,255,.95);
  --lx-surface:#FFFFFF;          /* solid surfaces: success card, OTP boxes */
  --lx-surface-2:rgba(255,255,255,.86);
  --lx-chip:rgba(255,255,255,.72);
  --lx-primary:#0C183C;
  --lx-on-primary:#FFFFFF;
  --lx-accent:#0B6BFF;           /* active tab, links */
  --lx-plain:#F4F7FE;
  --lx-glow:rgba(11,107,255,.10);
  --lx-scrim:rgba(222,232,252,.5);
  --lx-mark-ring:transparent;
  --lx-visa:#1A1F71;
  --lx-stripe-a:#8FB2FF;
  --lx-stripe-b:#CFDFFF;
  --lx-bar-a:rgba(255,255,255,.95);
  --lx-bar-b:rgba(255,255,255,.35);
  --lx-success-bg:radial-gradient(circle,#E3F7EE,#FFFFFF);
  --lx-qr-ring:rgba(255,255,255,.92);
  --lx-fab:radial-gradient(120% 120% at 30% 20%, #2B4A86 0%, #13265A 55%, #0C183C 100%);
  --lx-welcome-a:#D6E3FF; --lx-welcome-b:#F5F8FC; --lx-story-a:#D3E1FF; --lx-story-b:#F5F8FC;

  /* The fade: cool white into the logo blue */
  --lx-fade:linear-gradient(180deg,#F4F7FE 0%,#EEF3FD 36%,#CDDCFC 62%,#6C9BFF 84%,#0B5BEF 100%);
  --lx-fade-soft:linear-gradient(180deg,#F4F7FE 0%,#EFF4FE 55%,#D5E3FD 80%,#9BBBFF 100%);

  /* Liquid glass */
  --lg-fill:rgba(255,255,255,.26);
  --lg-fill-strong:rgba(255,255,255,.58);
  --lg-nav:rgba(255,255,255,.46);
  --lg-sheet:rgba(255,255,255,.80);
  --lg-drop:rgba(11,107,255,.12);
  --lg-rim-hi:rgba(255,255,255,1);
  --lg-rim-mid:rgba(255,255,255,.75);
  --lg-rim-lo:rgba(255,255,255,.18);
  --lg-spec:rgba(255,255,255,.55);
  --lg-inner:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 10px 18px -14px rgba(255,255,255,.95),inset 0 -12px 20px -16px rgba(11,107,255,.22);
  --lg-shadow:0 10px 26px -14px rgba(12,24,60,.38);

  --lx-sans:'Hanken Grotesk',ui-sans-serif,sans-serif;
  --lx-serif:'Instrument Serif',Georgia,serif;
  color-scheme:light;
}

html[data-theme="dark"]{
  --lx-green:#3CCB8B;
  --lx-red:#FF6268;
  --lx-ink:#EEF3FF;
  --lx-ink-2:#A9B6D6;
  --lx-ink-3:#7182AA;
  --lx-line:rgba(170,195,255,.10);
  --lx-line-2:rgba(170,195,255,.18);
  --lx-bg:rgba(255,255,255,.06);
  --lx-bg-2:rgba(255,255,255,.04);
  --lx-field:rgba(255,255,255,.08);
  --lx-card:rgba(20,34,76,.55);
  --lx-card-rim:rgba(160,190,255,.14);
  --lx-surface:#101B3D;
  --lx-surface-2:rgba(34,50,98,.72);
  --lx-chip:rgba(255,255,255,.08);
  --lx-primary:#0B6BFF;
  --lx-on-primary:#FFFFFF;
  --lx-accent:#5C9DFF;
  --lx-plain:#050A1A;
  --lx-glow:rgba(11,107,255,.24);
  --lx-scrim:rgba(2,6,18,.55);
  --lx-mark-ring:rgba(255,255,255,.16);
  --lx-visa:#FFFFFF;
  --lx-stripe-a:#2F6CF0;
  --lx-stripe-b:#173679;
  --lx-bar-a:rgba(255,255,255,.18);
  --lx-bar-b:rgba(255,255,255,.04);
  --lx-success-bg:radial-gradient(circle,rgba(60,203,139,.24),rgba(60,203,139,0));
  --lx-qr-ring:rgba(255,255,255,.10);
  --lx-fab:radial-gradient(120% 120% at 30% 20%, #5AA0FF 0%, #0B6BFF 45%, #0040C8 100%);
  --lx-welcome-a:#0F2A80; --lx-welcome-b:#070B16; --lx-story-a:#102A7A; --lx-story-b:#070B16;

  --lx-fade:linear-gradient(180deg,#050A1A 0%,#07102A 38%,#0A1D4E 62%,#0A3CA6 84%,#0B5BEF 100%);
  --lx-fade-soft:linear-gradient(180deg,#050A1A 0%,#07102A 55%,#0A1C4F 80%,#103896 100%);

  --lg-fill:rgba(255,255,255,.07);
  --lg-fill-strong:rgba(40,58,110,.55);
  --lg-nav:rgba(18,30,66,.48);
  --lg-sheet:rgba(14,24,56,.82);
  --lg-drop:rgba(255,255,255,.10);
  --lg-rim-hi:rgba(255,255,255,.55);
  --lg-rim-mid:rgba(255,255,255,.28);
  --lg-rim-lo:rgba(255,255,255,.05);
  --lg-spec:rgba(255,255,255,.14);
  --lg-inner:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 10px 18px -14px rgba(255,255,255,.22),inset 0 -12px 20px -16px rgba(61,139,255,.35);
  --lg-shadow:0 12px 30px -12px rgba(0,0,0,.7);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--lx-sans);color:var(--lx-ink);-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input{font-family:inherit;color:var(--lx-ink)}
input::placeholder{color:var(--lx-ink-3)}
.tnum{font-variant-numeric:tabular-nums}

/* Logo variants: render both, show the one for the theme */
.lx-on-dark{display:none !important}
html[data-theme="dark"] .lx-on-light{display:none !important}
html[data-theme="dark"] .lx-on-dark{display:block !important}

/* ── Liquid glass ─────────────────────────────────────────────
   .lg       the material: blur + saturation, a lit rim, an inner glow and a specular
             highlight that follows the pointer (--mx/--my, set in ui.jsx)
   .lg-pill / .lg-round / .lg-panel  add edge refraction (SVG lens maps injected by ui.jsx).
             The plain declaration comes first so a browser without url() support keeps the blur.
   .lg-press springs up when pressed, the way iOS glass controls do
   .lg-blue  sits on the blue fade in both themes (white text) */
.lg{position:relative;isolation:isolate;background:var(--lg-fill);
  -webkit-backdrop-filter:blur(var(--lg-blur,12px)) saturate(var(--lg-sat,180%));
  backdrop-filter:blur(var(--lg-blur,12px)) saturate(var(--lg-sat,180%));
  box-shadow:var(--lg-inner),var(--lg-shadow)}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(var(--lg-angle,140deg),var(--lg-rim-hi) 0%,var(--lg-rim-lo) 28%,transparent 50%,var(--lg-rim-lo) 70%,var(--lg-rim-mid) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(90% 80% at var(--mx,28%) var(--my,0%),var(--lg-spec) 0%,transparent 60%);
  transition:opacity .3s}
.lg-pill{backdrop-filter:url(#lg-pill) blur(var(--lg-blur,12px)) saturate(var(--lg-sat,180%))}
.lg-round{backdrop-filter:url(#lg-round) blur(var(--lg-blur,12px)) saturate(var(--lg-sat,180%))}
.lg-panel{backdrop-filter:url(#lg-panel) blur(var(--lg-blur,22px)) saturate(var(--lg-sat,180%))}
.lg-strong{background:var(--lg-fill-strong)}
.lg-blue{background:rgba(255,255,255,.16);color:#fff;
  --lg-rim-hi:rgba(255,255,255,.95);--lg-rim-mid:rgba(255,255,255,.55);--lg-rim-lo:rgba(255,255,255,.12);--lg-spec:rgba(255,255,255,.35);
  --lg-inner:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.15),inset 0 10px 18px -14px rgba(255,255,255,.7);
  --lg-shadow:0 10px 24px -14px rgba(5,20,70,.55)}
.lg-press{transition:transform .5s cubic-bezier(.3,1.6,.45,1),background .3s,color .3s}
.lg-press:active{transform:scale(1.07);transition-duration:.18s}
.lg-press:active::after{background:radial-gradient(120% 120% at var(--mx,50%) var(--my,30%),var(--lg-spec) 0%,transparent 75%)}

/* Content material: frosted only */
.lx-card{background:var(--lx-card);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:inset 0 0 0 1px var(--lx-card-rim),0 1px 0 rgba(12,24,60,.03)}

@media (prefers-reduced-motion:reduce){
  .lg-press,.lg-press:active{transform:none;transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}