:root{
  --brand:#11b9d4;
  --brand-blue:#4e73f2;
  --brand-pink:#ff83b8;
  --brand-yellow:#ffe36b;
  --ink:#28334f;
  --ink-strong:#202b46;
  --muted:#78839e;
  --bg:#f7f8fc;
  --card:#fff;
  --line:#e5e9f2;
  --shadow:0 14px 42px rgba(45,59,96,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"M PLUS Rounded 1c","Noto Sans SC","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  overflow-x:hidden
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.hidden{display:none!important}
.shell{width:min(1180px,calc(100% - 32px));margin:auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:90;background:rgba(255,255,255,.95);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line)
}
.header-inner{
  width:min(1240px,calc(100% - 28px));height:72px;margin:auto;
  display:flex;align-items:center;gap:35px
}
.brand img{width:184px;height:46px;object-fit:contain}
.header-inner nav{display:flex;height:100%;align-items:center;gap:27px;font-size:13px;font-weight:800}
.header-inner nav a{height:100%;display:flex;align-items:center;position:relative;color:#59637c}
.header-inner nav a::before{
  content:attr(data-i18n);position:absolute;top:11px;left:0;
  font-size:7px;letter-spacing:.12em;color:transparent;pointer-events:none
}
.header-inner nav a.active,.header-inner nav a:hover{color:var(--brand)}
.header-inner nav a.active::after{
  content:"";position:absolute;left:4px;right:4px;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-blue),var(--brand-pink));
  border-radius:5px 5px 0 0
}
.header-tools{margin-left:auto;display:flex;gap:10px}
.search-open,.lang-btn{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:9px 14px;color:#59637c;font-size:12px;font-weight:800
}
.search-open:hover,.lang-btn:hover{border-color:#a9dce4;color:var(--brand)}

/* Full-width key visual */
.visual-hero{
  position:relative;width:100%;aspect-ratio:2/1;min-height:520px;
  max-height:calc(100vh - 72px);overflow:hidden;background:#fff
}
.hero-banner-image{
  width:100%;height:100%;object-fit:cover;object-position:center;
  animation:heroDrift 17s ease-in-out infinite alternate;
  will-change:transform
}
@keyframes heroDrift{
  from{transform:scale(1.005) translate3d(0,0,0)}
  to{transform:scale(1.045) translate3d(-.8%,.4%,0)}
}
.hero-vignette{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 50%,rgba(28,46,91,.12)),
    linear-gradient(90deg,rgba(255,255,255,.16),transparent 22%,transparent 78%,rgba(255,255,255,.12));
  pointer-events:none
}
.hero-wave{
  position:absolute;width:min(510px,34vw);fill:none;stroke:#fff;stroke-width:2.5;
  stroke-linecap:round;opacity:.74;filter:drop-shadow(0 2px 5px rgba(53,92,163,.24))
}
.hero-wave path{stroke-dasharray:12 10;animation:waveDash 9s linear infinite}
.hero-wave-a{left:3%;bottom:13%}
.hero-wave-b{right:3%;top:15%;transform:rotate(8deg)}
@keyframes waveDash{to{stroke-dashoffset:-220}}
.hero-symbol{
  position:absolute;color:#fff;font-weight:900;text-shadow:0 4px 14px rgba(57,71,139,.22);
  animation:symbolFloat 5s ease-in-out infinite
}
.symbol-one{left:8%;top:15%;font-size:34px}
.symbol-two{right:11%;bottom:18%;font-size:28px;animation-delay:-1.4s}
.symbol-three{right:26%;top:12%;font-size:24px;animation-delay:-2.7s}
@keyframes symbolFloat{50%{transform:translateY(-13px) rotate(8deg)}}
.visual-meta{
  position:absolute;color:#fff;display:flex;flex-direction:column;
  text-shadow:0 2px 9px rgba(49,62,123,.35)
}
.visual-meta-left{left:3.8%;bottom:4.5%}
.visual-meta-right{right:3.8%;top:5%;align-items:flex-end}
.visual-meta span{font-size:10px;letter-spacing:.22em;font-weight:900}
.visual-meta b{font-size:16px;letter-spacing:.08em;margin:4px 0}
.visual-meta small{font-size:8px;letter-spacing:.18em}
.scroll-cue{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;color:#fff;font-size:8px;
  font-weight:900;letter-spacing:.22em
}
.scroll-cue i{width:42px;height:1px;background:#fff;position:relative;overflow:hidden}
.scroll-cue i::after{
  content:"";position:absolute;width:14px;height:1px;background:var(--brand-pink);
  animation:scrollLine 1.8s ease-in-out infinite
}
@keyframes scrollLine{from{left:-15px}to{left:44px}}

/* Typography intro */
.portfolio-intro{
  display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;
  padding:96px 0 104px;position:relative
}
.portfolio-intro::before{
  content:"";position:absolute;left:-90px;top:57px;width:126px;height:126px;border-radius:50%;
  background:radial-gradient(circle,var(--brand-yellow) 0 34%,transparent 36%);
  opacity:.5;filter:blur(.2px);z-index:-1
}
.intro-number,.eyebrow,.modal-kicker{
  font-size:10px;letter-spacing:.18em;color:var(--brand);font-weight:900
}
.intro-jp{
  margin:14px 0 3px;color:var(--brand-pink);
  font-family:"Shippori Mincho","Yu Mincho",serif;font-size:18px;font-weight:700;
  letter-spacing:.08em;transform:rotate(-1deg);transform-origin:left
}
.portfolio-intro h1{
  max-width:760px;margin:0;font-size:clamp(55px,7.7vw,100px);
  line-height:1.03;letter-spacing:-.07em;font-weight:900;
  background:linear-gradient(110deg,var(--ink-strong) 0 58%,#3f62bd 78%,var(--brand) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 7px 0 rgba(117,211,225,.13))
}
.title-underline{display:flex;align-items:center;gap:14px;margin-top:14px}
.title-underline svg{width:min(520px,75%);height:44px;fill:none;stroke:url(#none);stroke:var(--brand);stroke-width:3;stroke-linecap:round}
.title-underline path{stroke-dasharray:13 10;animation:waveDash 9s linear infinite}
.title-underline span{white-space:nowrap;font-size:8px;font-weight:900;letter-spacing:.14em;color:#9a83c8}
.intro-side>p{color:var(--muted);font-size:16px;line-height:1.85;margin:0 0 26px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:33px}
.primary-btn,.secondary-btn{
  border-radius:12px;padding:12px 17px;font-weight:900;
  display:inline-flex;align-items:center;gap:20px;transition:.22s
}
.primary-btn{
  border:0;background:linear-gradient(135deg,var(--brand),var(--brand-blue));
  color:#fff;box-shadow:0 10px 24px rgba(46,139,207,.24)
}
.primary-btn b{
  display:grid;place-items:center;width:29px;height:29px;border-radius:50%;
  background:rgba(255,255,255,.2)
}
.secondary-btn{border:1px solid var(--line);background:#fff;color:#536079}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-3px)}
.hero-stats{display:flex;gap:28px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats strong{font-size:24px;letter-spacing:-.04em}
.hero-stats span{font-size:11px;color:var(--muted);margin-top:3px}

/* Sections */
.section{padding:86px 0}
.category-section{
  background:
    radial-gradient(circle at 0 20%,rgba(70,212,225,.12),transparent 24%),
    radial-gradient(circle at 95% 80%,rgba(255,131,184,.1),transparent 25%),
    #f0f4fa
}
.featured-section{background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
.section-title-lockup{position:relative}
.section-jp{
  position:absolute;left:170px;top:-1px;color:var(--brand-pink);
  font-family:"Shippori Mincho","Yu Mincho",serif;font-size:12px;font-weight:700;
  transform:rotate(-3deg);white-space:nowrap
}
.section-head h2{
  font-family:"M PLUS Rounded 1c","Noto Sans SC",sans-serif;
  font-size:38px;letter-spacing:-.045em;margin:9px 0 0;font-weight:900
}
.section-head>p{max-width:430px;color:var(--muted);line-height:1.75}
.text-link{color:var(--brand);font-size:13px;font-weight:900}

/* Categories */
.category-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.category-card{
  position:relative;background:#fff;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);transition:.3s;
  transform-style:preserve-3d
}
.category-card::after{
  content:"✦";position:absolute;right:18px;bottom:15px;color:var(--brand-pink);
  font-size:20px;opacity:.8;transition:.3s
}
.category-card:hover{transform:translateY(-7px);box-shadow:0 22px 52px rgba(43,57,92,.16)}
.category-card:hover::after{transform:rotate(25deg) scale(1.2)}
.category-cover{position:relative;aspect-ratio:1.72;overflow:hidden;background:#eaf0f8}
.category-cover img{width:100%;height:100%;object-fit:cover;transition:.5s}
.category-card:hover .category-cover img{transform:scale(1.035)}
.category-cover::after{
  content:"";position:absolute;inset:0;background:linear-gradient(transparent 56%,rgba(28,39,74,.22));
  pointer-events:none
}
.category-count{
  position:absolute;right:13px;top:13px;background:rgba(255,255,255,.93);
  padding:7px 10px;border-radius:999px;font-size:10px;font-weight:900;color:#536078;
  box-shadow:0 5px 17px rgba(44,59,94,.14)
}
.category-body{padding:18px 20px 22px;position:relative}
.category-body>span{font-size:9px;letter-spacing:.15em;color:var(--brand);font-weight:900}
.category-body h3{font-size:25px;margin:7px 0;letter-spacing:-.035em}
.category-body p{color:var(--muted);font-size:13px;line-height:1.7;margin:0;max-width:88%}

/* Work cards */
.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}
.work-card{
  background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;
  box-shadow:0 6px 22px rgba(43,57,92,.06);transition:.27s
}
.work-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.work-cover{aspect-ratio:1.35;position:relative;overflow:hidden;background:#e9edf5}
.work-cover img{width:100%;height:100%;object-fit:cover;transition:.4s}
.work-card:hover .work-cover img{transform:scale(1.035)}
.work-play{
  position:absolute;right:12px;bottom:12px;width:43px;height:43px;border:0;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--brand);font-weight:900;
  box-shadow:0 6px 18px rgba(22,38,70,.18);transition:.2s
}
.work-play:hover{background:var(--brand-pink);color:#fff;transform:scale(1.08)}
.work-body{padding:15px}
.work-body small{color:var(--brand);font-size:10px;font-weight:900}
.work-body h3{font-size:16px;margin:7px 0}
.work-body p{font-size:12px;color:var(--muted);line-height:1.65;margin:0}

/* Info */
.info-links{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:82px;padding-bottom:90px}
.info-card{
  display:grid;grid-template-columns:190px 1fr;gap:22px;background:#fff;
  border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  transition:.3s
}
.info-card:hover{transform:translateY(-5px)}
.info-image{width:190px;height:178px;overflow:hidden;background:#edf1f7}
.info-image img{width:100%;height:100%;object-fit:cover;transition:.4s}
.info-card:hover img{transform:scale(1.035)}
.info-card>div:last-child{padding:24px 22px 18px 0}
.info-card span{font-size:9px;letter-spacing:.15em;color:var(--brand);font-weight:900}
.info-card h3{font-size:23px;margin:8px 0}
.info-card p{color:var(--muted);font-size:13px;line-height:1.65}
.info-card b{font-size:10px;color:var(--brand-blue);letter-spacing:.12em}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:40px}
.site-footer .shell{height:92px;display:flex;align-items:center;gap:24px;color:var(--muted);font-size:11px}
.site-footer img{width:170px;height:45px;object-fit:contain}
.site-footer a{margin-left:auto;color:var(--brand);font-weight:900}

/* Library */
.library-banner{
  height:360px;position:relative;overflow:hidden;border-radius:19px;
  margin-top:32px;background:#dfe7f5;box-shadow:var(--shadow)
}
.library-banner>img{width:100%;height:100%;object-fit:cover}
.library-banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,31,65,.79),rgba(15,31,65,.08))}
.library-banner-copy{position:absolute;left:42px;bottom:35px;color:#fff;max-width:560px}
.library-banner-copy span{font-size:10px;letter-spacing:.16em}
.library-banner-copy h1{font-size:45px;margin:9px 0;letter-spacing:-.04em}
.library-banner-copy p{line-height:1.75;margin:0}
.library-layout{display:grid;grid-template-columns:225px 1fr;gap:24px;padding:35px 0 84px}
.filter-sidebar{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;
  height:max-content;position:sticky;top:96px
}
.sidebar-title{display:flex;justify-content:space-between;align-items:center;font-weight:900;margin-bottom:12px}
.sidebar-title button{border:0;background:transparent;color:var(--brand);font-size:11px}
.sub-list{display:grid;gap:5px}
.sub-btn{border:0;background:transparent;text-align:left;padding:10px;border-radius:8px;color:#5c6680}
.sub-btn:hover,.sub-btn.active{background:#e8fafc;color:#139bb8;font-weight:900}
.library-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.result-count{display:flex;align-items:baseline;gap:6px}
.result-count strong{font-size:24px}.result-count span{color:var(--muted);font-size:12px}
.library-toolbar input{width:270px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px}
.library-grid{grid-template-columns:repeat(3,1fr)}

/* About / Commission */
.page-main{padding:58px 0 84px}
.page-title{max-width:790px;margin-bottom:29px;position:relative}
.page-title::after{content:"✦";position:absolute;right:10px;top:20px;color:var(--brand-pink);font-size:32px}
.page-title h1{font-size:48px;margin:10px 0;letter-spacing:-.045em}
.page-title p{color:var(--muted);line-height:1.85}
.image-document{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px;box-shadow:var(--shadow)}
.image-document img{width:100%;border-radius:10px}
.image-document.clickable{border:1px solid var(--line);cursor:zoom-in}
.doc-tabs{display:flex;gap:10px;margin-bottom:18px}
.doc-tabs button{border:1px solid var(--line);background:#fff;padding:11px 16px;border-radius:9px;color:#58627a;font-weight:800}
.doc-tabs button.active{background:linear-gradient(135deg,var(--brand),var(--brand-blue));color:#fff;border-color:transparent}

/* Modals */
.overlay{position:fixed;inset:0;z-index:120}
.overlay-bg{position:absolute;inset:0;background:rgba(20,28,49,.67);backdrop-filter:blur(9px)}
.overlay-close{
  position:absolute;right:14px;top:12px;width:39px;height:39px;border-radius:50%;
  border:0;background:#fff;color:#4b566e;font-size:22px;z-index:3
}
.search-panel,.media-panel,.work-detail-panel,.image-modal-panel{
  position:relative;width:min(920px,calc(100% - 24px));margin:7vh auto;
  background:#fff;border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.3)
}
.search-panel{padding:31px}
.search-panel h2{margin:5px 0 19px;font-size:31px}
.search-panel>input{width:100%;border:1px solid var(--line);padding:13px;border-radius:10px}
.search-results{margin-top:16px;display:grid;gap:8px;max-height:55vh;overflow:auto}
.search-result{display:flex;align-items:center;gap:12px;padding:9px;border-radius:9px;background:#f7f8fb}
.search-result img{width:72px;height:52px;object-fit:cover;border-radius:7px}
.search-result strong{display:block}.search-result span{font-size:11px;color:var(--muted)}
.media-panel{padding:16px}
.media-head{padding:4px 50px 14px 4px}
.media-head span{font-size:9px;color:var(--brand);font-weight:900;letter-spacing:.15em}
.media-head h2{margin:5px 0}
.media-panel video{width:100%;max-height:73vh;border-radius:11px;background:#0b1220}
.work-detail-panel{display:grid;grid-template-columns:43% 57%;overflow:hidden}
.work-detail-cover{background:#edf1f7}
.work-detail-cover img{width:100%;height:100%;object-fit:cover}
.work-detail-content{padding:36px}
.detail-category{font-size:10px;color:var(--brand);font-weight:900}
.work-detail-content h2{font-size:31px;margin:9px 0}
.work-detail-content>p{color:var(--muted);line-height:1.75}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.tag-row span{background:#edf7fa;color:#2494a7;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:800}
.detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.image-modal-panel{padding:14px;height:88vh;display:grid;place-items:center}
.image-modal-panel img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px}

/* Audio player */
.audio-player{
  position:fixed;left:50%;bottom:14px;z-index:100;transform:translate(-50%,150%);
  transition:.3s;width:min(900px,calc(100% - 24px));
  display:grid;grid-template-columns:54px 1fr auto minmax(170px,1.4fr) auto auto;
  gap:12px;align-items:center;background:rgba(255,255,255,.95);backdrop-filter:blur(19px);
  border:1px solid var(--line);border-radius:16px;padding:9px 11px;
  box-shadow:0 20px 60px rgba(36,47,78,.24)
}
.audio-player.open{transform:translate(-50%,0)}
.audio-player img{width:54px;height:54px;object-fit:cover;border-radius:9px}
.audio-meta{display:flex;flex-direction:column;min-width:0}
.audio-meta small{font-size:8px;color:var(--brand);font-weight:900}
.audio-meta strong,.audio-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-meta span,.audio-player time{font-size:10px;color:var(--muted)}
.audio-player button{border:0;background:transparent;font-size:20px}
.audio-player input{width:100%;accent-color:var(--brand)}

/* Reveal */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
[data-reveal].revealed{opacity:1;transform:none}
.category-card,.work-card{opacity:0;transform:translateY(20px);animation:cardIn .65s ease forwards}
.category-card:nth-child(2),.work-card:nth-child(2){animation-delay:.08s}
.category-card:nth-child(3),.work-card:nth-child(3){animation-delay:.16s}
.category-card:nth-child(4),.work-card:nth-child(4){animation-delay:.24s}
@keyframes cardIn{to{opacity:1;transform:none}}

@media(max-width:930px){
  .header-inner nav{display:none}
  .visual-hero{min-height:440px}
  .portfolio-intro{grid-template-columns:1fr;gap:36px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .library-layout{grid-template-columns:1fr}
  .filter-sidebar{position:static}
  .sub-list{display:flex;overflow:auto}
  .sub-btn{white-space:nowrap}
  .library-grid{grid-template-columns:repeat(2,1fr)}
  .work-detail-panel{grid-template-columns:1fr;max-height:90vh;overflow:auto}
  .work-detail-cover{height:280px}
  .audio-player{grid-template-columns:50px 1fr auto auto}
  .audio-player input,.audio-player time{display:none}
}
@media(max-width:640px){
  .brand img{width:151px}.search-open{display:none}.header-inner{height:64px}
  .visual-hero{aspect-ratio:1.12;min-height:440px;max-height:none}
  .hero-banner-image{object-position:center}
  .visual-meta-right,.hero-wave-b{display:none}
  .visual-meta-left{left:17px;bottom:17px}
  .hero-wave-a{width:58vw;left:4%;bottom:17%}
  .portfolio-intro{padding:67px 0}
  .portfolio-intro h1{font-size:48px}
  .intro-jp{font-size:14px}
  .title-underline span{display:none}
  .hero-stats{gap:17px}
  .category-grid,.work-grid,.library-grid,.info-links{grid-template-columns:1fr}
  .section{padding:68px 0}
  .section-head{display:block}.section-head>p{margin-top:13px}
  .section-jp{position:static;display:block;margin-top:5px;transform:none}
  .info-card{grid-template-columns:122px 1fr}
  .info-image{width:122px;height:145px}
  .info-card>div:last-child{padding:18px 15px 12px 0}
  .library-banner{height:270px}
  .library-banner-copy{left:22px;bottom:22px}
  .library-banner-copy h1{font-size:34px}
  .library-toolbar{display:block}
  .library-toolbar input{width:100%;margin-top:12px}
  .page-title h1{font-size:38px}
  .doc-tabs{overflow:auto}.doc-tabs button{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal],.category-card,.work-card{opacity:1;transform:none}
}


/* ======================================================
   Associated media: audio, final video and project capture
   remain inside the matching work detail.
   ====================================================== */
.associated-media{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line)
}
.associated-media-head{
  display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px
}
.associated-media-head span{
  display:block;color:var(--brand);font-size:8px;letter-spacing:.16em;font-weight:900
}
.associated-media-head h3{
  margin:5px 0 0;font-size:18px;letter-spacing:-.025em
}
.associated-media-head>small{
  max-width:230px;color:var(--muted);font-size:9px;line-height:1.55;text-align:right
}
.media-option-grid{display:grid;gap:9px}
.media-option{
  position:relative;width:100%;display:grid;grid-template-columns:47px 1fr 28px;
  gap:12px;align-items:center;text-align:left;border:1px solid var(--line);
  background:#fff;border-radius:13px;padding:11px 12px;color:var(--ink);
  transition:transform .2s,border-color .2s,box-shadow .2s
}
.media-option:hover{
  transform:translateX(4px);border-color:#b8dfe8;
  box-shadow:0 9px 24px rgba(43,57,92,.09)
}
.media-option-icon{
  width:47px;height:47px;border-radius:12px;display:grid;place-items:center;
  font-size:20px;font-weight:900
}
.media-option-audio .media-option-icon{background:#e9fbfd;color:#10a7c0}
.media-option-video .media-option-icon{background:#eef0ff;color:#526fe2}
.media-option-process .media-option-icon{background:#fff0f7;color:#eb72a8}
.media-option-copy{display:flex;flex-direction:column;min-width:0}
.media-option-copy small{
  font-size:7px;letter-spacing:.14em;color:var(--muted);font-weight:900
}
.media-option-copy b{font-size:13px;margin:2px 0}
.media-option-copy em{
  font-style:normal;color:var(--muted);font-size:9px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis
}
.media-option>i{font-style:normal;color:#98a1b5;font-size:17px;text-align:center}
.media-option[style*="display: none"]{display:none!important}

/* ======================================================
   Commission page: benefits and pricing are separate blocks
   ====================================================== */
.commission-main{padding-bottom:30px}
.commission-hero{
  display:flex;justify-content:space-between;align-items:end;gap:50px;
  padding:72px 0 47px
}
.commission-hero h1{
  margin:10px 0 12px;font-size:clamp(48px,6vw,76px);letter-spacing:-.055em
}
.commission-hero p{max-width:650px;color:var(--muted);line-height:1.8}
.commission-jp{
  display:inline-block;margin-left:14px;color:var(--brand-pink);
  font-family:"Shippori Mincho","Yu Mincho",serif;font-size:13px;font-weight:700;
  transform:rotate(-2deg)
}
.commission-mini-nav{display:flex;gap:10px}
.commission-mini-nav a{
  width:148px;padding:15px;border:1px solid var(--line);border-radius:13px;background:#fff;
  display:flex;flex-direction:column;box-shadow:0 7px 24px rgba(43,57,92,.06);
  transition:.22s
}
.commission-mini-nav a:hover{transform:translateY(-3px);border-color:#b9e1e8}
.commission-mini-nav span{font-size:9px;color:var(--brand);font-weight:900}
.commission-mini-nav b{margin-top:5px;font-size:13px}
.commission-section{padding:42px 0 82px}
.commission-section-price{
  margin-top:10px;padding-top:78px;border-top:1px dashed #cfd9e8
}
.commission-section-head{
  display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:20px
}
.section-index{font-size:9px;letter-spacing:.18em;color:var(--brand);font-weight:900}
.commission-section-head h2{
  margin:7px 0 6px;font-size:36px;letter-spacing:-.04em
}
.commission-section-head p{margin:0;color:var(--muted);line-height:1.7}
.language-chip{
  padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:#62708d;font-size:10px;font-weight:900;white-space:nowrap
}
.commission-document{
  position:relative;width:100%;padding:13px;border:1px solid var(--line);
  border-radius:18px;background:#fff;box-shadow:var(--shadow);cursor:zoom-in;
  overflow:hidden
}
.commission-document img{width:100%;border-radius:10px}
.zoom-hint{
  position:absolute;right:25px;bottom:25px;display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.93);border:1px solid var(--line);padding:8px 11px;
  border-radius:999px;color:var(--brand);font-size:11px;font-weight:900;
  box-shadow:0 5px 18px rgba(43,57,92,.13)
}
.commission-contact{
  margin-top:35px;margin-bottom:85px;padding:38px 42px;border-radius:19px;
  display:flex;align-items:center;justify-content:space-between;gap:35px;
  background:linear-gradient(135deg,#fff,#edfaff 58%,#fff2f8);
  border:1px solid var(--line);box-shadow:var(--shadow)
}
.commission-contact h2{margin:8px 0;font-size:28px;max-width:700px}

@media(max-width:760px){
  .associated-media-head{display:block}
  .associated-media-head>small{display:block;text-align:left;margin-top:6px}
  .commission-hero{display:block;padding-top:48px}
  .commission-mini-nav{margin-top:24px}
  .commission-mini-nav a{flex:1}
  .commission-section-head{align-items:start}
  .commission-contact{display:block;padding:28px 22px}
  .commission-contact .primary-btn{margin-top:18px}
}


/* ======================================================
   Featured works are video-first.
   Idle motion stays subtle; hover response is deliberately stronger.
   ====================================================== */
.featured-section{
  position:relative;overflow:hidden
}
.featured-section::before,
.featured-section::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)
}
.featured-section::before{
  width:310px;height:310px;left:-155px;top:15%;
  background:radial-gradient(circle,rgba(52,210,225,.11),transparent 67%);
  animation:featuredAmbientA 8s ease-in-out infinite
}
.featured-section::after{
  width:360px;height:360px;right:-180px;bottom:0;
  background:radial-gradient(circle,rgba(255,131,184,.10),transparent 67%);
  animation:featuredAmbientB 10s ease-in-out infinite
}
@keyframes featuredAmbientA{50%{transform:translate(30px,-18px) scale(1.12)}}
@keyframes featuredAmbientB{50%{transform:translate(-35px,20px) scale(.92)}}

.featured-card{
  position:relative;overflow:hidden;isolation:isolate;
  animation:
    cardIn .65s ease forwards,
    featuredIdleGlow 5.5s ease-in-out infinite;
  animation-delay:
    calc(var(--feature-index) * .075s),
    calc(.8s + var(--feature-index) * .22s);
  will-change:transform,box-shadow
}
.featured-card::before{
  content:"";position:absolute;z-index:4;inset:-2px;border-radius:17px;padding:2px;
  background:linear-gradient(120deg,
    transparent 0 18%,
    rgba(29,197,220,.72) 27%,
    rgba(91,113,241,.68) 48%,
    rgba(255,125,181,.68) 69%,
    transparent 80% 100%);
  background-size:260% 260%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.22;pointer-events:none;
  animation:featuredBorderTravel 7s linear infinite
}
.featured-card::after{
  content:"✦";position:absolute;z-index:5;right:14px;top:13px;
  color:#fff;font-size:17px;text-shadow:0 3px 12px rgba(43,70,140,.32);
  animation:featuredSpark 3.6s ease-in-out infinite
}
@keyframes featuredIdleGlow{
  0%,100%{box-shadow:0 6px 22px rgba(43,57,92,.06)}
  50%{box-shadow:0 13px 34px rgba(39,164,199,.16)}
}
@keyframes featuredBorderTravel{
  to{background-position:220% 120%}
}
@keyframes featuredSpark{
  0%,100%{transform:translateY(0) rotate(0deg) scale(.88);opacity:.65}
  50%{transform:translateY(-7px) rotate(18deg) scale(1.18);opacity:1}
}

.featured-card .work-cover{
  overflow:hidden
}
.featured-card .work-cover::before{
  content:"";position:absolute;z-index:2;inset:-45% -90%;
  background:linear-gradient(112deg,
    transparent 42%,
    rgba(255,255,255,.08) 46%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.10) 55%,
    transparent 59%);
  transform:translateX(-38%);
  animation:featuredShine 6.8s ease-in-out infinite;
  pointer-events:none
}
@keyframes featuredShine{
  0%,42%{transform:translateX(-46%)}
  62%,100%{transform:translateX(48%)}
}
.featured-card .work-cover img{
  animation:featuredImageBreath 7s ease-in-out infinite;
  animation-delay:calc(var(--feature-index) * -.45s)
}
@keyframes featuredImageBreath{
  0%,100%{transform:scale(1.015) translate3d(0,0,0)}
  50%{transform:scale(1.055) translate3d(-.7%,-.5%,0)}
}

.featured-ribbon{
  position:absolute;z-index:8;left:-2px;top:14px;
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(90deg,#11b9d4,#5274ee);
  color:#fff;padding:7px 12px 7px 10px;border-radius:0 999px 999px 0;
  box-shadow:0 7px 18px rgba(45,94,174,.2);
  transform:translateX(-3px);
  animation:featuredRibbonIdle 4.8s ease-in-out infinite
}
.featured-ribbon span{font-size:7px;letter-spacing:.15em;font-weight:900}
.featured-ribbon b{font-size:8px;letter-spacing:.09em}
@keyframes featuredRibbonIdle{
  50%{transform:translateX(2px)}
}

.featured-video-label{
  position:absolute;z-index:4;left:13px;bottom:13px;
  padding:6px 9px;border-radius:999px;
  background:rgba(27,39,76,.68);backdrop-filter:blur(8px);
  color:#fff;font-size:7px;font-weight:900;letter-spacing:.15em;
  transition:.28s
}
.featured-video-play{
  z-index:7;width:49px;height:49px;right:14px;bottom:14px;
  background:#fff;color:var(--brand);overflow:visible
}
.featured-video-play>span{
  display:block;position:relative;z-index:3;transition:.28s
}
.featured-video-play::before,
.featured-video-play::after{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:1;
  border:2px solid rgba(28,187,211,.42);
  animation:featuredPlayRipple 2.8s ease-out infinite
}
.featured-video-play::after{
  animation-delay:1.4s;border-color:rgba(255,126,181,.34)
}
@keyframes featuredPlayRipple{
  0%{transform:scale(.82);opacity:.78}
  75%,100%{transform:scale(1.68);opacity:0}
}

.featured-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
  color:var(--brand);font-size:8px;font-weight:900;letter-spacing:.15em
}
.featured-card-foot i{
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  background:#eafafd;font-style:normal;transition:.28s
}

/* Strong hover motion */
.featured-card:hover{
  border-color:rgba(32,185,211,.42);
  box-shadow:0 27px 65px rgba(45,94,174,.24)
}
.featured-card:hover::before{opacity:.82}
.featured-card:hover::after{
  animation-duration:.65s;
  transform:rotate(45deg) scale(1.38)
}
.featured-card:hover .work-cover img{
  animation-play-state:paused;
  transform:scale(1.15) rotate(.8deg) translate3d(-1%,-1%,0)
}
.featured-card:hover .work-cover::before{
  animation-duration:1.05s;
  transform:translateX(58%)
}
.featured-card:hover .featured-video-label{
  transform:translateX(7px);
  background:linear-gradient(90deg,rgba(22,187,211,.90),rgba(83,111,236,.90))
}
.featured-card:hover .featured-video-play{
  width:62px;height:62px;right:9px;bottom:8px;
  color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-blue),var(--brand-pink));
  box-shadow:0 13px 32px rgba(54,115,220,.34);
  transform:rotate(-7deg)
}
.featured-card:hover .featured-video-play>span{
  transform:scale(1.24) rotate(7deg)
}
.featured-card:hover .featured-video-play::before,
.featured-card:hover .featured-video-play::after{
  animation-duration:.8s;border-color:rgba(255,255,255,.62)
}
.featured-card:hover .work-body h3{
  color:#2774cf;transform:translateX(4px)
}
.featured-card .work-body h3{
  transition:color .25s,transform .25s
}
.featured-card:hover .featured-card-foot i{
  color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-blue));
  transform:translateX(4px) rotate(-8deg)
}

@media(max-width:900px){
  .featured-card .work-cover img{animation:none}
  .featured-card:hover .featured-video-play{width:54px;height:54px}
}
@media(prefers-reduced-motion:reduce){
  .featured-section::before,.featured-section::after,
  .featured-card,.featured-card::before,.featured-card::after,
  .featured-card .work-cover::before,.featured-card .work-cover img,
  .featured-ribbon,.featured-video-play::before,.featured-video-play::after{
    animation:none!important
  }
}


/* ======================================================
   v8 motion refinement
   ====================================================== */

/* The pricing sheet is intentionally smaller than the benefits document. */
.commission-section-price .commission-section-head{
  max-width:860px;
  margin-left:auto;
  margin-right:auto;
}
.commission-section-price .commission-document{
  display:block;
  width:min(720px,100%);
  margin-left:auto;
  margin-right:auto;
  padding:11px;
}
.commission-section-price .zoom-hint{
  right:20px;
  bottom:20px;
}

/* Replace the previous idle zoom / sweeping-light treatment.
   Idle state now uses a gentle staggered float, a rotating video ring,
   and a tiny animated signal indicator. */
.featured-card{
  animation:
    cardIn .65s ease forwards,
    featuredCardFloat 5.8s ease-in-out infinite;
  animation-delay:
    calc(var(--feature-index) * .075s),
    calc(.9s + var(--feature-index) * -.42s);
  transform-origin:center center;
}
@keyframes featuredCardFloat{
  0%,100%{
    translate:0 0;
    rotate:0deg;
    box-shadow:0 7px 23px rgba(43,57,92,.07);
  }
  50%{
    translate:0 -5px;
    rotate:.28deg;
    box-shadow:0 15px 34px rgba(53,120,180,.13);
  }
}

/* No breathing zoom and no large light sweep while idle. */
.featured-card .work-cover img{
  animation:none!important;
  transform:scale(1.01);
}
.featured-card .work-cover::before{
  display:none;
}
.featured-card::before{
  opacity:.3;
  animation:none;
  background:linear-gradient(135deg,
    rgba(19,186,213,.6),
    rgba(81,111,236,.45) 48%,
    rgba(255,128,183,.55));
}

/* Rotating ring around the video play button instead of expanding ripples. */
.featured-video-play::before{
  inset:-7px;
  border:2px solid transparent;
  border-top-color:rgba(22,185,212,.76);
  border-right-color:rgba(84,112,238,.58);
  animation:featuredOrbitRing 4.2s linear infinite;
  opacity:.9;
}
.featured-video-play::after{
  inset:-12px;
  border:1px dashed rgba(255,125,181,.58);
  animation:featuredOrbitRingReverse 6.4s linear infinite;
  opacity:.75;
}
@keyframes featuredOrbitRing{
  to{transform:rotate(360deg)}
}
@keyframes featuredOrbitRingReverse{
  to{transform:rotate(-360deg)}
}

/* Small animated video-signal bars beside FINAL MOVIE. */
.featured-video-label{
  display:flex;
  align-items:center;
  gap:8px;
}
.featured-video-label::after{
  content:"";
  width:25px;
  height:9px;
  border-radius:2px;
  background:
    linear-gradient(to top,rgba(255,255,255,.92) 0 100%) 0 100%/3px 35% no-repeat,
    linear-gradient(to top,rgba(255,255,255,.92) 0 100%) 6px 100%/3px 72% no-repeat,
    linear-gradient(to top,rgba(255,255,255,.92) 0 100%) 12px 100%/3px 48% no-repeat,
    linear-gradient(to top,rgba(255,255,255,.92) 0 100%) 18px 100%/3px 88% no-repeat;
  transform-origin:center bottom;
  animation:featuredSignal 1.15s steps(2,end) infinite;
}
@keyframes featuredSignal{
  0%,100%{transform:scaleY(.72);opacity:.7}
  50%{transform:scaleY(1.18);opacity:1}
}

/* Keep the corner star animated, but make it a soft orbit instead of a pulse. */
.featured-card::after{
  animation:featuredStarOrbit 5.2s ease-in-out infinite;
}
@keyframes featuredStarOrbit{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(.9);opacity:.68}
  35%{transform:translate(-5px,3px) rotate(18deg) scale(1.08);opacity:1}
  70%{transform:translate(2px,-5px) rotate(-10deg) scale(.96);opacity:.82}
}

/* Slightly more exaggerated hover than v7. */
.featured-card:hover{
  border-color:rgba(23,190,216,.58);
  box-shadow:
    0 34px 78px rgba(45,94,174,.28),
    0 0 0 3px rgba(78,115,242,.08);
}
.featured-card:hover::before{
  opacity:1;
  filter:drop-shadow(0 0 8px rgba(58,147,226,.34));
}
.featured-card:hover .work-cover img{
  transform:scale(1.19) rotate(1.15deg) translate3d(-1.2%,-1.2%,0)!important;
  filter:saturate(1.08) contrast(1.025);
}
.featured-card:hover .featured-video-label{
  transform:translateX(10px) translateY(-2px) scale(1.04);
}
.featured-card:hover .featured-video-play{
  width:69px;
  height:69px;
  right:5px;
  bottom:4px;
  transform:rotate(-11deg) scale(1.035);
  box-shadow:
    0 17px 38px rgba(54,115,220,.38),
    0 0 0 7px rgba(255,255,255,.28);
}
.featured-card:hover .featured-video-play>span{
  transform:scale(1.36) rotate(11deg);
}
.featured-card:hover .featured-video-play::before{
  animation-duration:1.25s;
}
.featured-card:hover .featured-video-play::after{
  animation-duration:1.7s;
}
.featured-card:hover .work-body{
  transform:translateY(-2px);
}
.featured-card .work-body{
  transition:transform .25s ease;
}
.featured-card:hover .work-body h3{
  transform:translateX(7px);
}
.featured-card:hover .featured-card-foot i{
  transform:translateX(7px) rotate(-12deg) scale(1.12);
}

@media(max-width:900px){
  .commission-section-price .commission-document{
    width:min(620px,100%);
  }
  .featured-card{
    animation:cardIn .65s ease forwards;
  }
}
@media(prefers-reduced-motion:reduce){
  .featured-card,
  .featured-card::after,
  .featured-video-play::before,
  .featured-video-play::after,
  .featured-video-label::after{
    animation:none!important;
  }
}


/* ======================================================
   v9: restore the preferred v7 hover feel.
   The v8 idle motion and smaller pricing layout stay unchanged.
   ====================================================== */
.featured-card:hover{
  border-color:rgba(32,185,211,.42);
  box-shadow:0 27px 65px rgba(45,94,174,.24);
}
.featured-card:hover::before{
  opacity:.82;
  filter:none;
}
.featured-card:hover::after{
  animation-duration:.65s;
  transform:rotate(45deg) scale(1.38);
}
.featured-card:hover .work-cover img{
  transform:scale(1.15) rotate(.8deg) translate3d(-1%,-1%,0)!important;
  filter:none;
}
.featured-card:hover .featured-video-label{
  transform:translateX(7px);
  background:linear-gradient(90deg,rgba(22,187,211,.90),rgba(83,111,236,.90));
}
.featured-card:hover .featured-video-play{
  width:62px;
  height:62px;
  right:9px;
  bottom:8px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-blue),var(--brand-pink));
  box-shadow:0 13px 32px rgba(54,115,220,.34);
  transform:rotate(-7deg);
}
.featured-card:hover .featured-video-play>span{
  transform:scale(1.24) rotate(7deg);
}
.featured-card:hover .featured-video-play::before,
.featured-card:hover .featured-video-play::after{
  animation-duration:.8s;
  border-color:rgba(255,255,255,.62);
}
.featured-card:hover .work-body{
  transform:none;
}
.featured-card:hover .work-body h3{
  color:#2774cf;
  transform:translateX(4px);
}
.featured-card:hover .featured-card-foot i{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-blue));
  transform:translateX(4px) rotate(-8deg);
}


/* ======================================================
   v11 — Exact v7 play-button motion, triggered only when
   the pointer is directly over the circular play icon.
   ====================================================== */

/* Keep the v8 idle rings outside hover. */
.featured-video-play{
  overflow:visible;
}

/* Exact visual size and gradient behavior from v7. */
.featured-video-play:hover{
  width:62px!important;
  height:62px!important;
  right:9px!important;
  bottom:8px!important;
  color:#fff!important;
  background:linear-gradient(
    135deg,
    var(--brand),
    var(--brand-blue),
    var(--brand-pink)
  )!important;
  box-shadow:0 13px 32px rgba(54,115,220,.34)!important;
  transform:rotate(-7deg)!important;
}

/* Restore the v7 triangle response. */
.featured-video-play:hover>span{
  transform:scale(1.24) rotate(7deg)!important;
  animation:none!important;
}

/* Restore the original v7 expanding ripple geometry. */
.featured-video-play:hover::before,
.featured-video-play:hover::after{
  content:"";
  position:absolute;
  inset:0!important;
  border-radius:50%;
  z-index:1;
  border:2px solid rgba(255,255,255,.62)!important;
  opacity:1;
  animation-name:featuredPlayRipple!important;
  animation-duration:.8s!important;
  animation-timing-function:ease-out!important;
  animation-iteration-count:infinite!important;
  animation-fill-mode:none!important;
}

/* v7 uses two offset waves. */
.featured-video-play:hover::before{
  animation-delay:0s!important;
}
.featured-video-play:hover::after{
  animation-delay:.4s!important;
}

/* Ensure the exact v7 ripple keyframes win over later versions. */
@keyframes featuredPlayRipple{
  0%{
    transform:scale(.82);
    opacity:.78;
  }
  75%,100%{
    transform:scale(1.68);
    opacity:0;
  }
}

/* Card hover must not replace the icon-hover ripple. */
.featured-card:hover .featured-video-play:hover::before,
.featured-card:hover .featured-video-play:hover::after{
  inset:0!important;
  border:2px solid rgba(255,255,255,.62)!important;
  animation-name:featuredPlayRipple!important;
  animation-duration:.8s!important;
  animation-timing-function:ease-out!important;
  animation-iteration-count:infinite!important;
}
.featured-card:hover .featured-video-play:hover::before{
  animation-delay:0s!important;
}
.featured-card:hover .featured-video-play:hover::after{
  animation-delay:.4s!important;
}

@media(max-width:900px){
  .featured-video-play:hover{
    width:54px!important;
    height:54px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .featured-video-play:hover::before,
  .featured-video-play:hover::after{
    animation:none!important;
  }
}


/* ======================================================
   v12 — category covers show the full supplied artwork.
   ====================================================== */
.category-cover{
  aspect-ratio:1.72;
  display:grid;
  place-items:center;
  padding:14px;
  background:
    linear-gradient(135deg,#ffffff,#f2f7fd);
}
.category-cover img{
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center!important;
  transform:scale(.94)!important;
  border-radius:10px;
}
.category-card:hover .category-cover img{
  transform:scale(.975)!important;
}
.category-cover::after{
  background:linear-gradient(180deg,transparent 73%,rgba(31,46,82,.08))!important;
}
.category-count{
  right:20px;
  top:20px;
}

/* ======================================================
   v12 — completely new featured-work animation language.
   Static: no floating card, only small status and waveform motion.
   Hover: sliding movie panel, advancing cover, moving gradient frame.
   ====================================================== */

/* Remove the older idle floating / breathing behavior. */
.featured-motion-v12{
  animation:cardIn .65s ease forwards!important;
  animation-delay:calc(var(--feature-index) * .075s)!important;
  translate:0 0!important;
  rotate:0deg!important;
  box-shadow:0 7px 23px rgba(43,57,92,.075);
  transition:
    transform .42s cubic-bezier(.18,.8,.24,1),
    box-shadow .42s ease,
    border-color .35s ease;
}
.featured-motion-v12::before{
  inset:0;
  border-radius:15px;
  padding:2px;
  opacity:.32;
  background:
    linear-gradient(
      115deg,
      rgba(21,190,215,.15) 0%,
      rgba(78,115,242,.7) 26%,
      rgba(255,130,184,.58) 50%,
      rgba(21,190,215,.7) 76%,
      rgba(21,190,215,.15) 100%
    );
  background-size:300% 100%;
  animation:featuredFrameFlow 7.5s linear infinite!important;
}
@keyframes featuredFrameFlow{
  to{background-position:300% 0}
}
.featured-motion-v12::after{
  content:"";
  display:none;
}

/* Keep the cover still when idle. */
.featured-motion-v12 .work-cover img{
  animation:none!important;
  transform:scale(1.015)!important;
  transition:
    transform .6s cubic-bezier(.18,.8,.24,1),
    filter .45s ease!important;
}
.featured-motion-v12 .work-cover::before{
  display:none!important;
}

/* Small REC-style status, deliberately minimal. */
.featured-status{
  position:absolute;
  z-index:5;
  left:13px;
  top:13px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(27,39,76,.66);
  backdrop-filter:blur(9px);
  color:#fff;
}
.featured-status b{
  font-size:7px;
  letter-spacing:.14em;
}
.featured-live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#69ecff;
  box-shadow:0 0 0 0 rgba(105,236,255,.55);
  animation:featuredStatusPulse 2s ease-out infinite;
}
@keyframes featuredStatusPulse{
  0%{box-shadow:0 0 0 0 rgba(105,236,255,.55)}
  70%,100%{box-shadow:0 0 0 7px rgba(105,236,255,0)}
}

/* Idle animated waveform at the lower left of the cover. */
.featured-wave{
  position:absolute;
  z-index:5;
  left:14px;
  bottom:13px;
  height:23px;
  display:flex;
  align-items:end;
  gap:3px;
  padding:4px 7px;
  border-radius:7px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(31,53,91,.12);
  transition:.35s ease;
}
.featured-wave i{
  display:block;
  width:3px;
  height:8px;
  border-radius:3px;
  background:linear-gradient(to top,var(--brand),var(--brand-blue));
  transform-origin:center bottom;
  animation:featuredWaveMeter .9s ease-in-out infinite alternate;
}
.featured-wave i:nth-child(2){height:14px;animation-delay:-.28s}
.featured-wave i:nth-child(3){height:10px;animation-delay:-.51s}
.featured-wave i:nth-child(4){height:18px;animation-delay:-.17s}
.featured-wave i:nth-child(5){height:12px;animation-delay:-.62s}
.featured-wave i:nth-child(6){height:20px;animation-delay:-.39s}
.featured-wave i:nth-child(7){height:9px;animation-delay:-.74s}
.featured-wave i:nth-child(8){height:15px;animation-delay:-.12s}
@keyframes featuredWaveMeter{
  from{transform:scaleY(.38);opacity:.55}
  to{transform:scaleY(1);opacity:1}
}

/* New panel is hidden beyond the left edge until hover. */
.featured-hover-layer{
  position:absolute;
  z-index:4;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:28px 76px 28px 24px;
  color:#fff;
  background:
    linear-gradient(
      90deg,
      rgba(13,39,82,.94) 0%,
      rgba(23,145,185,.82) 48%,
      rgba(88,100,218,.4) 78%,
      transparent 100%
    );
  clip-path:polygon(0 0,0 0,0 100%,0 100%);
  opacity:0;
  transition:
    clip-path .62s cubic-bezier(.18,.8,.24,1),
    opacity .28s ease;
  pointer-events:none;
}
.featured-hover-layer span{
  font-size:7px;
  font-weight:900;
  letter-spacing:.15em;
  opacity:.82;
}
.featured-hover-layer b{
  margin:6px 0 4px;
  font-size:22px;
  letter-spacing:.035em;
}
.featured-hover-layer small{
  font-size:10px;
  opacity:.86;
}

/* Bottom mini waveform replaces the old simple arrow-only footer. */
.featured-card-foot{
  gap:10px;
}
.featured-mini-wave{
  margin-left:auto;
  height:16px;
  display:flex;
  align-items:center;
  gap:2px;
}
.featured-mini-wave i{
  width:2px;
  height:6px;
  border-radius:2px;
  background:var(--brand);
  animation:featuredMiniWave .75s ease-in-out infinite alternate;
}
.featured-mini-wave i:nth-child(2){height:11px;animation-delay:-.2s}
.featured-mini-wave i:nth-child(3){height:8px;animation-delay:-.4s}
.featured-mini-wave i:nth-child(4){height:13px;animation-delay:-.1s}
.featured-mini-wave i:nth-child(5){height:7px;animation-delay:-.32s}
@keyframes featuredMiniWave{
  from{transform:scaleY(.45);opacity:.5}
  to{transform:scaleY(1);opacity:1}
}
.featured-arrow{
  margin-left:2px;
}

/* New hover behavior. */
.featured-motion-v12:hover{
  transform:translateY(-9px) scale(1.018)!important;
  border-color:rgba(31,187,213,.5)!important;
  box-shadow:
    0 28px 66px rgba(45,94,174,.24),
    0 0 0 4px rgba(89,113,239,.07)!important;
}
.featured-motion-v12:hover::before{
  opacity:1!important;
  animation-duration:1.7s!important;
}
.featured-motion-v12:hover .work-cover img{
  transform:scale(1.105) translateX(4.5%)!important;
  filter:saturate(1.07) contrast(1.02);
}
.featured-motion-v12:hover .featured-hover-layer{
  clip-path:polygon(0 0,78% 0,62% 100%,0 100%);
  opacity:1;
}
.featured-motion-v12:hover .featured-status{
  transform:translateY(-35px);
  opacity:0;
}
.featured-status{
  transition:.35s ease;
}
.featured-motion-v12:hover .featured-wave{
  transform:translateX(-65px);
  opacity:0;
}
.featured-motion-v12:hover .featured-video-play{
  z-index:8;
}
.featured-motion-v12:hover .work-body h3{
  color:#2774cf;
  transform:translateX(5px);
}
.featured-motion-v12:hover .featured-card-foot{
  color:var(--brand-blue);
}
.featured-motion-v12:hover .featured-mini-wave i{
  background:var(--brand-pink);
  animation-duration:.42s;
}
.featured-motion-v12:hover .featured-arrow{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-blue));
  transform:translateX(5px) rotate(-9deg);
}

/* Keep the exact v7 button-only ripple from v11. */
.featured-motion-v12 .featured-video-play:hover{
  width:62px!important;
  height:62px!important;
  right:9px!important;
  bottom:8px!important;
}

/* Hide the older FINAL MOVIE pill if cached markup is encountered. */
.featured-motion-v12 .featured-video-label{
  display:none!important;
}

@media(max-width:900px){
  .category-cover{
    padding:10px;
  }
  .featured-motion-v12:hover .featured-hover-layer{
    clip-path:polygon(0 0,82% 0,67% 100%,0 100%);
  }
}
@media(max-width:620px){
  .category-cover{
    aspect-ratio:1.58;
    padding:8px;
  }
  .category-cover img{
    transform:scale(.97)!important;
  }
  .featured-hover-layer{
    padding-left:18px;
  }
  .featured-hover-layer b{
    font-size:18px;
  }
}
@media(prefers-reduced-motion:reduce){
  .featured-motion-v12::before,
  .featured-live-dot,
  .featured-wave i,
  .featured-mini-wave i{
    animation:none!important;
  }
}


/* ======================================================
   v13 — High-FPS stage FX for featured video cards.
   Uses transforms and opacity for smooth GPU animation.
   ====================================================== */

.featured-motion-v13{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transform-style:preserve-3d;
  animation:cardIn .55s cubic-bezier(.2,.8,.25,1) forwards!important;
  animation-delay:calc(var(--feature-index)*.055s)!important;
  transition:
    box-shadow .32s ease,
    border-color .32s ease;
  will-change:transform;
}
.featured-motion-v13::before,
.featured-motion-v13::after{
  display:none!important;
}

/* Animated energy frame rotates around card perimeter. */
.featured-energy-frame{
  position:absolute;
  z-index:-1;
  inset:-3px;
  border-radius:18px;
  overflow:hidden;
  opacity:.28;
  transition:opacity .28s ease,transform .5s ease;
}
.featured-energy-frame::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:180%;aspect-ratio:1;
  background:conic-gradient(
    from 0deg,
    transparent 0 11%,
    #55ecff 15%,
    #5275f2 25%,
    transparent 34% 46%,
    #ff75ba 52%,
    #8e6df1 62%,
    transparent 70% 83%,
    #55ecff 89%,
    transparent 96%
  );
  transform:translate(-50%,-50%);
  animation:v13EnergyRotate 4.8s linear infinite;
}
.featured-energy-frame::after{
  content:"";
  position:absolute;
  inset:3px;
  background:#fff;
  border-radius:15px;
}
@keyframes v13EnergyRotate{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

/* Image stack and chromatic ghosts. */
.featured-motion-v13 .work-cover{
  isolation:isolate;
  overflow:hidden;
  background:#101936;
}
.featured-main-image,
.featured-ghost{
  position:absolute!important;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transform:scale(1.02);
  transition:
    transform .46s cubic-bezier(.18,.82,.2,1),
    opacity .25s ease;
  will-change:transform,opacity;
}
.featured-main-image{z-index:1}
.featured-ghost{
  z-index:2;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.featured-ghost-cyan{
  filter:sepia(1) saturate(6) hue-rotate(135deg);
  clip-path:polygon(0 8%,100% 8%,100% 23%,0 23%,0 48%,100% 48%,100% 61%,0 61%);
}
.featured-ghost-pink{
  filter:sepia(1) saturate(7) hue-rotate(278deg);
  clip-path:polygon(0 27%,100% 27%,100% 40%,0 40%,0 67%,100% 67%,100% 84%,0 84%);
}

/* Cursor-follow light. */
.featured-cursor-light{
  position:absolute;
  z-index:3;
  inset:0;
  opacity:0;
  background:
    radial-gradient(
      circle 150px at var(--mx) var(--my),
      rgba(255,255,255,.52),
      rgba(86,221,242,.2) 28%,
      rgba(99,104,239,.12) 45%,
      transparent 70%
    );
  mix-blend-mode:screen;
  transition:opacity .22s ease;
  pointer-events:none;
}

/* Digital grid and fast scanline. */
.featured-digital-grid{
  position:absolute;
  z-index:4;
  inset:0;
  opacity:0;
  background:
    linear-gradient(rgba(109,231,244,.25) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,231,244,.18) 1px,transparent 1px);
  background-size:24px 24px;
  transform:perspective(500px) rotateX(67deg) translateY(42%);
  transform-origin:center bottom;
  transition:opacity .25s ease,transform .45s cubic-bezier(.18,.82,.2,1);
  pointer-events:none;
}
.featured-scanline{
  position:absolute;
  z-index:5;
  left:-10%;right:-10%;
  top:-35%;
  height:34%;
  opacity:0;
  background:linear-gradient(
    transparent,
    rgba(255,255,255,.65) 42%,
    rgba(84,223,241,.82) 49%,
    rgba(93,101,238,.36) 55%,
    transparent
  );
  transform:skewY(-7deg);
  pointer-events:none;
}

/* Stage copy appears with a fast elastic motion. */
.featured-stage-copy{
  position:absolute;
  z-index:7;
  left:18px;
  top:50%;
  color:#fff;
  opacity:0;
  transform:translate3d(-36px,-50%,0) scale(.88);
  transition:
    opacity .2s ease,
    transform .45s cubic-bezier(.16,1.25,.3,1);
  text-shadow:0 3px 18px rgba(13,28,70,.45);
  pointer-events:none;
}
.featured-stage-copy span{
  display:block;
  font-size:7px;
  font-weight:900;
  letter-spacing:.15em;
  opacity:.82;
}
.featured-stage-copy b{
  display:block;
  margin:2px 0;
  font-size:34px;
  line-height:1;
  letter-spacing:.05em;
}
.featured-stage-copy small{
  font-size:9px;
}

/* Particles burst around the play button. */
.featured-particles{
  position:absolute;
  z-index:8;
  right:33px;
  bottom:33px;
  width:1px;height:1px;
  pointer-events:none;
}
.featured-particles i{
  position:absolute;
  width:6px;height:6px;
  border-radius:50%;
  background:#fff;
  opacity:0;
  box-shadow:0 0 9px rgba(255,255,255,.85);
}
.featured-particles i:nth-child(1){--px:-52px;--py:-38px;background:#62e9ff}
.featured-particles i:nth-child(2){--px:-14px;--py:-63px;background:#ff88c5}
.featured-particles i:nth-child(3){--px:32px;--py:-52px;background:#fff07b}
.featured-particles i:nth-child(4){--px:56px;--py:-16px;background:#8e82ff}
.featured-particles i:nth-child(5){--px:43px;--py:29px;background:#65eaf5}
.featured-particles i:nth-child(6){--px:3px;--py:50px;background:#ff7fb9}
.featured-particles i:nth-child(7){--px:-37px;--py:31px;background:#fff}
.featured-particles i:nth-child(8){--px:-62px;--py:1px;background:#9a8aff}
@keyframes v13ParticleBurst{
  0%{transform:translate(0,0) scale(.2);opacity:0}
  18%{opacity:1}
  72%{opacity:.9}
  100%{transform:translate(var(--px),var(--py)) scale(1.15);opacity:0}
}

/* Footer spectrum. */
.featured-mini-spectrum{
  margin-left:auto;
  display:flex;
  align-items:end;
  gap:2px;
  height:16px;
}
.featured-mini-spectrum i{
  display:block;
  width:2px;
  height:5px;
  border-radius:3px;
  background:linear-gradient(to top,var(--brand),var(--brand-blue),var(--brand-pink));
  transform-origin:center bottom;
  animation:v13Spectrum .58s ease-in-out infinite alternate;
}
.featured-mini-spectrum i:nth-child(2){height:12px;animation-delay:-.12s}
.featured-mini-spectrum i:nth-child(3){height:8px;animation-delay:-.36s}
.featured-mini-spectrum i:nth-child(4){height:15px;animation-delay:-.24s}
.featured-mini-spectrum i:nth-child(5){height:10px;animation-delay:-.47s}
.featured-mini-spectrum i:nth-child(6){height:13px;animation-delay:-.08s}
.featured-mini-spectrum i:nth-child(7){height:6px;animation-delay:-.3s}
@keyframes v13Spectrum{
  from{transform:scaleY(.25);opacity:.5}
  to{transform:scaleY(1);opacity:1}
}

/* Dramatic hover state. */
.featured-motion-v13:hover{
  z-index:10;
  border-color:rgba(79,111,241,.42);
  box-shadow:
    0 35px 85px rgba(41,74,161,.32),
    0 0 0 5px rgba(76,218,235,.08);
}
.featured-motion-v13:hover .featured-energy-frame{
  opacity:1;
  transform:scale(1.018);
}
.featured-motion-v13:hover .featured-energy-frame::before{
  animation-duration:1.05s;
}
.featured-motion-v13:hover .featured-main-image{
  transform:scale(1.16) translate3d(4%,0,0)!important;
}
.featured-motion-v13:hover .featured-ghost{
  opacity:.48;
}
.featured-motion-v13:hover .featured-ghost-cyan{
  transform:scale(1.16) translate3d(1%,0,0);
  animation:v13GhostCyan .34s steps(2,end) infinite;
}
.featured-motion-v13:hover .featured-ghost-pink{
  transform:scale(1.16) translate3d(7%,0,0);
  animation:v13GhostPink .29s steps(2,end) infinite reverse;
}
@keyframes v13GhostCyan{
  0%,100%{translate:-5px 0}
  50%{translate:7px -2px}
}
@keyframes v13GhostPink{
  0%,100%{translate:6px 1px}
  50%{translate:-8px 3px}
}
.featured-motion-v13:hover .featured-cursor-light{
  opacity:1;
}
.featured-motion-v13:hover .featured-digital-grid{
  opacity:.48;
  transform:perspective(500px) rotateX(62deg) translateY(31%);
}
.featured-motion-v13:hover .featured-scanline{
  opacity:.9;
  animation:v13Scanline .68s linear infinite;
}
@keyframes v13Scanline{
  from{transform:translateY(0) skewY(-7deg)}
  to{transform:translateY(470%) skewY(-7deg)}
}
.featured-motion-v13:hover .featured-stage-copy{
  opacity:1;
  transform:translate3d(0,-50%,0) scale(1);
}
.featured-motion-v13:hover .featured-particles i{
  animation:v13ParticleBurst .92s cubic-bezier(.15,.66,.27,1) infinite;
}
.featured-motion-v13:hover .featured-particles i:nth-child(2){animation-delay:.08s}
.featured-motion-v13:hover .featured-particles i:nth-child(3){animation-delay:.16s}
.featured-motion-v13:hover .featured-particles i:nth-child(4){animation-delay:.24s}
.featured-motion-v13:hover .featured-particles i:nth-child(5){animation-delay:.32s}
.featured-motion-v13:hover .featured-particles i:nth-child(6){animation-delay:.4s}
.featured-motion-v13:hover .featured-particles i:nth-child(7){animation-delay:.48s}
.featured-motion-v13:hover .featured-particles i:nth-child(8){animation-delay:.56s}
.featured-motion-v13:hover .work-body h3{
  color:#466fe2;
  transform:translateX(7px);
}
.featured-motion-v13:hover .featured-mini-spectrum i{
  animation-duration:.26s;
}
.featured-motion-v13:hover .featured-arrow{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-blue),var(--brand-pink));
  transform:translateX(7px) rotate(-12deg) scale(1.12);
}

/* Keep the v7 direct-icon ripple. */
.featured-motion-v13 .featured-video-play{
  z-index:12;
}
.featured-motion-v13 .featured-video-play:hover{
  width:64px!important;
  height:64px!important;
}

/* Hide elements from previous motion versions, if cached markup remains. */
.featured-motion-v13 .featured-status,
.featured-motion-v13 .featured-wave,
.featured-motion-v13 .featured-hover-layer,
.featured-motion-v13 .featured-video-label,
.featured-motion-v13 .featured-mini-wave{
  display:none!important;
}

@media(max-width:900px){
  .featured-motion-v13{
    transform:none!important;
  }
  .featured-motion-v13:hover .featured-main-image{
    transform:scale(1.1)!important;
  }
  .featured-digital-grid,
  .featured-ghost{
    display:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .featured-energy-frame::before,
  .featured-mini-spectrum i,
  .featured-motion-v13:hover .featured-scanline,
  .featured-motion-v13:hover .featured-ghost,
  .featured-motion-v13:hover .featured-particles i{
    animation:none!important;
  }
}


/* ======================================================
   v14 — Category stage: fill left/right space and animate
   the complete "选择音乐大类" section.
   ====================================================== */
.category-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 2% 18%,rgba(73,213,229,.22),transparent 22%),
    radial-gradient(circle at 98% 75%,rgba(255,135,189,.17),transparent 25%),
    linear-gradient(110deg,#edf8fc 0%,#f2f5fb 28%,#f3f4fb 72%,#faf0f7 100%)!important;
}
.category-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  opacity:.42;
  background-image:
    linear-gradient(rgba(64,144,206,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(64,144,206,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(90deg,#000,transparent 25%,transparent 75%,#000);
}
.category-section::after{
  content:"";
  position:absolute;
  z-index:-3;
  left:50%;
  top:50%;
  width:min(1240px,88vw);
  height:88%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(86,143,213,.08);
  border-radius:38px;
  box-shadow:
    0 0 0 13px rgba(255,255,255,.18),
    0 30px 90px rgba(56,87,146,.06);
  pointer-events:none;
}
.category-shell{
  position:relative;
  z-index:3;
}
.category-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.category-side-rail{
  position:absolute;
  top:50%;
  width:168px;
  height:78%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:rgba(52,103,174,.62);
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.category-side-rail-left{left:22px}
.category-side-rail-right{right:22px;align-items:flex-end}
.category-side-rail span{
  font-family:"Shippori Mincho","Yu Mincho",serif;
  font-size:18px;
  letter-spacing:.28em;
  color:rgba(73,117,199,.42);
}
.category-side-rail b{
  margin-top:24px;
  font-size:8px;
  letter-spacing:.25em;
  color:rgba(36,164,192,.55);
}
.category-side-rail i{
  width:1px;
  height:92px;
  margin-top:22px;
  background:linear-gradient(transparent,var(--brand),var(--brand-pink),transparent);
  animation:categoryRailPulse 3.5s ease-in-out infinite;
}
@keyframes categoryRailPulse{
  0%,100%{transform:scaleY(.55);opacity:.45}
  50%{transform:scaleY(1);opacity:1}
}
.category-bg-wave{
  position:absolute;
  top:50%;
  width:205px;
  height:76%;
  transform:translateY(-50%);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  opacity:.32;
}
.category-bg-wave path{
  stroke-dasharray:10 12;
  animation:categorySideWave 11s linear infinite;
}
.category-bg-wave-left{left:54px;stroke:#46c8df}
.category-bg-wave-right{right:54px;stroke:#e98bb8}
.category-bg-wave-right path{animation-direction:reverse}
@keyframes categorySideWave{
  to{stroke-dashoffset:-220}
}
.category-orbit{
  position:absolute;
  width:145px;
  height:145px;
  border:1px solid rgba(72,143,208,.17);
  border-radius:50%;
  animation:categoryOrbitTurn 13s linear infinite;
}
.category-orbit::before,
.category-orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(91,112,224,.16);
}
.category-orbit::before{inset:18px}
.category-orbit::after{inset:38px}
.category-orbit i{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 16px rgba(17,185,212,.48);
}
.category-orbit i:nth-child(1){left:50%;top:-4px}
.category-orbit i:nth-child(2){right:7px;bottom:24px;background:var(--brand-pink)}
.category-orbit i:nth-child(3){left:6px;bottom:29px;background:var(--brand-blue)}
.orbit-left{left:24px;bottom:9%}
.orbit-right{right:24px;top:12%;animation-direction:reverse}
@keyframes categoryOrbitTurn{
  to{transform:rotate(360deg)}
}

/* Animated title lockup */
.category-section-head{
  position:relative;
}
.category-title-lockup h2{
  position:relative;
  width:max-content;
  overflow:hidden;
}
.category-title-lockup h2::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-125%) skewX(-18deg);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.85),
    rgba(88,218,235,.38),
    transparent
  );
  mix-blend-mode:screen;
  animation:categoryTitleShine 5.4s ease-in-out infinite;
}
@keyframes categoryTitleShine{
  0%,54%{transform:translateX(-125%) skewX(-18deg)}
  76%,100%{transform:translateX(135%) skewX(-18deg)}
}
.category-title-lockup .section-jp{
  animation:categoryJapaneseFloat 4.2s ease-in-out infinite;
}
@keyframes categoryJapaneseFloat{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(-1.5deg) translateY(-4px)}
}
.category-title-wave{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
}
.category-title-wave svg{
  width:280px;
  height:35px;
  fill:none;
  stroke:var(--brand);
  stroke-width:2.4;
  stroke-linecap:round;
}
.category-title-wave path{
  stroke-dasharray:11 10;
  animation:categoryTitleWaveMove 7s linear infinite;
}
.category-title-wave span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
  color:#9b84c7;
}
@keyframes categoryTitleWaveMove{
  to{stroke-dashoffset:-168}
}

/* Category card stage */
.category-card-stage{
  position:relative;
  overflow:visible;
  isolation:isolate;
  transform-style:preserve-3d;
  background:rgba(255,255,255,.94);
  transition:
    box-shadow .38s ease,
    border-color .3s ease;
}
.category-card-stage::after{
  display:none!important;
}
.category-energy-border{
  position:absolute;
  z-index:-1;
  inset:-2px;
  border-radius:20px;
  overflow:hidden;
  opacity:.2;
  transition:opacity .25s ease,transform .4s ease;
}
.category-energy-border::before{
  content:"";
  position:absolute;
  width:170%;
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    transparent 0 13%,
    #55e5f4 18%,
    #5375ef 27%,
    transparent 35% 49%,
    #ff87bd 56%,
    #9773ec 67%,
    transparent 76% 89%,
    #55e5f4 94%,
    transparent
  );
  animation:categoryEnergySpin 7.5s linear infinite;
}
.category-energy-border::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:17px;
  background:#fff;
}
@keyframes categoryEnergySpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
.category-card-stage .category-cover{
  position:relative;
  overflow:hidden;
}
.category-card-stage .category-cover img{
  position:relative;
  z-index:1;
  transition:
    transform .62s cubic-bezier(.18,.82,.2,1),
    filter .36s ease!important;
}
.category-cover-glow{
  position:absolute;
  z-index:2;
  inset:0;
  opacity:0;
  background:
    radial-gradient(
      circle 150px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.7),
      rgba(76,218,235,.22) 34%,
      rgba(92,109,236,.12) 52%,
      transparent 70%
    );
  mix-blend-mode:screen;
  transition:opacity .24s ease;
}
.category-scan{
  position:absolute;
  z-index:3;
  left:-10%;
  right:-10%;
  top:-40%;
  height:30%;
  opacity:0;
  transform:skewY(-5deg);
  background:linear-gradient(
    transparent,
    rgba(255,255,255,.75) 45%,
    rgba(69,221,237,.75) 52%,
    rgba(255,139,190,.25) 60%,
    transparent
  );
}
.category-hover-copy{
  position:absolute;
  z-index:4;
  left:22px;
  bottom:22px;
  display:flex;
  flex-direction:column;
  color:#fff;
  opacity:0;
  transform:translate3d(-25px,14px,0);
  transition:
    opacity .25s ease,
    transform .48s cubic-bezier(.16,1.18,.3,1);
  text-shadow:0 4px 18px rgba(20,34,78,.45);
}
.category-hover-copy small{
  font-size:7px;
  font-weight:900;
  letter-spacing:.16em;
}
.category-hover-copy b{
  font-size:29px;
  margin:4px 0;
}
.category-hover-copy span{
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
}
.category-corner-mark{
  position:absolute;
  z-index:5;
  right:14px;
  bottom:14px;
  width:48px;
  height:48px;
  opacity:.7;
  transition:transform .38s ease,opacity .25s ease;
}
.category-corner-mark i{
  position:absolute;
  background:#fff;
}
.category-corner-mark i:first-child{
  width:100%;
  height:1px;
  right:0;
  bottom:0;
}
.category-corner-mark i:last-child{
  width:1px;
  height:100%;
  right:0;
  bottom:0;
}
.category-card-footer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--brand);
}
.category-card-footer b{
  margin-left:auto;
  font-size:8px;
  letter-spacing:.14em;
}
.category-card-footer em{
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eafafd;
  font-style:normal;
  transition:.3s ease;
}
.category-mini-meter{
  height:16px;
  display:flex;
  align-items:end;
  gap:2px;
}
.category-mini-meter i{
  display:block;
  width:2px;
  height:6px;
  border-radius:2px;
  background:linear-gradient(to top,var(--brand),var(--brand-blue));
  transform-origin:center bottom;
  animation:categoryMeter .78s ease-in-out infinite alternate;
}
.category-mini-meter i:nth-child(2){height:12px;animation-delay:-.2s}
.category-mini-meter i:nth-child(3){height:8px;animation-delay:-.4s}
.category-mini-meter i:nth-child(4){height:14px;animation-delay:-.1s}
.category-mini-meter i:nth-child(5){height:7px;animation-delay:-.34s}
@keyframes categoryMeter{
  from{transform:scaleY(.35);opacity:.55}
  to{transform:scaleY(1);opacity:1}
}

/* Hover response */
.category-card-stage:hover{
  z-index:8;
  border-color:rgba(50,192,217,.5)!important;
  box-shadow:
    0 30px 75px rgba(43,83,159,.24),
    0 0 0 5px rgba(78,115,242,.07)!important;
}
.category-card-stage:hover .category-energy-border{
  opacity:1;
  transform:scale(1.012);
}
.category-card-stage:hover .category-energy-border::before{
  animation-duration:1.25s;
}
.category-card-stage:hover .category-cover img{
  transform:scale(1.035)!important;
  filter:saturate(1.08) contrast(1.025);
}
.category-card-stage:hover .category-cover::after{
  background:linear-gradient(
    90deg,
    rgba(18,42,88,.68),
    rgba(18,132,174,.27) 52%,
    transparent 80%
  )!important;
}
.category-card-stage:hover .category-cover-glow{
  opacity:1;
}
.category-card-stage:hover .category-scan{
  opacity:.88;
  animation:categoryScanMove .72s linear infinite;
}
@keyframes categoryScanMove{
  from{transform:translateY(0) skewY(-5deg)}
  to{transform:translateY(520%) skewY(-5deg)}
}
.category-card-stage:hover .category-hover-copy{
  opacity:1;
  transform:translate3d(0,0,0);
}
.category-card-stage:hover .category-corner-mark{
  opacity:1;
  transform:translate(-5px,-5px) scale(1.15);
}
.category-card-stage:hover .category-count{
  transform:translateY(-35px);
  opacity:0;
}
.category-count{
  transition:.3s ease;
}
.category-card-stage:hover .category-card-footer em{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-blue),var(--brand-pink));
  transform:translateX(5px) rotate(-10deg);
}
.category-card-stage:hover .category-mini-meter i{
  background:linear-gradient(to top,var(--brand-pink),var(--brand-blue));
  animation-duration:.34s;
}

@media(max-width:1450px){
  .category-side-rail{opacity:.55}
  .category-bg-wave{opacity:.2}
}
@media(max-width:1180px){
  .category-side-rail,
  .category-bg-wave,
  .category-orbit{display:none}
  .category-section::before{
    mask-image:none;
    opacity:.22;
  }
}
@media(max-width:900px){
  .category-card-stage{
    transform:none!important;
  }
  .category-title-wave svg{width:220px}
}
@media(prefers-reduced-motion:reduce){
  .category-side-rail i,
  .category-bg-wave path,
  .category-orbit,
  .category-title-lockup h2::after,
  .category-title-lockup .section-jp,
  .category-title-wave path,
  .category-energy-border::before,
  .category-mini-meter i,
  .category-card-stage:hover .category-scan{
    animation:none!important;
  }
}


/* ======================================================
   v15 — Hover fullscreen preview for the two information cards
   ====================================================== */
.info-hover-preview{
  position:fixed;
  inset:0;
  z-index:115;
  display:grid;
  place-items:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}
.info-hover-preview.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease,visibility 0s;
}
.info-hover-preview-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 17% 20%,rgba(58,217,231,.18),transparent 30%),
    radial-gradient(circle at 83% 78%,rgba(255,130,183,.16),transparent 32%),
    rgba(235,240,250,.88);
  backdrop-filter:blur(22px) saturate(1.08);
}
.info-hover-preview-card{
  position:relative;
  z-index:2;
  width:min(1180px,90vw);
  height:min(760px,82vh);
  display:grid;
  grid-template-columns:minmax(360px,48%) 1fr;
  overflow:hidden;
  border:1px solid rgba(88,126,201,.16);
  border-radius:30px;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 50px 140px rgba(38,60,111,.26),
    0 0 0 10px rgba(255,255,255,.28);
  transform:scale(.72) translateY(50px);
  opacity:0;
  transition:
    transform .56s cubic-bezier(.15,1.08,.27,1),
    opacity .24s ease;
}
.info-hover-preview.open .info-hover-preview-card{
  transform:scale(1) translateY(0);
  opacity:1;
}
.info-hover-preview-card::before{
  content:"";
  position:absolute;
  z-index:4;
  inset:-2px;
  border-radius:32px;
  padding:2px;
  background:linear-gradient(120deg,#45d9e8,#5878ef 43%,#ff83b7 68%,#ffe36b);
  background-size:250% 100%;
  opacity:.58;
  pointer-events:none;
  animation:infoPreviewBorder 3.2s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
@keyframes infoPreviewBorder{
  to{background-position:250% 0}
}
.info-hover-preview-image{
  position:relative;
  overflow:hidden;
  background:#edf3fa;
}
.info-hover-preview-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 60%,rgba(255,255,255,.65)),
    linear-gradient(180deg,transparent 65%,rgba(29,49,92,.12));
  pointer-events:none;
}
.info-hover-preview-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.04);
  animation:infoPreviewImageDrift 10s ease-in-out infinite alternate;
}
@keyframes infoPreviewImageDrift{
  to{transform:scale(1.095) translate3d(-1.2%,-.7%,0)}
}
.info-hover-preview-copy{
  position:relative;
  align-self:center;
  padding:65px 72px;
}
.info-hover-preview-kicker{
  display:block;
  color:var(--brand);
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
}
.info-hover-preview-copy h2{
  margin:15px 0 18px;
  font-size:clamp(45px,5vw,76px);
  letter-spacing:-.055em;
  line-height:1.05;
}
.info-hover-preview-copy p{
  max-width:540px;
  margin:0 0 34px;
  color:var(--muted);
  font-size:17px;
  line-height:1.9;
}
.info-hover-preview-copy b{
  display:inline-flex;
  align-items:center;
  min-width:190px;
  padding:15px 20px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-blue),var(--brand-pink));
  font-size:11px;
  letter-spacing:.14em;
  box-shadow:0 13px 32px rgba(59,111,213,.24);
}
.info-hover-preview-corner{
  position:absolute;
  right:35px;
  top:28px;
  color:var(--brand-pink);
  font-size:38px;
  animation:infoPreviewStar 3s ease-in-out infinite;
}
@keyframes infoPreviewStar{
  50%{transform:rotate(22deg) scale(1.15)}
}
.info-hover-preview-close{
  position:absolute;
  right:34px;
  bottom:27px;
  color:#93a0b9;
  font-size:8px;
  font-weight:900;
  letter-spacing:.2em;
}
.info-preview-open{
  overflow:hidden;
}
.info-card{
  transition:
    transform .36s cubic-bezier(.18,.82,.2,1),
    opacity .25s ease,
    box-shadow .3s ease!important;
}
.info-card:hover{
  transform:translateY(-8px) scale(1.018)!important;
  box-shadow:0 22px 55px rgba(45,83,151,.18)!important;
}

/* ======================================================
   v15 — Animated custom cursor
   ====================================================== */
@media(hover:hover) and (pointer:fine){
  .custom-cursor-enabled,
  .custom-cursor-enabled body,
  .custom-cursor-enabled a,
  .custom-cursor-enabled button,
  .custom-cursor-enabled input,
  .custom-cursor-enabled textarea,
  .custom-cursor-enabled select{
    cursor:none!important;
  }
}
.aoi-cursor{
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.aoi-cursor.visible{opacity:1}
.aoi-cursor-ring,
.aoi-cursor-dot{
  position:fixed;
  left:0;
  top:0;
  border-radius:50%;
  will-change:transform,width,height,background,border-color;
}
.aoi-cursor-ring{
  width:34px;
  height:34px;
  border:1.5px solid rgba(34,184,211,.72);
  background:rgba(255,255,255,.05);
  box-shadow:
    0 0 18px rgba(34,184,211,.18),
    inset 0 0 10px rgba(85,115,238,.08);
  transition:
    width .28s cubic-bezier(.17,.89,.25,1.25),
    height .28s cubic-bezier(.17,.89,.25,1.25),
    border-color .22s,
    background .22s,
    box-shadow .22s;
}
.aoi-cursor-dot{
  width:6px;
  height:6px;
  background:linear-gradient(135deg,var(--brand),var(--brand-blue));
  box-shadow:0 0 10px rgba(40,186,211,.5);
  transition:
    width .2s ease,
    height .2s ease,
    background .2s ease,
    opacity .2s ease;
}
.aoi-cursor.interactive .aoi-cursor-ring{
  width:54px;
  height:54px;
  border-color:rgba(91,112,238,.76);
  background:rgba(86,113,240,.07);
  box-shadow:
    0 0 0 5px rgba(81,218,232,.07),
    0 0 24px rgba(73,112,225,.18);
}
.aoi-cursor.interactive .aoi-cursor-dot{
  width:8px;
  height:8px;
  background:linear-gradient(135deg,var(--brand-pink),var(--brand-blue));
}
.aoi-cursor.play .aoi-cursor-ring{
  width:66px;
  height:66px;
  border-color:rgba(255,127,184,.74);
  animation:aoiCursorOrbit 1.7s linear infinite;
}
.aoi-cursor.preview .aoi-cursor-ring{
  width:74px;
  height:74px;
  border-style:dashed;
  background:rgba(255,255,255,.12);
  animation:aoiCursorOrbit 3s linear infinite;
}
@keyframes aoiCursorOrbit{
  to{rotate:360deg}
}
.aoi-cursor-label{
  position:fixed;
  left:0;
  top:0;
  transform:translate3d(var(--cursor-x,0),var(--cursor-y,0),0);
  display:none;
}
.aoi-cursor.play .aoi-cursor-label,
.aoi-cursor.preview .aoi-cursor-label{
  display:block;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--brand-blue);
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}
.aoi-cursor.pressed .aoi-cursor-ring{
  width:27px;
  height:27px;
  background:rgba(255,130,184,.18);
}
.aoi-cursor.pressed .aoi-cursor-dot{
  width:11px;
  height:11px;
}
.aoi-cursor-click-ripple{
  position:fixed;
  z-index:9999;
  width:16px;
  height:16px;
  border:2px solid rgba(76,114,239,.62);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  animation:aoiClickRipple .62s cubic-bezier(.14,.7,.25,1) forwards;
}
@keyframes aoiClickRipple{
  from{width:16px;height:16px;opacity:.9}
  to{width:72px;height:72px;opacity:0}
}

@media(max-width:900px){
  .info-hover-preview{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .info-hover-preview-card,
  .info-hover-preview-image img,
  .info-hover-preview-card::before,
  .info-hover-preview-corner,
  .aoi-cursor-ring,
  .aoi-cursor-click-ripple{
    animation:none!important;
    transition:none!important;
  }
}


/* ======================================================
   v16 — Full image preview without cropping
   ====================================================== */
.info-hover-preview-card{
  width:min(1320px,94vw)!important;
  height:min(860px,88vh)!important;
  grid-template-columns:minmax(0,60%) minmax(330px,40%)!important;
}
.info-hover-preview-image{
  display:grid;
  place-items:center;
  padding:18px;
  background:
    radial-gradient(circle at 20% 15%,rgba(78,220,233,.13),transparent 33%),
    radial-gradient(circle at 80% 85%,rgba(255,135,187,.1),transparent 34%),
    #f7faff!important;
}
.info-hover-preview-image::after{
  background:
    linear-gradient(90deg,transparent 86%,rgba(255,255,255,.4)),
    linear-gradient(180deg,transparent 88%,rgba(35,59,105,.05))!important;
}
.info-hover-preview-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  animation:none!important;
  border-radius:15px;
  filter:drop-shadow(0 15px 30px rgba(45,77,133,.12));
}
.info-hover-preview-card[data-preview-type="commission"]{
  grid-template-columns:minmax(0,66%) minmax(300px,34%)!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image{
  padding:12px;
}
.info-hover-preview-copy{
  padding:52px 56px!important;
}
.info-hover-preview-copy h2{
  font-size:clamp(42px,4.6vw,70px)!important;
}

/* ======================================================
   v16 — Original water-blue chibi VTuber cursor
   Drawn as inline SVG; no generated image asset.
   ====================================================== */
.aoi-cursor{display:none!important}
.aoi-mascot-cursor{
  position:fixed;
  inset:0;
  z-index:10020;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.aoi-mascot-cursor.visible{opacity:1}
.aoi-pointer-star{
  position:fixed;
  left:0;
  top:0;
  z-index:3;
  color:#1cb8d3;
  font-size:14px;
  line-height:1;
  text-shadow:
    0 0 8px rgba(29,185,212,.65),
    0 0 16px rgba(82,116,239,.3);
  will-change:transform;
  animation:mascotPointerTwinkle 1.7s ease-in-out infinite;
}
@keyframes mascotPointerTwinkle{
  0%,100%{scale:.78;rotate:0deg}
  50%{scale:1.18;rotate:22deg}
}
.aoi-mascot-wrap{
  position:fixed;
  left:0;
  top:0;
  width:62px;
  height:62px;
  will-change:transform;
  filter:drop-shadow(0 8px 12px rgba(45,73,133,.18));
  transition:width .25s cubic-bezier(.17,.89,.25,1.25),height .25s cubic-bezier(.17,.89,.25,1.25);
}
.aoi-mascot-aura{
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1.5px dashed rgba(39,190,214,.52);
  background:radial-gradient(circle,rgba(255,255,255,.38),rgba(89,218,234,.08) 55%,transparent 72%);
  animation:mascotAuraSpin 6s linear infinite;
}
.aoi-mascot-aura::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px solid rgba(91,113,238,.27);
}
@keyframes mascotAuraSpin{to{rotate:360deg}}
.aoi-mascot-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  animation:mascotFloat 2.6s ease-in-out infinite;
}
@keyframes mascotFloat{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%{transform:translateY(-4px) rotate(1.5deg)}
}
.mascot-eye{
  transform-box:fill-box;
  transform-origin:center;
  animation:mascotBlink 4.8s ease-in-out infinite;
}
@keyframes mascotBlink{
  0%,43%,47%,100%{transform:scaleY(1)}
  45%{transform:scaleY(.08)}
}
.mascot-eye-right{animation-delay:.03s}
.mascot-hairpin{
  transform-box:fill-box;
  transform-origin:center;
  animation:mascotHairpin 2.1s ease-in-out infinite;
}
@keyframes mascotHairpin{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(7deg)}
}
.mascot-ribbon{
  transform-box:fill-box;
  transform-origin:center;
  animation:mascotRibbon 2.5s ease-in-out infinite;
}
@keyframes mascotRibbon{
  0%,100%{transform:scaleX(.95) rotate(-2deg)}
  50%{transform:scaleX(1.08) rotate(2deg)}
}
.mascot-play-notes{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.mascot-spark{
  position:absolute;
  color:#ff83b8;
  font-weight:900;
  text-shadow:0 0 8px currentColor;
  opacity:.7;
}
.mascot-spark-1{
  right:-3px;
  top:3px;
  font-size:10px;
  animation:mascotSparkOne 2.2s ease-in-out infinite;
}
.mascot-spark-2{
  left:-5px;
  bottom:7px;
  color:#49cfe2;
  font-size:9px;
  animation:mascotSparkTwo 2.8s ease-in-out infinite;
}
.mascot-spark-3{
  right:0;
  bottom:-1px;
  color:#ffe169;
  font-size:17px;
  animation:mascotSparkThree 1.9s ease-in-out infinite;
}
@keyframes mascotSparkOne{50%{transform:translate(3px,-5px) rotate(35deg) scale(1.25)}}
@keyframes mascotSparkTwo{50%{transform:translate(-3px,4px) rotate(-25deg) scale(.8)}}
@keyframes mascotSparkThree{50%{transform:translate(2px,2px) scale(1.35);opacity:1}}
.aoi-mascot-label{
  position:absolute;
  left:50%;
  top:67px;
  transform:translateX(-50%);
  min-width:max-content;
  color:#4368d1;
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
  text-shadow:0 2px 8px #fff;
  opacity:0;
  transition:opacity .2s ease,transform .25s ease;
}
.aoi-mascot-cursor.interactive .aoi-mascot-wrap{
  width:70px;
  height:70px;
}
.aoi-mascot-cursor.interactive .aoi-mascot-aura{
  border-color:rgba(92,112,239,.7);
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(90,115,239,.11) 55%,transparent 72%);
  animation-duration:2.2s;
}
.aoi-mascot-cursor.interactive .mascot-mouth-normal{opacity:0}
.aoi-mascot-cursor.interactive .mascot-mouth-happy{opacity:1}
.aoi-mascot-cursor.play .mascot-play-notes{
  opacity:1;
  animation:mascotNotes 1.15s ease-in-out infinite;
}
@keyframes mascotNotes{
  0%,100%{transform:translateY(3px) scale(.86);opacity:.55}
  50%{transform:translateY(-5px) scale(1.12);opacity:1}
}
.aoi-mascot-cursor.play .aoi-mascot-aura{
  border-style:solid;
  border-color:rgba(255,128,185,.72);
  box-shadow:
    0 0 0 5px rgba(85,225,237,.08),
    0 0 24px rgba(95,111,236,.2);
}
.aoi-mascot-cursor.preview .aoi-mascot-aura{
  border-style:dashed;
  border-color:rgba(255,132,185,.7);
  animation-duration:1.7s;
}
.aoi-mascot-cursor.play .aoi-mascot-label,
.aoi-mascot-cursor.preview .aoi-mascot-label{
  opacity:1;
  transform:translateX(-50%) translateY(3px);
}
.aoi-mascot-cursor.pressed .aoi-mascot-svg{
  animation:mascotClickBounce .38s cubic-bezier(.16,.9,.25,1);
}
.aoi-mascot-cursor.pressed .aoi-mascot-aura{
  animation:mascotAuraPop .38s ease-out;
}
@keyframes mascotClickBounce{
  0%{transform:scale(1)}
  38%{transform:scale(.74,1.18) translateY(4px)}
  70%{transform:scale(1.14,.88) translateY(-5px)}
  100%{transform:scale(1)}
}
@keyframes mascotAuraPop{
  50%{transform:scale(1.3);opacity:.35}
}
.mascot-ripple{
  background:radial-gradient(circle,rgba(104,225,238,.13),transparent 65%);
  border-color:rgba(255,126,183,.65)!important;
}
.mascot-ripple i{
  position:absolute;
  color:#4fd7e6;
  font-style:normal;
  font-size:11px;
}
.mascot-ripple i:nth-child(1){left:2px;top:-5px}
.mascot-ripple i:nth-child(2){right:-3px;top:7px;color:#ff83b8}
.mascot-ripple i:nth-child(3){left:13px;bottom:-7px;color:#ffe169}

@media(max-width:1050px){
  .info-hover-preview-card{
    grid-template-columns:minmax(0,56%) minmax(300px,44%)!important;
  }
  .info-hover-preview-card[data-preview-type="commission"]{
    grid-template-columns:minmax(0,61%) minmax(290px,39%)!important;
  }
  .info-hover-preview-copy{
    padding:38px!important;
  }
}
@media(max-width:900px){
  .aoi-mascot-cursor{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .aoi-pointer-star,
  .aoi-mascot-aura,
  .aoi-mascot-svg,
  .mascot-eye,
  .mascot-hairpin,
  .mascot-ribbon,
  .mascot-spark,
  .mascot-play-notes{
    animation:none!important;
  }
}


/* ======================================================
   v17 — Balance commission benefits & pricing document sizes
   ====================================================== */
.commission-document{
  display:grid;
  place-items:center;
  min-height:clamp(760px,78vw,1060px);
  padding:18px!important;
  background:
    radial-gradient(circle at 20% 12%,rgba(78,220,233,.07),transparent 32%),
    radial-gradient(circle at 80% 86%,rgba(255,135,187,.06),transparent 34%),
    #fff;
}
.commission-document img{
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:100%;
  max-height:100%;
  object-fit:contain!important;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(54,73,118,.07);
}
#benefitsImageBtn img,
#pricingImageBtn img{
  width:auto!important;
  height:auto!important;
  max-width:100%;
  max-height:100%;
}
.image-modal-panel{
  width:min(1100px,calc(100% - 24px))!important;
  padding:18px!important;
  background:
    radial-gradient(circle at 18% 14%,rgba(82,219,233,.08),transparent 30%),
    radial-gradient(circle at 82% 84%,rgba(255,140,190,.08),transparent 30%),
    #fff;
}
.image-modal-panel img{
  width:auto!important;
  height:auto!important;
  max-width:100%;
  max-height:calc(88vh - 36px)!important;
  object-fit:contain!important;
}
@media(max-width:900px){
  .commission-document{
    min-height:auto;
    padding:12px!important;
  }
}


/* ======================================================
   v18 — Original supplied artwork used as the cursor.
   ====================================================== */
.aoi-mascot-cursor,
.aoi-cursor{
  display:none!important;
}
.aoi-character-cursor{
  position:fixed;
  inset:0;
  z-index:10030;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.aoi-character-cursor.visible{opacity:1}

.aoi-character-pointer{
  position:fixed;
  left:0;
  top:0;
  z-index:5;
  color:#16b9d5;
  font-size:15px;
  text-shadow:
    0 0 7px rgba(22,185,213,.8),
    0 0 16px rgba(85,115,239,.42);
  will-change:transform;
  animation:characterPointerPulse 1.55s ease-in-out infinite;
}
@keyframes characterPointerPulse{
  0%,100%{scale:.78;rotate:0deg}
  50%{scale:1.22;rotate:28deg}
}

.aoi-character-wrap{
  position:fixed;
  left:0;
  top:0;
  width:78px;
  height:78px;
  border-radius:50%;
  will-change:transform,width,height;
  filter:drop-shadow(0 9px 14px rgba(38,67,127,.22));
  transition:
    width .28s cubic-bezier(.17,.89,.25,1.25),
    height .28s cubic-bezier(.17,.89,.25,1.25);
  animation:characterCursorFloat 2.6s ease-in-out infinite;
}
@keyframes characterCursorFloat{
  0%,100%{margin-top:0;rotate:-1.5deg}
  50%{margin-top:-5px;rotate:1.5deg}
}

.aoi-character-wrap img{
  position:absolute;
  z-index:2;
  inset:6px;
  width:calc(100% - 12px);
  height:calc(100% - 12px);
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.92);
  box-shadow:
    0 0 0 2px rgba(55,204,224,.35),
    inset 0 0 14px rgba(255,255,255,.3);
  transition:transform .28s cubic-bezier(.17,.89,.25,1.25),filter .25s ease;
}

.aoi-character-ring{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.aoi-character-ring-a{
  inset:0;
  border:1.5px dashed rgba(30,190,216,.67);
  animation:characterRingSpin 5.2s linear infinite;
}
.aoi-character-ring-b{
  inset:-5px;
  border:1px solid rgba(255,126,184,.38);
  border-left-color:transparent;
  border-bottom-color:transparent;
  animation:characterRingSpinReverse 3.8s linear infinite;
}
@keyframes characterRingSpin{to{rotate:360deg}}
@keyframes characterRingSpinReverse{to{rotate:-360deg}}

.aoi-character-note{
  position:absolute;
  z-index:4;
  opacity:.72;
  font-weight:900;
  text-shadow:0 0 8px currentColor;
}
.note-a{
  right:-2px;
  top:6px;
  color:#ff79b6;
  font-size:13px;
  animation:characterNoteA 2s ease-in-out infinite;
}
.note-b{
  left:-5px;
  bottom:8px;
  color:#48d4e5;
  font-size:10px;
  animation:characterNoteB 2.5s ease-in-out infinite;
}
@keyframes characterNoteA{
  50%{transform:translate(4px,-7px) rotate(17deg) scale(1.2);opacity:1}
}
@keyframes characterNoteB{
  50%{transform:translate(-3px,5px) rotate(-24deg) scale(.82);opacity:.5}
}

.aoi-character-label{
  position:absolute;
  left:50%;
  top:84px;
  transform:translateX(-50%);
  min-width:max-content;
  color:#496bd5;
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
  text-shadow:0 2px 7px #fff;
  opacity:0;
  transition:opacity .2s ease,transform .25s ease;
}

.aoi-character-cursor.interactive .aoi-character-wrap{
  width:91px;
  height:91px;
}
.aoi-character-cursor.interactive .aoi-character-wrap img{
  transform:scale(1.035);
  filter:saturate(1.08) brightness(1.035);
}
.aoi-character-cursor.interactive .aoi-character-ring-a{
  border-color:rgba(85,111,239,.78);
  animation-duration:1.8s;
}
.aoi-character-cursor.interactive .aoi-character-ring-b{
  border-color:rgba(255,125,184,.6);
  border-left-color:transparent;
  animation-duration:1.25s;
}

.aoi-character-cursor.play .aoi-character-wrap{
  width:98px;
  height:98px;
}
.aoi-character-cursor.play .aoi-character-wrap img{
  transform:scale(1.06) rotate(-3deg);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 25px rgba(80,111,237,.32);
}
.aoi-character-cursor.play .note-a{
  animation-duration:.7s;
}
.aoi-character-cursor.play .note-b{
  animation-duration:.55s;
}
.aoi-character-cursor.play .aoi-character-label,
.aoi-character-cursor.preview .aoi-character-label{
  opacity:1;
  transform:translateX(-50%) translateY(4px);
}

.aoi-character-cursor.preview .aoi-character-ring-a{
  border-style:solid;
  border-color:rgba(255,128,184,.74);
}
.aoi-character-cursor.preview .aoi-character-wrap img{
  transform:scale(1.04);
}

.aoi-character-cursor.pressed .aoi-character-wrap{
  animation:characterCursorClick .42s cubic-bezier(.16,.9,.25,1);
}
@keyframes characterCursorClick{
  0%{scale:1}
  35%{scale:.78 1.16;translate:0 4px}
  72%{scale:1.13 .89;translate:0 -5px}
  100%{scale:1}
}

.character-cursor-ripple{
  border-color:rgba(255,126,183,.68)!important;
  background:radial-gradient(circle,rgba(68,211,229,.13),transparent 65%);
}
.character-cursor-ripple i{
  position:absolute;
  font-style:normal;
  font-size:11px;
  color:#42d3e4;
}
.character-cursor-ripple i:nth-child(1){left:1px;top:-7px}
.character-cursor-ripple i:nth-child(2){right:-3px;top:8px;color:#ff7db7}
.character-cursor-ripple i:nth-child(3){left:14px;bottom:-8px;color:#ffe16b}

/* ======================================================
   v18 — Commission benefits and pricing use identical frames.
   ====================================================== */
#benefitsImageBtn,
#pricingImageBtn{
  width:min(920px,100%)!important;
  height:clamp(720px,75vw,1040px)!important;
  min-height:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:grid!important;
  place-items:center!important;
  padding:16px!important;
}
#benefitsImageBtn img,
#pricingImageBtn img{
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
}

/* Fullscreen preview closes from pointer exit, so backdrop needs active pointer capture. */
.info-hover-preview-backdrop{
  pointer-events:auto!important;
}
.info-hover-preview-card{
  pointer-events:auto!important;
}

@media(max-width:900px){
  .aoi-character-cursor{display:none!important}
  #benefitsImageBtn,
  #pricingImageBtn{
    width:100%!important;
    height:auto!important;
    aspect-ratio:2/3;
  }
}
@media(prefers-reduced-motion:reduce){
  .aoi-character-pointer,
  .aoi-character-wrap,
  .aoi-character-ring,
  .aoi-character-note{
    animation:none!important;
  }
}


/* ======================================================
   v19 — Smaller face cursor and contact section/footer
   ====================================================== */
.aoi-character-wrap{
  width:58px!important;
  height:58px!important;
  filter:drop-shadow(0 7px 12px rgba(38,67,127,.18))!important;
}
.aoi-character-wrap img{
  inset:5px!important;
  width:calc(100% - 10px)!important;
  height:calc(100% - 10px)!important;
  border-width:2px!important;
}
.aoi-character-ring-b{inset:-4px!important;}
.aoi-character-cursor.interactive .aoi-character-wrap{
  width:68px!important;
  height:68px!important;
}
.aoi-character-cursor.play .aoi-character-wrap{
  width:76px!important;
  height:76px!important;
}
.aoi-character-label{top:64px!important;}
.note-a{font-size:11px!important; right:-1px!important; top:4px!important;}
.note-b{font-size:9px!important; left:-4px!important; bottom:7px!important;}

.contact-section{
  margin-top:10px;
  margin-bottom:34px;
  padding:34px;
  border:1px solid rgba(103,126,192,.12);
  border-radius:30px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(249,251,255,.96));
  box-shadow:0 22px 54px rgba(60,86,145,.08);
  overflow:hidden;
  position:relative;
}
.contact-section::before{
  content:""; position:absolute; inset:auto auto -70px -40px; width:220px; height:220px;
  background:radial-gradient(circle, rgba(88,222,234,.16), transparent 70%); pointer-events:none;
}
.contact-section::after{
  content:""; position:absolute; inset:-60px -50px auto auto; width:200px; height:200px;
  background:radial-gradient(circle, rgba(255,130,184,.15), transparent 68%); pointer-events:none;
}
.contact-head{margin-bottom:22px!important;}
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  position:relative;
  z-index:1;
}
.contact-card{
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(91,118,190,.12);
  background:rgba(255,255,255,.8);
  box-shadow:0 10px 28px rgba(55,81,136,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(65,96,157,.13);
  border-color:rgba(74,205,222,.32);
}
.contact-card span{
  display:block; font-size:11px; letter-spacing:.15em; font-weight:900; color:var(--brand); margin-bottom:8px;
}
.contact-card strong{
  display:block; font-size:22px; line-height:1.25; word-break:break-word;
}
.contact-card small{
  display:block; margin-top:8px; color:var(--muted); font-size:13px;
}

.site-footer{padding-top:18px!important; padding-bottom:22px!important;}
.footer-stack{display:flex; flex-direction:column; gap:18px;}
.footer-main{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.footer-brand{display:flex; align-items:center; gap:16px;}
.footer-brand img{height:28px;}
.footer-contacts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.footer-contact-item{
  display:flex; flex-direction:column; gap:6px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(95,120,184,.12);
  background:rgba(255,255,255,.72);
  text-decoration:none;
  color:inherit;
}
.footer-contact-item b{font-size:12px; color:var(--brand); letter-spacing:.08em;}
.footer-contact-item span{font-size:14px; line-height:1.35; word-break:break-word;}
.footer-contact-item:hover{border-color:rgba(76,204,222,.3); transform:translateY(-2px);}

@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .footer-contacts{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .contact-section{padding:24px 18px;}
  .footer-main{flex-direction:column; align-items:flex-start;}
  .footer-contacts{grid-template-columns:1fr;}
  .contact-card strong{font-size:18px;}
}


/* ======================================================
   v20 — Direct contact links and a more precise cursor.
   ====================================================== */
.contact-card-link{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  appearance:none;
  font:inherit;
  color:inherit;
  text-decoration:none;
  cursor:none;
}
button.contact-card-link{
  border:1px solid rgba(91,118,190,.12);
}
.contact-card-link i{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid rgba(94,119,181,.1);
  color:var(--brand-blue);
  font-size:9px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.12em;
  transition:transform .25s ease,color .25s ease;
}
.contact-card-link::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--brand),var(--brand-blue),var(--brand-pink));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.contact-card-link:hover::after{
  transform:scaleX(1);
}
.contact-card-link:hover i{
  transform:translateX(4px);
  color:var(--brand-pink);
}
.contact-wechat{
  background:
    radial-gradient(circle at 88% 12%,rgba(65,218,229,.11),transparent 28%),
    rgba(255,255,255,.8);
}

.footer-contact-button{
  appearance:none;
  width:100%;
  text-align:left;
  font:inherit;
  cursor:none;
}
button.footer-contact-item{
  color:inherit;
}

.contact-toast{
  position:fixed;
  z-index:10050;
  left:50%;
  bottom:30px;
  transform:translate(-50%,30px);
  padding:12px 18px;
  border-radius:999px;
  background:rgba(34,47,82,.94);
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 14px 38px rgba(32,48,91,.25);
  backdrop-filter:blur(14px);
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;
  pointer-events:none;
}
.contact-toast.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
  transition:opacity .24s ease,transform .24s ease,visibility 0s;
}
.contact-toast.error{
  background:rgba(177,64,96,.95);
}

/* Remove cursor float and make the artwork follow tightly. */
.aoi-character-wrap{
  width:50px!important;
  height:50px!important;
  animation:none!important;
  filter:drop-shadow(0 5px 9px rgba(38,67,127,.16))!important;
}
.aoi-character-wrap img{
  inset:4px!important;
  width:calc(100% - 8px)!important;
  height:calc(100% - 8px)!important;
}
.aoi-character-cursor.interactive .aoi-character-wrap{
  width:57px!important;
  height:57px!important;
}
.aoi-character-cursor.play .aoi-character-wrap{
  width:64px!important;
  height:64px!important;
}
.aoi-character-label{
  top:57px!important;
}
.aoi-character-ring-a{
  animation-duration:7s!important;
}
.aoi-character-ring-b{
  animation-duration:5.5s!important;
}
.aoi-character-cursor.interactive .aoi-character-ring-a{
  animation-duration:3s!important;
}
.aoi-character-cursor.interactive .aoi-character-ring-b{
  animation-duration:2.4s!important;
}
.aoi-character-note{
  opacity:.55!important;
}
.aoi-character-cursor.play .aoi-character-note{
  opacity:1!important;
}

@media(max-width:640px){
  .contact-toast{
    width:calc(100% - 28px);
    border-radius:14px;
    text-align:center;
    bottom:16px;
  }
}


/* ======================================================
   v21 — Contact brand icons
   ====================================================== */
.contact-card-link{
  min-height:210px;
}
.contact-brand-icon{
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
  margin:0 0 17px!important;
  border-radius:13px;
  box-shadow:0 8px 18px rgba(42,68,126,.12);
  transition:transform .28s cubic-bezier(.17,.89,.25,1.25),box-shadow .28s ease;
}
.contact-card-link:hover .contact-brand-icon{
  transform:translateY(-4px) rotate(-4deg) scale(1.08);
  box-shadow:0 13px 27px rgba(48,84,165,.2);
}
.footer-contact-item{
  display:grid!important;
  grid-template-columns:28px 1fr!important;
  grid-template-rows:auto auto!important;
  column-gap:9px!important;
  align-items:center!important;
}
.footer-contact-icon{
  grid-row:1/3;
  width:24px!important;
  height:24px!important;
  border-radius:7px;
  object-fit:contain;
  box-shadow:0 4px 10px rgba(40,64,120,.1);
}
.footer-contact-item b,
.footer-contact-item span{
  min-width:0;
}

/* ======================================================
   v21 — Cursor performance mode
   Cause fixed:
   - no perpetual requestAnimationFrame loop
   - no idle ring/note animation
   - no moving filter/drop-shadow repaint
   ====================================================== */
.aoi-character-wrap{
  contain:layout paint style;
  will-change:transform;
  transform:translateZ(0);
  filter:none!important;
  animation:none!important;
}
.aoi-character-wrap img{
  box-shadow:
    0 4px 10px rgba(38,67,127,.17),
    0 0 0 2px rgba(55,204,224,.27)!important;
}
.aoi-character-pointer{
  animation:none!important;
  will-change:transform;
  transform:translateZ(0);
}
.aoi-character-ring-a,
.aoi-character-ring-b,
.aoi-character-note{
  animation:none!important;
}
.aoi-character-ring-a{
  opacity:.46;
}
.aoi-character-ring-b{
  opacity:.3;
}
.aoi-character-note{
  opacity:0!important;
}

/* Start decorative cursor motion only over interactive content. */
.aoi-character-cursor.interactive .aoi-character-ring-a{
  opacity:.8;
  animation:characterRingSpin 2.8s linear infinite!important;
}
.aoi-character-cursor.interactive .aoi-character-ring-b{
  opacity:.65;
  animation:characterRingSpinReverse 2.2s linear infinite!important;
}
.aoi-character-cursor.play .note-a{
  opacity:1!important;
  animation:characterNoteA .72s ease-in-out infinite!important;
}
.aoi-character-cursor.play .note-b{
  opacity:1!important;
  animation:characterNoteB .62s ease-in-out infinite!important;
}
.aoi-character-cursor.cursor-paused,
.aoi-character-cursor.cursor-paused *{
  animation-play-state:paused!important;
}
.aoi-character-cursor.pressed .aoi-character-wrap{
  animation:characterCursorClick .34s cubic-bezier(.16,.9,.25,1)!important;
}

/* Heavy hover sections keep cursor layers simple to avoid double compositing. */
.featured-card:hover ~ .aoi-character-cursor .aoi-character-ring,
.category-card:hover ~ .aoi-character-cursor .aoi-character-ring{
  animation-duration:4s!important;
}

@media(max-width:760px){
  .contact-brand-icon{
    width:38px!important;
    height:38px!important;
  }
}


/* ======================================================
   v22 — Custom cursor disabled for performance diagnosis.
   ====================================================== */
html,
body,
a,
button,
input,
textarea,
select,
[role="button"]{
  cursor:auto!important;
}
a,
button,
[role="button"],
.work-card,
.category-card,
.info-card,
.media-option{
  cursor:pointer!important;
}
.aoi-character-cursor,
.aoi-mascot-cursor,
.aoi-cursor{
  display:none!important;
}

/* ======================================================
   v22 — Full commission document hover preview.
   The long benefits/price sheet occupies the whole preview.
   ====================================================== */
.info-hover-preview-card[data-preview-type="commission"]{
  width:min(1040px,94vw)!important;
  height:min(920px,92vh)!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:1fr!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(76,220,232,.10),transparent 32%),
    radial-gradient(circle at 90% 90%,rgba(255,134,185,.08),transparent 34%),
    rgba(248,251,255,.98)!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  padding:14px!important;
  overflow:hidden!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image::after{
  display:none!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:calc(100% - 8px)!important;
  max-height:calc(100% - 8px)!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  border-radius:12px!important;
  transform:none!important;
  animation:none!important;
  filter:drop-shadow(0 14px 28px rgba(48,76,132,.12))!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-copy{
  display:none!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-corner{
  z-index:8;
  right:22px;
  top:18px;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-close{
  z-index:8;
  right:22px;
  bottom:18px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 5px 16px rgba(46,70,124,.10);
}

/* Profile preview keeps the split layout. */
.info-hover-preview-card[data-preview-type="profile"]{
  grid-template-columns:minmax(0,60%) minmax(330px,40%)!important;
}

@media(max-width:900px){
  .info-hover-preview-card[data-preview-type="commission"]{
    width:96vw!important;
    height:92vh!important;
  }
}


/* ======================================================
   v23 — Supplied visual assets
   ====================================================== */
.contact-brand-icon[src$="bilibili-user.jpeg"],
.footer-contact-icon[src$="bilibili-user.jpeg"]{
  object-fit:cover!important;
  background:#ef78a9;
}

/* Keep the new supplied homepage artwork centered in the wide hero. */
.hero-banner-image{
  object-position:center center!important;
}

/* The supplied VTuber category cover is landscape artwork. */
.category-card[href*="category=vtuber"] .category-cover img{
  object-fit:contain!important;
  object-position:center!important;
}


/* ======================================================
   v24 — Simple text footer
   ====================================================== */
.footer-contact-text{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 11px;
  padding:15px 0 18px;
  border-top:1px solid rgba(83,112,181,.10);
  color:#7a86a0;
  font-size:11px;
  line-height:1.7;
}
.footer-contact-text a,
.footer-contact-text button{
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:#66748f;
  font:inherit;
  font-weight:700;
  text-decoration:none;
  cursor:pointer!important;
  transition:color .2s ease,transform .2s ease;
}
.footer-contact-text a:hover,
.footer-contact-text button:hover{
  color:var(--brand);
  transform:translateY(-1px);
}
.footer-contact-text>span{
  color:#c1c8d7;
}

/* Remove the old boxed footer presentation completely. */
.site-footer .footer-contacts{
  display:none!important;
}

/* ======================================================
   v24 — Scrollable full commission preview
   ====================================================== */
.info-hover-preview-card[data-preview-type="commission"]{
  width:min(1040px,94vw)!important;
  height:min(920px,92vh)!important;
  display:block!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  background:
    radial-gradient(circle at 10% 10%,rgba(76,220,232,.10),transparent 32%),
    radial-gradient(circle at 90% 90%,rgba(255,134,185,.08),transparent 34%),
    rgba(248,251,255,.98)!important;
}
.info-hover-preview-card[data-preview-type="commission"]::-webkit-scrollbar{
  width:10px;
}
.info-hover-preview-card[data-preview-type="commission"]::-webkit-scrollbar-track{
  background:rgba(83,112,181,.07);
}
.info-hover-preview-card[data-preview-type="commission"]::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:
    linear-gradient(var(--brand),var(--brand-blue),var(--brand-pink))
    padding-box;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:100%!important;
  padding:18px 20px 42px!important;
  overflow:visible!important;
  background:transparent!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image::after{
  display:none!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image img{
  display:block!important;
  width:min(900px,100%)!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:top center!important;
  margin:0 auto!important;
  border-radius:12px!important;
  transform:none!important;
  animation:none!important;
  filter:drop-shadow(0 14px 28px rgba(48,76,132,.12))!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-copy{
  display:none!important;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-corner{
  position:sticky!important;
  z-index:9;
  float:right;
  top:15px;
  right:20px;
  margin-top:-100%;
}
.info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-close{
  position:sticky!important;
  z-index:10;
  display:block;
  width:max-content;
  max-width:calc(100% - 32px);
  left:50%;
  bottom:14px;
  margin:0 auto 15px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px rgba(46,70,124,.13);
  backdrop-filter:blur(10px);
  text-align:center;
}

/* Preserve the normal split layout for the Makoto profile preview. */
.info-hover-preview-card[data-preview-type="profile"]{
  overflow:hidden!important;
  grid-template-columns:minmax(0,60%) minmax(330px,40%)!important;
}

@media(max-width:760px){
  .footer-contact-text{
    display:grid;
    justify-items:center;
    gap:5px;
  }
  .footer-contact-text>span{
    display:none;
  }
  .info-hover-preview-card[data-preview-type="commission"]{
    width:96vw!important;
    height:92vh!important;
  }
  .info-hover-preview-card[data-preview-type="commission"] .info-hover-preview-image{
    padding:10px 10px 36px!important;
  }
}


/* ======================================================
   v27 — Side-stage background only
   Based on v24. Central UI and v24 contact section unchanged.
   ====================================================== */

body{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(
      90deg,
      #effcff 0%,
      #f8fdff 13%,
      #ffffff 25%,
      #ffffff 75%,
      #fff9fc 87%,
      #fff1f8 100%
    )!important;
}

/* Very light global dots, strongest near the outer edges. */
body::before{
  content:"";
  position:fixed;
  z-index:-4;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle,rgba(44,196,216,.29) 1px,transparent 1.15px),
    radial-gradient(circle,rgba(255,139,189,.22) .9px,transparent 1.1px);
  background-size:34px 34px,48px 48px;
  background-position:0 0,19px 21px;
  mask-image:linear-gradient(
    90deg,
    #000 0%,
    rgba(0,0,0,.82) 12%,
    transparent 24%,
    transparent 76%,
    rgba(0,0,0,.82) 88%,
    #000 100%
  );
}

/* Edge color wash; the central content area remains white/unchanged. */
body::after{
  content:"";
  position:fixed;
  z-index:-3;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at -2% 18%,rgba(38,207,224,.26),transparent 25rem),
    radial-gradient(circle at 3% 79%,rgba(92,130,239,.11),transparent 22rem),
    radial-gradient(circle at 102% 23%,rgba(167,140,242,.19),transparent 25rem),
    radial-gradient(circle at 99% 78%,rgba(255,143,190,.22),transparent 25rem);
}

/* Static side-stage containers. */
.aoi-side-stage{
  position:fixed;
  z-index:-1;
  top:0;
  bottom:0;
  width:max(120px,calc((100vw - 1260px) / 2));
  min-width:120px;
  max-width:330px;
  overflow:hidden;
  pointer-events:none;
}

.aoi-side-stage-left{
  left:0;
  background:
    linear-gradient(90deg,rgba(216,249,253,.82),rgba(241,252,255,.30) 68%,transparent),
    repeating-linear-gradient(
      -45deg,
      rgba(43,205,221,.035) 0 7px,
      transparent 7px 17px
    );
  border-right:1px solid rgba(57,177,205,.06);
}

.aoi-side-stage-right{
  right:0;
  background:
    linear-gradient(270deg,rgba(255,231,244,.82),rgba(252,244,255,.30) 68%,transparent),
    repeating-linear-gradient(
      45deg,
      rgba(255,130,184,.032) 0 7px,
      transparent 7px 17px
    );
  border-left:1px solid rgba(214,111,167,.055);
}

/* Vertical brand label. */
.aoi-side-brand{
  position:absolute;
  top:50%;
  display:flex;
  align-items:center;
  gap:18px;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:translateY(-50%);
}

.aoi-side-stage-left .aoi-side-brand{
  left:36px;
}

.aoi-side-stage-right .aoi-side-brand{
  right:36px;
}

.aoi-side-brand span{
  color:rgba(65,107,184,.39);
  font-family:"Shippori Mincho","Yu Mincho",serif;
  font-size:19px;
  font-weight:700;
  letter-spacing:.28em;
}

.aoi-side-stage-right .aoi-side-brand span{
  color:rgba(173,94,157,.36);
}

.aoi-side-brand b{
  color:rgba(30,170,197,.48);
  font-size:7px;
  font-weight:900;
  letter-spacing:.25em;
}

.aoi-side-stage-right .aoi-side-brand b{
  color:rgba(143,105,207,.43);
}

/* Static equalizer bars. */
.aoi-side-wave{
  position:absolute;
  top:23%;
  display:flex;
  align-items:center;
  gap:5px;
  height:82px;
  opacity:.48;
}

.aoi-side-stage-left .aoi-side-wave{
  left:34%;
}

.aoi-side-stage-right .aoi-side-wave{
  right:34%;
}

.aoi-side-wave i{
  display:block;
  width:3px;
  border-radius:999px;
  background:linear-gradient(to top,#25cadd,#5578ef,#ff8fbe);
}

.aoi-side-wave i:nth-child(1){height:17px}
.aoi-side-wave i:nth-child(2){height:35px}
.aoi-side-wave i:nth-child(3){height:57px}
.aoi-side-wave i:nth-child(4){height:78px}
.aoi-side-wave i:nth-child(5){height:49px}
.aoi-side-wave i:nth-child(6){height:29px}
.aoi-side-wave i:nth-child(7){height:12px}

/* Decorative orbit. */
.aoi-side-orbit{
  position:absolute;
  width:150px;
  height:150px;
  border:1px solid rgba(78,124,207,.15);
  border-radius:50%;
}

.aoi-side-stage-left .aoi-side-orbit{
  left:-54px;
  bottom:10%;
}

.aoi-side-stage-right .aoi-side-orbit{
  right:-52px;
  top:14%;
  border-color:rgba(209,104,169,.14);
}

.aoi-side-orbit::before,
.aoi-side-orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
}

.aoi-side-orbit::before{
  inset:21px;
  border:1px dashed rgba(78,124,207,.16);
}

.aoi-side-stage-right .aoi-side-orbit::before{
  border-color:rgba(179,108,204,.15);
}

.aoi-side-orbit::after{
  inset:45px;
  border:1px solid rgba(38,202,219,.13);
}

.aoi-side-orbit span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#26cfe0;
  box-shadow:0 0 15px rgba(38,207,224,.36);
}

.aoi-side-orbit span:nth-child(1){
  left:50%;
  top:-4px;
}

.aoi-side-orbit span:nth-child(2){
  right:8px;
  bottom:25px;
  background:#ff8fbe;
  box-shadow:0 0 15px rgba(255,143,190,.33);
}

.aoi-side-orbit span:nth-child(3){
  left:9px;
  bottom:28px;
  background:#5578ef;
  box-shadow:0 0 15px rgba(85,120,239,.28);
}

/* Small side stars. */
.aoi-side-star{
  position:absolute;
  font-weight:900;
  text-shadow:0 0 14px currentColor;
}

.aoi-side-stage-left .star-a{
  right:26px;
  top:11%;
  color:rgba(38,207,224,.55);
  font-size:22px;
}

.aoi-side-stage-left .star-b{
  right:54px;
  bottom:21%;
  color:rgba(255,230,117,.66);
  font-size:16px;
}

.aoi-side-stage-right .star-a{
  left:26px;
  bottom:12%;
  color:rgba(255,143,190,.56);
  font-size:23px;
}

.aoi-side-stage-right .star-b{
  left:58px;
  top:34%;
  color:rgba(167,140,242,.48);
  font-size:15px;
}

/* The middle canvas stays visually untouched. */
.site-header,
main,
.site-footer{
  position:relative;
  z-index:1;
}

/* Hide the side stage before it begins to crowd the content. */
@media(max-width:1450px){
  .aoi-side-stage{
    opacity:.52;
    width:max(70px,calc((100vw - 1180px) / 2));
  }
  .aoi-side-brand{
    display:none;
  }
  .aoi-side-wave{
    opacity:.26;
  }
}

@media(max-width:1260px){
  .aoi-side-stage{
    display:none;
  }
  body::before{
    opacity:.15;
    mask-image:none;
  }
  body{
    background:linear-gradient(180deg,#fff,#f9fcff 55%,#fff9fc)!important;
  }
}

/* No motion is added here; this is intentionally performance-safe. */
@media(prefers-reduced-motion:reduce){
  .aoi-side-stage *{
    animation:none!important;
  }
}


/* ======================================================
   v28 — Selected chibi UI stickers
   Static decorations only. Existing layout and motion untouched.
   ====================================================== */

.category-section,
.featured-section,
.info-links,
.contact-section{
  position:relative;
}

.aoi-chibi-ui{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
  user-select:none;
}

.aoi-chibi-sticker{
  position:relative;
  display:grid;
  place-items:center;
  padding:9px;
  border:1px solid rgba(79,115,190,.13);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,251,255,.82));
  box-shadow:
    0 18px 42px rgba(46,75,137,.13),
    inset 0 0 0 5px rgba(255,255,255,.36);
}

.aoi-chibi-sticker::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:-1;
  border-radius:20px;
  background:
    radial-gradient(circle at 15% 18%,rgba(38,207,224,.14),transparent 34%),
    radial-gradient(circle at 85% 82%,rgba(255,143,190,.13),transparent 35%);
}

.aoi-chibi-sticker::after{
  content:"✦";
  position:absolute;
  right:9px;
  top:8px;
  color:rgba(255,143,190,.72);
  font-size:13px;
  text-shadow:
    -17px 9px 0 rgba(38,207,224,.44),
    -4px 22px 0 rgba(255,230,117,.57);
}

.aoi-chibi-sticker img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(46,66,112,.12));
}

.aoi-chibi-tape{
  position:absolute;
  z-index:4;
  left:50%;
  top:-8px;
  width:54px;
  height:17px;
  transform:translateX(-50%) rotate(-3deg);
  border-radius:3px;
  opacity:.75;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(55,210,225,.72) 0 5px,
      rgba(255,255,255,.88) 5px 10px
    );
  box-shadow:0 3px 7px rgba(51,102,151,.10);
}

.aoi-chibi-chip{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:142px;
  padding:10px 12px;
  border:1px solid rgba(70,116,199,.13);
  border-radius:15px;
  background:rgba(255,255,255,.91);
  box-shadow:0 10px 24px rgba(47,74,132,.10);
  backdrop-filter:blur(8px);
}

.aoi-chibi-chip>span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(135deg,#24cade,#5578ef,#ff8fbe);
  font-size:10px;
  font-weight:900;
  box-shadow:0 7px 14px rgba(70,111,211,.17);
}

.aoi-chibi-chip div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.aoi-chibi-chip b{
  color:#375078;
  font-size:8px;
  letter-spacing:.13em;
}

.aoi-chibi-chip small{
  color:#909bb1;
  font-size:8px;
  white-space:nowrap;
}

.aoi-chibi-chip-right{
  order:-1;
}

.aoi-chibi-chip-yellow>span{
  color:#33334a;
  background:linear-gradient(135deg,#ffe978,#ffca55);
}

/* Category guide: left outer area, clear of category cards. */
.aoi-chibi-category{
  left:max(22px,calc(50% - 820px));
  top:31%;
}

.aoi-chibi-category .aoi-chibi-sticker{
  width:176px;
  height:210px;
  transform:rotate(-2deg);
}

/* Featured guide: right outer area. */
.aoi-chibi-featured{
  right:max(22px,calc(50% - 820px));
  top:24%;
  align-items:center;
}

.aoi-chibi-featured .aoi-chibi-sticker{
  width:174px;
  height:205px;
  transform:rotate(2deg);
}

/* Contact guide: partially tucked into the right edge of the contact board. */
.aoi-chibi-contact{
  right:-118px;
  bottom:-35px;
  z-index:3;
  align-items:center;
}

.aoi-chibi-contact .aoi-chibi-sticker{
  width:180px;
  height:220px;
  transform:rotate(2.2deg);
}

.aoi-chibi-contact .aoi-chibi-chip{
  margin-bottom:27px;
}

/* Small UI brackets make the stickers feel integrated, not pasted on. */
.aoi-chibi-category::before,
.aoi-chibi-featured::before,
.aoi-chibi-contact::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:72px;
  height:72px;
  border-top:2px solid rgba(38,207,224,.42);
  border-left:2px solid rgba(82,117,239,.28);
}

.aoi-chibi-category::before{
  left:-13px;
  top:-13px;
}

.aoi-chibi-featured::before{
  right:-13px;
  top:-13px;
  transform:scaleX(-1);
}

.aoi-chibi-contact::before{
  right:-12px;
  top:-12px;
  border-color:rgba(255,143,190,.42);
}

/* Keep central cards and all existing hover animations above decorations. */
.category-shell,
.featured-section>.shell,
.contact-section>.section-head,
.contact-section>.contact-grid,
.contact-section>.contact-toast{
  position:relative;
  z-index:4;
}

/* Scale down on medium-wide screens; hide before they can crowd content. */
@media(max-width:1770px){
  .aoi-chibi-category,
  .aoi-chibi-featured{
    transform:scale(.82);
  }

  .aoi-chibi-category{
    transform-origin:left center;
  }

  .aoi-chibi-featured{
    transform-origin:right center;
  }

  .aoi-chibi-contact{
    right:-76px;
    transform:scale(.86);
    transform-origin:right bottom;
  }
}

@media(max-width:1500px){
  .aoi-chibi-category,
  .aoi-chibi-featured{
    display:none;
  }

  .aoi-chibi-contact{
    right:-42px;
    opacity:.68;
    transform:scale(.70);
  }
}

@media(max-width:1180px){
  .aoi-chibi-contact{
    display:none;
  }
}

/* No new animation has been added. */


/* ======================================================
   v29 — Category/style naming + full commission documents
   ====================================================== */

/* A soft pastel canvas instead of pure white. */
body{
  background:
    radial-gradient(circle at -4% 12%,rgba(42,207,224,.22),transparent 25rem),
    radial-gradient(circle at 103% 22%,rgba(169,143,243,.17),transparent 27rem),
    radial-gradient(circle at 99% 82%,rgba(255,143,190,.17),transparent 26rem),
    linear-gradient(
      90deg,
      #eaf9fc 0%,
      #f3f9ff 14%,
      #f7f9ff 25%,
      #f8f7ff 75%,
      #fff5fa 88%,
      #ffeef7 100%
    )!important;
}

/* Keep central sections readable while allowing the new canvas to show through. */
main{
  background:rgba(255,255,255,.16);
}

/* Commission page becomes a light-blue/pink editorial canvas. */
body[data-page="commission"] .commission-main{
  position:relative;
  background:
    radial-gradient(circle at 7% 18%,rgba(44,211,226,.12),transparent 25rem),
    radial-gradient(circle at 94% 68%,rgba(255,143,190,.11),transparent 28rem),
    linear-gradient(180deg,rgba(247,252,255,.74),rgba(250,248,255,.80) 54%,rgba(255,247,251,.78));
}

body[data-page="commission"] .commission-hero{
  position:relative;
  padding-top:82px;
  padding-bottom:56px;
}

body[data-page="commission"] .commission-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-35px;
  top:55px;
  width:130px;
  height:130px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,231,117,.26) 0 33%,transparent 34%),
    repeating-conic-gradient(from 0deg,rgba(42,207,224,.12) 0 5deg,transparent 5deg 14deg);
}

body[data-page="commission"] .commission-hero::after{
  content:"✦";
  position:absolute;
  right:9px;
  top:66px;
  color:rgba(255,143,190,.70);
  font-size:31px;
  text-shadow:
    -28px 17px 0 rgba(42,207,224,.46),
    13px 35px 0 rgba(255,231,117,.58);
}

body[data-page="commission"] .commission-mini-nav a{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
}

/* Each document uses the same exact frame and shows the complete image. */
body[data-page="commission"] .commission-section{
  position:relative;
}

body[data-page="commission"] .commission-section-head{
  width:min(980px,100%);
  margin-left:auto;
  margin-right:auto;
}

body[data-page="commission"] .commission-document-full{
  position:relative;
  width:min(980px,100%)!important;
  aspect-ratio:976 / 1611!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:18px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:1px solid rgba(77,113,188,.14)!important;
  border-radius:24px!important;
  background:
    linear-gradient(rgba(83,119,190,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(83,119,190,.03) 1px,transparent 1px),
    radial-gradient(circle at 10% 7%,rgba(42,207,224,.10),transparent 27%),
    radial-gradient(circle at 90% 93%,rgba(255,143,190,.09),transparent 29%),
    rgba(255,255,255,.91)!important;
  background-size:28px 28px,28px 28px,auto,auto,auto!important;
  box-shadow:
    0 28px 72px rgba(48,77,138,.13),
    inset 0 0 0 7px rgba(255,255,255,.32)!important;
  cursor:default!important;
}

body[data-page="commission"] .commission-document-full::before{
  content:"";
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  top:18px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#27cfe0,#5578ef,#ff8fbe,#ffe675);
  opacity:.72;
}

body[data-page="commission"] .commission-document-full img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
  border-radius:14px!important;
  box-shadow:0 13px 30px rgba(46,71,123,.08)!important;
}

body[data-page="commission"] .zoom-hint{
  display:none!important;
}

/* Q-version characters live outside the document frames and never cover text. */
.commission-side-mascot{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:flex-end;
  gap:9px;
  pointer-events:none;
}

.commission-side-mascot-benefits{
  left:max(-178px,calc(50% - 720px));
  top:245px;
}

.commission-side-mascot-pricing{
  right:max(-178px,calc(50% - 720px));
  top:275px;
  flex-direction:row-reverse;
}

.commission-mascot-card{
  position:relative;
  width:150px;
  height:188px;
  padding:8px;
  display:grid;
  place-items:center;
  border:1px solid rgba(78,114,190,.14);
  border-radius:25px;
  background:
    radial-gradient(circle at 15% 17%,rgba(42,207,224,.13),transparent 33%),
    radial-gradient(circle at 84% 83%,rgba(255,143,190,.12),transparent 34%),
    rgba(255,255,255,.90);
  box-shadow:0 17px 40px rgba(47,75,135,.12);
  transform:rotate(-2deg);
}

.commission-side-mascot-pricing .commission-mascot-card{
  transform:rotate(2deg);
}

.commission-mascot-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(45,67,111,.11));
}

.commission-mascot-tape{
  position:absolute;
  z-index:3;
  top:-8px;
  left:50%;
  width:52px;
  height:16px;
  transform:translateX(-50%) rotate(-3deg);
  border-radius:3px;
  opacity:.78;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(48,207,224,.72) 0 5px,
      rgba(255,255,255,.90) 5px 10px
    );
}

.commission-mascot-label{
  min-width:135px;
  padding:10px 12px;
  border:1px solid rgba(80,115,190,.13);
  border-radius:15px;
  background:rgba(255,255,255,.90);
  box-shadow:0 10px 23px rgba(48,76,135,.09);
}

.commission-mascot-label b,
.commission-mascot-label small{
  display:block;
}

.commission-mascot-label b{
  color:#3e5f8d;
  font-size:8px;
  letter-spacing:.13em;
}

.commission-mascot-label small{
  margin-top:3px;
  color:#919bb0;
  font-size:8px;
}

.commission-mascot-label-yellow{
  background:linear-gradient(145deg,#fff,#fff8d9);
}

body[data-page="commission"] .commission-contact{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(78,116,190,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(78,116,190,.03) 1px,transparent 1px),
    linear-gradient(135deg,rgba(255,255,255,.93),rgba(237,250,255,.90) 55%,rgba(255,239,247,.90));
  background-size:26px 26px,26px 26px,auto;
}

body[data-page="commission"] .commission-contact::after{
  content:"✦";
  position:absolute;
  right:22px;
  top:15px;
  color:rgba(255,143,190,.65);
  font-size:22px;
  text-shadow:-22px 12px 0 rgba(42,207,224,.42);
}

/* The unused image enlargement modal is disabled if cached markup remains. */
body[data-page="commission"] #imageModal{
  display:none!important;
}

@media(max-width:1450px){
  .commission-side-mascot{
    opacity:.66;
    transform:scale(.78);
  }

  .commission-side-mascot-benefits{
    left:-74px;
    transform-origin:left center;
  }

  .commission-side-mascot-pricing{
    right:-74px;
    transform-origin:right center;
  }
}

@media(max-width:1220px){
  .commission-side-mascot{
    display:none;
  }
}

@media(max-width:760px){
  body[data-page="commission"] .commission-document-full{
    width:100%!important;
    padding:10px!important;
    border-radius:17px!important;
  }

  body[data-page="commission"] .commission-section-head{
    width:100%;
  }
}


/* ======================================================
   v30 — Complete commission sheets in one view
   ====================================================== */

/*
  Both documents use the same 2:3 frame.
  On desktop, the frame is limited by viewport height so the complete
  sheet can be seen at once instead of extending far below the screen.
*/
body[data-page="commission"] .commission-document-full,
body[data-page="commission"] #benefitsImageBtn,
body[data-page="commission"] #pricingImageBtn{
  width:min(
    700px,
    calc(80vh * 2 / 3),
    calc(100vw - 64px)
  )!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:2 / 3!important;
  margin:0 auto!important;
  padding:14px!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* Complete image, no cropping. Benefits gets small side margins naturally. */
body[data-page="commission"] .commission-document-full img,
body[data-page="commission"] #benefitsImageBtn img,
body[data-page="commission"] #pricingImageBtn img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:auto!important;
}

/* Keep both section headers aligned to the exact same document width. */
body[data-page="commission"] .commission-section-head,
body[data-page="commission"] .commission-section-price .commission-section-head{
  width:min(
    700px,
    calc(80vh * 2 / 3),
    calc(100vw - 64px)
  )!important;
  max-width:none!important;
}

/* New commission-only character UI. */
body[data-page="commission"] .commission-side-mascot-benefits{
  left:max(20px,calc(50% - 570px))!important;
  top:250px!important;
}

body[data-page="commission"] .commission-side-mascot-pricing{
  right:max(20px,calc(50% - 570px))!important;
  top:270px!important;
}

body[data-page="commission"] .commission-mascot-card{
  width:142px!important;
  height:178px!important;
  padding:8px!important;
  overflow:visible!important;
}

body[data-page="commission"] .commission-mascot-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:transparent!important;
}

body[data-page="commission"] .commission-side-mascot-benefits
.commission-mascot-card{
  background:
    radial-gradient(circle at 17% 18%,rgba(68,207,229,.18),transparent 34%),
    radial-gradient(circle at 85% 84%,rgba(255,151,195,.13),transparent 36%),
    rgba(255,255,255,.90)!important;
}

body[data-page="commission"] .commission-side-mascot-pricing
.commission-mascot-card{
  background:
    radial-gradient(circle at 16% 17%,rgba(255,126,161,.15),transparent 34%),
    radial-gradient(circle at 86% 83%,rgba(255,218,105,.18),transparent 36%),
    rgba(255,255,255,.91)!important;
}

@media(max-width:1280px){
  body[data-page="commission"] .commission-side-mascot{
    display:none!important;
  }
}

@media(max-width:760px){
  body[data-page="commission"] .commission-document-full,
  body[data-page="commission"] #benefitsImageBtn,
  body[data-page="commission"] #pricingImageBtn,
  body[data-page="commission"] .commission-section-head,
  body[data-page="commission"] .commission-section-price
  .commission-section-head{
    width:calc(100vw - 28px)!important;
  }

  body[data-page="commission"] .commission-document-full,
  body[data-page="commission"] #benefitsImageBtn,
  body[data-page="commission"] #pricingImageBtn{
    aspect-ratio:2 / 3!important;
    padding:8px!important;
  }
}



/* ======================================================
   v32 — Calm ambient hero + animated chibi UI
   No sweep, flash, scan line, glint or image zoom.
   ====================================================== */

/* ------------------------------------------------------
   Hero artwork remains completely static.
   ------------------------------------------------------ */
.visual-hero{
  isolation:isolate;
  background:#fff;
}

.visual-hero .hero-banner-image{
  position:relative;
  z-index:0;
  animation:none!important;
  transform:none!important;
  transition:none!important;
  will-change:auto!important;
}

/* Remove every sweep/flash layer from v31. */
.visual-hero::before,
.visual-hero::after,
.hero-vignette::before,
.hero-vignette::after,
.portfolio-intro .primary-btn::before{
  content:none!important;
  display:none!important;
  animation:none!important;
}

/* Calm static vignette only. */
.hero-vignette{
  z-index:1;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 62%,rgba(26,43,88,.075)),
    linear-gradient(90deg,rgba(255,255,255,.09),transparent 18%,transparent 82%,rgba(255,255,255,.07));
}

/* ------------------------------------------------------
   Ambient line-art UI.
   Only slow transforms; no brightness flashing.
   ------------------------------------------------------ */
.hero-ambient-ui{
  position:absolute;
  z-index:2;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.hero-orbit{
  position:absolute;
  width:190px;
  height:190px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 0 0 22px rgba(255,255,255,.018),
    inset 0 0 0 48px rgba(69,211,229,.018);
  opacity:.52;
  will-change:transform;
}

.hero-orbit::before,
.hero-orbit::after{
  content:"";
  position:absolute;
  border-radius:50%;
}

.hero-orbit::before{
  inset:24px;
  border:1px dashed rgba(255,255,255,.30);
}

.hero-orbit::after{
  inset:53px;
  border:1px solid rgba(255,255,255,.22);
}

.hero-orbit-left{
  left:-76px;
  bottom:-62px;
  animation:heroOrbitSlow 24s linear infinite;
}

.hero-orbit-right{
  right:-68px;
  top:-58px;
  animation:heroOrbitSlowReverse 29s linear infinite;
}

.hero-orbit i{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  box-shadow:0 0 10px currentColor;
}

.hero-orbit i:nth-child(1){
  left:50%;
  top:-4px;
  color:#4fd7e5;
  background:currentColor;
}

.hero-orbit i:nth-child(2){
  right:9px;
  bottom:29px;
  color:#ff92be;
  background:currentColor;
}

.hero-orbit i:nth-child(3){
  left:14px;
  bottom:35px;
  color:#ffe475;
  background:currentColor;
}

@keyframes heroOrbitSlow{
  to{transform:rotate(360deg)}
}

@keyframes heroOrbitSlowReverse{
  to{transform:rotate(-360deg)}
}

.hero-ambient-mark{
  position:absolute;
  color:rgba(255,255,255,.76);
  text-shadow:0 3px 12px rgba(45,62,120,.18);
  will-change:transform;
}

.hero-ambient-mark.mark-a{
  left:15%;
  top:22%;
  font-size:15px;
  animation:heroAmbientDriftA 8.5s ease-in-out infinite;
}

.hero-ambient-mark.mark-b{
  right:17%;
  top:28%;
  font-size:17px;
  animation:heroAmbientDriftB 10s ease-in-out infinite;
}

.hero-ambient-mark.mark-c{
  left:31%;
  bottom:18%;
  font-size:13px;
  animation:heroAmbientDriftC 9.2s ease-in-out infinite;
}

.hero-ambient-mark.mark-d{
  right:32%;
  bottom:25%;
  font-size:24px;
  color:rgba(255,231,117,.70);
  animation:heroAmbientDriftD 11s ease-in-out infinite;
}

@keyframes heroAmbientDriftA{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%{transform:translate3d(7px,-10px,0) rotate(5deg)}
}

@keyframes heroAmbientDriftB{
  0%,100%{transform:translate3d(0,0,0) rotate(4deg)}
  50%{transform:translate3d(-9px,8px,0) rotate(-5deg)}
}

@keyframes heroAmbientDriftC{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  50%{transform:translate3d(5px,-7px,0) rotate(9deg)}
}

@keyframes heroAmbientDriftD{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-6px,-6px,0) scale(1.08)}
}

/* Existing wave and symbols become the main hero motion. */
.hero-wave{
  z-index:3;
  opacity:.66;
}

.hero-wave path{
  animation-duration:12s!important;
}

.hero-symbol{
  z-index:3;
  animation-duration:7.5s!important;
}

.symbol-two{
  animation-duration:9s!important;
}

.symbol-three{
  animation-duration:8.2s!important;
}

.visual-meta,
.scroll-cue{
  z-index:4;
}

/* A quiet frame with no moving highlight. */
.visual-hero{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(58,91,176,.10);
}

.portfolio-intro .hero-buttons{
  margin-bottom:0!important;
}

.portfolio-intro .intro-side{
  align-self:center;
}

/* ------------------------------------------------------
   Animated Q-version sticker UI on the homepage.
   Only transform animations, deliberately low amplitude.
   ------------------------------------------------------ */
.aoi-chibi-ui,
.aoi-chibi-sticker,
.aoi-chibi-sticker img,
.aoi-chibi-chip,
.aoi-chibi-tape,
.commission-side-mascot,
.commission-mascot-card,
.commission-mascot-card img,
.commission-mascot-label,
.commission-mascot-tape{
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

/* Category guide */
.aoi-chibi-category .aoi-chibi-sticker{
  animation:chibiCategoryFloat 5.8s ease-in-out infinite;
  transform-origin:50% 88%;
}

@keyframes chibiCategoryFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
  50%{transform:translate3d(0,-8px,0) rotate(1deg)}
}

/* Featured guide */
.aoi-chibi-featured .aoi-chibi-sticker{
  animation:chibiFeaturedFloat 6.3s ease-in-out infinite;
  transform-origin:50% 88%;
}

@keyframes chibiFeaturedFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(2deg)}
  50%{transform:translate3d(0,-7px,0) rotate(-1deg)}
}

/* Contact guide */
.aoi-chibi-contact .aoi-chibi-sticker{
  animation:chibiContactFloat 6.8s ease-in-out infinite;
  transform-origin:50% 88%;
}

@keyframes chibiContactFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(2.2deg)}
  50%{transform:translate3d(-2px,-8px,0) rotate(-.8deg)}
}

/* Tiny character breathing, independent from the sticker movement. */
.aoi-chibi-sticker img{
  animation:chibiCharacterBreath 4.6s ease-in-out infinite;
  transform-origin:50% 74%;
}

@keyframes chibiCharacterBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.018)}
}

/* Labels gently follow instead of remaining rigid. */
.aoi-chibi-category .aoi-chibi-chip{
  animation:chibiChipLeft 5.8s ease-in-out infinite;
}

.aoi-chibi-featured .aoi-chibi-chip{
  animation:chibiChipRight 6.3s ease-in-out infinite;
}

.aoi-chibi-contact .aoi-chibi-chip{
  animation:chibiChipContact 6.8s ease-in-out infinite;
}

@keyframes chibiChipLeft{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(3px,-3px,0)}
}

@keyframes chibiChipRight{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-3px,-3px,0)}
}

@keyframes chibiChipContact{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-2px,-4px,0)}
}

/* Tape moves like a real paper sticker, not a flashing effect. */
.aoi-chibi-tape{
  animation:chibiTapeWiggle 4.9s ease-in-out infinite;
  transform-origin:center;
}

@keyframes chibiTapeWiggle{
  0%,100%{transform:translateX(-50%) rotate(-3deg)}
  50%{transform:translateX(-50%) rotate(2deg)}
}

/* The small chip icon rotates a few degrees instead of blinking. */
.aoi-chibi-chip>span{
  animation:chibiChipIcon 5.4s ease-in-out infinite;
}

@keyframes chibiChipIcon{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(7deg)}
}

/* ------------------------------------------------------
   Commission-page Q-version guides also move.
   ------------------------------------------------------ */
.commission-side-mascot-benefits .commission-mascot-card{
  animation:commissionMascotLeft 6.2s ease-in-out infinite;
}

.commission-side-mascot-pricing .commission-mascot-card{
  animation:commissionMascotRight 6.7s ease-in-out infinite;
}

@keyframes commissionMascotLeft{
  0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}
  50%{transform:translate3d(0,-7px,0) rotate(1deg)}
}

@keyframes commissionMascotRight{
  0%,100%{transform:translate3d(0,0,0) rotate(2deg)}
  50%{transform:translate3d(0,-7px,0) rotate(-1deg)}
}

.commission-mascot-card img{
  animation:commissionMascotBreath 4.8s ease-in-out infinite;
  transform-origin:50% 76%;
}

@keyframes commissionMascotBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.018)}
}

.commission-side-mascot-benefits .commission-mascot-label{
  animation:commissionLabelLeft 6.2s ease-in-out infinite;
}

.commission-side-mascot-pricing .commission-mascot-label{
  animation:commissionLabelRight 6.7s ease-in-out infinite;
}

@keyframes commissionLabelLeft{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(3px,-3px,0)}
}

@keyframes commissionLabelRight{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-3px,-3px,0)}
}

.commission-mascot-tape{
  animation:commissionTapeWiggle 5.2s ease-in-out infinite;
}

@keyframes commissionTapeWiggle{
  0%,100%{transform:translateX(-50%) rotate(-3deg)}
  50%{transform:translateX(-50%) rotate(2deg)}
}

/* Medium-screen scale rules from v28 use container transforms;
   child animations remain intact. */
@media(max-width:1500px){
  .aoi-chibi-contact .aoi-chibi-sticker,
  .aoi-chibi-contact .aoi-chibi-chip{
    animation-play-state:paused;
  }
}

/* Performance and motion accessibility. */
@media(prefers-reduced-motion:reduce){
  .hero-orbit,
  .hero-ambient-mark,
  .hero-wave path,
  .hero-symbol,
  .aoi-chibi-sticker,
  .aoi-chibi-sticker img,
  .aoi-chibi-chip,
  .aoi-chibi-tape,
  .aoi-chibi-chip>span,
  .commission-mascot-card,
  .commission-mascot-card img,
  .commission-mascot-label,
  .commission-mascot-tape{
    animation:none!important;
  }
}


/* ======================================================
   v37 — Native reference-budget design
   Built directly into v32 cards; existing motion is untouched.
   ====================================================== */
.reference-budget{
  --budget-accent:#6179ef;
  --budget-soft:rgba(97,121,239,.11);
  position:relative;
  min-height:54px;
  margin-top:14px;
  padding:10px 12px 10px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--budget-accent) 20%,#dce4f1);
  border-radius:14px;
  background:
    radial-gradient(circle at 92% 8%,var(--budget-soft),transparent 42%),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,255,.94));
  box-shadow:
    0 8px 22px rgba(50,69,117,.055),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.reference-budget::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--budget-accent),#ff8fbe);
}

.reference-budget::after{
  content:"";
  position:absolute;
  right:-9px;
  top:-13px;
  width:48px;
  height:48px;
  border:1px solid color-mix(in srgb,var(--budget-accent) 19%,transparent);
  border-radius:50%;
  box-shadow:
    0 0 0 9px color-mix(in srgb,var(--budget-accent) 5%,transparent),
    0 0 0 18px color-mix(in srgb,var(--budget-accent) 3%,transparent);
  pointer-events:none;
}

.reference-budget-label{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:7px auto;
  column-gap:7px;
  align-items:center;
}

.reference-budget-label i{
  grid-row:1 / span 2;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--budget-accent);
  box-shadow:0 0 0 4px var(--budget-soft);
}

.reference-budget-label span{
  color:#31415f;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.reference-budget-label small{
  color:color-mix(in srgb,var(--budget-accent) 72%,#78849b);
  font-size:6px;
  font-weight:900;
  letter-spacing:.16em;
}

.reference-budget strong{
  position:relative;
  z-index:1;
  color:#26334f;
  font-size:17px;
  font-weight:950;
  letter-spacing:.015em;
  white-space:nowrap;
}

.reference-budget.budget-main{--budget-accent:#6877ef;--budget-soft:rgba(104,119,239,.12)}
.reference-budget.budget-idol{--budget-accent:#f06da8;--budget-soft:rgba(240,109,168,.13)}
.reference-budget.budget-game{--budget-accent:#388fe9;--budget-soft:rgba(56,143,233,.12)}
.reference-budget.budget-vtuber{--budget-accent:#20bfcf;--budget-soft:rgba(32,191,207,.12)}

/* Preserve the exact v32 hover system: budget is a stable information module. */
.featured-card .reference-budget{
  margin-top:12px;
}
.featured-card:hover .reference-budget,
.work-card:hover .reference-budget{
  border-color:color-mix(in srgb,var(--budget-accent) 34%,#dce4f1);
  box-shadow:
    0 10px 25px rgba(50,69,117,.075),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* Detail modal */
.detail-budget{
  --budget-accent:#6877ef;
  --budget-soft:rgba(104,119,239,.12);
  margin:18px 0 20px;
  padding:15px 17px;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px 18px;
  border:1px solid color-mix(in srgb,var(--budget-accent) 21%,#dbe4ef);
  border-radius:17px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,248,255,.95)),
    radial-gradient(circle at 90% 10%,var(--budget-soft),transparent 42%);
  box-shadow:0 12px 28px rgba(46,69,116,.07);
}

.detail-budget.budget-main{--budget-accent:#6877ef;--budget-soft:rgba(104,119,239,.12)}
.detail-budget.budget-idol{--budget-accent:#f06da8;--budget-soft:rgba(240,109,168,.13)}
.detail-budget.budget-game{--budget-accent:#388fe9;--budget-soft:rgba(56,143,233,.12)}
.detail-budget.budget-vtuber{--budget-accent:#20bfcf;--budget-soft:rgba(32,191,207,.12)}

.detail-budget-heading{
  display:flex;
  align-items:center;
  gap:11px;
}

.detail-budget-heading i{
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--budget-accent);
  box-shadow:0 0 0 5px var(--budget-soft);
}

.detail-budget-heading span,
.detail-budget-heading small{
  display:block;
}

.detail-budget-heading span{
  color:#2e405f;
  font-size:12px;
  font-weight:900;
}

.detail-budget-heading small{
  margin-top:2px;
  color:var(--budget-accent);
  font-size:7px;
  font-weight:900;
  letter-spacing:.16em;
}

.detail-budget strong{
  color:#26334f;
  font-size:25px;
  font-weight:950;
  white-space:nowrap;
}

.detail-budget p{
  grid-column:1 / -1;
  margin:7px 0 0!important;
  color:#8792a8!important;
  font-size:9px!important;
  line-height:1.55!important;
}

/* Keep all grid cards aligned after adding the native budget module. */
.library-grid .work-body{
  display:flex;
  min-height:215px;
  flex-direction:column;
}
.library-grid .work-body .reference-budget{
  margin-top:auto;
}
.featured-card .work-body{
  display:flex;
  min-height:235px;
  flex-direction:column;
}
.featured-card .featured-card-foot{
  margin-top:auto;
}

/* Admin */
.budget-pill{
  min-width:94px;
  padding:7px 10px;
  border:1px solid #dce5f2;
  border-radius:999px;
  background:linear-gradient(135deg,#f5fbff,#fff3f8);
  color:#354764;
  font-size:11px;
  font-weight:900;
  text-align:center;
}

@media(max-width:700px){
  .reference-budget{
    padding:9px 10px 9px 13px;
  }
  .reference-budget strong{
    font-size:15px;
  }
  .detail-budget{
    grid-template-columns:1fr;
  }
  .detail-budget strong{
    margin-top:8px;
  }
}


/* ======================================================
   v38 — Compact hero + redesigned interactive budget UI
   Existing v37/v32 card motion remains unchanged.
   ====================================================== */

/* ------------------------------------------------------
   1. Smaller key visual to protect source-image sharpness
   ------------------------------------------------------ */
.visual-hero{
  width:min(1180px,calc(100% - 72px))!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2 / 1!important;
  margin:30px auto 58px!important;
  border:1px solid rgba(91,124,196,.13);
  border-radius:28px;
  overflow:hidden;
  box-shadow:
    0 26px 72px rgba(44,73,133,.14),
    0 4px 16px rgba(67,197,220,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  background:#fff;
}

.hero-banner-image{
  object-fit:contain!important;
  object-position:center!important;
  animation:heroDriftV38 19s ease-in-out infinite alternate!important;
  transform-origin:center;
}

@keyframes heroDriftV38{
  from{transform:scale(1.001) translate3d(0,0,0)}
  to{transform:scale(1.012) translate3d(-.12%,.08%,0)}
}

/* Decorative frame corners, without covering the supplied artwork. */
.visual-hero{
  isolation:isolate;
}
.visual-hero>.hero-vignette{
  border-radius:inherit;
}
.visual-hero>.hero-vignette::before,
.visual-hero>.hero-vignette::after{
  content:"";
  position:absolute;
  z-index:4;
  width:54px;
  height:54px;
  pointer-events:none;
  opacity:.55;
}
.visual-hero>.hero-vignette::before{
  left:14px;
  top:14px;
  border-left:2px solid rgba(38,196,217,.62);
  border-top:2px solid rgba(38,196,217,.62);
  border-radius:12px 0 0 0;
}
.visual-hero>.hero-vignette::after{
  right:14px;
  bottom:14px;
  border-right:2px solid rgba(255,121,178,.52);
  border-bottom:2px solid rgba(255,121,178,.52);
  border-radius:0 0 12px 0;
}

@media(max-width:900px){
  .visual-hero{
    width:calc(100% - 28px)!important;
    margin:16px auto 38px!important;
    border-radius:20px;
  }
}

@media(max-width:560px){
  .visual-hero{
    width:calc(100% - 16px)!important;
    border-radius:15px;
  }
}

/* ------------------------------------------------------
   2. New Japanese portfolio-style budget ticket
   ------------------------------------------------------ */
.reference-budget{
  --budget-accent:#6678ee;
  --budget-accent-2:#9b83ee;
  --budget-soft:rgba(102,120,238,.10);
  position:relative;
  min-height:50px;
  margin-top:13px;
  padding:7px 7px 7px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--budget-accent) 17%,#dfe6f2);
  border-radius:7px 15px 7px 15px;
  background:
    linear-gradient(90deg,var(--budget-soft),rgba(255,255,255,.96) 38%,#fff 100%);
  box-shadow:
    0 7px 19px rgba(48,69,116,.055),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

/* Fine top line instead of the old thick rounded pill. */
.reference-budget::before{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:-1px;
  height:2px;
  border-radius:999px;
  background:
    linear-gradient(90deg,var(--budget-accent),var(--budget-accent-2),transparent 82%);
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}

/* Small ticket corner mark. */
.reference-budget::after{
  content:"✦";
  position:absolute;
  right:81px;
  top:5px;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:color-mix(in srgb,var(--budget-accent) 58%,#fff);
  font-size:8px;
  line-height:1;
  opacity:.52;
  pointer-events:none;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    opacity .28s ease;
}

.reference-budget-label{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:8px auto;
  column-gap:8px;
  align-items:center;
  min-width:0;
}

.reference-budget-label i{
  grid-row:1 / span 2;
  width:7px;
  height:7px;
  border-radius:2px;
  background:linear-gradient(135deg,var(--budget-accent),var(--budget-accent-2));
  box-shadow:
    0 0 0 4px var(--budget-soft),
    0 3px 7px color-mix(in srgb,var(--budget-accent) 25%,transparent);
  transform:rotate(45deg);
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease;
}

.reference-budget-label span{
  color:#2d3a58;
  font-size:10.5px;
  font-weight:950;
  line-height:1.05;
  letter-spacing:.08em;
}

.reference-budget-label small{
  margin-top:3px;
  color:color-mix(in srgb,var(--budget-accent) 69%,#77839a);
  font-size:6px;
  font-weight:900;
  line-height:1;
  letter-spacing:.17em;
}

/* Price becomes a compact colored ticket stub. */
.reference-budget strong{
  position:relative;
  z-index:2;
  min-width:91px;
  padding:9px 12px 8px;
  border-radius:5px 11px 5px 11px;
  color:#fff;
  background:
    linear-gradient(135deg,var(--budget-accent),var(--budget-accent-2));
  box-shadow:
    0 8px 17px color-mix(in srgb,var(--budget-accent) 22%,transparent),
    inset 0 1px 0 rgba(255,255,255,.28);
  font-size:16px;
  font-weight:950;
  line-height:1;
  letter-spacing:.015em;
  text-align:center;
  white-space:nowrap;
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease,
    letter-spacing .3s ease;
}

.reference-budget strong::before{
  content:"CNY";
  display:block;
  margin-bottom:3px;
  color:rgba(255,255,255,.72);
  font-size:5px;
  font-weight:900;
  letter-spacing:.20em;
}

/* Category-specific color system. */
.reference-budget.budget-main{
  --budget-accent:#6678ee;
  --budget-accent-2:#a181ee;
  --budget-soft:rgba(102,120,238,.10);
}
.reference-budget.budget-idol{
  --budget-accent:#f065a4;
  --budget-accent-2:#ff9bc5;
  --budget-soft:rgba(240,101,164,.105);
}
.reference-budget.budget-game{
  --budget-accent:#298de6;
  --budget-accent-2:#4bc5ec;
  --budget-soft:rgba(41,141,230,.10);
}
.reference-budget.budget-vtuber{
  --budget-accent:#16b8c9;
  --budget-accent-2:#69d7d0;
  --budget-soft:rgba(22,184,201,.105);
}

/* Normal card hover remains subtle and does not replace the existing motion. */
.featured-card:hover .reference-budget,
.work-card:hover .reference-budget{
  border-color:color-mix(in srgb,var(--budget-accent) 29%,#dfe6f2);
  box-shadow:
    0 10px 24px rgba(48,69,116,.075),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ------------------------------------------------------
   3. Budget reacts specifically to the video/play icon
   ------------------------------------------------------ */

/* Featured final-video button. */
.featured-card:has(.featured-video-play:hover) .reference-budget,
/* Standard card play button. */
.work-card:has(.work-play:hover) .reference-budget,
/* Future video buttons using data attributes. */
.work-card:has([data-feature-video]:hover) .reference-budget,
.work-card:has([data-play-video]:hover) .reference-budget{
  transform:translate3d(0,-5px,0) rotate(-.45deg) scale(1.018);
  border-color:color-mix(in srgb,var(--budget-accent) 45%,#dfe6f2);
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--budget-accent) 14%,#fff),
      rgba(255,255,255,.98) 42%,
      #fff 100%);
  box-shadow:
    0 16px 31px color-mix(in srgb,var(--budget-accent) 13%,transparent),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.featured-card:has(.featured-video-play:hover) .reference-budget::before,
.work-card:has(.work-play:hover) .reference-budget::before,
.work-card:has([data-feature-video]:hover) .reference-budget::before,
.work-card:has([data-play-video]:hover) .reference-budget::before{
  transform:scaleX(.78);
}

.featured-card:has(.featured-video-play:hover) .reference-budget::after,
.work-card:has(.work-play:hover) .reference-budget::after,
.work-card:has([data-feature-video]:hover) .reference-budget::after,
.work-card:has([data-play-video]:hover) .reference-budget::after{
  opacity:.95;
  transform:translate3d(-4px,3px,0) rotate(22deg) scale(1.25);
}

.featured-card:has(.featured-video-play:hover) .reference-budget-label i,
.work-card:has(.work-play:hover) .reference-budget-label i,
.work-card:has([data-feature-video]:hover) .reference-budget-label i,
.work-card:has([data-play-video]:hover) .reference-budget-label i{
  transform:rotate(135deg) scale(1.18);
  box-shadow:
    0 0 0 5px var(--budget-soft),
    0 5px 11px color-mix(in srgb,var(--budget-accent) 32%,transparent);
}

.featured-card:has(.featured-video-play:hover) .reference-budget strong,
.work-card:has(.work-play:hover) .reference-budget strong,
.work-card:has([data-feature-video]:hover) .reference-budget strong,
.work-card:has([data-play-video]:hover) .reference-budget strong{
  transform:translate3d(-3px,-2px,0) rotate(2.1deg) scale(1.07);
  letter-spacing:.04em;
  box-shadow:
    0 13px 25px color-mix(in srgb,var(--budget-accent) 27%,transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
}

/* Details page follows the same cleaner visual language. */
.detail-budget{
  border-radius:8px 18px 8px 18px;
  background:
    linear-gradient(90deg,var(--budget-soft),rgba(255,255,255,.97) 35%,#fff);
}

@media(max-width:700px){
  .reference-budget{
    min-height:47px;
    padding:6px 6px 6px 12px;
  }
  .reference-budget strong{
    min-width:82px;
    padding:8px 9px 7px;
    font-size:14px;
  }
  .reference-budget::after{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .reference-budget,
  .reference-budget::before,
  .reference-budget::after,
  .reference-budget-label i,
  .reference-budget strong{
    transition:none!important;
  }
}


/* ======================================================
   v39 — Larger hero + cooperation contact chooser
   ====================================================== */

/* Slightly larger than v38, but not full-bleed. */
.visual-hero{
  width:min(1360px,calc(100% - 48px))!important;
  margin:26px auto 60px!important;
}

@media(max-width:900px){
  .visual-hero{
    width:calc(100% - 24px)!important;
  }
}

button.commission-contact-button{
  border:0;
  cursor:pointer;
  font:inherit;
}

html.contact-chooser-open{
  overflow:hidden;
}

.contact-chooser-overlay{
  position:fixed;
  z-index:9999;
  inset:0;
  display:grid;
  place-items:center;
  padding:28px;
  transition:opacity .28s ease,visibility .28s ease;
}

.contact-chooser-overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.contact-chooser-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(64,210,227,.16),transparent 31rem),
    radial-gradient(circle at 84% 78%,rgba(255,125,183,.15),transparent 33rem),
    rgba(239,245,255,.76);
  backdrop-filter:blur(17px) saturate(1.08);
  -webkit-backdrop-filter:blur(17px) saturate(1.08);
}

.contact-chooser-panel{
  position:relative;
  z-index:1;
  width:min(920px,100%);
  max-height:min(790px,calc(100vh - 56px));
  overflow:auto;
  padding:34px;
  border:1px solid rgba(83,113,183,.14);
  border-radius:30px;
  background:
    linear-gradient(rgba(74,112,191,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,112,191,.03) 1px,transparent 1px),
    radial-gradient(circle at 8% 12%,rgba(43,207,224,.11),transparent 25%),
    radial-gradient(circle at 91% 88%,rgba(255,140,190,.11),transparent 26%),
    rgba(255,255,255,.95);
  background-size:27px 27px,27px 27px,auto,auto,auto;
  box-shadow:
    0 40px 100px rgba(42,63,112,.22),
    0 10px 30px rgba(62,184,214,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
  transform:translateY(0) scale(1);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease;
}

.contact-chooser-overlay.hidden .contact-chooser-panel{
  transform:translateY(18px) scale(.975);
  opacity:0;
}

.contact-chooser-close{
  position:absolute;
  right:20px;
  top:18px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(83,113,183,.12);
  border-radius:50%;
  background:rgba(255,255,255,.88);
  color:#59647c;
  font-size:22px;
  cursor:pointer;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}

.contact-chooser-close:hover{
  transform:rotate(8deg) scale(1.08);
  background:#fff0f7;
  color:#e7609c;
}

.contact-chooser-heading{
  max-width:610px;
  margin-bottom:27px;
}

.contact-chooser-heading small{
  color:#00a8ca;
  font-size:9px;
  font-weight:950;
  letter-spacing:.17em;
}

.contact-chooser-heading h2{
  margin:8px 0 9px;
  color:#24314f;
  font-size:clamp(30px,4vw,48px);
  line-height:1;
}

.contact-chooser-heading p{
  margin:0;
  color:#7c89a2;
  font-size:13px;
  line-height:1.75;
}

.contact-chooser-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.contact-choice{
  --contact-color:#4d8df1;
  position:relative;
  min-height:124px;
  padding:18px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:15px;
  align-items:center;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--contact-color) 18%,#dde5f1);
  border-radius:18px;
  background:
    radial-gradient(circle at 95% 5%,color-mix(in srgb,var(--contact-color) 10%,transparent),transparent 43%),
    rgba(255,255,255,.9);
  color:inherit;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
  box-shadow:0 11px 27px rgba(47,71,123,.06);
  transition:
    transform .34s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.contact-choice::after{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:3px;
  border-radius:999px;
  background:var(--contact-color);
  transform:scaleY(.55);
  transition:transform .3s ease;
}

.contact-choice:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--contact-color) 38%,#dde5f1);
  background:
    radial-gradient(circle at 95% 5%,color-mix(in srgb,var(--contact-color) 17%,transparent),transparent 46%),
    #fff;
  box-shadow:0 19px 38px color-mix(in srgb,var(--contact-color) 13%,transparent);
}

.contact-choice:hover::after{
  transform:scaleY(1);
}

.contact-choice-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:color-mix(in srgb,var(--contact-color) 12%,#fff);
  color:var(--contact-color);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}

.contact-choice:hover .contact-choice-icon{
  transform:rotate(-5deg) scale(1.08);
}

.contact-choice-icon svg{
  width:28px;
  height:28px;
  fill:currentColor;
}

.contact-choice-icon-text{
  font-size:13px;
  font-weight:950;
}

.bilibili-mark{
  font-size:10px;
}

.contact-choice-copy{
  min-width:0;
}

.contact-choice-copy small,
.contact-choice-copy strong,
.contact-choice-copy em{
  display:block;
}

.contact-choice-copy small{
  color:var(--contact-color);
  font-size:8px;
  font-weight:950;
  letter-spacing:.15em;
}

.contact-choice-copy strong{
  margin-top:5px;
  overflow-wrap:anywhere;
  color:#2a3755;
  font-size:16px;
  line-height:1.25;
}

.contact-choice-copy em{
  margin-top:5px;
  color:#8a95a9;
  font-size:10px;
  font-style:normal;
}

.contact-choice>i{
  align-self:end;
  color:var(--contact-color);
  font-size:9px;
  font-style:normal;
  font-weight:900;
  white-space:nowrap;
}

.contact-wechat{--contact-color:#18be68}
.contact-xianyu{--contact-color:#e2ba00}
.contact-bilibili{--contact-color:#ef6c9e}
.contact-email{--contact-color:#4b98ef}

.contact-copy-notice{
  min-height:22px;
  margin:18px 0 0;
  color:#12a961;
  font-size:11px;
  font-weight:900;
  text-align:center;
}

@media(max-width:720px){
  .contact-chooser-overlay{
    padding:14px;
  }

  .contact-chooser-panel{
    max-height:calc(100vh - 28px);
    padding:27px 17px 20px;
    border-radius:22px;
  }

  .contact-chooser-grid{
    grid-template-columns:1fr;
  }

  .contact-choice{
    min-height:102px;
    padding:14px;
    grid-template-columns:46px minmax(0,1fr) auto;
  }

  .contact-choice-icon{
    width:46px;
    height:46px;
  }
}

@media(prefers-reduced-motion:reduce){
  .contact-chooser-panel,
  .contact-choice,
  .contact-choice-icon,
  .contact-chooser-close{
    transition:none!important;
  }
}


/* ======================================================
   v41 — Larger hero, still protected from full-bleed upscaling
   ====================================================== */
.visual-hero{
  width:min(1500px,calc(100% - 30px))!important;
  margin:22px auto 62px!important;
}

@media(max-width:900px){
  .visual-hero{
    width:calc(100% - 18px)!important;
  }
}

@media(max-width:560px){
  .visual-hero{
    width:calc(100% - 10px)!important;
  }
}


/* ======================================================
   v42 — Restore full-cover hero + matched contact icons
   ====================================================== */

/* Full viewport-width key visual, as in the earlier version. */
.visual-hero{
  width:100%!important;
  max-width:none!important;
  min-height:520px!important;
  max-height:calc(100vh - 72px)!important;
  aspect-ratio:2 / 1!important;
  margin:0 auto 62px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  background:#fff!important;
}

.visual-hero .hero-banner-image{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Remove the compact framed corners introduced in v38. */
.visual-hero>.hero-vignette{
  border-radius:0!important;
}
.visual-hero>.hero-vignette::before,
.visual-hero>.hero-vignette::after{
  content:none!important;
  display:none!important;
}

/* Keep the gentle v38 drift, but make the image cover the whole hero. */
.hero-banner-image{
  animation:heroDriftV38 19s ease-in-out infinite alternate!important;
}

@media(max-width:900px){
  .visual-hero{
    width:100%!important;
    min-height:440px!important;
    margin:0 auto 42px!important;
    border-radius:0!important;
  }
}

@media(max-width:560px){
  .visual-hero{
    width:100%!important;
    min-height:440px!important;
    max-height:none!important;
    aspect-ratio:1.12!important;
    margin:0 auto 34px!important;
  }
  .visual-hero .hero-banner-image{
    object-fit:cover!important;
    object-position:center!important;
  }
}

/* The chooser now uses the exact same brand assets as the homepage contact cards. */
.contact-choice-icon-brand{
  overflow:hidden;
  padding:0!important;
  background:#fff!important;
  border:1px solid color-mix(in srgb,var(--contact-color) 13%,#e5ebf4);
  box-shadow:
    0 8px 18px rgba(42,68,126,.10),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.contact-choice-icon-brand img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:14px;
}

.contact-choice-icon-brand img[src$="bilibili-user.jpeg"]{
  object-fit:cover!important;
  background:#ef78a9;
}

.contact-choice:hover .contact-choice-icon-brand{
  transform:translateY(-3px) rotate(-4deg) scale(1.08);
  box-shadow:
    0 13px 27px color-mix(in srgb,var(--contact-color) 18%,transparent),
    inset 0 1px 0 rgba(255,255,255,.94);
}

/* Old text-icon styles are no longer needed inside the chooser. */
.contact-choice-icon-text,
.bilibili-mark{
  font-size:inherit;
}