@font-face {
  font-family: "Omarchy Font";
  src: url("omarchy-font.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  --bg: #0a0a16;
  --night: #1a1b26;
  --fg: #e6e8ff;
  --muted: #8f93b8;
  --line: rgba(122, 162, 247, .22);
  --pink: #ff5fb0;
  --blue: #7aa2f7;
  --cyan: #7dcfff;
  --violet: #bb9af7;
  --green: #9ece6a;
  --bar: 30px;         /* waybar */
  --gap: 10px;         /* hyprland gaps_out */
  --border: 2px;       /* hyprland border_size */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --face: "Omarchy Font", var(--mono);
  --cmp: clamp(40px, 8vw, 110px);
}
@media (max-width: 640px) { :root { --gap: 6px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.6 var(--mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); }

/* ---------- wallpaper ---------- */
.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.nebula { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.nebula span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.n1 { width: 60vw; height: 60vw; left: -15vw; top: -22vw; background: radial-gradient(circle, rgba(255, 95, 176, .6), transparent 62%); animation: drift1 38s ease-in-out infinite alternate; }
.n2 { width: 56vw; height: 56vw; right: -18vw; top: 4vw; background: radial-gradient(circle, rgba(122, 162, 247, .6), transparent 62%); animation: drift2 46s ease-in-out infinite alternate; }
.n3 { width: 50vw; height: 50vw; left: 22vw; bottom: -26vw; background: radial-gradient(circle, rgba(187, 154, 247, .5), transparent 62%); animation: drift3 52s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(12vw, 10vw) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-10vw, 14vw) scale(1.1); } }
@keyframes drift3 { to { transform: translate(-14vw, -8vw) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .nebula span { animation: none; } .cursor { animation: none; } }

/* ---------- waybar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--bar); z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px;
  font-size: 12px; color: var(--muted); background: rgba(20, 21, 36, .92);
}
.bar .left { display: flex; align-items: center; gap: 14px; }
.bar .center { color: var(--fg); }
.bar .right { display: flex; justify-content: end; gap: 16px; white-space: nowrap; overflow: hidden; }
.omarchy { display: inline-flex; color: var(--fg); }
.omarchy svg { height: 14px; width: auto; display: block; }
.ws { display: inline-flex; gap: 9px; }
.ws i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); display: block; }
.ws i.on { background: var(--pink); border-color: var(--pink); box-shadow: 0 0 8px var(--pink); }
@media (max-width: 640px) { .bar .right span:not(:last-child) { display: none; } }

/* ---------- the hyprland window ---------- */
.window {
  position: fixed; z-index: 2;
  top: calc(var(--bar) + var(--gap)); left: var(--gap); right: var(--gap); bottom: var(--gap);
  border: var(--border) solid transparent;
  border-image: linear-gradient(45deg, var(--pink), var(--cyan)) 1;     /* col.active_border, rounding = 0 */
  background: rgba(20, 21, 36, .86);
  backdrop-filter: blur(14px);
  box-shadow: 0 0 40px rgba(122, 162, 247, .15), 0 20px 60px rgba(0, 0, 0, .5);
}
.term {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  padding: 18px clamp(14px, 3vw, 34px) 48px;
  scrollbar-width: thin; scrollbar-color: rgba(122, 162, 247, .35) transparent;
}

.prompt { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.prompt + .prompt { margin-top: 18px; }
.ps1 { color: var(--green); }
.cmd { color: var(--fg); }
.comment { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.comment.credits { margin-top: 28px; line-height: 1.7; }
.cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; background: var(--cyan); margin-left: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cursor[hidden] { display: none; }

/* ---------- the playground: the logo is the text ---------- */
.stage { position: relative; }
.face { font-family: var(--face); font-weight: 400; line-height: 1; }
.ink {
  --size: 96px; --tracking: 0em; --leading: 1;
  --glow-a: rgba(255, 95, 176, .45); --glow-b: rgba(122, 162, 247, .35);
  font-family: var(--face); font-weight: 400;
  font-size: var(--size); letter-spacing: var(--tracking); line-height: var(--leading);
  padding: .14em .12em .08em;
  min-height: 1.2em;
  width: max-content; max-width: 100%;    /* the gradient spans the text, not the window */
  outline: none; caret-color: var(--pink);
  white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--fg);
}
.ink.glow { filter: drop-shadow(0 0 10px var(--glow-a)) drop-shadow(0 0 32px var(--glow-b)); }
.ink[data-ink="nebula"] { background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 33.3%, var(--blue) 66.7%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ink[data-ink="pink"]  { color: var(--pink);  --glow-a: rgba(255, 95, 176, .6);  --glow-b: rgba(255, 45, 149, .35); }
.ink[data-ink="blue"]  { color: var(--blue);  --glow-a: rgba(122, 162, 247, .6); --glow-b: rgba(122, 162, 247, .35); }
.ink[data-ink="cyan"]  { color: var(--cyan);  --glow-a: rgba(125, 207, 255, .6); --glow-b: rgba(125, 207, 255, .3); }
.ink[data-ink="green"] { color: var(--green); --glow-a: rgba(158, 206, 106, .55); --glow-b: rgba(158, 206, 106, .3); }
.ink[data-ink="white"] { color: #f4f4f5;      --glow-a: rgba(244, 244, 245, .4);  --glow-b: rgba(187, 154, 247, .3); }
.ink.etching { color: transparent !important; -webkit-text-fill-color: transparent; background: none !important; filter: none !important; caret-color: transparent; }
.etch { position: absolute; pointer-events: none; transition: opacity .45s ease; filter: drop-shadow(0 0 8px rgba(255, 95, 176, .45)) drop-shadow(0 0 26px rgba(122, 162, 247, .35)); }

/* ---------- flags ---------- */
.flags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 2px 0 6px; font-size: 13px; color: var(--muted); }
.flag { display: inline-flex; align-items: center; gap: 8px; }
.flag output { color: var(--fg); min-width: 3ch; }
.flag input[type="range"] { width: 110px; accent-color: var(--pink); }
.flag input[type="checkbox"] { accent-color: var(--pink); margin: 0; }
.inks { gap: 9px; }
.chip { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 8px var(--swatch); border: 2px solid transparent; cursor: pointer; transition: transform .12s, border-color .12s; }
.chip:has(input:checked) { border-color: #fff; transform: scale(1.2); }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip.nebula { --swatch: var(--pink); background: linear-gradient(90deg, var(--pink), var(--blue)); }
.chip.pink { --swatch: var(--pink); } .chip.blue { --swatch: var(--blue); } .chip.cyan { --swatch: var(--cyan); }
.chip.green { --swatch: var(--green); } .chip.white { --swatch: #f4f4f5; }
.btn { font: inherit; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.btn:hover { color: var(--fg); border-color: var(--pink); }

/* ---------- actions ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; }
.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(122, 162, 247, .42);
  background: rgba(26, 27, 38, .7); color: var(--fg); text-decoration: none; font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.button:hover { border-color: var(--pink); transform: translateY(-1px); box-shadow: 0 0 24px rgba(255, 95, 176, .25); }
.button.primary { background: linear-gradient(90deg, var(--pink), var(--violet)); color: #0a0a16; border-color: transparent; font-weight: 600; }
.button.primary:hover { box-shadow: 0 0 30px rgba(255, 95, 176, .5); }
.meta { color: var(--muted); font-size: 12px; margin-left: 4px; }

/* ---------- compare + specimen ---------- */
.compare-rows { display: grid; gap: 22px; margin: 10px 0 4px; overflow-x: auto; padding-bottom: 4px; }
.cmp-row { display: grid; gap: 6px; }
.tag { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.official-wrap { margin-left: calc(var(--cmp) * 0.05); }
.official-wrap svg { display: block; width: calc(var(--cmp) * 4.05); height: auto; color: var(--fg); }
.cmp-text { font-size: var(--cmp); white-space: nowrap; }
.grad { background: linear-gradient(90deg, var(--pink), var(--violet) 40%, var(--blue) 70%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spec-line { font-size: clamp(22px, 4.6vw, 52px); margin: 6px 0 14px; white-space: nowrap; width: max-content; max-width: 100%; overflow-x: auto; padding-bottom: 2px; }