/* Design guidance: Unslop by Damir Sokolovsky (CC BY 4.0), Elaya landing-page-design,
   and Emil Kowalski's design engineering skill. https://github.com/heydamir/unslop */
@font-face { font-family: Orbitron; src: url('/assets/fonts/orbitron.woff2') format('woff2'); font-weight:500 600; font-display:swap; }
@font-face { font-family: Oxanium; src: url('/assets/fonts/oxanium.woff2') format('woff2'); font-weight:400 600; font-display:swap; }
:root {
  color-scheme:dark;
  --bg:#101315; --surface:#191e20; --section:#14191b;
  --text:#e7eeeb; --muted:#9ba9a3; --line:#333c37;
  --accent:#b4e994; --on-accent:#172010;
  --tint:color-mix(in srgb,var(--accent) 8%,var(--surface));
  --body:Oxanium,system-ui,sans-serif;
  --display:Orbitron,Oxanium,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
:root[data-palette=cobalt] { --bg:#10151f; --surface:#1a2230; --section:#151c28; --text:#e0e8fc; --muted:#a0afc9; --line:#334155; --accent:#86bfff; --on-accent:#101827; }
:root[data-palette=rose] { --bg:#1a1519; --surface:#272026; --section:#211a20; --text:#f4e0ea; --muted:#bd9faf; --line:#493740; --accent:#f5a5c7; --on-accent:#23151c; }
:root[data-palette=ember] { --bg:#1b1815; --surface:#28211c; --section:#211c18; --text:#eee0ce; --muted:#b9a694; --line:#493c32; --accent:#ffae72; --on-accent:#24180e; }
:root[data-palette=moon] { --bg:#191724; --surface:#242033; --section:#1d1a2b; --text:#e0def4; --muted:#afa8c6; --line:#3b344c; --accent:#c4a7e7; --on-accent:#21182b; }
:root[data-palette=carbon] { --bg:#181a1d; --surface:#23262b; --section:#1e2125; --text:#e4e4dd; --muted:#abadad; --line:#3a3f45; --accent:#e8bd55; --on-accent:#261f0e; }
:root[data-palette=tide] { --bg:#0e2029; --surface:#18323d; --section:#132931; --text:#d7eef2; --muted:#9bb7c2; --line:#30505d; --accent:#67d7d0; --on-accent:#102925; }
:root[data-palette=aurora] { --bg:#102321; --surface:#18332e; --section:#142b27; --text:#daeee6; --muted:#a1beb4; --line:#2f4e44; --accent:#78e6b1; --on-accent:#102b21; }
:root[data-palette=ink] { --bg:#101010; --surface:#1d1d1d; --section:#171717; --text:#f0f0f0; --muted:#a4a4a4; --line:#333; --accent:#fff; --on-accent:#111; }
:root[data-palette=paper] { color-scheme:light; --bg:#f5f1e8; --surface:#e9e2d4; --section:#eee8dc; --text:#303734; --muted:#5f675b; --line:#bdc0b1; --accent:#26745c; --on-accent:#fffdf7; }
:root[data-palette=glacier] { color-scheme:light; --bg:#e8f0f4; --surface:#dce7ee; --section:#e2ebf0; --text:#263c4d; --muted:#4e6778; --line:#afc3cd; --accent:#276eab; --on-accent:#fff; }
:root[data-palette=lavender] { color-scheme:light; --bg:#f0eaf5; --surface:#e3daec; --section:#eae1f0; --text:#392e4a; --muted:#6d5a80; --line:#c1b0d0; --accent:#7448a2; --on-accent:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; }
body { margin:0; background:var(--bg); color:var(--text); font:400 18px/28px var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
button,a { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,video:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
::selection { background:var(--accent); color:var(--on-accent); }
p { text-wrap:pretty; }
h1,h2,h3 { margin:0; font-weight:500; text-wrap:balance; }
h1 { font:500 60px/1.16 var(--display); letter-spacing:-.04em; max-width:680px; }
h1 span,.accent { color:var(--accent); }
h2 { font:500 36px/1.25 var(--display); letter-spacing:-.025em; }
h3 { font:500 24px/32px var(--body); }
code,pre,kbd { font-family:var(--body); font-variant-numeric:tabular-nums; }
.icon { width:20px; height:20px; fill:currentColor; flex:none; display:inline-block; }
.wrap { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:24px; z-index:10; padding:12px; background:var(--accent); color:var(--on-accent); }
.skip:focus { top:8px; }
.nav { display:flex; align-items:center; justify-content:space-between; gap:32px; height:88px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:12px; font:500 24px/32px var(--display); letter-spacing:-.02em; }
.brand-mark { display:inline-block; width:32px; height:24px; background:var(--accent); mask:url('/assets/logo.svg') center/contain no-repeat; flex:none; }
.cursor { margin-left:-12px; color:var(--accent); }
.nav nav { display:flex; align-items:center; gap:32px; font-size:16px; color:var(--muted); }
.nav a,.text-link,footer a { display:inline-flex; align-items:center; gap:8px; }
.nav .github-link { color:var(--text); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:12px 24px; min-height:48px; border:1px solid transparent; border-radius:8px; background:var(--accent); color:var(--on-accent); font-size:18px; font-weight:500; }
button,.button { transition:transform 160ms var(--ease); }
.button:active,button:active { transform:scale(.98); }
.hero { display:grid; grid-template-columns:minmax(0,2fr) minmax(256px,1fr); align-items:center; gap:48px; padding-block:64px; }
.release-link { display:inline-flex; gap:12px; align-items:center; margin-bottom:24px; color:var(--muted); font-size:14px; line-height:20px; }
.release-link .icon { width:16px; height:16px; }
.key-label { border:1px solid var(--line); border-radius:4px; background:var(--surface); padding:4px 8px; color:var(--text); }
.intro { font-size:20px; line-height:28px; margin:0 0 24px; }
.platforms { color:var(--muted); font-size:16px; line-height:24px; margin:24px 0 0; }
.terminal,.theme-stage { margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.terminal-bar { min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 24px; color:var(--muted); font-size:16px; line-height:24px; }
.window-title,.theme-applied { display:inline-flex; align-items:center; gap:8px; }
.window-title { color:var(--text); }
.terminal video { display:block; width:100%; height:auto; aspect-ratio:5/3; background:#10171d; }
.quiet-button { display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:8px 0 8px 16px; color:var(--text); font:inherit; white-space:nowrap; }
.section { padding-block:96px; }
.section-label { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:14px; line-height:20px; margin:0 0 24px; }
.section-label span { color:var(--accent); font-variant-numeric:tabular-nums; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:48px; }
.section-heading>p { max-width:368px; color:var(--muted); margin:0; }
.mode-tabs { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; margin:40px 0 24px; }
.mode-tabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:16px 8px; font-size:16px; line-height:24px; min-height:80px; }
.mode-tabs button .icon { width:24px; height:24px; }
.mode-tabs button[aria-selected=true] { background:var(--tint); color:var(--accent); border-color:var(--accent); }
.mode-panel { display:grid; grid-template-columns:minmax(240px,1fr) minmax(0,2.2fr); align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden; }
#mode-image { grid-column:2; grid-row:1; display:block; width:100%; height:auto; }
.mode-details { grid-column:1; grid-row:1; padding:32px; }
#mode-description { color:var(--muted); margin:16px 0 24px; font-size:16px; line-height:24px; }
#mode-command { display:block; color:var(--accent); font-size:16px; line-height:24px; overflow-wrap:anywhere; }
.themes-section { background:var(--section); border-block:1px solid var(--line); }
.theme-switcher { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin:40px 0 24px; }
.theme-switcher button { display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 16px; color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:8px; font-size:16px; line-height:24px; text-align:left; }
.theme-switcher button[aria-pressed=true] { color:var(--text); border-color:var(--accent); background:var(--tint); }
.palette-swatch { display:flex; width:32px; height:24px; overflow:hidden; border:1px solid color-mix(in srgb,var(--text) 24%,transparent); border-radius:4px; flex:none; }
.palette-swatch i { flex:1; background:var(--swatch-bg); }
.palette-swatch i:nth-child(2) { background:var(--swatch-accent); }
.palette-swatch i:nth-child(3) { background:var(--swatch-second); }
.selected-mark { margin-left:auto; width:16px; height:16px; opacity:0; color:var(--accent); }
[aria-pressed=true] .selected-mark { opacity:1; }
.theme-stage img,.journey-image img { display:block; width:100%; height:auto; }
.theme-applied { color:var(--accent); font-size:14px; }
.theme-applied .icon { width:16px; height:16px; }
.journey,.install-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:64px; align-items:center; }
.journey-copy>p:not(.section-label),.install-inner>div>p:not(.section-label) { max-width:400px; color:var(--muted); line-height:28px; margin:24px 0 0; }
.journey-image { margin:0; min-width:0; }
.journey-image img { border:1px solid var(--line); border-radius:12px; }
.install { background:var(--section); border-block:1px solid var(--line); }
.text-link { color:var(--text); font-size:16px; margin-top:24px; text-decoration:underline; text-underline-offset:4px; }
.install-box { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:24px; }
.install-methods { display:flex; gap:8px; flex-wrap:wrap; }
.install-methods button { background:none; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:8px 16px; font-size:16px; min-height:40px; }
.install-methods button[aria-pressed=true] { background:var(--tint); color:var(--accent); border-color:var(--accent); }
.command-label { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; font-size:14px; line-height:20px; color:var(--muted); }
.command-label button { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--text); font:inherit; min-height:40px; }
.command-label .icon { width:16px; height:16px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:400 16px/24px var(--body); background:var(--surface); color:var(--accent); border:1px solid var(--line); border-radius:8px; padding:16px; margin:16px 0; }
#install-note { color:var(--muted); font-size:14px; line-height:24px; min-height:48px; margin:0 0 24px; }
.install-next { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted); font-size:16px; }
.install-next code { font-size:20px; color:var(--text); }
#copy-status { font-size:14px; line-height:20px; color:var(--accent); min-height:20px; margin:16px 0 0; }
footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:32px; font-size:14px; line-height:20px; color:var(--muted); }
footer .brand { font-size:18px; color:var(--text); }
footer .brand-mark { width:24px; height:20px; }
footer>div { display:flex; gap:24px; }
footer .icon { width:16px; height:16px; }
@media(hover:hover) and (pointer:fine) {
  .nav nav a:hover,footer a:hover,.release-link:hover { color:var(--text); }
  .button:hover { opacity:.88; }
  .mode-tabs button:hover,.theme-switcher button:hover,.install-methods button:hover,.command-label button:hover { background:var(--tint); color:var(--text); }
}
@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px); }
  h1 { font-size:48px; }
  h2 { font-size:30px; }
  .hero,.section-heading { gap:32px; }
  .journey,.install-inner { gap:32px; }
  .mode-details { padding:24px; }
  .mode-tabs button { font-size:14px; }
  .theme-switcher { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media(max-width:800px) {
  .wrap { width:calc(100% - 40px); }
  .nav { height:80px; gap:16px; }
  .nav nav { gap:20px; }
  .nav nav a:first-child { display:none; }
  .brand { font-size:20px; gap:8px; }
  .cursor { margin-left:-8px; }
  .hero { grid-template-columns:1fr; padding-block:40px; gap:24px; }
  h1 { font-size:36px; letter-spacing:-.04em; }
  h2 { font-size:30px; }
  .intro { font-size:18px; line-height:28px; }
  .platforms { margin-top:16px; }
  .terminal-bar { padding:8px 16px; font-size:14px; }
  .section { padding-block:64px; }
  .section-label { margin-bottom:16px; }
  .section-heading { align-items:start; flex-direction:column; gap:24px; }
  .section-heading>p { max-width:560px; }
  .mode-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:32px; }
  .mode-tabs button { flex-direction:row; min-height:48px; padding:12px 8px; gap:8px; }
  .mode-tabs button .icon { width:20px; height:20px; }
  .mode-panel { grid-template-columns:1fr; }
  #mode-image { grid-column:1; grid-row:1; }
  .mode-details { grid-column:1; grid-row:2; padding:24px; }
  #mode-description { min-height:48px; max-width:560px; }
  .theme-switcher { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:32px; }
  .theme-switcher button { padding:12px; }
  .journey,.install-inner { grid-template-columns:1fr; gap:32px; }
  footer { flex-wrap:wrap; gap:24px; }
  footer>span { display:none; }
  footer>div { gap:16px; }
}
@media(max-width:560px) {
  .theme-switcher { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .theme-switcher button { gap:8px; min-height:56px; }
  .palette-swatch { width:24px; height:20px; }
  .mode-tabs button { flex-direction:column; gap:4px; min-height:72px; }
  .install-box { padding:16px; }
}
@media(max-width:380px) {
  h1 { font-size:30px; }
  .nav nav { gap:16px; }
  .nav .github-link span { display:none; }
  .theme-switcher button { font-size:14px; padding:12px 8px; }
  .theme-switcher .selected-mark { width:12px; height:12px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  button:active,.button:active { transform:none; }
}