:root{--accent:#5ee7f2;--accent2:#4b7cff;--director-speed:850ms}body{background:#02050c}.tools button{font-size:10px;letter-spacing:.1em}.season-mark{display:block;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff38;box-shadow:inset 0 0 18px #fff2,0 0 18px currentColor}.season-mark.spring{color:#48d5b5;background:radial-gradient(circle at 35% 35%,#baffef,#1b806c 55%,#07352f)}.season-mark.summer{color:#ffc968;background:radial-gradient(circle at 35% 35%,#fff4bd,#e69d29 55%,#6e360b)}.season-mark.autumn{color:#d77d4a;background:radial-gradient(circle at 35% 35%,#ffd1a3,#a74723 55%,#3e150e)}.season-mark.winter{color:#8fe9ff;background:radial-gradient(circle at 35% 35%,#fff,#68bcd9 55%,#183f62)}#director{position:fixed;z-index:70;right:18px;top:82px;bottom:18px;width:min(410px,calc(100vw - 36px));padding:22px;background:linear-gradient(150deg,#091523f5,#030711f5);border:1px solid #5ee7f244;border-radius:18px;box-shadow:0 35px 120px #000;backdrop-filter:blur(28px);transform:translateX(calc(100% + 40px));transition:.45s cubic-bezier(.22,.8,.22,1);overflow:auto}#director.open{transform:none}.director-head{display:flex;justify-content:space-between;align-items:start;padding-bottom:20px;border-bottom:1px solid #ffffff14}.director-head span{display:grid;gap:5px}.director-head b{font:800 13px monospace;letter-spacing:.15em;color:var(--accent)}.director-head small{font:700 9px monospace;letter-spacing:.18em;color:#74869b}#closeDirector{border:0;background:none;color:#fff;font-size:25px;cursor:pointer}#director label{display:grid;gap:10px;margin:22px 0;color:#aab9c9;font:700 10px monospace;letter-spacing:.12em;text-transform:uppercase}#director select{appearance:none;border:1px solid #ffffff22;background:#0a1523;color:#fff;padding:13px;border-radius:9px;font:700 12px system-ui}#director input[type=range]{width:100%;accent-color:var(--accent)}#director output{justify-self:end;color:var(--accent);font:700 11px monospace}.switch{grid-template-columns:38px 1fr!important;align-items:center}.switch input{display:none}.switch span{width:38px;height:21px;border-radius:20px;background:#263444;position:relative;transition:.25s}.switch span:after{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;border-radius:50%;background:#8190a0;transition:.25s}.switch input:checked+span{background:#1c7180}.switch input:checked+span:after{transform:translateX(17px);background:#d7fbff}#director>button:not(#closeDirector){width:100%;padding:13px;margin-top:9px;border:1px solid #5ee7f244;border-radius:8px;background:#5ee7f212;color:#dffcff;font:800 10px monospace;letter-spacing:.13em;cursor:pointer}#director #resetDirector{border-color:#ffffff16;background:#ffffff06;color:#7d8b9c}#transitionFx{position:fixed;z-index:65;inset:0;pointer-events:none;opacity:0;overflow:hidden}#transitionFx i{position:absolute;display:block}.fx-warp #transitionFx{animation:fxVisible var(--director-speed)}.fx-warp #transitionFx:before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,#5ee7f200 0deg,#5ee7f2cc 1deg,#5ee7f200 3deg 12deg);animation:warp var(--director-speed) cubic-bezier(.1,.8,.2,1)}.fx-eclipse #transitionFx{background:radial-gradient(circle,#02050c 0 8%,#5ee7f2 8.5%,#02050c 10% 100%);animation:eclipse var(--director-speed) ease-in-out}.fx-camera #transitionFx{background:linear-gradient(100deg,transparent 0 40%,#fff 48%,var(--accent) 51%,transparent 62%);filter:blur(10px);animation:camera var(--director-speed) ease-in-out}.fx-cut #transitionFx{background:#02050c;animation:cut var(--director-speed) steps(2)}@keyframes fxVisible{0%,100%{opacity:0}15%,70%{opacity:1}}@keyframes warp{0%{transform:scale(2) rotate(0);opacity:0}45%{transform:scale(.08) rotate(35deg);opacity:1}55%{transform:scale(.08) rotate(35deg);opacity:1}100%{transform:scale(2.4) rotate(70deg);opacity:0}}@keyframes eclipse{0%,100%{opacity:0;transform:scale(4)}45%,55%{opacity:1;transform:scale(.1)}}@keyframes camera{0%{opacity:0;transform:translateX(-120%) skewX(-12deg)}45%{opacity:1}100%{opacity:0;transform:translateX(120%) skewX(-12deg)}}@keyframes cut{0%,100%{opacity:0}40%,60%{opacity:1}}body.motion-on .slide.active .photo-copy{animation:multiText 1s .15s both}body.motion-on .slide.active.photo{animation:multiBg 12s ease-out both}@keyframes multiText{from{opacity:0;transform:translateX(-45px)}to{opacity:1;transform:none}}@keyframes multiBg{from{background-position:48% 50%;background-size:102% auto}to{background-position:52% 50%;background-size:112% auto}}body.no-grain .film-grain{display:none}@media(max-width:800px){#director{top:68px}.tools button{font-size:0}.tools button:before{font-size:11px}.tools #directorBtn{font-size:9px}.tools #slidesBtn,.tools #narrator,.tools #voice,.tools #auto,.tools #sound{display:none}body.motion-on .slide.active.photo{animation:none}}
