@font-face {
  font-family: Geist Mono;
  src: url(GeistMono.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Geist;
  src: url(Geist.woff2) format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --background: #0b0d12;
  --anthracite: #22242d;
  --sidebar: #11151d;
  --panel: #191e28;
  --glass: #222833;
  --primary: #ff9345;
  --hover: #ffad70;
  --pressed: #c96b2d;
  --text: #cdd3dd;
  --secondary: #858e9d;
  --border: #303640;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --sans: Geist, system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --tint: color-mix(in srgb, var(--primary) 13%, var(--panel));
  --glow: color-mix(in srgb, var(--primary) 25%, transparent);
  color-scheme: dark;
  color: var(--text);
  background: var(--anthracite);
  font: 14px/1.55 var(--mono);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--hover); }
a:active { color: var(--pressed); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
::selection { color: var(--background); background: var(--hover); }
html { overflow-x: clip; overscroll-behavior-y: none; scroll-padding-top: 60px; scrollbar-color: var(--border) var(--background); }

.skip-link {
  position: fixed;
  z-index: 20;
  left: 12px;
  top: 12px;
  padding: 8px 12px;
  background: var(--sidebar);
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

.glass {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 10;
  left: 9px;
  right: 9px;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sidebar) 92%, transparent);
  box-shadow: 0 8px 30px -16px #000;
  backdrop-filter: blur(12px);
}
.bar { top: 9px; min-height: 41px; padding: 3px 5px; justify-content: space-between; }
.bar nav, .system-tray { display: flex; align-items: center; gap: 5px; }
.bar nav a, .chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 11px;
  letter-spacing: .035em;
  min-height: 31px;
  padding: 0 8px;
}
.bar nav a {
  gap: 7px;
  color: var(--secondary);
  text-transform: uppercase;
  transition: color .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
}
.bar nav b {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 6px;
  color: var(--primary);
  background: var(--tint);
}
.bar nav a:hover { color: var(--hover); background: var(--glass); }
.bar nav a[aria-current] { color: var(--background); background: var(--primary); box-shadow: 0 0 16px var(--glow); }
.bar nav a[aria-current] b { color: var(--background); background: color-mix(in srgb, var(--background) 16%, transparent); }
.system-tray { min-width: 0; }
.chip { gap: 7px; color: var(--secondary); border-color: var(--border); background: var(--sidebar); }
.chip span:first-child { color: var(--primary); }
.chip.event { min-width: 0; }
#event-log { overflow: hidden; text-overflow: ellipsis; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 9px var(--primary); }
.clock { min-width: 67px; font-variant-numeric: tabular-nums; }
.status { bottom: 9px; min-height: 36px; padding: 3px 9px; font-size: 11px; color: var(--secondary); }
.status button { margin-left: auto; }
.status button, .channels button, #external a, #external button, #skip-boot, #close-launcher {
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--primary);
  background: var(--tint);
  padding: .35em .8em;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.status button:hover, .channels button:hover, #external a:hover, #external button:hover, #skip-boot:hover, #close-launcher:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
}

#desktop { padding: 55px 0 53px; }
.workspace { padding: clamp(15px, 3vw, 32px) clamp(14px, 2vw, 24px); }
.window {
  width: min(1100px, 100%);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 83%, var(--background));
  box-shadow: 0 18px 50px -28px #000, inset 0 0 0 1px #ffffff04;
  transition: border-color .2s var(--ease);
}
.window:hover { border-color: color-mix(in srgb, var(--primary) 43%, var(--border)); }
.window:focus-visible { outline-offset: -2px; }
.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  background: var(--glass);
  color: var(--secondary);
  min-height: 35px;
  padding: 5px 13px;
  font-size: 11px;
  letter-spacing: .06em;
}
.titlebar span:last-child { color: var(--primary); white-space: nowrap; }
.window-body { padding: clamp(17px, 3vw, 34px); }

.neofetch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 21px; }
@media (min-width: 720px) {
  .neofetch { grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 36px; }
}
.mark { margin: 0; justify-self: center; text-align: center; color: var(--primary); }
.mark pre {
  margin: 0;
  width: 26ch;
  min-height: 153px;
  font: 10px/9px var(--mono);
  text-align: left;
  text-shadow: 0 0 14px var(--glow);
}
.mark figcaption { margin-top: 7px; font-size: 12px; letter-spacing: .11em; }
.host { color: var(--primary); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: 16px; }
.facts { display: grid; gap: 4px; margin: 0 0 24px; font-size: 14px; }
.facts div { display: grid; grid-template-columns: minmax(72px, 105px) minmax(0, 1fr); gap: 13px; }
.facts dt { color: var(--primary); }
.facts dd { color: var(--secondary); margin: 0; }
h1 { font-size: clamp(26px, 4.4vw, 43px); letter-spacing: -.025em; font-weight: 650; line-height: 1.15; max-width: 18ch; margin: 0 0 12px; }
h1 em { color: var(--primary); font-style: normal; text-shadow: 0 0 20px var(--glow); }
h1 .accent-dot { color: var(--primary); }
h1 .ink-dot { color: var(--text); text-shadow: none; }
.intro { color: var(--secondary); font: 15px/1.65 var(--sans); max-width: 60ch; margin: 0; }
kbd { color: var(--primary); font: .8em var(--mono); background: var(--sidebar); border: 1px solid var(--border); border-radius: 3px; padding: 0 .35em; }
.caret {
  display: inline-block;
  vertical-align: -.15em;
  margin-left: .35ch;
  width: .58ch;
  height: 1em;
  background: var(--primary);
  animation: blink 1.05s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.command { color: var(--text); margin: 0 0 17px; }
.command b { color: var(--primary); margin-right: 6px; }
.command .comment { margin-left: 1ch; color: var(--secondary); }
.notes { max-width: 80ch; }
.note {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
}
.note > span, .listing h2 { color: var(--primary); }
.note h2, .listing h2 { font-size: 14px; margin: 0 0 4px; }
.note p { margin: 0; color: var(--secondary); font: 15px/1.62 var(--sans); }
.end { margin: 15px 0 0; color: var(--secondary); font-size: 12px; }
.units { list-style: none; margin: 0 0 16px; padding: 0; }
.units:last-child { margin-bottom: 0; }
.units li {
  display: grid;
  grid-template-columns: minmax(140px, 25%) 1fr;
  gap: 4px 14px;
  border-bottom: 1px solid var(--border);
  padding: 7px 4px;
  transition: background .16s var(--ease);
}
.units li:hover { background: var(--sidebar); }
.units li span { color: var(--secondary); }
.units.projects li { grid-template-columns: minmax(128px, 22%) 1fr auto; }
.contact-lead { font: 550 clamp(19px, 3vw, 25px)/1.3 var(--sans); margin: 0 0 18px; }
.channels {
  display: grid;
  grid-template-columns: minmax(35px, 75px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 640px;
  padding: 8px 10px;
}
.channels span { color: var(--secondary); }

.boot {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 7vh 7vw;
  background: var(--anthracite);
  transition: opacity .3s ease;
}
.boot.exiting { opacity: 0; pointer-events: none; }
#boot-log { width: min(86ch, 100%); height: 21em; margin: 0; font: clamp(11px, 1.5vw, 14px)/1.55 var(--mono); color: var(--secondary); white-space: pre-wrap; }
#boot-log strong { color: var(--primary); font-weight: 500; }
#skip-boot { position: absolute; bottom: 18px; right: 19px; background: var(--sidebar); font-size: 12px; }
html.booting .mark, html.booting .home-info, html.revealing .home-info, html.revealing .mark figcaption {
  visibility: hidden;
}
.home-info.appear { animation: output-in .32s .12s var(--ease) both; }
@keyframes output-in { from { opacity: 0; translate: 0 3px; } }

/* Show a single panel even when the browser cannot run JavaScript. */
#desktop .workspace { display: none; }
.terminal-ready #desktop .workspace.active,
html:not(.terminal-ready) #desktop .workspace:target,
html:not(.terminal-ready) #desktop:not(:has(.workspace:target)) #home {
  display: block;
}

@media (min-width: 768px) {
  #desktop { padding-top: 53px; padding-bottom: 49px; }
  .terminal-ready #desktop .workspace.active,
  html:not(.terminal-ready) #desktop .workspace:target,
  html:not(.terminal-ready) #desktop:not(:has(.workspace:target)) #home {
    display: grid;
    min-height: calc(100svh - 102px);
    grid-auto-rows: max-content;
    align-content: safe center;
    justify-items: center;
    padding: 24px;
  }
  .workspace .window { width: min(1100px, 92vw); }
}

.workspace.replay .window { animation: workspace-in .48s var(--ease) both; }
.workspace.replay .output { animation: output-in .28s .14s var(--ease) both; }
@keyframes workspace-in {
  from {
    opacity: 0;
    transform: perspective(1900px) translateX(calc(var(--direction) * 16px)) rotateY(calc(var(--direction) * 9deg));
  }
}

dialog {
  color: var(--text);
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(560px, calc(100vw - 26px));
  box-shadow: 0 20px 60px #000a;
  padding: 0;
}
dialog[open] { animation: output-in .19s var(--ease) both; }
dialog::backdrop { background: #0b0d12ba; backdrop-filter: blur(5px); }
#launcher { margin: max(62px, 16vh) auto auto; max-height: calc(82dvh - 52px); }
.launcher-input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
}
.launcher-input input { color: var(--text); border: 0; background: none; outline: 0; flex: 1; min-width: 0; padding: 4px; }
.launcher-input:focus-within { box-shadow: inset 0 -1px var(--primary); }
#commands { position: relative; list-style: none; padding: 5px; margin: 0; max-height: 37dvh; overflow-y: auto; }
#commands li { display: flex; gap: 8px; justify-content: space-between; padding: 7px 9px; border-radius: 5px; cursor: pointer; }
#commands li span { color: var(--secondary); font-size: 12px; text-align: right; }
#commands li:hover, #commands li[aria-selected="true"] { background: var(--tint); color: var(--hover); }
#launcher footer { padding: 7px 13px; color: var(--secondary); border-top: 1px solid var(--border); font-size: 11px; }
#command-output { margin: 0; padding: 10px 13px; color: var(--primary); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
#external form { padding: 20px; }
#external h2 { margin: 0; font-size: 16px; }
#external-url { overflow-wrap: anywhere; color: var(--secondary); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 1040px) { .chip.identity { display: none; } }
@media (max-width: 767px) {
  .chip.event, .keyhint { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; min-height: 0; }
  .bar nav a { min-height: 35px; }
  .bar nav a span { display: none; }
  .status { justify-content: space-between; }
  .status button { margin-left: 0; }
  .units.projects li { grid-template-columns: 1fr auto; }
  .units.projects li span { grid-row: 2; grid-column: 1 / -1; }
  .units.projects li a { grid-row: 1; grid-column: 2; }
}
@media (max-width: 390px) {
  .bar nav { gap: 3px; }
  .bar nav a { padding: 0 6px; }
  .facts div { gap: 8px; }
  .units li { grid-template-columns: minmax(100px, 43%) 1fr; gap: 8px; }
  .command .comment { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.workspace.replay .echo {
  display: inline-block;
  animation: echo-in .24s .12s steps(var(--letters, 12), end) both;
}
@keyframes echo-in { from { clip-path: inset(0 100% 0 0); } }

.stack-list h2 {
  color: var(--primary);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 18px 0 9px;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 11px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tech {
  position: relative;
  display: grid;
  grid-template: "icon name" auto "icon role" auto / auto minmax(0, 1fr);
  align-content: center;
  gap: 2px 10px;
  width: 100%;
  min-height: 76px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: var(--glass);
  text-align: left;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), transform .16s var(--ease);
}
.tech::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}
.tech:hover, .tech:focus-visible {
  border-color: var(--primary);
  background: var(--tint);
  transform: translateY(-2px);
}
.tech i {
  grid-area: icon;
  align-self: center;
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  background: var(--sidebar);
  color: var(--primary);
  border-radius: 7px;
  font-style: normal;
  font-size: 11px;
}
.tech strong { grid-area: name; font-size: 13px; }
.tech:hover strong { color: var(--hover); }
.tech small { grid-area: role; color: var(--secondary); font-size: 11px; }
#tech-detail form { padding: 20px; }
#tech-detail h2 { margin: 0; font-size: 16px; }
#tech-detail p { color: var(--secondary); }
#tech-detail button {
  padding: .35em .8em;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--primary);
  background: var(--tint);
}
#tech-detail button:hover { color: var(--background); background: var(--primary); }

@media (max-width: 450px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .tech { padding: 8px; gap: 2px 6px; }
  .tech i { min-width: 23px; height: 26px; }
}