:root {
  --bg: #0D0E0F; --panel: #17191B; --panel-2: #1F2225; --line: rgba(255,246,230,.12);
  --cream: #FFF6E6; --muted: rgba(255,246,230,.72); --faint: rgba(255,246,230,.45);
  --lime: #B7F35B; --mint: #2EE6A8; --aqua: #38D8F5; --yellow: #FFDE59; --red: #FF5A5F; --sage: #8FE3A2;
  --grad: linear-gradient(90deg, var(--lime), var(--mint), var(--aqua));
  --grad-diag: linear-gradient(35deg, var(--yellow), var(--lime) 28%, var(--mint) 62%, var(--aqua));
  --head: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radius: 26px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--cream); font-family: var(--head); font-size: 18px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 75% 10%, rgba(46,230,168,.10), transparent 45%), radial-gradient(circle at 10% 90%, rgba(56,216,245,.07), transparent 40%); }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- desktop shell: the whole site is one browser window ---------- */
.shell { position: relative; max-width: 1180px; margin: 0 auto; padding: 22px 20px 40px; }
.window { border: 5px solid transparent; border-radius: var(--radius);
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad-diag) border-box; }
.titlebar { display: flex; align-items: center; gap: 18px; padding: 0 16px 0 22px; min-height: 64px;
  border-bottom: 4px solid transparent; border-image: var(--grad) 1; position: sticky; top: env(safe-area-inset-top, 0px);
  background: var(--bg); z-index: 20; border-radius: calc(var(--radius) - 5px) calc(var(--radius) - 5px) 0 0; }
.dots { display: flex; gap: 8px; flex: none; }
.dots i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: var(--red); } .dots i:nth-child(2) { background: var(--yellow); } .dots i:nth-child(3) { background: var(--mint); }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; align-self: stretch; align-items: flex-end; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font-family: var(--mono); font-size: 14px; text-decoration: none; color: var(--faint); padding: 12px 16px 12px;
  border-radius: 12px 12px 0 0; white-space: nowrap; position: relative; }
.tab:hover { color: var(--cream); }
.tab[aria-current="page"] { color: var(--cream); background: var(--panel); }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px; background: var(--grad); }
.termbtn { font-family: var(--mono); font-weight: 700; font-size: 15px; background: var(--panel); color: var(--mint);
  border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; cursor: pointer; flex: none; }
.termbtn:hover { border-color: var(--mint); }
main { padding: clamp(24px, 5vw, 64px); min-height: 60vh; }
.page[hidden] { display: none; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--head); font-weight: 800; margin: 0; line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); text-transform: uppercase; }
h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 40em; }
.mono { font-family: var(--mono); }
.grad-text { background: var(--grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rule { height: 7px; width: 110px; border-radius: 4px; background: var(--grad); margin: 22px 0 28px; }
.section { margin-top: clamp(64px, 9vw, 110px); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.link-more { font-family: var(--mono); font-size: 15px; color: var(--mint); text-decoration: none; font-weight: 700; }
.link-more:hover { text-decoration: underline; }

/* ---------- buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { font-family: var(--head); font-weight: 700; font-size: 16px; text-decoration: none; border-radius: 999px; padding: 14px 24px;
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; }
.btn-primary { background: var(--cream); color: var(--bg); }
.btn-primary:hover { background: #fff; }
.btn-ghost { color: var(--cream); border: 3px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; padding: 11px 21px; }
.btn-ghost:hover { background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad) border-box; }

/* ---------- home hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.wordmark { font-size: clamp(2.7rem, 6.7vw, 5.8rem); line-height: .88; letter-spacing: -0.035em; text-transform: lowercase; }
.wordmark .ln { white-space: nowrap; display: block; }
.wordmark .amp { background: var(--grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cmdbar { margin: 30px 0 26px; display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: clamp(15px, 1.8vw, 20px);
  border: 3px solid transparent; border-radius: 16px; padding: 14px 18px; max-width: 34em;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box; }
.cmdbar .prompt { color: var(--mint); font-weight: 700; }
.cmdbar .typed { flex: 1; min-height: 1.4em; white-space: nowrap; overflow: hidden; }
.caret { width: 4px; height: 1.2em; background: var(--aqua); border-radius: 2px; animation: blink 1s steps(1) infinite; flex: none; }
@keyframes blink { 50% { opacity: 0; } }
.avatar-wrap { position: relative; justify-self: center; width: min(100%, 380px); }
.avatar { border-radius: 50%; border: 8px solid transparent; aspect-ratio: 1;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad-diag) border-box; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-wrap .spark { position: absolute; right: -6%; top: -4%; width: 26%; }
.sticker-wrap { justify-self: center; width: min(100%, 520px); }
.sticker { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(46,230,168,.14)); }

/* ls listing */
.ls { background: var(--panel); border-radius: 22px; padding: clamp(20px, 3vw, 34px); font-family: var(--mono); }
.ls .cmd { color: var(--faint); font-size: 15px; margin-bottom: 14px; }
.ls .cmd b { color: var(--mint); }
.ls a { display: grid; grid-template-columns: 7.5em 12em 1fr; gap: 18px; align-items: baseline; padding: 14px 10px; text-decoration: none;
  border-top: 1px solid var(--line); border-radius: 8px; }
.ls a:hover { background: var(--panel-2); }
.ls .perm { color: var(--faint); font-size: 14px; }
.ls .dir { color: var(--mint); font-weight: 700; font-size: 17px; }
.ls .desc { color: var(--cream); font-family: var(--head); font-size: 16.5px; }

/* changelog entries */
.entries { display: grid; gap: 0; }
.entry { display: grid; grid-template-columns: 150px 1fr; gap: 28px; padding: 28px 4px; border-top: 1px solid var(--line); text-decoration: none; }
.entry:last-child { border-bottom: 1px solid var(--line); }
.entry:hover h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--mint); }
.entry .meta { font-family: var(--mono); font-size: 14px; color: var(--faint); display: grid; gap: 6px; align-content: start; }
.entry .ver { color: var(--mint); font-weight: 700; font-size: 16px; }
.entry h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 10px; }
.entry p { color: var(--muted); margin: 0 0 12px; max-width: 42em; }
.tag { font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; display: inline-block; color: var(--bg); }
.tag[data-p="career-ops"] { background: var(--aqua); } .tag[data-p="home-ops"] { background: var(--lime); }
.tag[data-p="tools"] { background: var(--yellow); } .tag[data-p="real-life"] { background: var(--sage); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 22px; }
.chip { font-family: var(--mono); font-size: 14px; color: var(--cream); background: var(--panel); border: 1px solid var(--line);
  padding: 9px 15px; border-radius: 999px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--cream); color: var(--bg); border-color: var(--cream); font-weight: 700; }

/* status mini + page */
.statusmini { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: var(--panel);
  border-radius: 22px; padding: 22px 26px; text-decoration: none; }
.statusmini:hover { background: var(--panel-2); }
.statusmini .sm-body { min-width: 0; }
.statusmini .sm-title { font-weight: 800; font-size: 1.25rem; }
.statusmini .sm-state { color: var(--lc); }
.statusmini .sm-sub { color: var(--muted); font-size: 16px; }
.pill { font-family: var(--mono); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; white-space: nowrap; color: var(--bg); }
.s-op { background: var(--mint); } .s-deg { background: var(--yellow); } .s-part { background: #FF9F5A; } .s-maj { background: var(--red); } .s-maint { background: var(--aqua); }
.lvl-green { --lc: #2EE6A8; } .lvl-yellow { --lc: #FFDE59; } .lvl-red { --lc: #FF5A5F; }
/* status light: a small dot with a ring that pulses outward, like a real status page */
.light { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--lc); flex: none;
  box-shadow: 0 0 10px var(--lc); }
.light::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lc); animation: pulse 2.2s ease-out infinite; }
.lvl-red .light::after { animation-duration: 1.2s; }
@keyframes pulse { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.seg .light::after, .pv .light::after, .setup .light::after { display: none; }
.banner { border-radius: 22px; padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px;
  align-items: start; margin: 8px 0 18px; background: var(--panel); border: 3px solid var(--lc); }
.banner dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 28px; row-gap: 16px; align-items: baseline; }
.banner dt { font-family: var(--mono); font-size: 14px; color: var(--faint); }
.banner dd { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--cream); }
.banner dd.st { color: var(--lc); font-weight: 700; display: flex; align-items: center; gap: 12px; }
.banner dd.upd { color: var(--muted); font-weight: 400; }
.deps { display: flex; flex-wrap: wrap; gap: 8px; }
.deps span { font-size: 15px; font-weight: 500; line-height: 1.3; padding: 3px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.editor { background: var(--panel); border-radius: 22px; padding: clamp(20px, 3vw, 32px); margin-bottom: 18px; }
.editor[hidden] { display: none; }
.editor h3 { margin-bottom: 16px; }
.editor .lbl { display: block; font-family: var(--mono); font-size: 14px; color: var(--faint); margin: 22px 0 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg button { font-family: var(--mono); font-weight: 700; font-size: 15px; display: inline-flex; gap: 10px; align-items: center; padding: 12px 16px;
  border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--cream); cursor: pointer; }
.seg button .light { width: 13px; height: 13px; box-shadow: 0 0 10px var(--lc); animation: none; }
.seg button[aria-checked="true"] { border-color: var(--lc); background: color-mix(in srgb, var(--lc) 16%, var(--bg)); }
.seg.small button { padding: 7px 11px; font-size: 13px; gap: 8px; border-radius: 11px; }
.editor input[type=text] { width: 100%; font: inherit; font-size: 16px; background: var(--bg); color: var(--cream); border: 2px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.editor input[type=text]:focus { border-color: var(--mint); outline: none; }
.ecomp { display: grid; grid-template-columns: minmax(0, 10em) auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.ecomp .n { font-weight: 700; }
.editor .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.editor .emsg { font-family: var(--mono); font-size: 14.5px; color: var(--mint); }
.comp { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 11.5em; gap: 20px; align-items: center; padding: 20px 4px; border-top: 1px solid var(--line); }
.comp .pill { justify-self: end; }
.gauge { display: flex; align-items: center; gap: 14px; }
.meter { flex: 1; height: 28px; border-radius: 6px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255,246,230,.08) 0 7px, transparent 7px 10px); }
.meter .fill { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(90deg, var(--lc) 0 7px, transparent 7px 10px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--lc) 35%, transparent); transition: width .5s ease; }
.gauge .pct { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--lc); min-width: 3.2em; text-align: right; }
.slide { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.slide input[type=range] { flex: 1 1 160px; accent-color: var(--mint); min-height: 28px; }
.pv { font-family: var(--mono); font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; min-width: 14em; color: var(--lc); }
.pv .light { width: 12px; height: 12px; box-shadow: 0 0 10px var(--lc); animation: none; }
.thr { display: flex; flex-wrap: wrap; gap: 12px 26px; font-family: var(--mono); font-size: 14.5px; color: var(--muted); }
.thr label { display: inline-flex; align-items: center; gap: 8px; }
.thr input { width: 4.2em; font: inherit; background: var(--bg); color: var(--cream); border: 2px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.thr input:focus { border-color: var(--mint); outline: none; }
.comp:last-of-type { border-bottom: 1px solid var(--line); }
.comp .name { font-weight: 700; }
.comp .note { display: block; font-size: 14.5px; color: var(--muted); font-weight: 400; line-height: 1.4; margin-top: 3px; }
.bars { display: flex; gap: 2px; height: 30px; }
.bars i { flex: 1; border-radius: 2px; min-width: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-family: var(--mono); font-size: 13px; color: var(--faint); }
.legend span { display: inline-flex; gap: 7px; align-items: center; }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.kv { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; row-gap: 12px; }
.kv dt { color: var(--faint); }
.kv dd { margin: 0; color: var(--cream); }
.kv a { color: var(--mint); }
.subs-list .sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 12px 4px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 15px; }
.subs-list .sub span:first-child { overflow-wrap: anywhere; }
.subs-list .sub span:last-child { color: var(--faint); font-size: 13.5px; }
.incidents { display: grid; gap: 18px; }
.inc-tools { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.linkbtn { background: none; border: 0; padding: 0; font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--mint); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--red); }
.editor select, .editor input[type=date], .editor textarea { width: 100%; font: inherit; font-size: 16px; background: var(--bg); color: var(--cream);
  border: 2px solid var(--line); border-radius: 12px; padding: 11px 14px; color-scheme: dark; }
.editor textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.editor select:focus, .editor input[type=date]:focus, .editor textarea:focus { border-color: var(--mint); outline: none; }
.editor .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .editor .row2 { grid-template-columns: minmax(0, 1fr); } }
.incident { background: var(--panel); border-radius: 20px; padding: 22px 26px; }
.incident .when { font-family: var(--mono); font-size: 14px; color: var(--faint); margin-left: 8px; }
.incident h3 { margin: 12px 0 8px; font-size: 1.25rem; }
.incident p { color: var(--muted); margin: 0; }

/* post */
.back { font-family: var(--mono); color: var(--mint); text-decoration: none; font-weight: 700; font-size: 15px; }
.post-head { margin: 26px 0 8px; max-width: 900px; }
.post-head h1 { max-width: 17ch; }
.post-head h1 { font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1; }
.post-meta { font-family: var(--mono); font-size: 14px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
.prose { max-width: 40em; font-size: 19px; line-height: 1.75; }
.prose p { margin: 0 0 1.2em; color: rgba(255,246,230,.9); }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); text-transform: none; margin: 1.8em 0 .6em; letter-spacing: -0.015em; }
.prose ul { padding: 0; list-style: none; margin: 0 0 1.4em; }
.prose li { padding-left: 1.8em; position: relative; margin-bottom: .55em; }
.prose li::before { content: ">"; position: absolute; left: 0; font-family: var(--mono); font-weight: 700; color: var(--mint); }
.prose strong { color: var(--cream); }
.callout { font-family: var(--mono); font-size: 17px; border: 3px solid transparent; border-radius: 16px; padding: 18px 22px; margin: 1.6em 0;
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--grad) border-box; line-height: 1.6; }
.callout b { color: var(--mint); }

/* about */
.about-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(28px, 5vw, 64px); align-items: center; }
.about-hero h1 { font-size: clamp(3.4rem, 11vw, 8rem); line-height: .88; letter-spacing: -0.035em; }
.about-hero h1 .dot { color: var(--yellow); }
.about-hero .rule { margin-top: 36px; }
.whoami { background: var(--panel); border-radius: 22px; padding: 26px 28px; font-family: var(--mono); font-size: 15.5px; line-height: 1.9; }
.whoami .cmd { color: var(--mint); font-weight: 700; margin-bottom: 6px; }
.whoami dl { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
.whoami dt { color: var(--faint); }
.whoami dd { margin: 0; color: var(--cream); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 60px); align-items: start; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-family: var(--mono); font-size: 16.5px; }
.checks li { display: flex; gap: 14px; align-items: center; }
.checks svg { flex: none; }
.did { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.did li { font-size: 17.5px; color: var(--muted); }
.did b { color: var(--cream); }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.perks li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; font-size: 17.5px; color: var(--muted); line-height: 1.45; }
.perks b { color: var(--cream); }
.perks .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; }
.perks .ico svg { width: 30px; height: 30px; }
.aside { margin-top: 22px; font-family: var(--mono); font-size: 15.5px; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.egg { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: var(--panel); border-radius: 22px; padding: 24px 28px; }
.egg p { margin: 0; color: var(--muted); }
.egg kbd { font-family: var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--mint); }

/* newsletter */
.nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.nl-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.nl-form input { flex: 1 1 240px; min-width: 0; width: 100%; font: inherit; font-size: 16px; background: var(--panel); color: var(--cream); border: 2px solid var(--line);
  border-radius: 999px; padding: 13px 20px; }
.nl-form input:focus { border-color: var(--mint); outline: none; }
.nl-msg { font-family: var(--mono); font-size: 14.5px; color: var(--mint); margin-top: 12px; min-height: 1.4em; }
.issue { background: var(--panel); border-radius: 22px; overflow: hidden; }
.issue .bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 3px solid transparent; border-image: var(--grad) 1; }
.issue .bar span { font-family: var(--mono); font-size: 13.5px; color: var(--faint); }
.issue .body { padding: 22px 26px 26px; font-family: var(--mono); font-size: 15.5px; line-height: 1.7; }
.issue .body h4 { margin: 18px 0 4px; color: var(--mint); font-size: 15.5px; }
.issue .body h4:first-child { margin-top: 0; }
.issue .body p { margin: 0; color: var(--cream); }
.strip { background: var(--panel); border-radius: 26px; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }

/* templates */
.shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; }
.shelf { background: var(--panel); border-radius: 22px; padding: clamp(18px, 2.6vw, 28px); }
.shelf .cmd { font-family: var(--mono); color: var(--faint); font-size: 15px; margin-bottom: 8px; }
.shelf .cmd b { color: var(--mint); }
.shelf h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 4px 0 6px; }
.shelf > p { color: var(--muted); font-size: 16px; margin-bottom: 14px; }
.tpl { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 6px; border-top: 1px solid var(--line); }
.tpl.compact { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; }
.tpl .foot { margin-top: 10px; }
.tpl h3 { font-size: 1.08rem; margin: 2px 0 4px; letter-spacing: -0.005em; }
.tpl p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.tpl .pill { display: inline-block; }
.tpl a.get { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--mint); }
.pill.s-backlog { background: transparent; color: var(--faint); border: 1px solid var(--line); }
.pill.s-wip { background: var(--yellow); }
.pill.s-shipped { background: var(--mint); }
.tpl-teaser { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tpl-teaser .shelf h2 { font-size: 1.3rem; }

/* connect */
.ping { background: var(--panel); border-radius: 22px; padding: clamp(20px, 3vw, 34px); font-family: var(--mono); max-width: 760px; }
.ping .cmd { color: var(--faint); margin-bottom: 12px; }
.ping .cmd b { color: var(--mint); }
.ping a, .ping .row { display: grid; grid-template-columns: 8.5em 1fr auto; gap: 16px; align-items: center; padding: 16px 10px; border-top: 1px solid var(--line);
  text-decoration: none; border-radius: 8px; }
.ping a:hover { background: var(--panel-2); }
.ping .row { padding: 16px 10px; border-top: 1px solid var(--line); }
.ping .net { color: var(--mint); font-weight: 700; }
.ping .handle { color: var(--cream); overflow-wrap: anywhere; }
.ping .go { color: var(--faint); font-size: 14px; }

/* 404 */
.nf { max-width: 40em; }
.nf h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: .95; margin-bottom: 20px; }

/* footer */
footer { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; padding: 22px clamp(24px, 5vw, 64px) 26px;
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 14px; color: var(--faint); }
footer kbd { font-family: var(--mono); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--mint); }

/* terminal overlay */
.term { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(8,9,10,.72); backdrop-filter: blur(4px); }
.term[hidden] { display: none; }
.term .window { width: min(760px, 100%); height: min(560px, calc(100vh - 40px)); height: min(560px, calc(100dvh - 40px)); display: flex; flex-direction: column; background:
  linear-gradient(#0A0B0C, #0A0B0C) padding-box, var(--grad-diag) border-box; }
.term .tbar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 3px solid transparent; border-image: var(--grad) 1; }
.term .tbar span { font-family: var(--mono); font-size: 14px; color: var(--faint); flex: 1; }
.term .close { background: none; border: 0; color: var(--faint); font-family: var(--mono); font-size: 14px; cursor: pointer; }
.term .out { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 8px; font-family: var(--mono); font-size: 15px; line-height: 1.65; white-space: pre-wrap; }
.term .out .u { color: var(--mint); font-weight: 700; }
.term .out .dim { color: var(--faint); }
.term .out .y { color: var(--yellow); }
.term form { display: flex; gap: 10px; align-items: center; padding: 8px 20px 18px; font-family: var(--mono); font-size: 15px; }
.term form label { color: var(--mint); font-weight: 700; white-space: nowrap; }
.term input { flex: 1; background: transparent; border: 0; color: var(--cream); font: inherit; caret-color: var(--aqua); }
.term input:focus { outline: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .hero, .about-hero, .nl, .strip, .cols, .shelves, .tpl-teaser { grid-template-columns: minmax(0, 1fr); }
  .avatar-wrap { width: min(70%, 300px); justify-self: start; }
  .about-hero .avatar-wrap { order: -1; }
  .sticker-wrap { width: min(100%, 440px); justify-self: center; }
  .about-hero .sticker-wrap { order: -1; }
  .ls a { grid-template-columns: 1fr; gap: 4px; }
  .ls .perm { display: none; }
  .entry { grid-template-columns: 1fr; gap: 10px; }
  .entry .meta { grid-auto-flow: column; justify-content: start; gap: 14px; align-items: center; }
  .comp { grid-template-columns: minmax(0, 1fr) auto; }
  .comp .gauge { grid-column: 1 / -1; grid-row: 2; }
  .statusmini { grid-template-columns: auto 1fr; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .banner .btn { justify-self: start; }
  .ecomp { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .statusmini .link-more { grid-column: 1 / -1; }
  .ping a, .ping .row { grid-template-columns: 1fr auto; }
  .ping .net { grid-column: 1 / -1; }
  .egg { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .banner dl { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .banner dd { margin-bottom: 12px; }
  .statusmini { align-items: start; gap: 16px; padding: 20px 22px; }
  .statusmini .light { margin-top: 8px; }
  .statusmini .sm-title { font-size: 1.15rem; line-height: 1.35; }
  .statusmini .sm-state { display: block; white-space: nowrap; font-size: 1rem; font-weight: 600; margin-top: 2px; }
  .statusmini .sm-sub { font-size: 15px; margin-top: 4px; }
  .statusmini .sm-label { white-space: nowrap; }
  .shell { padding: 10px 10px 24px; }
  .titlebar { padding: 0 10px 0 14px; gap: 10px; }
  .dots i { width: 11px; height: 11px; }
  .tab { font-size: 13px; padding: 11px 11px; }
  body { font-size: 17px; }
  .prose { font-size: 17.5px; }
}
@media (max-width: 360px) {
  .statusmini { gap: 12px; padding: 18px 18px; }
  .statusmini .sm-title { font-size: 1.05rem; }
  .statusmini .sm-state { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .caret, .light::after { animation: none; }
  .light::after { display: none; }
  html { scroll-behavior: auto; }
}

/* now playing */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; margin-right: 10px; vertical-align: -1px; }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--mint); transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; background: var(--lime); }
.eq i:nth-child(3) { animation-delay: -.6s; background: var(--aqua); }
.eq i:nth-child(4) { animation-delay: -.15s; background: var(--yellow); }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.banner dd.np { font-weight: 500; }
.banner dd.np a { color: var(--cream); text-decoration: none; border-bottom: 2px solid var(--mint); }
.banner dd.np .by { color: var(--faint); font-weight: 400; }
.banner dd.np.idle { color: var(--muted); }
.np-last { display: block; color: var(--faint); font-weight: 400; }
.np-last a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.np-mini { font-size: 15px; color: var(--cream); margin-top: 4px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sticker-wrap[hidden] { display: none; }

/* admin */
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.admin-grid .shelf h2 { font-size: 1.7rem; margin-bottom: 10px; }
.admin-grid .shelf p { color: var(--muted); }
.admin-login { max-width: 560px; }
.setup { list-style: none; padding: 0; margin: 6px 0 18px; display: grid; gap: 10px; font-family: var(--mono); font-size: 15px; }
.setup li { display: flex; align-items: center; gap: 12px; }
.setup .light { width: 12px; height: 12px; box-shadow: 0 0 10px var(--lc); animation: none; }
.setup li.todo { color: var(--muted); }
.small-note { font-family: var(--mono); font-size: 13.5px; color: var(--faint); }
.small-note code { color: var(--mint); overflow-wrap: anywhere; }
.flash { font-family: var(--mono); color: var(--mint); margin-bottom: 18px; }
.key-warn { font-family: var(--mono); font-size: 14px; line-height: 1.55; color: var(--yellow) !important; border: 2px solid rgba(255,222,89,.4); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
@media (max-width: 860px) { .admin-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .eq i { animation: none; transform: scaleY(.7); } }