:root { --ink:#0b0b0f; --ink2:#14131a; --paper:#f4eee6; --muted:#a7a19d; --line:rgba(244,238,230,.16); --pink:#ff4f9a; --orange:#ffb36e; --green:#a8c0b2; --max:1240px; }
* { box-sizing:border-box; }
html { background:var(--ink); scroll-behavior:smooth; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-width:320px; margin:0; color:var(--paper); background:var(--ink); font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif; font-size:16px; line-height:1.6; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { touch-action:manipulation; }
img,video,svg { display:block; max-width:100%; }
.wrap { width:min(var(--max),calc(100% - 48px)); margin:0 auto; }
.subnav { position:fixed; z-index:20; inset:0 0 auto; border-bottom:1px solid rgba(255,255,255,.12); background:rgba(11,11,15,.78); backdrop-filter:blur(18px); }
.subnav-inner { height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { min-width:0; display:flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.12em; font-weight:800; white-space:nowrap; }
.brand > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.brand-mark { width:27px; height:27px; border:1px solid var(--paper); border-radius:8px; position:relative; }
.brand-mark:before { content:""; position:absolute; width:7px; height:7px; top:5px; right:5px; border-radius:50%; background:var(--pink); }
.subnav-links { display:flex; align-items:center; gap:24px; color:#b8b4b2; font-size:13px; white-space:nowrap; }
.subnav-links a { transition:color .2s ease; }
.subnav-links a:hover, .subnav-links a[aria-current="page"] { color:var(--paper); }
.subnav-links a[aria-current="page"] { color:var(--orange); }
.subhero { min-height:72svh; padding:190px 0 88px; display:flex; align-items:end; position:relative; overflow:hidden; isolation:isolate; }
.subhero:before { content:""; position:absolute; z-index:-2; width:720px; height:720px; right:-190px; top:-210px; border-radius:50%; background:radial-gradient(circle,rgba(255,79,154,.23),transparent 67%); filter:blur(18px); }
.subhero:after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(11,11,15,.94),rgba(11,11,15,.34)),linear-gradient(0deg,var(--ink),transparent 65%); }
.subhero-bg { position:absolute; z-index:-3; inset:0; background-position:center; background-size:cover; filter:saturate(.7); opacity:.62; transform:scale(1.03); }
.subhero video.subhero-bg { width:100%; height:100%; object-fit:cover; }
.subhero.manga .subhero-bg { background-image:url('assets/style-11.webp'); }
.subhero.business .subhero-bg { background-image:url('assets/style-04.webp'); }
.subhero.business:before,.subhero.business:after { content:none; }
.subhero.business .subhero-bg { background-image:none; filter:none; opacity:1; transform:none; }
.subhero.business .wrap { position:relative; z-index:1; text-shadow:0 2px 18px rgba(0,0,0,.76); }
.subhero.partner .subhero-bg { background-image:url('assets/style-16.webp'); }
.subhero.team .subhero-bg { background-image:none; opacity:.88; filter:saturate(.84) contrast(1.04); }
.subhero.team:after { background:linear-gradient(90deg,rgba(11,11,15,.84),rgba(11,11,15,.14)),linear-gradient(0deg,rgba(11,11,15,.92),transparent 68%); }
.kicker { color:var(--pink); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.subhero h1 { margin:16px 0 20px; font-size:clamp(58px,11vw,150px); line-height:.84; letter-spacing:-.09em; max-width:900px; }
.subhero p { max-width:500px; margin:0; color:#cec8c4; font-size:17px; }
.subhero-meta { display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; color:#9e9894; font-size:12px; }
.subhero-meta span { border:1px solid var(--line); border-radius:999px; padding:8px 12px; }
.subsection { padding:118px 0; background:var(--ink2); }
.subsection.light { color:var(--ink); background:var(--paper); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:38px; }
.section-head h2 { margin:12px 0 0; font-size:clamp(38px,6vw,76px); line-height:.92; letter-spacing:-.07em; }
.section-head p { max-width:380px; color:var(--muted); margin:0; }
.light .section-head p { color:#6a635e; }
.eyebrow { color:var(--orange); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
.light .eyebrow { color:#9a3d68; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card-grid > *,.placeholder-grid > *,.expert-grid > *,.company-grid > *,.specs > * { min-width:0; }
.image-card { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#111117; }
.image-card img { width:100%; aspect-ratio:16/10; object-fit:cover; filter:saturate(.78); transition:transform .55s ease,filter .55s ease; }
.image-card video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; }
#short-video-ads .short-ad-video { aspect-ratio:9/16; object-fit:cover; }
.image-card:hover img { transform:scale(1.05); filter:saturate(1); }
.image-card-body { padding:18px; }
.image-card-body small { color:var(--pink); font-size:11px; letter-spacing:.12em; }
.image-card-body h3 { margin:10px 0 5px; font-size:21px; letter-spacing:-.04em; }
.image-card-body p { margin:0; color:var(--muted); font-size:13px; }
.placeholder-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.placeholder { min-height:220px; border:1px dashed rgba(255,79,154,.52); border-radius:16px; padding:25px; background:linear-gradient(130deg,rgba(255,79,154,.09),rgba(255,179,110,.06)); }
.placeholder strong { display:block; color:var(--orange); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.placeholder h3 { margin:27px 0 8px; font-size:25px; letter-spacing:-.05em; }
.placeholder p { max-width:430px; color:#b7afaa; margin:0; font-size:14px; }
.light .placeholder { border-color:rgba(154,61,104,.45); background:#eee5dc; }
.light .placeholder p { color:#625b56; }
.partner-recruitment { max-width:980px; border:1px solid rgba(154,61,104,.38); border-radius:16px; padding:clamp(24px,4vw,46px); background:#eee5dc; }
.partner-recruitment p { margin:0; max-width:760px; color:#4f4945; font-size:clamp(16px,1.5vw,20px); line-height:1.8; }
.partner-recruitment p + p { margin-top:16px; }
.specs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.spec { border:1px solid var(--line); border-radius:14px; padding:20px; }
.spec b { display:block; color:var(--orange); font-size:28px; letter-spacing:-.06em; }
.spec span { display:block; color:var(--muted); margin-top:6px; font-size:13px; }
.expert-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.expert-card { min-width:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:20px; padding:18px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); }
.portrait-slot { aspect-ratio:4/3; border-radius:15px; border:1px dashed rgba(255,179,110,.55); display:grid; place-content:center; gap:7px; text-align:center; color:#8e8884; background:linear-gradient(135deg,rgba(255,79,154,.09),rgba(255,179,110,.04)),repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.028) 18px 19px); }
.portrait-slot span { color:var(--pink); font-size:12px; letter-spacing:.16em; }
.portrait-slot strong { color:var(--paper); font-size:24px; letter-spacing:-.04em; }
.portrait-slot small { font-size:12px; }
.portrait-photo { margin:0; aspect-ratio:4/3; overflow:hidden; border:1px solid rgba(255,179,110,.34); border-radius:15px; background:#09090c; }
.portrait-photo img { width:100%; height:100%; object-fit:cover; object-position:56% center; }
.profile-03-card .portrait-photo img { object-position:43% center; }
.expert-copy { padding:20px 4px 8px; }
.expert-copy small { color:var(--orange); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.expert-copy h2 { margin:8px 0 7px; font-size:28px; letter-spacing:-.05em; }
.expert-copy p { min-height:52px; margin:0; color:var(--muted); font-size:15px; }
.expert-copy p + p { margin-top:10px; }
.company-profile .expert-copy p { min-height:0; line-height:1.72; }
.expert-contact { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:15px; padding-top:13px; border-top:1px solid var(--line); }
.expert-contact span { color:#9e9792; font-size:13px; }
.expert-contact a { color:var(--orange); font-size:18px; font-weight:800; text-decoration:none; }
.expert-contact a:hover,.expert-contact a:focus-visible { color:var(--pink); }
.portfolio-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:auto 4px 12px; padding-top:36px; border-top:1px solid var(--line); }
.portfolio-label b { font-size:16px; }
.portfolio-label span { color:#8f8985; font-size:12px; }
.photo-showcase { position:relative; height:auto; aspect-ratio:4/3; margin:4px 4px 8px; }
.photo-showcase figure { --photo-x:0px; --photo-y:0px; --photo-r:-2.4deg; position:absolute; inset:0 auto auto 0; width:calc(100% - 70px); aspect-ratio:4/3; margin:0; overflow:hidden; border:1px solid rgba(244,238,230,.22); border-radius:16px; background:#09090c; cursor:pointer; box-shadow:0 18px 34px rgba(0,0,0,.3); transform:translate3d(var(--photo-x),var(--photo-y),0) rotate(var(--photo-r)); transform-origin:center; backface-visibility:hidden; transition:filter .25s ease,box-shadow .25s ease,outline-color .25s ease; }
.photo-showcase figure:nth-child(1) { --photo-x:0px; --photo-y:0px; --photo-r:-2.4deg; z-index:1; }
.photo-showcase figure:nth-child(2) { --photo-x:10px; --photo-y:7px; --photo-r:-1.5deg; z-index:2; }
.photo-showcase figure:nth-child(3) { --photo-x:20px; --photo-y:14px; --photo-r:-.7deg; z-index:3; }
.photo-showcase figure:nth-child(4) { --photo-x:30px; --photo-y:21px; --photo-r:.2deg; z-index:4; }
.photo-showcase figure:nth-child(5) { --photo-x:40px; --photo-y:28px; --photo-r:.9deg; z-index:5; }
.photo-showcase figure:nth-child(6) { --photo-x:50px; --photo-y:35px; --photo-r:1.5deg; z-index:6; }
.photo-showcase figure:nth-child(7) { --photo-x:60px; --photo-y:42px; --photo-r:2.1deg; z-index:7; }
.photo-showcase figure:nth-child(8) { --photo-x:70px; --photo-y:49px; --photo-r:2.8deg; z-index:8; }
.photo-showcase figure:hover { filter:brightness(1.09); box-shadow:0 24px 48px rgba(0,0,0,.42); outline:2px solid var(--orange); outline-offset:2px; }
.photo-showcase figure:focus-visible { z-index:12; outline:3px solid var(--orange); outline-offset:3px; }
.photo-showcase img { width:100%; height:100%; object-fit:cover; filter:saturate(.94); pointer-events:none; }
.work-stack { position:relative; height:auto; aspect-ratio:16/9; margin:4px 4px 8px; }
.work-card { --stack-x:0px; --stack-y:0px; --stack-r:-2.3deg; position:absolute; top:0; left:0; width:calc(100% - 58px); height:auto; aspect-ratio:16/9; padding:0; overflow:hidden; border:1px solid rgba(244,238,230,.2); border-radius:16px; color:var(--paper); background:#09090c; text-align:left; cursor:pointer; box-shadow:0 18px 34px rgba(0,0,0,.28); transform:translate3d(var(--stack-x),var(--stack-y),0) rotate(var(--stack-r)); transform-origin:center; backface-visibility:hidden; will-change:transform; transition:transform .3s cubic-bezier(.2,.75,.2,1),filter .3s ease,box-shadow .3s ease; }
.work-card:nth-child(1) { z-index:1; }
.work-card:nth-child(2) { --stack-x:29px; --stack-y:16px; --stack-r:1.1deg; z-index:2; }
.work-card:nth-child(3) { --stack-x:58px; --stack-y:32px; --stack-r:3deg; z-index:3; }
.work-card:hover,.work-card:focus-visible { z-index:4; transform:translate3d(var(--stack-x),var(--stack-y),0) rotate(var(--stack-r)) scale(1.02); filter:brightness(1.08); box-shadow:0 24px 48px rgba(0,0,0,.4); outline:2px solid var(--orange); outline-offset:3px; }
.work-card img,.work-card-preview { width:100%; height:100%; object-fit:cover; opacity:.76; pointer-events:none; }
.photo-work-card img { opacity:.9; }
.work-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(5,5,7,.9),transparent 62%); }
.work-card span { position:absolute; z-index:1; left:14px; right:14px; bottom:12px; font-size:13px; font-weight:700; }
.company-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.company-slot { min-height:150px; border:1px dashed rgba(154,61,104,.45); border-radius:16px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(255,255,255,.3); }
.company-slot b { color:#9a3d68; font-size:12px; letter-spacing:.14em; }
.company-slot strong { font-size:21px; letter-spacing:-.04em; }
.company-slot span { color:#69615d; font-size:14px; }
.company-slot .company-contact { color:#9a3d68; font-size:15px; font-weight:800; text-decoration:none; }
.company-slot .company-contact:hover,.company-slot .company-contact:focus-visible { color:#5f1839; text-decoration:underline; }
.work-dialog { width:min(1120px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid rgba(244,238,230,.2); border-radius:20px; padding:18px; color:var(--paper); background:#0b0b0f; box-shadow:0 30px 90px rgba(0,0,0,.6); }
.work-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(7px); }
.work-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:14px; }
.work-dialog h2 { margin:0; font-size:22px; }
.dialog-close { border:1px solid var(--line); border-radius:999px; padding:9px 14px; color:var(--paper); background:transparent; cursor:pointer; }
.work-dialog video { display:block; width:100%; aspect-ratio:16/9; border-radius:14px; background:#000; }
.photo-dialog { width:min(1180px,calc(100% - 32px)); }
.photo-dialog img { width:100%; max-height:calc(100dvh - 122px); object-fit:contain; border-radius:14px; background:#050507; }
.contact-strip { padding:70px 0; background:var(--pink); color:var(--ink); }
.contact-strip-inner { display:flex; align-items:end; justify-content:space-between; gap:28px; }
.contact-strip h2 { margin:0; max-width:650px; font-size:clamp(36px,6vw,74px); line-height:.9; letter-spacing:-.08em; }
.contact-strip p { max-width:320px; color:#623b49; margin:0; }
.contact-strip a { display:inline-flex; margin-top:20px; padding:12px 17px; border-radius:999px; background:var(--ink); color:var(--paper); font-weight:700; font-size:14px; }
footer { padding:30px 0 42px; color:#8f8a87; background:var(--ink); font-size:12px; }
footer .wrap { display:flex; justify-content:space-between; gap:20px; }
.footer-contacts a { color:inherit; text-decoration:none; }
.footer-contacts a:hover { color:var(--paper); }
@media(max-width:850px){
  .subnav-links{max-width:60vw;overflow:auto;scrollbar-width:none;gap:16px}.subnav-links::-webkit-scrollbar{display:none}.subnav-links a{white-space:nowrap}
  .card-grid,.expert-grid{grid-template-columns:1fr 1fr}.specs{grid-template-columns:repeat(2,1fr)}
  .section-head{display:block}.section-head p{margin-top:18px}.contact-strip-inner{display:block}.contact-strip p{margin-top:18px}
}
@media(max-width:720px){
  .wrap{width:calc(100% - 32px)}
  .subnav{padding-top:env(safe-area-inset-top)}
  .subnav-inner{height:auto;min-height:102px;padding:9px 0 0;flex-direction:column;align-items:stretch;gap:2px}
  .brand{width:100%;font-size:11px;letter-spacing:.055em;line-height:1.25}.brand-mark{flex:0 0 26px}
  .subnav-links{width:100%;max-width:none;justify-content:flex-start;gap:8px;padding:4px 0 8px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;font-size:12px}
  .subnav-links a{min-height:44px;display:inline-flex;align-items:center;padding:0 8px;scroll-snap-align:start}
  .subhero{min-height:max(75svh,620px);padding:176px 0 max(58px,env(safe-area-inset-bottom))}
  .subhero h1{font-size:clamp(50px,16vw,88px);line-height:.88}.subhero p{font-size:16px}
  .subsection{padding:82px 0}.section-head h2{font-size:clamp(34px,11vw,54px);line-height:1}
  .card-grid,.placeholder-grid,.expert-grid{grid-template-columns:1fr}
  .company-grid{grid-template-columns:1fr 1fr}.specs{grid-template-columns:1fr 1fr}.spec b{font-size:24px}
  .image-card video{width:100%;height:auto;aspect-ratio:16/9}
  .work-stack{aspect-ratio:16/9}.work-card{width:calc(100% - 48px)}.work-card:nth-child(2){--stack-x:24px;--stack-y:13px}.work-card:nth-child(3){--stack-x:48px;--stack-y:26px}
  .photo-showcase figure{width:calc(100% - 56px)}.photo-showcase figure:nth-child(2){--photo-x:8px;--photo-y:6px}.photo-showcase figure:nth-child(3){--photo-x:16px;--photo-y:12px}.photo-showcase figure:nth-child(4){--photo-x:24px;--photo-y:18px}.photo-showcase figure:nth-child(5){--photo-x:32px;--photo-y:24px}.photo-showcase figure:nth-child(6){--photo-x:40px;--photo-y:30px}.photo-showcase figure:nth-child(7){--photo-x:48px;--photo-y:36px}.photo-showcase figure:nth-child(8){--photo-x:56px;--photo-y:42px}
  .work-dialog{max-height:calc(100dvh - 24px);overflow:auto;padding:13px}.work-dialog-head{position:sticky;top:-13px;z-index:2;padding:8px 0;background:#0b0b0f}
  .contact-strip{padding:58px 0 max(58px,env(safe-area-inset-bottom))}.contact-strip h2{font-size:clamp(38px,14vw,62px)}
  footer{padding-bottom:max(42px,env(safe-area-inset-bottom))}footer .wrap{display:block}footer .wrap span+span{display:block;margin-top:8px}
}
@media(max-width:430px){
  .wrap{width:calc(100% - 24px)}
  .subhero h1{font-size:clamp(48px,15.5vw,66px);letter-spacing:-.075em}
  .subhero-meta{gap:8px}.subhero-meta span{padding:7px 10px}
  .company-grid{grid-template-columns:1fr}.specs{grid-template-columns:1fr}.placeholder,.company-slot{min-height:0}
  .expert-card{padding:14px}.portrait-slot{aspect-ratio:1/1}.expert-copy p{min-height:0}
  .portfolio-label{align-items:flex-start;flex-direction:column}.work-card{width:calc(100% - 34px)}.work-card:nth-child(2){--stack-x:17px;--stack-y:10px}.work-card:nth-child(3){--stack-x:34px;--stack-y:20px}
  .photo-showcase figure{width:calc(100% - 42px);border-radius:12px}.photo-showcase figure:nth-child(2){--photo-x:6px;--photo-y:5px}.photo-showcase figure:nth-child(3){--photo-x:12px;--photo-y:10px}.photo-showcase figure:nth-child(4){--photo-x:18px;--photo-y:15px}.photo-showcase figure:nth-child(5){--photo-x:24px;--photo-y:20px}.photo-showcase figure:nth-child(6){--photo-x:30px;--photo-y:25px}.photo-showcase figure:nth-child(7){--photo-x:36px;--photo-y:30px}.photo-showcase figure:nth-child(8){--photo-x:42px;--photo-y:35px}
  .contact-strip a{min-height:46px;align-items:center;justify-content:center;width:100%;text-align:center}
}
@media(hover:none){.image-card:hover img{transform:none;filter:none}.photo-showcase figure:hover{filter:none;box-shadow:0 18px 34px rgba(0,0,0,.3);outline:0}.work-card:hover{transform:translate3d(var(--stack-x),var(--stack-y),0) rotate(var(--stack-r));filter:none;box-shadow:0 18px 34px rgba(0,0,0,.28)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}