:root {
      color-scheme: light;
      --paper: #f3f0e8;
      --paper-bright: #faf8f2;
      --ink: #20211f;
      --muted: #696a64;
      --line: #c9c6bb;
      --accent: #c65132;
      --accent-dark: #91371f;
      --dark: #252724;
      --serif: "Iowan Old Style", "Baskerville", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
      --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      --gutter: clamp(22px, 5.3vw, 84px);
      --max: 1380px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 28px; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; }
    a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
    .skip-link {
      position: absolute;
      z-index: 10;
      top: 10px;
      left: 10px;
      padding: 10px 14px;
      background: var(--ink);
      color: white;
      transform: translateY(-160%);
    }
    .skip-link:focus { transform: translateY(0); }
    .shell { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
    .eyebrow, .mono, .section-number, .nav-label, .work-kind, .footer-mark {
      font-family: var(--mono);
      font-size: .71rem;
      line-height: 1.4;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .eyebrow { color: var(--muted); }

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px;
      border-bottom: 1px solid var(--line);
    }
    .brand {
      display: inline-flex;
      gap: 11px;
      align-items: center;
      text-decoration: none;
      font-size: .88rem;
      font-weight: 650;
      letter-spacing: .02em;
    }
    .brand-mark {
      display: grid;
      width: 29px;
      height: 29px;
      place-items: center;
      border: 1px solid var(--ink);
      border-radius: 50%;
      color: var(--accent-dark);
      font-family: var(--serif);
      font-size: .78rem;
      font-weight: 700;
    }
    .header-right { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
    .site-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
    .site-nav a {
      color: #4f504b;
      font-size: .8rem;
      text-decoration: none;
      transition: color .18s ease;
    }
    .site-nav a:hover { color: var(--accent-dark); }
    .print-button {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 37px;
      padding: 6px 11px;
      border: 1px solid var(--line);
      border-radius: 2px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: .77rem;
      cursor: pointer;
      transition: border-color .18s ease, background .18s ease;
    }
    .print-button:hover { border-color: var(--ink); background: var(--paper-bright); }
    .print-button svg { width: 14px; height: 14px; }

    .hero { padding-block: clamp(43px, 7vw, 95px) clamp(32px, 5.2vw, 70px); }
    .hero-topline { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px, 4vw, 52px); }
    .hero-topline::before { content: ""; width: 29px; height: 1px; background: var(--accent); }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: clamp(32px, 7vw, 112px); align-items: center; }
    h1, h2, h3, p { margin-top: 0; }
    .hero h1 {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(4.2rem, 12.2vw, 10.3rem);
      font-weight: 500;
      letter-spacing: -.075em;
      line-height: .91;
    }
    .hero h1 .english { display: block; white-space: nowrap; }
    .hero h1 .chinese {
      display: block;
      margin-top: .2em;
      font-family: var(--sans);
      font-size: .52em;
      font-weight: 560;
      letter-spacing: .13em;
      line-height: 1.1;
    }
    .hero-role { margin: 27px 0 13px; color: var(--muted); font-size: .88rem; letter-spacing: .055em; }
    .hero-lede {
      max-width: 700px;
      margin-bottom: 0;
      font-family: var(--serif);
      font-size: clamp(1.55rem, 3.3vw, 2.55rem);
      letter-spacing: -.035em;
      line-height: 1.42;
    }
    .hero-lede em { color: var(--accent-dark); font-style: normal; }
    .hero-aside { position: relative; padding: 20px 0 8px 20px; }
    .diagram-label { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
    .diagram-label span:last-child { color: var(--accent-dark); }
    .hero-diagram { display: block; width: 100%; height: auto; max-height: 287px; margin-top: 13px; overflow: visible; }
    .diagram-node { fill: var(--paper-bright); stroke: #a9a69a; stroke-width: 1.1; }
    .diagram-node-main { fill: var(--ink); stroke: var(--ink); }
    .diagram-path { fill: none; stroke: #9c9a90; stroke-width: 1.1; stroke-dasharray: 3 5; }
    .diagram-point { fill: var(--accent); }
    .diagram-text { fill: var(--ink); font: 12px var(--sans); }
    .diagram-text-light { fill: var(--paper-bright); font: 12px var(--sans); }
    .diagram-code { fill: var(--muted); font: 9px var(--mono); letter-spacing: 1px; }
    .diagram-note { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; color: var(--muted); font-size: .72rem; }

    .hero-index { margin-top: clamp(38px, 6vw, 73px); border-top: 1px solid var(--ink); }
    .capability-index { display: grid; grid-template-columns: repeat(3, 1fr); }
    .capability-link {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 13px;
      padding: 17px 24px 19px 0;
      border-bottom: 1px solid var(--line);
      text-decoration: none;
    }
    .capability-link + .capability-link { padding-left: 22px; border-left: 1px solid var(--line); }
    .capability-link .index { padding-top: 2px; color: var(--accent-dark); font: .72rem var(--mono); }
    .capability-link strong { display: block; margin-bottom: 2px; font-size: .94rem; font-weight: 620; }
    .capability-link span:last-child { color: var(--muted); font-size: .76rem; line-height: 1.45; }
    .project-index { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding-top: 15px; }
    .project-index .eyebrow { margin: 0 5px 0 0; }
    .project-index a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: .81rem; }
    .project-index a::after { content: "↘"; color: var(--accent); font-size: .95rem; transition: transform .18s ease; }
    .project-index a:hover::after { transform: translate(2px, 2px); }

    .thesis-band { background: var(--dark); color: var(--paper-bright); }
    .thesis-inner { display: grid; grid-template-columns: minmax(180px, .38fr) 1fr; gap: 40px; align-items: start; padding-block: clamp(44px, 7vw, 92px); }
    .thesis-inner .eyebrow { color: #bdbeb5; padding-top: 11px; }
    .thesis-copy { max-width: 920px; }
    .thesis-copy p { margin-bottom: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 3.15rem); letter-spacing: -.025em; line-height: 1.47; }
    .thesis-copy p span { color: #ef9877; }
    .thesis-copy .thesis-caption { margin-top: 19px; color: #c4c5bc; font-family: var(--sans); font-size: .88rem; line-height: 1.7; }

    .section { padding-block: clamp(67px, 9vw, 124px); }
    .section-heading { display: grid; grid-template-columns: 80px 1fr; gap: 19px; align-items: start; margin-bottom: clamp(32px, 5vw, 60px); }
    .section-number { padding-top: 13px; color: var(--accent-dark); }
    .section-heading h2 { max-width: 790px; margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 5.7vw, 5rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.1; }
    .section-heading p { grid-column: 2; max-width: 680px; margin: -4px 0 0; color: var(--muted); font-size: .98rem; }

    .capability-list { border-top: 1px solid var(--ink); }
    .capability-row {
      display: grid;
      grid-template-columns: 80px minmax(210px, .8fr) minmax(0, 1.2fr);
      gap: 19px;
      padding-block: 27px 30px;
      border-bottom: 1px solid var(--line);
    }
    .capability-row .section-number { padding-top: 8px; }
    .capability-row h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.15rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.25; }
    .capability-row h3 small { display: block; margin-top: 7px; color: var(--muted); font: .65rem var(--mono); letter-spacing: .1em; }
    .capability-detail { max-width: 650px; color: #484943; }
    .capability-detail p { margin: 0 0 12px; }
    .capability-detail .micro-label { display: block; color: var(--accent-dark); font: .66rem var(--mono); letter-spacing: .1em; }
    .capability-detail .micro-copy { color: var(--muted); font-size: .83rem; }

    .work-section { background: var(--paper-bright); }
    .work-list { border-top: 1px solid var(--ink); }
    .project {
      display: grid;
      grid-template-columns: 80px minmax(240px, .85fr) minmax(0, 1.15fr);
      gap: 19px;
      padding-block: clamp(29px, 4.1vw, 53px);
      border-bottom: 1px solid var(--line);
      scroll-margin-top: 24px;
    }
    .project-number { color: var(--accent-dark); font: .75rem var(--mono); letter-spacing: .1em; }
    .project-title h3 { margin: 0 0 7px; font-family: var(--serif); font-size: clamp(1.75rem, 3.6vw, 3.15rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.14; }
    .work-kind { color: var(--muted); font-size: .65rem; }
    .project-body { max-width: 650px; }
    .project-body p { margin: 0 0 20px; color: #484943; }
    .flow-label { margin-bottom: 9px; color: var(--muted); font-size: .68rem; }
    .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px; margin: 0; padding: 0; list-style: none; }
    .flow li { display: inline-flex; align-items: center; gap: 9px; font-size: .75rem; }
    .flow li + li::before { content: "→"; color: var(--accent); font-family: var(--mono); }
    .flow li:last-child { color: var(--accent-dark); font-weight: 600; }

    .method-section { position: relative; overflow: hidden; background: #e9e5db; }
    .method-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(30px, 8vw, 125px); }
    .method-intro { max-width: 390px; }
    .method-intro h2 { margin: 19px 0 16px; font-family: var(--serif); font-size: clamp(2.35rem, 5vw, 4.55rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.08; }
    .method-intro p { color: var(--muted); }
    .steps { border-top: 1px solid var(--ink); }
    .step { display: grid; grid-template-columns: 43px minmax(115px, .52fr) 1fr; gap: 15px; padding: 17px 0; border-bottom: 1px solid var(--line); }
    .step-number { color: var(--accent-dark); font: .73rem var(--mono); }
    .step strong { font-size: .92rem; font-weight: 620; }
    .step p { margin: 0; color: var(--muted); font-size: .83rem; }

    .practice-section { padding-block: clamp(63px, 8vw, 105px); }
    .practice-layout { display: grid; grid-template-columns: 80px minmax(190px, .68fr) 1.32fr; gap: 19px; align-items: start; }
    .practice-layout h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; }
    .practice-copy p { max-width: 610px; margin-bottom: 20px; color: var(--muted); }
    .tech-list { display: flex; flex-wrap: wrap; gap: 8px 0; padding: 11px 0 0; border-top: 1px solid var(--line); }
    .tech-list span { padding: 0 13px; border-left: 1px solid var(--line); font: .74rem var(--mono); }
    .tech-list span:first-child { padding-left: 0; border-left: 0; }

    .conversation { background: var(--dark); color: var(--paper-bright); }
    .conversation-layout { display: grid; grid-template-columns: 80px .8fr 1.2fr; gap: 19px; align-items: start; }
    .conversation .section-number { color: #ef9877; }
    .conversation h2 { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 4.8vw, 4.15rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.13; }
    .conversation-copy { max-width: 550px; color: #c4c5bc; }
    .conversation-copy p { margin: 0 0 19px; }
    .contact-phone { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 44px; margin-bottom: 24px; color: var(--paper-bright); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.4; letter-spacing: .035em; text-decoration: none; }
    .contact-label { color: #c4c5bc; font: .7rem var(--mono); letter-spacing: .12em; }
    .contact-phone:hover { text-decoration: underline; text-underline-offset: 5px; }
    .conversation-topics { display: flex; flex-wrap: wrap; gap: 7px 0; padding-top: 13px; border-top: 1px solid #575a54; color: var(--paper-bright); }
    .conversation-topics span { padding: 0 12px; border-left: 1px solid #777a72; font-size: .81rem; }
    .conversation-topics span:first-child { padding-left: 0; border-left: 0; }

    .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 79px; color: var(--muted); font-size: .76rem; }
    .footer-mark { color: var(--ink); font-size: .68rem; }
    .site-footer a { text-decoration-thickness: 1px; text-underline-offset: 4px; }

    @media (min-width: 1500px) {
      .hero h1 { font-size: 10rem; }
    }
    @media (max-width: 850px) {
      .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(230px, .66fr); gap: 27px; }
      .hero-aside { padding-left: 0; }
      .hero h1 { font-size: clamp(4.1rem, 12vw, 7rem); }
      .capability-row, .project { grid-template-columns: 52px minmax(180px, .75fr) minmax(0, 1.25fr); gap: 15px; }
      .section-heading, .practice-layout, .conversation-layout { grid-template-columns: 52px 1fr 1.35fr; gap: 15px; }
      .section-heading h2 { grid-column: 2 / 4; }
      .section-heading p { grid-column: 2 / 4; }
      .thesis-inner { grid-template-columns: 140px 1fr; gap: 25px; }
    }
    @media (max-width: 620px) {
      :root { --gutter: 21px; }
      body { font-size: 15px; }
      .site-header { min-height: 62px; }
      .header-right { gap: 11px; }
      .site-nav { gap: 13px; }
      .site-nav a { font-size: .72rem; }
      .site-nav a:nth-child(3) { display: none; }
      .print-button { width: 35px; height: 35px; min-height: 35px; justify-content: center; padding: 0; }
      .print-button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
      .hero { padding-top: 35px; }
      .hero-topline { margin-bottom: 26px; }
      .hero-grid { display: block; }
      .hero h1 { font-size: clamp(4.15rem, 18vw, 7rem); }
      .hero-role { margin-top: 21px; font-size: .79rem; }
      .hero-lede { max-width: 460px; font-size: clamp(1.5rem, 7.4vw, 2.1rem); }
      .hero-aside { display: none; }
      .hero-index { margin-top: 34px; }
      .capability-index { grid-template-columns: 1fr; }
      .capability-link, .capability-link + .capability-link { grid-template-columns: 30px 1fr; gap: 9px; padding: 11px 0 12px; border-left: 0; }
      .capability-link strong { font-size: .87rem; }
      .capability-link span:last-child { font-size: .73rem; }
      .project-index { gap: 9px 17px; padding-top: 13px; }
      .project-index .eyebrow { flex-basis: 100%; }
      .project-index a { font-size: .75rem; }
      .thesis-inner { display: block; padding-block: 40px 44px; }
      .thesis-inner .eyebrow { margin-bottom: 16px; padding: 0; }
      .thesis-copy p { font-size: clamp(1.55rem, 7.6vw, 2.05rem); }
      .thesis-caption { font-size: .81rem; }
      .section { padding-block: 58px; }
      .section-heading { grid-template-columns: 35px 1fr; gap: 11px; margin-bottom: 29px; }
      .section-number { padding-top: 8px; font-size: .65rem; }
      .section-heading h2 { grid-column: 2; font-size: clamp(2.15rem, 10.3vw, 3.2rem); }
      .section-heading p { grid-column: 2; font-size: .88rem; }
      .capability-row { grid-template-columns: 35px 1fr; gap: 11px; padding-block: 20px 22px; }
      .capability-row h3 { font-size: 1.62rem; }
      .capability-row .capability-detail { grid-column: 2; font-size: .9rem; }
      .capability-detail .micro-copy { font-size: .78rem; }
      .project { grid-template-columns: 35px 1fr; gap: 9px 11px; padding-block: 25px 28px; }
      .project-number { padding-top: 7px; font-size: .65rem; }
      .project-title h3 { font-size: 1.95rem; }
      .project-body { grid-column: 2; }
      .project-body p { margin-bottom: 15px; font-size: .9rem; }
      .flow { gap: 6px 7px; }
      .flow li { gap: 7px; font-size: .68rem; }
      .method-layout { display: block; }
      .method-intro { margin-bottom: 29px; }
      .method-intro h2 { margin-top: 13px; font-size: 2.7rem; }
      .method-intro p { font-size: .89rem; }
      .step { grid-template-columns: 29px minmax(100px, .65fr) 1fr; gap: 9px; padding: 15px 0; }
      .step strong { font-size: .84rem; }
      .step p { font-size: .76rem; }
      .practice-layout { grid-template-columns: 35px 1fr; gap: 10px; }
      .practice-layout h2 { font-size: 1.83rem; }
      .practice-copy { grid-column: 2; }
      .practice-copy p { font-size: .88rem; }
      .tech-list span { padding-inline: 9px; font-size: .68rem; }
      .conversation-layout { grid-template-columns: 35px 1fr; gap: 10px; }
      .conversation h2 { font-size: 2.7rem; }
      .conversation-copy { grid-column: 2; margin-top: 7px; font-size: .9rem; }
      .conversation-topics span { padding-inline: 9px; font-size: .73rem; }
      .site-footer { min-height: 70px; font-size: .68rem; }
      .footer-mark { font-size: .59rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    }
    @media print {
      :root { --paper: #fff; --paper-bright: #fff; --ink: #111; --muted: #444; --line: #aaa; --accent-dark: #7d321d; }
      @page { margin: 15mm 16mm; }
      html, body { background: #fff !important; color: #111 !important; font-size: 10pt; }
      .shell { width: 100%; max-width: none; }
      .site-header { min-height: 0; padding: 0 0 7mm; }
      .site-nav, .print-button, .skip-link, .hero-aside { display: none !important; }
      .hero { padding: 9mm 0 7mm; }
      .hero-topline { margin-bottom: 6mm; }
      .hero h1 { font-size: 45pt; }
      .hero-role { margin: 5mm 0 2mm; }
      .hero-lede { font-size: 19pt; }
      .hero-index { margin-top: 8mm; }
      .capability-link { padding-block: 3mm; }
      .project-index { padding-top: 3mm; }
      .thesis-band, .conversation { background: #fff !important; color: #111 !important; }
      .thesis-inner, .section, .practice-section { padding-block: 9mm; }
      .thesis-inner { grid-template-columns: 35mm 1fr; gap: 7mm; }
      .thesis-inner .eyebrow, .thesis-caption, .conversation-copy { color: #444 !important; }
      .thesis-copy p { font-size: 18pt; }
      .thesis-copy p span, .conversation .section-number { color: #7d321d !important; }
      .section-heading { margin-bottom: 6mm; }
      .section-heading h2 { font-size: 31pt; }
      .capability-row, .project { padding-block: 5mm; break-inside: avoid; }
      .project-title h3 { font-size: 21pt; }
      .method-section { background: #fff !important; }
      .method-layout { gap: 10mm; }
      .method-intro h2, .conversation h2 { font-size: 29pt; }
      .step { padding-block: 3mm; }
      .conversation-layout { grid-template-columns: 18mm .8fr 1.2fr; }
      .conversation-topics span { color: #111; }
      .contact-phone, .contact-label { color: #111 !important; }
      .site-footer { min-height: 0; padding-top: 5mm; }
      a { text-decoration: none; }
    }