:root {
  --bg: #090c29;
  --bar: #0a0d2d;
  --glass: rgba(9, 12, 38, 0.8);
  --ink: #e6ebff;
  --dim: #7b84b3;
  --key: #8fd0ff;
  --cmd: #5fa2ff;
  --edge: #3f86f0;
  --nix-a: #8fe6ff;
  --nix-b: #6677a8;
  --ws-on: #2b3bb0;
  --warn: #f0d56a;
  --ok: #7fe0a8;
  --mute: #ff8f7e;
  --font: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 60% at 72% 28%, rgba(34, 64, 170, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 50% at 18% 85%, rgba(24, 48, 140, 0.22), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cdefs%3E%3Cg id='l'%3E%3Cpath d='M0 0C30-46 112-46 150 0 112 46 30 46 0 0Z'/%3E%3Cpath d='M0 0H150' fill='none' stroke-width='1.5'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%231a3a99' fill-opacity='.22' stroke='%233a66d8' stroke-opacity='.16'%3E%3Cuse href='%23l' transform='translate(30 120) rotate(-24)'/%3E%3Cuse href='%23l' transform='translate(230 60) rotate(38)'/%3E%3Cuse href='%23l' transform='translate(420 190) rotate(-70)'/%3E%3Cuse href='%23l' transform='translate(300 330) rotate(15)'/%3E%3Cuse href='%23l' transform='translate(70 400) rotate(62)'/%3E%3Cuse href='%23l' transform='translate(470 470) rotate(-35)'/%3E%3Cuse href='%23l' transform='translate(210 520) rotate(-95)'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--ink);
  font: 13px/1.5 var(--font);
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--bar);
  z-index: 10;
}
a { color: var(--key); text-underline-offset: 3px; }
a:hover { color: var(--nix-a); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--nix-a); outline-offset: 2px; }

/* swaybar */
.bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 9;
  background: var(--bar);
  border-bottom: 1px solid rgba(63, 134, 240, 0.18);
}
.bar-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 26px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  font-size: 11px;
}
.ws { display: flex; gap: 2px; }
.ws button {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.ws button:hover { color: var(--ink); }
.ws button[aria-selected="true"] { background: var(--ws-on); color: #fff; }
.clock { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.clock svg { vertical-align: -2px; margin-left: 4px; color: var(--mute); }
.tray { display: flex; justify-content: flex-end; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); }
.tray > span { display: inline-flex; align-items: center; gap: 4px; }
.tray svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tray .mute { background: var(--mute); color: #3a0f0a; border-radius: 4px; padding: 1px 6px; }

/* kitty window */
.stage { flex: 1; display: flex; }
.stage-in {
  flex: 1;
  display: flex;
  min-width: 0;
  padding-block: 12px 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.kitty {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 20px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(63, 134, 240, 0.18), 0 18px 60px rgba(0, 0, 0, 0.5);
}
.screen { animation: appear 0.18s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.prompt { margin: 0 0 12px; color: #a9bdff; }
.prompt b { font-weight: 700; margin-right: 1ch; }
.prompt .cmd { color: var(--cmd); }
.prompt.idle { margin: 18px 0 0; }
.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: text-bottom;
  background: var(--ink);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* fastfetch */
.fetch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.logo { width: 224px; max-width: 100%; aspect-ratio: 1; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.info { margin: 0; min-width: 0; }
.who { color: var(--dim); margin-bottom: 1px; }
.info div { display: flex; gap: 1ch; }
.info dt { color: var(--key); font-weight: 700; flex: none; margin: 0; }
.info dt::after { content: ":"; }
.info dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.info .gap { height: 1.5em; }
.warn { color: var(--warn); }
.about { margin: 0; max-width: 72ch; color: var(--ink); }

/* project list */
.ls { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ls li {
  display: grid;
  grid-template-columns: 17ch minmax(0, 1fr) 6ch;
  gap: 2px 2ch;
  align-items: baseline;
}
.ls .n { color: var(--key); font-weight: 700; overflow-wrap: anywhere; }
.ls .d { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.ls .d small { display: block; color: var(--dim); font-size: 12px; }
.st { text-align: right; }
.st.ok { color: var(--ok); }
.st.wip { color: var(--warn); }
.st.live { color: var(--nix-a); }
.st.dead { color: var(--mute); }

/* toml */
.toml { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.toml .t { color: #fff; font-weight: 700; }
.toml .k { color: var(--key); }
.toml .s { color: var(--nix-a); }
.toml .b { color: var(--warn); }
.toml .c { color: var(--dim); }

@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.55; }
  .fetch { grid-template-columns: minmax(0, 1fr); }
  .logo { width: 180px; }
  .bar-in { grid-template-columns: auto 1fr auto; gap: 8px; height: 38px; font-size: 14px; }
  .ws button { min-width: 30px; height: 30px; }
  .clock { text-align: center; }
  .tray svg { width: 15px; height: 15px; }
  .clock .d { display: none; }
  .tray .opt { display: none; }
  .kitty { padding: 14px 14px 18px; }
  .ls .d small { font-size: 13.5px; }
  .toml { font-size: 14px; }
  .ls li { grid-template-columns: minmax(0, 1fr) auto; }
  .ls .d { grid-column: 1 / -1; grid-row: 2; }
  .ls .st { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  .cursor { animation: none; }
}