:root{--bg:#1a1a2e;--bg-soft:#272036;--bg-card:#2a2342;--text:#ece8ff;--text-dim:#b8b0d4;--lavender:#c8b6ff;--lavender-bright:#e0d4ff;--pink:#ffb6e1;--gold:#ffd6a5;--accent:#b8a4ff;--border:#3a3258}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);color:var(--text);scroll-behavior:smooth;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,SF Pro Text,Inter,system-ui,sans-serif;font-size:17px;line-height:1.7}body{background:radial-gradient(1100px 600px at 80% -10%, #c8b6ff1f, transparent 60%), radial-gradient(900px 500px at -10% 30%, #ffb6e114, transparent 60%), radial-gradient(700px 400px at 50% 110%, #ffd6a50f, transparent 60%), var(--bg);min-height:100vh;position:relative;overflow-x:hidden}.reveal{opacity:0;will-change:opacity, transform;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transform:translateY(28px)}.reveal-in{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none;transform:none}.stars span,.hero .star,.hero h1,.gallery-item,.clip-card{animation:none!important}}.stars{pointer-events:none;z-index:0;position:fixed;inset:0}.stars span{color:var(--lavender);opacity:.5;-webkit-user-select:none;user-select:none;font-size:14px;animation:4s ease-in-out infinite twinkle,18s ease-in-out infinite drift;position:absolute}@keyframes twinkle{0%,to{opacity:.15;transform:scale(1)}50%{opacity:.85;transform:scale(1.25)}}@keyframes drift{0%,to{translate:0}50%{translate:8px -6px}}.shell{z-index:1;max-width:1200px;margin:0 auto;padding:64px 32px 96px;position:relative}.nav{flex-wrap:wrap;justify-content:center;gap:18px;margin-bottom:48px;font-size:14px;display:flex}.nav a{color:var(--text-dim);padding:4px 2px;text-decoration:none;transition:color .25s,transform .25s;position:relative}.nav a:after{content:"";background:linear-gradient(90deg, var(--lavender), var(--pink));transform-origin:0;height:1px;transition:transform .35s cubic-bezier(.2,.7,.2,1);position:absolute;bottom:-2px;left:0;right:0;transform:scaleX(0)}.nav a:hover{color:var(--lavender-bright);transform:translateY(-1px)}.nav a:hover:after{transform:scaleX(1)}.hero{text-align:center;margin-bottom:72px}.kiyu-rotator{aspect-ratio:1;cursor:pointer;outline:none;width:clamp(220px,36vw,300px);margin:0 auto -14px;transition:transform .4s cubic-bezier(.2,.7,.2,1);animation:5s ease-in-out infinite peek;position:relative}.kiyu-rotator:hover{transform:translateY(-6px)scale(1.03)}.kiyu-rotator:focus-visible{transform:translateY(-4px)scale(1.02)}.kiyu-frame{opacity:0;filter:drop-shadow(0 12px 30px #ffb6e159)drop-shadow(0 0 20px #c8b6ff40);pointer-events:none;border-radius:50%;width:100%;height:100%;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .4s;position:absolute;inset:0;transform:scale(.92)rotate(-4deg)}.kiyu-frame.fit-contain{object-fit:contain;background:0 0;border-radius:0}.kiyu-frame.fit-cover{object-fit:cover;border:2px solid #c8b6ff66;border-radius:50%}.kiyu-frame.active{opacity:1;transform:scale(1)rotate(0)}.kiyu-rotator:hover .kiyu-frame.active{filter:drop-shadow(0 18px 40px #ffb6e18c)drop-shadow(0 0 28px #c8b6ff80)}.kiyu-dots{z-index:3;gap:8px;display:flex;position:absolute;bottom:-22px;left:50%;transform:translate(-50%)}.kiyu-dots span{cursor:pointer;background:#c8b6ff4d;border-radius:50%;width:7px;height:7px;transition:background .3s,transform .3s;display:block}.kiyu-dots span.on{background:var(--lavender);transform:scale(1.35);box-shadow:0 0 8px #c8b6ff99}.kiyu-dots span:hover{background:var(--lavender-bright)}@keyframes peek{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-6px)rotate(-1.5deg)}}.hero h1{letter-spacing:.02em;background:linear-gradient(135deg, var(--lavender-bright), var(--pink), var(--gold), var(--lavender-bright));color:#0000;background-size:300% 300%;-webkit-background-clip:text;background-clip:text;margin-bottom:12px;font-size:clamp(2.4rem,6vw,3.6rem);font-weight:700;animation:8s ease-in-out infinite shimmer,6s ease-in-out infinite float}@keyframes shimmer{0%,to{background-position:0%}50%{background-position:100%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.hero .star{color:var(--lavender);-webkit-text-fill-color:var(--lavender);filter:drop-shadow(0 0 6px #c8b6ff80);animation:8s linear infinite spin;display:inline-block}.hero .star.right{animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}}section{margin-bottom:72px}section h2{color:var(--lavender-bright);letter-spacing:.01em;margin-bottom:18px;font-size:1.5rem;font-weight:600;display:inline-block;position:relative}section h2:before{content:"✦";color:var(--lavender);opacity:.7;margin-right:10px;animation:12s linear infinite spin;display:inline-block}.divider{text-align:center;color:var(--lavender);opacity:.55;letter-spacing:1em;margin:56px 0;font-size:1rem}.gallery-grid{perspective:1200px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));justify-content:center;gap:18px;margin-top:8px;display:grid}.gallery-item{aspect-ratio:1;cursor:pointer;transform-style:preserve-3d;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;border-radius:14px;transition:transform .4s cubic-bezier(.2,.7,.2,1);animation:.7s cubic-bezier(.2,.7,.2,1) backwards pop-in;position:relative}.gallery-item:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(8px) scale(1.03);z-index:2}.tilt-inner{background:var(--bg-soft);border:1px solid var(--border);border-radius:14px;width:100%;height:100%;transition:border-color .3s,box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 6px 20px -12px #0009}.gallery-item:hover .tilt-inner{border-color:var(--lavender);box-shadow:0 24px 60px -22px #c8b6ff8c,0 0 30px -12px #ffb6e159}.gallery-item img{object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1);display:block}.gallery-item:hover img{transform:scale(1.08)}.gallery-item .placeholder{width:100%;height:100%;color:var(--text-dim);text-align:center;justify-content:center;align-items:center;padding:12px;font-size:.85rem;display:flex}.shine{pointer-events:none;background:radial-gradient(300px circle at var(--mx) var(--my), #ffffff2e, transparent 40%);opacity:0;mix-blend-mode:screen;transition:opacity .3s;position:absolute;inset:0}.gallery-item:hover .shine{opacity:1}.caption{color:var(--text);opacity:0;background:linear-gradient(#0000,#1a1a2ef2);padding:24px 12px 12px;font-size:.82rem;transition:opacity .3s,transform .3s;position:absolute;inset:auto 0 0;transform:translateY(8px)}.gallery-item:hover .caption{opacity:1;transform:translateY(0)}@keyframes pop-in{0%{opacity:0;transform:translateY(20px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.clip-grid{grid-template-columns:1fr;gap:14px;margin-top:8px;display:grid}@media (min-width:540px){.clip-grid{grid-template-columns:1fr 1fr}}@media (min-width:900px){.clip-grid{grid-template-columns:repeat(4,1fr)}}.clip-card{background:linear-gradient(145deg, #ffb6e11a, #c8b6ff1a), var(--bg-card);text-align:center;--mx:50%;--my:50%;border:1.5px solid #c8b6ff40;border-radius:22px;padding:22px 18px 16px;transition:border-color .3s,transform .3s,box-shadow .3s;animation:.7s cubic-bezier(.2,.7,.2,1) backwards pop-in;position:relative;overflow:hidden}.clip-card:before{content:"";background:radial-gradient(240px circle at var(--mx) var(--my), #ffb6e138, transparent 50%);opacity:0;pointer-events:none;transition:opacity .35s;position:absolute;inset:0}.clip-card:after{content:"";background:linear-gradient(135deg, var(--pink), var(--lavender), var(--gold));-webkit-mask-composite:xor;opacity:0;pointer-events:none;border-radius:22px;padding:1.5px;transition:opacity .35s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.clip-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px -22px #ffb6e180,0 0 30px -8px #c8b6ff59}.clip-card:hover:before,.clip-card:hover:after{opacity:1}.clip-sparkle,.clip-note{color:var(--lavender);opacity:.55;pointer-events:none;font-size:1rem;transition:transform .4s,opacity .3s;position:absolute}.clip-sparkle{color:var(--pink);animation:9s linear infinite spin;top:10px;left:12px}.clip-note{font-size:1.1rem;animation:3s ease-in-out infinite bob;top:10px;right:12px}.clip-card:hover .clip-sparkle{opacity:.95;transform:scale(1.3)}.clip-card:hover .clip-note{opacity:.95;transform:translateY(-2px)rotate(-8deg)}.clip-card h3{color:var(--lavender-bright);letter-spacing:.02em;margin:4px 0 14px;font-size:.95rem;font-weight:600;transition:letter-spacing .3s;position:relative}.clip-card h3 .heart{color:var(--pink);margin-right:4px;transition:transform .3s;display:inline-block}.clip-card:hover h3{letter-spacing:.06em}.clip-card:hover h3 .heart{transform:scale(1.3)rotate(-8deg)}.clip-card audio{filter:hue-rotate(-10deg)saturate(.9);border-radius:30px;width:100%;position:relative}.clip-card audio::-webkit-media-controls-panel{background:#ffffff0f;border-radius:30px}footer{text-align:center;color:var(--text-dim);border-top:1px solid var(--border);margin-top:80px;padding-top:24px;font-size:.85rem}footer .kao{color:var(--lavender);margin-bottom:6px;font-size:1rem;animation:4s ease-in-out infinite bob;display:block}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}