/* 业务工具箱与持续在场的联系入口，沿用黑白橙红与炭黑纹理。 */
a,button { -webkit-tap-highlight-color: transparent; }
.skills-section { background: radial-gradient(ellipse at 18% 44%,rgba(255,99,60,.025),transparent 65%),linear-gradient(118deg,#191b1f,#1e2024 67%,#191b1e); border-bottom: 1px solid rgba(255,255,255,.075); }
.skills-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 38px; max-width: none; }
.skills-heading h2 { max-width: 780px; }
.skills-heading .skills-heading-note { margin-bottom: 5px; padding-left: 24px; border-left: 1px solid #41464f; color: #a9afb9; font-size: 12px; line-height: 1.95; flex-shrink: 0; }
.skills-showcase { margin-top: 42px; border: 1px solid #3d424b; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg,rgba(255,255,255,.018),transparent 60%),#202329; box-shadow: 0 25px 65px rgba(0,0,0,.13); }
.skill-showcase-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 26px; border-bottom: 1px solid #363c45; color: #b8bfca; font-size: 10px; letter-spacing: .04em; }
.skill-showcase-caption > span:first-child { display: flex; align-items: center; gap: 9px; }
.skill-showcase-caption i { width: 5px; height: 5px; border-radius: 50%; background: #ff875f; box-shadow: 0 0 11px rgba(255,99,60,.22); }
.skill-hover-hint { color: #929ba9; }
.skill-board { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; padding: 27px 26px 29px; }
.skill-column { min-width: 0; }
.skill-column > header { display: flex; align-items: baseline; gap: 10px; padding: 0 1px 20px; }
.skill-column > header > span { color: #ff9678; font-size: 10px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.skill-column h3 { font-size: 16px; font-weight: 550; line-height: 1.5; letter-spacing: .01em; }
.skill-column > header p { margin-top: 5px; color: #909aaa; font-size: 10px; line-height: 1.8; }
.skill-column-cards { display: grid; gap: 10px; }
.skill-card { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 76px; padding: 13px 28px 13px 17px; border: 1px solid #424a56; border-radius: 5px; background: linear-gradient(120deg,rgba(255,255,255,.022),transparent),#282c34; text-align: left; cursor: pointer; transition: border-color .22s,background .22s,transform .22s,box-shadow .22s; scroll-margin-top: 110px; }
.skill-card-name { display: block; font-size: 15px; color: #e6e8ec; font-weight: 500; line-height: 1.55; text-wrap: balance; }
.skill-card-question { display: block; margin-top: 5px; font-size: 10px; line-height: 1.7; color: #939eae; }
.skill-card-arrow { position: absolute; top: 15px; right: 12px; color: #788699; font-size: 13px; transition: color .2s,transform .2s; }
.skill-card[aria-pressed="true"] { background: linear-gradient(130deg,rgba(255,99,60,.06),transparent),#302c2d; border-color: rgba(255,151,119,.75); box-shadow: inset 3px 0 #ff825b,0 7px 20px rgba(0,0,0,.08); }
.skill-card[aria-pressed="true"] .skill-card-name { color: #fff2ec; }
.skill-card[aria-pressed="true"] .skill-card-question { color: #c8aaa0; }
.skill-card[aria-pressed="true"] .skill-card-arrow { color: #ffad94; transform: translate(1px,-1px); }
@media (hover:hover) and (pointer:fine) { .skill-card:hover { transform: translateY(-2px); border-color: #a16c5c; } }
.skill-detail { display: grid; grid-template-columns: 1fr 1.25fr; gap: 50px; border-top: 1px solid #424852; padding: 30px 31px; background: linear-gradient(117deg,rgba(255,99,60,.035),transparent 55%),#1c1f24; }
.skill-detail-title > p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; font-size: 10px; color: #a4adbb; line-height: 1.7; }
.skill-detail code,.skill-routing-note code { color: #d7b4a8; font-size: 10px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .02em; }
.skill-detail h3 { font-size: 27px; font-weight: 550; letter-spacing: -.015em; line-height: 1.5; margin-top: 10px; }
.skill-detail-title #skill-detail-example { font-size: 13px; color: #bec4ce; line-height: 1.9; margin-top: 12px; max-width: 360px; text-wrap: pretty; }
.skill-detail-actions { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: baseline; margin-top: 22px; font-size: 10px; color: #e8b5a4; }
.skill-detail-actions button { padding: 0; border: 0; color: inherit; background: none; cursor: pointer; font-size: inherit; }
.skill-detail-actions span { margin-left: 5px; }
.skill-detail-steps { display: grid; gap: 16px; margin: 0; }
.skill-detail-steps > div { display: grid; grid-template-columns: 86px 1fr; gap: 13px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.08); }
.skill-detail-steps > div:last-child { padding-bottom: 0; border-bottom: 0; }
.skill-detail dt { padding-top: 2px; font-size: 10px; color: #8794a6; letter-spacing: .015em; line-height: 1.9; }
.skill-detail dd { margin: 0; font-size: 12px; color: #c4cbd5; line-height: 1.95; text-wrap: pretty; }
.skill-routing-note { display: flex; flex-wrap: wrap; gap: 8px 15px; align-items: baseline; padding: 16px 27px; border-top: 1px solid #373e49; color: #969fae; background: #1b1e23; font-size: 10px; line-height: 1.9; }
.skill-routing-note strong { color: #c9cfd8; font-weight: 500; }
.skill-routing-note a { color: #f2b49e; margin-left: auto; white-space: nowrap; }
.skill-nojs { color: #c4cbd5; font-size: 12px; padding: 20px 27px; }
.skill-install-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; margin-top: 29px; padding: 29px 32px; border: 1px solid #4c4441; border-left: 2px solid #bb6a4e; border-radius: 5px; background: linear-gradient(120deg,rgba(255,99,60,.04),transparent),#212226; scroll-margin-top: 100px; }
.skill-install-panel .eyebrow { margin-bottom: 10px; font-size: 10px; }
.skill-install-panel h3 { margin-bottom: 10px; font-size: 24px; font-weight: 550; line-height: 1.5; }
.skill-install-panel #skill-install-description { max-width: 620px; font-size: 12px; color: #a8adb7; line-height: 1.9; text-wrap: pretty; }
.skill-install-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.skill-install-actions .button { font-size: 12px; min-height: 43px; padding: 10px 18px; }
.skill-install-actions .button span { margin-left: 16px; }
.skill-install-actions button { cursor: pointer; }
.skill-install-actions [hidden], .skill-install-prompt[hidden] { display: none; }
.skill-install-prompt { width: 100%; border-top: 1px solid #414248; padding-top: 22px; font-size: 11px; color: #a4acb9; }
.skill-install-prompt pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; color: #d6dae2; font-size: 12px; line-height: 1.9; padding: 18px; background: #191b20; border: 1px solid #3d424c; border-radius: 4px; max-height: 260px; overflow: auto; }
.diagram-skill-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 13px 35px; background: rgba(0,0,0,.11); border-bottom: 1px solid rgba(255,255,255,.07); }
.diagram-skill-links > span { font-size: 10px; color: #939ca9; }
#diagram-related-skills { display: flex; flex-wrap: wrap; gap: 15px; }
#diagram-related-skills a { font-size: 11px; color: #e3ae9a; }
#diagram-related-skills a > span { margin-left: 7px; color: #be8773; }
.skill-quicklook[hidden] { display: none; }
.skill-quicklook { position: fixed; z-index: 72; width: 330px; max-width: calc(100vw - 28px); padding: 22px 24px; border: 1px solid #7f6456; border-radius: 7px; background: linear-gradient(120deg,rgba(255,135,90,.035),transparent),#25292f; box-shadow: 0 15px 55px rgba(0,0,0,.42); pointer-events: none; }
.skill-quicklook-kicker { color: #fcaf92; font-size: 9px; letter-spacing: .07em; margin-bottom: 10px; }
.skill-quicklook h3 { font-size: 20px; line-height: 1.5; font-weight: 550; }
.skill-quicklook > p:not(.skill-quicklook-kicker) { color: #939eaf; font-size: 11px; margin-top: 6px; }
.skill-quicklook dl { display: grid; gap: 13px; margin: 17px 0 0; }
.skill-quicklook dl > div { display: grid; grid-template-columns: 53px 1fr; gap: 11px; }
.skill-quicklook dt { font-size: 9px; color: #96a1b2; line-height: 2; padding-top: 1px; }
.skill-quicklook dd { margin: 0; font-size: 11px; color: #d0d5dd; line-height: 1.85; text-wrap: balance; line-break: strict; }
.skill-quicklook[data-mobile="true"] { top: auto !important; left: 14px !important; bottom: calc(72px + env(safe-area-inset-bottom,0px)); width: calc(100vw - 28px); padding: 20px 22px; }
.skill-quicklook-close { display: none; }
.skill-quicklook[data-mobile="true"] .skill-quicklook-close { position: absolute; top: 14px; right: 17px; display: flex; align-items: center; gap: 6px; padding: 5px 0 5px 8px; border: 0; background: transparent; color: #c6c9d0; font-size: 11px; pointer-events: auto; cursor: pointer; }
.skill-quicklook-close span { font-size: 21px; line-height: 1; font-weight: 300; }

/* 联系入口只由访客主动展开，二维码使用完整原图。 */
.contact-dock { position: fixed; right: 15px; bottom: 23vh; z-index: 60; }
.contact-dock-trigger { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 75px; height: 88px; color: #e6c3b6; border: 1px solid #76594d; border-radius: 7px; background: linear-gradient(145deg,rgba(255,122,80,.08),transparent),rgba(32,32,35,.96); box-shadow: 0 8px 30px rgba(0,0,0,.24); backdrop-filter: blur(12px); }
.contact-dock-trigger > svg { width: 26px; height: 26px; stroke: #ffc1a8; stroke-width: 1.4; fill: none; }
.contact-dock-trigger circle { fill: #ffc1a8; stroke: none; }
.contact-dock-trigger > span:not(.contact-dock-note) { font-size: 11px; letter-spacing: .04em; font-weight: 500; line-height: 1.4; }
.contact-dock-note { display: none; position: absolute; right: calc(100% + 13px); top: 28px; padding: 7px 11px; background: #25272c; border: 1px solid #51555d; border-radius: 4px; font-size: 10px; white-space: nowrap; color: #cdd1d8; }
@media (hover:hover) { .contact-dock-trigger:hover { border-color: #c4866e; background-color: #29262a; }.contact-dock-trigger:hover .contact-dock-note { display: block; } }
.contact-dock-trigger:focus-visible .contact-dock-note { display: block; }
body.contact-open { overflow: hidden; }
.contact-dialog { position: fixed; width: 430px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 34px); margin: auto; padding: 33px 35px 27px; border: 1px solid #61564f; border-radius: 11px; color: #f2f1ef; background: radial-gradient(ellipse at 50% 0,rgba(255,121,79,.045),transparent 65%),#202226; box-shadow: 0 30px 130px rgba(0,0,0,.7); text-align: center; overflow: auto; }
.contact-dialog::backdrop { background: rgba(9,10,12,.8); backdrop-filter: blur(7px); }
.contact-dialog-close { display: grid; place-items: center; position: absolute; right: 12px; top: 11px; width: 32px; height: 32px; border: 0; background: transparent; color: #babdc4; font-size: 27px; font-weight: 300; cursor: pointer; }
.contact-dialog-brand { display: flex; justify-content: center; align-items: baseline; gap: 14px; color: #ff9978; font-size: 11px; letter-spacing: .05em; }
.contact-dialog-brand span { font-size: 9px; color: #8993a2; letter-spacing: .025em; }
.contact-dialog h2 { font-size: 28px; font-weight: 600; line-height: 1.5; margin: 22px 0 13px; letter-spacing: -.02em; }
.contact-dialog-intro { color: #aab0ba; font-size: 12px; line-height: 1.95; }
.contact-dialog figure { margin: 24px auto 0; }
.contact-dialog figure a { display: block; width: 240px; height: 240px; margin: 0 auto; padding: 13px; background: #fff; border-radius: 6px; }
.contact-dialog figure img { width: 100%; height: 100%; object-fit: contain; }
.contact-dialog figcaption { color: #d2d5db; font-size: 11px; line-height: 1.9; margin-top: 14px; }
.contact-dialog-more { display: inline-block; margin-top: 21px; font-size: 10px; color: #a2a9b5; padding: 6px; }
.contact-dialog-more span { margin-left: 11px; }
.site-action-status { position: fixed; left: 50%; bottom: calc(30px + env(safe-area-inset-bottom,0px)); transform: translate(-50%,12px); padding: 10px 18px; border: 1px solid #616672; border-radius: 5px; background: #292e37; color: #e1e5ec; font-size: 12px; line-height: 1.8; z-index: 120; pointer-events: none; opacity: 0; transition: opacity .2s,transform .2s; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
.site-action-status.is-visible { opacity: 1; transform: translate(-50%,0); }
.contact-dialog[open] { animation: contact-enter .22s ease-out both; }
@keyframes contact-enter { from { opacity: .3; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1280px) { .contact-dock { right: 19px; bottom: calc(22px + env(safe-area-inset-bottom,0px)); }.contact-dock-trigger { flex-direction: row; width: auto; height: 45px; padding: 0 16px 0 12px; gap: 9px; border-radius: 99px; }.contact-dock-trigger > svg { width: 22px; height: 22px; }.contact-dock-note { top: -38px; right: 0; } }
@media (max-width: 1050px) { .nav-links { gap: 15px; font-size: 12px; }.skill-board { gap: 12px; padding: 23px 20px 24px; }.skill-column > header { gap: 7px; }.skill-column h3 { font-size: 14px; }.skill-column > header p { font-size: 9px; }.skill-card { padding-left: 13px; }.skill-card-name { font-size: 13px; }.skill-card-question { font-size: 9px; }.skills-heading .skills-heading-note { display: none; } }
@media (max-width: 850px) { .skill-board { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 29px 18px; }.skill-card-name { font-size: 15px; }.skill-card-question { font-size: 10px; }.skill-column h3 { font-size: 16px; }.skill-column > header p { font-size: 10px; }.skill-column > header { padding-bottom: 15px; }.skill-detail { gap: 30px; }.skill-detail-steps > div { grid-template-columns: 1fr; gap: 3px; }.skill-install-panel { gap: 24px; }.skill-install-actions { width: 100%; }.skill-detail h3 { font-size: 25px; } }
@media (max-width: 720px) {
  .skills-heading { display: block; }.skills-showcase { margin-top: 29px; }.skill-showcase-caption { align-items: flex-start; padding: 17px 19px; gap: 11px; font-size: 9px; flex-direction: column; }.skill-hover-hint { font-size: 9px; }
  .skill-board { padding: 23px 17px 25px; gap: 25px 12px; }.skill-column > header { gap: 7px; align-items: flex-start; }.skill-column > header > span { font-size: 9px; padding-top: 3px; }.skill-column h3 { font-size: 14px; }.skill-column > header p { font-size: 9px; max-width: 125px; }.skill-column-cards { gap: 8px; }
  .skill-card { min-height: 78px; padding: 13px 22px 13px 11px; }.skill-card-name { font-size: 15px; }.skill-card-question { font-size: 12px; line-height: 1.7; }.skill-card-arrow { right: 9px; top: 13px; font-size: 11px; }
  .skill-detail { grid-template-columns: 1fr; padding: 25px 23px; gap: 28px; }.skill-detail-title #skill-detail-example { font-size: 12px; }.skill-detail-title > p:first-child { font-size: 9px; }.skill-detail h3 { margin-top: 9px; }.skill-detail-actions { gap: 13px 19px; margin-top: 18px; }.skill-detail-steps { gap: 15px; }.skill-detail-steps > div { grid-template-columns: 75px 1fr; gap: 11px; }.skill-detail dd { font-size: 11px; }.skill-detail dt { font-size: 9px; }
  .skill-routing-note { padding: 17px 20px; gap: 7px 10px; font-size: 9px; }.skill-routing-note strong { width: 100%; }.skill-routing-note a { margin-left: 0; padding-top: 4px; }.skill-routing-note code { font-size: 9px; }
  .skill-install-panel { margin-top: 21px; padding: 25px 23px; gap: 21px; }.skill-install-panel h3 { font-size: 23px; }.skill-install-panel #skill-install-description { font-size: 11px; }.skill-install-actions { flex-wrap: wrap; }.skill-install-actions .button { font-size: 11px; padding-inline: 17px; }.skill-install-prompt pre { padding: 13px; font-size: 11px; }
  .diagram-skill-links { padding: 13px 23px; gap: 8px 16px; }.diagram-skill-links > span { font-size: 9px; }#diagram-related-skills a { font-size: 10px; }
  .contact-dock { right: 14px; bottom: calc(15px + env(safe-area-inset-bottom,0px)); }.contact-dock-trigger { height: 43px; padding: 0 14px 0 11px; }.contact-dock-trigger > span:not(.contact-dock-note) { font-size: 10px; }.contact-dock-note { display: none !important; }
  .skill-quicklook-kicker { font-size: 11px; }.skill-quicklook > p:not(.skill-quicklook-kicker) { font-size: 12px; }.skill-quicklook dt { font-size: 11px; }.skill-quicklook dd { font-size: 13px; line-height: 1.85; }.skill-quicklook dl > div { grid-template-columns: 58px 1fr; gap: 12px; }.skill-detail dd { font-size: 12px; }.skill-detail dt { font-size: 11px; }
  .site-footer { padding-bottom: 82px; }.contact-dialog { padding: 28px 23px 22px; }.contact-dialog h2 { font-size: 26px; margin-top: 21px; }.contact-dialog figure a { width: min(240px,100%); height: auto; aspect-ratio: 1; }.contact-dialog-intro { font-size: 11px; }.contact-dialog figcaption { font-size: 10px; }.site-action-status { bottom: 75px; font-size: 11px; }
}
@media (prefers-reduced-motion:reduce) { .contact-dialog[open] { animation: none; }.skill-card,.site-action-status { transition: none; } }