/* Envy for Omarchy — envynote.app/omarchy
   Ported from omarchy.org's stylesheet so the page reads as native to the
   Omarchy brand: same reset, same tokens, same JetBrains Mono, same button,
   same masthead-then-header-then-content rhythm. Every measure is in em so
   the whole page scales with --font-size, exactly as omarchy.org does.

   The palette lives in custom properties that the theme picker rewrites at
   runtime, the way `omarchy theme set` retints the app. Tokyo Night is the
   default and is pinned to omarchy.org's exact values. */

/* ---- reset (omarchy.org/assets/css/reset.css) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, button, h1, h2, h3, p, pre, a, em, img, strong, b, i, dl, dt, dd, ol, ul, li, code, kbd, table, tr, th, td, article, aside, figure, figcaption, footer, header, main, nav, section {
  background: transparent; border: 0; font: inherit; font-size: 100%; margin: 0; min-width: 0; outline: 0; padding: 0; vertical-align: baseline;
}
article, aside, figcaption, figure, footer, header, main, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
img, svg { display: block; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---- tokens (omarchy.org/assets/css/root.css) ---- */
:root {
  --color-background-night: #1a1b26;
  --color-background-storm: #24283b;
  --color-terminal-black: #414868;
  --color-terminal-blue: #7aa2f7;
  --color-terminal-cyan: #7dcfff;
  --color-terminal-white: #c0caf5;
  --color-turquoise: #b4f9f8;
  --color-green: #9ece6a;
  --color-accent: #7aa2f7;
  --color-black: #000;
  --color-white: #fff;

  --border-color: color-mix(in srgb, var(--color-terminal-black) 80%, transparent);
  --border-width: max(1px, 0.0625em);

  --font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  /* omarchy.org goes down to 10px on a phone; this page has paragraphs, so it stops at 14px. */
  --font-size: clamp(0.875rem, 1.25vw, 1rem);
  --font-size-small: 80%;
  --font-size-medium: 125%;
  --font-size-large: 200%;
  --line-height: 1.4;

  --space-small: 0.5em;
  --space-medium: 1em;
  --space-neutral: 1.5em;
  --space-large: 2em;
  --space-x-large: 3em;
  --space-xx-large: 4em;
  --space-xxx-large: 5em;
  --space-xxxx-large: 6em;

  --transition: 0.15s cubic-bezier(0.33, 1, 0.68, 1);
  --shadow:
    0 1px 0 0 rgba(0,0,0,0.1),
    0 0.2em 1.2em -0.4em rgba(0,0,0,0.2),
    0 0.4em 2.0em -0.8em rgba(0,0,0,0.3),
    0 0.4em 0.4em -0.8em rgba(0,0,0,0.4),
    0 0.8em 0.8em -1.2em rgba(0,0,0,0.5),
    0 1.2em 1.2em -1.6em rgba(0,0,0,0.6);
}

/* ---- fonts: the same ten JetBrains Mono faces omarchy.org serves ---- */
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 300; src: url('fonts/JetBrainsMono-Light.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: italic; font-weight: 300; src: url('fonts/JetBrainsMono-LightItalic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: italic; font-weight: 400; src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: italic; font-weight: 500; src: url('fonts/JetBrainsMono-MediumItalic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: italic; font-weight: 600; src: url('fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: italic; font-weight: 700; src: url('fonts/JetBrainsMono-BoldItalic.woff2') format('woff2'); }

/* ---- elements ---- */
html { font-size: 16px; scroll-behavior: smooth; color-scheme: dark; background: var(--color-background-night); }
html[data-mode="light"] { color-scheme: light; }
body {
  align-items: stretch;
  background: var(--color-background-night);
  color: var(--color-terminal-blue);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: 300;
  line-height: var(--line-height);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  transition: background var(--transition), color var(--transition);
}
a { color: var(--color-terminal-cyan); font-weight: 700; text-decoration-thickness: 0.0875em; text-underline-offset: 0.125em; transition: color var(--transition); }
b, strong { font-weight: 700; }
i, em { font-style: italic; }
img { height: auto; max-width: 100%; width: 100%; }
kbd { font-weight: 700; color: var(--color-terminal-white); }
code { font-weight: 500; color: var(--color-terminal-white); overflow-wrap: anywhere; }
:focus-visible { outline: 0.125em solid var(--color-turquoise); outline-offset: 0.125em; }
@media (hover: hover) { a:hover { color: var(--color-white); } html[data-mode="light"] a:hover { color: var(--color-terminal-white); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ---- notification ---- */
.notification a {
  background: var(--color-terminal-blue); color: var(--color-background-night);
  display: block; padding: 0.6em; text-align: center; text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
@media (hover: hover) { .notification a:hover { background: var(--color-turquoise); color: var(--color-background-night); } }

/* ---- pre: the masthead wordmark ---- */
.pre { display: grid; margin-top: var(--space-xx-large); padding-inline: var(--space-large); }
.pre a { color: var(--color-green); font-weight: normal; justify-self: center; text-decoration: none; }
.pre pre {
  color: var(--color-green); font-size: clamp(0.425rem, 1.25vw, 1rem); justify-self: center;
  letter-spacing: -0.0425em; line-height: 1.09375; transition: color var(--transition); white-space: pre;
}
.pre__sub {
  color: var(--color-terminal-cyan); font-size: var(--font-size-small); font-weight: 700; letter-spacing: 0.35em;
  margin-top: var(--space-medium); text-align: center; text-transform: uppercase;
}
@media (hover: hover) { .pre a:hover pre { color: var(--color-turquoise); } }
@media (min-width: 64em) { .pre { margin-top: var(--space-xxxx-large); padding-inline: var(--space-xx-large); } }

/* ---- header ---- */
.header { display: grid; margin-top: var(--space-medium); padding-inline: var(--space-large); }
.header h1 { font-size: var(--font-size-medium); text-align: center; text-wrap: balance; }
.header__subtext { font-style: italic; justify-self: center; margin-top: var(--space-neutral); max-width: 46em; text-align: center; text-wrap: pretty; }
.header__subtext a, .header__subtext a:hover { color: inherit; }
@media (min-width: 64em) { .header { padding-inline: var(--space-xx-large); } }

/* ---- nav: rows of pill buttons ---- */
.nav { display: flex; flex-wrap: wrap; gap: var(--space-medium); justify-content: center; margin-top: var(--space-large); padding-inline: var(--space-large); }
.nav__buttons { display: contents; }
@media (min-width: 64em) {
  .nav { display: grid; padding-inline: var(--space-xx-large); }
  .nav__buttons { display: flex; flex-wrap: wrap; gap: var(--space-medium); justify-content: center; }
}

/* ---- button (omarchy.org/assets/css/button.css) ---- */
.button {
  align-items: center; background: var(--color-terminal-blue); border: none; border-radius: 0.4em;
  box-shadow: var(--shadow); color: var(--color-background-night); cursor: pointer; display: flex;
  font-weight: 700; gap: 1ch; height: 2.9em; line-height: 1; padding-inline: var(--space-medium);
  text-decoration: none; text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
}
.button svg { height: 1.4em; overflow: visible; width: 1.4em; }
.button span { margin-bottom: -0.1875em; margin-top: -0.125em; }
.button--ghost { background: transparent; box-shadow: inset 0 0 0 var(--border-width) var(--color-terminal-black); color: var(--color-terminal-blue); }
@media (hover: hover) {
  .button:hover { background: var(--color-turquoise); color: var(--color-background-night); }
}

/* ---- main ---- */
.main { display: grid; gap: var(--space-xx-large); margin-bottom: var(--space-xx-large); margin-top: calc(var(--space-large) * 1.2); }
@media (min-width: 64em) { .main { gap: var(--space-xxx-large); margin-bottom: var(--space-xxxx-large); margin-top: calc(var(--space-x-large) * 1.2); } }

/* Every block sits in the same column the videos on omarchy.org use. */
.block { display: grid; margin-inline: auto; padding-inline: var(--space-large); width: min(100%, 90em); }
@media (min-width: 64em) { .block { padding-inline: var(--space-xx-large); } }
.block--narrow { width: min(100%, 64em); }

.block h2 {
  color: var(--color-terminal-white); font-size: var(--font-size-medium); font-weight: 700;
  margin-bottom: var(--space-medium);
}
.block h2 small { color: var(--color-terminal-blue); font-size: var(--font-size-small); font-weight: 300; margin-left: 1ch; }
.block > p { text-wrap: pretty; }
.block > p + p { margin-top: var(--space-medium); }

/* ---- cmd: the one-line install, styled like the manual's code panel ---- */
.cmd { display: grid; gap: var(--space-medium); }
.cmd__line {
  align-items: center; background: var(--color-background-storm); border: var(--border-width) solid var(--border-color);
  border-radius: 0.4em; box-shadow: var(--shadow); display: flex; gap: var(--space-medium);
  padding: var(--space-medium) var(--space-neutral); overflow-x: auto;
}
.cmd__prompt { color: var(--color-green); font-weight: 700; user-select: none; }
.cmd__code { color: var(--color-terminal-white); font-size: var(--font-size-medium); font-weight: 500; white-space: pre; flex: 1; }
.cmd__copy {
  background: var(--color-terminal-blue); border: 0; border-radius: 0.3em; color: var(--color-background-night); cursor: pointer;
  font-family: inherit; font-size: var(--font-size-small); font-weight: 700; padding: 0.55em 0.9em; text-transform: uppercase;
  transition: background var(--transition), color var(--transition); white-space: nowrap;
}
.cmd__copy[data-done="1"] { background: var(--color-green); }
@media (hover: hover) { .cmd__copy:hover { background: var(--color-turquoise); } }
.cmd__alt { color: var(--color-terminal-blue); font-size: var(--font-size-small); text-wrap: pretty; }
.cmd > p, .byhand > p { text-wrap: pretty; }
.cmd__lead { color: var(--color-terminal-white); font-weight: 500; }
.cmd { gap: var(--space-small); }
.cmd__lead + .cmd__line { margin-bottom: var(--space-small); }
.cmd__line--agent .cmd__code { white-space: normal; font-weight: 500; }
.cmd__line--agent .cmd__code a { color: var(--color-terminal-cyan); white-space: nowrap; }
.byhand { margin-top: var(--space-small); }
.byhand > summary { color: var(--color-terminal-blue); cursor: pointer; font-size: var(--font-size-small); font-weight: 700; list-style: none; text-transform: uppercase; letter-spacing: 0.1em; width: fit-content; }
.byhand > summary::before { content: '+ '; }
.byhand[open] > summary::before { content: '\2212 '; }
.byhand > summary::-webkit-details-marker { display: none; }
.byhand > * + * { margin-top: var(--space-medium); }
.codebox { position: relative; }
.codebox .code { margin-top: 0; padding-right: 6em; }
.codebox .cmd__copy { position: absolute; right: var(--space-medium); top: var(--space-medium); }
.cmd__alt code { color: var(--color-terminal-white); }

/* ---- shot: where the screenshot goes ----
   Same frame as omarchy.org's video facade (16:9, storm ground, 0.4em
   radius, deep shadow). One holds the recording, one the capture for the
   picked theme; the picker swaps that image's src. */
.shot { display: grid; gap: var(--space-medium); }
.shot__frame {
  aspect-ratio: 16 / 9; background: var(--color-background-storm); border-radius: 0.4em;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 0.3em 2em -1.2em rgba(0,0,0,0.1), 0 0.6em 2.4em -1.6em rgba(0,0,0,0.2),
              0 0.9em 2.8em -2em rgba(0,0,0,0.3), 0 1.2em 3.2em -2.4em rgba(0,0,0,0.4), 0 1.5em 3.6em -2.8em rgba(0,0,0,0.5);
  overflow: hidden; position: relative; width: 100%;
  transition: background var(--transition);
}
.shot__frame img { height: 100%; object-fit: cover; width: 100%; }
.shot__caption { color: var(--color-terminal-blue); font-size: var(--font-size-small); text-align: center; text-wrap: pretty; }
.shot--grid { display: grid; gap: var(--space-medium); grid-template-columns: 1fr; }
@media (min-width: 40em) { .shot--grid { grid-template-columns: 1fr 1fr; } }

.shot__video, .shot__img { display: block; height: 100%; object-fit: cover; width: 100%; }
.shot__caption kbd { color: var(--color-terminal-white); }

/* ---- themes: the picker. Pills, smaller than nav buttons. ---- */
.themes { display: grid; gap: var(--space-medium); }
.themes__cmd { color: var(--color-terminal-white); font-weight: 500; }
.themes__cmd b { color: var(--color-green); }
.themes__cmd em { color: var(--color-terminal-cyan); font-style: normal; }
.themes__list { display: flex; flex-wrap: wrap; gap: var(--space-small); }
.chip {
  align-items: center; background: var(--color-background-storm); border: var(--border-width) solid var(--border-color); border-radius: 0.4em;
  color: var(--color-terminal-white); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--font-size-small);
  font-weight: 500; gap: 0.6em; padding: 0.5em 0.8em; transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chip__dot { border-radius: 50%; display: inline-block; height: 0.9em; width: 0.9em; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.chip[aria-pressed="true"] { background: var(--color-terminal-blue); border-color: var(--color-terminal-blue); color: var(--color-background-night); }
@media (hover: hover) { .chip:hover { border-color: var(--color-terminal-cyan); color: var(--color-terminal-cyan); } .chip[aria-pressed="true"]:hover { color: var(--color-background-night); background: var(--color-turquoise); } }
.themes__note { color: var(--color-terminal-blue); font-size: var(--font-size-small); }

/* ---- index: the feature rows. Term left, definition right, hairline rules. ---- */
.index { border-top: var(--border-width) solid var(--border-color); }
.index__row { border-bottom: var(--border-width) solid var(--border-color); display: grid; gap: var(--space-small) var(--space-large); padding: var(--space-medium) 0; }
.index__row dt { color: var(--color-terminal-white); font-weight: 700; }
.index__row dd { text-wrap: pretty; }
.index__row dd code, .index__row dd kbd { color: var(--color-terminal-white); }
@media (min-width: 48em) { .index__row { grid-template-columns: 16em 1fr; } }

/* ---- code: multi-line panels for the setup snippet ---- */
.code {
  background: var(--color-background-storm); border: var(--border-width) solid var(--border-color); border-radius: 0.4em;
  box-shadow: var(--shadow); color: var(--color-terminal-white); font-size: var(--font-size-small); font-weight: 400;
  line-height: 1.55; overflow-x: auto; padding: var(--space-medium) var(--space-neutral); white-space: pre; margin-top: var(--space-medium);
}
.code .c { color: var(--color-terminal-blue); font-style: italic; opacity: 0.85; }
.code .s { color: var(--color-green); }
.code .k { color: var(--color-terminal-cyan); font-weight: 700; }

/* ---- spec ---- */
.spec { border-top: var(--border-width) solid var(--border-color); }
.spec__row { border-bottom: var(--border-width) solid var(--border-color); display: grid; grid-template-columns: 1fr auto; gap: var(--space-large); padding: 0.7em 0; }
.spec__row dt { color: var(--color-terminal-blue); }
.spec__row dd { color: var(--color-terminal-white); font-weight: 500; text-align: right; }
.spec__row dd .free { color: var(--color-green); font-weight: 700; }

/* ---- footer ---- */
.footer { align-items: center; border-top: var(--border-width) solid var(--border-color); display: grid; gap: var(--space-large); justify-content: space-between; padding: var(--space-large); }
.footer--center { justify-content: center; text-align: center; }
.footer__section { display: flex; justify-content: center; }
.footer__section p { color: color-mix(in srgb, var(--color-terminal-white) 60%, transparent); font-size: var(--font-size-small); font-weight: 500; line-height: 2em; margin-bottom: -0.6375em; margin-top: -0.5875em; text-wrap: pretty; max-width: 60em; }
.footer__section p a { color: inherit; }
@media (hover: hover) { .footer__section p a:hover { color: var(--color-terminal-white); } }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the debut: ttfx over the wordmark (see debut.js) ----
   The <pre> keeps the layout and is the fallback. While an effect plays the
   <pre> is invisible and a transparent canvas sits over it; when the effect
   ends the canvas fades and the green mark fades in. If nothing has painted
   in 2.5s (wasm blocked, script failed) the reveal fires on its own. */
.pre a, .pre .pre__mark { display: block; position: relative; max-width: 100%; }
.pre--live pre { animation: pre-fallback 0s 2.5s forwards; visibility: hidden; }
@keyframes pre-fallback { to { visibility: visible; } }
.pre--live[data-debut="live"] pre { animation: none; }
.pre--static pre { animation: none; visibility: visible; }
.pre__canvas { display: block; pointer-events: none; position: absolute; opacity: 1; transition: opacity 0.6s ease; z-index: 1; }
.pre.pre--live.pre--settled pre { visibility: visible; animation: pre-settle 0.6s ease both; }
.pre--settled .pre__canvas { opacity: 0; }
@keyframes pre-settle { from { opacity: 0; } to { opacity: 1; } }
.pre[data-debut="live"] a { cursor: pointer; }
.pre__hint { color: color-mix(in srgb, var(--color-terminal-blue) 55%, transparent); font-size: var(--font-size-small); margin-top: var(--space-small); text-align: center; opacity: 0; transition: opacity var(--transition); }
.pre[data-debut="live"] .pre__hint { opacity: 1; }
.pre__hint kbd { color: inherit; font-weight: 700; }

/* ---- the screensaver overlay: omarchy.org/screensaver, on this page ---- */
html.saver-open { overflow: hidden; }
html.saver-open, html.saver-open body { cursor: none; }
.saver { background: #000; inset: 0; position: fixed; z-index: 100; touch-action: none; user-select: none; }
.saver__canvas { background: #000; display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
@media (prefers-reduced-motion: reduce) { html.saver-open, html.saver-open body { cursor: auto; } }

/* ---- phones ----
   Less side padding so the frames use the width, the install prompt wraps
   instead of scrolling, and its Copy button drops onto its own line. */
@media (max-width: 48em) {
  .block, .header, .nav { padding-inline: var(--space-medium); }
  .footer { padding: var(--space-large) var(--space-medium); }
  .cmd__line { flex-wrap: wrap; padding: var(--space-medium); }
  .cmd__code, .cmd__line--agent .cmd__code a { white-space: normal; overflow-wrap: anywhere; }
  .cmd__copy { margin-left: auto; }
  .cmd__line--agent .cmd__code { flex-basis: 100%; font-size: 100%; }
  .cmd__line--agent .cmd__prompt { display: none; }
  .codebox .code { padding-right: var(--space-neutral); padding-top: 3.2em; }
  .spec__row { grid-template-columns: max-content 1fr; gap: var(--space-medium); }
  .themes__list { gap: 0.6em; }
  .chip { padding: 0.6em 0.9em; }
}