/* Static, scoped composition shared by the route and its standalone fallback. */
.cocreate-page{--cocreate-ink:#f7f6fa;--cocreate-muted:#aaa6b2;--cocreate-line:#ffffff21;--cocreate-gutter:clamp(24px,4.1vw,84px);--cocreate-header:86px;margin:0;color:var(--cocreate-ink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;font-size:16px;line-height:1.6;background-color:#121219;background-image:radial-gradient(ellipse 65% 47% at 49% 0,#9182a128,transparent 79%),linear-gradient(116deg,transparent 12%,#aaa0b20c 26%,transparent 56%),radial-gradient(ellipse 55% 32% at 13% 91%,#7f73821a,transparent 76%);background-repeat:no-repeat;overflow-x:clip;scroll-padding-top:calc(var(--cocreate-header) + 20px);color-scheme:dark}
.cocreate-page *{box-sizing:border-box}
.cocreate-page a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.cocreate-page button,.cocreate-page a{touch-action:manipulation}
.cocreate-page a:focus-visible{outline:2px solid #ded8eb;outline-offset:6px}
.cocreate-page h1,.cocreate-page h2,.cocreate-page h3,.cocreate-page p,.cocreate-page figure{margin:0}
.cocreate-page .cocreate-skip{position:absolute;left:16px;top:8px;z-index:100;padding:10px 16px;background:#fff;color:#15131b;transform:translateY(-160%)}
.cocreate-page .cocreate-skip:focus{transform:none}
.cocreate-page .cocreate-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:var(--cocreate-header);padding:18px var(--cocreate-gutter);background:linear-gradient(110deg,#25232ef7,#17171ffb 65%,#13141bfc);border-bottom:1px solid #ffffff1b;isolation:isolate}
.cocreate-page .wordmark{display:inline-flex;align-items:center;gap:18px;font-size:38px;font-weight:900;line-height:1;letter-spacing:-1.9px;white-space:nowrap}
.cocreate-page .wordmark span{font-size:15px;font-weight:400;letter-spacing:2px;border-left:1px solid #ffffff36;padding-left:18px}
.cocreate-page .cocreate-main{max-width:1720px;margin-inline:auto;padding-inline:var(--cocreate-gutter)}
.cocreate-page .cocreate-hero{padding-top:clamp(34px,4.2vw,72px)}
.cocreate-page .cocreate-eyebrow{font-size:10px;font-weight:400;line-height:1.5;letter-spacing:.23em;color:#b1aaba}
.cocreate-page .cocreate-eyebrow>span{margin-inline:13px;color:#5e5869}
.cocreate-page .cocreate-hero-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin:24px 0 42px}
.cocreate-page .cocreate-title-group{min-width:0}
.cocreate-page h1{font-size:clamp(68px,8vw,132px);font-weight:500;letter-spacing:-.06em;line-height:1.14;white-space:nowrap;scroll-margin-top:calc(var(--cocreate-header) + 22px)}
.cocreate-page h1:focus{outline:none}
.cocreate-page .cocreate-title-dot{font-family:Arial,sans-serif;margin-left:.04em;font-weight:400;color:#cfc7dc}
.cocreate-page .cocreate-manifesto{font-size:clamp(16px,1.55vw,23px);letter-spacing:.18em;margin-top:22px;color:#e1dce8}
.cocreate-page .cocreate-introduction{flex:0 1 310px;max-width:320px;padding-bottom:4px;font-size:14px;line-height:1.85;letter-spacing:.045em}
.cocreate-page .cocreate-introduction p:first-child{color:#e6e1ee}
.cocreate-page .cocreate-introduction p+p{margin-top:15px;color:var(--cocreate-muted)}
.cocreate-page .cocreate-film-frame{position:relative;aspect-ratio:3.5/1;overflow:hidden;background:#252328;isolation:isolate}
.cocreate-page .cocreate-film-frame::after{content:"";position:absolute;inset:0;border:1px solid #ffffff15;background:linear-gradient(90deg,#13101929,transparent 44%);pointer-events:none}
.cocreate-page .cocreate-film-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.cocreate-page .cocreate-film-marker{position:absolute;z-index:1;left:26px;bottom:23px;font-size:10px;letter-spacing:.19em;line-height:1.65;color:#fff9;text-shadow:0 1px 8px #0008}
.cocreate-page .cocreate-hero-film figcaption{display:flex;justify-content:space-between;gap:20px;padding-block:14px;font-size:11px;letter-spacing:.08em;color:#9993a1}
.cocreate-page .cocreate-hero-film figcaption span:first-child{color:#c7c1d0}
.cocreate-page .cocreate-practice,.cocreate-page .cocreate-process{display:grid;grid-template-columns:1fr 1.2fr;column-gap:clamp(60px,10vw,170px);padding-block:104px;border-bottom:1px solid var(--cocreate-line)}
.cocreate-page .cocreate-practice{margin-top:12px}
.cocreate-page .cocreate-section-intro h2{margin-top:26px;font-size:clamp(25px,2.6vw,42px);line-height:1.55;font-weight:400;letter-spacing:.025em}
.cocreate-page .cocreate-section-intro>p:last-child{color:var(--cocreate-muted);margin-top:23px;font-size:13px;line-height:1.9;letter-spacing:.04em}
.cocreate-page .cocreate-disciplines{padding-top:5px}
.cocreate-page .cocreate-disciplines p{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:76px;border-bottom:1px solid var(--cocreate-line)}
.cocreate-page .cocreate-disciplines p:first-child{border-top:1px solid var(--cocreate-line)}
.cocreate-page .cocreate-disciplines span{font-size:24px;font-weight:400;letter-spacing:.05em}
.cocreate-page .cocreate-disciplines small{font-size:10px;letter-spacing:.1em;color:#9891a2;white-space:nowrap}
.cocreate-page .cocreate-steps{list-style:none;padding:0;margin:0}
.cocreate-page .cocreate-steps li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:20px;border-bottom:1px solid var(--cocreate-line);padding:31px 0}
.cocreate-page .cocreate-steps li:first-child{padding-top:4px}
.cocreate-page .cocreate-steps li:last-child{border:0;padding-bottom:0}
.cocreate-page .cocreate-step-number{color:#898191;font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums;padding-top:8px}
.cocreate-page .cocreate-steps h3{font-size:23px;line-height:1.6;font-weight:400;letter-spacing:.025em}
.cocreate-page .cocreate-steps p{max-width:440px;font-size:13px;line-height:1.9;color:var(--cocreate-muted);margin-top:11px}
.cocreate-page .cocreate-invitation{position:relative;padding:108px 0 86px}
.cocreate-page .cocreate-invitation h2{font-size:clamp(36px,5.2vw,78px);font-weight:400;letter-spacing:-.02em;line-height:1.4;margin-top:27px}
.cocreate-page .cocreate-invitation-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:42px}
.cocreate-page .cocreate-invitation-bottom p{font-size:13px;color:var(--cocreate-muted);line-height:1.85;letter-spacing:.045em}
.cocreate-page .cocreate-works-link{display:flex;align-items:center;justify-content:space-between;gap:45px;min-height:62px;min-width:254px;padding:12px 24px;border:1px solid #ffffff38;border-radius:2px;background:linear-gradient(125deg,#ffffff12,#ffffff04);font-size:16px;letter-spacing:.045em;transition:background-color .2s,border-color .2s}
.cocreate-page .cocreate-works-link:hover{background-color:#ffffff0c;border-color:#ffffff75}
.cocreate-page .cocreate-works-link span:last-child{font-size:25px;font-family:Arial,sans-serif;font-weight:300;color:#ded6e9}
.cocreate-page .cocreate-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1720px;margin-inline:auto;padding:25px var(--cocreate-gutter) 28px;border-top:1px solid var(--cocreate-line);font-size:11px;letter-spacing:.04em;color:#9f98ab}
.cocreate-page .cocreate-footer>a{padding-block:9px}
@media(min-width:1600px){.cocreate-page .cocreate-introduction{flex-basis:375px;max-width:375px;font-size:16px}}
@media(max-width:980px){.cocreate-page .cocreate-hero-heading{gap:26px}.cocreate-page h1{font-size:8vw}.cocreate-page .cocreate-introduction{flex-basis:255px;font-size:12px}.cocreate-page .cocreate-practice,.cocreate-page .cocreate-process{column-gap:50px;padding-block:78px}.cocreate-page .cocreate-disciplines span{font-size:21px}.cocreate-page .cocreate-disciplines small{font-size:9px}}
@media(max-width:700px){
  .cocreate-page{--cocreate-gutter:24px;--cocreate-header:72px;background-image:radial-gradient(ellipse 130% 30% at 27% 0,#9382a02b,transparent 80%),radial-gradient(ellipse 110% 30% at 20% 87%,#82718717,transparent 78%)}
  .cocreate-page .cocreate-header{min-height:var(--cocreate-header);padding:13px 20px;gap:14px}
  .cocreate-page .wordmark{font-size:28px;letter-spacing:-1.3px;gap:6px;flex-direction:column;align-items:flex-start}
  .cocreate-page .wordmark span{font-size:9px;letter-spacing:2px;padding-left:0;border:0;line-height:1.4}
  .cocreate-page .cocreate-hero{padding-top:39px}
  .cocreate-page .cocreate-eyebrow{font-size:9px;letter-spacing:.17em}
  .cocreate-page .cocreate-eyebrow>span{margin-inline:9px}
  .cocreate-page .cocreate-hero-heading{display:block;margin:26px 0 32px}
  .cocreate-page h1{font-size:clamp(54px,16vw,92px);letter-spacing:-.055em;line-height:1.17}
  .cocreate-page .cocreate-manifesto{font-size:15px;letter-spacing:.13em;margin-top:18px}
  .cocreate-page .cocreate-introduction{max-width:none;margin-top:27px;padding:0;font-size:13px;line-height:1.85}
  .cocreate-page .cocreate-introduction p+p{margin-top:12px}
  .cocreate-page .cocreate-introduction p+p br{display:none}
  .cocreate-page .cocreate-film-frame{aspect-ratio:3/2}
  .cocreate-page .cocreate-film-frame img{object-position:59% 50%}
  .cocreate-page .cocreate-film-marker{left:16px;bottom:15px;font-size:8px;letter-spacing:.15em}
  .cocreate-page .cocreate-hero-film figcaption{padding-top:12px;font-size:9px;letter-spacing:.025em;gap:12px;align-items:flex-start}
  .cocreate-page .cocreate-hero-film figcaption span:last-child{text-align:right;max-width:135px}
  .cocreate-page .cocreate-practice,.cocreate-page .cocreate-process{grid-template-columns:1fr;row-gap:33px;padding-block:60px}
  .cocreate-page .cocreate-practice{margin-top:8px}
  .cocreate-page .cocreate-section-intro h2{font-size:29px;line-height:1.5;margin-top:19px}
  .cocreate-page .cocreate-section-intro>p:last-child{font-size:12px;margin-top:15px}
  .cocreate-page .cocreate-disciplines{padding-top:0}
  .cocreate-page .cocreate-disciplines p{min-height:66px}
  .cocreate-page .cocreate-disciplines span{font-size:21px}
  .cocreate-page .cocreate-disciplines small{font-size:9px}
  .cocreate-page .cocreate-steps li{grid-template-columns:25px minmax(0,1fr);gap:13px;padding-block:26px}
  .cocreate-page .cocreate-steps h3{font-size:21px}
  .cocreate-page .cocreate-steps p{font-size:12px;margin-top:9px}
  .cocreate-page .cocreate-invitation{padding:68px 0 56px}
  .cocreate-page .cocreate-invitation h2{font-size:clamp(29px,8.3vw,46px);line-height:1.5;margin-top:23px}
  .cocreate-page .cocreate-invitation-bottom{display:block;margin-top:25px}
  .cocreate-page .cocreate-invitation-bottom p{font-size:12px}
  .cocreate-page .cocreate-works-link{width:100%;min-width:0;min-height:59px;margin-top:28px;font-size:15px;padding:11px 20px}
  .cocreate-page .cocreate-footer{padding-top:20px;padding-bottom:22px;gap:15px;font-size:10px}
  .cocreate-page .cocreate-footer>span{display:none}
}
@media(max-width:410px){.cocreate-page .wordmark{font-size:26px}.cocreate-page .cocreate-header{padding-inline:20px}.cocreate-page .cocreate-hero-film figcaption{font-size:8px}}
@media(prefers-reduced-motion:reduce){.cocreate-page .cocreate-works-link{transition:none}}

/* Artwork and exact QR share one coordinate system; only the composition crops. */
.cocreate-page .cocreate-contact-jump{display:inline-flex;gap:28px;align-items:center;min-height:44px;margin-top:15px;font-size:14px;border-bottom:1px solid #ffffff45}
.cocreate-page .cocreate-contact{position:relative;isolation:isolate;margin-inline:calc(-1 * var(--cocreate-gutter));padding:0;min-height:clamp(630px,calc(100svh - var(--cocreate-header)),900px);overflow:clip;scroll-margin-top:0;background:#121219}
.cocreate-page .cocreate-contact-copy{position:relative;z-index:2;width:41%;min-height:inherit;margin-left:var(--cocreate-gutter);padding-block:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;pointer-events:none}
.cocreate-page .cocreate-contact-copy a{pointer-events:auto}
.cocreate-page .cocreate-contact h2{font-size:clamp(29px,2.8vw,48px);line-height:1.5;letter-spacing:-.025em;margin-top:24px}
.cocreate-page .cocreate-contact-message{font-size:16px;line-height:1.9;color:#b3b0bc;margin-top:24px}
.cocreate-page .cocreate-contact-action{margin-top:34px}
.cocreate-page .cocreate-scan-label{font-size:18px;letter-spacing:.1em}
.cocreate-page .cocreate-scan-hint{font-size:13px;line-height:1.8;color:#a8a7b2;margin-top:8px}
.cocreate-page .cocreate-save-qr{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;min-height:46px;padding:8px 18px;margin-top:17px;border:1px solid #ffffff38;border-radius:4px;font-size:14px;background:#ffffff08;transition:background-color .2s,border-color .2s}
.cocreate-page .cocreate-save-qr:hover{background:#ffffff15;border-color:#ffffff7a}
.cocreate-page .cocreate-contact-works{display:inline-flex;align-items:center;gap:25px;min-height:44px;margin-top:20px;color:#a8a7b3;font-size:14px}
.cocreate-page .cocreate-contact-works:hover{color:#fff}
.cocreate-page .cocreate-contact-visual{position:absolute;inset:0;z-index:1;opacity:1;transform:none;transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .7s ease;mask-image:linear-gradient(180deg,transparent,black 12%,black 87%,transparent)}
.cocreate-page .cocreate-arm-canvas{position:absolute;width:100%;aspect-ratio:1672/941;left:0;top:50%;transform:translateY(-50%)}
.cocreate-page .cocreate-arm-image{display:block;width:100%;height:100%;pointer-events:none}
.cocreate-page .cocreate-held-qr{position:absolute;left:45.455%;top:23.911%;width:23.625%;aspect-ratio:1;display:block;mix-blend-mode:darken}
.cocreate-page .cocreate-held-qr img{display:block;width:100%;height:100%}
.cocreate-page .cocreate-held-qr:focus-visible{outline-color:#fff;outline-offset:12px}
.cocreate-page .cocreate-contact.is-contact-pending .cocreate-contact-visual{opacity:0;transform:translate3d(64px,0,0)}
.cocreate-page .cocreate-contact.is-contact-pending:focus-within .cocreate-contact-visual{opacity:1;transform:none}
@media(min-width:701px){
  .cocreate-page .cocreate-process{border-bottom-color:transparent}
  .cocreate-page .cocreate-contact{background:transparent;min-height:max(clamp(630px,calc(100svh - var(--cocreate-header)),900px),43vw)}
  .cocreate-page .cocreate-contact-visual{mask-image:none}
  /* Fade empty background in image coordinates; the hand starts beyond 40% x
     and the complete QR plate lies within the fully opaque central area. */
  .cocreate-page .cocreate-arm-canvas{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 12%,#000 38%),linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0%,transparent 12%,#000 38%),linear-gradient(180deg,transparent 0%,#000 14%,#000 80%,transparent 100%);
    mask-composite:intersect;
  }
}
@media(min-width:1721px){
  .cocreate-page .cocreate-main{max-width:none;padding-inline:0}
  .cocreate-page .cocreate-main>section:not(.cocreate-contact){max-width:calc(1720px - 2 * var(--cocreate-gutter));margin-inline:auto}
  .cocreate-page .cocreate-contact{margin-inline:0}
  .cocreate-page .cocreate-contact-copy{margin-left:calc((100% - 1720px)/2 + var(--cocreate-gutter))}
}
@media(min-width:701px) and (max-width:1000px){
  .cocreate-page .cocreate-contact-copy{width:43%;padding-block:60px}
  .cocreate-page .cocreate-contact h2{font-size:28px}
  .cocreate-page .cocreate-contact-message{font-size:14px}
  .cocreate-page .cocreate-contact-visual{left:-5%;right:-10%}
}
@media(max-width:700px){
  .cocreate-page .cocreate-contact{display:flex;flex-direction:column;min-height:0;padding:44px 0 34px}
  .cocreate-page .cocreate-contact-copy{display:contents;pointer-events:auto}
  .cocreate-page .cocreate-contact-copy>.cocreate-eyebrow{order:0;margin-inline:var(--cocreate-gutter)}
  .cocreate-page .cocreate-contact h2{order:1;font-size:clamp(29px,8vw,44px);line-height:1.5;margin:19px var(--cocreate-gutter) 0}
  .cocreate-page .cocreate-contact-message{order:2;font-size:15px;line-height:1.85;margin:14px var(--cocreate-gutter) 0}
  .cocreate-page .cocreate-contact-action{order:4;margin:0 var(--cocreate-gutter)}
  .cocreate-page .cocreate-scan-label{font-size:18px}
  .cocreate-page .cocreate-scan-hint{font-size:13px;max-width:100%}
  .cocreate-page .cocreate-save-qr{margin-top:14px}
  .cocreate-page .cocreate-contact-works{order:5;align-self:flex-start;margin:10px var(--cocreate-gutter) 0}
  .cocreate-page .cocreate-contact-visual{order:3;position:relative;inset:auto;width:100%;height:380px;margin-top:5px;mask-image:linear-gradient(180deg,transparent,black 12%,black 90%,transparent)}
  .cocreate-page .cocreate-arm-canvas{width:1040px;left:calc(50% - 596px);top:-66px;transform:none}
  .cocreate-page .cocreate-contact.is-contact-pending .cocreate-contact-visual{transform:translate3d(35px,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .cocreate-page .cocreate-contact-visual,.cocreate-page .cocreate-contact-copy,.cocreate-page .cocreate-save-qr{transition:none}
}
