/* ========================================================================
   Bilbs AI - shared stylesheet
   Used across every page; keep this in sync across the site.
   ======================================================================== */

html { scroll-behavior: smooth; }
html, body {
  background: #000;
  color: #FFFFFF;
  /* `clip` is stronger than `hidden`: it establishes no new scroll container
     so mobile Safari can't still resolve a horizontal scrollbar when a fixed
     child (e.g. the intro curtain's glow orbs) pokes past the viewport. */
  overflow-x: clip;
}
/* Belt-and-braces fallback for older engines that don't yet support clip. */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
body { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
* { min-width: 0; }
img, video, svg { max-width: 100%; }

/* Desaturate any background video to pure grayscale so the theme stays monochrome */
video { filter: grayscale(100%) contrast(1.05); }

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Generated procedural grain texture so we don't depend on an external /texture.png */
.texture-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.18;
  background-size: cover;
  background-repeat: no-repeat;
}

video {
  display: block;
}

/* ====== Grid motifs ====== */
.grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}
.grid-bg-fine {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.grid-fade-mask {
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 85%);
}
.grid-drift {
  animation: gridDrift 40s linear infinite;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 56px, 56px 56px; }
}

/* ====== Scan line for section dividers ====== */
.scanline {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: scan 6s linear infinite;
}
@keyframes scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ====== Marquee ====== */
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}
.marquee-slow { animation-duration: 60s; }
.marquee-reverse { animation-direction: reverse; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ====== Scroll reveal ====== */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.5s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* ====== Blinking cursor ====== */
.blink::after {
  content: '_';
  display: inline-block;
  margin-left: 2px;
  animation: blink 1.05s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

/* ====== Pulse dot ====== */
.pulse-dot {
  position: relative;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.5;
  animation: pulseDot 2s ease-out infinite;
}
@keyframes pulseDot {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ====== Border sweep on hover for pillar cards ====== */
.sweep-card { position: relative; overflow: hidden; }
.sweep-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(from var(--ang, 0deg), transparent 0 70%, rgba(255,255,255,0.6) 85%, transparent 100%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}
.sweep-card:hover::after { opacity: 1; animation: sweep 2.5s linear infinite; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes sweep { to { --ang: 360deg; } }

/* ====== Float / drift (for decorative orbs) ====== */
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-12px, -18px); }
}
.float { animation: float 9s ease-in-out infinite; }

/* ====== Tick (numeric counters) ====== */
.tabnum { font-variant-numeric: tabular-nums; }

/* ====== Modals - shared (contact / preorder / whitepaper) ======
   The three form modals share the same visual language: dark-glass card,
   monospace fields, uppercase micro-labels. Keep the selectors listed
   explicitly so new modals opt in deliberately. */
#contact-modal,
#preorder-modal,
#whitepaper-modal {
  -webkit-tap-highlight-color: transparent;
}
#contact-modal.is-open,
#preorder-modal.is-open,
#whitepaper-modal.is-open {
  animation: modalFadeIn 180ms ease-out both;
}
#contact-modal .modal-card,
#preorder-modal .modal-card,
#whitepaper-modal .modal-card {
  animation: modalCardIn 240ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Form fields - identical treatment across the three modals so the
   Reserve form no longer falls back to unstyled browser defaults. */
#contact-modal input,
#contact-modal textarea,
#contact-modal select,
#preorder-modal input,
#preorder-modal textarea,
#preorder-modal select,
#whitepaper-modal input,
#whitepaper-modal textarea,
#whitepaper-modal select {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.3;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
#contact-modal input::placeholder,
#contact-modal textarea::placeholder,
#preorder-modal input::placeholder,
#preorder-modal textarea::placeholder,
#whitepaper-modal input::placeholder,
#whitepaper-modal textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
#contact-modal input:hover,
#contact-modal textarea:hover,
#contact-modal select:hover,
#preorder-modal input:hover,
#preorder-modal textarea:hover,
#preorder-modal select:hover,
#whitepaper-modal input:hover,
#whitepaper-modal textarea:hover,
#whitepaper-modal select:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.5);
}
#contact-modal input:focus,
#contact-modal textarea:focus,
#contact-modal select:focus,
#preorder-modal input:focus,
#preorder-modal textarea:focus,
#preorder-modal select:focus,
#whitepaper-modal input:focus,
#whitepaper-modal textarea:focus,
#whitepaper-modal select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
#contact-modal textarea,
#preorder-modal textarea,
#whitepaper-modal textarea {
  resize: vertical;
  min-height: 96px;
}

/* Custom chevron for native <select> so it stops looking like a
   foreign 1998 Windows widget on a dark card. */
#contact-modal select,
#preorder-modal select,
#whitepaper-modal select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='white' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
#contact-modal select option,
#preorder-modal select option,
#whitepaper-modal select option {
  background: #0a0a0a;
  color: #fff;
}

#contact-modal label,
#preorder-modal label,
#whitepaper-modal label {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 6px;
}

#contact-modal .honeypot,
#preorder-modal .honeypot,
#whitepaper-modal .honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #contact-modal.is-open,
  #preorder-modal.is-open,
  #whitepaper-modal.is-open,
  #contact-modal .modal-card,
  #preorder-modal .modal-card,
  #whitepaper-modal .modal-card {
    animation: none !important;
  }
}

body.modal-open {
  overflow: hidden;
}

/* ======================================================================
   Hero section - immediate, no curtain. Subtle fade-in only.
   ====================================================================== */

.hero-fade-in {
  animation: heroFadeIn 480ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slow bounce for the scroll cue chevron */
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.animate-bounce-slow { animation: bounceSlow 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-fade-in { animation: none; }
  .animate-bounce-slow { animation: none; }
}

/* ======================================================================
   SCENE SYSTEM
   The home page is broken into a small number of "scenes," each with its
   own background tone. Adjacent scenes fade into each other so the eye
   experiences the page as a series of contained moments rather than one
   long dark wall. Inspired by Apple product pages and SpaceX longform.
   ====================================================================== */

.scene {
  position: relative;
  isolation: isolate;
}

.scene-dark  { background: #000; color: #ffffff; }
.scene-light { background: #f7f5f0; color: #0a0a0a; }

/* Soft gradient mortar between scenes. The class goes on the OUTGOING
   scene; the gradient fades it into the colour of the next scene. */
.scene-fade-to-light::after,
.scene-fade-to-dark::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 160px;
  pointer-events: none;
  z-index: 3;
}
.scene-fade-to-light::after { background: linear-gradient(to bottom, transparent, #f7f5f0); }
.scene-fade-to-dark::after  { background: linear-gradient(to bottom, transparent, #000); }

/* Inside a light scene, invert every dark-mode helper the home page
   uses. Tailwind generates classes like text-cream/70 with literal
   slashes that have to be escaped here. */
.scene-light .text-cream             { color: #0a0a0a; }
.scene-light .text-cream\/90         { color: rgba(10,10,10,0.92); }
.scene-light .text-cream\/85         { color: rgba(10,10,10,0.85); }
.scene-light .text-cream\/80         { color: rgba(10,10,10,0.82); }
.scene-light .text-cream\/75         { color: rgba(10,10,10,0.78); }
.scene-light .text-cream\/70         { color: rgba(10,10,10,0.72); }
.scene-light .text-cream\/65         { color: rgba(10,10,10,0.68); }
.scene-light .text-cream\/60         { color: rgba(10,10,10,0.62); }
.scene-light .text-cream\/55         { color: rgba(10,10,10,0.55); }
.scene-light .text-cream\/50         { color: rgba(10,10,10,0.48); }
.scene-light .text-cream\/45         { color: rgba(10,10,10,0.42); }
.scene-light .text-cream\/40         { color: rgba(10,10,10,0.38); }
.scene-light .text-cream\/35         { color: rgba(10,10,10,0.35); }
.scene-light .text-cream\/30         { color: rgba(10,10,10,0.30); }
.scene-light .text-cream\/25         { color: rgba(10,10,10,0.26); }
.scene-light .text-cream\/20         { color: rgba(10,10,10,0.22); }
.scene-light .text-neon              { color: #0a0a0a; }

.scene-light .border-white\/5        { border-color: rgba(10,10,10,0.06); }
.scene-light .border-white\/10       { border-color: rgba(10,10,10,0.10); }
.scene-light .border-white\/15       { border-color: rgba(10,10,10,0.14); }
.scene-light .border-white\/20       { border-color: rgba(10,10,10,0.20); }
.scene-light .border-white\/30       { border-color: rgba(10,10,10,0.28); }
.scene-light .border-white\/40       { border-color: rgba(10,10,10,0.35); }

.scene-light .bg-white\/5            { background-color: rgba(10,10,10,0.035); }
.scene-light .bg-white\/10           { background-color: rgba(10,10,10,0.06); }
.scene-light .bg-white\/\[0\.03\]    { background-color: rgba(10,10,10,0.03); }
.scene-light .bg-white\/\[0\.04\]    { background-color: rgba(10,10,10,0.04); }
.scene-light .bg-white\/\[0\.05\]    { background-color: rgba(10,10,10,0.05); }

.scene-light .liquid-glass {
  background: rgba(10,10,10,0.025);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(10,10,10,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 32px -16px rgba(10,10,10,0.10);
}
.scene-light .liquid-glass::before { display: none; }

.scene-light .grid-bg,
.scene-light .grid-bg-fine {
  background-image:
    linear-gradient(rgba(10,10,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.05) 1px, transparent 1px);
}

/* The global grain texture uses mix-blend-overlay, which on light scenes
   reads slightly like dirt on cream paper. Light scenes mute it locally. */
.scene-light + #texture,
.scene-light #texture {
  /* No-op selector by structure — kept here as a marker for future tuning. */
}

/* Buttons: the home page has white-bg-on-black-text and the inverse.
   In a light scene those need to flip. */
.scene-light .bg-white {
  background-color: #0a0a0a;
  color: #ffffff;
}
.scene-light .bg-white:hover { background-color: #1f1f1f; }
.scene-light .text-black { color: #ffffff; }
.scene-light .hover\:bg-cream:hover { background-color: #1f1f1f; }

/* The hero CTA shadow looks like a smudge on light. Drop it. */
.scene-light .shadow-\[0_0_60px_-10px_rgba\(255\,255\,255\,0\.35\)\] { box-shadow: none; }
.scene-light .shadow-\[0_0_60px_-10px_rgba\(255\,255\,255\,0\.25\)\] { box-shadow: none; }
.scene-light .shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.25\)\,0_40px_80px_-30px_rgba\(255\,255\,255\,0\.15\)\] {
  box-shadow: 0 0 0 1px rgba(10,10,10,0.06), 0 30px 60px -28px rgba(10,10,10,0.18);
}
.scene-light .shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.25\)\,0_24px_48px_-24px_rgba\(255\,255\,255\,0\.20\)\] {
  box-shadow: 0 0 0 1px rgba(10,10,10,0.06), 0 20px 40px -24px rgba(10,10,10,0.18);
}

/* Inside an inverted (formerly bg-white, now bg-[#0a0a0a]) card, original
   text-black/X classes were styling text against white -> they need to flip
   to light against the now-dark card. */
.scene-light .text-black           { color: #ffffff; }
.scene-light .text-black\/90       { color: rgba(255,255,255,0.92); }
.scene-light .text-black\/80       { color: rgba(255,255,255,0.82); }
.scene-light .text-black\/75       { color: rgba(255,255,255,0.78); }
.scene-light .text-black\/70       { color: rgba(255,255,255,0.72); }
.scene-light .text-black\/65       { color: rgba(255,255,255,0.68); }
.scene-light .text-black\/60       { color: rgba(255,255,255,0.62); }
.scene-light .text-black\/55       { color: rgba(255,255,255,0.55); }
.scene-light .text-black\/50       { color: rgba(255,255,255,0.50); }
.scene-light .text-black\/45       { color: rgba(255,255,255,0.46); }
.scene-light .text-black\/40       { color: rgba(255,255,255,0.42); }
.scene-light .text-black\/35       { color: rgba(255,255,255,0.36); }
.scene-light .text-black\/30       { color: rgba(255,255,255,0.32); }
.scene-light .text-black\/25       { color: rgba(255,255,255,0.26); }
.scene-light .text-black\/20       { color: rgba(255,255,255,0.22); }
.scene-light .text-black\/15       { color: rgba(255,255,255,0.16); }
.scene-light .text-black\/10       { color: rgba(255,255,255,0.12); }

/* border-black/X were used inside white cards too; flip them. */
.scene-light .border-black\/10     { border-color: rgba(255,255,255,0.10); }
.scene-light .border-black\/15     { border-color: rgba(255,255,255,0.14); }
.scene-light .border-black\/20     { border-color: rgba(255,255,255,0.20); }

/* Hover variants for the rare interactive elements */
.scene-light .hover\:bg-white\/5:hover  { background-color: rgba(10,10,10,0.06); }
.scene-light .hover\:bg-white\/10:hover { background-color: rgba(10,10,10,0.08); }
.scene-light .hover\:bg-cream:hover     { background-color: #1f1f1f; }

/* bg-neon resolves to white in dark scenes (the project uses #FFFFFF as
   the accent). In light scenes we flip to ink so accent CTAs stay
   visible. */
.scene-light .bg-neon {
  background-color: #0a0a0a;
  color: #ffffff;
}
.scene-light .bg-neon\/10 { background-color: rgba(10,10,10,0.08); }
.scene-light .bg-neon\/20 { background-color: rgba(10,10,10,0.14); }
.scene-light .border-neon { border-color: #0a0a0a; }
.scene-light .border-neon\/20 { border-color: rgba(10,10,10,0.20); }
.scene-light .border-neon\/30 { border-color: rgba(10,10,10,0.28); }
.scene-light .border-neon\/40 { border-color: rgba(10,10,10,0.40); }
.scene-light .hover\:bg-white:hover { background-color: #1f1f1f; color: #fff; }

/* The auto-playing accent ring uses bg-white inside a chip — keep it
   white only when the chip itself is on a dark background (the chip is
   liquid-glass inside the hero, which is dark; this case is fine).
   But inside a light scene where bg-white inverts, the chip&apos;s inner
   white dot would disappear. Force the dot to use a small contrast
   adjustment. */
.scene-light .animate-ping             { background-color: rgba(10,10,10,0.55); }

/* Headlines inside light scenes should use ink. */
.scene-light h1,
.scene-light h2,
.scene-light h3,
.scene-light h4,
.scene-light h5,
.scene-light h6 { color: inherit; }

/* Arbitrary-value Tailwind classes used as hard-coded hex on buttons. */
.scene-light .text-\[\#000\] { color: #ffffff; }
.scene-light .text-\[\#fff\],
.scene-light .text-\[\#FFF\] { color: #0a0a0a; }
.scene-light .bg-\[\#000\] { background-color: #f5f3ee; }
.scene-light .bg-\[\#0a0a0a\] { background-color: #f5f3ee; }

/* Decorative blobs disappear on light (they're white-on-black auras). */
.scene-light .float                                       { display: none; }
.scene-light [class*="bg-[radial-gradient"]               { display: none; }

/* ======================================================================
   FOCUS BLOCK
   Single-column reading container used to constrain a section's content
   when we want the reader's eye on ONE thing. ~720 chars wide on tablet,
   horizontally centred, generous lateral padding on mobile.
   ====================================================================== */
.focus-block {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 32px);
}
.focus-block--wide { max-width: 980px; }
.focus-block--narrow { max-width: 600px; }

/* Default home-page section padding. Generous on every breakpoint.
   On mobile (<640px) we tighten slightly so a single scene doesn't
   occupy two phone screens of blank padding. */
.scene-pad {
  padding-top:    clamp(80px, 14vw, 200px);
  padding-bottom: clamp(80px, 14vw, 200px);
}
.scene-pad--lg {
  padding-top:    clamp(100px, 18vw, 260px);
  padding-bottom: clamp(100px, 18vw, 260px);
}

/* ======================================================================
   MOBILE GUARDRAILS
   ====================================================================== */

/* On phones, the cross-scene fade gradient is shorter so it doesn't
   eat half a viewport. */
@media (max-width: 640px) {
  .scene-fade-to-light::after,
  .scene-fade-to-dark::after { height: 96px; }
}

/* Stop any fixed/absolute decoration from bleeding past the viewport
   edge on mobile (the hero blur orbs were rare offenders). */
@media (max-width: 480px) {
  .scene { contain: paint; }
}

/* ====== Long-form prose (legal pages, about, careers) ====== */
.prose-bilbs {
  max-width: 780px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.75;
}
.prose-bilbs h2 {
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(22px, 3.5vw, 32px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 2.8rem 0 1rem;
}
.prose-bilbs h3 {
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(16px, 2vw, 20px);
  letter-spacing: 0.02em;
  margin: 2rem 0 0.6rem;
}
.prose-bilbs p { margin: 0 0 1rem; }
.prose-bilbs ul, .prose-bilbs ol { margin: 0 0 1rem; padding-left: 1.1rem; }
.prose-bilbs li { margin: 0.35rem 0; }
.prose-bilbs strong { color: #fff; font-weight: 600; }
.prose-bilbs a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; }
.prose-bilbs a:hover { text-decoration-color: rgba(255,255,255,0.8); }
.prose-bilbs hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 2.4rem 0; }
.prose-bilbs code {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.88em;
}