@font-face{font-family:'Circle Pizza';src:url('assets/fonts/circle-pizza.otf') format('opentype');font-display:swap}@font-face{font-family:'Matcha Style';src:url('assets/fonts/matcha-style.ttf') format('truetype');font-display:swap}@font-face{font-family:'Dynamix';src:url('assets/fonts/dynamix.ttf') format('truetype');font-display:swap}
:root{--ink:#193e58;--gold:#b78a32;--line:#5882a333;--display:'Circle Pizza','Arial Rounded MT Bold',sans-serif;--copy:'Matcha Style','Trebuchet MS',sans-serif;--small:'Dynamix',Arial,sans-serif}
body{font-family:var(--copy);background:#edf7ff}.sky-fade{background:linear-gradient(180deg,#edf5fc08 0%,#f5f8fb22 28%,#f6f8fbb8 73%,#f6f8fbe3 100%)}.masthead{background:#ffffffa8;max-width:none;padding:14px max(32px,calc((100vw - 1190px)/2));min-height:84px;border-bottom:1px solid #fff;box-shadow:0 3px 15px #5790ad0b}.brand{font-family:var(--display);font-size:29px;letter-spacing:0;text-transform:uppercase;gap:12px}.brand img{width:42px;animation:logo-float 6s ease-in-out infinite}.brand-sub{font-family:var(--small);font-size:8px;letter-spacing:1.6px;font-weight:normal;margin-top:5px}.portfolio-link{font-family:var(--small);font-size:10px;letter-spacing:.3px;background:#fff9e9;border:1px solid #c7a45e;border-radius:12px;padding:12px 15px;box-shadow:0 3px 0 #bf9e5640;transition:translate .2s,rotate .2s,box-shadow .2s}.portfolio-link:hover{translate:0 -4px;rotate:-2deg;box-shadow:0 7px 0 #bf9e5626}.portfolio-link span{font-size:18px}.intro{padding:28px 0 32px;align-items:center;min-height:209px;position:relative}.intro>div:first-child{position:relative;z-index:1}.eyebrow{font-family:var(--small);display:inline-block;font-size:9px;font-weight:normal;letter-spacing:1px;color:#8e651c;border:1px solid #c7a45e;background:#fff9e9;border-radius:5px;padding:8px 11px;rotate:-2deg;box-shadow:0 3px 0 #bf9e5621;margin-bottom:15px}h1{font-family:var(--display);font-size:76px;font-weight:normal;letter-spacing:1px;line-height:1.08;color:#fffaf0;-webkit-text-stroke:2px #244d66;paint-order:stroke fill;text-shadow:0 5px 0 #b69347,0 9px 15px #38648316;animation:title-float 7s ease-in-out infinite}.title-period{color:#f6cf70;-webkit-text-stroke:1px #92702d;text-shadow:0 3px 0 #b69347}.intro-right{width:240px;min-width:200px;height:145px;position:relative;align-self:center}.cloud-mascot{display:block;position:absolute;width:250px;padding:0;right:-4px;top:-28px;animation:mascot-float 6.2s ease-in-out infinite;filter:drop-shadow(0 13px 12px #4585b524);isolation:isolate}.mascot-pose{display:block;transition:transform .2s ease-out;transform:translate(var(--cloud-x,0px),var(--cloud-y,0px)) rotate(var(--cloud-angle,0deg))}.cloud-mascot img{display:block;width:100%;height:auto;user-select:none}.cloud-mascot:hover{filter:drop-shadow(0 17px 13px #4585b535)}.cloud-mascot.celebrate .mascot-pose{animation:cloud-hop .9s cubic-bezier(.2,.8,.3,1)}.cloud-sparkles{position:absolute;inset:0;pointer-events:none;z-index:-1}.cloud-sparkles span{position:absolute;left:50%;top:47%;font:25px Arial,sans-serif;color:#d4a332;text-shadow:0 1px 0 #fff7c9;animation:cloud-spark .95s ease-out forwards}.intro-note{position:absolute;right:20px;bottom:-10px;font-family:var(--copy);font-size:11px;line-height:1.6;text-align:center;padding:9px 16px;margin:0;background:#fffaf1e8;border:1px solid #c7a45e66;border-radius:8px;rotate:3deg;animation:note-float 8s ease-in-out infinite;box-shadow:0 4px 15px #5c94b01a}.category-dock{top:10px;border:1px solid #b3ccde;background:#ffffffed;border-radius:16px;box-shadow:0 5px 0 #557c9821,0 8px 22px #3864830f;padding:7px 12px;margin:0 -12px}.categories{gap:12px;min-height:44px;scrollbar-width:none}.categories::-webkit-scrollbar{display:none}.category-tab{font-family:var(--display);font-size:16px;letter-spacing:0;font-weight:normal!important;color:#50768f;padding:12px 17px;border-radius:10px;transition:transform .2s,background .2s,box-shadow .2s;outline-offset:2px}.category-tab:hover{transform:translateY(-2px) rotate(-2deg);background:#eaf5ff}.category-tab[aria-selected="true"]{color:#775421;background:#ffedbd;border:1px solid #d0aa53;box-shadow:0 3px 0 #c9a6505e;transform:rotate(-1.3deg)}.category-tab[aria-selected="true"]:after{display:none}.collection-heading{padding-top:28px;padding-bottom:25px}.collection-heading h2{font-family:var(--small);font-size:9px;letter-spacing:1px}.collection-heading>span{font-family:var(--small);font-size:9px;background:#ffffffa3;padding:6px 10px;border-radius:5px}.effect-heading{margin-bottom:18px}.effect h3{font-family:var(--display);font-size:29px;font-weight:normal;letter-spacing:.2px;color:#234f6a;text-shadow:0 2px 0 #ffffffc4;line-height:1.25}.effect-number{display:flex;align-items:center;justify-content:center;font-family:var(--small);font-size:9px;letter-spacing:0;width:30px;height:31px;background:#fff5d9;border:1px solid #c7a45e82;border-radius:8px;rotate:-5deg;box-shadow:0 3px 0 #b7944b24;animation:tag-float 6.8s ease-in-out infinite}.effect:nth-child(3n+1) .effect-number{animation-delay:-2s}.effect:nth-child(3n+2) .effect-number{animation-delay:-4s}.effect-tools{gap:12px}.variant{font-family:var(--copy);font-size:12px;gap:8px;background:#fffbef;border:1px solid #bea0657d;border-radius:10px;padding:10px 12px;box-shadow:0 3px 0 #be9c4a28;transition:translate .18s,rotate .18s,box-shadow .18s}.variant-prefix{font-family:var(--small);font-size:8px;color:#8b7446;margin-right:0}.variant:hover{translate:0 -3px;rotate:-2deg;box-shadow:0 6px 0 #be9c4a20}.variant:active{translate:0 1px;box-shadow:0 1px 0 #be9c4a28}.focus-button{font-family:var(--small);font-size:9px;background:#f4faff;border:1px solid #a7c5da;border-radius:9px;padding:10px 11px;box-shadow:0 3px 0 #6c9cba22;transition:translate .18s,rotate .18s}.focus-button:hover{translate:0 -3px;rotate:2deg;color:var(--ink)}.frame{border:6px solid #fffdf2;border-radius:17px;outline:1px solid #628ca763;box-shadow:0 7px 0 #406b8a1c,0 15px 35px #37698516;transition:box-shadow .3s}.frame:hover{box-shadow:0 7px 0 #406b8a2c,0 18px 40px #37698522}.big-play{background:#fffae9ed;border:2px solid #8e743d;color:#294d64;box-shadow:0 4px 0 #c4a25d70;backdrop-filter:none}.big-play svg{fill:#294d64;stroke:#294d64;margin-left:4px}.big-play:hover{background:#fff0c5;transform:translate(-50%,-56%) scale(1.07) rotate(-4deg);box-shadow:0 7px 0 #c4a25d60}.angle-arrow{background:#f7fcfff0;color:#315c77;border:1px solid #8bacbf;border-radius:12px;box-shadow:0 4px 0 #406b8a35;opacity:.9;width:37px;height:50px}.angle-arrow:hover,.angle-arrow:focus-visible{background:#fff2cf;color:#755722;transform:translateY(-56%) rotate(-4deg)}.angle-next:hover,.angle-next:focus-visible{transform:translateY(-56%) rotate(4deg)}.playback-row{padding-top:17px;gap:13px}.play-small{height:25px;width:26px;flex-shrink:0;background:#fffaf0;border:1px solid #bfa05b70;border-radius:8px;box-shadow:0 2px 0 #ba964527;transition:translate .2s}.play-small:hover{translate:0 -2px}.play-small svg{width:13px;height:13px}.progress::-webkit-slider-runnable-track{height:3px}.progress::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;background:#c39a3d;border:1px solid #8e6b26}.time{font-family:var(--small);font-size:8px;min-width:79px}.effect-bottom{padding-top:12px}.light-toggle{border:1px solid #b4ccdc;border-radius:10px;background:#e7f2fa99;padding:4px;box-shadow:0 3px 0 #557c9812}.light-toggle button{font-family:var(--copy);font-size:12px;border-radius:6px;gap:7px;padding:7px 13px;transition:translate .2s,rotate .2s}.light-toggle button:hover{translate:0 -1px}.light-toggle button[aria-pressed="true"]{background:#fff7de;box-shadow:0 2px 0 #b88b2f38;color:#76571f}.light-toggle button[aria-pressed="true"] svg{color:#a37823}.view-options{display:flex;gap:18px;align-items:center}.loop-button{font-family:var(--copy);font-size:11px;display:flex;gap:6px;align-items:center;background:#ffffffc2;border:1px solid #9ebdd277;border-radius:8px;padding:7px 10px;color:#58758b;box-shadow:0 2px 0 #557c9817;transition:translate .2s,background .2s}.loop-button:hover{translate:0 -2px}.loop-button svg{width:13px;height:13px}.loop-button[aria-pressed="true"]{color:#76571f;background:#fff1c4;border-color:#d0aa53}.loop-button[aria-pressed="true"] svg{animation:loop-turn 7s linear infinite}.angle-label{font-family:var(--small);font-size:8px;letter-spacing:.5px}.effect-note{font-family:var(--copy);font-size:12px;margin-top:15px;color:#4f7390}.effect-end{background:linear-gradient(90deg,transparent,#7399b340 20%,#7399b340 80%,transparent);margin-top:35px}.gallery{gap:63px}footer{font-family:var(--copy);font-size:12px;border-color:#8fafc446}footer a:last-child{font-family:var(--small);font-size:9px;padding:10px 12px;background:#fffaf0;border:1px solid #c7a45e66;border-radius:8px;transition:translate .2s}footer a:last-child:hover{translate:0 -3px}.footer-name{font-family:var(--display);font-size:26px;letter-spacing:0}
dialog{width:min(1120px,calc(100vw - 28px),calc((94dvh - 200px)*1.77778 + 40px));max-height:95dvh;border:3px solid #fffaf0;border-radius:20px;background:#eff7fd;box-shadow:0 7px 0 #294f6b55,0 25px 100px #0c273b66}.focus-heading{padding:9px 16px;background:#fffaf0;border-bottom:1px solid #d5c49d55;font-family:var(--small);font-size:8px;letter-spacing:1px}.focus-heading button{font-family:var(--copy);font-size:11px;padding:4px 8px;background:#fff1cc;border:1px solid #c6a35a;border-radius:9px;gap:10px}.focus-heading button span{font:22px Arial,sans-serif;line-height:1}#focus-body{padding:17px 16px}.effect.in-focus .effect-heading{margin-bottom:12px}.effect.in-focus h3{font-size:26px}.effect.in-focus .frame{width:100%;max-height:none;aspect-ratio:16/9}.effect.in-focus .playback-row{padding-top:12px}.effect.in-focus .effect-bottom{padding-top:8px}.effect.in-focus .effect-number{animation:none}.effect.in-focus .variant{padding:7px 9px}.video-loading{font-family:var(--copy);font-size:14px}.video-message{font-family:var(--copy);font-size:12px;border-radius:8px}
@keyframes logo-float{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -5px;rotate:2deg}}@keyframes title-float{0%,100%{translate:0 0;rotate:-.3deg}50%{translate:0 -4px;rotate:.2deg}}@keyframes mascot-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -10px;rotate:1deg}}@keyframes note-float{0%,100%{translate:0 0}50%{translate:0 -5px}}@keyframes tag-float{0%,100%{translate:0 0;rotate:-5deg}50%{translate:0 -4px;rotate:1deg}}@keyframes loop-turn{to{rotate:360deg}}@keyframes cloud-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-25px) rotate(-7deg) scale(1.05)}65%{transform:translateY(-4px) rotate(4deg)}}@keyframes cloud-spark{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.6) rotate(95deg)}}
@media(max-width:700px){.masthead{min-height:77px;padding:14px 22px}.brand{font-size:24px}.brand-sub{font-size:7px;letter-spacing:1.1px}.brand img{width:35px}.portfolio-link{font-size:8px;padding:9px 11px;gap:8px}.intro{padding:30px 0 29px;min-height:187px;gap:5px}h1{font-size:57px;letter-spacing:0;max-width:420px;-webkit-text-stroke:1.5px #244d66;text-shadow:0 4px 0 #b69347}.eyebrow{font-size:7px;padding:7px 9px;letter-spacing:.8px;margin-bottom:15px}.intro-right{width:140px;min-width:120px;height:120px}.cloud-mascot{width:170px;right:-16px;top:-11px}.intro-note{display:block;font-size:9px;right:-1px;bottom:-8px;padding:7px 10px}.category-dock{padding:7px 8px;border-radius:13px;margin:0 -5px;top:7px}.categories{gap:6px;min-height:38px}.category-tab{font-size:14px;padding:10px 12px;border-radius:8px}.collection-heading{padding-top:25px;padding-bottom:23px}.effect h3{font-size:24px}.effect-number{width:26px;height:27px;font-size:8px;border-radius:6px}.effect-name{gap:9px}.effect-tools{gap:8px}.variant{font-size:10px;padding:8px 9px;gap:5px;border-radius:8px}.variant-prefix{display:none}.focus-button{padding:8px}.focus-button svg{width:15px;height:15px}.effect-heading{margin-bottom:15px}.frame{border-width:4px;border-radius:12px;box-shadow:0 5px 0 #406b8a1c,0 12px 25px #37698516}.angle-arrow{width:28px;height:40px;border-radius:9px}.big-play{width:48px;height:48px}.effect-note{font-size:11px}.view-options{gap:11px}.angle-label{font-size:7px}.light-toggle button{font-size:10px;padding:7px 9px}.loop-button{font-size:10px;padding:7px 8px}.loop-button svg{width:12px;height:12px}.time{font-size:7px;min-width:68px}.gallery{gap:43px}.effect-end{margin-top:28px}dialog{border-radius:14px;width:min(calc(100vw - 18px),calc((94dvh - 185px)*1.77778 + 32px))}#focus-body{padding:15px 11px}.effect.in-focus h3{font-size:22px}.effect.in-focus .variant{padding:7px}.effect.in-focus .view-options{gap:8px}}
@media(max-width:440px){h1{font-size:47px;max-width:260px;line-height:1.15}.intro{min-height:175px}.intro-right{min-width:95px;width:100px;height:100px}.cloud-mascot{width:145px;right:-25px;top:-7px}.intro-note{font-size:8px;right:-2px;padding:6px 8px;bottom:-18px}.eyebrow{font-size:6px;padding:6px 7px}.effect h3{font-size:21px}.effect-name{gap:7px}.effect-number{width:22px;height:24px;font-size:7px}.effect-tools{gap:6px}.variant{max-width:112px;padding:7px;font-size:9px}.focus-button{padding:7px}.light-toggle button{padding:6px 8px}.view-options{gap:8px}.angle-label{font-size:6.8px}.category-tab{font-size:13px;padding:10px}.portfolio-link{font-size:7px}.brand{font-size:22px}.brand img{width:31px}.playback-row{gap:9px}}
@media(prefers-reduced-motion:reduce){.brand img,h1,.cloud-mascot,.intro-note,.effect-number,.cloud-mascot.celebrate .mascot-pose,.loop-button svg,.cloud-sparkles span{animation:none!important}.mascot-pose{transform:none!important}.portfolio-link,.category-tab,.variant,.focus-button,.frame,.play-small,.light-toggle button,.loop-button,footer a:last-child{transition:none}.cloud-sparkles{display:none}}