/* ^-^ [FONT] Change the Google Font here (keep a fallback stack in body) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');
:root{--c1:#7c3aed;--c2:#0891b2;--bg:#f5f6fb;--fg:#0f172a;--mu:#475569;--cd:rgba(255,255,255,.78);--bd:rgba(15,23,42,.12)}
.dark{--bg:#0a0f1f;--fg:#f1f5f9;--mu:#aab6cb;--cd:rgba(22,30,54,.72);--bd:rgba(255,255,255,.14)}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans','Noto Sans JP','Noto Sans SC',system-ui,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;transition:background .4s,color .4s}
.mu{color:var(--mu)}
.gt{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sh 6s linear infinite}
.dark .gt{background-image:linear-gradient(90deg,color-mix(in srgb,var(--c1) 50%,#fff),color-mix(in srgb,var(--c2) 50%,#fff),color-mix(in srgb,var(--c1) 50%,#fff))}
@keyframes sh{to{background-position:200% center}}
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
.card{display:block;background:var(--cd);border:1px solid var(--bd);backdrop-filter:blur(var(--bl,12px));border-radius:1.25rem;padding:1.5rem;transition:transform .3s,box-shadow .3s,border-color .3s}
.card.rv{transition:opacity .8s,transform .8s}
.card.rv.done{transition:transform .3s,box-shadow .3s,border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -22px var(--c1);border-color:var(--c1)}
.gb{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
.glow{animation:gw 3s ease-in-out infinite alternate}
@keyframes gw{to{box-shadow:0 0 50px -5px var(--c1)}}
.btn{display:inline-block;padding:.8rem 1.6rem;border-radius:999px;font-weight:700;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 28px -12px var(--c1)}
.btn.o{border:2px solid var(--c1);color:var(--fg)}
.chip{padding:.5rem 1rem;border-radius:999px;border:1px solid var(--bd);background:var(--cd);font-weight:600;transition:transform .25s,border-color .25s}
.chip:hover{transform:translateY(-2px);border-color:var(--c1)}
.chip.on{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;border-color:transparent}
.ib{width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--bd);background:var(--cd);transition:transform .25s}
.ib:hover{transform:rotate(20deg) scale(1.1)}
.hd{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(var(--bl,14px));background:var(--cd);border-bottom:1px solid var(--bd)}
.ft{margin-top:5rem;border-top:1px solid var(--bd);background:var(--cd)}
.nl{position:relative}
.nl:after{content:'';position:absolute;left:0;bottom:-5px;height:2px;width:0;background:linear-gradient(90deg,var(--c1),var(--c2));transition:width .3s}
.nl:hover:after,.nl.on:after{width:100%}
.dl{padding:.6rem .9rem;border-radius:.8rem;font-weight:600}
.dl:hover,.dl.on{background:var(--bd)}
#dr{position:fixed;top:0;right:0;height:100%;width:min(22rem,90vw);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:60;overflow:auto;background:var(--bg);border-left:1px solid var(--bd);padding:1.25rem}
#dr.open{transform:none}
#pg{position:fixed;top:0;left:0;height:3px;width:0;z-index:70;background:linear-gradient(90deg,var(--c1),var(--c2))}
.dot{width:2rem;height:2rem;border-radius:50%;border:3px solid transparent;transition:transform .2s}
.dot:hover{transform:scale(1.2)}
.dot.on{border-color:var(--fg)}
.vb{min-height:3px;border-radius:6px 6px 0 0;transform-origin:bottom;animation:gr 1s}
@keyframes gr{from{transform:scaleY(0)}}
.blob{position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.35;animation:bl 14s ease-in-out infinite alternate}
@keyframes bl{to{transform:translate(60px,-50px) scale(1.2)}}
.fl{animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px)}}
.pop{animation:pp .5s}
@keyframes pp{from{opacity:0;transform:translateY(12px)}}
.av{position:relative;width:13rem;height:13rem;border-radius:50%;display:grid;place-items:center;font-size:3.6rem;font-weight:800;overflow:hidden;border:6px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,conic-gradient(var(--c1),var(--c2),var(--c1)) border-box}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tl{border-left:2px solid var(--c1);padding-left:1.5rem}
.bar{height:.6rem;border-radius:9px;background:var(--bd);overflow:hidden}
.bar i{display:block;height:100%;width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.in .bar i{width:var(--w)}
.fi{width:100%;padding:.8rem 1rem;border-radius:.9rem;border:1px solid var(--bd);background:var(--cd);color:var(--fg)}
.fi:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.av[data-edit]{cursor:pointer}
.av[data-edit]:after{content:'📷';position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;font-size:2.2rem;opacity:0;transition:opacity .3s}
.av[data-edit]:hover:after,.av[data-edit]:focus-visible:after{opacity:1}

html[data-g=off]{--bl:0px;--cd:var(--bg)}
html[data-g=crystal]{--bl:26px;--cd:color-mix(in srgb,var(--bg) 35%,transparent)}
html[data-g=tint]{--cd:color-mix(in srgb,var(--c1) 16%,transparent)}
.neon .gt{filter:drop-shadow(0 0 10px var(--c1))}
.neon .btn.gb,.neon .card.gb,.neon .chip.on{box-shadow:0 0 22px var(--c1),0 0 48px color-mix(in srgb,var(--c2) 50%,transparent)}
.neon .card{border-color:var(--c1);box-shadow:0 0 18px -6px var(--c1)}
.neon .hd{box-shadow:0 2px 24px -6px var(--c2)}
.neon .av{filter:drop-shadow(0 0 16px var(--c1))}
#pc{position:fixed;inset:0;z-index:-1;pointer-events:none}
#cu{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:none}
#cu.cu1,#cu.cu2,#cu.cu3,#cu.cu4{display:block}
.cu1{width:34px;height:34px;margin:-17px;border:2px solid var(--c1);border-radius:50%}
.cu2{width:26px;height:26px;margin:-13px;border-radius:50%;background:radial-gradient(var(--c2),var(--c1) 50%,transparent 72%);box-shadow:0 0 25px var(--c1)}
.cu3{font-size:26px;margin:-6px 0 0 -6px}
.cu4{width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--c1)}
.tr{position:fixed;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--c2);pointer-events:none;z-index:99;animation:tf .6s forwards}
@keyframes tf{to{opacity:0;transform:scale(.2)}}
.nc,.nc *{cursor:none!important}
#sk{position:fixed;inset:0;z-index:90;background:var(--bg);transition:opacity .5s}
#sk.x{opacity:0;pointer-events:none}
#sk i{display:block;border-radius:1rem;background:linear-gradient(90deg,var(--bd),var(--cd),var(--bd));background-size:200%;animation:shm 1.2s linear infinite}
@keyframes shm{to{background-position:-200% 0}}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:95;padding:.8rem 1.2rem;border-radius:999px;background:var(--bg);border:1px solid var(--c1);box-shadow:0 10px 30px -10px var(--c1);animation:pp .4s;max-width:90vw;text-align:center}
#wb{animation:br 8s ease-in-out infinite}
@keyframes br{50%{transform:scale(1.8)}}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary:after{content:'＋';float:right;transition:transform .3s}
details[open]>summary:after{transform:rotate(45deg)}