.project-pain-gone { --ink:#25322b; --muted-green:#718879; --bamboo:#6e9c5c; --peach:#ef8c6c; background:#F7F6E1; color:var(--ink); }
.project-pain-gone .project-header { position:fixed; background:linear-gradient(#F7F6E1 0%,rgba(247,246,225,.88) 72%,transparent); }.project-pain-gone .project-header .logo img { filter:brightness(0) saturate(100%); }.project-pain-gone .language-toggle { color:var(--ink); background:none; }
.project-section { width:min(100% - 2 * var(--pad),1450px); margin:0 auto; }.project-intro { min-height:100svh; padding:22vh 0 12vh; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; column-gap:clamp(42px,8vw,150px); }.project-title { margin:0; color:var(--ink); font-size:clamp(68px,9vw,145px); line-height:.69; font-weight:800; letter-spacing:-.095em; }.project-title span { color:var(--bamboo); }.intro-copy h1 { margin:32px 0 0; color:#64806d; font-size:clamp(23px,2.55vw,40px); line-height:1.12; font-weight:500; letter-spacing:-.045em; }.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:42px; }.project-tags span { padding:8px 11px; border-radius:999px; color:#466541; background:#dcebd4; font-size:12px; }.intro-question { margin:0 0 13px; color:var(--bamboo); font-size:clamp(17px,1.45vw,23px); font-weight:600; }.intro-lede,.section-copy,.strategy-copy p,.flow-copy p,.prototype-copy p { margin:0; color:#506457; font-size:clamp(14px,1.07vw,17px); line-height:1.82; white-space:pre-line; }.intro-products { grid-column:1/-1; align-self:end; display:flex; justify-content:center; align-items:end; gap:clamp(30px,7vw,120px); margin-top:8vh; height:min(43vh,480px); overflow:hidden; }.intro-products img { display:block; width:min(32%,350px); height:auto; object-fit:contain; filter:drop-shadow(0 20px 24px rgba(71,65,55,.15)); }.intro-products img:first-child { transform:translateY(8%); }
.section-label { display:flex; align-items:baseline; align-content:start; flex-wrap:wrap; gap:7px; color:var(--ink); font-size:clamp(18px,1.6vw,26px); line-height:1.08; letter-spacing:-.045em; }.section-label b { color:#a5b7a3; font-weight:400; }.section-label span:last-child { color:#78927c; }.case-section,.prototype-section { padding:14vh 0 6vh; display:grid; grid-template-columns:minmax(190px,1fr) minmax(0,2.25fr); column-gap:clamp(42px,7vw,150px); }.section-body,.prototype-copy { grid-column:2; }.challenges-section,.strategy-section,.flow-section { padding:14vh 0 7vh; }.challenges-section>.section-label,.strategy-section>.section-label,.prototype-section>.section-label { margin-bottom:7vh; }.challenge-copy { max-width:850px; margin:0 0 5vh; color:#506457; font-size:clamp(14px,1.07vw,17px); line-height:1.82; }.challenge-copy p { margin:0; }.challenge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,70px); }.challenge-grid article { border-top:1px solid #b8cdb5; padding-top:18px; }.challenge-grid b { color:var(--peach); font-size:13px; }.challenge-grid h2 { margin:26px 0 13px; color:var(--ink); font-size:clamp(22px,2.1vw,34px); line-height:1.1; letter-spacing:-.05em; font-weight:600; }.challenge-grid p { margin:0; color:#5a705e; font-size:14px; line-height:1.75; }.strategy-copy { width:min(74%,900px); margin:0 0 5vh; }.language-image { display:block; width:100%; height:auto; }.image-en { display:none; }.project-pain-gone[data-language="en"] .image-zh { display:none; }.project-pain-gone[data-language="en"] .image-en { display:block; }.strategy-figure { width:min(92%,1200px); margin:0 auto; }.flow-copy { width:min(74%,900px); margin:0 0 5vh; }.flow-figure { width:min(92%,1200px); margin:0 auto; }
.prototype-gallery { grid-column:1/-1; --slide-width:clamp(250px,29vw,430px); position:relative; width:min(100%,1100px); height:calc(var(--slide-width) * .675 + 58px); margin:10vh auto 0; isolation:isolate; }.prototype-slide { position:absolute; top:0; left:50%; z-index:1; width:var(--slide-width); height:calc(var(--slide-width) * .625); padding:0; border:0; border-radius:14px; overflow:hidden; background:transparent; box-shadow:0 20px 40px rgba(53,54,44,.16); cursor:pointer; transform:translateX(-50%) scale(.76); opacity:.18; transition:transform .45s cubic-bezier(.22,.8,.2,1),opacity .3s,filter .3s; }.prototype-slide img { display:block; width:100%; height:100%; object-fit:contain; }.prototype-slide.is-active { z-index:4; transform:translateX(-50%); opacity:1; }.prototype-slide.is-before { z-index:3; transform:translateX(calc(-50% - var(--slide-width) * .66)) scale(.82); opacity:.38; filter:saturate(.7); }.prototype-slide.is-after { z-index:2; transform:translateX(calc(-50% + var(--slide-width) * .66)) scale(.82); opacity:.38; filter:saturate(.7); }.prototype-slide:focus-visible { outline:3px solid var(--peach); outline-offset:5px; }.gallery-dots { position:absolute; z-index:5; bottom:0; left:50%; display:flex; gap:7px; transform:translateX(-50%); }.gallery-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#c6c9bf; cursor:pointer; }.gallery-dots button.is-active { background:var(--peach); transform:scale(1.2); }
.demo-section { padding:8vh 0 20vh; }.demo-heading { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(37,50,43,.18); color:#526a59; font-size:13px; letter-spacing:.12em; }.demo-heading span:last-child { color:#78927c; font-size:10px; text-transform:uppercase; }.demo-frame { position:relative; margin-top:38px; background:transparent; }.demo-frame video { display:block; width:100%; max-height:78vh; object-fit:contain; background:transparent; }.sound-button { position:absolute; left:50%; bottom:38px; transform:translateX(-50%); padding:13px 18px; border:1px solid rgba(255,255,255,.62); border-radius:999px; background:rgba(38,57,41,.68); color:#fff; font:500 13px "Alibaba PuHuiTi",sans-serif; cursor:pointer; backdrop-filter:blur(8px); }.sound-button.is-hidden { opacity:0; pointer-events:none; }.cursor-panda { position:fixed; z-index:30; top:0; left:0; width:clamp(56px,5.5vw,96px); opacity:0; pointer-events:none; will-change:transform,opacity; transition:opacity .2s; }.cursor-panda.is-visible { opacity:.94; }.cursor-panda img { display:block; width:100%; height:auto; }
@media(max-width:720px){.project-intro,.case-section,.prototype-section{display:block}.project-intro{padding-top:145px;min-height:auto}.project-title{font-size:20vw}.intro-description{margin-top:10vh}.intro-products{height:34vh;margin-top:12vh;gap:18px}.intro-products img{width:42%}.case-section,.challenges-section,.strategy-section,.flow-section,.prototype-section{padding-top:11vh}.section-body,.prototype-copy{margin-top:38px}.challenge-grid{grid-template-columns:1fr;gap:42px}.strategy-copy,.flow-copy{width:100%;margin-bottom:9vh}.strategy-figure,.flow-figure{width:92%}.prototype-gallery{--slide-width:66vw;height:calc(var(--slide-width) * .675 + 50px);margin-top:10vh}.prototype-slide{height:calc(var(--slide-width) * .625)}.demo-section{padding-top:8vh}.sound-button{bottom:22px}.cursor-panda{display:none}}
@media(prefers-reduced-motion:reduce){.prototype-slide{transition:none}}
/* Layout corrections */
.project-pain-gone .intro-products {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-content: flex-start;
  gap: clamp(12px,2vw,30px);
  width: 100%;
  height: auto;
  min-height: 0;
  margin-top: 0;
  transform: translateY(-78px);
  overflow: visible;
}
.project-pain-gone .intro-products img {
  width: min(38%,220px);
  max-height: none;
  filter: none;
}
.project-pain-gone .project-title {
  line-height: .78;
}
.project-pain-gone .intro-question {
  display: none;
}
.project-pain-gone .strategy-section {
  display: grid;
  grid-template-columns: minmax(190px,1fr) minmax(0,2.25fr);
  column-gap: clamp(42px,7vw,150px);
}
.project-pain-gone .strategy-section > .section-label {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-bottom: 0;
}
.project-pain-gone .strategy-copy,
.project-pain-gone .strategy-section > .strategy-figure {
  grid-column: 2;
}
.project-pain-gone .strategy-copy {
  width: 100%;
  margin-bottom: clamp(26px,4vw,52px);
}
.project-pain-gone .strategy-figure {
  grid-column: 1 / -1 !important;
  width: min(92%,1200px);
  margin: 0 auto;
}
.project-pain-gone .flow-section {
  display: grid;
  grid-template-columns: minmax(190px,1fr) minmax(0,2.25fr);
  column-gap: clamp(42px,7vw,150px);
}
.project-pain-gone .flow-copy {
  grid-column: 2;
  width: 100%;
  margin-bottom: clamp(26px,4vw,52px);
}
.project-pain-gone .flow-section > .section-label {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}
.project-pain-gone .flow-figure {
  grid-column: 1 / -1;
  margin-left: clamp(2%,3vw,48px);
  margin-right: 0;
  transform: translateX(36px);
}

@media(max-width:720px) {
  .project-pain-gone .strategy-section {
    display: block;
  }
  .project-pain-gone .strategy-section > .section-label {
    margin-bottom: 7vh;
  }
  .project-pain-gone .strategy-copy {
    width: 100%;
  }
  .project-pain-gone .intro-products {
    display: flex;
    width: 100%;
    margin-top: 5vh;
    transform: translateY(-46px);
  }
  .project-pain-gone .intro-products img {
    width: 42%;
  }
  .project-pain-gone .flow-section {
    display: block;
  }
  .project-pain-gone .flow-section > .section-label {
    margin-bottom: 7vh;
  }
  .project-pain-gone .flow-copy {
    width: 100%;
  }
  .project-pain-gone .strategy-figure {
    width: 92%;
  }
  .project-pain-gone .flow-figure {
    margin-left: 2%;
    transform: translateX(12px);
  }
}