@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

    :root {
      --bg: #f0ede6;
      --paper: #fbfaf7;
      --ink: #151515;
      --muted: #77736c;
      --line: rgba(21,21,21,.18);
      --lime: #d9fa69;
      --orange: #ff7048;
      --blue: #5271ff;
      --violet: #9a7bff;
      --shadow: 7px 7px 0 var(--ink);
      --serif: Georgia, 'Times New Roman', serif;
    }
    [data-theme="dark"] {
      --bg: #151515;
      --paper: #20201f;
      --ink: #f5f2e9;
      --muted: #aaa49b;
      --line: rgba(245,242,233,.2);
      --lime: #c9f34e;
      --orange: #ff8060;
      --blue: #748cff;
      --violet: #ae96ff;
      --shadow: 7px 7px 0 var(--ink);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--bg);
      font-family: 'Space Grotesk', 'Noto Sans TC', sans-serif;
      overflow-x: hidden;
      transition: background .35s ease, color .35s ease;
    }
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .36;
      background-image: radial-gradient(var(--ink) .6px, transparent .6px);
      background-size: 5px 5px;
      mix-blend-mode: multiply;
      z-index: 0;
    }
    [data-theme="dark"] body::before { opacity: .11; mix-blend-mode: screen; }
    button, a { font: inherit; color: inherit; }
    button { cursor: pointer; }
    a { text-decoration: none; }

    .topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 62px;
      padding: 13px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 30;
      background: color-mix(in srgb, var(--bg) 84%, transparent);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font: 500 12px 'DM Mono', monospace;
      letter-spacing: .08em;
    }
    .brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; font: 700 15px var(--serif); background: var(--lime); }
    .top-actions { display: flex; gap: 8px; align-items: center; }
    .utility {
      min-height: 34px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      background: transparent;
      padding: 0 13px;
      font: 500 10px 'DM Mono', monospace;
      letter-spacing: .05em;
      transition: transform .2s, background .2s;
    }
    .utility:hover { transform: translateY(-2px); background: var(--lime); }
    .utility.active { background: var(--ink); color: var(--bg); }

    .chapter-rail {
      position: fixed;
      top: 50%;
      right: 18px;
      transform: translateY(-50%);
      z-index: 20;
      display: grid;
      gap: 9px;
      justify-items: end;
    }
    .chapter-link {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: none;
      color: var(--muted);
      font: 400 9px 'DM Mono', monospace;
      letter-spacing: .06em;
      padding: 0;
      transition: color .2s, transform .2s;
    }
    .chapter-link::after { content: ''; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; background: var(--bg); }
    .chapter-link:hover, .chapter-link.active { color: var(--ink); transform: translateX(-4px); }
    .chapter-link.active::after { background: var(--orange); border-color: var(--ink); }

    main { position: relative; z-index: 1; }
    .chapter {
      min-height: 100svh;
      padding: 112px 9vw 82px;
      position: relative;
      display: flex;
      align-items: center;
      scroll-snap-align: start;
      overflow: hidden;
    }
    .chapter::after { content: ''; position: absolute; left: 9vw; right: 9vw; bottom: 28px; height: 1px; background: var(--line); }
    .chapter-id { position: absolute; left: 9vw; top: 83px; font: 500 10px 'DM Mono', monospace; color: var(--muted); letter-spacing: .12em; }
    .chapter-id strong { color: var(--orange); }
    .eyebrow { font: 500 11px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
    h1, h2, h3, p { margin-top: 0; }
    h1 { font-size: clamp(4rem, 8.5vw, 9rem); line-height: .86; letter-spacing: -.09em; margin-bottom: 28px; font-weight: 700; }
    h2 { font-size: clamp(2.7rem, 4.2vw, 4.6rem); line-height: .9; letter-spacing: -.075em; margin-bottom: 24px; }
    h3 { font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1; letter-spacing: -.04em; margin-bottom: 10px; }
    p { line-height: 1.65; color: var(--muted); }
    .serif { font-family: var(--serif); font-style: italic; letter-spacing: -.05em; }
    .display { font-size: clamp(2rem, 4.5vw, 5rem); line-height: .95; letter-spacing: -.07em; }

    .intro { align-items: stretch; min-height: 100svh; padding-top: 150px; }
    .intro-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(260px,.7fr); gap: 6vw; align-items: end; width: 100%; }
    .intro-copy { align-self: center; }
    .intro-copy .eyebrow { margin-bottom: 22px; }
    .intro-copy h1>span { display:block; }
    .intro-copy h1 .name-line { display:flex; align-items:baseline; flex-wrap:nowrap; gap:.18em; margin:.1em 0 0 .12em; white-space:nowrap; line-height:1.08; }
    .name-chinese { color:var(--blue); }
    .name-english { color:var(--orange); }
    .intro-note { max-width: 490px; font-size: 15px; margin-bottom: 28px; }
    .start-btn { border: 1px solid var(--ink); padding: 14px 18px; border-radius: 999px; background: var(--lime); font: 500 11px 'DM Mono', monospace; box-shadow: 4px 4px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
    .start-btn:hover { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
    .intro-visual { align-self: center; position: relative; min-height: 410px; }
    .signal-card { position: absolute; width: min(360px, 80%); aspect-ratio: 1 / 1.12; right: 4%; top: 2%; border: 1px solid var(--ink); background: var(--paper); box-shadow: var(--shadow); transform: rotate(4deg); padding: 19px; }
    .signal-card::before { content: 'REC 2026 / ZHONG'; position: absolute; top: 12px; left: 16px; font: 500 9px 'DM Mono', monospace; }
    .signal-screen { position: absolute; inset: 54px 19px 19px; border: 1px solid var(--ink); overflow: hidden; background: var(--blue); }
    .signal-screen::before { content: ''; position: absolute; width: 190px; height: 190px; background: var(--orange); border-radius: 50%; top: 14%; left: 17%; mix-blend-mode: multiply; }
    .signal-screen::after { content: 'Z'; position: absolute; right: 16%; bottom: 4%; color: var(--paper); font: 900 190px/1 var(--serif); transform: rotate(-15deg); }
    .signal-lines { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 24px, rgba(251,250,247,.55) 25px 26px); opacity: .5; }
    .floating-label { position: absolute; padding: 10px 13px; border: 1px solid var(--ink); background: var(--lime); font: 500 10px 'DM Mono', monospace; box-shadow: 4px 4px 0 var(--ink); }
    .floating-label.one { left: 3%; bottom: 24%; transform: rotate(-9deg); }
    .floating-label.two { right: 1%; bottom: 10%; transform: rotate(8deg); background: var(--paper); }
    .scroll-hint { position: absolute; bottom: 38px; right: 10vw; font: 500 10px 'DM Mono', monospace; color: var(--muted); animation: float 1.8s ease-in-out infinite; }
    @keyframes float { 50% { transform: translateY(6px); } }

    .about-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; align-items: center; width: 100%; }
    .number-title { display: flex; align-items: flex-start; gap: 12px; }
    .number-title .big-num { font: 500 12px 'DM Mono', monospace; color: var(--orange); padding-top: 8px; }
    .about-intro { max-width: 360px; }
    .principles { display: grid; gap: 13px; }
    .principle { border-top: 1px solid var(--line); padding: 18px 0; display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; cursor: pointer; transition: padding .25s, background .25s; }
    .principle:hover, .principle.selected { padding-left: 14px; background: color-mix(in srgb, var(--lime) 44%, transparent); }
    .principle-index { font: 500 10px 'DM Mono', monospace; color: var(--muted); }
    .principle h3 { margin: 0; }
    .principle p { margin: 5px 0 0; font-size: 12px; }
    .arrow { font-size: 20px; transition: transform .2s; }
    .principle:hover .arrow, .principle.selected .arrow { transform: translate(3px,-3px); }
    .principle-detail { min-height: 112px; margin-top: 22px; border: 1px solid var(--ink); background: var(--paper); padding: 16px; box-shadow: 4px 4px 0 var(--ink); font-size: 13px; line-height: 1.6; }
    .principle-detail b { color: var(--orange); font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; }

    .experience-layout { width: 100%; display: grid; grid-template-columns: .68fr 1.32fr; gap: 8vw; align-items: start; }
    .experience-intro { position: sticky; top: 132px; }
    .experience-intro p { max-width: 340px; }
    .timeline { position: relative; padding-left: 28px; }
    .timeline::before { content: ''; position: absolute; top: 6px; bottom: 7px; left: 5px; width: 1px; background: var(--line); }
    .job { position: relative; padding: 0 0 28px; cursor: pointer; }
    .job::before { content: ''; position: absolute; left: -28px; top: 5px; width: 10px; height: 10px; border: 1px solid var(--ink); border-radius: 50%; background: var(--bg); transition: background .2s, transform .2s; }
    .job:hover::before, .job.active::before { background: var(--orange); transform: scale(1.35); }
    .job-row { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 11px; }
    .job-date { font: 500 10px 'DM Mono', monospace; color: var(--muted); white-space: nowrap; }
    .job-place { font: 600 17px/1.1 'Noto Sans TC', sans-serif; }
    .job-role { font: 12px 'DM Mono', monospace; color: var(--muted); margin-top: 8px; }
    .job-desc { display: none; font-size: 12px; max-width: 480px; margin: 10px 0 0; }
    .job.active .job-desc, .job:hover .job-desc { display: block; }

    .work-section { width: 100%; }
    .work-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 30px; }
    .filter-row { display: flex; flex-wrap: wrap; gap: 7px; }
    .filter { border: 1px solid var(--ink); background: transparent; border-radius: 999px; padding: 7px 11px; font: 500 10px 'DM Mono', monospace; }
    .filter.active, .filter:hover { background: var(--ink); color: var(--bg); }
    .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .work-card { border: 1px solid var(--ink); background: var(--paper); min-height: 290px; padding: 10px; cursor: pointer; transition: transform .28s, box-shadow .28s; }
    .work-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); }
    .work-card.hidden { display: none; }
    .work-art { position: relative; aspect-ratio: 1.55 / 1; border: 1px solid var(--ink); overflow: hidden; display: grid; place-items: center; margin-bottom: 12px; }
    .work-art::before, .work-art::after { content: ''; position: absolute; border-radius: 50%; mix-blend-mode: multiply; }
    .art-orange { background: var(--orange); }
    .art-orange::before { width: 75%; aspect-ratio: 1; background: var(--lime); right: -12%; top: -35%; }
    .art-orange::after { width: 42%; aspect-ratio: 1; background: var(--blue); left: 10%; bottom: -25%; }
    .art-blue { background: var(--blue); }
    .art-blue::before { width: 110%; height: 32%; background: var(--lime); transform: rotate(-15deg); top: 34%; }
    .art-blue::after { width: 28%; aspect-ratio: 1; background: var(--orange); left: 12%; top: 10%; }
    .art-lime { background: var(--lime); }
    .art-lime::before { width: 65%; aspect-ratio: 1; background: var(--violet); left: -18%; bottom: -35%; }
    .art-lime::after { width: 40%; aspect-ratio: 1; background: var(--orange); right: 3%; top: -18%; }
    .art-purple { background: var(--violet); }
    .art-purple::before { width: 55%; aspect-ratio: 1; background: var(--orange); left: 10%; top: 14%; }
    .art-purple::after { width: 45%; aspect-ratio: 1; background: var(--lime); right: -8%; bottom: -20%; }
    .play-dot { position: relative; z-index: 1; width: 43px; height: 43px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: var(--paper); font-size: 15px; padding-left: 3px; }
    .work-meta { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
    .work-meta h3 { font-size: 17px; margin: 0; }
    .work-meta p { margin: 5px 0 0; font: 10px 'DM Mono', monospace; }
    .work-number { font: 500 11px 'DM Mono', monospace; color: var(--muted); }

    .tool-layout { width: 100%; display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; align-items: center; }
    .tool-copy p { max-width: 410px; }
    .tool-board { border: 1px solid var(--ink); background: var(--paper); box-shadow: var(--shadow); padding: 18px; transform: rotate(2deg); }
    .tool-top { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 13px; margin-bottom: 16px; font: 500 10px 'DM Mono', monospace; }
    .tool-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .tool-chip { border: 1px solid var(--line); padding: 12px; min-height: 74px; transition: background .2s, transform .2s; }
    .tool-chip:hover { background: var(--lime); transform: translate(-2px,-2px); border-color: var(--ink); }
    .tool-chip b { display: block; font-size: 15px; margin-bottom: 6px; }
    .tool-chip span { font: 10px 'DM Mono', monospace; color: var(--muted); }

    .contact { min-height: 86svh; }
    .contact-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
    .contact h2 { max-width: 650px; }
    .contact h2 em { color: var(--orange); font-family: var(--serif); }
    .contact-copy { max-width: 420px; }
    .contact-title-line { white-space: nowrap; }
    .contact-links { display: grid; gap: 8px; margin-top: 25px; }
    .contact-link { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding: 12px 0; font: 500 12px 'DM Mono', monospace; }
    .contact-link:hover { color: var(--orange); }
    .contact-stamp { border: 1px solid var(--ink); padding: 22px; background: var(--lime); box-shadow: var(--shadow); transform: rotate(-3deg); }
    .contact-stamp strong { display: block; font-size: clamp(2rem,5vw,5rem); line-height: .85; letter-spacing: -.09em; }
    .contact-stamp small { display: block; margin-top: 28px; font: 500 10px 'DM Mono', monospace; }
    .legacy-footer { position: absolute; bottom: 30px; left: 9vw; right: 9vw; display: flex; justify-content: space-between; font: 10px 'DM Mono', monospace; color: var(--muted); }

    .portrait-warning { display: none; position: fixed; inset: 0; z-index: 100; background: var(--ink); color: var(--bg); place-items: center; padding: 28px; text-align: center; }
    .portrait-warning.show { display: grid; }
    .portrait-warning .warning-inner { max-width: 300px; }
    .portrait-warning .rotate-icon { font-size: 46px; margin-bottom: 18px; animation: rotate-phone 2s ease-in-out infinite; }
    @keyframes rotate-phone { 50% { transform: rotate(90deg); } }
    .warning-inner button { margin-top: 18px; border: 1px solid var(--bg); background: transparent; color: var(--bg); padding: 10px 15px; border-radius: 999px; font: 10px 'DM Mono', monospace; }
    .resume-mode .chapter-rail, .resume-mode .scroll-hint, .resume-mode .start-btn, .resume-mode .intro-visual { display: none; }
    .resume-mode .chapter { min-height: auto; padding-top: 110px; }
    .resume-mode .chapter::after { position: static; display: block; margin-top: 60px; }
    .resume-mode .intro-grid, .resume-mode .about-grid, .resume-mode .experience-layout, .resume-mode .tool-layout, .resume-mode .contact-grid { grid-template-columns: 1fr; gap: 28px; }
    .resume-mode .experience-intro { position: static; }
    .resume-mode .chapter-id { position: static; margin-bottom: 18px; }
    .resume-mode .work-card { break-inside: avoid; }
    .toast { position: fixed; z-index: 80; left: 50%; bottom: 30px; transform: translate(-50%, 100px); background: var(--ink); color: var(--bg); padding: 11px 15px; font: 10px 'DM Mono', monospace; transition: transform .3s; }
    .toast.show { transform: translate(-50%, 0); }
    .modal { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 20px; background: rgba(15,15,15,.65); backdrop-filter: blur(10px); }
    .modal.open { display: grid; }
    .modal-card { width: min(720px, 100%); max-height: 88svh; overflow: auto; background: var(--paper); border: 1px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 24px; position: relative; }
    .modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 1px solid var(--ink); background: transparent; border-radius: 50%; }
    .modal-art { margin: 20px 0; aspect-ratio: 16/7; border: 1px solid var(--ink); display: grid; place-items: center; }
    .modal-card .modal-kicker { font: 500 10px 'DM Mono', monospace; color: var(--orange); }
    .modal-card p { max-width: 580px; }

    @media (max-width: 800px) {
      .topbar { padding: 11px 16px; }
      .brand span { display: none; }
      .utility { padding: 0 9px; font-size: 9px; }
      .chapter { padding-left: 6vw; padding-right: 13vw; }
      .chapter-id { left: 6vw; }
      .chapter::after { left: 6vw; right: 13vw; }
      .intro-grid, .about-grid, .experience-layout, .tool-layout, .contact-grid { grid-template-columns: 1fr; gap: 32px; }
      .intro-visual { min-height: 310px; }
      .signal-card { right: 8%; max-width: 280px; }
      .work-grid { grid-template-columns: repeat(2,1fr); }
      .legacy-footer { left: 6vw; right: 13vw; }
      .chapter-rail { right: 10px; }
      .chapter-link { font-size: 0; }
      .chapter-link::after { width: 8px; height: 8px; }
    }
    @media (max-width: 560px) {
      body { font-size: 14px; }
      .top-actions .utility:nth-child(3) { display: none; }
      h1 { font-size: clamp(3.5rem, 18vw, 6.5rem); }
      h2 { font-size: clamp(2.8rem, 15vw, 5rem); }
      .chapter { min-height: auto; padding-top: 125px; padding-bottom: 92px; }
      .intro { min-height: 100svh; }
      .intro-visual { min-height: 260px; }
      .signal-card { max-width: 230px; }
      .work-grid { grid-template-columns: 1fr; }
      .work-card { min-height: 0; }
      .tool-list { grid-template-columns: 1fr; }
      .chapter-rail { display: none; }
    }
    @media print {
      .topbar, .chapter-rail, .portrait-warning, .modal, .toast { display: none !important; }
      body { background: white; color: black; }
      body::before { display: none; }
      .chapter { min-height: auto; padding: 32px 7vw; page-break-inside: avoid; }
      .chapter::after { display: none; }
      .intro-visual, .scroll-hint, .start-btn, .filter-row { display: none; }
      .intro-grid, .about-grid, .experience-layout, .tool-layout, .contact-grid { grid-template-columns: 1fr; gap: 20px; }
      .experience-intro { position: static; }
      .job-desc { display: block; }
    }
/* Preserve the first prototype's composition while using the current résumé content. */
:root { color-scheme: light; --ground: var(--bg); --surface: #e5e0d6; --accent: var(--lime); --accent-ink: #464c22; --on-accent: #151515; --muted: #69645d; --header: 62px; }
[data-theme="dark"] { color-scheme: dark; --surface: #30302e; --accent-ink: #d9fa69; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --bg:#151515; --paper:#20201f; --ink:#f5f2e9; --muted:#b8b1a5; --line:rgba(245,242,233,.2); --lime:#c9f34e; --orange:#ff8060; --blue:#748cff; --violet:#ae96ff; --surface:#30302e; --accent-ink:#d9fa69; } }
html { scroll-padding-top:62px; }
body { font-size:15px; -webkit-font-smoothing:antialiased; }
body::before { opacity:.16; }
button, input, select { font:inherit; }
button { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
::selection { background:var(--lime); color:#151515; }
[hidden] { display:none!important; }
svg { width:21px; height:21px; }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px 18px; z-index:100; background:var(--lime); color:#151515; }
.skip-link:focus { top:12px; }
.site-header { position:fixed; inset:0 0 auto; height:62px; padding:10px 24px; display:flex; justify-content:space-between; align-items:center; gap:20px; z-index:30; background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.identity { display:flex; align-items:center; gap:11px; font:500 11px 'DM Mono',monospace; letter-spacing:.05em; }
.identity img { width:31px; height:31px; border-radius:50%; object-fit:cover; object-position:50% 43%; border:1px solid var(--ink); }
.header-actions { display:flex; gap:15px; align-items:center; font:500 10px 'DM Mono',monospace; letter-spacing:.04em; }
.header-actions>a { padding:9px 12px; border:1px solid var(--ink); border-radius:999px; }
.header-actions>a:hover { background:var(--lime); color:#151515; }
.icon-button { position:relative; background:transparent; min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ink); border-radius:50%; padding:7px; }
.icon-button:hover { background:var(--lime); color:#151515; }
.download-button { color:var(--muted); cursor:help; }
.download-note { position:absolute; top:calc(100% + 10px); right:0; white-space:nowrap; background:var(--ink); color:var(--paper); padding:9px 12px; visibility:hidden; opacity:0; }
.download-button:hover .download-note,.download-button:focus-visible .download-note,.download-button.show-note .download-note { opacity:1; visibility:visible; }
.chapter-nav { position:fixed; z-index:25; right:16px; top:50%; transform:translateY(-45%); width:125px; display:grid; gap:8px; }
.chapter-nav>a { display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:5px 0; color:var(--muted); font:500 9px 'DM Mono',monospace; letter-spacing:.01em; white-space:nowrap; }
.chapter-nav>a::after { content:''; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; flex:none; }
.chapter-nav>a.current { color:var(--ink); }
.chapter-nav>a.current::after { background:var(--orange); border-color:var(--ink); }
.chapter-nav>a:hover { color:var(--blue); }
.reading-status { display:flex; justify-content:space-between; gap:8px; margin-top:22px; font:500 9px 'DM Mono',monospace; color:var(--muted); }
.progress-track { height:3px; background:var(--line); overflow:hidden; margin-top:2px; }
.progress-track>span { display:block; width:100%; height:100%; transform-origin:left; background:var(--blue); transition:transform .3s; }
.chapter-toggle { display:none; }
.mobile-progress { display:none; }
@media (min-width:801px) {
  .chapter-nav { right:12px; width:114px; gap:5px; }
  .chapter-nav>a { font-size:8.5px; gap:5px; padding:4px 0; }
  .chapter-nav>a::after { width:5px; height:5px; }
  .reading-status { font-size:8.5px; margin-top:16px; }
  .progress-track { height:2px; }
}
main { background:transparent; }
.chapter { padding-right:max(153px,9vw); overflow:visible; }
.chapter::after { right:max(153px,9vw); }
.chapter-id { top:88px; }
.intro { padding-top:136px; }
.intro-grid { align-items:center; grid-template-columns:minmax(0,1fr); }
.intro-copy { width:100%; max-width:900px; }
.intro-copy h1 { line-height:.94; font-weight:900; }
.intro-copy h1 .serif { font-weight:700; line-height:.82; }
.intro-note { font-size:16px; max-width:38rem; margin-bottom:28px; }
.intro-note p { line-height:1.9; margin-bottom:16px; text-wrap:balance; }
.start-btn { display:inline-flex; gap:24px; align-items:center; }
.signal-screen::before { width:68%; height:auto; aspect-ratio:1; left:14%; }
.signal-screen::after { font-size:clamp(150px,13vw,190px); }
.signal-card { animation:card-arrive 800ms ease both; }
.floating-label.two { background:var(--violet); color:#151515; }
.scroll-hint { right:max(153px,9vw); }
h2 { line-height:1.08; }
.about-intro { max-width:none; }
.about-intro h2 { margin-bottom:24px; }
.about-intro>p:not(.eyebrow),.experience-intro>p:not(.eyebrow),.tool-copy>p:not(.eyebrow) { font-size:14px; }
.principle-detail { border-top:5px solid var(--orange); min-height:150px; }
.principle-detail b { color:var(--ink); font-size:12px; }
.principle-detail p { font-size:13px; margin:9px 0 0; color:var(--muted); }
.capability-stack { display:grid; gap:10px; }
.capability { border-top:1px solid var(--line); padding:19px 0; transition:background .2s,padding .2s; --row-color:var(--lime); }
.capability:nth-child(2) { --row-color:var(--violet); }
.capability:nth-child(3) { --row-color:var(--orange); }
.capability.selected { background:color-mix(in srgb,var(--row-color) 35%,transparent); padding-inline:14px; }
.capability h3 { margin:0; font-size:clamp(18px,1.7vw,25px); }
.principle-select { border:0; background:transparent; width:100%; padding:0; text-align:left; display:grid; grid-template-columns:24px 1fr 20px; gap:12px; align-items:center; font:inherit; letter-spacing:inherit; line-height:1.4; }
.capability>p { font-size:13px; margin:14px 0 0 36px; }
.capability-stack.interactive .capability>p { display:none; }
.source-row { display:flex; flex-wrap:wrap; gap:6px; margin:15px 0 0 36px; align-items:center; font-size:11px; }
.source-row>span { width:100%; color:var(--muted); margin-bottom:3px; }
.source-row button { border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:6px 9px; font-size:11px; min-height:32px; }
.source-row button:hover { background:var(--ink); color:var(--paper); }
.capability-stack.interactive .capability:not(.selected) .source-row { display:none; }
.interaction-note { font-size:11px; margin-top:18px; color:var(--muted); }
.section-heading { display:flex; gap:40px; align-items:end; justify-content:space-between; margin-bottom:40px; }
.section-heading h2 { max-width:65%; margin-bottom:0; }
.section-intro { font-size:14px; max-width:330px; margin-bottom:0; }
.projects { padding-top:128px; }
.project { display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; }
.project+.project { margin-top:100px; }
.project h3 { font-size:clamp(25px,2.6vw,38px); line-height:1.1; overflow-wrap:anywhere; }
.project-purpose { font-size:15px; margin:0 0 24px; color:var(--muted); }
.project ul { padding-left:1.1em; font-size:14px; line-height:1.8; color:var(--muted); }
.project li+li { margin-top:10px; }
.text-link { display:inline-flex; gap:20px; border-bottom:1px solid var(--ink); padding-bottom:5px; margin-top:16px; font-size:13px; }
.text-link:hover { color:var(--blue); }
figure { margin:0; }
.project-visual { transform:rotate(2deg); }
.project-composer .project-visual { transform:rotate(-2deg); }
.workflow { border:1px solid var(--ink); box-shadow:var(--shadow); background:var(--paper); min-height:320px; padding:30px; display:flex; flex-direction:column; justify-content:center; }
.translation-workflow { border-top:7px solid var(--blue); }
.language-pair { display:grid; font-size:clamp(38px,4.5vw,64px); font-weight:700; letter-spacing:-.05em; line-height:1.2; gap:10px; }
.language-pair span:last-child { text-align:right; color:var(--blue); }
.workflow-path { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:11px; margin-top:28px; }
.platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; font:10px 'DM Mono',monospace; }
.platforms span { background:var(--lime); color:#151515; padding:6px 8px; border:1px solid var(--ink); }
figcaption { font-size:11px; color:var(--muted); margin-top:18px; }
.composer-workflow { gap:16px; border-top:7px solid var(--violet); }
.composer-input { font-size:23px; font-weight:700; }
.composer-tracks { display:grid; gap:8px; }
.composer-tracks span { background:color-mix(in srgb,var(--violet) 25%,var(--paper)); padding:9px 13px; font-size:13px; border:1px solid var(--line); }
.composer-tracks span:nth-child(2) { margin-left:22px; background:color-mix(in srgb,var(--blue) 20%,var(--paper)); }
.composer-tracks span:nth-child(3) { margin-left:44px; background:var(--orange); color:#151515; }
.composer-output { display:flex; justify-content:flex-end; gap:10px; font-size:11px; }
.film-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.film-entry { min-height:0; cursor:default; }
.film-entry h3 { font-size:15px; font-weight:600; line-height:1.45; }
.film-entry p { font-family:inherit; display:flex; gap:10px; flex-wrap:wrap; font-size:10px; line-height:1.5; }
.media-pending { position:relative; z-index:1; background:var(--paper); padding:7px 10px; border:1px solid var(--ink); color:var(--ink); font-size:10px; }
.section-end { display:flex; justify-content:flex-end; margin-top:26px; }
.action { border:1px solid var(--ink); padding:12px 17px; border-radius:999px; background:var(--lime); color:#151515; font:500 11px 'DM Mono',monospace; box-shadow:4px 4px 0 var(--ink); display:inline-flex; align-items:center; gap:10px; transition:transform .2s,box-shadow .2s; }
.action:hover { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.experience-intro h2 { font-size:clamp(40px,4.2vw,66px); }
.experience-list { padding-left:28px; }
.experience-entry { position:relative; padding:0 0 25px; display:grid; grid-template-columns:1fr; scroll-margin-top:110px; }
.experience-entry::before { content:''; position:absolute; left:-28px; top:7px; width:9px; height:9px; border:1px solid var(--ink); border-radius:50%; background:var(--bg); }
.experience-entry.active::before { background:var(--orange); transform:scale(1.25); }
.experience-entry>div { grid-row:1; border-bottom:1px solid var(--line); padding:0 145px 14px 0; }
.experience-entry h3 { font-size:17px; line-height:1.5; letter-spacing:-.03em; margin:0; }
.job-select { border:0; padding:0; text-align:left; background:transparent; font:inherit; letter-spacing:inherit; }
.job-select:hover { color:var(--blue); }
.period { position:absolute; right:0; top:2px; margin:0; font:10px/1.8 'DM Mono',monospace; color:var(--muted); }
.job-title { font-size:11px; line-height:1.65; margin:6px 0 0; }
.job-description { font-size:12px; line-height:1.8; margin:12px 0 0; }
.experience-list.interactive .experience-entry:not(.active) .job-description { display:none; }
.education { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:25px 0 0 28px; padding-top:24px; border-top:1px solid var(--line); }
.education span { font:10px 'DM Mono',monospace; color:var(--muted); }
.education h3 { font-size:17px; margin:12px 0 6px; }
.education p { font-size:12px; margin-bottom:0; }
.tool-board { transform:rotate(2deg); }
.tool-chip { border-color:var(--line); }
.tool-chip:nth-child(4) { background:color-mix(in srgb,var(--violet) 19%,var(--paper)); }
.tool-chip:nth-child(5) { background:color-mix(in srgb,var(--blue) 17%,var(--paper)); }
.tool-chip:nth-child(6) { background:color-mix(in srgb,var(--orange) 16%,var(--paper)); }
.tool-chip:hover { background:var(--lime); color:#151515; }
.tool-chip:hover span { color:#41432a; }
.contact { position:relative; z-index:1; padding-bottom:140px; }
.contact-grid { align-items:center; }
.contact h2 { font-size:clamp(40px,4.2vw,66px); }
.contact-name { font-size:14px; }
.contact-link { font-size:11px; }
.contact-stamp { padding:28px 22px; color:#151515; }
.contact-stamp strong { font-weight:700; font-size:clamp(45px,5.8vw,90px); }
.contact-stamp small { font-size:9px; line-height:1.8; }
.contact-bottom { position:absolute; bottom:45px; left:9vw; right:max(153px,9vw); display:flex; justify-content:space-between; font:10px 'DM Mono',monospace; }
.contact-bottom p { margin:0; }
.source-preview { position:fixed; z-index:45; width:330px; max-height:380px; overflow:auto; background:var(--paper); color:var(--ink); padding:20px; pointer-events:none; border:1px solid var(--ink); box-shadow:5px 5px 0 var(--ink); }
.source-preview strong { display:block; font-size:15px; margin-bottom:8px; }
.source-preview p { font-size:12px; margin:0; }
.source-preview small { font:10px 'DM Mono',monospace; color:var(--muted); }
.preview-job+.preview-job { margin-top:16px; }
dialog { background:var(--paper); color:var(--ink); border:1px solid var(--ink); box-shadow:7px 7px 0 var(--ink); max-width:690px; width:calc(100% - 36px); max-height:85svh; padding:30px; }
dialog::backdrop { background:rgba(0,0,0,.55); backdrop-filter:blur(6px); }
.dialog-header { display:flex; justify-content:space-between; gap:25px; align-items:start; margin-bottom:26px; }
.dialog-header h2 { font-size:25px; }
.dialog-job { padding:20px; background:var(--bg); border-top:3px solid var(--blue); margin-top:12px; }
.dialog-job h3 { font-size:19px; line-height:1.4; }
.dialog-job p { font-size:14px; margin:8px 0 0; }
.dialog-job .job-meta { font-size:12px; color:var(--muted); }
.dialog-job a { display:inline-block; margin-top:14px; font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.noscript-note { padding:22px 9vw; font-size:13px; }
.works-page .work-row { border-left:3px solid var(--blue); }
.works-page .work-row:nth-child(4n+2) { border-left-color:var(--orange); }
.works-page .work-row:nth-child(4n+3) { border-left-color:var(--violet); }
.works-page .work-row:nth-child(4n) { border-left-color:var(--lime); }
/* Restrained blue/orange palette, with pale green reserved for actions. */
:root { --blue:#526bdb; --orange:#de7856; --lime:#dfeab0; --violet:var(--blue); }
body { transition:none; }
body::before { opacity:.08; }
.start-btn { color:#151515; }
.intro-note { max-width:38rem; }
.art-orange { background:color-mix(in srgb,var(--orange) 30%,var(--paper)); }
.art-blue,.art-lime,.art-purple { background:color-mix(in srgb,var(--blue) 20%,var(--paper)); }
.work-art::before,.work-art::after { mix-blend-mode:normal; background:color-mix(in srgb,var(--blue) 26%,transparent); }
.art-orange::before,.art-orange::after { background:color-mix(in srgb,var(--orange) 35%,transparent); }
.art-lime::before,.art-purple::before { background:color-mix(in srgb,var(--blue) 35%,transparent); }
.tool-chip:nth-child(4),.tool-chip:nth-child(5) { background:color-mix(in srgb,var(--blue) 10%,var(--paper)); }
.tool-chip:nth-child(6) { background:var(--paper); }
.project-composer .workflow { border-top-color:var(--blue); }
[data-theme="dark"] {
  --bg:#171a20; --paper:#22262e; --ink:#f4f4ef; --muted:#c1c5ce;
  --line:#525b6a; --blue:#9caeff; --orange:#f1a27f; --lime:#c9dba0;
  --violet:var(--blue); --surface:#303640; --shadow:6px 6px 0 #080a0e;
}
[data-theme="dark"] body::before { opacity:.025; }
[data-theme="dark"] .start-btn,[data-theme="dark"] .action { box-shadow:4px 4px 0 #080a0e; border-color:var(--lime); }
[data-theme="dark"] .contact-stamp { border-color:var(--lime); }
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:#171a20; --paper:#22262e; --ink:#f4f4ef; --muted:#c1c5ce;
    --line:#525b6a; --blue:#9caeff; --orange:#f1a27f; --lime:#c9dba0;
    --violet:var(--blue); --surface:#303640; --shadow:6px 6px 0 #080a0e;
  }
  :root:not([data-theme="light"]) body::before { opacity:.025; }
}
@keyframes card-arrive { from { opacity:0; transform:translateY(22px) rotate(0); } to { opacity:1; transform:rotate(4deg); } }
@media (prefers-reduced-motion:no-preference) { .intro-copy { animation:copy-arrive .7s ease both; } @keyframes copy-arrive { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } } }
@media (max-width:1100px) and (min-width:801px) {
  .chapter { padding-left:6vw; padding-right:153px; }
  .chapter-id { left:6vw; } .chapter::after { left:6vw; }
  .contact-bottom { left:6vw; }
  .intro-grid { gap:3vw; grid-template-columns:minmax(0,1fr); }
  .intro-copy h1 { font-size:clamp(56px,7.2vw,90px); }
  .intro-note { font-size:16px; }
  .signal-card { width:90%; right:2%; } .intro-visual { min-height:320px; }
  .floating-label { font-size:8px; padding:8px; }
  .about-grid,.experience-layout,.tool-layout { gap:4vw; grid-template-columns:.85fr 1.15fr; }
  h2,.experience-intro h2,.contact h2 { font-size:42px; }
  .project { gap:30px; } .workflow { padding:22px; }
  .film-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tool-list { grid-template-columns:1fr; }
  .contact-grid { gap:4vw; }
}
@media (max-width:800px) {
  .mobile-progress { display:block; position:fixed; z-index:31; top:62px; left:0; right:0; height:3px; background:var(--line); }
  .mobile-progress>span { display:block; height:100%; width:100%; transform-origin:left; background:var(--blue); transform:scaleX(0); transition:transform .3s; }
  .site-header { padding:10px 16px; } .identity-detail { display:none; } .header-actions { gap:8px; }
  .chapter { padding:120px 6vw 88px; min-height:auto; }
  .chapter-id { left:6vw; top:84px; }
  .chapter::after { left:6vw; right:6vw; bottom:24px; }
  .intro { min-height:100svh; padding-top:125px; }
  .intro-grid { grid-template-columns:1fr; gap:24px; }
  .intro-copy h1 { font-size:clamp(52px,9vw,76px); }
  .intro-copy .eyebrow { font-size:9px; }
  .intro-note { font-size:14px; } .intro-visual { min-height:300px; }
  .signal-card { width:90%; right:0; }
  .signal-screen::after { font-size:130px; }
  .floating-label { font-size:8px; padding:8px; }
  .floating-label.one { left:-5%; bottom:13%; } .floating-label.two { right:-2%; bottom:2%; }
  .scroll-hint { right:6vw; bottom:35px; }
  .about-grid,.experience-layout,.tool-layout,.contact-grid { grid-template-columns:1fr; gap:38px; }
  h2,.experience-intro h2,.contact h2 { font-size:clamp(36px,7.5vw,54px); }
  .about-intro h2 br,.experience-intro h2 br,.tool-copy h2 br { display:none; }
  .about-intro { max-width:580px; } .principle-detail { min-height:0; max-width:580px; }
  .experience-intro { position:static; }
  .experience-intro p { max-width:580px; }
  .section-heading { align-items:start; flex-direction:column; gap:18px; }
  .section-heading h2 { max-width:none; } .section-intro { max-width:580px; }
  .project { grid-template-columns:1fr 1fr; gap:30px; }
  .workflow { min-height:290px; padding:24px; }
  .language-pair { font-size:42px; } .workflow-path { justify-content:flex-start; }
  .film-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tool-board { max-width:600px; width:100%; }
  .tool-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .contact-copy { max-width:600px; } .contact-stamp { width:80%; max-width:480px; margin:0 auto; }
  .contact-bottom { left:6vw; right:6vw; bottom:42px; }
  .contact { padding-bottom:135px; }
  .chapter-toggle { position:fixed; bottom:16px; right:16px; z-index:40; display:flex; align-items:center; gap:15px; border:1px solid var(--ink); border-radius:999px; background:var(--ink); color:var(--bg); min-height:46px; padding:11px 16px; font-size:12px; box-shadow:3px 3px 0 var(--orange); }
  .chapter-nav { display:none; top:auto; bottom:77px; right:16px; transform:none; padding:18px; width:min(290px,calc(100vw - 32px)); background:var(--paper); border:1px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
  .chapter-nav.open { display:grid; gap:3px; }
  .chapter-nav>a { font-size:11px; min-height:42px; justify-content:flex-start; }
  .chapter-nav>a::after { margin-left:auto; width:7px; height:7px; }
  .reading-status { font-size:11px; }
  .progress-track { height:4px; }
}
@media (max-width:560px) {
  .identity { gap:8px; font-size:10px; } .identity img { width:29px; height:29px; }
  .header-actions { gap:7px; } .header-actions>a { font-size:9px; padding:8px 10px; } .header-actions .header-work { display:none; }
  .icon-button { min-width:34px; min-height:34px; width:34px; height:34px; }
  .intro-grid { grid-template-columns:1fr; gap:40px; }
  .intro-copy h1 { font-size:clamp(62px,16.5vw,90px); line-height:.98; margin-bottom:25px; }
  .intro-copy h1 .name-line { font-size:.68em; margin-left:0; gap:.18em; margin-top:.18em; }
  .intro-copy .eyebrow { font-size:9px; letter-spacing:.04em; }
  .intro-note { max-width:430px; font-size:14px; }
  .intro-visual { min-height:310px; width:100%; max-width:340px; justify-self:center; margin-bottom:20px; }
  .signal-card { right:10%; width:72%; max-width:250px; }
  .signal-screen::after { font-size:150px; }
  .floating-label.one { left:0; bottom:25%; } .floating-label.two { right:0; bottom:10%; }
  .source-row button { min-height:40px; padding:7px 10px; font-size:12px; }
  .capability h3 { font-size:19px; } .principle-select { grid-template-columns:22px 1fr 15px; gap:9px; }
  .source-row { margin-left:31px; } .source-row>span { font-size:11px; }
  .capability.selected { padding-inline:10px; }
  .project { grid-template-columns:1fr; gap:32px; }
  .project h3 { font-size:27px; } .project+.project { margin-top:64px; }
  .workflow { min-height:270px; } .project-visual { margin-inline:7px; }
  .film-index { grid-template-columns:1fr; gap:22px; }
  .film-entry h3 { font-size:17px; } .film-entry p { font-size:12px; } .media-pending { font-size:11px; }
  .experience-entry>div { padding:24px 0 14px; }
  .period { left:auto; right:0; font-size:11px; }
  .experience-entry h3 { font-size:18px; } .job-title { font-size:12px; } .job-description { font-size:13px; }
  .education { gap:18px; } .education h3 { font-size:17px; }
  .tool-chip { padding:12px 9px; min-width:0; } .tool-chip b { font-size:13px; line-height:1.4; } .tool-chip span { font-size:9px; line-height:1.6; }
  .tool-board { padding:14px; margin-inline:5px; width:calc(100% - 10px); }
  .tool-top { font-size:9px; }
  .contact-link { font-size:11px; gap:10px; } .contact-stamp { width:90%; }
  .contact-stamp small { font-size:8px; } .contact h2 { font-size:clamp(40px,13.5vw,46px); }
  .source-preview { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media print {
  .mobile-progress { display:none; }
  .site-header,.chapter-nav,.chapter-toggle,.source-preview,dialog,.start-btn,.scroll-hint,.intro-visual,.back-top { display:none!important; }
  .chapter { display:block; padding:24px 0; min-height:0; }
  .chapter::after,.chapter-id { display:none; }
  .intro-grid,.about-grid,.experience-layout,.tool-layout,.contact-grid { display:block; }
  .intro h1 { font-size:40px; } h2,.experience-intro h2,.contact h2 { font-size:28px; }
  .capability-stack.interactive .capability>p,.capability-stack.interactive .capability .source-row,.experience-list.interactive .experience-entry .job-description { display:block; }
  .principle-detail,.project-visual,.contact-stamp { display:none; }
  .project { display:block; } .contact-bottom { position:static; margin-top:30px; }
  .tool-board { transform:none; box-shadow:none; } .film-entry { break-inside:avoid; }
}