:root {
  color-scheme: dark;
  --bg: #080d18;
  --surface: #0e1626;
  --surface-strong: #121d31;
  --text: #f2f5ff;
  --muted: #8f9bb2;
  --line: rgba(173, 190, 220, 0.15);
  --accent: #8ba7ff;
  --accent-strong: #b0c1ff;
  --mint: #62dbc7;
  --danger: #ff8f9d;
  --max: 1120px;
  --radius: 22px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
button, input { font: inherit; }
a { color: inherit; }
::selection { background: rgba(139, 167, 255, 0.32); }

.ambient {
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(130px);
  opacity: 0.13;
  pointer-events: none;
}
.ambient-one { width: 520px; height: 520px; background: #4169e1; top: -220px; left: -180px; }
.ambient-two { width: 460px; height: 460px; background: #1cbaa4; top: 38%; right: -280px; }

.site-header {
  width: min(calc(100% - 40px), var(--max));
  height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 720; letter-spacing: -0.02em; }
.brand-mark {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid rgba(139, 167, 255, 0.4); border-radius: 10px;
  background: linear-gradient(145deg, rgba(139,167,255,.2), rgba(98,219,199,.08));
  color: var(--accent-strong); font: 700 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .2s ease; }
.site-nav a:hover { color: var(--text); }
.site-nav .nav-github { color: var(--text); }

main, footer { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.hero { padding: 112px 0 132px; max-width: 850px; }
.eyebrow, .section-kicker {
  color: var(--accent); text-transform: uppercase; letter-spacing: .14em;
  font: 650 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(98,219,199,.09); }
h1 { margin: 0; font-size: clamp(44px, 7.2vw, 82px); line-height: 1.05; letter-spacing: -.055em; font-weight: 760; }
h1 span { color: var(--muted); }
.hero-copy { max-width: 650px; margin: 32px 0 0; color: var(--muted); font-size: clamp(17px, 2vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.button {
  min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-weight: 680; font-size: 14px; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--text); color: var(--bg); }
.button-primary:hover { background: #fff; }
.button-ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.button-ghost:hover { border-color: rgba(173,190,220,.32); background: rgba(255,255,255,.05); }

.tool-section, .content-section { scroll-margin-top: 30px; margin-bottom: 122px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.section-kicker { margin: 0 0 10px; }
h2 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.035em; }
.status { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa4b8; }
.status.online .status-dot { background: var(--mint); box-shadow: 0 0 0 5px rgba(98,219,199,.08); }
.status.offline .status-dot { background: var(--danger); }

.shortener-card {
  position: relative; overflow: hidden; padding: clamp(24px, 5vw, 50px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18,29,49,.92), rgba(11,18,32,.92));
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
}
.shortener-card::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--accent); filter: blur(100px); opacity: .07; top: -150px; right: -80px; pointer-events: none; }
label { display: block; margin-bottom: 10px; font-weight: 650; font-size: 14px; }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
input {
  width: 100%; min-height: 58px; padding: 0 18px; border: 1px solid var(--line); border-radius: 13px;
  outline: none; background: rgba(4,8,15,.55); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input::placeholder { color: #69758b; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139,167,255,.1); }
.submit-button { min-width: 126px; min-height: 58px; border: 0; }
.field-hint { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.form-message { margin: 14px 0 0; color: var(--danger); font-size: 14px; }
.button-loader { display: none; width: 16px; height: 16px; border: 2px solid rgba(8,13,24,.25); border-top-color: var(--bg); border-radius: 50%; animation: spin .7s linear infinite; }
.is-loading .button-label { display: none; }
.is-loading .button-loader { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.result { margin-top: 24px; padding: 18px; border: 1px solid rgba(98,219,199,.2); border-radius: 14px; background: rgba(98,219,199,.055); }
.result-meta { display: flex; justify-content: space-between; color: var(--muted); font: 650 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.result-ready { color: var(--mint); }
.result-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; }
.result-row a { color: var(--text); font: 650 clamp(14px, 2.3vw, 18px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.copy-button { flex: 0 0 auto; padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; }
.copy-button:hover { background: rgba(255,255,255,.09); }
.history { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.history-heading { display: flex; justify-content: space-between; align-items: center; }
.history-heading h3 { margin: 0; font-size: 15px; }
.history-heading button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.history-list, .history ul { list-style: none; padding: 0; margin: 12px 0 0; }
.history li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) auto; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(173,190,220,.09); align-items: center; font-size: 12px; }
.history li a { color: var(--accent-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-original { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-copy { border: 0; background: none; color: var(--muted); cursor: pointer; }

.text-link { color: var(--muted); font-size: 14px; text-decoration: none; }
.text-link:hover { color: var(--text); }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.project-card {
  min-height: 280px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(14,22,38,.72); text-decoration: none; transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.project-card:hover { transform: translateY(-4px); border-color: rgba(139,167,255,.38); background: var(--surface-strong); }
.project-featured { background: linear-gradient(140deg, rgba(66,92,167,.22), rgba(14,22,38,.8)); }
.project-top { display: flex; justify-content: space-between; color: var(--muted); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.arrow { transition: transform .2s ease; }
a:hover .arrow { transform: translate(2px,-2px); }
.project-card h3 { margin: auto 0 6px; font-size: 28px; letter-spacing: -.03em; }
.project-card p { min-height: 48px; margin: 0; color: var(--muted); font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.tags span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }

.service-list { border-top: 1px solid var(--line); }
.service-list > a { display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line); text-decoration: none; }
.service-list > a:hover strong { color: var(--accent-strong); }
.service-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--accent); font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.service-list strong, .service-list small { display: block; }
.service-list strong { transition: color .2s ease; }
.service-list small { margin-top: 2px; color: var(--muted); }
.service-list .arrow { color: var(--muted); }

.section-note { color: var(--muted); font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.now-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.now-card { min-height: 310px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: rgba(14,22,38,.72); text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
.now-card:hover { transform: translateY(-4px); border-color: rgba(139,167,255,.38); }
.now-primary { background: linear-gradient(145deg, rgba(66,92,167,.25), rgba(14,22,38,.82)); }
.now-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.live-pill, .lab-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.lab-pill { color: var(--accent); }
.now-card h3 { margin: auto 0 8px; font-size: 30px; letter-spacing: -.04em; }
.now-card p { min-height: 72px; margin: 0; color: var(--muted); font-size: 14px; }
.now-link { margin-top: 22px; color: var(--accent-strong); font-size: 12px; font-weight: 700; }

.network-panel { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(260px,.65fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgba(10,17,30,.78); }
.network-map { position: relative; min-height: 540px; border-right: 1px solid var(--line); overflow: hidden; }
.network-map::before { content: ""; position: absolute; inset: 0; opacity: .3; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent); }
.network-lines span { position: absolute; display: block; background: rgba(139,167,255,.3); }
.line-top { left: 50%; top: 116px; width: 1px; height: 96px; }
.line-left { left: 17%; right: 50%; top: 295px; height: 1px; box-shadow: 0 125px 0 rgba(139,167,255,.3); }
.line-right { left: 50%; right: 17%; top: 295px; height: 1px; box-shadow: 0 125px 0 rgba(139,167,255,.3); }
.network-lines::after { content: ""; position: absolute; left: 17%; right: 17%; top: 211px; height: 209px; border: 1px solid rgba(139,167,255,.3); border-top: 0; }
.packet { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 13px var(--mint); }
.packet-one { left: 50%; top: 130px; animation: packet-down 4.5s infinite ease-in-out; }
.packet-two { left: 17%; top: 417px; animation: packet-across 6s infinite ease-in-out 1s; }
@keyframes packet-down { 0% { transform: translate(-3px,0); opacity:0; } 15%,85% { opacity:1; } 100% { transform: translate(-3px,286px); opacity:0; } }
@keyframes packet-across { 0% { transform: translate(0,-3px); opacity:0; } 15%,85% { opacity:1; } 100% { transform: translate(calc(66vw - 180px),-3px); opacity:0; } }
.network-node { position: absolute; z-index: 3; width: 142px; min-height: 70px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(14,23,39,.96); color: var(--text); text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.network-node > span:first-child { display: block; margin-bottom: 5px; color: var(--muted); font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; }
.network-node strong, .network-node small { display: block; }
.network-node strong { font-size: 13px; }
.network-node small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.network-node[data-service] .node-state { position: absolute; top: 13px; right: 13px; width: 7px; height: 7px; margin: 0; border-radius: 50%; background: #758197; }
.network-node[data-status="online"] .node-state { background: var(--mint); box-shadow: 0 0 0 4px rgba(98,219,199,.08); }
.network-node[data-status="offline"] .node-state { background: var(--danger); }
.node-source { left: 50%; top: 42px; transform: translateX(-50%); }
.node-core { left: 50%; top: 212px; transform: translateX(-50%); border-color: rgba(139,167,255,.42); }
.node-a { left: 8%; top: 382px; }.node-b { left: 29%; top: 382px; }.node-c { right: 29%; top: 382px; }.node-d { right: 8%; top: 382px; }
.telemetry { padding: 30px; background: rgba(3,7,14,.28); }
.telemetry-head { display: flex; justify-content: space-between; color: var(--muted); font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.telemetry-live { display: flex; align-items: center; gap: 7px; color: var(--mint); }
.telemetry-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.telemetry dl { margin: 34px 0; }
.telemetry dl div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.telemetry dt { color: var(--muted); font-size: 11px; }
.telemetry dd { margin: 5px 0 0; font: 700 18px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.telemetry > p { color: var(--muted); font-size: 10px; line-height: 1.7; }

.activity-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; }
.compact-heading h2 { font-size: clamp(28px,3vw,36px); }
.activity-list, .notes-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.activity-list li, .notes-list li { position: relative; padding: 20px 0; border-bottom: 1px solid var(--line); }
.activity-list a { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; text-decoration: none; }
.activity-list strong, .notes-list strong { font-size: 14px; }
.activity-list span, .notes-list p { color: var(--muted); font-size: 12px; }
.activity-list time, .notes-list time { color: var(--muted); font: 600 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.activity-list .language { grid-column: 1; }
.notes-list p { margin: 5px 0 0; line-height: 1.6; }
.notes-list time { display: block; margin-bottom: 7px; color: var(--accent); }
.loading-row { color: var(--muted); font-size: 12px; }

.stack-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.stack-grid article { min-height: 290px; padding: 26px; background: var(--surface); }
.stack-grid article > span { color: var(--accent); font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.stack-grid h3 { margin: 70px 0 18px; font-size: 23px; letter-spacing: -.03em; }
.stack-grid ul { list-style: none; padding: 0; margin: 0; }
.stack-grid li { padding: 5px 0; color: var(--muted); font-size: 13px; }

.language-panel { display: grid; grid-template-columns: 310px 1fr; gap: 52px; align-items: center; padding: clamp(25px,5vw,52px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(140deg,rgba(66,92,167,.16),rgba(10,17,30,.78)); }
.language-ring { width: 240px; aspect-ratio: 1; position: relative; display: grid; place-content: center; justify-items: center; border-radius: 50%; background: conic-gradient(var(--accent) 0 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),0 25px 60px rgba(0,0,0,.25); }
.language-ring::after { content:""; position:absolute; inset:22px; border-radius:50%; background:var(--bg); border:1px solid var(--line); }
.language-ring strong,.language-ring span { position:relative; z-index:1; }.language-ring strong { font:750 31px/1 ui-monospace,monospace; }.language-ring span { margin-top:8px; color:var(--muted); font:650 9px/1 ui-monospace,monospace; letter-spacing:.13em; }
.language-details>p { max-width:620px; margin:0 0 27px; color:var(--muted); font-size:14px; }.language-bar { display:flex; height:9px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.05); }.language-bar span { min-width:2px; }
.language-details ol { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 30px; margin:20px 0 0; padding:0; }.language-details li { display:grid; grid-template-columns:11px 1fr auto; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid rgba(173,190,220,.08); font-size:12px; }.language-details li i { width:8px; height:8px; border-radius:50%; }.language-details li span { color:var(--muted); font:600 10px/1 ui-monospace,monospace; }
.lab-callout { display:flex; align-items:end; justify-content:space-between; gap:40px; padding:clamp(28px,5vw,54px); border:1px solid rgba(98,219,199,.2); border-radius:var(--radius); background:radial-gradient(circle at 85% 20%,rgba(98,219,199,.1),transparent 30%),var(--surface); }.lab-callout h2 { font-size:clamp(36px,5vw,60px); }.lab-callout p:not(.section-kicker) { max-width:700px; margin:22px 0 0; color:var(--muted); }.lab-callout>a { flex:0 0 auto; }

.terminal-trigger { position: fixed; z-index: 20; right: 24px; bottom: 24px; min-width: 78px; height: 46px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; gap: 13px; border: 1px solid rgba(139,167,255,.32); border-radius: 13px; background: rgba(14,23,39,.9); backdrop-filter: blur(12px); color: var(--accent-strong); cursor: pointer; box-shadow: 0 14px 35px rgba(0,0,0,.3); }
.terminal-trigger span { font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }.terminal-trigger small { color: var(--muted); font-size: 10px; }
.terminal-backdrop { position: fixed; z-index: 50; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(3,6,12,.72); backdrop-filter: blur(9px); }
.terminal { width: min(680px,100%); overflow: hidden; border: 1px solid rgba(139,167,255,.28); border-radius: 16px; background: #080e18; box-shadow: 0 40px 100px rgba(0,0,0,.5); animation:terminal-enter .18s ease-out; }
.terminal header { height: 48px; padding: 0 15px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: #101928; color: var(--muted); font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.terminal header div { display: flex; gap: 7px; }.terminal header i { width: 9px; height: 9px; border-radius: 50%; background: #ff7c83; }.terminal header i:nth-child(2) { background:#f5c562; }.terminal header i:nth-child(3) { background:var(--mint); }
.terminal header button { justify-self: end; border: 0; background: none; color: var(--muted); font-size: 24px; cursor: pointer; }
.terminal-output { height: 330px; overflow-y: auto; padding: 22px; color: #bfcae0; font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace; }
.terminal-output p { margin: 0 0 6px; white-space: pre-wrap; animation:terminal-line .16s ease-out; }.terminal-output b { color: var(--mint); }.terminal-output .command { color: var(--accent-strong); }.terminal-output .error { color: var(--danger); animation:terminal-error .28s ease-out; }.terminal-output.terminal-pulse { box-shadow:inset 0 -22px 30px -32px rgba(98,219,199,.55); }
.terminal form { display: flex; gap: 9px; padding: 15px 20px; border-top: 1px solid var(--line); font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.terminal form label { flex: 0 0 auto; margin: 0; color: var(--mint); }.terminal form input { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.system-wipe { position:fixed; z-index:9999; inset:0; display:grid; place-items:center; padding:30px; overflow:hidden; background:#020304; color:#b9ffc7; font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; cursor:wait; }
.system-wipe::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.2; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(185,255,199,.14) 4px); animation:wipe-flicker .13s infinite; }
.wipe-log,.wipe-final { position:relative; width:min(680px,100%); }.wipe-log { max-height:70vh; overflow:hidden; }.wipe-log p { margin:0; animation:wipe-line .12s ease-out both; }.wipe-final { text-align:center; }.wipe-final strong,.wipe-final span { display:block; }.wipe-final strong { color:#ff7f8e; font-size:clamp(28px,7vw,62px); letter-spacing:.08em; text-shadow:0 0 24px rgba(255,127,142,.4); animation:signal-glitch .55s steps(2,end) 2; }.wipe-final span { margin-top:13px; color:#91a0aa; font-size:11px; }.system-wipe.restored strong { color:var(--mint); text-shadow:0 0 24px rgba(98,219,199,.4); }.is-wiping>main,.is-wiping>.site-header,.is-wiping>footer,.is-wiping>.terminal-trigger { animation:site-collapse 1.6s 1.2s cubic-bezier(.7,0,.9,.4) both; }
@keyframes terminal-enter { from { opacity:0; transform:translateY(8px) scale(.99); } } @keyframes terminal-line { from { opacity:0; transform:translateY(3px); } } @keyframes terminal-error { 25% { transform:translateX(-3px); } 55% { transform:translateX(3px); } } @keyframes wipe-line { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:none; } } @keyframes wipe-flicker { 50% { opacity:.1; } } @keyframes signal-glitch { 20% { transform:translateX(-3px); } 40% { transform:translateX(4px); clip-path:inset(35% 0 20%); } 70% { transform:translateX(-1px); clip-path:none; } } @keyframes site-collapse { 0% { opacity:1; filter:none; } 45% { filter:grayscale(1) contrast(1.8); transform:skewX(-1deg); } 100% { opacity:0; filter:blur(12px); transform:scale(.985); } }

footer { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 50px 0 28px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-brand { color: var(--text); }
footer p { margin: 15px 0 0; font-size: 13px; }
.footer-links { display: flex; gap: 22px; align-items: start; padding-top: 7px; }
.footer-links a { text-decoration: none; font-size: 13px; }
.footer-links a:hover { color: var(--text); }
.copyright { grid-column: 1 / -1; padding-top: 30px; border-top: 1px solid rgba(173,190,220,.08); }

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@media (max-width: 720px) {
  .site-header { height: 70px; }
  .site-nav a:not(.nav-github) { display: none; }
  .hero { padding: 78px 0 96px; }
  .hero-copy { font-size: 16px; }
  .tool-section, .content-section { margin-bottom: 88px; }
  .input-row { grid-template-columns: 1fr; }
  .submit-button { width: 100%; }
  .project-grid { grid-template-columns: 1fr; }
  .now-grid { grid-template-columns: 1fr; }
  .now-card { min-height: 240px; }
  .network-panel { grid-template-columns: 1fr; }
  .network-map { min-height: 620px; border-right: 0; border-bottom: 1px solid var(--line); }
  .node-a, .node-b, .node-c, .node-d { left: 50%; right: auto; transform: translateX(-50%); }
  .node-a { top: 330px; margin-left: -82px; }.node-b { top: 330px; margin-left: 82px; }.node-c { top: 446px; margin-left: -82px; }.node-d { top: 446px; margin-left: 82px; }
  .network-lines, .packet { display: none; }
  .activity-layout { grid-template-columns: 1fr; gap: 76px; }
  .language-panel { grid-template-columns:1fr; gap:32px; }.language-ring { width:200px; margin:auto; }.language-details ol { grid-template-columns:1fr; }.lab-callout { align-items:start; flex-direction:column; }
  .stack-grid { grid-template-columns: repeat(2,1fr); }
  .stack-grid article { min-height: 240px; }
  .stack-grid h3 { margin-top: 45px; }
  .terminal-trigger { right: 14px; bottom: 14px; }
  .terminal-backdrop { padding: 12px; }
  .project-card { min-height: 235px; }
  .history li { grid-template-columns: minmax(0,1fr) auto; }
  .history-original { grid-column: 1 / -1; grid-row: 2; }
  footer { grid-template-columns: 1fr; }
  .copyright { grid-column: 1; }
}

@media (max-width: 430px) {
  .stack-grid { grid-template-columns: 1fr; }
  .stack-grid article { min-height: 220px; }
  .section-heading { align-items: start; }
  .network-node { width: 132px; }
  .node-a, .node-c { margin-left: -72px; }.node-b, .node-d { margin-left: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .is-wiping>main,.is-wiping>.site-header,.is-wiping>footer,.is-wiping>.terminal-trigger { visibility:hidden; }
}