:root{--cobalt:var(--c-384bff);--offwhite:var(--c-f2f1ec);--midnight:var(--c-101117)}
.cinema-page{background:var(--offwhite);color:var(--midnight)}.cinema-page .nav{position:absolute;inset:0 0 auto;background:transparent;border:0;z-index:20;color:var(--offwhite);height:88px}.cinema-page .wordmark{letter-spacing:-2px}.cinema-page .brand-symbol{color:var(--t-aab4ff)}.cinema-page .wordmark-small{border-color:var(--c-ffffff35)}.nav nav{gap:24px}.language-switch{border:1px solid var(--c-85858e55);background:transparent;color:inherit;padding:8px 10px;font-size:11px;max-width:94px}.language-switch option{color:var(--t-171719);background:var(--c-f2f1ec)}
.cinema-scroll{height:480svh;position:relative}.cinema-stage{position:sticky;top:0;height:100svh;min-height:680px;overflow:clip;isolation:isolate;background:var(--midnight);color:var(--offwhite);--film-opacity:0;--finish:0}.stage-light{position:absolute;inset:0;background:radial-gradient(ellipse at 77% 43%,var(--c-31388655),transparent 52%),linear-gradient(135deg,var(--c-101117) 30%,var(--c-171925));pointer-events:none}.space-grid{position:absolute;inset:-40%;border-radius:50%;background:repeating-radial-gradient(ellipse at 65% 45%,transparent 0,transparent 118px,var(--c-9ca9ff13) 119px,transparent 120px);transform:rotate(var(--grid-turn,-20deg)) scaleY(.65);pointer-events:none}.film-word{position:absolute;left:2.8%;bottom:11%;font:800 28.5vw/.72 Arial,sans-serif;letter-spacing:-.095em;color:var(--t-eeeef10a);transform:translateX(var(--word-x,0));pointer-events:none;white-space:nowrap}
.film-intro,.film-final,.film-caption{position:absolute;left:6%;z-index:6;top:23%;width:47%;max-width:680px}.film-intro h1,.film-final h2,.film-caption h2{font-size:clamp(40px,4.6vw,76px);font-weight:500;line-height:1.24;letter-spacing:-.055em;margin:24px 0}.film-intro h1 em{font-style:normal;color:var(--t-a5b0ff)}.film-description,.film-final>p:not(.eyebrow){font-size:13px;line-height:1.95;color:var(--t-b5b6c5);max-width:440px}.film-intro .eyebrow,.film-final .eyebrow,.film-caption .eyebrow{color:var(--t-a2a7bc);font-size:10px;letter-spacing:.14em}.cinema-link{display:flex;align-items:center;justify-content:space-between;max-width:270px;gap:22px;padding:15px 0;border-bottom:1px solid var(--c-777b95);font-size:13px;margin-top:21px}.cinema-link span{font-size:25px}.cinema-link:hover{color:var(--t-a9b3ff)}.film-scroll-note{font-size:9px;letter-spacing:.12em;margin-top:25px;color:var(--t-8a90ab)}.film-scroll-note span{padding-left:25px}.reveal-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}.reveal-line>span{display:block;transform:translateY(calc((1 - var(--line-progress,1))*112%));opacity:var(--line-progress,1);will-change:transform}
.turntable{position:absolute;right:9%;top:21%;width:min(32vw,450px);aspect-ratio:1;perspective:1500px;z-index:5;transform:translate(var(--camera-x,0),var(--camera-y,0)) scale(var(--camera-scale,1));pointer-events:none}.turn-object{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(var(--camera-tilt,10deg)) rotateY(var(--camera-turn,-22deg)) rotateZ(var(--camera-roll,8deg));will-change:transform}.turn-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--c-ffffff50);box-shadow:0 35px 75px #0008;transform:translateZ(3px);background:var(--c-f8f7f1);color:var(--t-25272e);overflow:hidden}.turn-face canvas{width:100%;height:100%;display:block}.turn-before{padding:18px}.turn-before .plate-top{display:flex;justify-content:space-between;font:9px/1.5 monospace;color:var(--t-85858c);border-bottom:1px solid var(--c-d9d9d2);padding-bottom:12px}.turn-before img{width:100%;height:76%;object-fit:contain;display:block;background:var(--c-ffffff);margin-top:12px}.plate-bottom{display:flex;justify-content:space-between;margin-top:12px;font-size:9px;color:var(--t-65666d)}.turn-back{transform:rotateY(180deg) translateZ(3px);background:var(--c-384bff);color:var(--t-eef0ff);padding:25px;display:flex;flex-direction:column;justify-content:space-between;background-image:linear-gradient(var(--c-ffffff14) 1px,transparent 1px),linear-gradient(90deg,var(--c-ffffff14) 1px,transparent 1px);background-size:32px 32px}.turn-back b{font-size:6.4vw;letter-spacing:-.09em;font-weight:700}.turn-back p{font:10px/1.8 monospace;letter-spacing:.08em}.turn-back>span{font-size:10px;letter-spacing:.15em}.turn-shadow{position:absolute;bottom:-17%;left:10%;width:80%;height:13%;border-radius:50%;background:var(--c-00000088);filter:blur(20px)}
.orbit-images{position:absolute;inset:0;z-index:2;pointer-events:none}.orbit-photo{position:absolute;background:var(--c-f6f5ef);box-shadow:0 20px 45px #0006;padding:6px;width:14%;aspect-ratio:1;overflow:hidden}.orbit-photo img{width:100%;height:100%;object-fit:contain}.orbit-fashion{right:34%;top:58%;width:14%;transform:translateY(calc(var(--orbit,0)*80px)) rotate(-13deg)}.orbit-beverage{right:2%;top:13%;width:12%;aspect-ratio:.77;transform:translateY(calc(var(--orbit,0)*-130px)) rotate(12deg)}.orbit-beverage img{object-fit:cover;object-position:51% 50%}.orbit-fashion img{object-fit:cover;object-position:50% 72%}.orbit-marker{position:absolute;right:9%;top:77%;font:9px monospace;letter-spacing:.13em;color:var(--t-9a9fb6)}
.film-scene{position:absolute;inset:0;opacity:var(--film-opacity);z-index:1;pointer-events:none;clip-path:polygon(100% 0,100% 0,100% 100%)}.film-scene video{width:100%;height:100%;object-fit:cover;object-position:50% 55%;transform:scale(var(--film-scale,1.2));filter:saturate(.65);background:var(--c-101117)}.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--c-101117) 0%,var(--c-101117b0) 45%,var(--c-10111740)),linear-gradient(0deg,var(--c-101117),transparent 40%)}.film-scene>span{position:absolute;right:4%;bottom:18%;font-size:8px;color:var(--t-ffffff)}.film-caption{top:26%;width:40%;opacity:0}.film-caption h2{font-size:clamp(35px,4.8vw,74px)}.film-input-demo{width:290px;max-width:100%;margin-top:25px}.film-input-demo>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--c-ffffff24);padding:12px 0;font-size:12px}.film-input-demo span{color:var(--t-9b9fac);font-size:10px}.film-input-demo b{font-weight:400}.film-input-demo small,.film-caption>small{font-size:9px;color:var(--t-858b9e);display:block;margin-top:16px;line-height:1.7;max-width:290px}.film-final{top:25%;width:38%;opacity:0}.film-final h2{font-size:clamp(35px,4vw,62px)}
.film-proof{position:absolute;left:47%;right:5%;top:24%;height:52%;z-index:5;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center;opacity:0;pointer-events:none;perspective:1500px}.proof-card{min-width:0;margin:0;background:var(--c-f2f1ec);box-shadow:0 22px 60px #0006;transform:translateY(calc((1 - var(--finish))*80px)) rotateY(calc((1 - var(--finish))*-30deg));position:relative}.proof-card canvas{width:100%;display:block}.proof-card>span{display:block;padding:10px 8px;font-size:8px;color:var(--t-505360);line-height:1.4}.proof-fashion{align-self:start;margin-top:12%}.proof-home{align-self:center}.proof-beverage{align-self:end;margin-bottom:6%}.proof-label{position:absolute;left:0;top:-40px;font:10px monospace;color:var(--t-b0b4c9);letter-spacing:.15em}
.cinema-timeline{position:absolute;z-index:12;bottom:24px;left:6%;right:6%;font-size:9px;color:var(--t-b0b4c9)}.cinema-timeline-top{display:flex;justify-content:space-between;letter-spacing:.1em;margin-bottom:4px}.cinema-timeline input{display:block;width:100%;height:24px;margin:0;appearance:none;background:transparent;cursor:ew-resize}.cinema-timeline input::-webkit-slider-runnable-track{height:1px;background:var(--c-838baa70)}.cinema-timeline input::-webkit-slider-thumb{appearance:none;background:var(--c-afbbff);border:2px solid var(--c-171925);height:12px;width:12px;border-radius:50%;margin-top:-5px}.cinema-steps{display:flex;justify-content:space-between;color:var(--t-7b8199);gap:5px}.cinema-steps .active{color:var(--t-e4e7ff)}
.showcase-templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:32px 0 38px}.showcase-templates article{min-width:0}.showcase-templates canvas{width:100%;height:auto;display:block;transition:transform .5s}.showcase-templates article:hover canvas{transform:translateY(-6px)}.showcase-templates article>div{display:flex;flex-direction:column;align-items:start;gap:7px;padding-top:16px;border-top:1px solid var(--c-c9cbc5);margin-top:17px}.showcase-templates h3{font-size:13px;font-weight:500;margin:0}.showcase-templates article span{font-size:10px;color:var(--t-7e837a)}.cinema-page footer{background:var(--c-101117);color:var(--t-b9bdcc);border:0}
body:not(.cinema-page){--accent:var(--c-384bff);background:var(--c-f3f3ef)}.studio-title{border-bottom:1px solid var(--c-deded5);margin-bottom:28px}.panel{background:var(--c-fafaf7)!important;border-color:var(--c-ddded6)!important}.mode-label{background:var(--c-e8ece4)!important;color:var(--t-4a5b43)!important}.canvas-wrap{background:var(--c-e5e6df)!important;box-shadow:0 18px 50px #1820160d}.template-card.selected{border-color:var(--c-384bff);box-shadow:0 0 0 1px #384bff}.preview-dot{background:var(--c-384bff)!important}.template-card small,.preview-caption,.audit-state,.activity-intro,.event-log,.activity-footnote,.counter-grid span{color:var(--t-70766e)!important}.template-usage{border-color:var(--c-384bff);background:var(--c-ebeefc);color:var(--t-4e587a)}.editor input:not([type=file]):not([type=checkbox]),.editor textarea,.editor select{border-color:var(--c-d8dad1)!important;background:var(--c-ffffff)!important;color:var(--t-252a25)}.upload-zone{border-color:var(--c-b8beb0)!important;background:var(--c-f0f2ea)!important}.status-message{color:var(--t-4452a8)}.button{border-radius:3px}.generate{background:var(--c-384bff);border-color:var(--c-384bff)}.generate:hover:not(:disabled){background:var(--c-2638e8)}.studio-title h1{letter-spacing:-.05em}
:lang(en) .film-intro h1,:lang(en) .film-caption h2,:lang(en) .film-final h2{font-size:clamp(38px,4.7vw,74px);letter-spacing:-.055em}
@media(max-width:1000px) and (min-width:761px){.film-intro h1{font-size:41px}.film-final h2{font-size:34px}.turntable{top:27%;right:6%;width:35vw}.film-proof{left:43%;right:4%;gap:8px}.film-final{width:35%}.wordmark-small{display:none}}
@media(max-width:760px){.cinema-page .nav{height:72px;padding:0 6%}.nav nav{gap:14px}.nav #nav-showcase{display:none}.language-switch{max-width:80px;padding:6px;font-size:10px}.cinema-page .nav nav{font-size:11px}.cinema-scroll{height:430svh}.cinema-stage{min-height:740px}.film-intro,.film-caption,.film-final{left:6%;right:6%;width:auto;max-width:none;top:14%}.film-intro h1{font-size:37px;line-height:1.25;margin:18px 0}.film-description{font-size:11px;line-height:1.8}.film-intro .eyebrow,.film-caption .eyebrow,.film-final .eyebrow{font-size:8px}.cinema-link{font-size:11px;padding:8px 0;margin-top:12px;max-width:240px}.film-scroll-note{display:none}.turntable{top:51%;right:21%;width:55vw;max-width:270px}.turn-before{padding:12px}.turn-before .plate-top,.plate-bottom{font-size:7px}.turn-before img{margin-top:7px}.plate-bottom{margin-top:7px}.turn-back{padding:18px}.turn-back b{font-size:13vw}.turn-back p{font-size:8px}.orbit-fashion{right:66%;top:68%;width:25%}.orbit-beverage{right:4%;top:47%;width:22%}.orbit-marker{display:none}.film-word{font-size:42vw;bottom:17%;left:-2%}.film-caption{top:14%}.film-caption h2{font-size:38px;margin:17px 0}.film-input-demo{width:255px;margin-top:14px}.film-input-demo>div{padding:8px 0;font-size:11px}.film-input-demo small{margin-top:8px;font-size:8px}.film-caption>small{display:none}.film-final h2{font-size:34px;margin:18px 0}.film-final>p:not(.eyebrow){font-size:11px}.film-proof{left:6%;right:6%;top:54%;height:29%;gap:9px}.proof-card>span{font-size:7px;padding:7px 5px}.proof-label{top:-25px;font-size:8px}.proof-fashion{margin-top:0}.proof-beverage{margin-bottom:0}.cinema-timeline{bottom:22px}.cinema-steps{font-size:7px}.cinema-timeline-top{font-size:8px}.film-scene video{object-position:85% 50%}.film-scene>span{display:none}.cinema-page .showcase-templates{grid-template-columns:1fr;gap:35px;max-width:460px;margin:30px auto}.cinema-page .showcase-templates article span{display:block}.cinema-page .showcase-templates article>div{flex-direction:row;justify-content:space-between;align-items:center}:lang(en) .film-intro h1,:lang(en) .film-caption h2,:lang(en) .film-final h2{font-size:37px}}
@media(max-width:760px) and (min-height:850px){.turntable{top:53%;width:min(62vw,28svh);max-width:310px}.orbit-fashion{top:66%}.film-proof{top:49%;height:32%}}
@media(prefers-reduced-motion:reduce){.cinema-scroll{height:auto}.cinema-stage{height:max(740px,100svh)}.film-final,.turntable,.orbit-images,.film-scene,.film-caption,.cinema-timeline,.film-scroll-note{display:none!important}.film-proof,.film-final{opacity:1;visibility:visible}.reveal-line>span{transform:none;opacity:1}}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--c-6d7aff)}.language-note{font-size:10px;color:var(--t-777e73);margin:9px 0 0}
@media(max-width:760px){.cinema-stage{min-height:640px}}
@media(max-width:760px) and (max-height:740px){.turntable{top:56%;width:48vw;right:25%}.film-intro h1,.film-caption h2,.film-final h2{font-size:32px}.film-caption .film-input-demo{margin-top:8px}.film-input-demo>div{padding:6px 0}.film-proof{top:56%;height:28%}.orbit-beverage{top:53%;width:20%}.orbit-fashion{top:70%;width:22%}.cinema-link{margin-top:8px}.film-description{font-size:10px}.cinema-timeline{bottom:15px}:lang(en) .film-intro h1,:lang(en) .film-caption h2,:lang(en) .film-final h2{font-size:32px}}
/* A local, inspectable before/after proof alongside the category examples. */
/* Inspect composition details without leaving the gallery or invoking AI. */
.gallery-open{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;overflow:hidden}
.showcase-templates .gallery-open canvas,.showcase-templates article:hover .gallery-open canvas{transform:none;transition:none}
.gallery-open{box-shadow:0 4px 12px #19252106;transition:transform .25s,box-shadow .25s}
.gallery-open:focus-visible{box-shadow:0 14px 28px #19252118}
@media(hover:hover) and (pointer:fine){.showcase-templates article:hover .gallery-open{box-shadow:0 14px 28px #19252118}}
@media(prefers-reduced-motion:no-preference){.gallery-open:focus-visible{transform:translateY(-4px)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.showcase-templates article:hover .gallery-open{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.gallery-open{transition:none}}
.showcase-templates .gallery-expand{display:grid;place-items:center;position:absolute;right:13px;bottom:13px;width:32px;height:32px;border:1px solid var(--c-ffffff80);background:var(--c-ffffffd9);color:var(--t-25372c);border-radius:50%;font-size:19px}
.gallery-is-open{overflow:hidden}
#gallery-close{width:42px;height:42px;border:1px solid var(--c-bfc5bb);background:transparent;font-size:26px;line-height:1;color:var(--t-26362d)}
#gallery-large{display:block;width:100%;height:auto;max-height:calc(94svh - 130px);object-fit:contain}
#gallery-use{min-height:50px}
@media(max-width:760px){#gallery-large{max-height:none}#gallery-use{min-height:0}}
/* Fine-pointer lens movement; the scroll timeline remains authoritative. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .stage-light{background:radial-gradient(ellipse at var(--look-light-x,70%) var(--look-light-y,42%),var(--c-434baa55),transparent 53%),linear-gradient(135deg,var(--c-101117) 30%,var(--c-171925))}
  .turntable{translate:var(--look-x,0px) var(--look-y,0px);transition:translate .65s cubic-bezier(.2,.7,.2,1)}
  .orbit-fashion{translate:calc(var(--look-x,0px)*1.65) calc(var(--look-y,0px)*1.65);transition:translate .85s cubic-bezier(.2,.7,.2,1)}
  .orbit-beverage{translate:calc(var(--look-x,0px)*-.6) calc(var(--look-y,0px)*-.6);transition:translate 1s cubic-bezier(.2,.7,.2,1)}
}
/* Interactive category controls keep their hit targets still during reveal. */
/* Mobile copy stays readable across Japanese, English and Chinese. */
@media(max-width:760px){
  .film-description,.film-final>p:not(.eyebrow){font-size:12px;line-height:1.7;color:var(--t-c5c8d4)}
  .film-input-demo>div{font-size:12px}
  .film-input-demo span{font-size:11px;color:var(--t-afb4c6)}
  .film-intro .eyebrow,.film-caption .eyebrow,.film-final .eyebrow{font-size:9px;color:var(--t-afb5ca);letter-spacing:.08em}
  .cinema-link{font-size:12px;min-height:44px;padding-block:8px}
  .cinema-timeline-top{font-size:10px;letter-spacing:.035em;color:var(--t-bcc3d6)}
  .cinema-steps{font-size:8px;letter-spacing:0;color:var(--t-929bb6)}
  .cinema-timeline input{height:30px}
  .language-switch{min-height:36px;font-size:11px}
}
@media(max-width:760px) and (max-height:740px){
  .turntable{top:59%}
  .film-intro h1,.film-caption h2,.film-final h2{margin-block:14px}
  .film-input-demo small{font-size:9px}
}
/* Short landscape viewports keep the entire cinematic frame on screen. */
@media (min-width:560px) and (max-height:540px) and (orientation:landscape){
  .cinema-stage{min-height:0;height:100svh}
  .cinema-page .nav{height:58px}
  .film-intro,.film-caption,.film-final{top:19%;left:6%;width:36%}
  .film-intro h1,.film-caption h2,.film-final h2{font-size:clamp(24px,3.3vw,36px);line-height:1.2;margin:12px 0}
  .film-description,.film-final>p:not(.eyebrow){font-size:11px;line-height:1.65}
  .film-intro .eyebrow,.film-caption .eyebrow,.film-final .eyebrow{font-size:8px}
  .cinema-link{font-size:11px;margin-top:8px;padding:7px 0;min-height:36px;max-width:245px}
  .film-scroll-note,.film-caption>small,.film-input-demo small{display:none}
  .turntable{top:19%;right:13%;width:min(28vw,56svh)}
  .orbit-beverage{top:16%;width:10%}.orbit-fashion{top:54%;width:12%}
  .film-proof{top:26%;height:50%;left:45%;right:5%;gap:9px}
  .proof-label{top:-24px;font-size:8px}.proof-card>span{font-size:7px;padding:6px}
  .cinema-timeline{bottom:10px}.cinema-timeline-top{font-size:8px}
  .film-input-demo{margin-top:10px}.film-input-demo>div{padding:5px 0;font-size:11px}
}
/* Compact portrait phones: retain the complete story frame and its controls. */
@media(max-width:760px) and (max-height:639px) and (orientation:portrait){
  .cinema-stage{min-height:0;height:100svh}
  .film-intro,.film-caption,.film-final{top:15%}
  .film-intro h1,.film-caption h2,.film-final h2,
  :lang(en) .film-intro h1,:lang(en) .film-caption h2,:lang(en) .film-final h2{font-size:28px;line-height:1.2;margin-block:10px}
  .film-description,.film-final>p:not(.eyebrow){font-size:11px;line-height:1.65}
  .cinema-link{margin-top:6px;min-height:38px;padding-block:5px}
  .film-proof{top:60%;height:24%;gap:8px}
  .proof-label{top:-21px;font-size:7px}
  .proof-card>span{font-size:6px;padding:5px 4px}
  .turntable{top:58%;width:44vw;right:27%}
  .orbit-beverage{top:56%;width:18%}.orbit-fashion{top:72%;width:20%}
  .film-input-demo>div{padding:4px 0;font-size:11px}
  .film-input-demo small{display:none}
  .cinema-timeline{bottom:9px}.cinema-timeline-top{font-size:8px}.cinema-steps{font-size:7px}
}
/* Portrait tablets use the height for a generous photo stage, not narrow desktop columns. */
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .film-intro,.film-caption,.film-final{top:15%;left:8%;width:80%;max-width:760px}
  .film-intro h1,.film-caption h2,.film-final h2{font-size:clamp(44px,6.5vw,66px);line-height:1.2;margin:22px 0}
  .film-description,.film-final>p:not(.eyebrow){font-size:15px;line-height:1.8;max-width:580px}
  .cinema-link{font-size:14px;max-width:310px;min-height:48px}
  .film-scroll-note{display:none}
  .turntable{top:49%;right:25%;width:46vw;max-width:460px}
  .turn-back b{font-size:10vw}
  .orbit-fashion{right:66%;top:69%;width:21%}.orbit-beverage{right:7%;top:45%;width:19%}
  .orbit-marker{right:8%;top:85%}
  .film-word{font-size:36vw;left:-1%;bottom:12%}
  .film-proof{left:8%;right:8%;top:54%;height:28%;gap:18px}
  .proof-fashion{margin-top:0}.proof-beverage{margin-bottom:0}
  .proof-card>span{padding:12px 9px;font-size:9px}
  .proof-label{top:-34px;font-size:10px}
  .film-input-demo{width:360px;margin-top:24px}
  .film-input-demo>div{font-size:14px;padding:12px 0}.film-input-demo span{font-size:12px}
  .film-caption>small{display:none}
}
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .turntable{top:59%;width:38vw;right:29%}
  .film-input-demo small{display:none}
}
/* Chapter labels are direct, local timeline controls. */
.cinema-steps button{appearance:none;border:0;border-top:1px solid transparent;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;padding:8px 0;min-height:32px;cursor:pointer;text-align:left;transition:color .2s,border-color .2s}
.cinema-steps button:last-child{text-align:right}
.cinema-steps button:hover{color:var(--t-e4e7ff)}
.cinema-steps button.active{border-top-color:var(--c-a5b0ff)}
@media(max-width:760px) and (max-height:639px) and (orientation:portrait){.film-proof{top:57%;height:23%}}
/* Six-pixel edges bridge the existing front/back planes during the turn. */
.turn-edge{position:absolute;pointer-events:none;background:linear-gradient(90deg,var(--c-bec6db),var(--c-737f9d) 45%,var(--c-d8deec));border:1px solid var(--c-ffffff45);backface-visibility:visible}
.turn-edge-left,.turn-edge-right{width:6px;height:100%;top:0;transform:rotateY(90deg)}
.turn-edge-left{left:-3px}.turn-edge-right{right:-3px}
.turn-edge-top,.turn-edge-bottom{height:6px;width:100%;left:0;transform:rotateX(90deg);background:linear-gradient(var(--c-e5e9f3),var(--c-687696))}
.turn-edge-top{top:-3px}.turn-edge-bottom{bottom:-3px}
.turn-shadow{opacity:var(--shadow-density,.64);transform:scaleX(var(--shadow-width,.96))}
/* Lighting follows the same scroll angle on touch and pointer devices. */
.turn-face::before{content:'';position:absolute;inset:0;z-index:1;background:var(--c-101b3c);opacity:var(--surface-shade,0);pointer-events:none}
.turn-face::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(112deg,transparent 34%,var(--c-ffffff) 49%,transparent 64%);background-size:220% 100%;background-position:var(--surface-glint,50%) 0;opacity:var(--surface-glint-opacity,.06);pointer-events:none}
/* Readable captions give the gallery a clear second level beneath the artwork. */
.cinema-page .showcase-templates h3{font-size:15px;line-height:1.5;color:var(--t-28332e)}
.cinema-page .showcase-templates article>div>span{font-size:12px;line-height:1.65;color:var(--t-626b63)}
@media(max-width:420px){.cinema-page .showcase-templates article>div{flex-direction:column;align-items:flex-start;gap:5px}}
.showcase-templates .gallery-expand{top:13px;bottom:auto}
/* Narrow inspection panels give each translated layout name its own readable row. */
/* A pair of actual local compositions closes the story without repeating its opening. */
/* Real product thumbnails make the breadth of the sample library immediately visible. */
/* Loading feedback is confined to the artwork and never shifts the category controls. */
/* Laptop-height windows need a complete viewport frame between phone landscape and desktop. */
@media(min-width:761px) and (min-height:541px) and (max-height:679px){
  .cinema-stage{min-height:0;height:100svh}
  .cinema-page .nav{height:72px}
  .film-intro,.film-caption,.film-final{top:20%}
  .film-intro h1,.film-caption h2,.film-final h2,
  :lang(en) .film-intro h1,:lang(en) .film-caption h2,:lang(en) .film-final h2{font-size:clamp(32px,3.5vw,46px);margin:16px 0;line-height:1.2}
  .film-description,.film-final>p:not(.eyebrow){font-size:12px;line-height:1.75}
  .cinema-link{margin-top:12px;padding-block:10px}
  .film-scroll-note{margin-top:16px}
  .turntable{width:min(30vw,48svh);top:20%;right:12%}
  .orbit-beverage{width:10%;top:15%}.orbit-fashion{width:12%;top:59%;right:33%}
  .orbit-marker{top:78%}
  .film-proof{top:27%;height:46%}
  .cinema-timeline{bottom:12px}
  .film-input-demo{margin-top:16px}.film-input-demo>div{padding:9px 0}
  .film-caption>small{margin-top:10px}
}
/* An asymmetric curved aperture replaces the angular film wipe. */
.cinema-masks{position:absolute;pointer-events:none;overflow:hidden}
.film-scene{clip-path:url(#film-aperture)}
.aperture-trace{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:var(--aperture-light,0);mask-image:linear-gradient(transparent,#000 22%,#000 72%,transparent)}
.aperture-trace path{fill:none;stroke:var(--t-a5b2ff);stroke-width:1.25px}
@media(prefers-reduced-motion:reduce){.aperture-trace{display:none}}
/* The three finished compositions arrive from distinct depths, then settle squarely. */
.proof-card{--arrival:var(--finish);--arrival-x:0px;--arrival-y:60px;--arrival-roll:0deg;--rest-yaw:0deg;--rest-roll:0deg;opacity:calc(.4 + .6*var(--arrival));transform:translate3d(calc((1 - var(--arrival))*var(--arrival-x)),calc((1 - var(--arrival))*var(--arrival-y)),calc((1 - var(--arrival))*-140px)) rotateY(calc((1 - var(--arrival))*-24deg + var(--arrival)*var(--rest-yaw))) rotateZ(calc((1 - var(--arrival))*var(--arrival-roll) + var(--arrival)*var(--rest-roll)));box-shadow:1px 1px 0 #d4d1c8,2px 2px 0 #aaa99f,0 24px 42px -12px #0009}
.proof-fashion{--arrival:var(--proof-fashion,0);--arrival-x:55px;--arrival-y:-30px;--arrival-roll:-9deg;--rest-yaw:9deg;--rest-roll:-2deg}
.proof-home{--arrival:var(--proof-home,0);--arrival-y:75px;--arrival-roll:5deg}
.proof-beverage{--arrival:var(--proof-beverage,0);--arrival-x:-45px;--arrival-y:105px;--arrival-roll:11deg;--rest-yaw:-9deg;--rest-roll:2deg}
@media(prefers-reduced-motion:reduce){.proof-card{opacity:1;transform:none}}
@media(max-width:760px){.proof-fashion{--arrival-x:25px;--arrival-y:-18px}.proof-home{--arrival-y:35px}.proof-beverage{--arrival-x:-20px;--arrival-y:20px}}
/* The opening offers a direct path to evidence as well as the editing workspace. */
.film-actions{display:flex;align-items:baseline;gap:24px;max-width:420px}
.film-actions .cinema-link{flex:1;min-width:0}
.film-examples-link{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:12px 0;color:var(--t-b5bdd3);font-size:12px;line-height:1.5;border-bottom:1px solid transparent}
.film-examples-link:hover{color:var(--t-eef0ff);border-bottom-color:var(--c-777b95)}
@media(max-width:760px){.film-actions{max-width:340px;gap:18px}.film-actions .cinema-link{gap:10px}.film-examples-link{font-size:11px;gap:7px;min-height:44px}}
@media(max-width:350px){.film-actions{gap:12px}.film-examples-link{font-size:10px}.film-actions .cinema-link{font-size:11px;gap:6px}}

/* Secondary copy follows the image timeline without moving surrounding layout. */
.scroll-detail{opacity:var(--line-progress,0);transform:translateY(calc((1 - var(--line-progress,0))*12px))}
@media(prefers-reduced-motion:reduce){.scroll-detail{opacity:1;transform:none}}

/* An editorial opening connects the story to the practical composition gallery. */

/* A photographic study provides a tactile pause between the film and the gallery. */

/* A perspective light arc ties the background to the photographic turn. */
.light-orbit{position:absolute;left:40%;top:-24%;width:min(75vw,1200px);aspect-ratio:1;perspective:1000px;opacity:var(--light-level,.52);pointer-events:none;z-index:1;mask-image:linear-gradient(90deg,transparent,#000 24%)}
.light-orbit::before,.light-orbit::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 8%,var(--c-384bff44) 24%,var(--c-7b8aff) 46%,var(--c-e5e8ff) 53%,var(--c-465fff) 62%,transparent 81%);mask-image:radial-gradient(closest-side,transparent 94%,#000 95%,#000 98%,transparent 99%);transform:rotateZ(var(--light-turn,-32deg)) rotateX(62deg);transform-style:preserve-3d}
.light-orbit::after{inset:10%;opacity:.35;transform:rotateZ(calc(var(--light-turn,-32deg) + 18deg)) rotateX(68deg);mask-image:radial-gradient(closest-side,transparent 98%,#000 98.5%,#000 99%,transparent 99.5%)}
@media(max-width:760px){.light-orbit{left:0;top:31%;width:120vw;opacity:calc(var(--light-level,.52)*.65)}}
@media(prefers-reduced-motion:reduce){.light-orbit{display:none}}

/* In the phone inspector, choose a composition before the image and explanation. */
@media(max-width:760px){
  #gallery-large{grid-row:2}
}

/* Keep the final Japanese phrase intact on narrow phones. */
/* Readable editorial captions, with the title opening the same composition study. */
.cinema-page .showcase-templates article>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px}
.cinema-page .showcase-templates h3{font-size:clamp(16px,1.55vw,22px);line-height:1.45;font-weight:500;letter-spacing:-.025em}
.gallery-caption-open{display:block;min-height:44px;padding:0;border:0;background:transparent;color:var(--t-202833);font:inherit;letter-spacing:inherit;text-align:left;text-decoration-thickness:1px;text-underline-offset:6px;cursor:pointer}
.gallery-caption-open:hover:not(:disabled){color:var(--t-384bff);text-decoration:underline}
.gallery-caption-open:focus-visible{outline:2px solid var(--c-384bff);outline-offset:5px}
.gallery-caption-open:disabled{cursor:progress}
.cinema-page .showcase-templates article>div>span{display:block;color:var(--t-5c655f);font-size:13px;line-height:1.7;max-width:30ch}
@media(max-width:760px){
 .cinema-page .showcase-templates article>div{gap:2px;padding-top:10px;margin-top:12px}
 .cinema-page .showcase-templates h3{font-size:19px}
 .cinema-page .showcase-templates article>div>span{font-size:13px}
}
/* A visible playhead trail makes the scroll timeline readable at a glance. */
.cinema-timeline input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--c-b3bfff) 0 var(--story-progress,0%),var(--c-838baa70) var(--story-progress,0%) 100%)}
.cinema-timeline input::-webkit-slider-thumb{margin-top:-5px;box-shadow:0 0 10px #b3bfff38}
.cinema-timeline input::-moz-range-track{height:2px;background:var(--c-838baa70)}
.cinema-timeline input::-moz-range-progress{height:2px;background:var(--c-b3bfff)}
.cinema-timeline input::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--c-171925);border-radius:50%;background:var(--c-afbbff)}
.cinema-timeline input:focus-visible{outline:1px solid var(--c-b3bfff);outline-offset:2px;border-radius:3px}
#stage-counter{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:761px) and (min-height:680px){.film-scroll-note{font-size:10px;color:var(--t-a2aac4);letter-spacing:.08em}}
.cinema-page .showcase-footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:30px;padding:42px 6% 26px}
.showcase-footer nav{display:flex;justify-content:flex-end;align-items:center;gap:30px;flex-wrap:wrap}
.showcase-footer nav a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:13px;line-height:1.5;color:var(--t-d1d5e3)}
.showcase-footer nav a:hover{color:var(--t-afbbff);text-decoration:underline;text-underline-offset:6px}
.showcase-footer nav a:focus-visible{outline:2px solid var(--c-afbbff);outline-offset:5px}
.footer-meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid var(--c-ffffff20);font-size:11px;line-height:1.6;color:var(--t-919bb2)}
@media(max-width:760px){
 .cinema-page .showcase-footer{grid-template-columns:1fr;gap:18px;padding:34px 6% 24px}
 .showcase-footer nav{justify-content:flex-start;gap:4px 22px}
 .footer-meta{font-size:10px;padding-top:18px}
}
@media(max-width:380px){.showcase-footer nav{display:grid;grid-template-columns:1fr;gap:0}.showcase-footer nav a{justify-content:space-between}}
/* Leave the bottom of short landscape scenes to the timeline controls. */
@media(min-width:761px) and (max-height:540px){
 .orbit-marker{display:none}
 .film-scene>span{top:18px;bottom:auto;right:6%;font-size:9px;letter-spacing:.03em;color:var(--t-e4e7f2)}
}
@media(min-width:761px) and (max-height:350px){
 .film-caption{top:14%}
 .film-caption h2{font-size:24px;line-height:1.2;margin:10px 0}
 .film-caption .film-input-demo{margin-top:6px}
 .film-caption .film-input-demo>div{padding:3px 0;font-size:10px}
 .turntable{top:17%;width:min(25vw,48svh)}
}
@media(min-width:761px) and (max-height:350px){
 .film-final{top:14%}
 .cinema-stage .film-intro h1,.cinema-stage .film-caption h2,.cinema-stage .film-final h2{font-size:24px;line-height:1.2;margin:10px 0}
 .film-description,.film-final>p:not(.eyebrow){font-size:10px;line-height:1.65}
 .film-final .cinema-link{margin-top:6px}
 .film-proof{left:49%;right:8%;top:24%;height:42%}
}
@media(min-width:761px) and (max-height:350px){
 .cinema-stage .cinema-link,.film-actions .film-examples-link{height:36px;min-height:36px;padding-block:6px;box-sizing:border-box}
 .cinema-stage .cinema-link span{font-size:22px;line-height:1}
 .film-actions .cinema-link{margin-top:0}
 .film-description{margin-bottom:0}
 .orbit-fashion{top:40%;width:9%}
}
/* Narrow landscape phones share the horizontal camera, not the portrait stack. */
@media(min-width:560px) and (max-width:760px) and (max-height:540px) and (orientation:landscape){
 .film-intro,.film-caption,.film-final{top:18%;right:auto;width:38%}
 .cinema-stage .film-intro h1,.cinema-stage .film-caption h2,.cinema-stage .film-final h2{font-size:24px;line-height:1.2;margin:10px 0}
 .film-description,.film-final>p:not(.eyebrow){font-size:10px;line-height:1.65;margin-bottom:0}
 .turntable{top:19%;right:12%;width:min(28vw,50svh)}
 .turn-back b{font-size:7vw}
 .orbit-fashion{right:32%;top:46%;width:12%}
 .orbit-beverage{right:4%;top:16%;width:10%}
 .film-proof{left:49%;right:6%;top:25%;height:43%;gap:7px}
 .proof-card>span{font-size:6px;padding:5px 3px}
 .light-orbit{left:35%;top:-25%;width:85vw}
 .film-caption .film-input-demo{margin-top:6px}
 .film-input-demo>div{font-size:10px;padding:4px 0}
 .film-input-demo span{font-size:9px}
 .cinema-stage .cinema-link,.film-actions .film-examples-link{height:36px;min-height:36px;padding-block:6px;box-sizing:border-box;font-size:10px}
 .cinema-stage .cinema-link span{font-size:22px;line-height:1}
 .film-actions .cinema-link{margin-top:0}
 .cinema-timeline{bottom:10px}
}
/* Compare actual compositions before choosing a layout in the inspector. */
/* A concise working sequence connects the photographic study to the editor. */
/* The turning photo lands in the central result before the surrounding layouts settle. */
.proof-home{transform:none;opacity:var(--proof-home,0)}
@media(prefers-reduced-motion:reduce){.proof-home{opacity:1}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .turntable{translate:calc(var(--look-x,0px)*(1 - var(--handoff-progress,0))) calc(var(--look-y,0px)*(1 - var(--handoff-progress,0)))}
}
/* Tall tablets keep the photographer in frame instead of cropping to the backdrop. */
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
 .film-scene video{object-position:90% 50%}
}
/* Keep loading feedback beside the category that was actually selected. */
/* Missing sample photos keep a calm, retryable placeholder instead of a broken icon. */
/* A clear paper-colored entry anchors the final cobalt scene. */
/* Static film grain belongs to the scenery, beneath all product artwork and copy. */
.cinema-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:url('/assets/film-grain.svg') repeat;opacity:.16;mix-blend-mode:soft-light;z-index:2}
@media(forced-colors:active){.cinema-stage::after{display:none}}
.cinema-stage::after{z-index:1}
@media(max-width:760px){.film-input-demo small{display:none}}
/* Wide cinematic layouts retain readable instructions beside the display headline. */
@media(min-width:1400px) and (min-height:680px){
 .film-description,.film-final>p:not(.eyebrow){font-size:16px;line-height:1.85;max-width:520px}
 .cinema-stage .cinema-link{font-size:15px;max-width:310px}
 .film-actions .film-examples-link{font-size:13px}
 .film-intro .eyebrow,.film-caption .eyebrow,.film-final .eyebrow{font-size:11px}
 .film-input-demo{width:350px}
 .film-input-demo>div{font-size:15px;padding:12px 0}
 .film-input-demo span{font-size:12px}
 .film-input-demo small,.film-caption>small{font-size:11px;line-height:1.7;max-width:350px}
 .cinema-timeline-top,.cinema-steps{font-size:11px}
}
/* One expansion symbol distinguishes image inspection from navigation arrows. */
.inspect-icon{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.preview-inspect .inspect-icon{width:20px;height:20px}
.gallery-open:hover .gallery-expand,.gallery-open:focus-visible .gallery-expand{background:var(--c-ffffff);color:var(--t-384bff)}
/* Short English phase names leave enough room for legible mobile navigation. */
@media(max-width:760px){:lang(en) .cinema-steps{font-size:10px;letter-spacing:.025em}}
.gallery-header-actions{display:flex;align-items:center;gap:12px}
.gallery-view-meta{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:7px;color:var(--t-70796d);font-size:10px;line-height:1.5;font-variant-numeric:tabular-nums}
.gallery-view-meta>span:last-child{white-space:nowrap}
.turn-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;border-top:1px solid var(--c-ffffff45);padding-top:14px}
.turn-layers>div{display:grid;justify-items:center;gap:8px;padding:5px 2px;border-right:1px solid var(--c-ffffff30)}
.turn-layers>div:last-child{border-right:0}
.turn-layers svg{display:block;width:32px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.turn-layers span{font-size:10px;line-height:1.4;letter-spacing:.04em;white-space:nowrap}
.orbit-photo.media-pending,.orbit-photo.media-unavailable{visibility:hidden}
.turn-before .source-state{display:none;position:absolute;inset:21% 8% 16%;background:var(--c-ffffff);align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;padding:14px;color:var(--t-8a9090);font-size:11px;line-height:1.6}
.source-state svg{width:32px;height:24px;fill:none;stroke:currentColor;stroke-width:1;stroke-linejoin:round}
.turn-before.media-pending img,.turn-before.media-unavailable img{visibility:hidden}
.turn-before.media-pending .source-state,.turn-before.media-unavailable .source-state{display:flex}
@media(max-width:760px){.turn-before .source-state{font-size:8px;gap:7px;padding:6px}.source-state svg{width:24px;height:18px}}
@media(max-width:760px){.turn-layers{gap:4px;padding-top:8px}.turn-layers>div{gap:4px;padding:2px 0}.turn-layers svg{width:24px;height:18px}.turn-layers span{font-size:8px}}
@media(max-width:380px){.gallery-view-meta{font-size:9px;gap:1px 6px;max-width:125px}}
/* Keep the camera at the open right edge of the portrait composition. */
@media(max-width:760px) and (orientation:portrait){.film-scene video{object-position:68% 50%;transform:scale(1)}}
/* Keep both the photographed product and camera legible on desktop.
   The surrounding ink field absorbs the letterbox; the image is not a card. */
@media(min-width:761px) and (orientation:landscape){
 .film-scene video{object-fit:contain;object-position:50% 50%;transform:scale(1.04);mask-image:linear-gradient(transparent 17%,#000 33%,#000 67%,transparent 83%)}
 .film-shade{background:linear-gradient(90deg,var(--c-101117) 0%,var(--c-101117c0) 32%,var(--c-10111750) 58%,var(--c-10111710)),linear-gradient(0deg,var(--c-101117) 5%,transparent 28%,transparent 72%,var(--c-101117) 95%)}
}
#gallery-original-toggle{min-height:42px;padding:8px 13px;border:1px solid var(--c-cbd0c4);background:transparent;color:var(--t-52604d);font-size:12px;line-height:1.4}
#gallery-original-toggle[aria-pressed=true]{color:var(--t-384bff);border-color:var(--c-384bff);background:var(--c-e9edff)}
@media(max-width:380px){.gallery-header-actions{gap:7px}#gallery-original-toggle{padding:8px;font-size:11px}}



/* Keep every navigation destination available on compact screens. */
@media(min-width:481px) and (max-width:760px){.nav #nav-showcase{display:block;font-size:11px}}
@media(max-width:480px){
 .nav,.cinema-page .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 32px;align-items:center;height:92px;padding:8px 6% 12px;column-gap:14px}
 .nav nav{display:contents}
 .nav .wordmark{grid-column:1;grid-row:1;width:max-content}
 .nav #language{grid-column:2;grid-row:1;justify-self:end}
 .nav #nav-showcase,.nav #nav-studio{display:block;grid-row:2;padding:7px 0;font-size:11px;line-height:1.5;white-space:nowrap}
 .nav #nav-showcase{grid-column:1;justify-self:start}
 .nav #nav-studio{grid-column:2;justify-self:end}
 .nav nav span{margin-left:8px}
 /* Three destinations on the second row: about · gallery · studio. */
 .nav,.cinema-page .nav{grid-template-columns:auto minmax(0,1fr) auto}
 .nav .wordmark{grid-column:1/3}
 .nav #language{grid-column:3}
 .nav #nav-gallery{display:block;grid-row:2;grid-column:2;justify-self:center;padding:7px 0;font-size:11px;line-height:1.5;white-space:nowrap}
 /* Studio only: theme switch shares the first row with the language switch. */
 .nav .wordmark:has(~ nav #theme-switch),.nav:has(#theme-switch) .wordmark{grid-column:1}
 .nav #theme-switch{grid-column:2;grid-row:1;justify-self:end}
 .nav #nav-studio{grid-column:3}
 /* Four destinations on the second row: homepage section · LUMA の考え方 · gallery · studio (2026-10-27: 考え方 before 作例集). */
 .nav,.cinema-page .nav{grid-template-columns:repeat(4,auto);justify-content:space-between}
 .nav .wordmark{grid-column:1/4}
 .nav #language{grid-column:4}
 .nav .wordmark:has(~ nav #theme-switch),.nav:has(#theme-switch) .wordmark{grid-column:1/3}
 .nav #theme-switch{grid-column:3}
 .nav #nav-about{display:block;grid-row:2;grid-column:2;justify-self:center;padding:7px 0;font-size:11px;line-height:1.5;white-space:nowrap}
 .nav #nav-gallery{grid-column:3}
 .nav #nav-studio{grid-column:4}
 /* Five destinations (2026-10-26, AI 比較 between LUMA の考え方 and the studio). */
 .nav,.cinema-page .nav{grid-template-columns:repeat(5,auto);column-gap:8px;padding-left:4%;padding-right:4%}
 .nav .wordmark{grid-column:1/5}
 .nav #language{grid-column:5}
 .nav .wordmark:has(~ nav #theme-switch),.nav:has(#theme-switch) .wordmark{grid-column:1/4}
 .nav #theme-switch{grid-column:4}
 .nav #nav-compare{display:block;grid-row:2;grid-column:4;justify-self:center;padding:7px 0;font-size:11px;line-height:1.5;white-space:nowrap}
 .nav #nav-studio{grid-column:5}
 .nav #nav-showcase,.nav #nav-gallery,.nav #nav-about,.nav #nav-compare,.nav #nav-studio{font-size:10.5px}
}
@media(max-width:380px){.nav,.cinema-page .nav{column-gap:5px;padding-left:3%;padding-right:3%}.nav #nav-showcase,.nav #nav-gallery,.nav #nav-about,.nav #nav-compare,.nav #nav-studio{font-size:10px}.nav nav span{margin-left:4px}}


/* Match the Studio landscape export, without stretching the reveal canvas. */
.turntable{aspect-ratio:8 / 5}
.turn-before img{height:calc(100% - 58px);margin-top:6px}
.turn-before .plate-bottom{margin-top:5px}
.turn-back{padding:16px}
.turn-back b{font-size:clamp(30px,5vw,72px)}

/* Three finished products keep the original staggered camera composition. */
.film-proof{left:44%;right:4%;top:23%;height:48%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:center}
.proof-card{min-width:0;background:transparent;box-shadow:0 18px 45px #0005}
.proof-card canvas{height:auto}
.proof-card>span,.proof-label{display:none}
.proof-fashion{align-self:start;margin-top:4%}
.proof-home{align-self:center;margin:0}
.proof-beverage{align-self:end;margin:0 0 4%}
@media(max-width:760px){.film-proof{left:7%;right:7%;top:52%;height:27%;gap:10px}.proof-fashion{margin-top:0}.proof-beverage{margin-bottom:0}}
@media(max-width:760px) and (max-height:740px){.film-proof{top:56%;height:24%}}

/* Reviewed native artworks retain the original three-plane composition. */
.film-proof{grid-template-columns:repeat(3,minmax(0,1fr))}
.turn-after canvas{width:100%;height:100%;object-fit:contain}

/* The square photograph keeps its shape while landing among the finished works. */
.turntable{aspect-ratio:1}
.proof-card{box-shadow:1px 1px 0 #f7f4eb80,3px 3px 0 #96979855,0 28px 48px -12px #0009}
/* A shallow overlapping fan: the landing plane stays in front of its neighbours. */
.film-proof{display:block}
.film-proof .proof-card{position:absolute;width:37.5%;margin:0}
.proof-fashion{left:0;top:0;z-index:1;--rest-yaw:12deg;--rest-roll:-4deg}
.proof-home{left:31.25%;top:20%;z-index:3;box-shadow:1px 1px 0 #f7f4eb90,3px 3px 0 #96979870,-12px 22px 42px -10px #000b,0 40px 65px -18px #000b}
.proof-beverage{left:62.5%;top:40%;z-index:2;--rest-yaw:-12deg;--rest-roll:4deg}
.film-proof .proof-card{pointer-events:auto}
.proof-card:focus-visible{z-index:4;outline:2px solid var(--c-bac3ff);outline-offset:5px}
.proof-card canvas{transform:perspective(900px) rotateX(9deg) rotateY(var(--look-yaw,0deg));transform-origin:50% 60%;box-shadow:1px 2px 0 #e1e0d9,3px 5px 0 #777b85,0 25px 38px -15px #000b;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.proof-card{transition:z-index 0s linear .16s}
@media(hover:hover) and (pointer:fine){
 .film-proof .proof-card:hover{z-index:4}
 .film-proof .proof-card:hover canvas{transform:perspective(900px) translateZ(42px) rotateX(0deg) rotateY(0deg);box-shadow:1px 2px 0 #e1e0d9,3px 5px 0 #777b85,0 40px 48px -15px #000c}
}
.proof-card:focus-visible canvas{transform:perspective(900px) translateZ(42px) rotateX(0deg) rotateY(0deg)}
@media(prefers-reduced-motion:reduce){.proof-card,.proof-card canvas{transition:none}.proof-card canvas,.film-proof .proof-card:hover canvas,.proof-card:focus-visible canvas{transform:none}}
@media(max-width:760px){.proof-home{top:18%}.proof-beverage{top:36%}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .turntable,.film-proof{translate:var(--look-x,0px) var(--look-y,0px);transition:translate .65s cubic-bezier(.2,.7,.2,1)}
 .proof-fashion{translate:calc(var(--look-x,0px)*.35) calc(var(--look-y,0px)*.35);transition:translate .85s cubic-bezier(.2,.7,.2,1)}
 .proof-beverage{translate:calc(var(--look-x,0px)*-.3) calc(var(--look-y,0px)*-.3);transition:translate 1s cubic-bezier(.2,.7,.2,1)}
}

/* 仕上げたあとに (2026-10-26, user: how the AI っぽさ check runs belongs on the homepage; /ai-compare is the proof library).
   Three steps beside one checked example, drawn the way the Studio card and /ai-compare draw a result. */