/* ============================================================
   FRANK.DB, refined layer (loads after style.css)
   direction: quiet, expensive, technical. graphite surfaces, hairline borders,
   one aqua accent + champagne, serif display type, mono for data labels.
   ============================================================ */
:root {
  --bg: #05080b;
  --panel: rgba(255, 255, 255, 0.03);
  --line: rgba(120, 220, 230, 0.13);
  --line-strong: rgba(120, 220, 230, 0.28);
  --text: #cfe0e6;
  --muted: #7794a0;
  --ink: #f2f7f8;
  --teal: #3ee6e0;
  --mint: #7be9b8;
  --yellow: #f4e04d;
  --magenta: #ff3d8b;
  --sans: "DM Sans", "LXGW WenKai Screen", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", "LXGW WenKai Screen", "Noto Serif SC", Georgia, serif;
  --pixel: var(--serif);
  --nav-h: 88px;
  --r: 16px;
}
html { font-synthesis: none; }
body {
  font: 400 15px/1.7 var(--sans); letter-spacing: 0.003em; color: var(--text);
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(62, 230, 224, 0.07), transparent 62%),
    radial-gradient(900px 560px at -6% 108%, rgba(255, 61, 139, 0.06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(62, 230, 224, 0.32); color: #fff; }
a { color: var(--teal); transition: color 0.2s; }
a:hover { color: var(--ink); }

/* film grain instead of scanlines */
.scanlines {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px; opacity: 0.045; mix-blend-mode: soft-light;
}

/* ---------------- loader ---------------- */
#loader { background: #06080b; }
#rain { opacity: 0.32; }
#loader::after { background: radial-gradient(circle at 50% 50%, rgba(6, 8, 11, 0.94) 0, rgba(6, 8, 11, 0.6) 30%, transparent 62%); }
.ring-outer { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; filter: none; }
.ring-inner { stroke: rgba(255, 255, 255, 0.07); }
.ring-arc { stroke: rgba(62, 230, 224, 0.85); stroke-width: 2; filter: none; }
.ring-progress { stroke: rgba(244, 224, 77, 0.8); stroke-width: 1.5; }
.ring-text text { fill: rgba(255, 255, 255, 0.34); font-size: 8px; letter-spacing: 3px; }
.hud-title { font: 400 clamp(30px, 6vw, 40px) var(--serif); letter-spacing: 0.04em; color: var(--ink); text-shadow: none; }
.hud-sub { color: var(--muted); letter-spacing: 0.22em; }
.hud-pct { color: var(--yellow); opacity: 0.9; font-family: var(--mono); }

/* ---------------- buttons ---------------- */
.btn {
  clip-path: none; overflow: visible; border-radius: 12px;
  padding: 11px 16px; gap: 9px;
  color: var(--ink); font: 500 13px/1 var(--sans); letter-spacing: 0.01em;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.22s ease, background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s;
}
.btn::before, .btn::after { display: none; }
.btn > i { width: auto; height: auto; display: inline-block; background: none; color: var(--teal); font-size: 12px; }
.btn:hover { transform: translateY(-1px); color: #fff; filter: none; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.3); }
.btn.sm { padding: 8px 12px; font-size: 12px; border-radius: 10px; }
.btn.sm > i { width: auto; height: auto; font-size: 11px; }
.btn.primary { background: var(--ink); color: #0a0d11; border-color: transparent; box-shadow: 0 6px 22px rgba(62, 230, 224, 0.14); }
.btn.primary > i { color: #0a0d11; background: none; }
.btn.primary:hover { background: #fff; color: #000; box-shadow: 0 8px 28px rgba(62, 230, 224, 0.26); }
.btn.gold { color: var(--yellow); border-color: rgba(244, 224, 77, 0.38); background: rgba(244, 224, 77, 0.06); }
.btn.gold > i { color: var(--yellow); background: none; }
.btn.gold:hover { background: rgba(244, 224, 77, 0.14); border-color: rgba(244, 224, 77, 0.6); color: #fff; }
.btn.on { background: rgba(62, 230, 224, 0.14); color: var(--ink); border-color: rgba(62, 230, 224, 0.5); }
.btn.on > i { color: var(--teal); background: none; }
.link-btn { color: var(--teal); text-decoration-color: rgba(62, 230, 224, 0.4); }
.link-btn:hover { color: var(--ink); }
.icon-btn { border-radius: 10px; border-color: var(--line); }
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.chips .btn { border-radius: 999px; }

/* ---------------- top bar: floating glass pill ---------------- */
.topbar {
  top: 14px; left: 50%; right: auto; transform: translateX(-50%);
  width: min(1200px, calc(100% - 28px)); height: 56px; padding: 0 10px 0 20px; gap: 14px;
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(14, 18, 24, 0.58); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.topbar::after { display: none; }
.brand { font: 500 12.5px var(--mono); letter-spacing: 0.24em; color: var(--ink); gap: 11px; }
.brand .accent { color: var(--muted); }
.brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(62, 230, 224, 0.12); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(62, 230, 224, 0.04); opacity: 0.7; } }
.topnav { clip-path: none; border: 0; background: transparent; padding: 0; gap: 2px; }
.topnav a { padding: 8px 12px; border-radius: 10px; color: var(--muted); font: 500 12.5px/1 var(--sans); letter-spacing: 0.01em; }
.topnav a i { font-size: 11px; color: rgba(255, 255, 255, 0.36); }
.topnav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); transform: none; }
.topnav a:hover i { transform: none; color: var(--teal); }
.topnav a.active { background: rgba(255, 255, 255, 0.09); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.topnav a.active i { color: var(--teal); }
.seg { border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.03); padding: 2px; gap: 2px; }
.seg button { border-radius: 9px; padding: 7px 10px; font: 500 12px var(--sans); color: var(--muted); }
.seg button + button { border-left: 0; }
.seg button:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
.seg button.on { background: rgba(255, 255, 255, 0.12); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.seg.big button { padding: 9px 16px; font-size: 13px; }
.menu-btn { border-radius: 10px; border-color: var(--line); }

/* ---------------- hero ---------------- */
#city { filter: saturate(0.78) brightness(0.95); }
.hero-vignette {
  background:
    linear-gradient(to right, rgba(5, 8, 11, 0.9) 0%, rgba(5, 8, 11, 0.66) 40%, rgba(5, 8, 11, 0.2) 62%, transparent 76%),
    radial-gradient(ellipse at 62% 46%, transparent 28%, rgba(5, 8, 11, 0.6) 100%),
    linear-gradient(to bottom, transparent 70%, var(--bg) 100%);
}
.hero-content { justify-content: center; padding-top: calc(var(--nav-h) + 10px); }
.conn { font: 400 11px var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; opacity: 1; display: flex; align-items: center; gap: 10px; }
.conn b { color: var(--teal); font-weight: 500; }
.conn::before { content: ""; width: 26px; height: 1px; background: var(--line-strong); }
h1.glitch {
  font: 400 clamp(56px, 10.4vw, 156px)/0.92 var(--serif); letter-spacing: -0.025em; text-shadow: none;
  background: linear-gradient(180deg, #ffffff 25%, #9fb0bf 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
.glitch::before, .glitch::after { display: none; }
.aka { margin: 18px 0 10px; font: italic 400 clamp(22px, 2.4vw, 32px) var(--serif); letter-spacing: 0.01em; color: var(--yellow); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.aka .tag { font: 500 10px var(--mono); letter-spacing: 0.18em; color: var(--yellow); background: none; border: 1px solid rgba(244, 224, 77, 0.5); border-radius: 999px; padding: 3px 9px; margin: 0; font-style: normal; }
.aka .zh { font: 400 0.82em var(--serif); color: var(--muted); margin-left: 6px; }
.titles { font: 500 13px var(--sans); letter-spacing: 0.05em; color: var(--text); gap: 4px 14px; }
.titles .sep { color: rgba(255, 255, 255, 0.22); }
.tagline { font: italic 400 clamp(18px, 1.8vw, 22px) var(--serif); color: var(--muted); margin: 18px 0 30px; }
.tagline::after { color: var(--teal); }
.console { max-width: 640px; border-radius: 16px; padding: 6px 6px 6px 16px; background: rgba(14, 18, 24, 0.55); border: 1px solid var(--line-strong); backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: border-color 0.25s, box-shadow 0.25s; }
.console:focus-within { border-color: rgba(62, 230, 224, 0.55); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(62, 230, 224, 0.09); }
.prompt { color: var(--teal); }
body.mode-sql .prompt::before { color: var(--teal); }
.console input { font: 400 14px var(--sans); caret-color: var(--teal); }
body.mode-sql .console input { font-family: var(--mono); font-size: 13px; }
.console input::placeholder { color: #566472; }
.console-out { max-width: 640px; border-radius: 0 0 16px 16px; background: rgba(12, 16, 21, 0.92); font-family: var(--mono); }
.console-out.open { border-color: var(--line-strong); }
.visit-badge { bottom: 62px; right: clamp(20px, 6vw, 96px); border-radius: 999px; background: rgba(14, 18, 24, 0.6); border-color: var(--line); font: 400 11px var(--mono); }
.hero-meta { position: absolute; left: clamp(20px, 6vw, 96px); right: clamp(20px, 6vw, 96px); bottom: 26px; z-index: 3; display: flex; gap: 28px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 10.5px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.hero-meta span:last-child { margin-left: auto; }

/* ---------------- pages and section headers ---------------- */
.table-section { padding: calc(var(--nav-h) + 30px) 0 24px; }
.sec-head { align-items: flex-end; gap: 18px; padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.sec-head > i { width: 44px; height: 44px; border-radius: 14px; font-size: 16px; color: var(--teal); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); align-self: flex-start; margin-top: 8px; }
.sec-head h2 { font: 400 clamp(38px, 5vw, 64px)/1 var(--serif); letter-spacing: -0.015em; color: var(--ink); }
.sec-head p { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; max-width: 60ch; }
.sec-head.sub { margin-top: 64px; }
.sec-head.sub > i { width: 40px; height: 40px; color: var(--yellow); }
.sec-head.sub h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); }
.sec-no { font: italic 400 76px/1 var(--serif); color: rgba(255, 255, 255, 0.07); letter-spacing: -0.02em; }
html[lang="zh-CN"] .sec-head h2 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.02em; }
.query { border: 0; background: none; padding: 0; margin-bottom: 24px; font: 400 12.5px var(--mono); color: var(--text); }
.query::before { color: var(--muted); }
.query .kw { color: var(--teal); font-weight: 500; }
.query .str { color: var(--yellow); }
.query.sub { background: none; }
.rows-meta { font: 400 11.5px var(--mono); color: var(--muted); }

/* ---------------- surfaces ---------------- */
.record, .edu-card, .p-card, .skill-group, .entry, .c-card, .c-tile, .learn-card, .c-hero, .learning, .card-wrap, .globe-wrap, .p-detail, .docs-note {
  --mx: -400px; --my: -400px;
  border-radius: var(--r); border: 1px solid var(--line);
  background:
    radial-gradient(380px circle at var(--mx) var(--my), rgba(62, 230, 224, 0.075), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
.record:hover, .edu-card:hover, .p-card:hover, .entry:hover, .c-card:hover, .c-tile:hover, .learn-card:hover { border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 50px rgba(0, 0, 0, 0.4); }
.p-card:hover, .entry:hover, .edu-card:hover, .c-card:hover, .learn-card:hover { transform: translateY(-3px); }
.record[open] { border-color: rgba(62, 230, 224, 0.38); }
.p-card::before { height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); }
.p-card .p-year, .pd-head .p-year { font: 500 11px var(--mono); letter-spacing: 0.16em; color: var(--yellow); }
.p-card h3 { font: 500 17.5px/1.3 var(--sans); color: var(--ink); letter-spacing: 0; }
.p-card p { color: var(--text); opacity: 0.8; font-size: 14px; }
.pill, .tag-pill { border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); font: 400 11px var(--mono); padding: 2px 10px; }
.tag-pill { padding: 7px 14px; font: 500 12.5px var(--sans); }
.tag-pill:nth-child(2n), .tag-pill:nth-child(3n) { border-color: var(--line); background: rgba(255, 255, 255, 0.03); }
.record summary { padding: 18px 20px; }
.record .r-title { color: var(--ink); font-weight: 500; }
.record .r-title .co { color: var(--teal); }
.record .r-period { color: var(--yellow); font: 400 11.5px var(--mono); letter-spacing: 0.04em; }
.record li::marker { content: "—  "; color: var(--muted); }
table.grid tr.detail li::marker { content: "—  "; color: var(--muted); }
.edu-card .gpa { font: 400 36px/1 var(--serif); color: var(--yellow); }
.edu-card .gpa em { font: 500 9.5px var(--mono); letter-spacing: 0.2em; color: var(--muted); }
.edu-card .school { color: var(--ink); font-weight: 500; }
.edu-card .deg { color: var(--teal); }
.diploma-thumb .zoom { background: rgba(14, 18, 24, 0.85); color: var(--ink); border-radius: 8px; border: 1px solid var(--line-strong); backdrop-filter: blur(8px); }
.skill-group { padding: 20px 22px; }
.skill-group h3 { font: 500 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); }
.skill { border-bottom: 1px solid var(--line); padding: 8px 0; }
.bar { gap: 3px; }
.bar i { width: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.bar i.on { background: var(--teal); box-shadow: none; }
.skill-group:nth-child(2) .bar i.on { background: var(--magenta); box-shadow: none; }
.skill-group:nth-child(3) .bar i.on { background: var(--yellow); box-shadow: none; }
.learning { padding: 26px; }
.learn-head h3 { font: 500 12px var(--mono); letter-spacing: 0.2em; color: var(--yellow); }
.lc-top i { color: var(--teal); }
.lc-top b { color: var(--ink); font-weight: 500; }
.lc-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.08); }
.lc-bar span { background: linear-gradient(90deg, var(--teal), var(--mint)); border-radius: 2px; }
.pulse { background: var(--teal); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(62, 230, 224, 0.5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(62, 230, 224, 0); } }
.card-wrap { background: radial-gradient(circle at 50% 38%, rgba(62, 230, 224, 0.08), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); }
.bio p:first-child { color: var(--ink); font: 400 clamp(22px, 2.4vw, 30px)/1.3 var(--serif); }
.bio p { color: var(--text); }
table.kv td { border-color: var(--line); }
table.kv td:first-child { color: var(--teal); font-family: var(--mono); font-size: 12px; }

/* footprints */
.globe-wrap { background: radial-gradient(circle at 50% 50%, rgba(62, 230, 224, 0.07), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); }
.g-label { border-radius: 8px; background: rgba(10, 13, 18, 0.82); border-color: var(--line-strong); font-family: var(--mono); backdrop-filter: blur(6px); }
.g-label.active { border-color: var(--yellow); box-shadow: 0 0 18px rgba(244, 224, 77, 0.18); }
.fp-list::before { background: linear-gradient(var(--teal), var(--yellow)); opacity: 0.3; }
.fp-item { border-radius: 12px; }
.fp-item:hover { background: rgba(255, 255, 255, 0.04); }
.fp-item.active { background: rgba(244, 224, 77, 0.06); border-color: rgba(244, 224, 77, 0.32); }
.fp-dot { border-radius: 50%; font: 500 11px var(--mono); color: var(--teal); }
.fp-item.active .fp-dot { background: var(--yellow); border-color: var(--yellow); color: #14110a; }
.fp-city { color: var(--ink); font-weight: 500; }

/* tables and heatmap */
table.grid th { font: 500 10.5px var(--mono); letter-spacing: 0.18em; }
table.grid tr.row:hover { background: rgba(255, 255, 255, 0.035); }
table.grid tr.row:hover .t-name { color: var(--teal); }
table.grid .t-name { color: var(--ink); font-weight: 500; }
table.grid tr.detail td { background: rgba(255, 255, 255, 0.025); border-left: 1px solid var(--teal); }
.hm-scroll { border-radius: var(--r); background: rgba(255, 255, 255, 0.02); }
.hm-stat b { font: 400 40px/1 var(--serif); color: var(--ink); }
.hm-yr b { font: 400 18px var(--serif); color: var(--ink); }
.hm-cell { background: rgba(255, 255, 255, 0.06); border-radius: 3px; }
.hm-cell.lv1 { background: rgba(62, 230, 224, 0.22); }
.hm-cell.lv2 { background: rgba(62, 230, 224, 0.42); }
.hm-cell.lv3 { background: rgba(62, 230, 224, 0.68); }
.hm-cell.lv4 { background: #7be9b8; }
.hm-cell.mk { background: var(--yellow); box-shadow: 0 0 8px rgba(244, 224, 77, 0.5); }
.p-detail { border-color: rgba(62, 230, 224, 0.35); }

/* resume viewer */
.resume-bar { margin-bottom: 18px; }
.resume-frame-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); background: #11151a; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02); }
#resume-frame { height: min(84vh, 1000px); background: #1a1e23; }
.resume-note { font: 400 12px var(--sans); color: var(--muted); max-width: 70ch; }
#resume.resume-private .docs-note { border-radius: var(--r); }
#resume.resume-private .docs-note h3 { font: 400 clamp(26px, 3vw, 36px)/1.15 var(--serif); }
#resume.resume-private .docs-note > i { color: var(--teal); }

/* log */
.entry { overflow: hidden; }
.entry .thumb { filter: saturate(0.85) contrast(1.04); }
.entry .thumb.text { font: 400 22px var(--serif); color: var(--ink); background: radial-gradient(circle at 30% 20%, rgba(62, 230, 224, 0.1), transparent 60%), #0b0f14; }
.entry .thumb.food { color: var(--yellow); background: radial-gradient(circle at 50% 40%, rgba(244, 224, 77, 0.14), transparent 62%), #0d0e0b; }
.entry .thumb.food i { filter: none; }
.entry .e-type { color: var(--teal); font-family: var(--mono); }
.entry .e-title { color: var(--ink); font-weight: 500; font-size: 15px; }
.entry .count { background: rgba(10, 13, 18, 0.75); color: var(--yellow); border-radius: 6px; font-family: var(--mono); }

/* contact */
.c-hero { padding: 34px; background: radial-gradient(120% 120% at 0% 0%, rgba(62, 230, 224, 0.1), transparent 55%), radial-gradient(100% 100% at 100% 100%, rgba(255, 61, 139, 0.08), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)); }
.c-hero::after { border-color: rgba(255, 255, 255, 0.1); }
.c-hero h3 { font: 400 clamp(34px, 4vw, 52px)/1.05 var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.c-eyebrow { font-family: var(--mono); color: var(--teal); }
.c-mail { border-radius: 14px; background: rgba(255, 255, 255, 0.03); border-color: var(--line); }
.c-meta { border-top-color: var(--line); }
.c-meta b { color: var(--ink); font-weight: 500; }
.c-side h4 { font: 500 11px var(--mono); letter-spacing: 0.2em; color: var(--muted); }
.c-tile::before { opacity: 0.4; }
.c-tile:hover { box-shadow: 0 22px 50px rgba(0, 0, 0, 0.4); }
.c-card > i { color: var(--teal); }
.c-card .c-key { color: var(--teal); font-family: var(--mono); }
.sign-off { font: italic 400 20px var(--serif); color: var(--muted); }

/* schema sidebar (SQL view) */
.schema li a { border-left-width: 1px; border-radius: 0 8px 8px 0; font-size: 13px; }
.schema li a:hover, .schema li a.active { background: rgba(255, 255, 255, 0.04); border-left-color: var(--teal); color: var(--ink); }
.schema-title, .schema-foot { font-family: var(--mono); }
.schema-foot { border-top-color: var(--line); }

/* pager, footer, modal */
.pager { border-top: 1px solid var(--line); }
.pager .btn small { color: var(--muted); font-family: var(--mono); letter-spacing: 0.14em; }
.foot { border-top: 1px solid var(--line); font: 400 11.5px var(--mono); letter-spacing: 0.04em; }
.foot b { color: var(--ink); font-weight: 500; }
dialog#modal { border-radius: 20px; border: 1px solid var(--line-strong); background: #0b0f14; box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7); overflow: auto; }
dialog#modal::backdrop { background: rgba(4, 6, 9, 0.8); backdrop-filter: blur(10px); }
.modal-bar { background: rgba(14, 18, 24, 0.9); backdrop-filter: blur(12px); border-bottom-color: var(--line); color: var(--muted); font-family: var(--mono); }
#modal-body h1 { font: 400 clamp(30px, 4vw, 44px)/1.1 var(--serif); color: var(--ink); }
#modal-body img { border-radius: 12px; }
#modal-body code, #modal-body pre { background: rgba(255, 255, 255, 0.04); color: var(--teal); }
#modal-body pre { border-left-color: var(--teal); border-radius: 0 10px 10px 0; }

/* search results */
.out-search .s-item > i { border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.s-kind { border-radius: 999px; color: var(--teal); border-color: rgba(62, 230, 224, 0.35); }
.s-item:hover, .s-item.sel, .s-cheat:hover, .s-cheat.sel { background: rgba(255, 255, 255, 0.05); border-left-color: var(--teal); }
.sql-table th { background: #11161c; color: var(--yellow); }
pre.ascii .b { color: var(--teal); }
mark { background: rgba(244, 224, 77, 0.2); color: var(--yellow); }

/* scrollbars */
.hm-scroll, .table-scroll, .sql-scroll, .console-out, #modal { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.hm-scroll::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb, .sql-scroll::-webkit-scrollbar-thumb, .console-out::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }
.hm-scroll::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track, .sql-scroll::-webkit-scrollbar-track, .console-out::-webkit-scrollbar-track { background: transparent; }

/* screenshot mode (no WebGL) */
body.shot #city { background: radial-gradient(60% 70% at 70% 40%, rgba(62, 230, 224, 0.16), transparent 70%), radial-gradient(40% 50% at 85% 70%, rgba(255, 61, 139, 0.12), transparent 70%), linear-gradient(#0a0f14, #05080b); }

/* ---------------- responsive ---------------- */
@media (max-width: 960px) {
  .topbar { padding: 0 8px 0 16px; }
  .mobile-nav.open { top: 78px; left: 14px; right: 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(12, 16, 21, 0.94); backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
  .mobile-nav a { border-radius: 12px; background: rgba(255, 255, 255, 0.03); border-color: var(--line); font-weight: 500; }
  .mobile-nav a.active { background: rgba(255, 255, 255, 0.1); color: var(--ink); }
  .mobile-nav a.active i { color: var(--teal); }
  .hero-meta span:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  :root { --nav-h: 80px; }
  .topbar { top: 10px; width: calc(100% - 20px); height: 52px; }
  .brand { font-size: 11px; letter-spacing: 0.18em; }
  h1.glitch { font-size: clamp(50px, 17vw, 80px); }
  .hero-meta { display: none; }
  .sec-head h2 { font-size: 40px; }
  .sec-head > i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand .dot { animation: none; }
}

/* resume viewer: a sheet of paper on a dark desk */
.resume-frame-wrap { padding: clamp(14px, 3vw, 36px); background: radial-gradient(900px 400px at 50% 0%, rgba(62, 230, 224, 0.06), transparent 70%), #0d1116; }
.resume-paper { display: block; max-width: 880px; margin: 0 auto; border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04), 0 40px 90px rgba(0, 0, 0, 0.6); transition: transform 0.35s ease, box-shadow 0.35s; }
.resume-paper:hover { transform: translateY(-3px); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06), 0 50px 110px rgba(0, 0, 0, 0.7); }
.resume-paper img { display: block; width: 100%; height: auto; }

/* ---------- soft type + original neon colour accents ---------- */
h1.glitch, .sec-head h2, .sec-no, .hud-title, .c-hero h3, #modal-body h1, .bio p:first-child, .aka, .tagline, .sign-off, .hm-stat b, .hm-yr b, .edu-card .gpa {
  font-variation-settings: "SOFT" 100, "WONK" 0; font-optical-sizing: auto;
}
h1.glitch { font-size: clamp(50px, 8.6vw, 128px); font-weight: 300; letter-spacing: -0.03em; line-height: 0.98; }
.sec-head h2 { font-size: clamp(34px, 4.2vw, 54px); font-weight: 350; letter-spacing: -0.01em; }
.sec-head.sub h2 { font-size: clamp(26px, 3vw, 36px); }
.sec-no { font-size: 64px; font-weight: 300; }
.aka { font-size: clamp(20px, 2.1vw, 28px); font-weight: 400; }
.tagline { font-size: clamp(17px, 1.6vw, 20px); font-weight: 350; }
.bio p:first-child { font-size: clamp(20px, 2.1vw, 26px); font-weight: 350; line-height: 1.4; }
.c-hero h3 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 350; }
.edu-card .gpa { font-size: 32px; font-weight: 350; }
.hm-stat b { font-size: 34px; font-weight: 350; }
.hud-title { font-size: clamp(26px, 5vw, 34px); }
body { font-weight: 400; line-height: 1.75; }
html[lang="zh-CN"] body, html[lang="zh-CN"] .btn, html[lang="zh-CN"] .topnav a, html[lang="zh-CN"] .seg button { letter-spacing: 0.02em; }
html[lang="zh-CN"] h1.glitch, html[lang="zh-CN"] .sec-head h2, html[lang="zh-CN"] .c-hero h3, html[lang="zh-CN"] .aka { font-family: "LXGW WenKai Screen", var(--serif); font-weight: 400; letter-spacing: 0.02em; }
html[lang="zh-CN"] .bio p:first-child, html[lang="zh-CN"] .tagline { font-family: "LXGW WenKai Screen", var(--serif); font-style: normal; }

.topnav a.active { background: rgba(62, 230, 224, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(62, 230, 224, 0.42), 0 0 18px rgba(62, 230, 224, 0.18); }
.topnav a:hover i, .topnav a.active i { color: var(--teal); }
.seg button.on { background: rgba(62, 230, 224, 0.2); color: #eaffff; box-shadow: inset 0 0 0 1px rgba(62, 230, 224, 0.4); }
.btn.primary { background: linear-gradient(120deg, #19cfc8, #55dc9c); color: #021013; box-shadow: 0 6px 22px rgba(62, 230, 224, 0.2); }
.btn.primary:hover { background: linear-gradient(120deg, #43efe8, #8bf2c2); color: #000; box-shadow: 0 8px 28px rgba(62, 230, 224, 0.34); }
.btn.primary > i { color: #021013; }
.btn.on { background: linear-gradient(120deg, #ffd84a, #ff9d4d); color: #2a1600; border-color: transparent; }
.btn.on > i { color: #2a1600; }
.brand .dot { background: var(--magenta); box-shadow: 0 0 0 4px rgba(255, 61, 139, 0.14); }
@keyframes breathe { 50% { box-shadow: 0 0 0 7px rgba(255, 61, 139, 0.04); opacity: 0.7; } }
.brand .accent { color: var(--yellow); }
.query .kw, .table-section .kw { color: var(--magenta); }
table.kv td:first-child { color: var(--magenta); }
.record li::marker, table.grid tr.detail li::marker { color: var(--magenta); }
.skill-group:nth-child(2) .bar i.on { background: var(--magenta); }
.c-tile[data-k="linkedin"] { --ac: #4aa3ff; } .c-tile[data-k="instagram"] { --ac: #ff5fa2; } .c-tile[data-k="spotify"] { --ac: #2be16f; }
.s-kind { color: var(--magenta); border-color: rgba(255, 61, 139, 0.4); }
.hero-meta { color: var(--muted); }

/* diploma display copies: background images (no "save image"), view-only */
.dip { width: 100%; aspect-ratio: 1000 / 772; background: center / cover no-repeat; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform 0.5s ease, filter 0.3s; filter: saturate(0.95); }
.diploma-thumb { aspect-ratio: 1000 / 772; }
.diploma-thumb:hover .dip { transform: scale(1.04); filter: none; }
#modal-body .dip.big { border-radius: 12px; border: 1px solid var(--line); margin: 0; }
@media print { .dip, .diploma-thumb { display: none !important; } }

/* keep the descenders of "y" and "g" inside the gradient-clipped box */
h1.glitch { line-height: 1.16; padding: 0.04em 0.06em 0.16em 0; margin-bottom: -0.06em; }
.aka { margin-top: 10px; }

/* extra headroom so tall display sizes never clip the tails of y and g */
h1.glitch { padding-bottom: 0.24em; margin-bottom: -0.14em; overflow: visible; }