/* Daylined tokens. Neon on black. Imported by every surface. */
:root {
  color-scheme: dark;
  --bg: #000000;
  --surface-1: #060708;
  --surface-2: #0C0D10;
  --hairline: rgba(255, 255, 255, .08);
  --hairline-strong: rgba(255, 255, 255, .16);
  --text-1: #FFFFFF;
  --text-2: #B8B8B8;
  --text-3: #808080;
  --neon-violet: #B26BFF;
  --neon-green: #2BFF88;
  --neon-blue: #3DA9FC;
  --neon-pink: #FF4FD8;
  --neon-red: #FF4D6D;
  --neon-white: #EDEDED;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --glow: 0 0 0 1px var(--c);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-glide: var(--ease-out);
  --ease-in: var(--ease-out);
  --ease-in-out: var(--ease-out);
  --d-press: 0ms;
  --d-hover-in: 120ms;
  --d-hover-out: 160ms;
  --d-indicator: 160ms;
  --d-view-out: 120ms;
  --d-view-in: 160ms;
  --d-popover: 140ms;
  --d-drawer: 160ms;
  --d-fade: 120ms;
  --move: 1;
  --dur-hover-in: var(--d-hover-in);
  --dur-hover-out: var(--d-hover-out);
  --dur-switch: var(--d-indicator);
  --dur-drawer: var(--d-drawer);
  --ease: var(--ease-out);
  --t-fast: var(--d-hover-in);
  --t: var(--d-indicator);

  /* Names the older stylesheets still read. */
  --page: var(--bg);
  --panel: var(--surface-1);
  --elev: var(--surface-2);
  --elev2: #14161c;
  --line: var(--hairline-strong);
  --line2: var(--hairline-strong);
  --text: var(--text-1);
  --text2: var(--text-2);
  --muted: var(--text-2);
  --dim: var(--text-3);
  --silver: var(--neon-white);
  --accent: var(--neon-white);
  --good: var(--neon-white);
  --bad: var(--neon-red);
  --r: var(--radius-lg);
  --r-sm: var(--radius);
}

.hoverable { position: relative; }
.hoverable::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--glow);
  opacity: 0;
  transition: opacity var(--d-hover-out) var(--ease-out);
}
.hoverable:hover::before, .hoverable:focus-visible::before { opacity: 1; transition-duration: var(--d-hover-in); }

.lit { position: relative; }
.lit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  transition: opacity var(--d-hover-out) var(--ease-out);
}
.lit:hover::after, .lit:focus-visible::after { opacity: .1; transition-duration: var(--d-hover-in); }
button, .btn, .lit, .ico, .pill, .icon-btn { transition: transform 120ms var(--ease-out), background-color var(--d-hover-in) var(--ease-out), color var(--d-hover-in) var(--ease-out), border-color var(--d-hover-in) var(--ease-out), opacity var(--d-hover-in) var(--ease-out); }
.lit:active, button:active, .btn:active, .ico:active, .pill:active, .icon-btn:active { transform: scale(calc(1 - .015 * var(--move))); transition-duration: var(--d-press); }

.title { overflow-wrap: normal; hyphens: none; word-break: normal; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 0.35em; overflow: hidden; }
.title .w { flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pop-tip {
  position: fixed; z-index: 70; pointer-events: none;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 6px 8px; font: 500 12px/1.3 var(--sans); color: var(--text-1);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(calc(4px * var(--move)));
  transition: opacity var(--d-popover) var(--ease-out), transform var(--d-popover) var(--ease-out);
}
.pop-tip.on { opacity: 1; transform: none; }
.pop-tip .x { width: 18px; height: 18px; font-size: 14px; pointer-events: auto; }
.pop-tip kbd, .keycap {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  border: 1px solid var(--hairline-strong); box-shadow: 0 1px 0 rgba(255,255,255,.08);
  font: 600 11px/20px var(--sans); font-variant-numeric: tabular-nums; color: var(--text-1);
  display: inline-grid; place-items: center;
}
.keys-group { display: grid; gap: 8px; margin-top: 14px; }
.keys-group h3 { margin: 0; font: 600 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #A0A0A0; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --move: 0;
    --d-press: 0ms; --d-hover-in: 0ms; --d-hover-out: 0ms;
    --d-indicator: 0ms; --d-view-out: 0ms; --d-view-in: 0ms;
    --d-popover: 0ms; --d-drawer: 0ms; --d-fade: 0ms;
  }
  .lit::after { opacity: 0; }
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
  .ev, .btn, .pop, .card { border-color: CanvasText; }
  .toast, .pop { background: Canvas; color: CanvasText; }
}