body{position:relative}
.kz-scene{position:relative;overflow:visible}
.kz-fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.kz-shade{background:rgba(70,50,30,.42);mix-blend-mode:multiply}
.kz-lite{background:var(--kz-lc,rgba(255,190,90,.95));mix-blend-mode:overlay}
.kz-wrap{position:relative;display:inline-block}
.kz-clock{position:relative;display:inline-block}
.kz-dg{display:inline-block;transform-origin:50% 60%}
.kz-clock::before,.kz-clock::after{content:attr(data-t);position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.kz-clock::before{color:#b0864a}.kz-clock::after{color:#5d6f86}
.kz-g .kz-clock::before{opacity:.85;animation:kzS1 var(--kz-d,.6s) steps(7)}
.kz-g .kz-clock::after{opacity:.85;animation:kzS2 var(--kz-d,.6s) steps(7)}
.kz-g .kz-clock,.kz-g .kz-sub{filter:url(#kzWarp)}
.kz-ghost{position:absolute;left:0;top:0;opacity:0;pointer-events:none;color:#5d6f86;white-space:nowrap}
.kz-ghost.kz-on{animation:kzGh var(--kz-gd,.75s) ease-out forwards}
.kz-blocks{position:absolute;inset:-12px -24px;pointer-events:none}
.kz-blocks i{position:absolute;display:block}
@keyframes kzGh{0%{opacity:.6;transform:translate(7px,-3px)}20%{opacity:.5;transform:translate(-5px,2px)}45%{opacity:.4;transform:translate(3px,0)}70%{opacity:.2;transform:translate(-1px,0)}100%{opacity:0;transform:none}}
@keyframes kzS1{0%{clip-path:inset(8% 0 72% 0);transform:translateX(-9px)}25%{clip-path:inset(55% 0 22% 0);transform:translateX(11px)}50%{clip-path:inset(30% 0 52% 0);transform:translateX(-5px)}75%{clip-path:inset(78% 0 4% 0);transform:translateX(7px)}100%{clip-path:inset(42% 0 42% 0);transform:none}}
@keyframes kzS2{0%{clip-path:inset(62% 0 18% 0);transform:translateX(8px)}25%{clip-path:inset(12% 0 70% 0);transform:translateX(-10px)}50%{clip-path:inset(70% 0 10% 0);transform:translateX(5px)}75%{clip-path:inset(25% 0 60% 0);transform:translateX(-8px)}100%{clip-path:inset(50% 0 35% 0);transform:none}}

.kz-lite{transition:background-color 1.4s ease}@media(prefers-reduced-motion:reduce){.kz-lite{transition:none}}



.kz-photo-light{overflow:hidden;mix-blend-mode:multiply;z-index:6}.kz-photo-field{position:absolute;inset:0;pointer-events:none}.kz-photo-field canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;filter:blur(3px)}

/* Keep the artwork above all ambient light and leaf overlays. */
.kz-art{z-index:7;isolation:isolate}

/* Set exchange effects leave the existing layout and image stacking intact. */
.timeline{position:relative}
.stop-time{position:relative}
.kz-set-haze{animation:kzSetHaze 1.45s ease both}
.kz-set-ghost{position:absolute;left:0;top:0;color:#5d6f86;pointer-events:none;animation:kzGh .95s ease-out forwards}
.kz-set-noise{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.kz-set-noise i{position:absolute;display:block;opacity:.6;animation:kzSetNoise .11s steps(2) infinite alternate}
.kz-art-arriving img{animation:kzArtArrive .95s ease-out both}
@keyframes kzSetHaze{0%,100%{filter:none;opacity:1;transform:none}25%{filter:blur(2px);opacity:.45;transform:skewX(-3deg)}38%{transform:skewX(3deg);filter:blur(3px);opacity:.4}65%{filter:blur(1px);opacity:.8;transform:skewX(-1deg)}}
@keyframes kzSetNoise{from{transform:translateX(-8px);opacity:.15}to{transform:translateX(12px);opacity:.65}}
@keyframes kzArtArrive{from{filter:blur(7px);opacity:.35}to{filter:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.kz-set-haze,.kz-set-ghost,.kz-set-noise i,.kz-art-arriving img{animation:none}}

/* Light, leaf light, ambient glow and shade share the same threshold fade. */
.kz-fx,.ambient{opacity:var(--kz-scroll-shade,1);transition:opacity .95s ease-in-out}
.kz-lite{transition:background-color 1.4s ease,opacity .95s ease-in-out}

/* iPhone / iPad Safari only: while a nearby effect runs (the clock warp, the light sweep, the fade), WebKit can draw these layers
   without their blend for a moment, and the light then flashes as a strong orange. There, the layers use a colour that looks soft
   without blending, so a dropped blend shows nothing harsh. (The shade is left as it is: without its blend it looks about the same.) */
@supports (-webkit-touch-callout:none){
  .kz-lite{mix-blend-mode:normal;background:rgba(255,200,120,.3);background:color-mix(in srgb,var(--kz-lc,rgba(255,190,90,.95)) 32%,transparent)}
}

/* The enlarged view: ‹ › for the previous / next work, outside the white frame at the middle of each side */
#lightbox{overflow:visible;width:fit-content}
/* the white frame follows the picture's width (a tall picture used to leave wide white margins at both sides) */
#lightbox img{max-width:min(560px,calc(92vw - 60px))}
#lightbox:focus{outline:none}
.kz-lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:50%;background:rgba(249,246,237,.9);color:#383c35;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0 0 3px}
.kz-lb-nav:hover{background:#f9f6ed}
.kz-lb-nav:focus-visible{outline:2px solid #e5b979;outline-offset:2px}
.kz-lb-prev{left:-56px}.kz-lb-next{right:-56px}
/* a phone: the frame is made narrower so that the buttons fit beside it */
@media(max-width:700px){#lightbox{padding:44px 14px 20px}#lightbox img{max-width:calc(100vw - 132px)}.kz-lb-nav{width:40px;height:40px;font-size:24px}.kz-lb-prev{left:-48px}.kz-lb-next{right:-48px}}

/* The title and the memo next to the picture are read above the light, the shade and the leaf light (like the picture itself) */
.kz-scene .memo-column{position:relative;z-index:8}
/* "01 / 03" above the title: upright, a little larger and in the text colour, so it can be read (it was small, italic and pale) */
.kz-scene .memo-index{font-style:normal;font-size:12px;color:var(--ink)}

/* [環境音] beside [この場所について]: the same small letters; three short bars move slowly while the sounds play */
.kz-head-right{display:flex;align-items:center;gap:28px}
.kz-sound{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:8px 0;font:inherit;font-size:10px;letter-spacing:.1em;color:inherit;cursor:pointer}
.kz-sound:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.kz-sound-bars{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
.kz-sound-bars i{display:block;width:2px;height:3px;background:currentColor;opacity:.45;transform-origin:bottom}
.kz-sound.is-on .kz-sound-bars i{opacity:.9;animation:kzBars 1.6s ease-in-out infinite}
.kz-sound.is-on .kz-sound-bars i:nth-child(2){animation-delay:.35s}.kz-sound.is-on .kz-sound-bars i:nth-child(3){animation-delay:.7s}
@keyframes kzBars{0%,100%{height:3px}50%{height:10px}}
@media(prefers-reduced-motion:reduce){.kz-sound.is-on .kz-sound-bars i{animation:none;height:7px}}
@media(max-width:700px){.kz-head-right{gap:16px}.kz-sound{font-size:9px}}
/* [環境音] and [この場所について] are read above the light, the shade and the leaf light (like the memo next to the picture) */
.kz-head-right{position:relative;z-index:8}