@media (min-width: 921px) {
  .paperclip {
    display: none;
  }

  .site-nav {
    width: calc(100vw - 80px);
  }

  .work-shell {
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 36px;
    padding-top: 124px;
    width: calc(100vw - 80px);
  }

  .project-card {
    width: 333px;
    height: 432px;
    gap: 18px;
    padding: 27px;
    transition-duration: .64s, .2s, .2s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1), ease, ease;
    will-change: transform;
  }

  .home.spread .project-card {
    transition-delay: 0s;
  }

  .project-card img,
  .preview-card img {
    border-radius: 14px;
  }

  .project-card:first-child {
    --spread-x: -504px;
    --spread-y: 83px;
  }

  .project-card:nth-child(2) {
    --spread-x: -257px;
    --spread-y: 43px;
  }

  .project-card:nth-child(3) {
    --spread-x: 0px;
    --spread-y: 31px;
  }

  .project-card:nth-child(4) {
    --spread-x: 257px;
    --spread-y: 45px;
  }

  .project-card:nth-child(5) {
    --spread-x: 504px;
    --spread-y: 85px;
  }

  .work-sidebar,
  .work-frame {
    height: calc(100svh - 156px);
  }

  .work-sidebar {
    transform: translateY(-15px);
  }

  .work-frame {
    background: #18191B;
    border-radius: 42px;
    padding: 0;
  }

  .work-frame::before,
  .work-frame::after {
    display: none;
  }

  .case-study,
  .case-study.expiry-case,
  .case-study.image-case {
    background: #18191B;
    border-radius: 42px;
    padding-right: 0;
  }

  .case-study {
    padding-top: 48px;
  }

  .case-study.expiry-case,
  .case-study.image-case {
    padding-top: 62px;
  }

  .case-study > *,
  .case-study.expiry-case > *,
  .case-study.image-case > *,
  .case-study.image-case > .image-case-gallery {
    width: min(1140px, 100% - 100px);
  }

  .case-scrollbar {
    right: 0;
  }

  .case-hero h1 {
    font-size: clamp(24px, calc(3.05vw - 8px), 34px);
  }

  .expiry-hero h1 {
    font-size: clamp(24px, calc(3.05vw - 8px), 34px);
  }

  .toc {
    padding-left: 0;
  }

  .toc-track {
    gap: 38px;
  }

  .toc button {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
  }

  .toc button::before {
    grid-row: 1 / span 2;
    width: 42px;
  }

  .toc strong {
    grid-area: 2 / 2;
    font-size: clamp(16px, calc(1.15vw - 1px), 21px);
    font-weight: 400;
    transform: none !important;
  }

  .toc small {
    color: inherit;
    display: block;
    grid-area: 1 / 2;
    font-size: 0;
    font-weight: 500;
    line-height: 1.35;
    opacity: .78;
  }

  .toc small,
  .toc strong {
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
  }

  .toc button.active small,
  .toc button.active strong,
  .toc button:hover small,
  .toc button:hover strong {
    transform: translate(14px) !important;
  }

  .toc small::before {
    font-size: 12px;
  }

  .toc button[data-project-id="expiry-management"] small::before,
  .toc button[data-project-id="restaurant-booking"] small::before {
    content: "B端/saas";
  }

  .toc button[data-project-id="mellower-coffee"] small::before {
    content: "C端/品牌体验";
  }

  .toc button[data-project-id="china-open"] small::before {
    content: "C端/赛事服务";
  }

  .toc button[data-project-id="wandering-plan"] small::before {
    content: "运营/公益活动";
  }

  .work-logo {
    font-size: clamp(40px, calc(3.1vw - 2px), 54px);
    margin: 64px 0 52px 0;
  }

  .case-meta dt {
    font-size: 11px;
  }

  .expiry-hero dt {
    font-size: 11px;
  }

  .expiry-copy p,
  .expiry-split p,
  .case-intro p,
  .case-section-copy p,
  .expiry-list li,
  .expiry-table th,
  .expiry-table td,
  .expiry-note,
  .process-flow span {
    font-size: 14px;
  }

  .expiry-safety-figure {
    position: relative;
    overflow: visible;
  }

  .expiry-safety-base {
    position: relative;
    z-index: 1;
  }

  .expiry-safety-widgets {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .expiry-safety-widget {
    animation: safetyWidgetFloat 10s ease-in-out infinite;
    animation-delay: calc(var(--widget-index) * 1.25s);
    filter: drop-shadow(0 18px 24px #00000024);
    height: auto;
    max-width: none;
    opacity: 0;
    position: absolute;
    transform-origin: 50% 50%;
    width: var(--widget-width) !important;
  }

  .expiry-safety-widget.is-count {
    --widget-width: 20%;
    left: 6%;
    top: 18%;
  }

  .expiry-safety-widget.is-rate {
    --widget-width: 20%;
    left: 53%;
    top: 2%;
  }

  .expiry-safety-widget.is-amount {
    --widget-width: 20%;
    right: 8%;
    top: 13%;
  }

  .expiry-safety-widget.is-reason {
    --widget-width: 30%;
    left: 11%;
    bottom: 13%;
  }

  .expiry-safety-widget.is-trend {
    --widget-width: 30%;
    right: 6%;
    bottom: 22%;
  }

  @keyframes safetyWidgetFloat {
    0%,
    7% {
      opacity: 0;
      transform: translateY(18px) scale(.94);
    }

    14%,
    32% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    43%,
    100% {
      opacity: 0;
      transform: translateY(-16px) scale(.98);
    }
  }

  @keyframes workSidebarEnter {
    0% {
      opacity: 0;
      transform: translateY(3px);
    }

    to {
      opacity: 1;
      transform: translateY(-15px);
    }
  }
}

@media (max-width: 920px) {
  .paperclip {
    display: none;
  }
}

body::before {
  content: "Loading";
  align-items: center;
  background: #000;
  color: #ffffff8a;
  display: flex;
  font-size: 13px;
  inset: 0;
  justify-content: center;
  letter-spacing: .08em;
  opacity: 1;
  pointer-events: none;
  position: fixed;
  text-transform: uppercase;
  transition: opacity .28s ease, visibility .28s ease;
  visibility: visible;
  z-index: 9999;
}

.app-loaded body::before {
  opacity: 0;
  visibility: hidden;
}

.asset-loading {
  background: linear-gradient(135deg, #202124 0%, #2a2b2d 48%, #1f2022 100%) !important;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.asset-loading::before {
  animation: assetShimmer 1.6s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
  content: "";
  inset: 0 auto 0 -50%;
  pointer-events: none;
  position: absolute;
  transform: skewX(-16deg) translate3d(0, 0, 0);
  width: 50%;
  z-index: 3;
}

.asset-loading img {
  opacity: 0;
}

.asset-loaded img {
  opacity: 1;
  transition: opacity .36s ease;
}

@keyframes assetShimmer {
  to {
    transform: skewX(-16deg) translate3d(300%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .asset-loading::before {
    animation: none;
  }
}