/* V2 preview only. Apple system typography, with a consistent Windows fallback. */
:root{--font-system:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Ryan Inter","Microsoft YaHei",sans-serif;--type-mono:var(--font-system)}
body.motion-v2,body.motion-v2 *{font-family:var(--font-system)}
.motion-v2 .mono,.motion-v2 .card-register,.motion-v2 .work-register,.motion-v2 .hero-register,.motion-v2 .noodle-platform-badge{letter-spacing:.045em}
.motion-v2 .noodle-metrics strong,.motion-v2 .noodle-audience strong,.motion-v2 .noodle-cooperation strong{font-weight:400;letter-spacing:-.045em}
.motion-v2 .hero-title{mix-blend-mode:normal;text-shadow:0 2px 28px #07142555}
.motion-v2 .hero-title h1 .reveal-unit{color:inherit}
.motion-v2 .hero-title h1>span:not(.reveal-unit){color:#9fbdff}
.reveal-unit{display:inline-block;white-space:pre;vertical-align:baseline}
.type-char{display:inline;white-space:pre-wrap}
.motion-v2 .hero-title .hero-roles{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:23px;font-size:13px;line-height:1.6;font-weight:400;letter-spacing:.08em;color:#d9e7fc}
.hero-roles:before{content:"";width:22px;height:1px;background:#b1cafa}
.hero-roles .role-slot{display:inline-block;min-width:6.2em;text-align:left;color:#c5d9ff}
.motion-v2 .hero-register{bottom:18%;background:#102239dc;padding:14px 20px}
.motion-v2 .hero-register>span:first-child{font-size:28px;letter-spacing:-.02em}
.motion-v2 .hero-register>span:nth-child(2){font-size:11px;letter-spacing:.1em}
.motion-v2 .hero-landscape{opacity:.73}
.motion-v2 .hero-shade{background:linear-gradient(180deg,#030d1b70,transparent 34%,#06132325 58%,#061222ad)}
.motion-v2 .motion-geometry{color:#bdd5ff}
.motion-v2 .geo-mark{opacity:.8}
.motion-v2 .geometry-active .geo-box,.motion-v2 .geometry-active .geo-point{animation-duration:1900ms}
@keyframes geometry-contract{0%{width:64px;height:64px;opacity:0}12%{opacity:.75}38%{width:50px;height:50px;opacity:.65}80%,100%{width:0;height:0;opacity:0}}
@keyframes point-settle{0%,58%{opacity:0;transform:scale(.5)}85%,100%{opacity:.75;transform:scale(1)}}
.motion-v2 .hero-symbols{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.72;mask-image:linear-gradient(90deg,#000,transparent 39%,transparent 55%,#000 90%)}
.motion-v2 .position{padding-block:120px}
.motion-v2 .works{padding-top:118px}
.motion-v2 .project-grid{gap:48px 30px}
.motion-v2 .case-heading{padding-top:68px;padding-bottom:64px}
.motion-v2 .case-step{padding-block:38px}
.motion-v2 .media-heading{margin-top:58px;margin-bottom:30px}
.motion-v2 .case-contactsheet{margin-block:48px 64px}
.motion-v2 .project:hover .art>img,.motion-v2 .case-cover-image:hover img,.motion-v2 .case-contactsheet .image-button:hover img{transform:none}
.motion-v2 .project .card-register i{transform:none!important;width:26px;height:26px}
.kinetic-icon{position:relative;display:inline-flex!important;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;vertical-align:middle;line-height:1}
.kinetic-icon svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:square}
.kinetic-icon .icon-corners{transform-origin:center;transition:transform .55s var(--motion-ease),opacity .4s;opacity:.5}
.kinetic-icon .icon-plus{transition:opacity .25s,transform .45s var(--motion-ease);transform-origin:center}
.kinetic-icon .icon-arrow{opacity:0;transform:translate(-3px,3px);transition:opacity .25s,transform .5s var(--motion-ease)}
:is(.project,.view-material,#next-project,.noodle-profile-link,.outro-mail,.kinetic-link):is(:hover,:focus-visible) .icon-corners{transform:scale(.7);opacity:1}
:is(.project,.view-material,#next-project,.noodle-profile-link,.outro-mail,.kinetic-link):is(:hover,:focus-visible) .icon-plus{opacity:0;transform:scale(.6)}
:is(.project,.view-material,#next-project,.noodle-profile-link,.outro-mail,.kinetic-link):is(:hover,:focus-visible) .icon-arrow{opacity:1;transform:translate(1px,-1px)}
.motion-v2 .project-open{translate:none!important;box-shadow:none!important;transition:background .3s}
.motion-v2 .project-open .kinetic-icon{width:30px;height:30px}
.motion-v2 .filters{position:relative}
.motion-v2 .filters button.active{background:#16395f}
.filter-underline{position:absolute;left:0;bottom:-1px;height:2px;background:#305786;pointer-events:none;transition:width .55s var(--motion-ease),transform .55s var(--motion-ease)}
.filter-ghost{pointer-events:none!important;z-index:8!important;margin:0!important;contain:layout style}
.count-value{display:inline-block;font-variant-numeric:tabular-nums;text-align:left;white-space:pre}
.motion-v2 .count-value{font-size:inherit!important;line-height:inherit;font-weight:inherit;color:inherit;margin:0!important}
.motion-v2.booting .hero-title{opacity:0}
.motion-v2 .noodle-metrics strong{font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.motion-v2 .noodle-metrics strong .count-value,.motion-v2 .noodle-cooperation strong .count-value{font-size:inherit;margin:0}
.motion-v2 .noodle-audience strong .count-value{font-size:inherit;display:inline-block;margin:0}
.v2-scene{position:relative}
.scene-marker{position:absolute;right:2px;top:-21px;width:40px;height:14px;pointer-events:none;display:flex;align-items:center;justify-content:space-between;color:#6e8daf;opacity:.8}
.scene-marker:before,.scene-marker:after{content:"";width:5px;height:5px;border:1px solid currentColor}
.scene-marker i{width:16px;height:1px;background:currentColor}
.scene-active .scene-marker{animation:scene-contract 1100ms var(--motion-ease) both}
@keyframes scene-contract{0%{width:130px;opacity:0}20%{opacity:.8}100%{width:40px;opacity:.65}}
.motion-v2 .contact.motion-outro{min-height:760px;padding:38px var(--pad) 34px;background:#07111d;color:#edf4ff;overflow:hidden;isolation:isolate;border-top:1px solid #41536c}
.motion-v2 .contact.motion-outro:before{inset:20px;border-color:#7b96b33d;z-index:0}
.motion-v2 .contact.motion-outro:after{display:none}
.motion-v2 .contact.motion-outro>div{padding:0;border:0;background:none}
.outro-field{position:absolute;right:-3%;top:30px;width:73%;height:calc(100% - 90px);z-index:0;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 96%,transparent)}
.motion-v2 .contact.motion-outro .outro-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.13em;color:#a9bdd7;padding-block:0 20px;border-bottom:1px solid #5e78953b}
.motion-v2 .contact.motion-outro .outro-copy{position:relative;z-index:1;display:block;margin:96px 0 90px;width:58%;max-width:780px}
.outro-eyebrow{display:block;font-size:14px;letter-spacing:.06em;color:#a8c0e0;margin-bottom:30px}
.motion-v2 .outro-copy h2{font-size:clamp(48px,5.8vw,90px);font-weight:400;line-height:1.2;letter-spacing:-.065em;margin:0 0 28px;text-wrap:balance;text-shadow:0 2px 22px #07111d}
.outro-copy h2>span:last-child{color:#9dbaff}
.outro-copy>p{font-size:14px;color:#a4b7ce;letter-spacing:.07em;line-height:1.8;margin-bottom:34px}
.outro-mail{display:inline-flex;align-items:center;gap:46px;padding:15px 20px;border:1px solid #84a7d1;background:#102139d6;color:#ecf3ff;font-size:16px;transition:background .3s,border-color .3s}
.outro-mail:hover{background:#23476e;border-color:#bad3ff}
.outro-email{display:block;width:fit-content;margin-top:20px;font-size:15px;color:#b8cbe4;text-underline-offset:5px}
.outro-email:hover{text-decoration:underline}
.motion-v2 .contact.motion-outro .outro-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:22px;border-top:1px solid #5e789552;font-size:12px;letter-spacing:.05em;color:#b4c5d8}
.outro-bottom a{display:inline-flex;align-items:center;gap:10px}
.motion-v2>footer{display:none}
.motion-v2 .preview-controls{max-width:calc(100vw - 20px)}
.motion-v2 .preview-controls>a{padding:11px 12px;font-size:12px;border-left:1px solid #7390b34d}
.motion-v2 .preview-controls>a:hover{background:#26405e}
.motion-v2 .preview-controls button{font-size:12px}
@media(max-width:800px){.motion-v2 .position{padding-block:78px}.motion-v2 .works{padding-top:80px}.motion-v2 .case-heading{padding-block:38px}.motion-v2 .case-step{padding-block:28px}.motion-v2 .hero-title .hero-roles{font-size:11px;margin-top:16px}.motion-v2 .hero-register{bottom:18%}.motion-v2 .contact.motion-outro{min-height:850px;padding:28px 26px 30px}.outro-field{top:auto;bottom:58px;width:105%;height:53%;right:-15%;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent)}.motion-v2 .contact.motion-outro .outro-copy{width:100%;margin:64px 0 260px}.motion-v2 .outro-copy h2{font-size:clamp(45px,8.8vw,68px);line-height:1.25}.outro-copy>p{font-size:12px}.motion-v2 .contact.motion-outro .outro-bottom{flex-wrap:wrap;font-size:11px}.outro-bottom>span:nth-child(2){display:none}.motion-v2 .contact.motion-outro .outro-top{font-size:10px;letter-spacing:.05em}.outro-top>span:last-child{display:none}.motion-v2 .preview-controls{right:8px;bottom:8px}.motion-v2 .preview-controls button{padding:10px 8px;font-size:11px}.motion-v2 .preview-controls>a{padding:10px 8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.motion-v2 .scene-marker{animation:none!important}.motion-v2 .filter-underline{transition:none}}