:root {
  --bg: #fafbf9;
  --ink: #202622;
  --muted: #626e65;
  --line: #e0e5de;
  --green: #245c45;
  --orange: #c7573c;
  --soft: #edf2ec;
  --cover-height: 208px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.75;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
button:disabled { cursor: default; }
::selection { background: #d5e6d7; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.4; }
.topbar {
  height: 72px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(32px, calc((100% - 1344px) / 2));
  background: rgba(250, 251, 249, .97);
  position: sticky;
  top: 0;
  z-index: 10;
}
.wordmark { display: flex; align-items: center; gap: 13px; font-weight: 600; }
.monogram { display: inline-flex; width: 32px; height: 32px; background: var(--green); color: white; align-items: center; justify-content: center; font-size: 12px; }
.wordmark-sub { font: 11px ui-monospace, monospace; color: var(--muted); margin-left: 5px; }
.topbar nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.topbar nav a { display: inline-flex; align-items: center; min-height: 44px; }
.topbar nav a:hover { color: var(--green); }
.contact-link { border-left: 1px solid var(--line); padding-left: 28px; }
.contact-link span { margin-left: 10px; }
.layout {
  max-width: 1440px;
  margin: auto;
  display: grid;
  grid-template-columns: clamp(248px, 20vw, 280px) minmax(0, 1fr);
  gap: clamp(32px, 3.4vw, 48px);
  padding: 0 clamp(24px, 3.4vw, 48px);
}
.sidebar { border-right: 1px solid var(--line); position: relative; }
.sidebar-inner { position: sticky; top: 72px; padding: 40px 24px 28px 0; }
.location { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
h1 { font-size: 42px; margin-top: 20px; font-weight: 650; }
h1 > span { display: block; font-size: 18px; line-height: 1.6; font-weight: 500; margin-top: 12px; }
.sidebar-intro { font-size: 14px; color: var(--muted); margin-top: 20px; }
.profile-facts { display: flex; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.profile-facts > div { display: flex; flex-direction: column; }
.profile-facts strong { font-size: 32px; font-weight: 500; line-height: 1.2; }
.profile-facts strong span { font-size: 13px; margin-left: 5px; font-weight: 400; }
.profile-facts > div > span { font-size: 12px; color: var(--muted); margin-top: 8px; }
.sidebar-contact { margin-top: 26px; font-size: 13px; }
.sidebar-contact a { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 8px; }
.sidebar-contact a:hover { color: var(--green); }
.sidebar-contact a span { color: var(--muted); }
.print-button { border: 1px solid var(--line); border-radius: 5px; background: transparent; width: 100%; min-height: 44px; text-align: left; padding: 9px 12px; font-size: 13px; margin-top: 14px; }
.print-button span { font-size: 17px; margin-right: 10px; }
.print-button:hover { border-color: var(--green); background: var(--soft); }
.jump-projects { display: none; }
.sidebar-foot { font: 10px/1.8 ui-monospace, monospace; color: var(--muted); margin-top: 28px; }
main { min-width: 0; }
.intro { padding: 38px 0 30px; }
.eyebrow { font: 11px ui-monospace, monospace; color: var(--green); display: flex; align-items: center; gap: 20px; }
.eyebrow > span { color: var(--muted); font-size: 10px; }
.intro h2 { font-size: clamp(28px, 2.3vw, 32px); font-weight: 600; line-height: 1.4; margin: 16px 0; letter-spacing: -.5px; }
.accent { color: var(--orange); }
.intro > p { font-size: 15px; line-height: 1.85; color: var(--muted); max-width: 780px; }
.intro > .intro-position { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; color: var(--green); font-size: 14px; }
.intro strong { color: var(--ink); font-weight: 600; }
.focus-list { display: flex; gap: 22px; margin-top: 16px; color: var(--green); font-size: 12px; }
.focus-list span::before { content: "+"; margin-right: 7px; }
.section { padding: 32px 0 36px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px; gap: 15px; }
.section-heading h2 { font-size: 24px; font-weight: 600; margin-top: 8px; }
.count { font: 12px ui-monospace, monospace; color: var(--muted); vertical-align: top; margin: 5px 0 0 12px; display: inline-block; }
.section-note { font-size: 12px; color: var(--muted); }
.filters { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 22px; overflow: auto; }
.filters button { white-space: nowrap; background: none; border: 0; border-bottom: 2px solid transparent; font-size: 13px; min-height: 44px; padding: 9px 14px 12px; color: var(--muted); }
.filters button:first-child { padding-left: 0; padding-right: 18px; }
.filters button.active { border-bottom-color: var(--green); color: var(--green); font-weight: 600; }
.filters button span { font: 11px ui-monospace, monospace; margin-left: 4px; }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.project { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.project:hover { border-color: #9caf9e; transform: translateY(-2px); }
.project[hidden] { display: none; }
.project-media { height: var(--cover-height); flex-shrink: 0; background: #edf1ec; overflow: hidden; border-bottom: 1px solid var(--line); position: relative; }
.project-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.project-media.echarts img, .project-media.yundiantong img, .project-media.star img { object-fit: contain; object-position: center; background: #f4f6f5; }
.project-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.project-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 22px; margin-bottom: 8px; }
.project-kind { font-size: 11px; color: var(--muted); letter-spacing: .3px; }
.project-badge { flex-shrink: 0; font-size: 11px; color: var(--green); border: 1px solid #d3e1d5; border-radius: 4px; padding: 1px 7px; }
.project h3 { font-size: 20px; font-weight: 600; }
.project-role { color: var(--green); font-size: 13px; line-height: 1.75; margin-top: 10px; }
.project-role-label, .project-result > span { font-size: 11px; font-weight: 400; color: var(--muted); margin-right: 10px; }
.project-desc { color: var(--muted); font-size: 14px; line-height: 1.85; margin-top: 10px; }
.project-result { margin: 16px 0 20px; padding: 10px 12px; border-left: 2px solid #7d9f83; background: #f3f6f1; font-size: 14px; line-height: 1.7; }
.project-result strong { font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 17px; color: var(--muted); font: 11px/1.7 ui-monospace, monospace; }
.project-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eef0ec; margin-top: auto; padding-top: 12px; gap: 12px; }
.project-bottom .tags { margin: 0; flex: 1; }
.project-bottom button { border: 0; background: none; color: var(--green); font-size: 13px; white-space: nowrap; }
.project-bottom button:hover { text-decoration: underline; text-underline-offset: 4px; }
.project-bottom button span { margin-left: 6px; }
.project-visual { height: var(--cover-height); display: flex; align-items: center; justify-content: center; padding: 22px; background: #eff4ee; gap: 10px; color: var(--green); font-size: 12px; overflow: hidden; border-bottom: 1px solid var(--line); }
.flow-node { border: 1px solid #b8cbb9; padding: 10px 12px; border-radius: 5px; background: #fafcf9; }
.flow-arrow { color: #647c66; }
.project-visual.ai { background: #eef2f7; color: #455c77; }
.project-visual.ai .flow-node { border-color: #bdcbd9; background: #f9fbfe; }
.project-visual.cms { background: #f7f0ec; color: #956146; }
.project-visual.cms .flow-node { border-color: #d6c4b8; }
.project-visual.rn { background: #f0f1f5; color: #616581; }
.project-visual.rn .flow-node { border-color: #c4c7d6; }
.project--featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); border-color: #c5d5c6; }
.project--featured .project-media { height: auto; min-height: 280px; border-bottom: 0; border-right: 1px solid var(--line); }
.project--featured .project-media img { position: absolute; inset: 0; padding: 18px; }
.project--featured .project-body { padding: 24px; }
.project--featured h3 { font-size: 22px; }
.project--compact { grid-column: 1 / -1; }
.project--compact .project-result { background: transparent; border-left: 0; padding: 0; margin: 10px 0 16px; }
.project--compact .project-result strong { font-weight: 500; }
.timeline article { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; padding-bottom: 28px; position: relative; }
.timeline article:last-child { padding-bottom: 0; }
.timeline-date { font: 12px/1.7 ui-monospace, monospace; color: var(--muted); padding-top: 3px; display: flex; flex-direction: column; gap: 8px; }
.current { font-size: 11px; color: var(--green); }
.timeline h3 { font-size: 18px; }
.role { font-size: 14px; color: var(--green); margin-top: 4px; }
.timeline p { font-size: 14px; color: var(--muted); line-height: 1.85; margin-top: 10px; }
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; }
.skill-number { font: 11px ui-monospace, monospace; color: var(--muted); }
.skill-grid h3 { font-size: 16px; margin: 6px 0 8px; font-weight: 600; }
.skill-line { display: block; }
.skill-grid p { font-size: 14px; line-height: 1.9; color: var(--muted); }
.recognition-row, .article-link { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.row-label { font-size: 13px; color: var(--muted); }
.recognition-row p { font-size: 14px; line-height: 2; }
.recognition-row h3, .article-link h3 { font-size: 14px; font-weight: 600; }
.recognition-row .patent-code { font: 12px/1.9 ui-monospace, monospace; color: var(--muted); margin: 6px 0 16px; overflow-wrap: anywhere; }
.recognition-row .patent-code:last-child { margin-bottom: 0; }
.patent-code { display: flex; flex-wrap: wrap; gap: 0 14px; }
.article-link { grid-template-columns: 100px minmax(0, 1fr) 15px; }
.article-link:hover h3 { color: var(--green); }
.article-link p, .education p { font-size: 13px; color: var(--muted); margin-top: 6px; }
.education { border-bottom: 0; padding-bottom: 0; }
footer { padding: 26px 0 30px; border-top: 1px solid var(--line); font-size: 13px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
footer .status-dot { margin-right: 8px; }
footer a { color: var(--green); }
footer p { width: 100%; font: 11px ui-monospace, monospace; color: var(--muted); margin-top: 6px; }
dialog { border: 1px solid var(--line); border-radius: 8px; max-width: 760px; width: calc(100% - 32px); color: var(--ink); background: var(--bg); }
dialog::backdrop { background: rgba(20, 30, 24, .45); backdrop-filter: blur(3px); }
.dialog-top { display: flex; justify-content: space-between; align-items: center; font: 11px ui-monospace, monospace; color: var(--muted); }
.dialog-top button { border: 0; background: transparent; font-size: 27px; line-height: 1; }
.dialog-title { font-size: 28px; margin-bottom: 10px; }
.dialog-meta { color: var(--green); font-size: 13px; margin-bottom: 20px; }
.dialog-summary { color: var(--muted); font-size: 15px; line-height: 1.85; }
.detail-list { padding-left: 20px; font-size: 15px; line-height: 1.85; }
.detail-list li { padding: 6px 0; }
.dialog-links { display: flex; gap: 24px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--green); }
.sr-only, .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skip:focus { width: auto; height: auto; clip: auto; z-index: 20; background: white; padding: 10px; }

.layout > *, .sidebar-inner > *, .section-heading > *, .project-body > *,
.timeline article > *, .skill-grid > *, .recognition-row > *, .article-link > * {
  min-width: 0;
}
html { -webkit-text-size-adjust: 100%; }
.wordmark, .topbar nav a { white-space: nowrap; }
.focus-list, .dialog-links { flex-wrap: wrap; }
.project h3, .dialog-title, .dialog-meta, .project-kind, .tags,
.sidebar-contact a, .skill-grid p, .article-link h3 { overflow-wrap: anywhere; }
.project-bottom { flex-wrap: wrap; }
.project-bottom button { min-height: 44px; padding: 6px 0 6px 12px; flex-shrink: 0; }
.flow-node { min-width: 0; white-space: normal; text-align: center; }
.flow-arrow { flex-shrink: 0; }
dialog {
  padding: 0;
  overflow: hidden;
  max-height: min(850px, 90vh);
  max-height: min(850px, 90dvh);
}
dialog[open] { display: flex; flex-direction: column; }
.dialog-top {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
}
.dialog-top button { width: 44px; height: 44px; border-radius: 50%; }
.dialog-top button:hover { background: var(--soft); }
#dialog-content {
  min-height: 0;
  padding: 24px 30px 30px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.dialog-links a { display: inline-flex; align-items: center; min-height: 44px; }
.project-media.mobile-screenshots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  padding: 16px 18px 0;
  height: var(--cover-height);
  background: #eaf1ed;
}
.project-media.mobile-screenshots img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: top;
  border: 1px solid #dbe6df;
  border-radius: 8px 8px 0 0;
}
.screenshot-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.screenshot-gallery--single{grid-template-columns:minmax(0,1fr)}
.screenshot-gallery figure{margin:0;min-width:0}
.screenshot-gallery a{display:block;border-radius:4px}
.screenshot-gallery img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
.screenshot-gallery figcaption{font-size:11px;color:var(--muted);margin-top:9px;text-align:center}
@media screen and (min-width:701px) {
  .project:not(.project--featured):not(.project--compact) .project-role { min-height: 3.5em; }
  .project:not(.project--featured):not(.project--compact) .project-desc { min-height: 3.7em; }
}
@media screen and (max-width:1000px) {
  html { scroll-padding-top: 88px; }
  .wordmark-sub { display: none; }
  .topbar { height: 68px; padding: 0 32px; }
  .topbar nav { gap: 24px; }
  .topbar nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .layout { display: block; max-width: 880px; padding: 0 32px; }
  .sidebar { border-right: 0; }
  .sidebar-inner {
    position: static;
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
    grid-template-areas: "location facts" "name facts" "intro facts" "contacts print";
    gap: 12px 32px;
    padding: 40px 0 32px;
  }
  .location { grid-area: location; font-size: 12px; }
  h1 { grid-area: name; margin-top: 0; font-size: 42px; }
  h1 > span { font-size: 18px; margin-top: 8px; }
  .sidebar-intro { grid-area: intro; margin-top: 0; font-size: 14px; }
  .profile-facts {
    grid-area: facts;
    align-self: center;
    justify-content: space-evenly;
    margin: 0;
    padding: 24px 0 24px 20px;
    border-top: 0;
    border-left: 1px solid var(--line);
    gap: 18px;
  }
  .profile-facts > div > span { font-size: 12px; }
  .sidebar-contact { grid-area: contacts; margin: 8px 0 0; font-size: 14px; }
  .sidebar-contact a { min-height: 44px; margin: 0; gap: 12px; }
  .profile-actions { grid-area: print; align-self: center; }
  .print-button {
    align-self: center;
    min-height: 48px;
    margin: 8px 0 0;
    text-align: center;
    font-size: 13px;
    border-radius: 6px;
  }
  .sidebar-foot { display: none; }
  .intro { border-top: 1px solid var(--line); padding: 32px 0 36px; }
  .intro h2 { font-size: 30px; margin: 16px 0; }
  .intro > p { max-width: none; font-size: 15px; line-height: 1.9; }
  .eyebrow { font-size: 11px; }
  .focus-list { font-size: 12px; gap: 12px 20px; }
  .project-desc, .timeline p { font-size: 14px; line-height: 1.85; }
  .project h3 { font-size: 20px; }
  .project-kind, .tags { font-size: 11px; }
  .project-bottom { font-size: 12px; }
  .project-bottom button { font-size: 13px; }
  .filters button { min-height: 44px; font-size: 13px; }
  .timeline-date, .role { font-size: 13px; }
  .skill-grid h3 { font-size: 16px; }
  .skill-grid p { font-size: 14px; line-height: 1.9; }
  .recognition-row h3, .article-link h3, .recognition-row p { font-size: 14px; }
  .row-label { font-size: 12px; }
  .recognition-row .patent-code { font-size: 11px; }
  .article-link p, .education p { font-size: 12px; }
  footer { font-size: 13px; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media screen and (max-width:700px) {
  html { scroll-padding-top: calc(76px + env(safe-area-inset-top)); }
  .topbar {
    height: auto;
    min-height: calc(60px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    gap: 12px;
  }
  .wordmark { min-height: 44px; font-size: 14px; gap: 8px; flex-shrink: 0; }
  .monogram { width: 24px; height: 24px; font-size: 10px; }
  .topbar nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    flex: 1;
    max-width: 280px;
    min-width: 0;
    margin-left: auto;
    gap: 2px;
    font-size: 12px;
  }
  .topbar nav a { justify-content: center; padding: 0 4px; border-radius: 5px; }
  .topbar nav .contact-link { padding-left: 4px; border-left: 0; background: var(--soft); color: var(--green); }
  .contact-link span { display: none; }
  .layout { padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .sidebar-inner {
    position: relative;
    top: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "facts" "contacts" "actions";
    gap: 12px;
    padding: 24px 0;
  }
  .location { position: absolute; top: 30px; right: 0; grid-area: auto; font-size: 12px; }
  h1 { font-size: 34px; line-height: 1.25; padding-right: 0; }
  h1 > span { font-size: 16px; line-height: 1.6; margin-top: 6px; }
  h1 > span br { display: none; }
  .sidebar-intro { display: none; }
  .profile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 4px 0 0;
    padding: 12px 0;
    gap: 16px;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .profile-facts > div { flex-direction: row; align-items: baseline; gap: 8px; }
  .profile-facts > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
  .profile-facts strong { font-size: 26px; }
  .profile-facts strong span { font-size: 12px; margin-left: 3px; }
  .profile-facts > div > span { font-size: 12px; margin-top: 0; }
  .sidebar-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; font-size: 13px; }
  .sidebar-contact a { min-height: 44px; padding: 8px; justify-content: center; border: 1px solid var(--line); border-radius: 5px; }
  .sidebar-contact a span { display: none; }
  .profile-actions { grid-area: actions; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .jump-projects { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: var(--green); color: #fff; border-radius: 5px; font-size: 13px; }
  .print-button { min-height: 44px; margin: 0; padding: 8px; font-size: 12px; }
  .print-button span { font-size: 16px; margin-right: 6px; }
  .intro { padding: 22px 0 24px; }
  .intro .eyebrow { display: none; }
  .intro h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
  .intro > .intro-position { font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
  .intro-position > strong:first-child, .intro-position > span { display: none; }
  .intro > p { font-size: 15px; line-height: 1.8; }
  .focus-list { margin-top: 12px; font-size: 12px; gap: 8px 16px; }
  .section { padding: 26px 0; }
  .section-heading { margin-bottom: 18px; }
  .section-heading h2 { font-size: 22px; margin-top: 6px; }
  .eyebrow { gap: 14px; }
  .section-note { display: none; }
  .filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--soft);
  }
  .filters button, .filters button:first-child {
    flex: 1 0 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 13px;
    border: 0;
    border-radius: 5px;
    white-space: nowrap;
  }
  .filters button span { font-size: 10px; margin-left: 3px; }
  .filters button:focus-visible { outline-offset: -3px; }
  .filters button.active { background: #fff; box-shadow: 0 1px 4px #2033260d; }
  .project-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .project, .project--featured { display: flex; flex-direction: column; }
  .project-body, .project--featured .project-body { display: contents; }
  .project-top { order: 0; margin: 16px 18px 6px; gap: 8px; }
  .project h3 { order: 1; margin: 0 18px; font-size: 20px; }
  .project-role { order: 2; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; margin: 8px 18px 0; font-size: 13px; line-height: 1.75; }
  .project-role-label { margin-right: 0; }
  .project-media, .project--featured .project-media {
    order: 3;
    height: clamp(160px, 45vw, 240px);
    min-height: 0;
    margin-top: 14px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }
  .project--featured .project-media img { position: static; padding: 10px; }
  .project-media.mobile-screenshots { height: clamp(180px, 50vw, 240px); padding: 14px 20px 0; gap: 14px; }
  .project-visual { order: 3; height: auto; min-height: 92px; margin-top: 14px; padding: 18px; font-size: 12px; gap: 8px; border-top: 1px solid var(--line); }
  .flow-node { padding: 8px; }
  .project-desc { order: 4; margin: 14px 18px 0; font-size: 15px; line-height: 1.8; }
  .project-result { order: 5; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 6px; margin: 12px 18px 0; padding: 10px; font-size: 14px; line-height: 1.7; }
  .project-result > span { margin-right: 0; }
  .project--compact .project-result { margin: 12px 18px 0; }
  .project-bottom { order: 6; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 14px 18px 18px; padding-top: 14px; }
  .tags { gap: 6px; }
  .tags span { padding: 3px 7px; background: var(--soft); border-radius: 4px; white-space: nowrap; }
  .project-bottom button { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 5px; background: var(--soft); font-size: 14px; text-align: center; }
  .project-bottom button:active, .sidebar-contact a:active { background: #dfeade; }
  .timeline article { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0 0 26px 18px; border-left: 1px solid var(--line); }
  .timeline article::before { content: ""; position: absolute; top: 8px; left: -4px; width: 7px; height: 7px; border: 2px solid var(--green); border-radius: 50%; background: var(--bg); }
  .timeline-date { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; }
  .timeline h3 { font-size: 18px; }
  .timeline p { font-size: 15px; line-height: 1.8; }
  .current { font-size: 11px; }
  .skill-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .skill-grid article { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .skill-grid article:first-child { padding-top: 0; }
  .skill-grid article:last-child { border-bottom: 0; padding-bottom: 0; }
  .skill-number { grid-row: 1 / 3; font-size: 11px; padding-top: 5px; }
  .skill-grid h3 { margin: 0 0 6px; }
  .skill-grid p { font-size: 14px; }
  .recognition-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
  .article-link { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px; padding: 18px 0; }
  .article-link .row-label { grid-column: 1 / -1; }
  .row-label { color: var(--green); }
  .recognition-row .patent-code { display: block; font-size: 12px; line-height: 1.9; }
  .patent-code > span { display: block; }
  .education { padding-bottom: 0; }
  footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  footer > div { flex-basis: 100%; }
  footer p { margin-top: 0; font-size: 11px; }
  dialog {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - env(safe-area-inset-top) - 12px);
    max-height: calc(100dvh - env(safe-area-inset-top) - 12px);
    margin: auto 0 0;
    border: 0;
    border-radius: 16px 16px 0 0;
  }
  .dialog-top { padding: 8px max(16px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); }
  #dialog-content { padding: 18px max(20px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .dialog-title { font-size: 23px; }
  .dialog-meta { font-size: 13px; line-height: 1.8; margin-bottom: 14px; }
  .dialog-summary, .detail-list { font-size: 15px; line-height: 1.85; }
  .detail-list { padding-left: 20px; }
  .detail-list li { padding: 6px 0; }
  .dialog-links { gap: 10px; font-size: 14px; }
  .dialog-links a { flex: 1 1 120px; justify-content: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 5px; }
  .screenshot-gallery { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .screenshot-gallery figure { width: 100%; max-width: 360px; margin: 0 auto; }
  .screenshot-gallery--single figure { max-width: none; }
  .screenshot-gallery figcaption { font-size: 12px; }
}

@media screen and (max-width:380px) {
  .layout { padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); }
  .topbar { gap: 8px; }
  .project-top { margin: 16px 16px 6px; }
  .project h3 { margin-right: 16px; margin-left: 16px; font-size: 19px; }
  .project-role, .project-desc, .project-result, .project-bottom, .project--compact .project-result { margin-right: 16px; margin-left: 16px; }
  .project-media.mobile-screenshots { padding: 12px 16px 0; gap: 12px; }
  .project-visual { padding: 16px 12px; gap: 6px; }
  .flow-node { padding: 8px 6px; }
  .focus-list { gap: 8px 12px; }
}

@media screen and (max-width:1000px) and (max-height:500px) {
  html { scroll-padding-top: 16px; }
  .topbar { position: static; }
  dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .dialog-top { padding-top: 4px; padding-bottom: 4px; }
}

@media (hover:none) {
  .project:hover { transform: none; }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print {
  @page { size: A4; margin: 16mm; }
  html { scroll-behavior: auto; }
  body {
    position: static !important;
    width: auto !important;
    overflow: visible !important;
    margin: 0;
    background: #fff;
    color: #202622;
    font-size: 11pt;
    line-height: 1.6;
  }
  body > .topbar, body > .layout, body > .skip, dialog { display: none !important; }
  #print-resume { display: block !important; }
  .print-page { display: block; break-after: page; page-break-after: always; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .filters, .profile-actions, .sidebar-foot, .project-media, .project-visual,
  .sidebar-intro, .profile-facts, .eyebrow, .focus-list, .section-note, .count,
  .project-top, .project-role, .project-desc, .project-result,
  .project-bottom button, .skill-number, .current { display: none !important; }
  .sidebar { border: 0; }
  .sidebar-inner { position: static; padding: 0 0 10pt; display: block; }
  h1 { font-size: 25pt; margin: 0; line-height: 1.25; }
  h1 > span { font-size: 12pt; margin: 6pt 0 0; line-height: 1.5; }
  h1 br { display: none; }
  .location { float: right; font-size: 10pt; }
  .sidebar-contact { display: flex; gap: 22pt; margin: 10pt 0 0; font-size: 10.5pt; }
  .sidebar-contact a { margin: 0; min-height: 0; }
  .sidebar-contact a span { display: none; }
  .intro { padding: 8pt 0 14pt; }
  .intro h2 { display: none; }
  .intro > p, .intro > .intro-position { max-width: none; font-size: 11pt; line-height: 1.6; }
  .intro > .intro-position { margin-bottom: 8pt; }
  .section { padding: 14pt 0 10pt; }
  .print-project-section { padding-top: 0; border-top: 0; }
  .section-heading { display: block; margin-bottom: 12pt; break-after: avoid; }
  .section-heading h2 { font-size: 15pt; margin: 0; line-height: 1.4; }
  .project, .project[hidden] {
    display: block !important;
    border: 0;
    border-bottom: 1px solid #e0e5de;
    border-radius: 0;
    margin: 0 0 12pt;
    overflow: visible;
    break-inside: avoid;
    page-break-inside: avoid;
    transform: none;
  }
  .project:last-child { margin-bottom: 0; border-bottom: 0; }
  .project-body, .project--featured .project-body { display: block; padding: 0 0 12pt; }
  .project h3, .project--featured h3 { font-size: 12.5pt; line-height: 1.4; }
  .print-project-meta { display: block !important; font-size: 10pt; color: var(--green); margin: 5pt 0 7pt; }
  .print-details { display: block !important; font-size: 11pt; margin: 0; padding-left: 16pt; line-height: 1.6; }
  .print-details li { padding: 0; margin: 5pt 0; }
  .project-bottom { display: block; margin: 8pt 0 0; padding: 0; border: 0; }
  .project-bottom .tags { font-size: 9.5pt; line-height: 1.5; margin: 0; gap: 0 11pt; }
  .print-references { margin-top: 4pt; font-size: 9pt; line-height: 1.5; color: var(--green); }
  .timeline article { display: grid; grid-template-columns: 105pt minmax(0, 1fr); gap: 14pt; padding: 0 0 16pt; break-inside: avoid; }
  .timeline h3 { font-size: 12pt; }
  .timeline-date { font-size: 10pt; line-height: 1.5; padding-top: 2pt; }
  .role { font-size: 10pt; margin-top: 4pt; }
  .timeline p { font-size: 11pt; line-height: 1.6; margin-top: 6pt; }
  .skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14pt 24pt; }
  .skill-grid article { display: block; padding: 0; break-inside: avoid; }
  .skill-grid h3 { font-size: 11pt; margin: 0 0 5pt; line-height: 1.5; }
  .skill-grid p { font-size: 10pt; line-height: 1.6; }
  .skill-line { display: block; }
  .recognition-row, .article-link { grid-template-columns: 72pt minmax(0, 1fr); gap: 12pt; padding: 9pt 0; break-inside: avoid; }
  .row-label { font-size: 10pt; }
  .recognition-row h3, .article-link h3 { font-size: 10.5pt; line-height: 1.5; }
  .recognition-row p { font-size: 10pt; line-height: 1.6; }
  .recognition-row .patent-code { font-size: 9pt; line-height: 1.5; margin: 4pt 0 8pt; gap: 0 10pt; }
  .article-link > span:last-child { display: none; }
  .article-link p, .education p { font-size: 10pt; margin-top: 4pt; }
  .education { padding-bottom: 0; }
  p, li { orphans: 2; widows: 2; }
  a { overflow-wrap: anywhere; }
}