:root {
  --bg: #0a0f0c; --fg: #c8e8cd; --card: #0f1612; --sec: #19221d; --muted: #768d7a;
  --border: #223227; --green: #60e56b; --cyan: #00d1d9; --amber: #eab532; --red: #ea3c3f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { background: var(--bg); color: var(--fg); font: 14px/1.6 "JetBrains Mono", ui-monospace, Menlo, monospace; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(#0000 0 2px, #0000001f 3px, #0000 4px); }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.g { color: var(--green); font-style: normal; }
.c { color: var(--cyan); }
.a { color: var(--amber); font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); background: #0a0f0ccc; backdrop-filter: blur(8px); }
.nav-in { display: flex; align-items: center; gap: 1rem; padding-block: .75rem; }
.brand { color: var(--green); font-weight: 700; font-size: 13px; white-space: nowrap; }
.nav ul { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem 1rem; font-size: 12px; }
.nav ul a { color: var(--muted); transition: color .2s; }
.nav ul a:hover { color: var(--green); }
.nav ul span { color: var(--green); }

/* windows */
main { display: flex; flex-direction: column; gap: 1.5rem; padding-block: 2rem; }
.win { background: var(--card); border: 1px solid var(--border); border-radius: .3rem; overflow: hidden; box-shadow: 0 0 30px -12px #60e56b59; }
.bar { display: flex; align-items: center; gap: .375rem; padding: .5rem .75rem; background: var(--sec); border-bottom: 1px solid var(--border); }
.bar i { width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.bar i:first-child { background: var(--red); }
.bar i:nth-child(2) { background: var(--amber); }
.bar span { margin-left: .5rem; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.body { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; }
.cmd { display: flex; flex-wrap: wrap; gap: .5rem; font-size: 12px; }

/* about */
.boot { min-height: 20rem; }
.boot .body { gap: .25rem; }
.log { color: var(--muted); font-size: 13px; }
.whoami { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
h1 { color: var(--green); font-size: clamp(1.9rem, 5vw, 2.4rem); line-height: 1.2; text-shadow: 0 0 12px #60e56b80; }
.role { color: var(--cyan); font-size: 1.1rem; }
.lead { max-width: 44rem; color: #c8e8cde6; }
.meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: 12px; color: var(--muted); }
.meta b { color: var(--amber); font-weight: 400; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.cursor::after { content: "▋"; margin-left: 4px; color: var(--green); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .4; } }

/* projects */
.list > li { padding-block: .5rem; border-top: 1px solid var(--border); }
.list > li:first-child { border-top: 0; padding-top: 0; }
summary { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; color: var(--green); transition: transform .2s; }
details[open] > summary::before { transform: rotate(90deg); }
summary b { width: 10rem; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
summary span { flex: 1; font-size: 12px; color: var(--muted); }
.more { margin: .75rem 0 0 1.5rem; padding-left: 1rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: .75rem; }
.more .a { font-size: 12px; overflow-wrap: anywhere; }
.pts li, .plus li { display: flex; gap: .5rem; color: #c8e8cde6; }
.pts li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--green); }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags span { padding: .1rem .5rem; font-size: 12px; color: var(--muted); background: var(--sec); border: 1px solid var(--border); border-radius: 2px; }
.links { display: flex; gap: 1rem; font-size: 12px; }
.links a, .contact a { color: var(--green); }
.links a::before { content: "↗ "; }
.links a:hover { text-decoration: underline; }

/* experience */
.jobs { display: flex; flex-direction: column; gap: 1.25rem; }
.jobs > li { padding-left: 1rem; border-left: 2px solid var(--border); }
.jobs > li:first-child { border-color: var(--green); }
.job { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; margin-bottom: .5rem; }
.job .muted { margin-left: auto; font-size: 12px; }
.plus li::before { content: "+"; color: var(--green); }

/* skills + education */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .grid { grid-template-columns: 1fr 1fr; } }
.skills dt { margin-top: .75rem; font-size: 12px; color: var(--muted); }
.skills dt:first-child { margin-top: 0; }
.skills dt::before { content: "Group: "; color: var(--amber); }
.skills dt::after { content: " /*"; }
.skills dd { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .25rem; }
.skills dd span::before { content: "✓ "; color: var(--green); }
.cards { display: flex; flex-direction: column; gap: .75rem; }
.cards li { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; border: 1px solid var(--border); border-radius: 2px; background: #19221d66; font-size: 13px; }
.cards .c, .cards .muted { font-size: 12px; }

/* contact */
.contact { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.contact a { display: flex; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 2px; background: #19221d66; color: var(--fg); overflow: hidden; transition: border-color .2s, color .2s; }
.contact a:hover { border-color: var(--green); color: var(--green); }
.contact b { width: 5rem; flex-shrink: 0; font-size: 12px; font-weight: 400; color: var(--amber); }
footer { padding-block: 1rem; text-align: center; font-size: 12px; color: var(--muted); }

@media (max-width: 640px) {
  .nav-in { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .nav ul { margin-left: 0; justify-content: flex-start; }
  summary { flex-wrap: wrap; }
  summary span { flex-basis: 100%; padding-left: 1.1rem; }
  .job .muted { margin-left: 0; }
}

/* boot animation: only when JS runs and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .js .log, .js .whoami, .js .reveal { opacity: 0; transform: translateY(1rem); transition: opacity .5s, transform .5s; }
  .js .log { transform: none; transition-duration: .15s; }
  .js .on { opacity: 1; transform: none; }
}