/* 手机端独立覆盖层：桌面端沿用原有画布与滚动时间轴。 */
.graphic-mobile-toggle{display:none}
@media(max-width:600px){
  html{scroll-padding-top:80px}
  body{overflow-wrap:break-word}
  .navigation{padding:calc(8px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 8px; background:linear-gradient(#05090bf5,#05090bdf)}
  .navigation nav{gap:20px}
  .navigation nav a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;letter-spacing:.5px}
  .opening{height:100svh;min-height:620px}
  .opening-copy{top:27%;padding:0 24px}
  .opening-copy .opening-title{font-size:clamp(34px,9.5vw,54px);margin:20px 0}
  .opening-lead .lead-cn{font-size:15px;line-height:1.9;max-width:320px;margin:auto;text-wrap:balance}
  .opening-sub{max-width:340px;padding-top:18px}
  .opening-sub .sub-cn{font-size:12px;line-height:1.9;text-wrap:balance}
  .opening-sub .sub-en{display:none}
  .opening-actions-single{width:max-content;max-width:100%;margin-top:24px}
  .opening-actions-single .opening-cta{min-height:44px;padding:12px 24px}
  .opening-tags{top:calc(28px + env(safe-area-inset-top));gap:10px;padding:0 20px}
  .opening-tags .tags-cn{white-space:normal;font-size:10px;letter-spacing:.08em;text-align:center;line-height:1.8}
  .enter{bottom:calc(24px + env(safe-area-inset-bottom))}
  #workflow{padding-top:44px}
  /* 浏览器缩放或横竖屏切换后，隐藏已挂载的桌面演示。 */
  #workflow .playground-story,#workflow .workflow-playground{display:none}
  #workflow>.chapter-heading{display:block}
  .workflow-method{margin-top:24px}
  #graphic{height:auto;padding:44px 6% 56px}
  .graphic-pin{position:relative;top:auto;height:auto;display:flex;flex-direction:column;gap:28px;isolation:auto}
  .graphic-info{position:relative;inset:auto;width:100%;margin:0;padding:0;opacity:1;translate:none;transform:none!important}
  #graphic .graphic-info .chapter-heading{max-width:340px}
  .graphic-intro{font-size:18px;line-height:1.8;margin:12px 0 20px}
  .graphic-index{grid-template-columns:1fr 1fr;gap:14px 18px}
  #graphic .orbit-anchor{font-size:11px;gap:7px}
  #graphic .orbit-anchor small{font-size:9px;letter-spacing:0}
  .graphic-status,.graphic-progress,.graphic-scroll-note,.graphic-floating-title,.graphic-rows{display:none!important}
  .graphic-space{position:relative;inset:auto;width:100%;height:auto;opacity:1;clip-path:none!important}
  .graphic-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;width:100%!important;height:auto!important;transform:none!important;pointer-events:auto}
  .galaxy-slot{position:relative;inset:auto;min-width:0;width:auto!important;height:auto!important;transform:none!important;opacity:1!important}
  .galaxy-breath{height:auto;animation:none}
  .galaxy-slot .galaxy-card,.galaxy-slot.is-active .galaxy-card{position:relative;inset:auto;width:100%!important;height:auto!important;transform:none!important;filter:none;display:flex;flex-direction:column;padding:0;border:0;background:none;box-shadow:none}
  .galaxy-card img{width:100%;height:210px;object-fit:contain;background:#0d151a;border-radius:8px;filter:none}
  #graphic .galaxy-caption{position:static;transform:none;white-space:normal;width:100%;max-width:100%;display:block!important;padding:10px 0 0;font-size:11px;line-height:1.7;color:#b7c5ca;opacity:1;text-align:left}
  .galaxy-slot.is-neighbor .galaxy-card{filter:none}
  #motion{--film-inset:6%;--film-height:auto;padding-top:36px}
  #motion .motion-card{width:84vw;flex:0 0 84vw}
  #motion .motion-media{width:100%;height:auto;aspect-ratio:4/3;background:#0d151a}
  .motion-media video{object-fit:contain}
  .motion-preview,.motion-controls button,.look-controls button{min-width:44px;min-height:44px}
  .motion-track{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .motion-card{scroll-snap-align:start}
  #about .experience-intro{font-size:14px;line-height:1.9}
  .experience-links a{min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  .experience-body,.experience-list,.capability-list{min-width:0}
  .experience-item p{overflow-wrap:anywhere}
  .stats-final .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-label{overflow-wrap:anywhere}
  .experience-contact{padding-bottom:env(safe-area-inset-bottom)}
  .experience-contact .footer-bottom{font-size:10px;letter-spacing:0;gap:8px}
  #project-dialog{width:100%;max-width:100%;max-height:100dvh;border-radius:0}
  #project-dialog .dialog-close,.quick-view .dialog-close{width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;padding:0;border-radius:50%;font-size:0;color:transparent;flex:none}
  #project-dialog .dialog-close::after,.quick-view .dialog-close::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;font:26px/1 Arial;color:#fff}
  #motion-player{max-width:94vw;max-height:86dvh}
  #motion-player>video{max-height:86dvh}
}
@media(max-width:360px){
  .opening-copy{padding:0 18px}
  .opening-lead .lead-cn{font-size:14px}
  .graphic-index{gap:12px}
  .galaxy-card img{height:180px}
}
@media(max-width:600px) and (max-height:650px){
  .opening-copy{top:22%}
  .enter .scroll-line{height:24px}
}

@media(max-width:600px){
  .graphic-slot,.graphic-info{translate:none}
  .graphic-entered .galaxy-slot .galaxy-card img{animation:none;opacity:1;transform:none;filter:none}
  .workflow-method.has-look-gallery h3{font-size:27px;line-height:1.5}
}

@media(max-width:600px){
  #graphic .galaxy-slot{order:var(--mobile-order)}
  #graphic:not(.mobile-expanded) .galaxy-slot.mobile-extra{display:none}
  #graphic .graphic-index .orbit-anchor{order:var(--mobile-order)}
  .graphic-mobile-toggle{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;margin:28px 0 0;padding:12px 20px;border:1px solid #4c626f;border-radius:999px;background:#111c23;color:#dbe6ec;font-size:13px;letter-spacing:1px}
  .graphic-mobile-toggle::after{content:'＋';font-size:20px}
  .graphic-mobile-toggle[aria-expanded="true"]::after{content:'−'}
}