#resume-panel { width:min(1320px,94vw);height:90dvh;max-height:90dvh;color:#eef2fa;background:#0b1223;border-color:#34415a;overflow-y:auto;scrollbar-gutter:stable;scroll-behavior:auto; }
#resume-panel [hidden] { display:none!important; }
#resume-panel .panel-top { padding:16px 34px;min-height:72px;background:#0b1223;border-color:#27344b; }
#resume-title { font-size:16px;letter-spacing:.06em; }
#resume-panel #work-back { margin-left:auto; }
#resume-panel #work-back:not([hidden]) + #panel-close { margin-left:0; }
.resume-layout { display:grid;grid-template-columns:minmax(225px,29%) minmax(0,1fr);gap:clamp(32px,4vw,60px);padding:32px 42px 60px;align-items:start; }
.experience-sidebar { position:sticky;top:104px; }
.experience-nav { position:relative;display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:32px; }
.experience-nav a { padding:5px 0;color:#8e9eb8;font-size:12px;border-bottom:1px solid transparent; }
.experience-nav a[aria-current] { color:#e1eaff; }
.experience-indicator { position:absolute;top:0;left:0;height:1px;background:#a8c6ff;pointer-events:none;transition:transform .55s cubic-bezier(.22,1,.36,1),width .55s; }
@media(prefers-reduced-motion:reduce) { .experience-indicator { transition:none; } }
.experience-nav a:hover { color:#fff; }
.case-date { font-size:11px;line-height:1.8;color:#9bacc6; }
.case-summary h2 { font-size:clamp(26px,2.5vw,36px);font-weight:500;line-height:1.3;margin:12px 0; }
.case-role { color:#c3d1e7;font-size:14px;line-height:1.9; }
.case-intro { color:#d6dfee;font-size:14px;line-height:1.95;margin-top:25px; }
.case-intro strong { font-weight:500; }
.case-summary ul { padding-left:17px;margin-top:18px;color:#9eafc8;font-size:13px;line-height:1.9; }
.case-summary li + li { margin-top:10px; }
.education-note { border-top:1px solid #27344b;padding-top:22px;margin-top:30px;font-size:11px;line-height:1.9;color:#8395b1; }
.experience-content { min-width:0; }
.case-block { scroll-margin-top:100px; }
.case-block:last-child { min-height:calc(90dvh - 110px); }
.case-block > .case-summary { display:none; }
.case-block + .case-block { margin-top:68px;padding-top:38px;border-top:1px solid #2c3b53; }
.work-section-label { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 18px;margin-bottom:22px; }
.work-section-label h3 { font-size:17px;font-weight:500; }
.work-section-label > span { font-size:11px;color:#8b9db8; }
.work-stack { display:grid;gap:32px; }
.portfolio-work { width:100%;display:block;text-align:left; }
.portfolio-work img { display:block;width:100%;height:auto;border-radius:8px;background:#151e30; }
.work-caption { display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:12px;font-size:13px;color:#d1def1; }
.work-caption small { flex-shrink:0;font-size:11px;color:#8ea3c4; }
.portfolio-work:hover .work-caption { color:#fff; }
.more-works { margin-top:28px; }
.more-works summary,.story-details summary { width:fit-content;padding:12px 0;font-size:13px;color:#c6d9fc; }
.portfolio-pdf { display:block;width:fit-content;margin-top:28px;padding:12px 0;font-size:13px;color:#c6d9fc; }
.case-reflection { margin-top:16px;font-size:13px;line-height:1.95;color:#9eafc8; }
.case-reflection strong { font-weight:500;color:#c3d1e7; }
.more-works[open] .work-stack { margin-top:20px; }
.more-works .when-open,.more-works[open] .when-closed { display:none; }
.more-works[open] .when-open { display:inline; }
.portfolio-download { display:inline-block;color:#96aac9;margin-top:18px;font-size:12px; }
.project-story { padding:24px 0;border-top:1px solid #233149; }
.henghao-project { margin-bottom:44px; }
.henghao-project + .henghao-project { padding-top:32px;border-top:1px solid #27344b; }
#practice > .henghao-project:has(+ .henghao-project) { margin-bottom:20px; }
#practice > .henghao-project + .henghao-project { padding-top:20px; }
.project-heading { margin-bottom:24px; }
.project-heading h4 { font-size:22px;font-weight:500;line-height:1.5; }
.project-heading p { margin-top:10px;font-size:13px;line-height:1.9;color:#a9bad3; }
.project-story h4 { font-size:21px;font-weight:500;line-height:1.5; }
.project-story p,.story-details ul { color:#afbed4;font-size:14px;line-height:1.95;margin-top:14px; }
.story-details ul { padding-left:20px; }
.capability-list > div { padding:20px 0;border-top:1px solid #26354d; }
.capability-list dt { font-size:14px;margin-bottom:9px; }
.capability-list dd { font-size:13px;line-height:1.9;color:#9eafc8; }
.capability-list .app-logos { display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:14px; }
.app-logo { position:relative;display:flex;align-items:flex-start;justify-content:center;width:76px;min-height:84px;padding:8px 0 32px;border:0;border-radius:10px;background:transparent;cursor:pointer; }
.app-logo img { display:block;box-sizing:content-box;width:36px;height:36px;padding:4px;object-fit:contain;background:#fff;border-radius:10px;transition:transform .28s ease; }
.app-name { position:absolute;top:54px;left:0;width:100%;font-size:11px;line-height:1.35;text-align:center;color:#c3d1e7;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .28s ease;pointer-events:none; }
.app-logo:focus-visible { outline:1px solid #a8c6ff;outline-offset:3px; }
.app-logo:focus-visible img { transform:translateY(-6px); }
.app-logo:focus-visible .app-name { opacity:1;transform:translateY(0); }
@media(hover:hover) {
  .app-logo:hover img { transform:translateY(-6px); }
  .app-logo:hover .app-name { opacity:1;transform:translateY(0); }
}
@media(hover:none) {
  .app-logo:focus img { transform:translateY(-6px); }
  .app-logo:focus .app-name { opacity:1;transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce) {
  .app-logo img,.app-name { transition:none; }
}
.resume-contact { margin-top:40px;scroll-margin-top:104px; }
.resume-contact h3 { font-size:24px;font-weight:500; }
.resume-contact > a,.resume-contact .contact-wechat { display:block;margin-top:16px;font-size:14px; }
.resume-contact .contact-email { font-size:clamp(16px,2vw,26px);overflow-wrap:anywhere; }
.resume-actions { display:flex;flex-wrap:wrap;gap:12px;margin-top:26px; }
.resume-actions > *,.viewer-controls button { border:1px solid #405373;border-radius:7px;padding:11px 15px;font-size:12px; }
#feedback { margin-top:18px;font-size:12px;color:#9eafc8; }
.work-viewer { padding:28px 36px 40px; }
.viewer-heading { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px; }
.viewer-heading h2 { font-size:20px;font-weight:500; }
.viewer-heading a { font-size:12px;color:#afc7ef; }
#viewer-image { width:100%;height:auto;display:block;border-radius:8px; }
.viewer-controls { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px; }
.viewer-controls button:disabled { opacity:.35; }
#viewer-count { color:#a9bad2;font-size:12px; }
@media(max-width:820px) {
  #resume-panel { width:96vw;height:94dvh;max-height:94dvh;border-radius:14px; }
  #resume-panel .panel-top { min-height:64px;padding:12px 18px;flex-wrap:nowrap;gap:10px; }
  #resume-title { font-size:14px; }
  #resume-panel .panel-top button { font-size:12px;padding:10px 12px; }
  .resume-layout { display:block;padding:0 22px 44px; }
  .experience-sidebar { top:64px;z-index:4;background:#0b1223;padding:12px 0;border-bottom:1px solid #27344b; }
  .experience-nav { gap:4px 14px;margin:0; }
  #resume-panel .experience-nav a { display:block;font-size:12px;padding:8px 0;min-height:40px; }
  #active-experience,.education-note { display:none; }
  .case-block > .case-summary { display:block;padding:26px 0 28px; }
  .case-summary h2 { font-size:28px; }
  .case-intro { margin-top:16px; }
  .case-summary ul { margin-top:12px; }
  .case-block + .case-block { margin-top:42px;padding-top:0; }
  .work-section-label { margin-bottom:16px; }
  .work-stack { gap:26px; }
  .work-viewer { padding:22px 18px 32px; }
  .viewer-heading h2 { font-size:17px; }
}
@media(max-height:680px) and (min-width:821px) {
  .experience-sidebar { top:92px; }
  .experience-nav { margin-bottom:18px; }
  .case-summary h2 { font-size:25px;margin:8px 0; }
  .case-intro { margin-top:14px;font-size:13px; }
  .case-summary ul { font-size:12px;margin-top:12px; }
  .education-note { margin-top:16px;padding-top:12px; }
}
@media print {
  #space-stage,.cursor-dot,.cursor-ring,.experience-sidebar,.work-viewer { display:none!important; }
  #resume-panel { height:auto;max-height:none;overflow:visible;color:#111;background:white; }
  #resume-overview[hidden] { display:block!important; }
  .resume-layout { display:block;padding:0; }
  .case-block > .case-summary { display:block; }
  .case-summary p,.case-summary ul,.project-story p,.capability-list dd,.work-caption { color:#222; }
  .portfolio-work { break-inside:avoid; }
  .resume-actions { display:none; }
}

/* Continuous original artwork, no gaps between related detail slices. */
.phone-case-project > .work-stack { margin-top:24px; }
.phone-case-project .work-stack { grid-template-columns:repeat(3,minmax(0,1fr)); }
.phone-case-project .portfolio-work > img { aspect-ratio:2 / 1;object-fit:cover;object-position:top;max-height:none; }
.coze-project .portfolio-work > img { object-position:center; }
@media(max-width:540px) {
  .phone-case-project .work-stack { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.joined-art { display:block;width:100%;overflow:hidden; }
.portfolio-work .joined-art img { display:block;width:100%;height:auto;margin:0;border-radius:0; }
#viewer-joined { width:min(100%, 1000px);margin:0 auto; }
#viewer-joined figure { margin:0; }
#viewer-joined img { display:block;width:100%;height:auto; }
#viewer-image[hidden],#viewer-joined[hidden] { display:none; }

/* Compact paired previews; the viewer retains the complete artwork. */
.work-stack { grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;align-items:start; }
.portfolio-work { min-width:0; }
.portfolio-work > img { aspect-ratio:4 / 5;object-fit:contain;max-height:360px;border:1px solid #26354d; }
.portfolio-work .joined-art { aspect-ratio:4 / 5;max-height:360px;border-radius:8px;border:1px solid #26354d;position:relative; }
.portfolio-work .joined-art::after { content:'点击查看完整拼图';position:absolute;bottom:0;left:0;right:0;padding:24px 8px 10px;background:linear-gradient(transparent,rgba(4,9,18,.9));color:#fff;text-align:center;font-size:11px; }
.work-caption { gap:8px;font-size:12px;line-height:1.6;flex-wrap:wrap;margin-top:9px; }
.work-caption small { font-size:10px; }
@media(max-width:540px) {
 .work-stack { gap:20px 12px; }
 .work-caption { display:block;font-size:11px; }
 .work-caption small { display:block;margin-top:3px; }
 .project-heading h4 { font-size:19px; }
}

/* Three compact previews per row in the domestic ecommerce collection. */
#gehong .work-stack { grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px; }
#gehong .portfolio-work > img,
#gehong .portfolio-work .joined-art { aspect-ratio:2 / 1;max-height:none; }
#gehong .portfolio-work > img { object-fit:cover;object-position:top; }
#gehong .work-caption { display:block;font-size:12px;line-height:1.5; }
#gehong .work-caption small { display:block;margin-top:4px; }
#gehong .henghao-project { margin-bottom:26px; }
#gehong .henghao-project + .henghao-project { padding-top:22px; }
#gehong .project-heading { margin-bottom:16px; }
#gehong .project-heading h4 { font-size:18px; }
#gehong .more-works { margin-top:12px; }
#gehong .more-works[open] .work-stack { margin-top:12px; }
@media(max-width:540px) {
  #gehong .work-stack { grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px; }
}

.portfolio-video { display:block;width:100%;aspect-ratio:16 / 9;max-height:440px;object-fit:contain;background:#050a13;border:1px solid #26354d;border-radius:8px; }

.summary-video { margin-top:16px; }
.summary-video .portfolio-video { max-height:180px; }
.summary-video .portfolio-download { margin-top:8px;font-size:11px; }
@media(min-width:821px) {
  .experience-sidebar:has(.summary-video) { top:88px; }
  #active-experience:has(.summary-video) .case-intro { margin-top:16px; }
  #active-experience:has(.summary-video) .case-summary ul { margin-top:12px; }
  #active-experience:has(.summary-video) .case-summary li + li { margin-top:6px; }
}
@media(max-width:820px) {
  .summary-video { max-width:440px; }
  .summary-video .portfolio-video { max-height:248px; }
}

/* Keep the full sidebar reachable within the dialog on shorter screens. */
@media(min-width:821px) {
  .experience-sidebar,
  .experience-sidebar:has(.summary-video) {
    top:88px;
    max-height:calc(90dvh - 112px);
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-width:thin;
    scrollbar-color:#405373 transparent;
    padding-right:8px;
    padding-bottom:12px;
  }
  .experience-sidebar .experience-nav { margin-bottom:24px; }
  .experience-sidebar .education-note { margin-top:22px;padding-top:18px; }
}