:root {font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#203447;background:#f7f5f0;font-synthesis:none}
* {box-sizing:border-box}
body {margin:0}
main {width:min(1376px,100%);margin:auto;padding:54px 40px 24px}
header {margin-bottom:29px}
.eyebrow {font-size:11px;letter-spacing:.2em;font-weight:650;margin-bottom:17px}
.eyebrow span {margin:0 9px;color:#ac9779}
h1 {font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(25px,3vw,39px);font-weight:500;letter-spacing:.07em;line-height:1.4;margin:0 0 14px}
.intro {font-size:13px;line-height:1.9;letter-spacing:.03em;color:#63707a;margin:0;max-width:760px}
.theatre {border:1px solid #d9d6ce;background:#faf8f3;border-radius:22px;overflow:hidden;box-shadow:0 16px 60px -36px #49382955}
.scene {width:100%;aspect-ratio:16/9;position:relative;isolation:isolate;background:#eee5d9;overflow:hidden}
.world {position:absolute;inset:0;transform-origin:43% 56%;will-change:transform}
.gallery,.flow {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.flow {pointer-events:none;z-index:2}
.occlusions {position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.cmo {position:absolute;height:83%;width:auto;right:1%;bottom:1.5%;object-fit:contain;z-index:8;filter:drop-shadow(5px 9px 6px #28303920)}
.cmo-shadow {position:absolute;right:8%;bottom:20%;width:15%;height:2%;border-radius:50%;background:#2c384340;filter:blur(10px);z-index:6}
.cr-carousel {position:absolute;inset:0;z-index:7;pointer-events:none}
.packet {position:absolute;left:0;top:0;width:42%;aspect-ratio:1;transform-origin:center;will-change:transform,opacity;pointer-events:auto;filter:drop-shadow(0 16px 16px #33271348);outline-offset:5px}
.packet img {width:100%;height:100%;display:block;border:8px solid #f5ecdb;border-radius:3px;box-shadow:0 0 0 1px #8e7856,0 3px 10px #35231520;object-fit:contain;background:#f5ecdb}
.packet:focus-visible {outline:3px solid #b58c51}
.lightpool {position:absolute;width:19%;height:24%;background:radial-gradient(ellipse,#fed58965 0%,#ffe39d19 33%,transparent 66%);border-radius:50%;mix-blend-mode:screen;pointer-events:none;z-index:1}
.pool-0 {left:5%;top:36%}.pool-1 {left:28%;top:35%}.pool-2 {left:49%;top:49%}.pool-3 {left:59%;top:34%}
.spark {position:absolute;width:4px;height:4px;border-radius:50%;background:#fff2c8;box-shadow:0 0 9px 3px #ffe39b70;z-index:3;pointer-events:none}
.below-scene {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 25px}
.stages {display:flex;gap:28px;padding:0;margin:0;list-style:none}
.stages li {font-size:13px;color:#6b7276;display:flex;align-items:center;gap:8px;transition:color .6s;white-space:nowrap}
.stages span {font-size:12px;letter-spacing:.02em;color:#858982;border:1px solid #d9d8cf;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;transition:background .6s,color .6s,border-color .6s}
.stages .active {color:#233f4a}.stages .active span {background:#27424b;border-color:#27424b;color:#fff}
button {font:inherit;font-size:12px;color:#344b58;background:transparent;border:1px solid #c7cbc7;border-radius:30px;padding:11px 16px;display:flex;gap:8px;align-items:center;cursor:pointer;white-space:nowrap;min-height:42px}
button:hover {background:#efeee7}button:focus-visible,a:focus-visible {outline:2px solid #426775;outline-offset:4px}
.button-icon {width:12px;text-align:center;font-size:13px}
footer {display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#858a89;padding:18px 3px;gap:12px}
footer p {margin:0}footer a {color:#6b777c;text-underline-offset:4px}footer a span {margin-left:6px}
@media(max-width:700px){
  main{padding:34px 16px 20px}
  header{margin-bottom:23px}
  .eyebrow{font-size:12px;margin-bottom:14px}
  h1{font-size:25px;letter-spacing:.02em}
  .intro{font-size:12px;line-height:1.9;max-width:340px}
  .theatre{border-radius:15px}
  .scene{aspect-ratio:4/5;background-image:url("assets/gallery-mobile.v078.webp");background-size:100% 100%;background-position:right bottom}
  .world{height:auto;aspect-ratio:16/9;width:116%;top:0;left:-1%;bottom:auto;transform-origin:35% 40%;mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}
  .gallery{object-fit:fill}
  .scene:after{content:"";position:absolute;inset:54% 0 0;background:linear-gradient(transparent,#e6dfd440);z-index:5;pointer-events:none}
  .cmo{height:56%;right:-6%;bottom:7%;z-index:8;filter:drop-shadow(4px 6px 4px #28303928)}
  .cmo-shadow{bottom:21%;right:3%;width:28%;height:3%;z-index:6}
  .packet{width:64%;filter:drop-shadow(0 8px 8px #3327133b)}
  .packet img{border-width:4px}
  .below-scene{display:flex;flex-direction:column;align-items:stretch;padding:17px 15px;gap:18px}
  .stages{justify-content:space-between;gap:6px}
  .stages li{font-size:12px;flex-direction:column;gap:6px}
  .stages span{width:22px;height:22px;font-size:12px}
  button{align-self:center;padding:9px 17px}
  footer{font-size:12px;line-height:1.7;padding:15px 1px}
}
@media(prefers-reduced-motion:reduce){.stages li,.stages span{transition:none}.world,.packet{will-change:auto}}

.ad-frame{position:absolute;left:43%;top:51.5%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);padding:8px;background:#f5ecdb;border:1px solid #9c8461;border-radius:4px;z-index:7;box-shadow:0 19px 30px #35291d50,0 1px 0 #fff9eb inset}
.ad-window{position:relative;width:100%;height:100%;overflow:hidden;background:#19334a;border:1px solid #b4a17d;isolation:isolate}
.advertisement{position:absolute;inset:0;display:block;opacity:0;will-change:transform;outline-offset:-4px;overflow:hidden}
.advertisement:first-child{opacity:1}.advertisement img{display:block;width:100%;height:100%;object-fit:contain;background:#f5ecdb}
.advertisement:focus-visible{outline:4px solid #64c9c4;z-index:20!important}
.cmo{overflow:visible;pointer-events:none;filter:drop-shadow(5px 9px 6px #28303920)}
.below-scene{padding:18px 25px}.ad-navigation{display:flex;align-items:center;gap:14px}.ad-navigation button{width:40px;min-height:40px;padding:0;display:grid;place-items:center;font-size:17px}.creative-count{font-size:12px;font-variant-numeric:tabular-nums;color:#677678;letter-spacing:.05em}.creative-count #creative-index{color:#213d47;font-weight:650}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
@media(max-width:700px){
 .ad-frame{width:64%;left:33.3%;top:70%;padding:4px;box-shadow:0 9px 15px #35291d48}
 .cmo{height:58%;right:-4%;bottom:5.5%;overflow:visible;filter:drop-shadow(4px 6px 4px #28303928)}
 .below-scene{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:14px 13px}
 .ad-navigation{gap:8px}.ad-navigation button{width:32px;min-height:36px}.creative-count{font-size:12px}.below-scene #toggle{min-height:36px;font-size:12px;padding:8px 11px;gap:5px}
 footer{flex-direction:column;align-items:flex-start;gap:12px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.advertisement{will-change:auto}}

.download-mobile{display:none}@media(max-width:700px){.download-desktop{display:none}.download-mobile{display:inline}}

/* Seedance generated video layer */
.cmo{aspect-ratio:2/3;width:auto}
.cmo-poster,.cmo-video,.cmo-nameplate{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.cmo-video{clip-path:inset(0 0 22.25% 0);opacity:0}
.cmo-nameplate{clip-path:inset(77.8% 0 0 0)}
.scene[data-video-ready="true"] .cmo-video{opacity:1}
.scene[data-video-ready="true"] .cmo-poster{visibility:hidden}