/* rajeevranjan.me: neon terminal theme, from the hotspotd welcome site. System fonts only. */
:root {
  --bg: #040705;
  --panel: #08130c;
  --panel-2: #0c1c12;
  --glass: rgba(6, 15, 9, .9);
  --line: #1c3a26;
  --line-hi: #2f6b43;
  --edge: #3f9a5c;          /* borders of controls: 3:1 or more on the panels */
  --g: #3dff6b;
  --g-glow: rgba(61, 255, 107, .45);
  --g-soft: rgba(61, 255, 107, .1);
  --on-g: #021a08;
  --text: #d4f7dc;
  --muted: #8fbf9b;
  --dim: #6f9a7a;
  --amber: #ffc35a;
  --cyan: #5ce1ff;
  --pink: #ff7ad9;
  --red: #ff6b6b;
  --font: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --r: 10px;
  --gutter: 16px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(61, 255, 107, .09), transparent 60%),
    linear-gradient(rgba(61, 255, 107, .035) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(61, 255, 107, .03) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--bg);
  color: var(--text);
  font: 15px/1.6 var(--font);
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(61, 255, 107, .15);
}
@media (min-width: 720px) { body { font-size: 16px; } }

/* CRT: faint scanlines and vignette above everything, never catching clicks */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .35));
}

.bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .5; }
.app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

h1, h2, h3, p, ul, ol, dl, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--g); text-underline-offset: 3px; }
a:hover { text-shadow: 0 0 8px var(--g-glow); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
kbd { font: inherit; font-size: .85em; padding: 0 .35em; border: 1px solid var(--line-hi); border-bottom-width: 2px; border-radius: 4px; color: var(--text); }
img, svg, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* Focus: always visible on keyboard use */
a:focus, button:focus, input:focus, summary:focus, [tabindex]:focus { outline: 2px solid var(--g); outline-offset: 3px; box-shadow: 0 0 0 5px rgba(61, 255, 107, .18); }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; box-shadow: none; }
h1:focus, h2:focus, main:focus { outline: none; box-shadow: none; }
input:focus { outline-offset: 1px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 12px 16px; background: var(--g); color: var(--on-g); font-weight: 700; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 8px; }

.cursor { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--g); box-shadow: 0 0 8px var(--g-glow); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { transform: scale(.6); opacity: .55; } }

/* ---------- Status bar, header and menu ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgba(4, 10, 6, .94); border-bottom: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .45); padding-top: env(safe-area-inset-top, 0px); }
@supports ((-webkit-backdrop-filter: blur(4px)) or (backdrop-filter: blur(4px))) {
  .top { background: rgba(4, 10, 6, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.top-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); min-height: 52px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
@media (min-width: 400px) { .top-in { font-size: 14px; } }
.brand { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; margin-right: auto; min-height: 44px; min-width: 0; text-decoration: none; color: var(--g); font-weight: 700; text-shadow: 0 0 10px var(--g-glow); white-space: nowrap; overflow: hidden; }
/* Room inside the clipping box for the text's glow, so its edge doesn't show */
.brand-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 8px 10px; margin: -8px -10px; }
.brand .cursor { width: .5em; height: .95em; }
.ps1-path { color: var(--text); text-shadow: none; }
.nb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); box-shadow: 0 0 10px var(--g); flex: none; display: inline-block; }
.brand .nb-dot { animation: pulse 2.6s ease-in-out infinite; }
.sb-sep { color: var(--dim); flex: none; }
.sb-role { flex: 1 1 auto; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-time { flex: none; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-city, .sb-tz { color: var(--muted); }
.cmd-btn, .menu-btn { flex: none; min-height: 40px; padding: 0 12px; background: transparent; border-radius: 8px; white-space: nowrap; }
.cmd-btn { border: 1px solid var(--line-hi); color: var(--muted); }
.cmd-btn:hover { color: var(--g); border-color: var(--edge); }
.menu-btn { border: 1px solid var(--edge); color: var(--g); }
.menu-btn[aria-expanded="true"] { background: var(--g); color: var(--on-g); }
@media (max-width: 899px) { .cmd-btn, .sb-city { display: none; } }
@media (max-width: 899px) { .sb-sep, .sb-role { display: none; } }
@media (max-width: 599px) { .sb-tz { display: none; } }
@media (max-width: 399px) { .sb-time, .brand .ps1-path, .brand .cursor { display: none; } .menu-btn { padding: 0 10px; } }

.nav { display: none; }
.nav.is-open { display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--line-hi); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(61, 255, 107, .05); padding: 8px; animation: drop .18s ease-out; max-height: calc(100vh - 80px); overflow-y: auto; }
@media (min-width: 600px) { .nav.is-open { left: auto; width: 340px; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.nav-list, .side-nav { list-style: none; }
.nav a, .side-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 6px; color: var(--text); text-decoration: none; }
.nav a .k, .side-nav a .k { color: var(--g); }
.nav a:hover, .nav a[aria-current], .side-nav a:hover, .side-nav a[aria-current] { background: var(--g-soft); color: var(--g); text-shadow: none; }
.nav a[aria-current]::after, .side-nav a[aria-current]::after { content: "<"; content: "<" / ""; margin-left: auto; color: var(--g); animation: blink 1.1s steps(1) infinite; }
.nav-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-top: 6px; padding: 4px 4px 0 8px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.nav-foot .link-btn { color: var(--g); }
.nav-time { font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.shell { flex: 1 0 auto; width: 100%; max-width: 1240px; margin: 0 auto; padding: 14px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.side { display: none; }
@media (min-width: 1100px) {
  .shell { grid-template-columns: 270px minmax(0, 1fr); }
  .main { grid-column: 2; }
  .side:not([hidden]) { display: grid; gap: 16px; position: sticky; top: 76px; grid-column: 1; grid-row: 1; max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.main { min-width: 0; }
.cmdline { min-height: 1.6em; margin: 0 0 12px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdline .ps1 { color: var(--g); }
.cmdline .ps1-path { color: var(--muted); }
.cmdline #cmd-text { color: var(--text); }
.cmdline .cursor { width: .5em; height: .95em; }
.view { display: grid; gap: 20px; min-width: 0; }
.view > * { min-width: 0; }
.boot { color: var(--muted); padding: 24px 0; }
.no-js .boot, .no-js .cmdline { display: none; }

/* ---------- Terminal windows and panels ---------- */
.win { position: relative; min-width: 0; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 0 0 1px rgba(61, 255, 107, .03), 0 14px 44px rgba(0, 0, 0, .5), inset 0 0 60px rgba(61, 255, 107, .025); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 0 12px; border-bottom: 1px solid var(--line); background: linear-gradient(rgba(61, 255, 107, .06), rgba(61, 255, 107, .02)); font-size: 12px; color: var(--muted); }
.dots { display: inline-flex; gap: 6px; flex: none; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; }
.dots i:nth-child(2) { background: #ffbd2e; }
.dots i:nth-child(3) { background: #27c93f; }
.win-title { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 46px; font-size: 12px; font-weight: 400; color: var(--muted); }
.win-body { padding: 18px 16px 20px; container-type: inline-size; }
@media (min-width: 720px) { .win-body { padding: 24px 26px 28px; } }

.panel { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 16px; min-width: 0; }
.panel-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--g); text-transform: uppercase; }
.panel-h::before { content: ""; width: 6px; height: 6px; background: var(--g); box-shadow: 0 0 8px var(--g); }
.panel-h.amber { color: var(--amber); }
.panel-h.amber::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.panel-h.cyan { color: var(--cyan); }
.panel-h.cyan::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.panel-h.pink { color: var(--pink); }
.panel-h.pink::before { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.panel p { font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.side .side-nav a { min-height: 38px; font-size: 14px; }

/* ---------- Type ---------- */
.cmd { font-size: 13px; color: var(--muted); margin: 0 0 10px; overflow-wrap: anywhere; }
.cmd .p { color: var(--g); }
/* "# Title", with a long title hanging after the "#" instead of dropping below it */
.page-h { display: flex; align-items: baseline; font-size: clamp(26px, 7vw, 40px); line-height: 1.15; color: var(--g); text-shadow: 0 0 14px var(--g-glow); letter-spacing: -.01em; overflow-wrap: anywhere; }
.page-h::before { content: "# "; content: "# " / ""; flex: none; white-space: pre; color: var(--dim); text-shadow: none; }
.page-h .gl { min-width: 0; }
.post-h { font-size: clamp(24px, 6vw, 34px); }
.lead { margin-top: 10px; color: var(--text); max-width: 68ch; }
.sec-h { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--g); margin: 0 0 14px; }
.sec-h::before { content: "## "; content: "## " / ""; color: var(--dim); }
.muted { color: var(--muted); }
.prose { max-width: 70ch; }
.prose p + p { margin-top: 12px; }
.note { margin-top: 14px; font-size: 13px; color: var(--amber); }
.note::before { content: "i "; content: "i " / ""; color: var(--cyan); font-weight: 700; }
.more-row { margin-top: 10px; }
.more { display: inline-flex; align-items: center; gap: 1ch; min-height: 44px; font-size: 14px; }

/* Glitch on the page heading as a page arrives */
.gl { position: relative; display: inline-block; }
.gl.is-glitching::before, .gl.is-glitching::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.gl.is-glitching::before { color: var(--cyan); transform: translate(-3px, 0); clip-path: inset(10% 0 55% 0); animation: gl1 .45s steps(3) both; text-shadow: none; }
.gl.is-glitching::after { color: var(--pink); transform: translate(3px, 0); clip-path: inset(60% 0 8% 0); animation: gl2 .45s steps(3) both; text-shadow: none; }
@keyframes gl1 { 0% { clip-path: inset(0 0 70% 0); } 50% { clip-path: inset(40% 0 30% 0); transform: translate(4px, 0); } 100% { clip-path: inset(100% 0 0 0); } }
@keyframes gl2 { 0% { clip-path: inset(70% 0 0 0); } 50% { clip-path: inset(20% 0 55% 0); transform: translate(-4px, 0); } 100% { clip-path: inset(0 0 100% 0); } }

/* ---------- Buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--g); border-radius: 8px; background: rgba(61, 255, 107, .04); color: var(--g); text-decoration: none; font-weight: 600; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s, transform .15s; }
.btn .k { color: var(--dim); font-weight: 400; }
.btn:hover { background: var(--g-soft); box-shadow: 0 0 18px rgba(61, 255, 107, .25); text-shadow: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--g); color: var(--on-g); box-shadow: 0 0 22px rgba(61, 255, 107, .35); }
.btn-primary .k { color: rgba(2, 26, 8, .7); }
.btn-primary:hover { background: #6bff8f; color: var(--on-g); }
.btn-sm { min-height: 40px; padding: 0 12px; font-size: 14px; font-weight: 400; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 420px) { .btn-row .btn { flex: 1 1 100%; } }
.btn-row.wrap .btn { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
.link-btn { min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--g); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--line-hi); border-radius: 6px; font-size: 13px; color: var(--text); background: rgba(61, 255, 107, .035); white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.chip:hover { border-color: var(--g); color: var(--g); }
a.chip { min-height: 44px; padding: 0 12px; text-decoration: none; border-color: var(--edge); }
.jump { margin-top: 16px; }
.tag { display: inline-block; margin-left: 8px; padding: 0 6px; border: 1px solid rgba(255, 195, 90, .6); border-radius: 4px; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); vertical-align: 1px; }

/* ---------- Reveal and page transitions ---------- */
.js .rv { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 65ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.view.is-leaving { animation: wipe-out .17s steps(4, end) forwards; }
@keyframes wipe-out { to { opacity: .1; clip-path: inset(0 0 100% 0); } }
.view.is-entering { animation: glitch-in .34s steps(5, end) both; }
@keyframes glitch-in {
  0% { opacity: 0; transform: translateX(-8px); clip-path: inset(0 0 92% 0); }
  25% { opacity: 1; transform: translateX(5px); clip-path: inset(0 0 60% 0); }
  50% { transform: translateX(-3px); clip-path: inset(0 0 30% 0); }
  75% { transform: translateX(2px); clip-path: inset(0 0 8% 0); }
  100% { transform: none; clip-path: inset(0 0 0 0); }
}
.loading { color: var(--muted); }

/* ---------- Home ---------- */
.hero-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@container (min-width: 640px) { .hero-grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 30px; } }
.portrait { position: relative; width: 100%; max-width: min(340px, 74vw); margin: 0 auto; aspect-ratio: 1 / 1; border: 1px solid var(--line-hi); border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(61, 255, 107, .08), #020503 70%); overflow: hidden; box-shadow: 0 0 40px rgba(61, 255, 107, .12), inset 0 0 40px rgba(0, 0, 0, .6); }
@supports not (aspect-ratio: 1 / 1) { .portrait { height: 0; padding-top: 100%; } }
.portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait .corner { position: absolute; z-index: 2; font-size: 11px; color: var(--muted); padding: 6px 8px; pointer-events: none; }
.portrait .corner.tl { top: 0; left: 0; }
.portrait .corner.br { right: 0; bottom: 0; color: var(--g); }
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; }
.ph-mono { font-size: clamp(56px, 22vw, 110px); font-weight: 800; line-height: 1; color: var(--g); text-shadow: 0 0 22px var(--g-glow), 3px 0 0 rgba(92, 225, 255, .35), -3px 0 0 rgba(255, 122, 217, .3); letter-spacing: -.04em; }
.ph-cap { font-size: 12px; color: var(--muted); }
.hero-text { min-width: 0; }
.hero-name { font-size: clamp(30px, 9vw, 54px); line-height: 1.08; color: var(--g); text-shadow: 0 0 18px var(--g-glow); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tagline { margin-top: 12px; font-size: 1.05em; color: var(--text); }
.roles { margin-top: 10px; min-height: 1.6em; color: var(--cyan); }
.roles .pr { color: var(--dim); }
.roles .cursor { background: var(--cyan); box-shadow: 0 0 8px rgba(92, 225, 255, .6); }
.bio { margin-top: 12px; color: var(--text); max-width: 64ch; }
.hero-kv { margin-top: 14px; font-size: 14px; }
.hero-kv dt::after, .spec dt::after, .elsewhere dt::after { content: ":"; }
.duo { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "ls" list of pages, with their number keys */
.ls { list-style: none; display: grid; gap: 4px; }
@container (min-width: 560px) { .ls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; } }
.ls a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: baseline; min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.ls a:hover { border-color: var(--line-hi); background: var(--g-soft); text-shadow: none; }
.ls .k, .ls .t { color: var(--g); font-weight: 700; }
.ls .d { grid-column: 2; font-size: 13px; color: var(--muted); }

/* "ls -l" rows: projects and posts. Stacked when narrow, columns when there's room. */
.lsl { list-style: none; display: grid; gap: 2px; margin: 0 -10px; }
.lsl a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 8px; color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
.lsl a:hover { border-color: var(--line-hi); background: var(--g-soft); text-shadow: none; }
.lsl-perm { display: none; color: var(--dim); }
.lsl-name { flex: 1 1 100%; min-width: 0; color: var(--g); font-weight: 700; overflow-wrap: anywhere; }
.lsl-name .slash { color: var(--dim); font-weight: 400; }
.lsl-kind { color: var(--cyan); font-size: 13px; }
.lsl-year { color: var(--amber); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lsl-sum { flex: 1 1 100%; min-width: 0; font-size: 14px; color: var(--muted); }
.lsl a.is-client .lsl-perm { color: var(--amber); }
@container (min-width: 620px) {
  .lsl a { display: grid; grid-template-columns: 10ch 15ch 8ch minmax(0, 1fr); grid-template-areas: "perm kind year name" ". sum sum sum"; gap: 2px 14px; }
  .lsl-perm { display: block; grid-area: perm; }
  .lsl-name { grid-area: name; }
  .lsl-kind { grid-area: kind; font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lsl-year { grid-area: year; font-size: inherit; }
  .lsl-sum { grid-area: sum; }
  .lsl.posts a { grid-template-columns: 10ch 10ch 6ch minmax(0, 1fr); }
}

/* cat ~/elsewhere: "key: handle" rows */
.elsewhere { display: grid; font-size: 14px; }
.elsewhere > div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; align-items: center; border-bottom: 1px dashed var(--line); }
.elsewhere > div:last-child { border-bottom: 0; }
.elsewhere dt { color: var(--muted); }
.elsewhere dd { margin: 0; min-width: 0; }
.elsewhere a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.ext::after { content: "↗"; content: "↗" / ""; font-size: .85em; margin-left: 4px; }

/* ---------- Projects ---------- */
.exp { list-style: none; display: grid; gap: 0; }
.exp li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.exp li:last-child { border-bottom: 0; }
@container (min-width: 620px) { .exp li { grid-template-columns: 26ch minmax(0, 1fr); gap: 16px; } }
.exp .n { color: var(--g); font-weight: 700; }
.exp .n::before { content: "- "; content: "- " / ""; color: var(--dim); font-weight: 400; }
.exp .dt { color: var(--muted); font-size: 14px; }

/* Case study */
.fact { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--g); border-radius: 0 8px 8px 0; background: var(--g-soft); color: var(--g); font-size: 1.05em; text-shadow: 0 0 10px var(--g-glow); overflow-wrap: anywhere; }
.fact .pr { color: var(--dim); text-shadow: none; }
.case-meta { margin-top: 18px; }
.links-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Keep each link on one line: inherited overflow-wrap:anywhere let flex squeeze it to a letter per line. */
.links-row .btn { white-space: nowrap; overflow-wrap: normal; max-width: 100%; }
.feat { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 560px) { .feat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 960px) { .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; background: linear-gradient(transparent, rgba(61, 255, 107, .08), transparent); opacity: 0; pointer-events: none; }
.card:hover { border-color: var(--line-hi); transform: translateY(-2px); box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 24px rgba(61, 255, 107, .1); }
.card:hover::before { opacity: 1; animation: sweep 1.1s ease-out; }
@keyframes sweep { from { transform: translateY(0); } to { transform: translateY(380%); } }
.card h3 { font-size: 16px; line-height: 1.35; color: var(--g); overflow-wrap: anywhere; }
.card h3::before { content: "> "; content: "> " / ""; color: var(--dim); }
.card p { font-size: 14px; }
.steps { list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding: 12px 14px 12px 50px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); font-size: 14px; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 14px; top: 12px; color: var(--g); font-weight: 700; }
.steps b { display: block; color: var(--g); }
.stack { display: grid; gap: 0; }
.stack div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.stack div:last-child { border-bottom: 0; }
@container (min-width: 560px) { .stack div { grid-template-columns: 16ch minmax(0, 1fr); gap: 16px; align-items: baseline; } }
.stack dt { color: var(--muted); font-size: 14px; }
.stack dd { margin: 0; }
.stats { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.stat { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.stat-v { font-size: clamp(26px, 6vw, 36px); font-weight: 800; line-height: 1.05; color: var(--g); text-shadow: 0 0 14px var(--g-glow); overflow-wrap: anywhere; }
.stat-l { font-size: 13px; color: var(--muted); }

/* ---------- Skills ---------- */
.skill-groups { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .skill-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skill-groups .panel-h { font-size: 13px; }
.panel-h .n { margin-left: auto; color: var(--dim); font-weight: 400; letter-spacing: 0; }

/* ---------- Timeline (git log) ---------- */
.timeline { list-style: none; position: relative; display: grid; gap: 18px; padding-left: 26px; margin-top: 20px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--g), rgba(61, 255, 107, .1)); box-shadow: 0 0 10px rgba(61, 255, 107, .4); }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -25px; top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--g); box-shadow: 0 0 10px var(--g-glow); }
.tl-item.is-now::before { background: var(--g); animation: pulse 1.6s ease-in-out infinite; }
.tl-card { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 6px; transition: border-color .2s; }
.tl-card:hover { border-color: var(--line-hi); }
.tl-hash { font-size: 13px; color: var(--amber); overflow-wrap: anywhere; }
.tl-hash .ref { color: var(--cyan); }
.tl-when { font-size: 13px; color: var(--muted); }
.tl-when .lbl { color: var(--dim); white-space: pre; }
.tl-title { font-size: 17px; line-height: 1.35; color: var(--g); }
.tl-meta { font-size: 13px; color: var(--muted); }
.tl-card p { font-size: 14px; }
.awards { list-style: none; display: grid; gap: 10px; }
.awards li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.awards .ic { color: var(--amber); }
.awards .t { color: var(--text); font-weight: 700; }
.awards .d { grid-column: 2; font-size: 13px; color: var(--muted); }
.edu { list-style: none; display: grid; gap: 10px; }
.edu li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.edu .w { font-size: 13px; color: var(--amber); }
.edu .t { color: var(--g); font-weight: 700; }
.edu .p, .edu .x { font-size: 14px; color: var(--muted); }

/* ---------- About ---------- */
.about-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
@container (min-width: 760px) { .about-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.bullets { list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--text); }
.bullets li { position: relative; padding-left: 18px; }
.bullets li::before { content: ">"; content: ">" / ""; position: absolute; left: 0; color: var(--g); }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.faq summary { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 10px 14px; color: var(--g); font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; content: "+" / ""; flex: none; color: var(--dim); font-weight: 400; }
.faq details[open] summary::before { content: "-"; content: "-" / ""; }
.faq summary:focus-visible { outline-offset: -2px; }
.faq details p { padding: 0 14px 14px 36px; font-size: 14px; color: var(--text); }

/* ---------- Contact ---------- */
.mail-card { display: grid; gap: 12px; margin-top: 18px; padding: 18px 16px; border: 1px solid rgba(61, 255, 107, .45); border-radius: var(--r); background: linear-gradient(160deg, rgba(61, 255, 107, .08), var(--glass) 55%); }
.mail-addr { font-size: clamp(16px, 4.8vw, 26px); font-weight: 700; color: var(--g); overflow-wrap: anywhere; text-decoration: none; text-shadow: 0 0 12px var(--g-glow); }
.mail-addr:hover { text-decoration: underline; }
.mail-card .btn-row { margin-top: 4px; }
.ico { display: inline-flex; flex: none; }
.ico svg { width: 18px; height: 18px; }

/* ---------- hotspotd diagram ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; margin: 18px 0 4px; }
@container (min-width: 700px) { .flow { grid-template-columns: minmax(0, 1fr) minmax(60px, .7fr) minmax(0, 1.3fr) minmax(60px, .7fr) minmax(0, 1fr); align-items: center; } }
.node { position: relative; width: 100%; max-width: 320px; padding: 14px; border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel); text-align: center; display: grid; gap: 4px; justify-items: center; }
.node .ico { color: var(--g); }
.node .ico svg { width: 30px; height: 30px; }
.node .nm { font-weight: 700; color: var(--text); }
.node .st { font-size: 12px; color: var(--muted); }
.node.you .st { color: var(--g); }
.node.phone { border-color: var(--g); box-shadow: 0 0 26px rgba(61, 255, 107, .18); }
.stages { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.stages li { padding: 2px 7px; border: 1px solid var(--line-hi); border-radius: 5px; font-size: 11px; color: var(--muted); animation: stage 3.2s linear infinite; animation-delay: calc(var(--s) * .4s); }
@keyframes stage { 0%, 12% { color: var(--on-g); background: var(--g); border-color: var(--g); } 22%, 100% { color: var(--muted); background: transparent; border-color: var(--line-hi); } }
.wire { position: relative; width: 2px; height: 56px; background: repeating-linear-gradient(to bottom, var(--line-hi) 0 6px, transparent 6px 10px); }
.wire .lbl { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.pkt { position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--g); box-shadow: 0 0 10px var(--g); animation: pkt-v 1.6s linear infinite; }
.pkt:nth-child(2) { animation-delay: .53s; }
.pkt:nth-child(3) { animation-delay: 1.06s; }
@keyframes pkt-v { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(48px); opacity: 0; } }
@container (min-width: 700px) {
  .wire { width: 100%; height: 2px; background: repeating-linear-gradient(to right, var(--line-hi) 0 6px, transparent 6px 10px); }
  .wire .lbl { left: 50%; top: 10px; transform: translateX(-50%); width: 78%; white-space: normal; text-align: center; line-height: 1.3; }
  .pkt { top: -3px; left: 0; animation-name: pkt-h; }
}
@keyframes pkt-h { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }

/* Key: value sheet */
.spec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; font-size: 14px; }
.spec > div { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.spec > div:last-child { border-bottom: 0; }
@container (min-width: 520px) { .spec > div { grid-template-columns: 12ch minmax(0, 1fr); gap: 16px; } }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; color: var(--text); overflow-wrap: anywhere; min-width: 0; }

/* ---------- Blog post ---------- */
.post-meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.post-meta time { color: var(--amber); }
.post { max-width: 72ch; margin-top: 24px; font-size: 1em; line-height: 1.75; color: var(--text); overflow-wrap: break-word; }
.post > * + * { margin-top: 1.05em; }
.post h2 { margin-top: 1.9em; font-size: 1.22em; line-height: 1.35; color: var(--g); text-shadow: 0 0 10px var(--g-glow); }
.post h2::before { content: "## "; content: "## " / ""; color: var(--dim); text-shadow: none; }
.post h3 { margin-top: 1.6em; font-size: 1.06em; line-height: 1.4; color: var(--cyan); }
.post h3::before { content: "### "; content: "### " / ""; color: var(--dim); }
.post h4 { margin-top: 1.4em; font-size: 1em; color: var(--amber); }
.post ul, .post ol { padding-left: 1.6em; }
.post ul { list-style-type: "> "; }
.post li::marker { color: var(--g); }
.post ol li::marker { color: var(--amber); }
.post li + li { margin-top: .35em; }
.post code { font: inherit; font-size: .9em; padding: .08em .35em; background: rgba(61, 255, 107, .08); border: 1px solid var(--line); border-radius: 4px; color: var(--g); overflow-wrap: anywhere; }
.post pre { padding: 14px 16px; background: #020503; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
.post pre code { padding: 0; border: 0; background: none; color: var(--text); font-size: inherit; overflow-wrap: normal; }
.post blockquote { padding: 4px 0 4px 16px; border-left: 2px solid var(--amber); color: var(--muted); font-style: italic; }
.post blockquote > * + * { margin-top: .8em; }
.post a { color: var(--g); }
.post img { height: auto; border: 1px solid var(--line-hi); border-radius: 8px; }
.post hr { height: 1px; border: 0; margin: 2em 0; background: repeating-linear-gradient(90deg, var(--line-hi) 0 6px, transparent 6px 10px); }
.post .table-scroll { overflow-x: auto; }
.post table { border-collapse: collapse; min-width: 60%; font-size: 14px; }
.post th, .post td { padding: 6px 12px; border: 1px solid var(--line); text-align: left; }
.post th { color: var(--g); background: var(--g-soft); }
.post-nav { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--line); }

/* ---------- 404 and errors ---------- */
.err-line { color: var(--red); overflow-wrap: anywhere; }
.big404 { font-size: clamp(72px, 26vw, 160px); font-weight: 800; line-height: 1; color: rgba(61, 255, 107, .16); text-shadow: 0 0 2px rgba(61, 255, 107, .5), 4px 0 0 rgba(92, 225, 255, .14), -4px 0 0 rgba(255, 122, 217, .12); letter-spacing: -.04em; margin: 8px 0; }
.suggest { margin-top: 16px; }

/* ---------- Command line ---------- */
.layer { position: relative; z-index: 80; }
.cli-wrap { position: fixed; inset: 0; z-index: 85; display: flex; align-items: flex-end; justify-content: center; padding: 16px var(--gutter) max(12px, env(safe-area-inset-bottom, 0px)); }
.modal-bg { position: absolute; inset: 0; background: rgba(1, 4, 2, .6); animation: fade .2s ease-out both; }
@keyframes fade { from { opacity: 0; } }
.cli { position: relative; width: 100%; max-width: 880px; max-height: min(72vh, 640px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--g); border-radius: 12px; box-shadow: 0 0 0 1px rgba(61, 255, 107, .1), 0 0 60px rgba(61, 255, 107, .18), 0 30px 80px rgba(0, 0, 0, .8); overflow: hidden; animation: cli-up .22s cubic-bezier(.2, .9, .3, 1.1) both; }
@supports (max-height: 1dvh) { .cli { max-height: min(72dvh, 640px); } }
@keyframes cli-up { from { opacity: 0; transform: translateY(18px); } }
.cli .win-title { padding-right: 0; }
.x-btn { flex: none; min-width: 44px; min-height: 40px; margin-right: -10px; background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; }
.x-btn:hover { color: var(--g); }
.cli-out { flex: 1 1 auto; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 4px; font-size: 14px; line-height: 1.6; }
.cli-out:focus-visible { outline-offset: -2px; }
.cli-echo { color: var(--text); overflow-wrap: anywhere; }
.cli-echo .p { color: var(--g); }
.cli-res { margin: 2px 0 12px; color: var(--text); overflow-wrap: anywhere; }
.cli-res > * + * { margin-top: 2px; }
.cli-res .err { color: var(--red); }
.cli-res .g { color: var(--g); }
.cli-res .c { color: var(--cyan); }
.cli-res .a { color: var(--amber); }
.cli-res .m { color: var(--muted); }
.cli-res code { font: inherit; color: var(--g); }
.cli-res a { display: inline-block; min-height: 28px; }
.cli-table { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 18px; }
.cli-table dt { color: var(--g); white-space: nowrap; }
.cli-table dd { margin: 0; color: var(--muted); min-width: 0; }
@media (max-width: 520px) { .cli-table { grid-template-columns: minmax(0, 1fr); } .cli-table dd { margin-bottom: 4px; padding-left: 2ch; } }
.cli-cols { display: flex; flex-wrap: wrap; gap: 0 2.5ch; }
.neo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: start; }
.neo-art { color: var(--g); text-shadow: 0 0 10px var(--g-glow); white-space: pre; line-height: 1.25; font-size: 13px; }
.neo dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 12px; }
.neo dt { color: var(--g); }
.neo dt::after { content: ":"; }
.neo dd { margin: 0; min-width: 0; }
.neo .swatch { display: flex; gap: 4px; margin-top: 8px; grid-column: 1 / -1; }
.neo .swatch i { width: 18px; height: 12px; border-radius: 2px; }
@media (max-width: 560px) { .neo { grid-template-columns: minmax(0, 1fr); } .neo-art { display: none; } }
.cli-form { display: flex; align-items: center; gap: 0; padding: 2px 14px; border-top: 1px solid var(--line); background: #030805; }
.cli-form:focus-within { box-shadow: inset 0 0 0 2px var(--g); }
.cli-ps1 { flex: none; max-width: 60%; color: var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.cli-ps1 .path { color: var(--text); }
@media (max-width: 520px) { .cli-ps1 .who { display: none; } }
.cli-in { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 0 0 1ch; background: transparent; border: 0; color: var(--text); caret-color: var(--g); font-size: 16px; }
.cli-in:focus { outline: none; box-shadow: none; }
.cli-hint { padding: 6px 14px 10px; font-size: 12px; color: var(--dim); background: #030805; }

/* ---------- Boot intro (first visit only) ---------- */
.bootscreen { display: none; }
.booting .bootscreen { display: block; position: fixed; inset: 0; z-index: 90; padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gutter); background: radial-gradient(ellipse at 50% -10%, rgba(61, 255, 107, .09), transparent 60%), var(--bg); animation: boot-failsafe .3s 4s forwards; }
.bootscreen.is-done { opacity: 0; transition: opacity .25s ease-out; }
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; } }
.bootlog { max-width: 1240px; margin: 0 auto; font: 13px/1.75 var(--font); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 720px) { .bootlog { font-size: 15px; } }
.bootlog .ok { color: var(--g); }
.bootlog .t { color: var(--dim); }
.bootlog .p { color: var(--g); text-shadow: 0 0 10px var(--g-glow); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); background: rgba(4, 7, 5, .85); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.keys-hint { display: none; }
.toggles { display: flex; flex-wrap: wrap; gap: 0 18px; }
@media (hover: hover) and (pointer: fine) { .keys-hint { display: inline; } }

/* ---------- Calm mode (reduced motion) ---------- */
.rm *, .rm *::before, .rm *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.rm .cursor, .rm .nb-dot, .rm .stages li, .rm .nav a[aria-current]::after, .rm .side-nav a[aria-current]::after, .rm .tl-item.is-now::before { animation: none !important; }
.rm .pkt { display: none; }
.rm .bg { opacity: .3; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pkt, .bootscreen { display: none !important; }
}

/* ---------- Readability ---------- */
/* Nothing smaller than 12px. */
.tag, .portrait .corner, .stages li, .wire .lbl { font-size: 12px; }
kbd { font-size: max(.85em, 12px); }
/* Comfortable line length for paragraphs on wide screens; the fact box keeps the window's width. */
.win-body p:not(.fact), .tl-card p, .faq details p { max-width: 75ch; }
/* Laptops and desktops: secondary text one step up, so it reads as easily as the body. */
@media (min-width: 1100px) {
  .kv, .panel p, .cmd, .cmdline, .note, .chip, .ls .d, .tl-hash, .tl-when, .tl-meta, .stat-l, .awards .d, .edu .w, .post-meta, .foot-in { font-size: 14px; }
  .lsl-sum, .card p, .steps li, .stack dt, .tl-card p, .faq details p, .bullets, .spec, .hero-kv, .elsewhere, .exp .dt, .edu .p, .edu .x, .cli-out, .side .side-nav a { font-size: 15px; }
}
/* The name in the status bar never gets cut; the role text gives way instead. */
@media (min-width: 600px) { .brand { flex-shrink: 0; } }
/* Touch screens: no keyboard hints, and roomier taps on small inline links. */
@media (hover: none) and (pointer: coarse) { #keys-hint, #keys { display: none; } }
@media (max-width: 699px), (hover: none) and (pointer: coarse) {
  .kv dd a, .elsewhere dd a, .spec dd a:not(.btn) { display: inline-block; padding: 8px 0; margin: -8px 0; }
}

@media print {
  body::after, .bg, .top, .foot, .layer, .cmdline, .side, .bootscreen { display: none !important; }
  body { background: #fff; color: #000; }
}