/* The conch keeps score -- site/assets/delight.js draws everything this styles.
   ---------------------------------------------------------------------------
   Linked from every page, landing.css pages (always dark) and site.css pages
   (light or dark) alike, so every colour is borrowed: site.css's --surface,
   --text and --accent where they exist, landing.css's ink and bone where they
   do not. One stylesheet, right in all three.

   Everything is position: fixed, so nothing here can move the page. Every
   motion is inside prefers-reduced-motion: no-preference. */

:root {
  --dl-bg: var(--surface, #141210);
  --dl-bg-2: var(--surface-2, #1d1a17);
  --dl-fg: var(--text, #f2efe6);
  --dl-mute: var(--text-3, #9b9487);
  --dl-line: var(--line-strong, rgba(242, 239, 230, .16));
  --dl-acc: var(--accent, #eba14a);
  --dl-acc-ink: var(--accent-ink, #1a1206);
  --dl-serif: var(--display, Fraunces, "Instrument Serif", Georgia, serif);
  --dl-mono: var(--mono, ui-monospace, Menlo, monospace);
  --dl-shadow: 0 2px 4px rgb(50 28 12 / .18), 0 14px 36px -8px rgb(50 28 12 / .35);
}

.dl-root { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 0; height: 0; }
.dl-root button { font: inherit; }

/* --- the conch ------------------------------------------------------------ */
.dl-m {
  position: fixed; right: 14px; bottom: 12px; width: 104px; height: 94px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--dl-fg);
  opacity: 0; transition: opacity .4s ease;
}
.dl-root.is-in .dl-m { opacity: 1; }
.dl-m:focus-visible, .dl-tab:focus-visible, .dl-hide:focus-visible, .dl-panel button:focus-visible, .dl-panel input:focus-visible {
  outline: 2px solid var(--dl-acc); outline-offset: 3px; border-radius: 10px;
}
.dl-fig { width: 104px; height: 88px; display: block; overflow: visible; filter: drop-shadow(0 3px 4px rgb(50 28 12 / .35)); }
.dl-shell { fill: #eba14a; stroke: #7a3d0a; stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dl-ridge { fill: none; stroke: #9a4f0e; stroke-width: 10; stroke-linecap: round; opacity: .45; }
.dl-arm { fill: none; stroke: #c97a2a; stroke-width: 26; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 0; }
.dl-white { fill: #fff8ec; stroke: #7a3d0a; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.dl-pupils circle { fill: #1a1206; }
.dl-pupils .dl-glint { fill: #fff; }
.dl-eyes { transform-box: fill-box; transform-origin: center; }
.dl-cheek { fill: #f08a5d; opacity: .5; }
.dl-smile { fill: none; stroke: #5a2c06; stroke-width: 9; stroke-linecap: round; }
.dl-o { fill: #5a2c06; opacity: 0; }
.dl-rings circle { fill: none; stroke: var(--dl-acc); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: 0;
  transform-box: fill-box; transform-origin: center; }
.dl-bob, .dl-tilt { transform-box: view-box; transform-origin: 50% 70%; }
.dl-m__n {
  position: absolute; right: 2px; bottom: 0; padding: 1px 5px; border-radius: 4px;
  font: 600 10px/1.4 var(--dl-mono); letter-spacing: .04em;
  background: var(--dl-bg); color: var(--dl-acc); border: 1px solid var(--dl-line);
}
.dl-root.is-cheer .dl-smile { opacity: 0; }
.dl-root.is-cheer .dl-o { opacity: 1; }

/* tuck away, and the tab that brings it back */
.dl-hide {
  position: fixed; right: 10px; bottom: 100px; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--dl-line); background: var(--dl-bg); color: var(--dl-mute); line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .2s ease;
}
.dl-root:hover .dl-hide, .dl-hide:focus-visible { opacity: 1; }
.dl-tab {
  position: fixed; right: 0; bottom: 18px; display: none; align-items: center; gap: 6px;
  padding: 6px 10px 6px 8px; border: 1px solid var(--dl-line); border-right: 0; border-radius: 10px 0 0 10px;
  background: var(--dl-bg); color: var(--dl-acc); cursor: pointer; box-shadow: var(--dl-shadow);
  font: 600 11px/1 var(--dl-mono);
}
.dl-tab svg { width: 16px; height: 16px; fill: currentColor; }
.dl-root.is-min .dl-m, .dl-root.is-min .dl-hide { display: none; }
.dl-root.is-min .dl-tab { display: flex; }

/* --- toasts: under the nav, centred, out of the reading line -------------- */
.dl-toasts {
  position: fixed; top: calc(var(--nav-h, 64px) + 14px); left: 50%; transform: translateX(-50%);
  display: grid; gap: 8px; justify-items: center; width: max-content; max-width: calc(100vw - 24px); pointer-events: none;
}
.dl-toast {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 12px;
  background: var(--dl-bg); color: var(--dl-fg); border: 1px solid var(--dl-acc); box-shadow: var(--dl-shadow);
  font: 14px/1.35 var(--dl-serif); transition: opacity .4s ease, transform .4s ease;
}
.dl-toast b { font: 600 10.5px/1 var(--dl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dl-acc); }
.dl-toast.is-out { opacity: 0; transform: translateY(-6px); }
.dl-badge {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  background: var(--dl-acc); color: var(--dl-acc-ink);
}
.dl-badge svg { width: 24px; height: 24px; fill: currentColor; }

/* --- the shelf ------------------------------------------------------------ */
.dl-panel {
  position: fixed; right: 14px; bottom: 116px; width: min(352px, calc(100vw - 28px)); max-height: min(640px, calc(100vh - var(--nav-h, 64px) - 112px));
  overflow: auto; padding: 16px 16px 12px; border-radius: 16px; border: 1px solid var(--dl-line);
  background: var(--dl-bg); color: var(--dl-fg); box-shadow: var(--dl-shadow); font: 14px/1.4 var(--sans, system-ui, sans-serif);
}
.dl-panel[hidden] { display: none; }
.dl-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dl-panel__h { margin: 0; font: 600 18px/1.2 var(--dl-serif); letter-spacing: -.01em; color: var(--dl-fg); }
.dl-x { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--dl-mute); font-size: 20px; line-height: 1; cursor: pointer; }
.dl-x:hover { background: var(--dl-bg-2); color: var(--dl-fg); }
.dl-lv { margin: 10px 0 6px; font: 600 11px/1 var(--dl-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dl-acc); }
.dl-bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.dl-bar span { height: 8px; background: var(--dl-bg-2); border: 1px solid var(--dl-line); }
.dl-bar span.on { background: var(--dl-acc); border-color: var(--dl-acc); }
.dl-fine { margin: 8px 0 0; font-size: 12px; color: var(--dl-mute); }
.dl-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.dl-list li { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.dl-list li:not(.is-got) .dl-badge { background: var(--dl-bg-2); color: var(--dl-mute); border: 1px dashed var(--dl-line); }
.dl-list li.is-got { background: color-mix(in srgb, var(--dl-acc) 9%, transparent); }
.dl-t { display: grid; gap: 1px; min-width: 0; }
.dl-t b { font-weight: 600; font-size: 13.5px; }
.dl-t span { font-size: 12px; color: var(--dl-mute); }
.dl-list li:not(.is-got) .dl-t b { color: var(--dl-mute); }
.dl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dl-panel__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dl-line); }
.dl-snd { display: inline-flex; align-items: center; gap: 4px; margin-right: auto; font-size: 12.5px; color: var(--dl-fg); cursor: pointer; }
.dl-snd input { accent-color: var(--dl-acc); }
.dl-btn { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--dl-line); background: none; color: var(--dl-fg); font-size: 12.5px; cursor: pointer; }
.dl-btn:hover { border-color: var(--dl-acc); }
.dl-btn--reset { color: var(--warn, #e8825a); }

/* --- copy buttons on code blocks ---------------------------------------- */
.docmain pre, .post pre { position: relative; }
.dl-copy {
  position: absolute; top: 8px; right: 8px; padding: 3px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(242, 239, 230, .18); background: rgba(12, 11, 10, .7); color: #e6ebf1;
  font: 600 10.5px/1.4 var(--dl-mono); letter-spacing: .06em; opacity: 0; transition: opacity .15s ease;
}
pre:hover .dl-copy, .dl-copy:focus-visible { opacity: 1; }
.dl-copy:focus-visible { outline: 2px solid var(--dl-acc); outline-offset: 2px; }
@media (hover: none) { .dl-copy { opacity: 1; } }

/* --- the burst ------------------------------------------------------------ */
.dl-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 70; pointer-events: none; image-rendering: pixelated; }

/* --- read ticks: docs sidebar and blog index ------------------------------ */
.docnav a.dl-read::after, #cards .card h2 a.dl-read::after {
  content: "\2713" / "read"; display: inline-block; margin-left: 6px; font: 600 11px/1 var(--dl-mono); color: var(--dl-acc);
}
#cards .card h2 a.dl-read::after { font-size: .55em; vertical-align: middle; padding: 2px 4px; border: 1px solid var(--dl-acc); border-radius: 4px; }

/* --- micro-motion: things answer the pointer ------------------------------ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #cards .card, .pcard, .tile { transition: transform .2s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .2s ease; }
  #cards .card:hover, .pcard:hover, .tile:hover { transform: translateY(-3px); }
  .docmain h2, .post h2, .legal__body h2 { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
  .docmain h2:hover, .post h2:hover, .legal__body h2:hover { transform: translateX(3px); }
  .cmd:active { transform: scale(.985); }
}

/* --- the conch, alive ----------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .dl-bob { animation: dl-bob 4.2s ease-in-out infinite; }
  .dl-eyes { animation: dl-blink 5.6s step-end infinite; }
  .dl-pupils { transition: transform .25s ease-out; }
  .dl-m:hover .dl-tilt { animation: dl-wiggle .6s ease-in-out; }
  .dl-root.is-cheer .dl-tilt { animation: dl-hop .9s cubic-bezier(.3, 1.6, .5, 1); }
  .dl-root.is-cheer .dl-arm { animation: dl-wave .5s ease-in-out 3; }
  .dl-root.is-cheer .dl-rings circle { animation: dl-ring 1.3s cubic-bezier(.2, .6, .3, 1) both; }
  .dl-root.is-cheer .dl-rings circle:nth-child(2) { animation-delay: .2s; }
  .dl-root.is-cheer .dl-rings circle:nth-child(3) { animation-delay: .4s; }
  .dl-toast { animation: dl-pop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
  .dl-tab { animation: dl-pop .3s ease both; }
  @keyframes dl-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-6px) scale(1.015, .985); } }
  @keyframes dl-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
  @keyframes dl-wiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 70% { transform: rotate(5deg); } }
  @keyframes dl-hop { 0% { transform: none; } 35% { transform: translateY(-40px) rotate(-10deg) scale(1.08); } 70% { transform: translateY(0) scale(1.06, .94); } 100% { transform: none; } }
  @keyframes dl-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
  @keyframes dl-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(3.4); } }
  @keyframes dl-pop { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
}


/* --- the conch talks ------------------------------------------------------ */
.dl-say {
  position: fixed; right: 30px; bottom: 112px; max-width: 240px; margin: 0; padding: 10px 13px;
  font: 500 13px/1.4 var(--dl-mono); color: var(--dl-fg); background: var(--dl-bg);
  border: 2px solid var(--dl-acc); border-radius: 10px; box-shadow: 4px 4px 0 var(--dl-acc);
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s .25s;
}
.dl-say::after {
  content: ""; position: absolute; right: 34px; bottom: -9px; width: 14px; height: 14px;
  background: var(--dl-bg); border: 2px solid var(--dl-acc); border-top: 0; border-left: 0; transform: rotate(45deg);
}
.dl-root.is-say .dl-say { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dl-root.is-min .dl-say { display: none; }

/* --- the score in the nav bar --------------------------------------------- */
.dl-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 10px; padding: 7px 10px;
  font: 600 11px/1 var(--dl-mono); letter-spacing: .04em; white-space: nowrap;
  color: var(--dl-acc); background: transparent; border: 1px solid var(--dl-line); border-radius: 6px; cursor: pointer;
}
.dl-chip:hover { border-color: var(--dl-acc); }
.dl-chip:focus-visible { outline: 2px solid var(--dl-acc); outline-offset: 2px; }
.dl-chip svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.dl-chip__bar { display: inline-flex; gap: 2px; }
.dl-chip__bar i { width: 4px; height: 10px; background: var(--dl-line); }
.dl-chip__bar i.on { background: var(--dl-acc); }
@media (max-width: 1100px) { .dl-chip__t { display: none; } }
@media (max-width: 860px) { .dl-chip { display: none; } }

/* --- the shells ----------------------------------------------------------- */
.dl-sea-host { position: relative; }
.dl-sea { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.dl-shell-b {
  position: absolute; width: 34px; height: 34px; padding: 4px; margin: -17px 0 0 -17px;
  border: 0; background: none; cursor: pointer; pointer-events: auto; color: var(--dl-acc);
  transform: scale(var(--z, 1)); transition: opacity .3s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.dl-shell-b svg { width: 100%; height: 100%; display: block; fill: currentColor; filter: drop-shadow(2px 2px 0 rgb(0 0 0 / .25)); }
.dl-shell-b:hover { transform: scale(calc(var(--z, 1) * 1.35)) rotate(-12deg); }
.dl-shell-b:focus-visible { outline: 2px solid var(--dl-acc); outline-offset: 2px; border-radius: 6px; }
.dl-shell-b.is-caught { opacity: 0; transform: scale(2) rotate(30deg); pointer-events: none; }
.dl-stray { position: fixed; bottom: -40px; margin: 0; z-index: 55; }
.dl-plus {
  position: fixed; z-index: 70; pointer-events: none; transform: translate(-50%, -100%);
  font: 700 16px/1 var(--dl-mono); color: var(--dl-acc); text-shadow: 2px 2px 0 rgb(0 0 0 / .35);
}
@media (prefers-reduced-motion: no-preference) {
  .dl-sea .dl-shell-b svg { animation: dl-drift 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .dl-stray svg { animation: dl-sway 2.4s ease-in-out infinite; }
  .dl-stray { animation: dl-rise 14s linear both; }
  .dl-plus { animation: dl-up .9s ease-out both; }
  @keyframes dl-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(6px, -10px) rotate(8deg); } 50% { transform: translate(-4px, -16px) rotate(-6deg); } 75% { transform: translate(-8px, -6px) rotate(4deg); } }
  @keyframes dl-sway { 0%, 100% { transform: translateX(-6px) rotate(-8deg); } 50% { transform: translateX(6px) rotate(8deg); } }
  @keyframes dl-rise { from { transform: translateY(0); } to { transform: translateY(calc(-100vh - 80px)); } }
  @keyframes dl-up { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, -260%); } }
}
@media (max-width: 560px) { .dl-say { bottom: 92px; right: 16px; } .dl-shell-b { width: 28px; height: 28px; } }
@media print { .dl-sea, .dl-stray, .dl-say, .dl-chip { display: none; } }

@media (max-width: 560px) {
  .dl-m { transform: scale(.8); transform-origin: 100% 100%; }
  .dl-panel { right: 12px; bottom: 96px; }
}
@media (max-width: 340px) { .dl-m, .dl-hide { display: none; } .dl-root .dl-tab { display: flex; } }
@media print { .dl-root, .dl-fx { display: none; } }