:root{
  --yl-deep:#0B3B52;
  --yl-blue:#145C7A;
  --yl-mid:#2C7C9A;
  --yl-mist:#DCEFF5;
  --yl-orange:#F28A2E;
  --yl-orange-soft:#FFD9A8;
  --yl-coral:#E45B4F;
  --yl-porcelain:#F7F4EC;
  --yl-ink:#14212B;
  --yl-line:#8AA6B2;
  --yl-font-head:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --yl-font-body:"Noto Sans SC","PingFang SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --yl-font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --yl-max:1240px;
  --yl-pad:clamp(16px,4vw,40px);
  --yl-radius-lg:28px;
  --yl-radius-md:18px;
  --yl-radius-sm:12px;
  --yl-radius-pill:999px;
  --yl-shadow-soft:0 18px 44px rgba(11,59,82,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;background:var(--yl-porcelain);color:var(--yl-ink);font-family:var(--yl-font-body);font-size:17px;line-height:1.8;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--yl-blue)}
img,svg{max-width:100%}
button{font-family:inherit}
h1,h2,h3,h4,h5{font-family:var(--yl-font-head);font-weight:900;line-height:1.16;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.6rem,3vw,2.25rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
:focus-visible{outline:3px solid var(--yl-orange);outline-offset:2px;border-radius:4px}

/* ===== skip link ===== */
.skip-link{position:fixed;top:10px;left:10px;z-index:130;transform:translateY(-180%);background:var(--yl-porcelain);color:var(--yl-ink);padding:10px 18px;border-radius:var(--yl-radius-pill);font-size:14px;font-weight:700;text-decoration:none;box-shadow:var(--yl-shadow-soft);transition:transform .18s ease}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0)}

/* ===== reading progress ===== */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:110;background:rgba(20,33,43,.10);pointer-events:none}
.read-progress__bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yl-orange),var(--yl-coral));transition:width .12s linear}

/* ===== header ===== */
.site-header{
  position:sticky;top:0;z-index:100;
  --header-hairline:rgba(247,244,236,.42);
  --header-soft:rgba(247,244,236,.12);
  color:var(--yl-porcelain);
  background:linear-gradient(180deg,rgba(11,59,82,.94) 0%,rgba(11,59,82,.72) 58%,rgba(11,59,82,.12) 100%);
  transition:background-color .28s ease,color .28s ease,box-shadow .28s ease;
}
.site-header.is-solid{
  --header-hairline:rgba(20,92,122,.26);
  --header-soft:rgba(20,92,122,.07);
  color:var(--yl-ink);
  background:rgba(247,244,236,.97);
  box-shadow:0 1px 0 rgba(20,33,43,.10),0 12px 30px rgba(11,59,82,.08);
}
.header-shell{position:relative;z-index:7;display:flex;align-items:center;gap:clamp(12px,2vw,28px);max-width:var(--yl-max);margin-inline:auto;padding:14px var(--yl-pad)}
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;color:inherit;text-decoration:none}
.brand__mark{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:linear-gradient(140deg,var(--yl-orange),var(--yl-coral));box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.brand__mark-core{position:relative;width:17px;height:17px;border-radius:5px;background:var(--yl-porcelain);transform:rotate(45deg)}
.brand__mark-core::before{content:"";position:absolute;inset:5px;border-radius:2px;background:var(--yl-deep)}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__name{font-family:var(--yl-font-head);font-weight:900;font-size:20px;letter-spacing:.06em}
.brand__line{font-family:var(--yl-font-mono);font-size:11px;letter-spacing:.12em;opacity:.78;margin-top:2px}
.primary-nav{display:flex;align-items:center;justify-content:space-between;gap:clamp(10px,2vw,26px);flex:1 1 auto;min-width:0}
.nav-list{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav-list__item{list-style:none}
.nav-link{display:inline-block;padding:8px 13px;border-radius:var(--yl-radius-pill);font-size:15px;font-weight:600;letter-spacing:.02em;color:inherit;text-decoration:none;transition:background-color .18s ease,color .18s ease}
.nav-link:hover{background:rgba(242,138,46,.20)}
.nav-link[aria-current="page"]{background:var(--yl-orange);color:var(--yl-deep);font-weight:800}
.nav-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.quick-link{display:inline-flex;align-items:center;padding:7px 13px;border-radius:var(--yl-radius-pill);border:1px solid var(--header-hairline);color:inherit;font-size:13px;font-weight:600;letter-spacing:.03em;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.quick-link:hover{background:var(--header-soft);transform:translateY(-1px)}
.quick-link--action{background:var(--yl-coral);border-color:transparent;color:#fff}
.quick-link--action:hover{background:#d24b3f}
.nav-toggle{display:none;align-items:center;gap:9px;padding:8px 14px;border-radius:var(--yl-radius-pill);border:1px solid var(--header-hairline);background:transparent;color:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;cursor:pointer;position:relative;z-index:12}
.nav-toggle__bars{display:grid;gap:3px;width:16px}
.nav-toggle__bars span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-toggle__label{white-space:nowrap}

/* ===== device band ===== */
.device-band{position:relative;z-index:6;background:var(--header-soft);border-top:1px solid var(--header-hairline);color:inherit;transition:background-color .28s ease}
.site-header.is-solid .device-band{background:var(--yl-mist)}
.device-band__inner{display:flex;align-items:center;gap:14px;max-width:var(--yl-max);margin-inline:auto;padding:8px var(--yl-pad);overflow-x:auto;scrollbar-width:none}
.device-band__inner::-webkit-scrollbar{display:none}
.device-band__label{flex:0 0 auto;font-family:var(--yl-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.82}
.device-band__rail{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.device-chip{appearance:none;padding:6px 16px;border-radius:var(--yl-radius-pill);border:1px solid var(--header-hairline);background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.device-chip:hover{background:var(--header-soft)}
.device-chip[aria-pressed="true"]{background:var(--yl-orange);border-color:var(--yl-orange);color:var(--yl-deep)}
.device-band__note{flex:1 1 auto;min-width:0;font-size:12px;letter-spacing:.03em;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header-rule{height:4px;background:linear-gradient(90deg,var(--yl-blue) 0 34%,var(--yl-orange) 34% 50%,var(--yl-coral) 50% 62%,var(--yl-mist) 62% 100%)}

/* ===== footer ===== */
.site-footer{position:relative;overflow:hidden;background:var(--yl-ink);color:var(--yl-porcelain)}
.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--yl-blue) 0 32%,var(--yl-orange) 32% 48%,var(--yl-coral) 48% 60%,var(--yl-mid) 60% 100%)}
.site-footer::after{content:"";position:absolute;right:-90px;top:48px;width:320px;height:320px;border-radius:50%;background:repeating-linear-gradient(135deg,rgba(220,239,245,.07) 0 10px,transparent 10px 26px);pointer-events:none}
.footer-top{position:relative;z-index:1;padding-block:clamp(46px,6vw,80px) clamp(30px,4vw,48px)}
.footer-grid{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.3fr;gap:clamp(24px,3vw,48px)}
.footer-brand__mark{display:inline-block;font-family:var(--yl-font-head);font-size:clamp(25px,2.8vw,33px);font-weight:900;letter-spacing:.05em;color:var(--yl-porcelain);text-decoration:none}
.footer-brand__line{margin-top:12px;max-width:26ch;font-size:14px;line-height:1.7;letter-spacing:.03em;color:rgba(247,244,236,.68)}
.footer-brand .btn{margin-top:20px}
.footer-col__title{margin-bottom:14px;font-family:var(--yl-font-mono);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--yl-orange)}
.footer-list{display:grid;gap:10px;font-size:15px;line-height:1.7;color:rgba(247,244,236,.86)}
.footer-list__item{list-style:none;word-break:break-word}
.footer-list a{color:inherit;text-decoration:none;box-shadow:inset 0 -1px 0 transparent;transition:color .18s ease,box-shadow .18s ease}
.footer-list a:hover{color:var(--yl-orange-soft);box-shadow:inset 0 -1px 0 var(--yl-orange)}
.footer-meta{display:block;font-family:var(--yl-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--yl-line)}
.footer-rule{position:relative;z-index:1;width:calc(100% - var(--yl-pad)*2);max-width:var(--yl-max);margin-inline:auto;height:1px;background:rgba(247,244,236,.16)}
.footer-bottom{position:relative;z-index:1;padding-block:20px 30px}
.footer-bottom__inner{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;font-size:13px;letter-spacing:.04em;color:rgba(247,244,236,.66)}
.footer-copy{font-family:var(--yl-font-mono);letter-spacing:.06em}
.footer-icp{font-family:var(--yl-font-mono);color:rgba(247,244,236,.52)}
.footer-legal{display:flex;flex-wrap:wrap;gap:16px}
.footer-legal a{color:inherit;text-decoration:none;transition:color .18s ease}
.footer-legal a:hover{color:var(--yl-orange-soft)}
.to-top{margin-left:auto;padding:8px 16px;border-radius:var(--yl-radius-pill);border:1px solid rgba(247,244,236,.26);background:rgba(247,244,236,.10);color:var(--yl-porcelain);font-size:12px;font-weight:700;letter-spacing:.08em;cursor:pointer;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.to-top:hover{background:var(--yl-orange);color:var(--yl-deep);transform:translateY(-1px)}

/* ===== layout & shared blocks ===== */
.container{width:100%;max-width:var(--yl-max);margin-inline:auto;padding-inline:var(--yl-pad)}
.container--narrow{max-width:780px}
.section{padding-block:clamp(48px,7vw,96px)}
.section--tight{padding-block:clamp(28px,4vw,52px)}
.section--deep{background:var(--yl-deep);color:var(--yl-porcelain)}
.section--mist{background:var(--yl-mist)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--yl-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--yl-blue)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--yl-orange)}
.section--deep .eyebrow{color:var(--yl-orange-soft)}
.exhibit{display:inline-block;padding-left:12px;border-left:3px solid var(--yl-orange);font-family:var(--yl-font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--yl-blue)}
.lede{max-width:60ch;font-size:clamp(16px,1.9vw,20px);line-height:1.75;color:#3C5059}
.section--deep .lede{color:rgba(247,244,236,.82)}
.divider{height:1px;background:rgba(20,33,43,.12);border:0}
.grid{display:grid;gap:clamp(16px,2.4vw,32px)}
.grid--split{grid-template-columns:minmax(0,1.65fr) minmax(0,.9fr)}
.grid--rail{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__num{font-family:var(--yl-font-mono);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:700;line-height:1;color:var(--yl-blue)}
.stat__label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yl-line)}
.panel{background:#fff;border-radius:var(--yl-radius-lg);padding:clamp(20px,3vw,34px);box-shadow:var(--yl-shadow-soft)}
.panel--mist{background:var(--yl-mist);box-shadow:none}
.panel--deep{background:var(--yl-deep);color:var(--yl-porcelain);box-shadow:none}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em;color:var(--yl-line)}
.crumbs__item{list-style:none}
.crumbs a{color:var(--yl-blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs__sep{opacity:.6}
.crumbs__item[aria-current="page"]{color:var(--yl-ink);font-weight:600}
.prose{max-width:70ch;font-size:17px;line-height:1.85}
.prose > * + *{margin-top:1.1em}
.prose h2{margin-top:1.8em;font-size:clamp(1.4rem,2.4vw,1.9rem)}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{list-style:disc;margin-top:.4em}
.prose a{color:var(--yl-blue)}
.scroll-strip{display:flex;gap:clamp(12px,2vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.scroll-strip > *{flex:0 0 auto;scroll-snap-align:start}
.scroll-strip::-webkit-scrollbar{height:6px}
.scroll-strip::-webkit-scrollbar-thumb{background:rgba(20,92,122,.28);border-radius:3px}

/* ===== buttons & tags ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:var(--yl-radius-pill);border:1px solid transparent;font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--action{background:var(--yl-coral);color:#fff}
.btn--action:hover{background:#d24b3f}
.btn--primary{background:var(--yl-blue);color:var(--yl-porcelain)}
.btn--primary:hover{background:var(--yl-deep)}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--yl-blue)}
.btn--quiet{background:rgba(20,92,122,.09);color:var(--yl-blue)}
.tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--yl-radius-pill);font-size:12px;font-weight:600;letter-spacing:.06em;background:var(--yl-mist);color:var(--yl-blue)}
.tag--orange{background:var(--yl-orange-soft);color:#7A3E06}
.tag--coral{background:var(--yl-coral);color:#fff}

/* ===== media containers ===== */
.media-frame{position:relative;display:block;overflow:hidden;aspect-ratio:16 / 9;border-radius:var(--yl-radius-lg);background-color:var(--yl-mist);background-image:repeating-linear-gradient(135deg,rgba(20,92,122,.08) 0 12px,transparent 12px 28px)}
.media-frame--wide{aspect-ratio:21 / 9}
.media-frame--tall{aspect-ratio:4 / 5}
.media-frame--square{aspect-ratio:1 / 1}
.media-frame > img,.media-frame__img{display:block;width:100%;height:100%;object-fit:cover}
.media-frame__label{position:absolute;top:14px;left:14px;padding:4px 12px;border-radius:var(--yl-radius-pill);background:rgba(247,244,236,.94);color:var(--yl-deep);font-family:var(--yl-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.media-frame__caption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;font-size:13px;letter-spacing:.03em;color:var(--yl-porcelain);background:linear-gradient(0deg,rgba(11,59,82,.80),rgba(11,59,82,0))}

/* ===== responsive ===== */
@media (max-width:1120px){
  .nav-link{font-size:14px;padding:7px 10px}
  .quick-link{font-size:12px;padding:6px 10px}
  .brand__line{display:none}
}
@media (max-width:1024px){
  .grid--split,.grid--rail{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:960px){
  html{scroll-padding-top:110px}
  .site-header{background:linear-gradient(180deg,rgba(11,59,82,.97) 0%,rgba(11,59,82,.90) 100%)}
  .header-shell{flex-wrap:wrap;gap:10px;padding-block:12px}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .primary-nav{order:3;flex:1 1 100%;display:block;max-height:0;overflow:hidden;opacity:0;padding:0;transition:max-height .32s ease,opacity .24s ease;visibility:hidden}
  .primary-nav[data-open]{max-height:74vh;overflow-y:auto;opacity:1;visibility:visible;padding-block:14px 4px}
  .nav-list{flex-direction:column;align-items:stretch;gap:4px}
  .nav-link{display:block;padding:12px 16px;font-size:17px;border-radius:14px}
  .nav-tools{flex-direction:column;align-items:stretch;margin-top:14px;padding-top:14px;border-top:1px solid rgba(247,244,236,.18)}
  .quick-link{justify-content:center;padding:11px 16px;font-size:14px}
  .site-header.is-solid .nav-tools{border-top-color:rgba(20,92,122,.18)}
  .device-band__note{display:none}
  .device-band__inner{padding-block:7px}
}
@media (max-width:720px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom__inner{flex-direction:column;align-items:flex-start;gap:10px}
  .to-top{margin-left:0}
}
@media (max-width:560px){
  .brand__mark{width:38px;height:38px;border-radius:13px}
  .brand__name{font-size:18px}
  .nav-toggle__label{display:none}
  .footer-list{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}