/* site.css */
:root { color-scheme:light dark; font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; scrollbar-gutter:stable; }
* { box-sizing:border-box; }
body { margin:0; background:light-dark(#f4f3f0,#181818); }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; text-underline-offset:5px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid currentColor; outline-offset:6px; border-radius:2px; }
.skip-link { position:fixed; top:10px; left:15px; z-index:100; padding:12px 16px; background:Canvas; color:CanvasText; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
#yufan-site { --yh-front:light-dark(#f4f3f0,#181818); --yh-back:light-dark(#e7e4dd,#24231f); --yh-fold:light-dark(#d7d5cf,#3e3d39); --yh-edge:light-dark(#aaa8a2,#090909); --yh-ink:light-dark(#191919,#f0efea); --yh-muted:light-dark(#68665f,#b5b3aa); --yh-rule:light-dark(#d3d1ca,#3e3d38); --yh-shadow:light-dark(#3c392e2b,#00000070); color:var(--yh-ink); font-size:1rem; line-height:1.7; }
#yufan-site [hidden] { display:none !important; }
.yh-stage { position:relative; isolation:isolate; background:var(--yh-back); min-height:100svh; }
.yh-sheet { min-width:0; min-height:100svh; padding:24px clamp(24px,6vw,110px) 54px; display:flex; flex-direction:column; }
.yh-front { position:relative; z-index:2; background:var(--yh-front); }
.yh-back { position:absolute; inset:0; z-index:1; overflow:hidden; background:var(--yh-back); }
#yufan-site[data-side="back"] .yh-back { position:relative; overflow:visible; }
#yufan-site[data-side="back"] .yh-front { position:absolute; inset:0; overflow:hidden; }
.yh-header,.yh-main,.yh-footer { width:100%; max-width:1400px; margin-left:auto; margin-right:auto; }
.yh-header { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--yh-rule); padding-bottom:19px; }
.yh-header-right { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:24px 56px; }
.yh-brand,.yh-nav button,.yh-life-home { padding:8px 0; border:0; background:none; text-align:left; }
.yh-brand { font-size:1rem; letter-spacing:-.025em; white-space:nowrap; }
.yh-brand-period { padding-left:2px; }
.yh-nav { position:relative; display:flex; align-items:center; gap:4px; padding:4px; }
.yh-nav::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:var(--nav-width,0px); transform:translateX(var(--nav-x,0px)); border:1px solid light-dark(#ffffffbd,#ffffff2b); border-radius:999px; background:linear-gradient(135deg,light-dark(#ffffff80,#ffffff1c),transparent 65%),light-dark(#ffffff35,#9da9c70b); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); box-shadow:inset 0 1px 0 light-dark(#ffffffe6,#ffffff33),inset 0 -1px 0 #ffffff0d,0 3px 12px #0000000a; opacity:0; transition:transform .48s cubic-bezier(.22,1,.36,1),width .48s cubic-bezier(.22,1,.36,1),opacity .2s; pointer-events:none; }
.yh-nav[data-glass="true"]::before { opacity:1; }
.yh-nav button { position:relative; z-index:1; padding:8px 16px; border-radius:999px; font-size:.875rem; white-space:nowrap; flex-shrink:0; color:var(--yh-muted); transition:color .2s; }
.yh-nav button:hover { color:var(--yh-ink); }
.yh-nav button[aria-pressed="true"] { color:var(--yh-ink); }
.yh-preferences,.yh-languages { display:flex; align-items:center; }
.yh-preferences { gap:23px; }
.yh-languages { gap:7px; font-size:.875rem; }
.yh-languages button { border:0; background:none; padding:8px 2px; color:var(--yh-muted); }
.yh-languages button[aria-pressed="true"] { color:var(--yh-ink); }
.yh-language-divider { color:var(--yh-rule); }
.yh-theme { display:grid; place-items:center; width:34px; height:38px; background:none; border:0; }
.yh-theme-icon { display:flex; }
.yh-icon { display:inline-block; flex:0 0 auto; width:18px; height:18px; vertical-align:middle; }
#yufan-site[data-theme="light"] [data-mode="dark"],#yufan-site[data-theme="dark"] [data-mode="light"] { display:none; }
.yh-main { flex:1; padding:76px 0 100px; outline:none; overflow-wrap:anywhere; }
.yh-main[data-view="home"] { display:flex; flex-direction:column; justify-content:center; padding-top:clamp(48px,8vh,120px); padding-bottom:clamp(70px,9vh,130px); }
.yh-eyebrow { font-size:.75rem; letter-spacing:.13em; color:var(--yh-muted); text-transform:uppercase; margin:0 0 27px; }
.yh-main h1 { font-size:clamp(3.7rem,8vw,8rem); line-height:1.04; letter-spacing:-.065em; font-weight:400; margin:0 0 38px; overflow-wrap:anywhere; }
.yh-main h1.yh-hero-name { font-size:clamp(4.2rem,11.7vw,12.4rem); line-height:1.03; letter-spacing:-.074em; margin:0 0 68px; white-space:nowrap; }
.yh-hero-bottom { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:9%; align-items:start; }
.yh-intro { font-size:clamp(1.45rem,2.25vw,2.25rem); line-height:1.5; letter-spacing:-.025em; font-weight:400; margin:0 0 20px; max-width:23em; }
.yh-desc { color:var(--yh-muted); max-width:50em; margin:0 0 35px; line-height:1.8; }
.yh-hero-bottom .yh-desc { margin:0; max-width:35em; }
.yh-meta { margin:40px 0 0; color:var(--yh-muted); font-size:.75rem; }
.yh-rows { display:grid; }
.yh-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:21px 0; border:0; border-top:1px solid var(--yh-rule); background:none; text-align:left; width:100%; }
.yh-row small { display:block; font-size:.875rem; line-height:1.65; margin-top:5px; color:var(--yh-muted); }
.yh-row em { font-size:.75rem; font-style:normal; color:var(--yh-muted); transition:transform .25s ease; }
button.yh-row:hover em { transform:translateX(5px); }
.yh-life-row { padding:27px 0; }
.yh-life-row > span { font-size:clamp(1.35rem,3vw,2rem); letter-spacing:-.025em; }
.yh-life-row small { margin-top:9px; letter-spacing:normal; }
.yh-back .yh-main { max-width:980px; }
.yh-back .yh-main h1 { margin-bottom:60px; }
.yh-life-home { font-size:.875rem; }
.yh-footer { display:flex; align-items:center; flex-wrap:wrap; gap:14px 25px; padding-top:18px; border-top:1px solid var(--yh-rule); color:var(--yh-muted); font-size:.75rem; }
.yh-footer a { text-decoration:none; overflow-wrap:anywhere; }
.yh-footer a:hover { text-decoration:underline; }
.yh-folio { margin-left:auto; padding-right:50px; letter-spacing:.08em; }
.yh-fold-shadow { position:fixed; inset:0; z-index:30; filter:drop-shadow(-5px -6px 9px var(--yh-shadow)); pointer-events:none; }
.yh-fold-face { position:absolute; inset:0; background:var(--yh-fold); }
.yh-corner { position:fixed; right:0; bottom:0; z-index:32; width:108px; height:108px; background:none; border:0; padding:0; clip-path:polygon(100% 0,100% 100%,0 100%); }
.yh-corner:focus-visible { outline-offset:-7px; }
.yh-corner:disabled { pointer-events:none; }
.yh-corner-hint { position:fixed; right:15px; bottom:14px; z-index:20; opacity:0; font-size:.75rem; color:var(--yh-muted); pointer-events:none; transition:opacity .2s ease; }
#yufan-site[data-peek="true"] .yh-corner-hint { opacity:1; }
#yufan-site[data-side="back"] .yh-corner,#yufan-site[data-side="back"] .yh-fold-shadow,#yufan-site[data-side="back"] .yh-corner-hint { visibility:hidden; }
.yh-section-label { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; margin:48px 0 10px; }
.yh-section-label h3 { font-size:.875rem; font-weight:400; margin:0; }
.yh-section-label span { color:var(--yh-muted); font-size:.75rem; }
.yh-detail { border-top:1px solid var(--yh-rule); }
.yh-detail summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 0; cursor:pointer; list-style:none; }
.yh-detail summary::-webkit-details-marker { display:none; }
.yh-detail summary > span:first-child { min-width:0; }
.yh-detail summary strong { display:block; font-size:1.25rem; line-height:1.5; font-weight:400; letter-spacing:-.02em; }
.yh-detail summary small { display:block; font-size:.875rem; color:var(--yh-muted); margin-top:7px; }
.yh-expand { flex:0 0 auto; display:flex; align-items:center; gap:24px; color:var(--yh-muted); font-size:.875rem; }
.yh-expand .yh-icon { width:17px; height:17px; transition:transform .25s ease; }
.yh-detail[open] > summary .yh-expand .yh-icon { transform:rotate(45deg); }
.yh-project summary { padding:33px 0; align-items:flex-start; }
.yh-project summary strong { font-size:clamp(1.55rem,3vw,2.7rem); letter-spacing:-.04em; }
.yh-project-number { display:block; color:var(--yh-muted); font-size:.75rem; margin-bottom:14px; }
.yh-project-metric { min-width:190px; text-align:right; padding-top:25px; }
.yh-project-metric b { display:block; font-size:clamp(2.4rem,5.5vw,5rem); font-weight:400; line-height:1.15; letter-spacing:-.065em; }
.yh-project-metric small { max-width:14em; margin-left:auto; }
.yh-detail-body { padding:0 0 35px; max-width:860px; }
.yh-detail-body p { margin:0 0 20px; }
.yh-detail-body p:last-child { margin-bottom:0; }
.yh-explanation { margin:25px 0 0; }
.yh-explanation dt { font-weight:400; margin:26px 0 8px; }
.yh-explanation dd { margin:0; color:var(--yh-muted); line-height:1.85; }
.yh-tech { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:28px; color:var(--yh-muted); font-size:.75rem; }
.yh-papers { display:grid; gap:28px; padding-top:5px; }
.yh-paper h4 { font-weight:400; font-size:1rem; line-height:1.65; margin:0 0 9px; }
.yh-paper p { color:var(--yh-muted); margin:0; font-size:.875rem; }
.yh-paper a { display:inline-block; font-size:.875rem; margin-top:10px; overflow-wrap:anywhere; }
.yh-history { display:grid; }
.yh-history-item { display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px 40px; border-top:1px solid var(--yh-rule); padding:27px 0; }
.yh-history-date { color:var(--yh-muted); font-size:.875rem; padding-top:4px; }
.yh-history-item h4 { font-size:1.25rem; line-height:1.6; font-weight:400; letter-spacing:-.02em; margin:0 0 8px; }
.yh-history-item p { color:var(--yh-muted); margin:0; }
.yh-history-item small { display:block; font-size:.875rem; color:var(--yh-muted); margin-top:7px; }
.yh-note { color:var(--yh-muted); font-size:.75rem; margin-top:24px; }
.yh-contact { font-size:clamp(1.25rem,2.1vw,2rem); max-width:28em; line-height:1.6; margin:60px 0 0; }
.yh-contact-links { display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:18px; font-size:.95rem; }
.yh-contact-links a { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--yh-ink); text-decoration:underline; text-underline-offset:5px; overflow-wrap:anywhere; }
.yh-contact-links a:hover { color:var(--yh-muted); }
.yh-focus-button { border:0; border-top:1px solid var(--yh-rule); width:100%; background:none; text-align:left; display:flex; justify-content:space-between; align-items:center; padding:26px 0; gap:20px; font-size:1.25rem; }
.yh-focus-dialog { width:min(700px,calc(100% - 36px)); max-height:calc(100svh - 48px); color:var(--yh-ink); background:color-mix(in srgb,var(--yh-front) 90%,transparent); border:1px solid var(--yh-rule); border-radius:18px; padding:30px 35px 38px; box-shadow:0 20px 90px var(--yh-shadow); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.yh-focus-dialog::backdrop { background:light-dark(#29282012,#00000030); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.yh-focus-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.yh-focus-header h2 { font-size:1.5rem; font-weight:400; letter-spacing:-.035em; margin:0; }
.yh-focus-close { width:42px; height:42px; border:0; border-radius:50%; background:none; display:grid; place-items:center; }
.yh-focus-close:hover { background:color-mix(in srgb,var(--yh-ink) 7%,transparent); }
.yh-focus-dialog .yh-explanation { margin-top:22px; font-size:1rem; }
@media(max-width:800px) {
  .yh-header-right { gap:20px; } .yh-nav { gap:2px; } .yh-preferences { gap:14px; }
  .yh-hero-bottom { grid-template-columns:1fr; gap:34px; }
  .yh-main h1.yh-hero-name { margin-bottom:42px; font-size:clamp(3.7rem,12.1vw,6rem); }
  .yh-hero-bottom .yh-desc { max-width:39em; } .yh-meta { margin-top:25px; }
  .yh-main { padding:52px 0 70px; } .yh-project-metric { min-width:130px; }
  .yh-history-item { grid-template-columns:150px minmax(0,1fr); gap:16px 24px; }
}
@media(max-width:580px) {
  .yh-sheet { padding:17px 22px 60px; } .yh-header { flex-wrap:wrap; gap:8px 20px; padding-bottom:15px; }
  .yh-header-right { width:100%; justify-content:space-between; gap:8px 16px; } .yh-back .yh-header-right { flex-wrap:wrap; }
  .yh-brand { font-size:.95rem; } .yh-nav { gap:2px; margin-left:-8px; } .yh-nav button { padding-inline:8px; } .yh-main[data-view="home"] { padding-top:52px; }
  .yh-front .yh-header { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .yh-front .yh-header-right { display:contents; }
  .yh-front .yh-header .yh-preferences { grid-column:2; grid-row:1; }
  .yh-front .yh-nav { grid-column:1 / -1; grid-row:2; width:max-content; max-width:calc(100% + 16px); overflow-x:auto; scrollbar-width:none; }
  .yh-main h1.yh-hero-name { font-size:clamp(2.9rem,11.55vw,4.2rem); letter-spacing:-.068em; margin-bottom:39px; white-space:normal; }
  .yh-main h1 { font-size:clamp(3.6rem,13vw,5rem); margin-bottom:30px; } .yh-eyebrow { margin-bottom:22px; }
  .yh-intro { font-size:1.5rem; } .yh-project summary { flex-wrap:wrap; gap:14px; }
  .yh-project-metric { text-align:left; padding-top:0; } .yh-project-metric small { max-width:none; }
  .yh-history-item { grid-template-columns:1fr; gap:7px; } .yh-detail summary { gap:15px; }
  .yh-detail summary strong { font-size:1.125rem; } .yh-project summary strong { font-size:1.55rem; }
  .yh-section-label { margin-top:35px; } .yh-folio { margin-left:0; } .yh-footer { gap:10px 22px; }
  .yh-focus-dialog { padding:22px 24px 28px; }
}
@media(pointer:coarse) {
  .yh-brand,.yh-nav button,.yh-life-home { min-height:44px; }
  .yh-languages button { min-width:36px; min-height:44px; } .yh-theme { min-width:44px; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media print {
  .yh-corner,.yh-fold-shadow,.yh-corner-hint,.yh-preferences,.yh-back,.skip-link { display:none !important; }
  .yh-front { clip-path:none !important; position:relative !important; } .yh-sheet { padding:20px; } .yh-main { padding:35px 0; }
}

/* effects.css */
.yh-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#yufan-site { --yh-accent:light-dark(#4166d9,#91a9ff); --yh-land:light-dark(#dededb,#353638); --yh-coast:light-dark(#aaaba9,#727472); --yh-grid:light-dark(#bdbfba,#484b48); }
.yh-main[data-view="home"] { display:block; padding-top:0; padding-bottom:80px; }
.yh-immersive-hero { position:relative; min-height:680px; height:calc(100svh - 105px); max-height:1100px; margin:0 calc(-1 * clamp(24px,6vw,110px)); overflow:hidden; isolation:isolate; }
.yh-particles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.yh-main h1.yh-particle-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:29vw; letter-spacing:-.085em; font-weight:700; color:var(--yh-rule); margin:0; }
.yh-immersive-hero[data-canvas="ready"] .yh-particle-fallback { opacity:0; }
.yh-hero-identity { position:absolute; top:28px; left:clamp(24px,6vw,110px); color:var(--yh-muted); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.yh-hero-keywords { position:absolute; inset:0; pointer-events:none; font-size:clamp(3.8rem,8.4vw,9rem); font-weight:400; letter-spacing:-.065em; line-height:1; }
.yh-hero-keywords > span { position:absolute; will-change:transform; }
.yh-hero-keywords > span:nth-child(1) { left:7%; top:15%; }
.yh-hero-keywords > span:nth-child(2) { right:10%; top:43%; color:var(--yh-accent); }
.yh-hero-keywords > span:nth-child(3) { left:22%; bottom:15%; }
.yh-hero-keyword { position:relative; z-index:1; display:block; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; pointer-events:auto; }
.yh-hero-keyword::before { content:""; position:absolute; z-index:-1; inset:-.08em -.12em -.1em; border:1px solid light-dark(#ffffffaa,#ffffff26); border-radius:.24em; background:linear-gradient(135deg,light-dark(#ffffff59,#ffffff16),transparent 58%),light-dark(#f4f6f51f,#b9c4dc09); box-shadow:inset 0 1px 0 light-dark(#ffffffe6,#ffffff3b),inset 0 -1px 0 light-dark(#ffffff70,#ffffff0d),0 10px 35px #0000000a; backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); opacity:0; transform:scale(.96); transition:opacity .24s,transform .45s cubic-bezier(.22,1,.36,1); }
.yh-hero-keyword:hover::before,.yh-hero-keyword:focus-visible::before { opacity:1; transform:scale(1); }
.yh-hero-baseline { position:absolute; bottom:23px; left:clamp(24px,6vw,110px); right:clamp(24px,6vw,110px); display:flex; justify-content:space-between; align-items:center; gap:20px; color:var(--yh-muted); font-size:.7rem; letter-spacing:.07em; }
.yh-scroll-cue { display:flex; gap:16px; align-items:center; border:0; background:none; padding:10px 0 10px 15px; font-size:.7rem; color:var(--yh-accent); white-space:nowrap; }
.yh-scroll-cue b { font-size:1.2rem; font-weight:400; transition:transform .25s; }
.yh-scroll-cue:hover b { transform:translateY(4px); }
.yh-world-section { position:relative; padding:64px 0 30px; border-top:1px solid var(--yh-rule); overflow-anchor:none; }
.yh-world-heading { position:relative; z-index:2; pointer-events:none; margin-bottom:clamp(56px,6vw,96px); }
.yh-world-heading h2 { font-size:clamp(2.25rem,4vw,3.8rem); font-weight:400; letter-spacing:-.055em; line-height:1.15; margin:0; }
.yh-world-heading .yh-eyebrow { margin-bottom:23px; }
.yh-globe-layout { position:relative; display:grid; grid-template-columns:minmax(280px,min(34%,400px)) minmax(0,1fr); grid-template-rows:minmax(clamp(620px,54vw,760px),auto) auto; column-gap:clamp(32px,5vw,88px); row-gap:32px; align-items:center; }
.yh-world-overview { position:relative; z-index:5; grid-column:1; grid-row:1; min-width:0; align-self:center; visibility:hidden; pointer-events:none; transform:translate3d(-24px,12px,0); transition:transform .8s cubic-bezier(.22,1,.36,1),visibility 0s .3s; }
.yh-globe-layout[data-preview="true"] .yh-world-overview { visibility:visible; pointer-events:auto; transform:none; transition:transform .8s cubic-bezier(.22,1,.36,1),visibility 0s; }
/* Move the whole canvas on the compositor; the inner frame still owns city zoom. */
.yh-globe-position { position:relative; grid-column:2; grid-row:1; justify-self:end; width:100%; max-width:760px; min-width:0; transform:translate3d(var(--world-center-shift,0px),0,0); transition:transform .95s cubic-bezier(.22,1,.36,1); }
.yh-globe-layout[data-preview="true"] .yh-globe-position { transform:translate3d(0,0,0); }
.yh-globe-frame { position:relative; width:100%; aspect-ratio:1; isolation:isolate; }
.yh-globe-canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; outline:none; }
.yh-globe-canvas:active { cursor:grabbing; }
.yh-globe-canvas:focus-visible { outline:1px dashed var(--yh-muted); outline-offset:-24px; border-radius:50%; }
.yh-globe-fallback { position:absolute; left:20%; right:20%; top:40%; text-align:center; color:var(--yh-muted); font-size:.875rem; }
.yh-globe-labels { position:absolute; inset:0; pointer-events:none; }
.yh-globe-return { position:absolute; z-index:6; top:3%; right:4%; display:flex; align-items:center; gap:10px; padding:10px 15px; border:1px solid var(--yh-rule); border-radius:30px; font-size:.7rem; color:var(--yh-ink); background:color-mix(in srgb,var(--yh-front) 58%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.yh-globe-return span { color:var(--yh-accent); font-size:1rem; }
.yh-globe-return:hover { border-color:var(--yh-muted); }
.yh-globe-return[hidden],.yh-city-caption[hidden],.yh-map-credit[hidden] { display:none; }
.yh-city-caption { position:absolute; top:14%; left:53%; right:4%; pointer-events:none; }
.yh-city-caption p { margin:0 0 9px; font-size:.6rem; letter-spacing:.14em; color:var(--yh-muted); }
.yh-city-caption h3 { margin:0; font-size:clamp(1.4rem,3vw,2.5rem); font-weight:400; line-height:1.15; letter-spacing:-.04em; }
.yh-map-credit { position:absolute; z-index:4; top:calc(var(--yh-globe-size) * .90); right:5%; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 12px; max-width:43%; font-size:.52rem; line-height:1.5; color:var(--yh-muted); }
.yh-map-credit a { color:inherit; text-decoration:none; }
.yh-map-credit a:hover { color:var(--yh-ink); text-decoration:underline; }
.yh-globe-frame[data-city-view="true"] .yh-globe-canvas { cursor:default; }
.yh-map-city { position:absolute; border:0; background:transparent; padding:6px 9px; font-size:.7rem; line-height:1.2; white-space:nowrap; pointer-events:auto; border-radius:5px; transition:color .2s,background .2s; }
.yh-map-city:hover,.yh-map-city:focus-visible,.yh-map-city[aria-pressed="true"] { color:var(--yh-accent); background:color-mix(in srgb,var(--yh-front) 70%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.yh-institution-card { position:relative; z-index:5; width:100%; max-width:none; padding:25px 28px 22px; }
.yh-glass-panel { border:1px solid light-dark(#ffffffb3,#ffffff24); border-radius:18px; background:linear-gradient(140deg,light-dark(#ffffff45,#ffffff0d),light-dark(#ffffff0a,#17191712)),light-dark(#fafcfb26,#1419142b); backdrop-filter:blur(14px) saturate(1.25); -webkit-backdrop-filter:blur(14px) saturate(1.25); box-shadow:0 8px 28px light-dark(#25312218,#00000038),inset 0 1px 0 light-dark(#ffffffbd,#ffffff21),inset 0 -1px 0 light-dark(#ffffff4d,#ffffff0d); }
.yh-institution-card .yh-card-top { display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:.65rem; color:var(--yh-muted); letter-spacing:.1em; margin-bottom:22px; text-transform:uppercase; }
.yh-card-close { border:0; background:transparent; padding:3px 5px; font-size:1.1rem; line-height:1; color:var(--yh-muted); }
.yh-institution-card h3 { margin:0 0 10px; font-size:1.4rem; font-weight:400; letter-spacing:-.035em; line-height:1.4; }
.yh-institution-card p { margin:0; font-size:.875rem; color:color-mix(in srgb,var(--yh-ink) 80%,var(--yh-muted)); line-height:1.65; }
.yh-institution-card small { display:block; font-size:.7rem; color:var(--yh-muted); margin-top:21px; padding-top:13px; border-top:1px solid var(--yh-rule); }
.yh-location-actions { display:flex; justify-content:flex-end; margin-top:18px; }
.yh-location-detail { display:inline-flex; align-items:center; gap:16px; padding:8px 0 7px 12px; border:0; border-bottom:1px solid var(--yh-rule); background:none; color:var(--yh-ink); font-size:.8rem; cursor:pointer; }
.yh-location-detail span { color:var(--yh-accent); transition:transform .25s; }
.yh-location-detail:hover span { transform:translate(2px,-2px); }
.yh-location-detail:focus-visible { outline:1px solid var(--yh-accent); outline-offset:4px; }
.yh-world-coordinates { display:flex; flex-wrap:wrap; gap:0 18px; margin-top:22px; font: .61rem/1.9 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--yh-muted); }
.yh-world-coordinates span { display:block; }
.yh-world-controls { grid-column:1/-1; grid-row:2; display:flex; justify-content:space-between; align-items:center; gap:18px 35px; margin-top:var(--city-extra-space,0px); flex-wrap:wrap; }
.yh-world-help { color:var(--yh-muted); font-size:.7rem; margin:0; }
.yh-city-list { display:flex; flex-wrap:wrap; gap:10px 25px; }
.yh-city-list button { border:0; border-bottom:1px solid var(--yh-rule); padding:8px 0; background:none; color:var(--yh-muted); font-size:.8rem; }
.yh-city-list button[aria-pressed="true"] { color:var(--yh-ink); border-color:var(--yh-ink); }
.yh-home-index { padding:100px 0 0; }
.yh-home-index .yh-intro { max-width:20em; }
@media(min-width:1700px) { .yh-immersive-hero { margin:0; } }
@media(max-width:1000px) {
  .yh-globe-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; row-gap:24px; }
  .yh-world-overview { display:none; grid-column:1; grid-row:2; width:min(100%,440px); justify-self:center; }
  .yh-globe-layout[data-preview="true"] .yh-world-overview { display:block; }
  .yh-world-heading { max-width:640px; width:100%; margin-inline:auto; margin-bottom:48px; }
  .yh-world-heading h2 { font-size:clamp(2rem,4.5vw,3rem); }
  .yh-globe-position { grid-column:1; grid-row:1; justify-self:center; width:100%; max-width:640px; transform:none; }
  .yh-institution-card { width:100%; }
  .yh-world-coordinates { justify-content:center; margin-top:18px; }
  .yh-world-controls { grid-row:3; margin-top:0; }
}
@media(max-width:800px) {
  .yh-immersive-hero { min-height:590px; height:calc(100svh - 105px); }
  .yh-hero-keywords { font-size:12vw; } .yh-hero-keywords span:nth-child(3) { left:12%; }
  .yh-world-section { padding-top:48px; }
  .yh-home-index { padding-top:75px; }
}
@media(max-width:580px) {
  .yh-main[data-view="home"] { padding-top:0; }
  .yh-immersive-hero { margin:0 -22px; min-height:530px; height:calc(100svh - 130px); max-height:760px; }
  .yh-hero-identity { left:22px; top:24px; font-size:.6rem; }
  .yh-hero-keywords { font-size:14vw; } .yh-hero-keywords span:nth-child(1) { top:20%; } .yh-hero-keywords span:nth-child(2) { top:46%; right:7%; } .yh-hero-keywords span:nth-child(3) { bottom:18%; left:13%; }
  .yh-hero-baseline { left:22px; right:22px; font-size:.58rem; gap:12px; } .yh-hero-baseline > span { max-width:230px; }
  .yh-scroll-cue { font-size:.6rem; gap:8px; }
  .yh-world-section { padding-top:40px; } .yh-world-heading { margin-bottom:36px; } .yh-world-heading h2 { font-size:2rem; }
  .yh-globe-frame { width:100%; aspect-ratio:1; }
  .yh-globe-canvas { aspect-ratio:1; height:auto; }
  .yh-globe-labels { bottom:auto; aspect-ratio:1; }
  .yh-globe-return { top:6px; right:12px; min-height:40px; }
  .yh-city-caption { top:calc(var(--yh-globe-size) * .14); left:12%; right:12%; }
  .yh-city-caption p { font-size:.5rem; margin-bottom:5px; }
  .yh-city-caption h3 { font-size:1.6rem; }
  .yh-map-credit { top:calc(var(--yh-globe-size) * .88); right:12%; max-width:80%; font-size:.5rem; }
  .yh-map-city { font-size:.65rem; padding:8px; }
  .yh-institution-card { width:100%; min-height:156px; padding:18px 20px; }
  .yh-institution-card .yh-card-top { margin-bottom:9px; }
  .yh-institution-card h3 { font-size:1.2rem; margin-bottom:5px; }
  .yh-institution-card small { margin-top:10px; padding-top:9px; }
  .yh-city-list { gap:8px 20px; } .yh-world-controls { gap:12px; } .yh-world-coordinates { font-size:.6rem; }
  .yh-home-index { padding-top:55px; }
}
@media(pointer:coarse) { .yh-city-list button,.yh-location-detail { min-height:44px; } .yh-map-city { min-height:36px; } .yh-card-close { min-width:32px; min-height:32px; } }
@media(prefers-reduced-motion:reduce) { .yh-hero-keywords span { will-change:auto; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .yh-institution-card { background:var(--yh-front); } }
/* A central city, one primary album and two compact companion albums. */
.yh-institution-card[data-dismissed="true"] { opacity:0; pointer-events:none; visibility:hidden; }
.yh-globe-frame[data-city-view="true"] .yh-city-caption { top:2%; left:22%; right:22%; text-align:center; }
.yh-globe-frame[data-city-view="true"] .yh-globe-return { top:0; left:0; right:auto; }
.yh-globe-frame[data-city-view="true"] .yh-map-credit { top:calc(var(--yh-globe-size) * .85); left:22%; right:22%; max-width:none; justify-content:center; text-align:center; font-size:11px; }
.yh-city-details { position:absolute; inset:0 0 auto; z-index:5; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr); gap:20px clamp(24px,3vw,48px); min-height:var(--yh-stage-size,720px); padding:18px 0; align-content:center; align-items:start; pointer-events:none; }
.yh-city-details[hidden] { display:none; }
.yh-city-detail-card { grid-column:3; width:100%; max-width:320px; min-width:0; padding:17px 20px 20px; justify-self:end; pointer-events:auto; }
.yh-city-detail-card[data-city-card="0"] { grid-column:1; grid-row:1 / span 2; align-self:center; justify-self:start; max-width:380px; padding:23px 25px 25px; }
.yh-city-detail-card[data-city-card="1"] { grid-row:1; }
.yh-city-detail-card[data-city-card="2"] { grid-row:2; }
.yh-city-details[inert] .yh-city-detail-card { pointer-events:none; }
.yh-city-detail-card .yh-card-top { display:flex; align-items:center; gap:15px; font-size:.59rem; line-height:1.5; color:var(--yh-muted); letter-spacing:.07em; margin-bottom:5px; text-transform:uppercase; }
.yh-city-detail-card h3 { margin:0 0 7px; font-size:1.12rem; font-weight:400; letter-spacing:-.03em; line-height:1.3; overflow-wrap:anywhere; }
.yh-city-detail-card p { margin:0; font-size:.78rem; color:color-mix(in srgb,var(--yh-ink) 80%,var(--yh-muted)); line-height:1.6; }
.yh-city-detail-card[data-city-card="0"] h3 { font-size:1.4rem; }
.yh-city-detail-card[data-city-card="0"] p { font-size:.85rem; }
.yh-city-detail-card [data-photo-link] { display:inline-flex; gap:12px; align-items:center; font-size:.78rem; color:var(--yh-accent); margin-top:10px; text-decoration:none; border-bottom:1px solid var(--yh-rule); }
.yh-city-detail-card [data-photo-link][hidden] { display:none; }
.yh-city-details .yh-city-detail-card:not([data-city-card="0"]) .yh-card-media { margin-bottom:9px; }
.yh-city-details .yh-city-detail-card:not([data-city-card="0"]) .yh-coverflow-viewport { aspect-ratio:2.3; }
.yh-city-details .yh-city-detail-card:not([data-city-card="0"]) .yh-coverflow-controls button { width:30px; height:30px; }
.yh-city-details .yh-city-detail-card:not([data-city-card="0"]) .yh-coverflow-placeholder strong { font-size:.95rem; }
@media(min-width:1001px) {
  .yh-globe-layout[data-details="true"] .yh-world-overview { visibility:hidden; pointer-events:none; }
}
@media(max-width:1000px) {
  .yh-globe-layout[data-details="true"] .yh-world-overview { display:none; }
  .yh-city-details { position:relative; grid-column:1; grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; min-height:0; padding:0; }
  .yh-city-details .yh-city-detail-card { grid-column:auto; grid-row:auto; align-self:start; justify-self:stretch; width:100%; max-width:none; padding:17px; }
  .yh-city-detail-card[data-city-card="0"] h3 { font-size:1.12rem; }
  .yh-city-detail-card[data-city-card="0"] p { font-size:.78rem; }
  .yh-city-details .yh-city-detail-card .yh-coverflow-viewport { aspect-ratio:2.3; }
}
@media(max-width:800px) {
  .yh-city-details { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yh-city-details .yh-city-detail-card:last-child:nth-child(odd) { grid-column:1/-1; max-width:360px; justify-self:center; }
}
@media(max-width:580px) {
  .yh-globe-frame[data-city-view="true"] .yh-city-caption { top:calc(var(--yh-globe-size) * .14); left:15%; right:15%; }
  .yh-globe-frame[data-city-view="true"] .yh-map-credit { top:calc(var(--yh-globe-size) * .91); left:10%; right:10%; font-size:9px; }
  .yh-globe-frame[data-city-view="true"] .yh-globe-return { font-size:.65rem; min-height:36px; padding:7px 12px; }
  .yh-city-details { grid-template-columns:minmax(0,1fr); gap:18px; }
  .yh-city-details .yh-city-detail-card { padding:20px 24px; }
  .yh-city-details .yh-city-detail-card:last-child:nth-child(odd) { max-width:none; }
  .yh-city-details .yh-city-detail-card .yh-coverflow-controls button { width:40px; height:40px; }
}
@media(prefers-reduced-motion:reduce) { .yh-world-overview,.yh-globe-position { transition:none!important; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .yh-glass-panel { background:var(--yh-front); } }
/* A focused keyword scene: real links orbit a readable, centered heading. */
html.yh-topic-open { overflow:hidden; }
.yh-topic-dialog { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:transparent; color:var(--yh-ink); }
.yh-topic-dialog::backdrop { background:light-dark(#f4f3f064,#13161970); backdrop-filter:blur(24px) saturate(.85); -webkit-backdrop-filter:blur(24px) saturate(.85); opacity:1; transition:opacity .42s; }
.yh-topic-dialog[data-closing="true"]::backdrop { opacity:0; }
@starting-style { .yh-topic-dialog[open]::backdrop { opacity:0; } }
.yh-topic-top { position:absolute; z-index:2; top:28px; left:clamp(24px,6vw,110px); right:clamp(24px,6vw,110px); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.yh-topic-top p { margin:0; color:var(--yh-muted); font-size:.7rem; letter-spacing:.12em; }
.yh-topic-close { width:44px; height:44px; border:1px solid light-dark(#ffffffad,#ffffff30); border-radius:50%; background:light-dark(#ffffff3d,#ffffff0a); box-shadow:inset 0 1px 0 #ffffff30; font-size:1.5rem; line-height:1; }
.yh-topic-title { position:absolute; top:50%; left:50%; margin:0; transform:translate(-50%,-50%); font-size:clamp(3.2rem,8.4vw,9rem); font-weight:400; line-height:1; letter-spacing:-.065em; white-space:nowrap; pointer-events:none; }
.yh-topic-dialog[data-topic="build"] .yh-topic-title { color:var(--yh-accent); }
.yh-topic-cloud { position:absolute; inset:80px 0; pointer-events:none; }
.yh-topic-node { position:absolute; left:var(--topic-x); top:var(--topic-y); transform:translate(-50%,-50%); pointer-events:auto; }
.yh-topic-node:nth-child(1) { --topic-x:26%; --topic-y:14%; }
.yh-topic-node:nth-child(2) { --topic-x:72%; --topic-y:13%; }
.yh-topic-node:nth-child(3) { --topic-x:84%; --topic-y:49%; }
.yh-topic-node:nth-child(4) { --topic-x:73%; --topic-y:85%; }
.yh-topic-node:nth-child(5) { --topic-x:28%; --topic-y:84%; }
.yh-topic-node:nth-child(6) { --topic-x:15%; --topic-y:49%; }
.yh-topic-node > :is(a,button) { display:flex; align-items:center; gap:12px; padding:10px 16px; min-height:44px; border:1px solid transparent; border-radius:40px; background:none; text-decoration:none; color:var(--yh-ink); font-size:clamp(1rem,1.7vw,1.65rem); font-weight:400; letter-spacing:-.02em; white-space:nowrap; animation:yh-topic-drift calc(6s + var(--topic-i) * .7s) ease-in-out calc(var(--topic-i) * -.8s) infinite alternate; transition:background .25s,border-color .25s,box-shadow .25s; }
.yh-topic-node > :is(a,button) span { color:var(--yh-accent); font-size:.7em; }
.yh-topic-node > :is(a,button):is(:hover,:focus-visible) { background:light-dark(#ffffff66,#ffffff0d); border-color:light-dark(#ffffffcb,#ffffff29); box-shadow:inset 0 1px 0 #ffffff2b,0 5px 20px #0000000a; animation-play-state:paused; }
.yh-topic-dialog[data-paused="true"] .yh-topic-node > * { animation-play-state:paused; }
@keyframes yh-topic-drift { from { transform:translate3d(-3px,-8px,0); } to { transform:translate3d(4px,8px,0); } }
.yh-topic-bottom { position:absolute; bottom:30px; left:24px; right:24px; display:flex; justify-content:center; }
.yh-topic-index { padding:10px 20px; border:1px solid light-dark(#ffffffaa,#ffffff24); border-radius:40px; background:light-dark(#ffffff40,#ffffff0a); font-size:.8rem; }
.yh-topic-dialog[data-closing="true"] :is(.yh-topic-cloud,.yh-topic-top,.yh-topic-bottom) { opacity:0; transition:opacity .2s; pointer-events:none; }
@media(max-width:800px) {
  .yh-topic-node:nth-child(1) { --topic-x:25%; --topic-y:12%; }
  .yh-topic-node:nth-child(2) { --topic-x:74%; --topic-y:15%; }
  .yh-topic-node:nth-child(3) { --topic-x:53%; --topic-y:30%; }
  .yh-topic-node:nth-child(4) { --topic-x:25%; --topic-y:72%; }
  .yh-topic-node:nth-child(5) { --topic-x:74%; --topic-y:76%; }
  .yh-topic-node:nth-child(6) { --topic-x:48%; --topic-y:91%; }
  .yh-topic-node > :is(a,button) { gap:6px; padding:9px 10px; font-size:clamp(.875rem,2.8vw,1.2rem); }
  .yh-topic-top { top:18px; }
  .yh-topic-cloud { inset:90px 0; }
  .yh-topic-bottom { bottom:20px; }
}
@media(prefers-reduced-motion:reduce) { .yh-topic-node > :is(a,button) { animation:none; } }
@media(prefers-reduced-transparency:reduce) { .yh-topic-dialog::backdrop { background:light-dark(#f4f3f0,#181818); } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .yh-topic-dialog::backdrop { background:light-dark(#f4f3f0,#181818); } }
@media print { .yh-immersive-hero { min-height:0; height:130px; } .yh-hero-keywords,.yh-particles,.yh-scroll-cue,.yh-welcome,.yh-globe-labels,.yh-world-help { display:none; } .yh-main h1.yh-particle-fallback { opacity:1!important; position:static; font-size:70px; color:var(--yh-ink); } .yh-world-section { padding-top:30px; } .yh-globe-layout { margin-top:0; } .yh-globe-frame { width:60%; } }

/* travel.css */
.yh-back .yh-main[data-view="travel"] { max-width:1400px; padding-top:70px; }
.yh-travel-intro { max-width:980px; margin:0 auto; }
.yh-back .yh-travel-intro h1 { margin:24px 0 30px; font-size:clamp(4.5rem,9vw,8rem); }
.yh-travel-intro .yh-desc { margin:0; }
.yh-travel-world { padding-top:64px; }
.yh-travel-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid var(--yh-rule); }
.yh-travel-heading h2 { margin:0; font-size:1rem; font-weight:400; }
.yh-travel-heading > span { color:var(--yh-muted); font-size:.65rem; letter-spacing:.08em; }
.yh-travel-world .yh-world-controls { align-items:flex-start; }
.yh-travel-world .yh-world-help { flex-basis:100%; }
.yh-travel-world .yh-city-list { gap:8px 27px; }
.yh-travel-world .yh-globe-labels { z-index:2; }
.yh-travel-world .yh-map-city { background:color-mix(in srgb,var(--yh-front) 76%,transparent); cursor:grab; touch-action:none; user-select:none; }
.yh-travel-world .yh-globe-labels[data-dragging="true"] .yh-map-city { cursor:grabbing; }
.yh-travel-world .yh-city-detail-card:only-child { grid-row:1; }
.yh-travel-footnote { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px 24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--yh-rule); font-size:.75rem; color:var(--yh-muted); }
.yh-travel-footnote p { margin:0; }
.yh-travel-footnote a { color:inherit; text-decoration:none; }
.yh-travel-footnote a:hover { color:var(--yh-ink); }
.yh-travel-footnote a span { padding-left:10px; }
@media(max-width:1000px) {
  .yh-travel-world .yh-globe-layout { margin-top:16px; }
  .yh-travel-world .yh-city-detail-card:only-child { grid-column:1/-1; max-width:440px; justify-self:center; }
}
@media(max-width:580px) {
  .yh-back .yh-main[data-view="travel"] { padding-top:40px; }
  .yh-back .yh-travel-intro h1 { margin:18px 0 24px; }
  .yh-travel-world { padding-top:36px; }
  .yh-travel-world .yh-city-list { gap:6px 22px; }
  .yh-travel-world .yh-map-city { min-height:32px; font-size:.6rem; padding:6px 4px; }
  .yh-travel-footnote { margin-top:32px; }
}

/* media.css */
/* Shared media surfaces and compact project architecture overviews. */
.yh-project-visual { display:flex; flex-direction:column; gap:18px; width:100%; min-width:0; min-height:270px; padding:24px; border:1px solid light-dark(#cedbd7,#485850); border-radius:3px; background:light-dark(#e8eeeb,#26312d); color:light-dark(#344b41,#d2e0d7); }
.yh-project-visual[data-tone="1"] { background:light-dark(#e9ecf2,#2a303b); border-color:light-dark(#d4dbe7,#46546b); color:light-dark(#3f4b65,#d8dfed); }
.yh-project-visual[data-tone="2"] { background:light-dark(#efeee5,#34342c); border-color:light-dark(#dfdece,#555748); color:light-dark(#505239,#e0e2cb); }
.yh-project-visual .yh-visual-tag { display:block; font-size:.75rem; line-height:1.4; letter-spacing:.06em; overflow-wrap:anywhere; }
.yh-project-visual .yh-visual-title { display:block; font-size:1.125rem; line-height:1.45; letter-spacing:-.015em; }
.yh-project-visual .yh-visual-items { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr)); gap:14px; margin-top:auto; }
.yh-project-visual .yh-visual-item { display:block; min-width:0; border-top:1px solid light-dark(#bbcbc3,#4e6158); padding-top:9px; }
.yh-project-visual[data-tone="1"] .yh-visual-item { border-color:light-dark(#c1cbdd,#53617a); }
.yh-project-visual[data-tone="2"] .yh-visual-item { border-color:light-dark(#cecfb9,#636650); }
.yh-project-visual .yh-visual-item b { display:block; color:inherit; font-size:1rem; line-height:1.35; font-weight:500; overflow-wrap:anywhere; }
.yh-project-visual .yh-visual-item small { display:block; color:inherit; margin:4px 0 0; font-size:.875rem; line-height:1.4; overflow-wrap:anywhere; }
.yh-case-media-wide .yh-project-visual { min-height:0; padding:32px; gap:24px; }
.yh-case-media-wide .yh-visual-title { font-size:clamp(1.4rem,3vw,2.3rem); }
.yh-case-media-wide .yh-visual-items { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.yh-project-metric .yh-metric-word { font-size:clamp(1.75rem,3vw,3.25rem); letter-spacing:-.04em; }
.yh-case-primary .yh-metric-word { overflow-wrap:anywhere; }
.yh-project-repo { display:inline-block; margin-top:20px; font-size:1rem; text-underline-offset:5px; }
.yh-case-related { margin:48px 0; padding:24px 0; border-top:1px solid var(--yh-rule); }
.yh-case-related > p { margin:0 0 14px; color:var(--yh-muted); }
.yh-case-related ul { display:flex; flex-wrap:wrap; gap:12px 28px; padding:0; margin:0; list-style:none; }
.yh-case-related a { font-size:1rem; text-underline-offset:5px; }
.yh-project-visual.yh-project-illustrated { display:block; padding:0; min-height:0; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--yh-rule); background:#f3f2ed; }
.yh-project-illustrated img { display:block; width:100%; height:100%; object-fit:contain; }
.yh-case-media-wide .yh-project-visual.yh-project-illustrated { padding:0; aspect-ratio:auto; }
.yh-case-media-wide .yh-project-illustrated img { width:100%; height:auto; }
/* Concept covers support the reading flow instead of filling a viewport.
   All eight 3:2 assets stay below 540px wide / about 40% of viewport height. */
.yh-case-media-wide.yh-case-concept { width:min(100%,540px,60svh); margin:0 0 36px; }
.yh-case[data-case^="projects/"] .yh-case-facts { padding-bottom:20px; margin-bottom:20px; }
.yh-project-illustration-caption { margin-top:12px; color:var(--yh-muted); font-size:.875rem; line-height:1.6; }
.yh-media-placeholder { position:relative; display:flex; flex-direction:column; justify-content:space-between; width:100%; aspect-ratio:16/10; min-width:0; overflow:hidden; padding:20px; color:light-dark(#707978,#c0c8c7); background:light-dark(#e7eeee,#293333); border:1px solid light-dark(#dbe4e3,#3d4747); border-radius:3px; }
.yh-media-placeholder[data-tone="1"] { background:light-dark(#e9ecf1,#2b2f38); border-color:light-dark(#dfe2e8,#414652); color:light-dark(#737b89,#bfc5d2); }
.yh-media-placeholder[data-tone="2"] { background:light-dark(#efefea,#33352f); border-color:light-dark(#e3e4dc,#45483e); color:light-dark(#797d70,#c6cbbc); }
.yh-media-index { font-size:.75rem; letter-spacing:.08em; line-height:1.4; }
.yh-media-label { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.875rem; line-height:1.5; }
.yh-media-label > span { font-size:1rem; opacity:.5; }
.yh-project summary { display:grid; grid-template-columns:minmax(180px,.9fr) minmax(0,1.3fr) minmax(120px,.6fr); gap:30px; align-items:center; }
.yh-project summary > .yh-project-copy { min-width:0; }
.yh-project summary strong { font-size:clamp(1.45rem,2.7vw,2.5rem); }
.yh-project-metric { min-width:0; padding-top:0; }
.yh-project-metric b { font-size:clamp(2.2rem,4.2vw,4.5rem); }
.yh-project .yh-detail-body { margin-left:auto; max-width:calc(100% - 30%); }
.yh-paper-illustrated { display:grid; grid-template-columns:200px minmax(0,1fr); gap:25px; align-items:start; }
.yh-media-article { aspect-ratio:4/3; padding:16px; }
.yh-paper-copy { min-width:0; }
.yh-publication-figure { min-width:0; margin:36px 0; }
.yh-publication-figure-compact { margin:0; }
.yh-publication-figure .yh-publication-image { position:relative; display:block; width:100%; margin:0; padding:12px; border:1px solid var(--yh-rule); border-radius:3px; background:#fff; overflow:hidden; cursor:zoom-in; }
.yh-publication-image img { display:block; width:100%; height:auto; max-height:620px; object-fit:contain; }
.yh-publication-figure-compact .yh-publication-image { aspect-ratio:4/3; padding:8px; }
.yh-publication-figure-compact .yh-publication-image img { width:100%; height:100%; }
.yh-publication-zoom { position:absolute; right:8px; bottom:8px; display:grid; place-items:center; width:25px; height:25px; color:#292b29; background:#fffffff0; border:1px solid #d7dad7; border-radius:50%; opacity:.75; }
.yh-publication-image:hover .yh-publication-zoom,.yh-publication-image:focus-visible .yh-publication-zoom { opacity:1; }
.yh-publication-image:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.yh-publication-figure figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 14px; margin-top:12px; font-size:.8125rem; line-height:1.7; color:var(--yh-muted); }
.yh-publication-caption { flex:1 1 180px; }
.yh-publication-figure .yh-publication-view { flex:none; margin:0; font-size:.75rem; }
.yh-publication-credit { flex:0 0 100%; display:block; font-size:.6875rem; line-height:1.8; }
.yh-publication-figure .yh-publication-credit a { display:inline; margin:0; font-size:inherit; }
.yh-publication-figure-compact .yh-publication-caption { flex:1 1 auto; }
.yh-history-item.yh-history-illustrated { grid-template-columns:minmax(230px,.9fr) minmax(0,1.6fr); gap:40px; align-items:center; padding:35px 0; }
.yh-institution-placeholder { min-width:0; aspect-ratio:16/10; display:flex; flex-direction:column; justify-content:space-between; padding:24px; background:light-dark(#e8edee,#293234); border:1px solid light-dark(#dbe3e5,#3b474b); color:light-dark(#737d82,#bbc7cc); border-radius:3px; }
.yh-institution-placeholder[data-tone="1"] { background:light-dark(#eef0ec,#30362e); border-color:light-dark(#e0e5dc,#414b3e); color:light-dark(#737e6d,#bfccb8); }
.yh-institution-placeholder strong { font-size:clamp(1.45rem,2.4vw,2.5rem); line-height:1.2; letter-spacing:-.025em; font-weight:400; }
.yh-institution-city,.yh-institution-caption { font-size:.75rem; line-height:1.5; }
.yh-history-copy .yh-history-date { margin-bottom:15px; padding-top:0; }
.yh-card-media { display:flex; flex-direction:column; justify-content:space-between; min-width:0; height:106px; padding:14px 16px; margin:0 0 18px; border:1px solid light-dark(#e1e8e78c,#6f7c774d); border-radius:6px; background:linear-gradient(125deg,light-dark(#e6eeecbd,#3a4843b3),light-dark(#f6f8f77a,#3c444270)); color:light-dark(#697a76,#bccdc7); }
.yh-card-media strong { font-size:1.1rem; font-weight:400; letter-spacing:.03em; }
.yh-card-media > span { font-size:.75rem; }
@media(max-width:1000px) {
  .yh-project summary { grid-template-columns:minmax(150px,.8fr) minmax(0,1.4fr); gap:20px 25px; }
  .yh-project .yh-media-placeholder { grid-row:span 2; align-self:stretch; aspect-ratio:auto; min-height:210px; }
  .yh-project summary > .yh-project-visual { grid-row:span 2; align-self:stretch; padding:20px; }
  .yh-project summary > .yh-project-visual.yh-project-illustrated { padding:0; align-self:center; }
  .yh-project-metric { grid-column:2; text-align:left; display:flex; align-items:center; gap:15px; }
  .yh-project-metric small { margin:0; max-width:12em; }
  .yh-project .yh-detail-body { max-width:100%; }
}
@media(max-width:580px) {
  .yh-project summary { grid-template-columns:minmax(0,1fr); gap:22px; }
  .yh-project .yh-media-placeholder { grid-row:auto; aspect-ratio:16/9; min-height:0; }
  .yh-project summary > .yh-project-visual { grid-row:auto; min-height:240px; }
  .yh-project summary > .yh-project-visual.yh-project-illustrated { min-height:0; }
  .yh-case-media-wide .yh-project-visual { padding:22px; }
  .yh-case-media-wide .yh-visual-items { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .yh-project-metric { grid-column:auto; }
  .yh-paper-illustrated { grid-template-columns:minmax(0,1fr); gap:20px; }
  .yh-media-article { aspect-ratio:16/9; }
  .yh-history-item.yh-history-illustrated { grid-template-columns:minmax(0,1fr); gap:24px; }
  .yh-institution-placeholder { aspect-ratio:16/9; }
  .yh-card-media { height:92px; margin-bottom:15px; }
}

/* gallery.css */
.yh-coverflow { min-width:0; width:100%; --flow-radius:7px; --flow-max-width:64%; --flow-height:40%; }
.yh-coverflow-viewport { position:relative; width:100%; aspect-ratio:1.65; overflow:hidden; perspective:900px; perspective-origin:50% 47%; touch-action:pan-y pinch-zoom; cursor:grab; -webkit-user-select:none; user-select:none; }
.yh-coverflow-viewport:focus-visible { outline:1px solid var(--yh-muted); outline-offset:2px; border-radius:var(--flow-radius); }
.yh-coverflow-track { position:absolute; inset:0; transform-style:preserve-3d; }
/* Flat hit areas cover the exposed photos, above the recessed 3D track.
   They share the viewport's drag gestures and the arrow buttons' spring. */
.yh-coverflow-side { position:absolute; z-index:200; top:12%; bottom:16%; width:18%; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:pointer; }
.yh-coverflow-side-left { left:0; }
.yh-coverflow-side-right { right:0; }
.yh-coverflow-side[hidden] { display:none; }
.yh-coverflow-side:focus-visible { outline:1px solid var(--yh-muted); outline-offset:-2px; }
.yh-coverflow-photo { position:absolute; left:50%; top:48%; width:64%; aspect-ratio:1.6; margin:0; padding:0; border:1px solid light-dark(#0000000d,#ffffff12); border-radius:var(--flow-radius); background:light-dark(#e9e8e5,#222321); color:light-dark(#42564e,#cedbd4); box-shadow:0 13px 22px -10px light-dark(#29352d45,#00000099),0 2px 5px light-dark(#28362e14,#00000033); transform:translate(-50%,-50%); transform-origin:50% 50%; backface-visibility:hidden; cursor:pointer; overflow:hidden; font:inherit; text-align:left; }
.yh-coverflow-shade { position:absolute; inset:0; background:#111b18; opacity:0; pointer-events:none; }
.yh-coverflow-photo img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.yh-coverflow-photo[data-fit="contain"] img { object-fit:contain; }
.yh-coverflow-photo[data-image] img { opacity:0; transition:opacity .18s ease-out; }
.yh-coverflow-photo[data-image-state="ready"] img { opacity:1; }
.yh-coverflow-preview { position:absolute; inset:0; display:block; width:100%; height:100%; background-position:center; background-size:contain; background-repeat:no-repeat; pointer-events:none; transition:opacity .18s ease-out; }
.yh-coverflow-photo[data-image-state="ready"] .yh-coverflow-preview { opacity:0; }
.yh-coverflow-image-error { position:absolute; inset:0; display:grid; place-content:center; padding:12px; text-align:center; color:var(--yh-muted); font-size:.8rem; line-height:1.5; }
.yh-coverflow-photo:focus-visible { outline:2px solid var(--yh-muted); outline-offset:3px; }
.yh-coverflow-reveal { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; text-align:center; background:light-dark(#e8e8df,#30332f); color:var(--yh-ink); }
.yh-coverflow-reveal span { font-size:.7rem; line-height:1.6; color:var(--yh-muted); }
.yh-coverflow-reveal strong { font-size:.85rem; font-weight:400; text-decoration:underline; text-underline-offset:5px; }
/* Keep portrait documents and experimental photographs fully in frame. */
.yh-city-details .yh-city-detail-card .yh-coverflow[data-presentation="portrait"] .yh-coverflow-viewport { aspect-ratio:.95; }
.yh-coverflow[data-presentation="portrait"] .yh-coverflow-photo { width:64%; aspect-ratio:3 / 4; }
.yh-city-details .yh-city-detail-card .yh-coverflow[data-presentation="landscape"] .yh-coverflow-viewport { aspect-ratio:1.35; }
.yh-coverflow[data-presentation="landscape"] .yh-coverflow-photo { width:86%; aspect-ratio:4 / 3; }
.yh-coverflow[data-presentation="portrait"] { --flow-height:85.333333%; }
.yh-coverflow[data-presentation="landscape"] { --flow-max-width:86%; --flow-height:64.5%; }
/* Fit the frame itself to the photograph, leaving no colored side panels.
   A stable viewport keeps the carousel controls and adjacent copy still. */
.yh-coverflow .yh-coverflow-photo[data-image] { width:min(var(--flow-max-width),calc(var(--flow-height) * var(--photo-ratio,1.6))); aspect-ratio:var(--photo-ratio,1.6); }
.yh-coverflow .yh-coverflow-photo[data-image] img { object-fit:contain; }
.yh-coverflow-placeholder { display:flex; flex-direction:column; width:100%; height:100%; aspect-ratio:1.6; padding:8%; background:linear-gradient(125deg,light-dark(#e0e9e4,#35473f),light-dark(#f1f4ee,#2c3733)); }
.yh-coverflow-photo[data-tone="1"] .yh-coverflow-placeholder { background:linear-gradient(125deg,light-dark(#e1e6ec,#35414c),light-dark(#f1f3f5,#2c343e)); color:light-dark(#506173,#c9d4df); }
.yh-coverflow-photo[data-tone="2"] .yh-coverflow-placeholder { background:linear-gradient(125deg,light-dark(#eae4d9,#484137),light-dark(#f6f2ec,#37332f)); color:light-dark(#6c6251,#ddd3c4); }
.yh-coverflow-photo-meta { display:flex; justify-content:space-between; gap:8px; font-size:clamp(.5rem,1vw,.65rem); letter-spacing:.05em; opacity:.8; }
.yh-coverflow-placeholder strong { display:block; margin:auto 0; font-size:clamp(.9rem,1.7vw,1.65rem); font-weight:400; letter-spacing:-.025em; line-height:1.2; }
.yh-coverflow-pending { font-size:clamp(.5rem,.85vw,.65rem); opacity:.75; }
.yh-coverflow-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:-4px; }
.yh-coverflow-controls[hidden] { display:none; }
.yh-coverflow-controls button { display:grid; place-items:center; width:36px; height:36px; border:1px solid transparent; border-radius:50%; background:transparent; color:var(--yh-ink); padding:0; cursor:pointer; transition:background .2s,border-color .2s,opacity .2s; }
.yh-coverflow-controls button svg { width:19px; height:19px; }
.yh-coverflow-controls button:hover:not(:disabled) { border-color:var(--yh-rule); background:light-dark(#ffffff66,#ffffff0a); }
.yh-coverflow-controls button:focus-visible { outline:1px solid var(--yh-muted); outline-offset:2px; }
.yh-coverflow-controls button:disabled { opacity:.2; cursor:default; }
.yh-coverflow-count { display:flex; gap:8px; min-width:54px; justify-content:center; font-size:.65rem; letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--yh-muted); }
.yh-coverflow-count [data-gallery-current] { color:var(--yh-ink); }
.yh-coverflow[data-dragging="true"] .yh-coverflow-photo,.yh-coverflow[data-dragging="true"] .yh-coverflow-viewport,.yh-coverflow[data-dragging="true"] .yh-coverflow-side { cursor:grabbing; }
.yh-coverflow:is([data-dragging="true"],[data-animating="true"]) .yh-coverflow-photo { will-change:transform; }
.yh-coverflow:is([data-dragging="true"],[data-animating="true"]) .yh-coverflow-shade { will-change:opacity; }
.yh-photo-captions { display:grid; }
.yh-photo-copy { grid-area:1 / 1; min-width:0; align-self:start; }
.yh-photo-copy[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.yh-coverflow .yh-coverflow-caption { margin:10px 0 0; text-align:center; font-size:.75rem; color:var(--yh-muted); line-height:1.5; }
.yh-history-gallery { min-width:0; }
.yh-memory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:24px; width:100%; max-width:1120px; margin:36px auto 0; align-items:start; }
.yh-memory-grid .yh-city-detail-card[data-city-card] { grid-column:auto; grid-row:auto; align-self:start; justify-self:stretch; max-width:none; padding:20px 24px 26px; }
.yh-memory-grid .yh-city-detail-card .yh-coverflow-viewport { aspect-ratio:1.35; }
.yh-memory-grid .yh-coverflow[data-presentation="portrait"] .yh-coverflow-viewport { aspect-ratio:.95; }
:is(.yh-institution-card,.yh-city-detail-card) .yh-card-media { display:block; height:auto; margin:0 -14px 16px; padding:0; border:0; border-radius:0; background:none; color:inherit; }
:is(.yh-institution-card,.yh-city-detail-card) .yh-coverflow-viewport { aspect-ratio:1.78; }
:is(.yh-institution-card,.yh-city-detail-card) .yh-coverflow-placeholder strong { font-size:1.12rem; letter-spacing:-.025em; }
:is(.yh-institution-card,.yh-city-detail-card) .yh-coverflow-photo-meta,:is(.yh-institution-card,.yh-city-detail-card) .yh-coverflow-pending { font-size:.55rem; }
:is(.yh-institution-card,.yh-city-detail-card) .yh-card-top { margin-bottom:5px; }
@media(max-width:580px) {
  .yh-coverflow-controls button { width:40px; height:40px; }
  .yh-history-gallery { max-width:520px; }
  .yh-coverflow-placeholder strong { font-size:1.35rem; }
  .yh-coverflow-photo-meta,.yh-coverflow-pending { font-size:.6rem; }
  :is(.yh-institution-card,.yh-city-detail-card) .yh-card-media { margin:0 -10px 12px; }
}
@media(prefers-reduced-motion:reduce) { .yh-coverflow-controls button,.yh-coverflow-photo[data-image] img,.yh-coverflow-preview { transition:none; } }

/* duo.css */
/* One sheet peels from bottom right to top left; closing reverses the crease. */
.yh-duo-scene { position:fixed; inset:0; z-index:70; overflow:hidden; pointer-events:none; isolation:isolate; background:var(--yh-back); }
.yh-duo-panel { position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none; isolation:isolate; background:var(--viz-paper,var(--yh-front)); }
.yh-duo-panel-copy { width:100%; min-height:100%; margin:0; }
.yh-duo-panel * { animation:none!important; transition:none!important; caret-color:transparent; }
.yh-duo-panel-base,.yh-duo-panel-glass { position:absolute; inset:0; overflow:hidden; background:var(--viz-paper,var(--yh-front)); }
.yh-duo-panel-base { z-index:0; }
.yh-duo-panel-glass { z-index:1; isolation:isolate; will-change:clip-path; }
.yh-duo-panel-frost,.yh-duo-panel-shade { position:absolute; inset:0; pointer-events:none; }
.yh-duo-panel-frost { backdrop-filter:blur(var(--duo-band-blur,0px)); -webkit-backdrop-filter:blur(var(--duo-band-blur,0px)); }
.yh-duo-panel-shade { box-shadow:inset 1px 0 rgb(255 255 255 / .12); }
.yh-duo-panel-rim { position:absolute; z-index:2; width:1px; background:rgb(255 255 255 / .65); box-shadow:2px 0 8px rgb(0 0 0 / .25); pointer-events:none; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .yh-duo-panel-glass > .yh-duo-panel-copy { filter:blur(var(--duo-panel-blur,0px)); }
}
.yh-duo-base,.yh-duo-cover { position:absolute; inset:0; overflow:hidden; isolation:isolate; }
.yh-duo-base { z-index:0; }
.yh-duo-cover { z-index:1; }
.yh-duo-crease-shadow { position:absolute; inset:0; z-index:2; }
.yh-duo-leaf { position:absolute; inset:0; z-index:3; }
.yh-fold-shadow { filter:none; }
.yh-fold-shadow::before,.yh-return-fold::before { content:""; position:absolute; inset:0; }
.yh-duo-crease-shadow,.yh-fold-shadow::before,.yh-return-fold::before { opacity:var(--peel-shadow,.2); background:linear-gradient(135deg,transparent calc(var(--peel-crease) - 24px),#000 calc(var(--peel-crease) - 2px),#00000090 calc(var(--peel-crease) + 5px),transparent calc(var(--peel-crease) + 30px)); }
.yh-duo-leaf,.yh-fold-face,.yh-return-face { background:linear-gradient(135deg,color-mix(in srgb,var(--yh-front) 64%,transparent) calc(var(--peel-crease) - 80px),color-mix(in srgb,var(--yh-fold) 84%,transparent) calc(var(--peel-crease) - 24px),var(--yh-front) calc(var(--peel-crease) - 5px),var(--yh-edge) var(--peel-crease)); backdrop-filter:blur(var(--peel-blur,3px)) saturate(.78); -webkit-backdrop-filter:blur(var(--peel-blur,3px)) saturate(.78); }
.yh-duo-viewport { position:absolute; top:0; left:0; width:var(--duo-width); height:var(--duo-height); overflow:hidden; }
.yh-duo-viewport .yh-sheet { position:absolute!important; top:var(--duo-scroll); left:0; right:auto!important; bottom:auto!important; z-index:0!important; width:var(--duo-width)!important; min-height:var(--duo-height)!important; height:auto!important; clip-path:none!important; overflow:visible!important; margin:0!important; visibility:visible!important; }
.yh-duo-viewport .yh-main { transform:none!important; opacity:1!important; }
.yh-duo-viewport * { animation:none!important; transition:none!important; caret-color:transparent; }
#yufan-site[data-side="opening"] .yh-fold-shadow,#yufan-site[data-side="closing"] .yh-fold-shadow,
#yufan-site[data-side="opening"] .yh-corner,#yufan-site[data-side="closing"] .yh-corner,
#yufan-site[data-side="opening"] .yh-corner-hint,#yufan-site[data-side="closing"] .yh-corner-hint { visibility:hidden; }
.yh-return-fold { position:fixed; inset:0; z-index:30; pointer-events:none; visibility:hidden; }
.yh-return-face { position:absolute; inset:0; }
.yh-return-corner { position:fixed; top:0; left:0; z-index:32; width:108px; height:108px; padding:0; border:0; background:none; clip-path:polygon(0 0,100% 0,0 100%); visibility:hidden; }
.yh-return-corner:focus-visible { outline-offset:-7px; }
.yh-return-corner:disabled { pointer-events:none; }
.yh-return-hint { position:fixed; top:13px; left:15px; z-index:31; color:var(--yh-muted); font-size:.75rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease; }
#yufan-site[data-side="back"] .yh-return-fold,#yufan-site[data-side="back"] .yh-return-corner,#yufan-site[data-side="back"] .yh-return-hint { visibility:visible; }
#yufan-site[data-return-peek="true"] .yh-return-hint { opacity:1; }
.yh-back .yh-life-home { margin-left:max(0px,calc(110px - 6vw)); }
@media print { .yh-duo-scene,.yh-duo-panel,.yh-return-fold,.yh-return-corner,.yh-return-hint { display:none!important; } }

/* technical-viz.css */
.yh-viz-book { --viz-green:light-dark(#477666,#9dbca9); --viz-blue:light-dark(#567592,#a7bace); --viz-paper:light-dark(#eeede8,#20211f); --viz-amber:light-dark(#946d30,#d5b276); border:1px solid var(--yh-rule); background:var(--viz-paper); margin:28px 0; min-width:0; }
.yh-viz-book-nav { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--yh-rule); color:var(--yh-muted); font-size:.875rem; }
.yh-viz-book-nav > div { display:flex; margin-left:auto; gap:6px; }
.yh-viz-book-nav button { width:44px; height:44px; border:1px solid var(--yh-rule); background:transparent; color:var(--yh-ink); font:inherit; font-size:1.25rem; cursor:pointer; }
.yh-viz-book-nav button:disabled { opacity:.3; cursor:default; }
.yh-viz-book button:focus-visible,.yh-viz-book input:focus-visible,.yh-viz-book select:focus-visible,.yh-viz-book summary:focus-visible { outline:2px solid var(--viz-green); outline-offset:4px; }
.yh-viz-book-canvas { position:relative; isolation:isolate; }
.yh-viz-leaf { padding:28px; background:var(--viz-paper); min-width:0; overflow-wrap:anywhere; }
.yh-viz-leaf[hidden] { display:none; }
.yh-case-section .yh-viz-kicker,.yh-case-section .yh-viz-source { font-size:.8125rem; color:var(--yh-muted); line-height:1.6; margin:0 0 12px; }
.yh-case-section .yh-viz-source { margin:24px 0 0; }
.yh-viz-leaf h3 { margin:0 0 28px; font-size:clamp(1.3rem,2.2vw,1.85rem); font-weight:450; line-height:1.4; letter-spacing:-.025em; }
.yh-viz-leaf h4 { font-size:1.05rem; font-weight:500; margin:24px 0 16px; }
.yh-case-section .yh-viz-note { font-size:.9375rem; color:var(--yh-muted); line-height:1.85; margin:20px 0 0; }
.yh-viz-stats { display:flex; flex-wrap:wrap; gap:20px 32px; padding:0; margin:24px 0; }
.yh-viz-stats > div { display:flex; flex-direction:column-reverse; flex:1; min-width:100px; }
.yh-viz-stats dt { font-size:.875rem; color:var(--yh-muted); line-height:1.5; margin-top:7px; }
.yh-viz-stats dd { font-size:clamp(1.5rem,3vw,2.5rem); font-variant-numeric:tabular-nums; line-height:1.15; margin:0; letter-spacing:-.04em; }
.yh-viz-legend { display:flex; flex-wrap:wrap; gap:10px 20px; padding:0; margin:18px 0; list-style:none; font-size:.875rem; color:var(--yh-muted); }
.yh-viz-legend li { display:flex; align-items:center; gap:8px; }
.yh-viz-legend i { display:inline-block; width:12px; height:12px; flex-shrink:0; }
.yh-viz-legend b { color:var(--yh-ink); font-weight:500; }
.yh-viz-color-0 { background:var(--viz-green); }
.yh-viz-color-1 { background:var(--viz-amber); }
.yh-viz-color-2 { background:var(--viz-blue); }
.yh-viz-swatch-past { background:var(--yh-muted); opacity:.35; }
.yh-viz-swatch-future { border:1px solid var(--yh-muted); box-sizing:border-box; }
.yh-viz-stack { display:flex; height:28px; width:100%; gap:2px; }
.yh-viz-stack > span { min-width:1px; }
.yh-viz-module-chart { display:grid; gap:16px; margin:25px 0; }
.yh-viz-module { display:grid; grid-template-columns:minmax(115px,1fr) minmax(80px,1.3fr) 60px; gap:14px; align-items:center; font-size:.875rem; line-height:1.45; }
.yh-viz-module-bar { display:flex; background:color-mix(in srgb,var(--yh-ink) 4%,transparent); height:14px; }
.yh-viz-module-bar i { display:block; height:100%; }
.yh-viz-module b { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:500; }
.yh-viz-module small { font-size:.8125rem; color:var(--yh-muted); }
.yh-viz-sequence { padding:0; margin:24px 0; list-style:none; display:grid; gap:0; }
.yh-viz-sequence li { display:grid; grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr); gap:18px; padding:15px 0 15px 18px; border-left:2px solid var(--viz-green); border-bottom:1px solid var(--yh-rule); font-size:.9375rem; line-height:1.6; }
.yh-viz-sequence strong { font-weight:500; }
.yh-viz-sequence span { color:var(--yh-muted); }
.yh-viz-formula { padding:18px 0; margin:18px 0; border-block:1px solid var(--yh-rule); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9375rem; line-height:1.9; overflow-wrap:anywhere; }
.yh-viz-controls { display:flex; flex-wrap:wrap; gap:20px; margin:24px 0; }
.yh-viz-control { display:flex; flex-direction:column; gap:12px; flex:1; min-width:min(180px,100%); font-size:.9375rem; }
.yh-viz-control > span { display:flex; gap:12px; justify-content:space-between; }
.yh-viz-control output { color:var(--viz-green); font-variant-numeric:tabular-nums; }
.yh-viz-control input { width:100%; accent-color:var(--viz-green); min-height:36px; margin:0; cursor:pointer; }
.yh-viz-control select { width:100%; min-width:0; min-height:44px; padding:8px 12px; font:inherit; color:var(--yh-ink); background:var(--yh-front); border:1px solid var(--yh-rule); border-radius:0; }
.yh-viz-chart { display:block; width:100%; max-width:560px; height:auto; margin:24px auto 14px; overflow:visible; }
.yh-viz-chart text { fill:var(--yh-muted); font-family:inherit; font-size:15px; }
.yh-viz-axis { stroke:var(--yh-rule); stroke-width:1; }
.yh-viz-fill { fill:var(--viz-green); }
.yh-viz-faded { fill:var(--yh-muted); opacity:.35; }
.yh-viz-future { stroke:var(--yh-muted); fill:none; opacity:.5; }
.yh-viz-cursor { stroke:var(--yh-ink); stroke-width:1.3; stroke-dasharray:4 4; }
.yh-viz-line { stroke:var(--viz-amber); stroke-width:2; fill:none; }
.yh-viz-point { fill:var(--viz-amber); }
.yh-viz-point-active { fill:var(--yh-ink); stroke:var(--viz-paper); stroke-width:2; }
.yh-viz-axis-caption { text-align:center; color:var(--yh-muted); font-size:.8125rem; }
.yh-viz-data { margin-top:24px; border-top:1px solid var(--yh-rule); padding-top:16px; font-size:.9375rem; }
.yh-viz-data summary { cursor:pointer; padding:5px 0; }
.yh-viz-table-wrap { max-width:100%; margin:20px 0; }
.yh-viz-table { width:100%; border-collapse:collapse; font-size:.875rem; line-height:1.6; table-layout:fixed; }
.yh-viz-table th,.yh-viz-table td { padding:14px 10px; border-bottom:1px solid var(--yh-rule); text-align:right; overflow-wrap:anywhere; font-weight:400; font-variant-numeric:tabular-nums; }
.yh-viz-table th:first-child { text-align:left; width:46%; }
.yh-viz-table thead { color:var(--yh-muted); }
.yh-viz-table tbody td { font-size:1.15rem; background:color-mix(in srgb,var(--viz-green) 7%,transparent); }
.yh-viz-expression { display:flex; flex-direction:column; align-items:center; gap:10px; margin:26px 0; text-align:center; }
.yh-viz-expression > div { width:100%; box-sizing:border-box; border:1px solid var(--yh-rule); padding:15px; display:grid; gap:6px; }
.yh-viz-expression small { font-size:.8125rem; color:var(--yh-muted); }
.yh-viz-expression b { font-family:ui-monospace,monospace; font-size:1.05rem; font-weight:500; }
.yh-viz-expression span { font-size:.875rem; color:var(--yh-muted); }
.yh-viz-expression strong { font-size:1.7rem; color:var(--viz-green); font-weight:400; }
.yh-viz-expression-result { background:color-mix(in srgb,var(--viz-green) 8%,transparent); }
.yh-viz-compare,.yh-viz-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.yh-viz-compare > div,.yh-viz-methods > div { display:grid; gap:8px; padding:16px 0; border-bottom:1px solid var(--yh-rule); }
.yh-viz-compare span,.yh-viz-methods span { font-size:.875rem; color:var(--yh-muted); }
.yh-viz-compare b { font-size:1.65rem; font-weight:400; }
.yh-viz-methods b { font-weight:500; }
.yh-viz-density { fill:none; stroke-width:1.8; }
.yh-viz-component-0 { --component:var(--viz-green); }
.yh-viz-component-1 { --component:var(--viz-blue); }
.yh-viz-component-2 { --component:var(--viz-amber); }
.yh-viz-component-3 { --component:light-dark(#9a6261,#d8a29e); }
.yh-viz-component-4 { --component:light-dark(#76638f,#b9a6cc); }
.yh-viz-component-5 { --component:light-dark(#507f82,#97bfc2); }
.yh-viz-density { stroke:var(--component); }
.yh-viz-probabilities { display:grid; gap:12px; margin:24px 0; }
.yh-viz-probabilities > div { display:grid; grid-template-columns:28px minmax(0,1fr) 58px; align-items:center; gap:12px; font-size:.875rem; }
.yh-viz-probabilities > div > div { height:12px; background:color-mix(in srgb,var(--yh-ink) 5%,transparent); }
.yh-viz-probabilities i { display:block; height:100%; background:var(--component); }
.yh-viz-probabilities b { text-align:right; font-weight:400; font-variant-numeric:tabular-nums; }
@media(max-width:580px) {
  .yh-viz-leaf { padding:20px 16px; }
  .yh-viz-book-nav { padding:10px 12px; gap:10px; }
  .yh-viz-module { grid-template-columns:minmax(0,1fr) 60px; gap:6px 10px; }
  .yh-viz-module > span { grid-column:1; grid-row:1; }
  .yh-viz-module b { grid-column:2; grid-row:1 / 3; }
  .yh-viz-module-bar { grid-column:1; grid-row:2; }
  .yh-viz-sequence li { grid-template-columns:minmax(0,1fr); gap:4px; }
  .yh-viz-stats { gap:18px; }
  .yh-viz-stats > div { min-width:80px; }
  .yh-viz-table th,.yh-viz-table td { padding:12px 6px; }
  .yh-viz-chart text { font-size:17px; }
}
@media print { .yh-viz-book-nav button,.yh-viz-book-canvas > .yh-duo-panel { display:none; } .yh-viz-book-canvas { height:auto!important; overflow:visible!important; } .yh-viz-leaf[hidden] { display:block; } .yh-viz-leaf { break-inside:avoid; } }

/* software-viz.css */
.yh-architecture { min-width:0; }
.yh-case-section .yh-arch-help { font-size:.875rem; color:var(--yh-muted); margin:0 0 22px; line-height:1.7; }
.yh-arch-map { padding:6px 0 16px; }
.yh-arch-node { width:100%; min-width:0; display:grid; gap:6px; padding:18px; text-align:left; background:color-mix(in srgb,var(--yh-front) 60%,transparent); color:var(--yh-ink); border:1px solid var(--yh-rule); border-radius:2px; font:inherit; line-height:1.55; cursor:pointer; overflow-wrap:anywhere; position:relative; }
.yh-arch-node small { font-size:.75rem; letter-spacing:.07em; color:var(--yh-muted); }
.yh-arch-node strong { font-size:1.03rem; font-weight:500; }
.yh-arch-node > span { font-size:.875rem; color:var(--yh-muted); }
.yh-arch-node[aria-expanded="true"] { border-color:var(--viz-green); background:color-mix(in srgb,var(--viz-green) 11%,var(--viz-paper)); box-shadow:inset 3px 0 0 var(--viz-green); }
.yh-arch-node:hover { border-color:var(--viz-green); }
.yh-arch-arrow { display:flex; flex-direction:column; align-items:center; gap:0; padding:8px 0; text-align:center; color:var(--yh-muted); }
.yh-arch-arrow > span { font-size:1.25rem; line-height:1.25; }
.yh-arch-arrow small { font-size:.8125rem; line-height:1.6; max-width:90%; }
.yh-arch-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; position:relative; }
.yh-arch-group[data-columns="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.yh-arch-component { min-width:0; }
.yh-arch-group { align-items:start; }
.yh-arch-group .yh-arch-node { box-sizing:border-box; }
.yh-arch-boundary { padding:20px 16px 16px; border:1px dashed var(--yh-rule); margin:16px 0; }
.yh-arch-boundary-label { display:block; color:var(--yh-muted); font-size:.875rem; margin-bottom:16px; }
.yh-arch-optional .yh-arch-node { border-style:dashed; }
.yh-case-section .yh-arch-ribbon { margin:16px 0; padding:12px 15px; border-left:2px solid var(--viz-blue); font-size:.875rem; color:var(--yh-muted); line-height:1.7; background:color-mix(in srgb,var(--viz-blue) 6%,transparent); }
.yh-arch-detail { padding:16px; border:1px solid var(--viz-green); border-top:0; }
.yh-arch-detail[hidden] { display:none; }
.yh-arch-detail-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 15px; }
.yh-arch-detail-head small { color:var(--viz-green); font-size:.8125rem; letter-spacing:.04em; }
.yh-arch-detail-head h4 { margin:0; font-size:1.05rem; }
.yh-arch-fields { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.yh-arch-fields code { display:block; max-width:100%; overflow-wrap:anywhere; padding:4px 8px; border:1px solid var(--yh-rule); color:var(--yh-muted); font-size:.75rem; line-height:1.65; }
.yh-case-section .yh-arch-detail > p { font-size:.9375rem; line-height:1.85; color:var(--yh-ink); margin:12px 0 0; }
.yh-arch-budget { display:grid; gap:15px; margin:4px 0 30px; }
.yh-arch-budget > div { display:grid; grid-template-columns:90px minmax(0,1fr) 62px; gap:12px; align-items:center; font-size:.875rem; line-height:1.5; }
.yh-arch-budget i { height:18px; background:linear-gradient(to right,var(--viz-green) var(--bar),transparent var(--bar)); border-bottom:1px solid var(--yh-rule); }
.yh-arch-budget b { font-variant-numeric:tabular-nums; text-align:right; font-weight:400; }
@media(max-width:580px) {
  .yh-arch-group { gap:10px; }
  .yh-arch-group[data-columns="3"] { grid-template-columns:minmax(0,1fr); }
  .yh-arch-node { padding:13px 12px; }
  .yh-arch-budget > div { grid-template-columns:74px minmax(0,1fr) 56px; gap:8px; }
}
@media(max-width:380px) { .yh-arch-group { grid-template-columns:minmax(0,1fr); } }
@media print { .yh-arch-component { break-inside:avoid; } .yh-arch-help { display:none; } }

/* cases.css */
.yh-summary-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.yh-case-link { display:inline-flex; align-items:center; gap:12px; font-size:.875rem; line-height:1.5; text-decoration:none; border-bottom:1px solid var(--yh-rule); padding:9px 0; white-space:nowrap; }
.yh-case-link:hover { border-color:var(--yh-ink); }
.yh-project-copy .yh-summary-actions { margin-top:16px; }
.yh-project-copy .yh-summary-actions small { margin:0; }
.yh-research-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; }
.yh-detail summary .yh-research-meta small { margin:0; font-size:.8rem; }
.yh-publication-status { display:inline-flex; padding:2px 8px; border:1px solid var(--yh-rule); font-size:.75rem; line-height:1.6; color:var(--yh-muted); white-space:nowrap; }
.yh-publication-status[data-publication-status="review"] { border-style:dashed; }
.yh-research-extra { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; border-top:1px solid var(--yh-rule); }
.yh-research-extra strong { display:block; font-weight:400; font-size:1.15rem; }
.yh-research-extra small { display:block; font-size:.875rem; color:var(--yh-muted); margin-top:5px; }
@media(max-width:580px) { .yh-research-extra { align-items:flex-start; flex-direction:column; gap:12px; } }
.yh-case-back { display:inline-flex; align-items:center; gap:14px; color:var(--yh-muted); font-size:.875rem; text-decoration:none; margin-bottom:64px; }
.yh-case-heading h1 { max-width:18ch; font-size:clamp(2.6rem,5.9vw,6.8rem); line-height:1.12; letter-spacing:-.045em; margin-bottom:32px; }
.yh-case-deck { font-size:clamp(1.15rem,1.8vw,1.65rem); max-width:54em; line-height:1.8; color:var(--yh-muted); margin:0 0 48px; }
.yh-case-facts { display:grid; grid-template-columns:1fr 1.4fr .65fr; gap:30px 50px; border-top:1px solid var(--yh-rule); padding:28px 0; margin:0 0 30px; align-items:start; }
.yh-case-facts dt { color:var(--yh-muted); font-size:.875rem; margin-bottom:12px; }
.yh-case-facts dd { margin:0; font-size:1rem; line-height:1.75; }
.yh-case-facts .yh-case-primary dd { font-size:clamp(2.4rem,4vw,4.5rem); letter-spacing:-.055em; line-height:1.1; }
.yh-case-media { margin:36px 0; }
.yh-case-media-wide { margin:0 0 80px; }
.yh-case-image { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; aspect-ratio:16/9; padding:28px; background:light-dark(#e8edee,#293234); color:light-dark(#56646a,#bfccd1); border:1px solid light-dark(#dce3e6,#3c484c); border-radius:3px; }
.yh-case-media-wide .yh-case-image { aspect-ratio:21/8; }
.yh-case-image[data-tone="1"] { background:light-dark(#e9ecf1,#2b303a); color:light-dark(#596175,#c5cada); border-color:light-dark(#dce1e9,#404855); }
.yh-case-image[data-tone="2"] { background:light-dark(#edf0eb,#30362e); color:light-dark(#556550,#c1cbbd); border-color:light-dark(#dfe6db,#444d40); }
.yh-case-image > span,.yh-case-image small { font-size:.8rem; }
.yh-case-image strong { font-size:clamp(1.3rem,2.6vw,2.6rem); letter-spacing:-.02em; font-weight:400; }
.yh-case-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:clamp(36px,7vw,110px); align-items:start; }
.yh-case-toc { position:sticky; top:35px; display:flex; flex-direction:column; gap:14px; font-size:.875rem; }
.yh-case-toc > span { color:var(--yh-muted); margin-bottom:15px; }
.yh-case-toc a { text-decoration:none; }
.yh-case-toc a:hover { text-decoration:underline; }
.yh-case-content { min-width:0; max-width:850px; }
.yh-case-section { scroll-margin-top:38px; padding-bottom:55px; margin-bottom:45px; border-bottom:1px solid var(--yh-rule); }
.yh-case-section:last-child { border-bottom:0; margin-bottom:0; }
.yh-case-section h2 { font-size:clamp(1.6rem,2.7vw,2.6rem); font-weight:400; letter-spacing:-.035em; line-height:1.3; margin:0 0 28px; }
.yh-case-section p { margin:0 0 22px; font-size:1.0625rem; line-height:1.95; }
.yh-case-workflow { padding:0; margin:0; list-style:none; }
.yh-case-workflow li { display:grid; grid-template-columns:35px minmax(0,1fr); gap:24px; padding:0 0 28px; }
.yh-case-step { color:var(--yh-muted); font-size:.875rem; padding-top:3px; }
.yh-case-workflow h3,.yh-case-publications h3 { font-size:1.15rem; font-weight:400; margin:0 0 13px; }
.yh-case-workflow p { color:var(--yh-muted); margin:0; }
.yh-case-publications { margin-top:36px; }
.yh-case-publications article { padding:22px 0; border-top:1px solid var(--yh-rule); }
.yh-case-publications h4 { font-size:1.1rem; font-weight:400; line-height:1.6; margin:0 0 14px; }
.yh-case-publications p,.yh-case-publications > small { font-size:.875rem; color:var(--yh-muted); }
.yh-case-publications a { font-size:.875rem; }
.yh-case-next { border-top:1px solid var(--yh-rule); padding-top:32px; margin-top:25px; display:flex; justify-content:space-between; align-items:flex-start; gap:40px; }
.yh-case-next a { text-decoration:none; font-size:.875rem; }
.yh-case-next a:last-child { max-width:55%; text-align:right; }
.yh-case-next small { display:block; color:var(--yh-muted); margin-bottom:10px; }
.yh-case-next strong { font-weight:400; font-size:clamp(1.1rem,2vw,1.8rem); }
@media(max-width:800px) { .yh-case-layout { grid-template-columns:minmax(0,1fr); gap:38px; } .yh-case-toc { position:static; flex-direction:row; flex-wrap:wrap; gap:14px 24px; padding-bottom:26px; border-bottom:1px solid var(--yh-rule); } .yh-case-toc > span { flex-basis:100%; margin:0; } .yh-case-media-wide { margin-bottom:48px; } }
@media(max-width:580px) { .yh-case-back { margin-bottom:40px; } .yh-case-deck { font-size:1.15rem; } .yh-case-facts { grid-template-columns:1fr 1fr; gap:28px 22px; } .yh-case-facts > div:nth-child(2) { grid-column:1/-1; grid-row:2; } .yh-case-image { padding:20px; } .yh-case-media-wide .yh-case-image { aspect-ratio:16/10; } .yh-case-workflow li { gap:12px; grid-template-columns:28px minmax(0,1fr); } .yh-case-next { flex-direction:column; gap:30px; } .yh-case-next a:last-child { max-width:100%; text-align:left; } .yh-summary-actions { gap:15px; } .yh-detail:not(.yh-project) > summary { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .yh-case-link { transition:none; } }
@media print { .yh-case-toc,.yh-case-back,.yh-case-next { display:none; } .yh-case-layout { display:block; } .yh-case-section { break-inside:avoid; } }

/* mobile.css */
/* Picture elements preserve the sizing of the existing image containers. */
.yh-project-illustrated > picture,.yh-publication-image > picture { display:contents; }
/* One frosted surface per moving pane on phones; avoid overlapping GPU filters. */
@media (max-width:800px), (pointer:coarse) {
  .yh-nav::before { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .yh-hero-keyword::before { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .yh-hero-keyword:not(:focus-visible)::before { opacity:0; }
  .yh-topic-dialog::backdrop { -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .yh-glass-panel,.yh-city-detail-card { -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .yh-hero-keywords > span { will-change:auto; }
  .yh-coverflow-photo { box-shadow:0 7px 14px -9px #0008; }
  .yh-coverflow-photo img { transition:opacity .15s; }
  .yh-main[data-view="home"] { overflow-anchor:none; }
}
/* Embedded browsers may ship an older engine than their host application. */
@supports not (color:light-dark(black,white)) {
  html,body { background:#f4f3f0; }
  #yufan-site { --yh-front:#f4f3f0; --yh-back:#e7e4dd; --yh-fold:#d7d5cf; --yh-edge:#aaa8a2; --yh-ink:#191919; --yh-muted:#68665f; --yh-rule:#d3d1ca; --yh-shadow:#3c392e2b; --yh-accent:#4166d9; --yh-land:#dededb; --yh-coast:#aaaba9; --yh-grid:#bdbfba; }
  #yufan-site[data-theme="dark"] { --yh-front:#181818; --yh-back:#24231f; --yh-fold:#3e3d39; --yh-edge:#090909; --yh-ink:#f0efea; --yh-muted:#b5b3aa; --yh-rule:#3e3d38; --yh-shadow:#00000070; --yh-accent:#91a9ff; --yh-land:#353638; --yh-coast:#727472; --yh-grid:#484b48; }
  .yh-cover-transition { --cover-frost:#f4f3f0b8; }
  #yufan-site[data-theme="dark"] .yh-cover-transition { --cover-frost:#181818b8; }
  .yh-welcome { color:var(--yh-ink); }
  .yh-welcome-top,.yh-welcome-bottom { color:var(--yh-muted); }
  .yh-welcome-row::before { background:var(--yh-accent); }
  .yh-glass-panel { background:var(--yh-front); }
}