:root{--bg:#f3f4f1;--card:#fff;--fg:#14202b;--mut:#566370;--line:#dde1dc;--acc:#0b5d5b;--bad:#c92a2a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#10171d;--card:#18222b;--fg:#e8edf0;--mut:#8d9aa5;--line:#2b3742;--acc:#4fc3bd;--bad:#ff6b6b}}
:root[data-theme="dark"]{--bg:#10171d;--card:#18222b;--fg:#e8edf0;--mut:#8d9aa5;--line:#2b3742;--acc:#4fc3bd;--bad:#ff6b6b}
html{scroll-padding-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 'Bricolage Grotesque',system-ui,sans-serif}
.wrap{max-width:1200px;margin:0 auto;padding:12px}
header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}
h1{font-size:22px;margin:0;font-weight:800}h2{font-size:16px;margin:0 0 8px}
.mut{color:var(--mut);font-size:13px}
button,input,select{font:inherit;color:var(--fg)}
button{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer}
button:hover{border-color:var(--acc)}button.p{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:600}button.d{color:var(--bad)}
input,select{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 8px;width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tabs{flex-wrap:nowrap;overflow-x:auto}.tabs button{border-radius:20px;white-space:nowrap}.tabs button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
#sync{font-size:12.5px;color:var(--mut)}
#warn{display:none;background:color-mix(in srgb,var(--bad) 14%,var(--card));border:1px solid var(--bad);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:13.5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.scroll{overflow-x:auto}
.grid{display:grid;grid-template-columns:44px repeat(7,minmax(100px,1fr));min-width:780px}
.hd{text-align:center;padding:4px 2px;border-bottom:1px solid var(--line);font-size:13px}.hd b{display:block}.hd.t b{color:var(--acc)}
.chip{display:block;font-size:11px;border-radius:5px;padding:1px 4px;margin:2px 0;background:color-mix(in srgb,var(--bad) 16%,var(--card));text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chip.x{background:var(--bad);color:#fff}
.tc{position:relative}.tc div{position:absolute;right:5px;font-size:11.5px;color:var(--mut);transform:translateY(-8px)}
.col{position:relative;border-left:1px solid var(--line)}.col.t{background:color-mix(in srgb,var(--acc) 6%,transparent)}
.hl{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.now{position:absolute;left:0;right:0;border-top:2px solid var(--bad);z-index:3}
.ev{position:absolute;left:2px;right:2px;border-radius:7px;padding:2px 5px;font-size:12px;line-height:1.2;overflow:hidden;cursor:pointer;background:color-mix(in srgb,var(--c) 26%,var(--card));border-left:4px solid var(--c)}
.ev.l{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--c) 15%,var(--card)) 0 7px,var(--card) 7px 14px);border-left-style:dotted}
.ev.dn{opacity:.5;text-decoration:line-through}.ev.x{outline:2px solid var(--bad)}
.ev b{display:block}.ev small{color:var(--mut)}
.row{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;border:1px solid var(--line);border-left:5px solid var(--c,var(--line));margin-bottom:6px;background:var(--card);cursor:pointer}
.row .tm{min-width:92px;font-weight:600}.row.dn{opacity:.5}.row.x{outline:2px solid var(--bad)}
.m{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.mc{min-height:78px;border:1px solid var(--line);border-radius:8px;padding:3px;cursor:pointer;overflow:hidden;background:var(--card)}
.mc.o{opacity:.4}.mc.t{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}.mc b{font-size:12px}
.dot{display:block;font-size:10.5px;border-radius:4px;padding:0 3px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:color-mix(in srgb,var(--c) 28%,var(--card))}
.st{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:10px}.st div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px}.st b{display:block;font-size:20px}
.prog{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:4px}.prog i{display:block;height:100%;background:var(--acc)}
#toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:10px;z-index:20;display:none;max-width:90vw;font-size:14px}
#md{position:fixed;inset:0;background:#0007;display:none;align-items:center;justify-content:center;z-index:9;padding:12px}
#md>div{background:var(--card);border-radius:14px;padding:14px;width:100%;max-width:400px;max-height:90vh;overflow:auto}
label{display:block;font-size:12.5px;color:var(--mut);margin:7px 0 2px}.r2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sw{width:26px;height:26px;padding:0;border-radius:50%}
#nav{position:fixed;z-index:5;background:var(--card);border:0 solid var(--line);display:flex}
.nb{background:none;border:0;border-radius:10px;color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer}.nb b{font-weight:600}.nb.on{color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.nt{display:none}#tabs:empty{display:none}
@media(max-width:899px){#nav{left:0;right:0;bottom:0;border-top-width:1px;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));justify-content:space-around}.nb{flex-direction:column;padding:4px 6px;font-size:11px;flex:1}.nb span{font-size:20px;line-height:1.1}.wrap{padding-bottom:84px}}
@media(min-width:900px){#nav{left:0;top:0;bottom:0;width:190px;border-right-width:1px;flex-direction:column;gap:4px;padding:16px 10px}.nt{display:block;font-weight:800;font-size:17px;margin:2px 8px 12px}.nb{flex-direction:row;justify-content:flex-start;gap:10px;padding:9px 12px;font-size:15px}.nb span{font-size:18px}.wrap{margin:0 auto 0 190px;max-width:1100px}}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:2px;cursor:pointer}.tile b{font-size:22px;font-weight:800}.tile span{font-weight:600}.tile small{color:var(--mut)}
.ai{white-space:pre-wrap;background:var(--bg);border-radius:8px;padding:10px;font-size:14px;margin-top:8px}textarea{width:100%;font:inherit;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px}


:root{--sh:0 1px 2px rgba(20,32,43,.05),0 10px 28px -14px rgba(20,32,43,.18);--ac2:#7048e8;scroll-behavior:smooth}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--sh:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--sh:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.7)}
body{background:radial-gradient(900px 480px at 8% -8%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%),radial-gradient(700px 420px at 100% 0,color-mix(in srgb,var(--ac2) 10%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
h1{background:linear-gradient(90deg,var(--acc),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.card,.st>div,.tile,.row{box-shadow:var(--sh)}
.card{border-radius:16px}
button{transition:transform .14s cubic-bezier(.3,1.4,.5,1),box-shadow .2s,border-color .2s,background .2s,opacity .2s}
button:active{transform:scale(.95)}
button.p{background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 55%,var(--ac2)));box-shadow:0 6px 16px -8px var(--acc)}
#nav{background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nb{transition:background .25s,color .25s,transform .15s}.nb span{display:inline-block;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.nb.on span{transform:scale(1.18)}.nb.jump span{animation:jump .5s cubic-bezier(.3,1.6,.5,1)}
.tabs button{transition:all .2s}
.tile{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s}
.tile b{background:linear-gradient(90deg,var(--fg),color-mix(in srgb,var(--acc) 70%,var(--fg)));-webkit-background-clip:text;background-clip:text;color:transparent}
.row{transition:transform .18s,box-shadow .2s,opacity .3s,border-color .2s}
.ev{transition:transform .15s,box-shadow .2s,filter .2s}
.hero{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 14%,var(--card)),color-mix(in srgb,var(--ac2) 10%,var(--card)));position:relative}
.hero::after{content:"";position:absolute;right:14px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--acc);animation:pulse 2s infinite}
.now{box-shadow:0 0 8px var(--bad)}.now::before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--bad);animation:pulse 2s infinite}
.greet{font-size:22px;font-weight:800;margin:2px 2px 10px}.greet small{display:block;font-size:13px;font-weight:400;color:var(--mut)}
.prog i{border-radius:3px}
@media(hover:hover){.tile:hover,.card:hover{transform:translateY(-2px)}.tile:hover{box-shadow:0 14px 30px -14px rgba(20,32,43,.35);border-color:var(--acc)}.row:hover{transform:translateX(3px)}.ev:hover{transform:scale(1.025);z-index:4;box-shadow:0 8px 20px -8px rgba(0,0,0,.45)}.nb:hover{background:color-mix(in srgb,var(--acc) 9%,transparent)}.card{transition:transform .25s,box-shadow .25s}}
.enter>*{animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}
.enter>*:nth-child(2){animation-delay:.05s}.enter>*:nth-child(3){animation-delay:.1s}.enter>*:nth-child(4){animation-delay:.15s}.enter>*:nth-child(n+5){animation-delay:.2s}
.enter .tile{animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}.enter .tile:nth-child(2){animation-delay:.06s}.enter .tile:nth-child(3){animation-delay:.12s}.enter .tile:nth-child(4){animation-delay:.18s}.enter .tile:nth-child(5){animation-delay:.24s}.enter .tile:nth-child(6){animation-delay:.3s}
.enter .ev{animation:pop .45s cubic-bezier(.3,1.4,.5,1) backwards}.enter .col:nth-child(odd) .ev{animation-delay:.06s}.enter .col:nth-child(3n) .ev{animation-delay:.12s}
.enter .prog i{animation:grow .9s cubic-bezier(.2,.8,.2,1) backwards .15s}
.enter .row{animation:rise .4s ease backwards}
#md{animation:fade .2s}#md>div{animation:pop .28s cubic-bezier(.3,1.4,.5,1);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
#toast{animation:rise .3s cubic-bezier(.2,.8,.2,1)}
.cf{position:fixed;width:8px;height:12px;border-radius:2px;z-index:30;pointer-events:none;animation:cf .9s ease-out forwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes pop{from{opacity:0;transform:scale(.92)}}
@keyframes fade{from{opacity:0}}
@keyframes grow{from{width:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 55%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes jump{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}100%{transform:scale(1.18)}}
@keyframes cf{to{transform:translate(var(--dx),calc(var(--dy) + 140px)) rotate(var(--rot));opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.cf{display:none}}
#sakura{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .8s;--bark:#6b4a3a}
.on-start #sakura{opacity:1}
:root[data-theme="dark"] #sakura{--bark:#9a7a68}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) #sakura{--bark:#9a7a68}}
#sakura svg.tree{position:absolute;right:-30px;bottom:0;width:min(820px,115vw);height:auto;opacity:.55;transform-origin:70% 100%;animation:sway 9s ease-in-out infinite alternate}
@media(min-width:900px){#sakura svg.tree{opacity:.88}}
#sakura svg.tree path.br{fill:none;stroke:var(--bark);stroke-linecap:round}
.on-start .card,.on-start .tile,.on-start .st>div{background:color-mix(in srgb,var(--card) 76%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.on-start .hero{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 16%,transparent),color-mix(in srgb,var(--ac2) 12%,transparent))}
.pt{position:absolute;top:-24px;width:11px;height:8px;border-radius:70% 0 70% 0;background:#ffc1d6;opacity:.85;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,-24px) rotate(0)}50%{transform:translate(46px,55vh) rotate(190deg)}100%{transform:translate(-24px,112vh) rotate(420deg)}}
@media(prefers-reduced-motion:reduce){.pt{display:none}}
#clock{position:fixed;z-index:7;font-variant-numeric:tabular-nums;pointer-events:none;color:var(--fg)}
#clock b{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}#clock b i{font-style:normal;font-size:14px;color:var(--mut);font-weight:600;margin-left:3px}
#clock small{display:block;color:var(--mut);font-size:12px;margin-top:3px;white-space:nowrap}
@media(min-width:900px){#clock{left:18px;top:50px;width:160px}.nt{margin-bottom:84px}}
@media(max-width:899px){#clock{top:calc(10px + env(safe-area-inset-top,0px));right:12px;text-align:right;background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:6px 10px;box-shadow:var(--sh)}#clock b{font-size:20px}#clock small{margin-top:1px;font-size:11px}header>.bar{width:100%}header>.bar #q{flex:1;min-width:90px}}
.al{display:inline-block;padding:7px 13px;border-radius:8px;text-decoration:none;font-weight:600;background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 55%,var(--ac2)));color:var(--bg)}
.qrbox{background:#fff;padding:10px;border-radius:14px;display:inline-block;line-height:0;box-shadow:var(--sh)}
@media(max-width:899px){.nb{padding:4px 1px;font-size:10.5px}.nb span{font-size:19px}}

html:root[data-skin="sakura"]{--bg:#fff3f6;--card:#fff;--fg:#3b2332;--mut:#7f5a6b;--line:#f2d2dc;--acc:#c2255c;--ac2:#9b6bd6;--bad:#c92a2a;--bark:#6b4a3a;--sh:0 1px 2px rgba(120,40,70,.06),0 12px 30px -16px rgba(194,37,92,.28);color-scheme:light}
html:root[data-skin="aurora"]{--bg:#070b1c;--card:#0f1636;--fg:#e9edff;--mut:#93a0cc;--line:#26306a;--acc:#5eead4;--ac2:#a78bfa;--bad:#ff7a93;--sh:0 1px 2px rgba(0,0,0,.5),0 16px 40px -18px rgba(94,234,212,.35);color-scheme:dark}
html:root[data-skin="ozean"]{--bg:#e6f7fc;--card:#fff;--fg:#0a2a3f;--mut:#4a6c80;--line:#c6e5ef;--acc:#086f93;--ac2:#00b4a6;--bad:#d6336c;--sh:0 1px 2px rgba(10,60,90,.06),0 12px 30px -16px rgba(10,126,164,.38);color-scheme:light}
html:root[data-skin="sakura"] body{background:radial-gradient(900px 520px at 88% -8%,rgba(255,196,218,.75),transparent 70%),radial-gradient(700px 420px at 0 8%,rgba(255,232,206,.85),transparent 70%),linear-gradient(180deg,#ffeaf1 0%,#fff6f1 55%,#fde6ee 100%) fixed}
html:root[data-skin="aurora"] body{background:radial-gradient(120% 70% at 50% -10%,#16235a 0%,#0a1032 48%,#050816 100%) fixed}
html:root[data-skin="ozean"] body{background:linear-gradient(180deg,#dff6fc 0%,#c4ecf7 45%,#9fdcee 100%) fixed}
html:root[data-skin="sakura"] :is(.card,.tile,.st>div){background:color-mix(in srgb,var(--card) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html:root[data-skin="ozean"] :is(.card,.tile,.st>div){background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html:root[data-skin="aurora"] :is(.card,.tile,.st>div){background:color-mix(in srgb,var(--card) 66%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:color-mix(in srgb,var(--ac2) 28%,var(--line))}
html:root[data-skin] :is(.card,.tile) .row{background:color-mix(in srgb,var(--card) 55%,transparent)}
html:root[data-skin="aurora"] button.p,html:root[data-skin="aurora"] .al{box-shadow:0 0 18px -4px var(--acc)}
html:root[data-skin="aurora"] .prog i{box-shadow:0 0 10px var(--acc)}
html:root[data-skin="aurora"] .hero::after,html:root[data-skin="aurora"] .now::before{background:var(--acc)}
@media(hover:hover){html:root[data-skin="aurora"] .tile:hover{box-shadow:0 0 0 1px var(--acc),0 0 28px -6px var(--acc)}html:root[data-skin="sakura"] .tile:hover{box-shadow:0 14px 30px -14px rgba(194,37,92,.45)}}
html:root[data-skin="ozean"] :is(button,.tile,.nb){position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.6);transform:scale(0);animation:rip .65s ease-out forwards;pointer-events:none}
html:root:not([data-skin="klassik"]) #th{display:none}
body.fx-all #sakura{opacity:.4}body.fx-all.on-start #sakura{opacity:1}body.fx-off #sakura{display:none}
#sakura i,#sakura svg{pointer-events:none}
#sakura .photo{position:absolute;inset:0;background-size:cover;background-position:center}
#sakura .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(color-mix(in srgb,var(--bg) 28%,transparent),color-mix(in srgb,var(--bg) 58%,transparent))}
#sakura .fuji{position:absolute;left:-30px;bottom:0;width:min(780px,105vw);height:auto;opacity:.65}
#sakura .stars{position:absolute;inset:0;width:100%;height:100%}
#sakura .tw{animation:twk 3s ease-in-out infinite alternate}
#sakura .mount{position:absolute;left:0;bottom:0;width:100%;height:24vh}
#sakura .au{position:absolute;left:-20%;width:140%;height:52vh;top:-6vh;filter:blur(36px);opacity:.55;mix-blend-mode:screen;animation:aur 15s ease-in-out infinite alternate;will-change:transform}
#sakura .a1{background:linear-gradient(100deg,transparent 4%,#2dd4bf 30%,#22d3ee 52%,transparent 78%)}
#sakura .a2{top:7vh;height:42vh;background:linear-gradient(100deg,transparent 14%,#a78bfa 40%,#f472b6 62%,transparent 86%);animation-duration:21s;animation-delay:-6s}
#sakura .a3{top:-3vh;height:38vh;background:linear-gradient(80deg,transparent 8%,#34d399 34%,#60a5fa 60%,transparent 92%);animation-duration:26s;animation-delay:-11s;opacity:.4}
#sakura .ss{position:absolute;top:9%;left:72%;width:130px;height:2px;background:linear-gradient(90deg,#fff,transparent);opacity:0;animation:shoot 11s linear infinite}
#sakura .s2{top:22%;left:38%;animation-delay:-5.5s;animation-duration:14s}
#sakura .rays{position:absolute;left:-25%;top:-25%;width:150%;height:100vh;background:conic-gradient(from 195deg at 72% 0%,transparent 0 9%,rgba(255,255,255,.4) 13%,transparent 18%,rgba(255,255,255,.28) 24%,transparent 30%,rgba(255,255,255,.34) 37%,transparent 43%);filter:blur(6px);animation:rays 18s ease-in-out infinite alternate;opacity:.6}
#sakura .sunglow{position:absolute;right:-10%;top:-18%;width:62vmax;height:62vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,246,210,.95),rgba(255,246,210,0) 62%)}
#sakura .wv{position:absolute;left:0;bottom:0;width:200%;height:150px;animation:wv 15s linear infinite}
#sakura .w2{bottom:-10px;height:140px;animation-duration:10s;animation-direction:reverse}
#sakura .w3{bottom:-18px;height:130px;animation-duration:7s}
#sakura .bub{position:absolute;bottom:-30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.75),rgba(255,255,255,.08));animation:bub linear infinite}
.thg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:8px}
.thc i{display:block;width:100%;height:46px;border-radius:8px;background:linear-gradient(135deg,var(--p1),var(--p2) 55%,var(--p3))}
.thc small{color:var(--mut);font-size:11.5px;line-height:1.25}.thc.on{outline:2px solid var(--acc);outline-offset:1px}
@keyframes sway{from{transform:rotate(-.6deg)}to{transform:rotate(.7deg)}}
@keyframes twk{from{opacity:.2}to{opacity:1}}
@keyframes aur{0%{transform:translateX(-4%) skewY(-6deg) scaleY(.9)}50%{transform:translateX(3%) skewY(4deg) scaleY(1.15)}100%{transform:translateX(-2%) skewY(-3deg) scaleY(1)}}
@keyframes shoot{0%{opacity:0;transform:translate(0,0) rotate(-28deg)}2%{opacity:1}11%{opacity:0;transform:translate(-460px,250px) rotate(-28deg)}100%{opacity:0}}
@keyframes rays{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes wv{to{transform:translateX(-50%)}}
@keyframes bub{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.9}100%{transform:translate(34px,-112vh) scale(1.1);opacity:0}}
@keyframes rip{to{transform:scale(3);opacity:0}}
@media(max-width:899px){#sakura .au{filter:blur(26px)}}
@media(prefers-reduced-motion:reduce){#sakura .ss,#sakura .bub{display:none}}
#wz{position:fixed;inset:0;z-index:12;display:none;align-items:flex-start;justify-content:center;overflow:auto;padding:16px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#wz>div{width:100%;max-width:540px;margin:auto}
.dots{display:flex;gap:6px;margin-bottom:10px}.dots i{height:5px;flex:1;border-radius:3px;background:var(--line)}.dots i.on{background:var(--acc)}
.big{display:block;width:100%;text-align:left;padding:12px 14px;margin:8px 0}.big b{display:block}.big small{color:var(--mut)}
@media(pointer:coarse){button,select,input:not([type=checkbox]){min-height:42px}.nb{min-height:48px}.row{padding:12px}input[type=checkbox]{min-width:22px;min-height:22px}}
@media(max-width:699px){#md{align-items:flex-end;padding:0}#md>div{max-width:none;border-radius:20px 20px 0 0;max-height:90vh;animation:sheet .3s cubic-bezier(.2,.8,.2,1);padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}#md>div::before{content:"";display:block;width:42px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}}
@keyframes sheet{from{transform:translateY(100%)}}

html:root[data-skin="synthwave"]{--bg:#0d0221;--card:#1a0b3b;--fg:#f6ecff;--mut:#b9a2e0;--line:#3a1c6e;--acc:#ff4fd8;--ac2:#28e1ff;--bad:#ff6b8b;--rip:rgba(255,79,216,.5);--sh:0 1px 2px rgba(0,0,0,.5),0 16px 40px -18px rgba(255,79,216,.5);color-scheme:dark}
html:root[data-skin="wald"]{--bg:#07130d;--card:#0e2218;--fg:#e6f5ea;--mut:#8fb8a0;--line:#1f4030;--acc:#8dffb0;--ac2:#ffd166;--bad:#ff8a8a;--rip:rgba(141,255,176,.4);--sh:0 1px 2px rgba(0,0,0,.5),0 16px 40px -18px rgba(141,255,176,.35);color-scheme:dark}
html:root[data-skin="sunset"]{--bg:#fff1e6;--card:#fff;--fg:#3a1f33;--mut:#7a4f68;--line:#f5cfbf;--acc:#c2410c;--ac2:#db2777;--bad:#b91c1c;--rip:rgba(255,255,255,.75);--sh:0 1px 2px rgba(90,30,60,.08),0 14px 34px -16px rgba(194,65,12,.45);color-scheme:light}
html:root[data-skin="galaxie"]{--bg:#05060f;--card:#0d1026;--fg:#eaeeff;--mut:#9aa5da;--line:#242a5a;--acc:#9db4ff;--ac2:#ff8ad8;--bad:#ff7a93;--rip:rgba(157,180,255,.5);--sh:0 1px 2px rgba(0,0,0,.55),0 16px 40px -18px rgba(157,180,255,.4);color-scheme:dark}
html:root[data-skin="synthwave"] body{background:linear-gradient(180deg,#0d0221 0%,#1b0638 55%,#33104f 100%) fixed}
html:root[data-skin="wald"] body{background:radial-gradient(120% 70% at 80% 0%,#12301f 0%,#08160e 55%,#040b07 100%) fixed}
html:root[data-skin="sunset"] body{background:linear-gradient(180deg,#ffd9a8 0%,#ffb59e 28%,#ee9bc5 60%,#a99bf2 100%);background-size:100% 190%;background-attachment:fixed;animation:skyshift 60s ease-in-out infinite alternate}
html:root[data-skin="galaxie"] body{background:radial-gradient(100% 60% at 20% 0%,#1a1245 0%,#080a1f 50%,#03040c 100%) fixed}
html:root:is([data-skin="synthwave"],[data-skin="wald"],[data-skin="galaxie"]) :is(.card,.tile,.st>div){background:color-mix(in srgb,var(--card) 66%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:color-mix(in srgb,var(--ac2) 30%,var(--line))}
html:root[data-skin="sunset"] :is(.card,.tile,.st>div){background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html:root:is([data-skin="synthwave"],[data-skin="wald"],[data-skin="galaxie"]) :is(button.p,.al){box-shadow:0 0 18px -4px var(--acc)}
html:root:is([data-skin="synthwave"],[data-skin="wald"],[data-skin="galaxie"]) .prog i{box-shadow:0 0 10px var(--acc)}
html:root:is([data-skin="synthwave"],[data-skin="wald"],[data-skin="galaxie"]) :is(.hero::after,.now::before){background:var(--acc)}
html:root[data-skin="synthwave"] :is(h1,h2,.tile b,.greet){font-family:'Orbitron','Bricolage Grotesque',system-ui,sans-serif;letter-spacing:.03em}
html:root[data-skin="synthwave"] h1{text-shadow:0 0 18px color-mix(in srgb,var(--acc) 60%,transparent)}
html:root[data-skin="synthwave"] .tile b{text-shadow:0 0 14px color-mix(in srgb,var(--ac2) 55%,transparent)}
@media(hover:hover){html:root:is([data-skin="synthwave"],[data-skin="galaxie"],[data-skin="wald"]) .tile:hover{box-shadow:0 0 0 1px var(--acc),0 0 30px -6px var(--acc)}html:root[data-skin="sunset"] .tile:hover{box-shadow:0 14px 30px -14px rgba(194,65,12,.5)}}
html:root:is([data-skin="ozean"],[data-skin="synthwave"],[data-skin="wald"],[data-skin="sunset"],[data-skin="galaxie"]) :is(button,.tile,.nb){position:relative;overflow:hidden}
.rip{background:var(--rip,rgba(255,255,255,.6))}
/* Synthwave */
#sakura .sw-sun{position:absolute;left:50%;bottom:24vh;width:min(48vmin,380px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#ffe36e 0%,#ff7ac8 52%,#b537f2 100%);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 13px,transparent 13px 17px);mask-image:repeating-linear-gradient(180deg,#000 0 13px,transparent 13px 17px);filter:drop-shadow(0 0 34px #ff2bd6);animation:swpulse 6s ease-in-out infinite}
#sakura .sw-grid{position:absolute;left:-60%;right:-60%;bottom:0;height:36vh;background-image:linear-gradient(rgba(255,79,216,.6) 2px,transparent 2px),linear-gradient(90deg,rgba(255,79,216,.6) 2px,transparent 2px);background-size:64px 64px;transform:perspective(380px) rotateX(62deg);transform-origin:50% 100%;animation:swgrid 2.6s linear infinite;-webkit-mask-image:linear-gradient(transparent,#000 65%);mask-image:linear-gradient(transparent,#000 65%)}
/* Wald */
#sakura .moon{position:absolute;right:8%;top:6%;width:min(16vmin,140px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe0,#f1e6a6 60%,#c9bd7c);box-shadow:0 0 60px 20px rgba(255,248,200,.25)}
#sakura .fog{position:absolute;left:-20%;width:140%;height:36vh;bottom:6vh;background:radial-gradient(60% 100% at 50% 100%,rgba(160,230,190,.16),transparent 70%);filter:blur(14px);animation:fogdrift 40s ease-in-out infinite alternate}
#sakura .f2{bottom:14vh;opacity:.7;animation-duration:55s;animation-direction:alternate-reverse}
#sakura .forest{position:absolute;left:0;bottom:0;width:100%;height:32vh}
#sakura .forest g{animation:fsway 7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
#sakura .forest g:nth-child(2){animation-duration:9s;animation-delay:-3s}#sakura .forest g:nth-child(3){animation-duration:11s;animation-delay:-6s}
#sakura .ff{position:absolute;width:5px;height:5px;border-radius:50%;background:#d8ff6a;box-shadow:0 0 10px 3px rgba(216,255,106,.7);animation:ffl var(--d,16s) ease-in-out infinite alternate,ffb var(--b,3s) ease-in-out infinite alternate}
/* Sunset */
#sakura .sun2{position:absolute;left:50%;bottom:26vh;width:min(34vmin,300px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#fff6c9 0%,#ffd27a 45%,#ff9d5c 100%);box-shadow:0 0 90px 40px rgba(255,190,120,.55);animation:sunbob 12s ease-in-out infinite alternate}
#sakura .cloud{position:absolute;left:-30vw;width:min(34vw,320px);height:auto;opacity:.9;animation:cdrift 70s linear infinite}
#sakura .c1{top:10vh}#sakura .c2{top:22vh;width:min(26vw,240px);opacity:.7;animation-duration:95s;animation-delay:-40s}#sakura .c3{top:34vh;width:min(40vw,360px);opacity:.55;animation-duration:120s;animation-delay:-80s}
#sakura .bird{position:absolute;left:-60px;width:26px;height:13px;animation:bfly 28s linear infinite}
#sakura .bird path{fill:none;stroke:#4a2f6e;stroke-width:1.6;stroke-linecap:round;animation:flap .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
#sakura .hills{position:absolute;left:0;bottom:0;width:100%;height:30vh}
/* Galaxie */
#sakura .gxl{position:absolute;left:0;top:0;border-radius:50%;background:transparent}
#sakura .gxl::after{content:"";position:absolute;left:0;top:2000px;width:inherit;height:inherit;border-radius:50%;box-shadow:inherit}
#sakura .l1{animation:gxm 260s linear infinite}#sakura .l2{animation:gxm 150s linear infinite}#sakura .l3{animation:gxm 85s linear infinite}
#sakura .nbl{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.55;animation:neb 34s ease-in-out infinite alternate}
#sakura .n1{left:-8%;top:8%;width:55vmax;height:40vmax;background:#6d28d9}#sakura .n2{right:-10%;top:30%;width:50vmax;height:38vmax;background:#be185d;animation-delay:-12s}#sakura .n3{left:20%;bottom:-12%;width:60vmax;height:36vmax;background:#1d4ed8;animation-delay:-22s;opacity:.4}
#sakura .planet{position:absolute;right:9vw;top:14vh;width:min(22vmin,190px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 30%,#ffd9b0,#c76a8c 45%,#4a2a6e 78%,#1b1038);box-shadow:inset -18px -10px 40px rgba(0,0,0,.65),0 0 46px rgba(179,136,255,.4);animation:pfloat 14s ease-in-out infinite alternate}
#sakura .planet::before{content:"";position:absolute;left:-48%;right:-48%;top:40%;height:22%;border-radius:50%;border:5px solid rgba(255,225,190,.55);transform:rotate(-18deg);box-shadow:0 0 12px rgba(255,205,150,.35)}
#sakura .cm{position:absolute;top:12%;left:78%;width:160px;height:3px;border-radius:3px;background:linear-gradient(90deg,#fff,rgba(157,180,255,.6),transparent);box-shadow:0 0 10px #9db4ff;opacity:0;animation:shoot 13s linear infinite}
#sakura .c2.cm{top:30%;left:48%;animation-delay:-6s;animation-duration:17s}
@keyframes swpulse{0%,100%{transform:translateX(-50%) scale(.98)}50%{transform:translateX(-50%) scale(1.03)}}
@keyframes swgrid{from{background-position:0 0}to{background-position:0 64px}}
@keyframes fogdrift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes fsway{from{transform:skewX(-.8deg)}to{transform:skewX(.8deg)}}
@keyframes ffl{0%{transform:translate(0,0)}50%{transform:translate(var(--x,40px),var(--y,-30px))}100%{transform:translate(calc(var(--x,40px)*-.6),calc(var(--y,-30px)*1.4))}}
@keyframes ffb{from{opacity:.15}to{opacity:1}}
@keyframes skyshift{from{background-position:0 0}to{background-position:0 100%}}
@keyframes sunbob{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-14px)}}
@keyframes cdrift{from{transform:translateX(0)}to{transform:translateX(150vw)}}
@keyframes bfly{0%{transform:translate(0,0)}50%{transform:translate(60vw,-30px)}100%{transform:translate(125vw,10px)}}
@keyframes flap{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
@keyframes gxm{to{transform:translateY(-2000px)}}
@keyframes neb{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,-3vh) scale(1.12)}}
@keyframes pfloat{from{transform:translateY(0)}to{transform:translateY(-16px)}}
@media(max-width:899px){#sakura .nbl{filter:blur(46px)}#sakura .au{filter:blur(26px)}}
@media(prefers-reduced-motion:reduce){#sakura .bird,#sakura .ff,#sakura .cm{display:none}html:root[data-skin="sunset"] body{animation:none}}

/* ---- Cloud: Anmeldung, Sperrbildschirm, Update-Hinweis ---- */
#auth{position:fixed;inset:0;z-index:50;overflow:auto;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:16px}
#auth[hidden],#upd[hidden]{display:none}
.acard{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--sh)}
.acard h1{font-size:20px;margin:0 0 14px}.acard h2{font-size:17px;margin:0 0 10px}
.acard label{display:block;margin:10px 0 4px;font-size:13px;color:var(--mut)}
.acard form button.p{width:100%;margin-top:14px}
.amsg{padding:8px 10px;border-radius:8px;background:var(--bg);margin:8px 0;font-size:14px}.amsg.bad{color:var(--bad)}
body.locked .wrap,body.locked #nav,body.locked #clock,body.locked #sakura{display:none}
#upd{position:fixed;left:50%;transform:translateX(-50%);top:10px;z-index:60;background:var(--fg);color:var(--bg);border-radius:12px;padding:8px 12px;display:flex;gap:8px;align-items:center;font-size:14px;max-width:92vw}
#upd button{padding:4px 10px}
.acard a{color:var(--acc)}