/* ==================== 统一按钮 / 线性箭头 ==================== */
:root {
  --control-line:rgba(213,225,244,.18);
  --control-line-hover:rgba(200,245,62,.55);
  --control-surface:rgba(19,25,37,.72);
  --control-ink:#eef2f7;
  --control-radius:999px;
  --control-ease:cubic-bezier(.2,.75,.2,1);
  --control-duration:260ms;
  --control-icon-size:18px;
}
.ui-icon { display:inline-block;width:var(--control-icon-size);height:var(--control-icon-size);flex:none;vertical-align:middle;pointer-events:none; }
:where(a,button,summary,[tabindex]):focus-visible { outline:2px solid var(--color-accent);outline-offset:5px; }
.button-label { position:relative;z-index:1; }
.button-icon { display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden; }

/* 首屏主按钮：独立图标区、细边缘高光、低强度环境阴影。 */
.enter-gallery {
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;
  gap:32px;min-width:198px;height:62px;padding:7px 8px 7px 26px;
  border:1px solid #e8ff9b99;border-radius:var(--control-radius);
  background:linear-gradient(160deg,#dcff78 0%,var(--color-accent) 70%,#bce936 100%);
  color:#18210b;font-size:14px;font-weight:600;line-height:1;letter-spacing:1px;
  box-shadow:inset 0 1px 0 #f5ffcbb3,0 10px 28px #0003,0 0 24px #c8f53e12;
  transition:transform var(--control-duration) var(--control-ease),box-shadow var(--control-duration),border-color var(--control-duration);
  isolation:isolate;overflow:hidden;
}
.enter-gallery::before { content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,#ffffff66 48%,transparent 75%);transform:translateX(-140%);transition:transform 650ms var(--control-ease);pointer-events:none; }
.enter-gallery .button-icon { width:46px;height:46px;background:#18210b;color:#d5fb6a;box-shadow:inset 0 1px 0 #ffffff21;transition:background var(--control-duration),color var(--control-duration); }
.enter-gallery .ui-icon { width:20px;height:20px; }
.enter-gallery:is(:hover,:focus-visible) { transform:translateY(-2px);border-color:#f1ffbf;box-shadow:inset 0 1px 0 #fff9,0 14px 34px #0004,0 0 28px #c8f53e22; }
.enter-gallery:is(:hover,:focus-visible)::before { transform:translateX(140%); }
.enter-gallery:is(:hover,:focus-visible) .ui-icon { animation:control-arrow-down 420ms var(--control-ease); }
.enter-gallery:active { transform:translateY(0) scale(.97);box-shadow:inset 0 2px 8px #54731d26; }
@keyframes control-arrow-down { 45%{transform:translateY(26px);opacity:0}46%{transform:translateY(-26px);opacity:0}100%{transform:none;opacity:1} }

/* 原编号胶囊导航保留结构，统一边缘、焦点和按压反馈。 */
.capsule-nav { border-color:var(--control-line);box-shadow:inset 0 1px 0 #ffffff0a,0 12px 36px #0003; }
.capsule-nav a { font-weight:500;transition:color 180ms,transform 180ms var(--control-ease); }
.capsule-nav a:active { transform:scale(.95); }
.capsule-indicator { box-shadow:inset 0 1px 0 #ecffad66; }
.directory-toggle { min-height:44px;padding:10px 14px 10px 18px;gap:16px;border-color:var(--control-line);background:var(--control-surface);box-shadow:inset 0 1px 0 #ffffff0a;transition:background var(--control-duration),border-color var(--control-duration); }
.directory-toggle>span { color:var(--control-ink); }
.directory-toggle .menu-icon { width:20px;height:20px;color:var(--color-accent); }
.menu-icon path { transition:transform var(--control-duration) var(--control-ease);transform-box:fill-box;transform-origin:center; }
.directory-toggle[aria-expanded="true"] .menu-icon path:first-child { transform:translateY(4px) rotate(45deg); }
.directory-toggle[aria-expanded="true"] .menu-icon path:last-child { transform:translateY(-4px) rotate(-45deg); }
.directory-toggle:hover { border-color:var(--control-line-hover);background:#192231; }
.directory-toggle:active { transform:scale(.97); }

/* 成组翻页按钮：左右独立触发，统一 44px 点击区域。 */
.lane-buttons { gap:3px;padding:3px;border:1px solid var(--control-line);border-radius:var(--control-radius);background:linear-gradient(145deg,#19213099,#0c121acc);box-shadow:inset 0 1px 0 #ffffff08; }
.lane-buttons button { display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent;border-radius:50%;background:transparent;color:#b4bfce;transition:color var(--control-duration),background var(--control-duration),border-color var(--control-duration),transform 160ms; }
.lane-buttons button .ui-icon { transition:transform var(--control-duration) var(--control-ease); }
.lane-buttons button:hover { color:#19220d;background:var(--color-accent);border-color:#dcff8b; }
.lane-buttons button:first-child:hover .ui-icon { transform:translateX(-2px); }
.lane-buttons button:last-child:hover .ui-icon { transform:translateX(2px); }
.lane-buttons button:active { transform:scale(.9); }

/* 简历下载和次级目录入口。 */
.profile-download,.profile-more {
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;
  padding:7px 8px 7px 15px;border:1px solid var(--control-line);border-radius:var(--control-radius);
  background:#ffffff04;font-size:11px;color:#c6cfdb;text-decoration:none;
  transition:background var(--control-duration),border-color var(--control-duration),color var(--control-duration),transform 160ms;
}
.profile-download { margin-top:24px; }
.profile-download .button-icon,.profile-more .button-icon { color:var(--color-accent);background:#c8f53e0d;border:1px solid #c8f53e26;transition:background var(--control-duration),color var(--control-duration); }
.profile-download span { font-size:inherit; }
.profile-download:hover span { transform:none; }
.profile-download:hover,.profile-more:hover { color:#f1f6e5;background:#c8f53e09;border-color:var(--control-line-hover); }
.profile-download:hover .button-icon,.profile-more:hover .button-icon { color:#17220a;background:var(--color-accent); }
.profile-download .ui-icon,.profile-more .ui-icon { width:16px;height:16px;transition:transform var(--control-duration); }
.profile-download:hover .ui-icon { transform:translate(1px,-1px); }
.profile-more:hover .ui-icon { transform:translateY(2px); }
.profile-download:active,.profile-more:active { transform:scale(.98); }
.profile-projects>a:not(.profile-more) { border-radius:8px;transition:background var(--control-duration); }
.profile-projects>a:not(.profile-more):hover { background:#c8f53e06; }
.profile-projects a div>span .ui-icon { width:12px;height:12px;margin-left:4px;transition:transform var(--control-duration); }
.profile-projects a:hover div>span .ui-icon { transform:translate(2px,-2px); }

/* 经历使用真正的展开箭头，开合方向一目了然。 */
.career-item summary>i { width:28px;height:28px;border-color:var(--control-line);background:#ffffff05;color:#a6b5c8;transition:color var(--control-duration),transform var(--control-duration),background var(--control-duration); }
.career-item summary>i .ui-icon { width:15px;height:15px; }
.career-item[open] summary>i { transform:rotate(180deg);background:var(--color-accent);color:#18210b;border-color:transparent; }
.career-item summary:hover>i { border-color:var(--control-line-hover);color:var(--color-accent); }
.career-item[open] summary:hover>i { color:#18210b; }
.career-item summary:active>i { scale:.92; }

/* 作品入口与放大提示采用同一套细线斜箭头。 */
.chapter-panel>i { display:grid;place-items:center;width:34px;height:34px;border:1px solid #ffffff35;border-radius:50%;background:#0c14266b;backdrop-filter:blur(8px);opacity:.85;color:#d7e0e9;transition:background var(--control-duration),color var(--control-duration),transform var(--control-duration),opacity var(--control-duration); }
.chapter-panel>i .ui-icon { width:16px;height:16px; }
.chapter-panel:hover>i,.chapter-panel:focus-visible>i { background:var(--color-accent);border-color:transparent;color:#152006;opacity:1;transform:translate(2px,-2px); }
.page-artwork>span { align-items:center; }
.page-artwork>span>i { display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff40;border-radius:50%;background:#0a101866;color:#e8f4d2;backdrop-filter:blur(8px); }
.page-artwork>span>i .ui-icon { width:16px;height:16px; }
.page-artwork:hover>span>i { background:var(--color-accent);border-color:transparent;color:#152006; }
.page-gallery-foot>span:last-child { display:inline-flex;align-items:center;gap:7px; }
.page-gallery-foot .ui-icon { width:12px;height:12px; }

/* 图片关闭与返回顶部：避免字体符号在不同系统中粗细不一。 */
.art-close,.gallery-back-top { display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--control-line);border-radius:50%;background:#111a29cc;color:#d9e3ed;backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ffffff12,0 8px 24px #0003;transition:transform var(--control-duration),background var(--control-duration),color var(--control-duration),border-color var(--control-duration); }
.art-close .ui-icon { width:20px;height:20px;transition:transform var(--control-duration); }
.art-close:hover { background:var(--color-accent);border-color:#dfff9b;color:#152006;transform:none; }
.art-close:hover .ui-icon { transform:rotate(90deg); }
.gallery-back-top { border-color:#c8f53e59;color:var(--color-accent); }
.gallery-back-top:hover { background:var(--color-accent);color:#152006;transform:translateY(-3px); }
.art-close:active,.gallery-back-top:active { scale:1;transform:scale(.92); }
.gallery-back-top { opacity:0;visibility:hidden;pointer-events:none;translate:0 8px;transition:opacity var(--control-duration),visibility var(--control-duration),translate var(--control-duration),transform var(--control-duration),background var(--control-duration),color var(--control-duration); }
.gallery-back-top.is-visible { opacity:1;visibility:visible;pointer-events:auto;translate:0; }
.gallery-back-top .ui-icon { width:19px;height:19px; }
.contact-badge-mail b { display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #c8f53e33;border-radius:50%;background:#c8f53e0c;transition:background var(--control-duration),color var(--control-duration); }
.contact-badge-mail b .ui-icon { width:14px;height:14px;transition:transform var(--control-duration); }
.contact-badge-mail:hover b { color:#17220a;background:var(--color-accent); }
.contact-badge-mail:hover .ui-icon { transform:translate(1px,-1px); }
.contact-badge-phone { text-underline-offset:4px;transition:color var(--control-duration); }
.contact-badge-phone:hover { text-decoration:underline; }
.footer-back-top { display:inline-flex;align-items:center;gap:10px;padding-block:10px; }
.footer-back-top .ui-icon { width:15px;height:15px;transition:transform var(--control-duration); }
.footer-back-top:hover .ui-icon { transform:translateY(-3px); }

@media(max-width:650px) {
  .enter-gallery { min-width:184px;height:58px;padding:6px 7px 6px 23px;font-size:13px;gap:28px; }
  .enter-gallery .button-icon { width:44px;height:44px; }
  .lane-buttons { gap:1px;padding:2px; }
  .lane-buttons button { width:44px;height:44px; }
  .page-gallery-heading { row-gap:16px; }
  .page-gallery-heading h2 { font-size:17px; }
  .gallery-back-top { width:44px;height:44px;right:16px;bottom:18px; }
  .art-close { width:44px;height:44px; }
  .profile-download,.profile-more { min-height:48px;font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .enter-gallery,.enter-gallery::before,.ui-icon,.lane-buttons button,.button-icon,.menu-icon path,.art-close,.gallery-back-top,.career-item summary>i { animation:none!important;transition:none!important; }
}