:root{--c:#3fe0ff;--rgb:63,224,255;--bg:#02070c;--txt:#cfefff;--dim:#6f93a6;--panel:rgba(6,20,30,.95); --hud:'Orbitron','Exo 2','Segoe UI',sans-serif} body[data-theme=arc]{--c:#ff8a3d;--rgb:255,138,61;--txt:#ffe9d9;--dim:#a8836a} body[data-theme=red]{--c:#ff4d5e;--rgb:255,77,94;--txt:#ffe0e3;--dim:#a87079} body[data-theme=matrix]{--c:#3dff8a;--rgb:61,255,138;--txt:#d9ffe8;--dim:#6aa883} body[data-theme=void]{--c:#b57dff;--rgb:181,125,255;--txt:#efe3ff;--dim:#8e7aa8} *{box-sizing:border-box} html,body{margin:0;height:100vh;overflow:hidden} body{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 14%,#04111b) 0%,#04111b 45%,var(--bg) 80%);color:var(--txt);font-family:'Exo 2','Segoe UI',system-ui,sans-serif;user-select:none;transition:background 1s} body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.35; background-image:linear-gradient(rgba(var(--rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--rgb),.06) 1px,transparent 1px);background-size:40px 40px} button{font:inherit;color:inherit;cursor:pointer} input,textarea,select{font:inherit;color:var(--txt);background:rgba(var(--rgb),.06);border:1px solid rgba(var(--rgb),.25);border-radius:8px;padding:8px 10px;outline:none} select option{background:#071a26} input:focus,textarea:focus,select:focus{border-color:var(--c);box-shadow:0 0 8px rgba(var(--rgb),.35)} input[type=time],input[type=date]{color-scheme:dark} textarea{width:100%;resize:vertical;min-height:70px;user-select:text} #top{position:fixed;top:14px;left:84px;right:20px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:3px;color:var(--dim);z-index:2;pointer-events:none} #top b{color:var(--c);text-shadow:0 0 8px var(--c)} body.lp #top>div:first-child{opacity:0} #menu{position:fixed;left:0;top:0;bottom:0;width:64px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0;z-index:7; background:linear-gradient(90deg,rgba(4,18,28,.95),rgba(4,18,28,.6));border-right:1px solid rgba(var(--rgb),.2)} #menu .logo{width:36px;height:36px;border-radius:50%;border:2px solid var(--c);box-shadow:0 0 12px var(--c);margin-bottom:14px;position:relative} #menu .logo::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)} #menu button{width:44px;height:44px;border-radius:12px;border:1px solid transparent;background:none;font-size:20px;position:relative} #menu button:hover{border-color:rgba(var(--rgb),.4);background:rgba(var(--rgb),.08)} #menu button.on{border-color:var(--c);background:rgba(var(--rgb),.15);box-shadow:0 0 12px rgba(var(--rgb),.35)} #menu button::after{content:attr(data-tip);position:absolute;left:54px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:12px;background:#071a26;border:1px solid rgba(var(--rgb),.3);padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s} #menu button:hover::after{opacity:1} #menu .sp{flex:1} #menu .badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:#ff7a5c;color:#fff;font-size:10px;line-height:16px;padding:0 4px} #stage{position:absolute;left:calc(50% + 32px);top:50%;transform:translate(-50%,-50%) scale(var(--k,1));transition:left .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1),opacity .3s} body.rp #stage{left:calc(50% - 190px)} body.lp #stage{left:calc(50% + 250px)} @media(max-width:1000px){body.rp #stage,body.lp #stage{left:calc(50% + 32px);opacity:.12}} #deco{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none} #deco circle{fill:none;transform-box:fill-box;transform-origin:center} .spin{animation:spin 40s linear infinite}.spinr{animation:spin 25s linear infinite reverse} @keyframes spin{to{transform:rotate(360deg)}} #core{position:absolute;width:170px;height:170px;margin:-85px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;text-align:center; background:radial-gradient(circle,rgba(var(--rgb),.25),rgba(4,30,45,.9) 65%);border:2px solid var(--c);box-shadow:0 0 30px rgba(var(--rgb),.45),inset 0 0 30px rgba(var(--rgb),.3);transition:transform .2s} #core:hover{transform:scale(1.05)} #core .hello{font-size:11px;color:var(--dim);letter-spacing:1px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #core .clock{font-size:34px;font-weight:300;letter-spacing:2px;text-shadow:0 0 10px var(--c)} #core .date{font-size:11px;color:var(--dim);letter-spacing:2px;text-transform:uppercase} #core .sum{margin-top:6px;font-size:12px;color:var(--c)} #core::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(var(--rgb),.3);animation:pulse 3s ease-out infinite} @keyframes pulse{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.25);opacity:0}} .node{position:absolute;width:84px;height:84px;margin:-42px;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center; background:radial-gradient(circle,color-mix(in srgb,var(--gc) 22%,transparent),rgba(4,20,30,.92) 70%); border:1px solid color-mix(in srgb,var(--gc) 55%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--gc) 40%,transparent); transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),transform .2s,opacity .4s} .node:hover{transform:scale(1.12);z-index:3} .node.active{box-shadow:0 0 28px var(--gc);border-color:var(--gc)} .node svg{position:absolute;inset:-7px;width:98px;height:98px;transform:rotate(-90deg);pointer-events:none} .node .trk{fill:none;stroke:rgba(255,255,255,.08);stroke-width:4} .node .prg{fill:none;stroke:var(--gc);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--gc));transition:stroke-dashoffset .6s} .node .ic{font-size:26px;line-height:1} .node .nv{font-size:12px;color:var(--gc);margin-top:3px;font-weight:600} .node .lbl{position:absolute;top:100%;margin-top:10px;font-size:11px;letter-spacing:1px;white-space:nowrap;color:var(--txt);text-shadow:0 0 6px #000;max-width:130px;overflow:hidden;text-overflow:ellipsis} .node .fire{position:absolute;top:-6px;right:-6px;font-size:10px;background:#1b0d02;border:1px solid #ff9a3c;color:#ffb35c;border-radius:10px;padding:1px 5px} .node .bell{position:absolute;top:-6px;left:-6px;font-size:11px} .node.add{--gc:#5c7a8a;border-style:dashed;background:rgba(4,20,30,.6)} .node.add .ic{font-size:30px;color:var(--dim)} .node.ping{animation:ping 1s ease-out 3} @keyframes ping{50%{transform:scale(1.25);box-shadow:0 0 40px var(--gc)}} .panel{position:fixed;top:0;bottom:0;width:min(440px,100vw);background:var(--panel);box-shadow:0 0 40px rgba(0,0,0,.6); transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:5;overflow-y:auto;padding:20px 22px 40px;user-select:text} #panel{right:0;border-left:1px solid rgba(var(--rgb),.3);transform:translateX(105%)} #lpanel{left:64px;width:min(440px,calc(100vw - 64px));border-right:1px solid rgba(var(--rgb),.3);transform:translateX(calc(-100% - 70px))} .panel.open{transform:none!important} .ph{display:flex;align-items:center;gap:10px;margin-bottom:16px} .ph h2{margin:0;font-size:20px;font-weight:500;flex:1;letter-spacing:1px} .ph .big{font-size:30px} .ib{background:none;border:1px solid rgba(var(--rgb),.25);border-radius:8px;width:34px;height:34px;flex:none} .ib:hover{border-color:var(--c);background:rgba(var(--rgb),.1)} h3{font-size:11px;letter-spacing:3px;color:var(--dim);text-transform:uppercase;margin:22px 0 10px;font-weight:600} .btn{background:rgba(var(--rgb),.1);border:1px solid rgba(var(--rgb),.35);border-radius:8px;padding:8px 12px} .btn:hover{background:rgba(var(--rgb),.22);border-color:var(--c)} .btn.pri{background:var(--c);color:#022;border-color:var(--c);font-weight:600} .btn.danger{border-color:rgba(255,90,90,.5);color:#ff9a9a;background:rgba(255,60,60,.08)} .btn.sm{padding:4px 9px;font-size:12px} .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .muted{font-size:12px;color:var(--dim)} .card{border:1px solid rgba(var(--rgb),.18);border-radius:12px;padding:12px 14px;background:rgba(0,0,0,.2);margin-bottom:10px} .today{border:1px solid rgba(var(--rgb),.25);border-radius:12px;padding:14px;background:rgba(var(--rgb),.04)} .today .day{font-size:12px;color:var(--dim);margin-bottom:6px} .today .v{font-size:38px;font-weight:300;color:var(--gc,var(--c))} .today .v small{font-size:14px;color:var(--dim)} .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 12px} .bar i{display:block;height:100%;background:var(--gc,var(--c));box-shadow:0 0 8px var(--gc,var(--c));transition:width .4s} .today input[type=number]{width:90px} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .st{border:1px solid rgba(var(--rgb),.15);border-radius:10px;padding:10px;background:rgba(0,0,0,.2)} .st b{display:block;font-size:20px;font-weight:500;color:var(--txt)} .st span{font-size:10px;letter-spacing:1px;color:var(--dim);text-transform:uppercase} .st.hl b{color:var(--gc,var(--c))} .cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .cal-h b{font-weight:500;text-transform:capitalize} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal .wd{font-size:10px;color:var(--dim);text-align:center;padding:2px 0} .cal .d{aspect-ratio:1;border-radius:7px;border:1px solid rgba(var(--rgb),.1);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;cursor:pointer;position:relative;background:rgba(0,0,0,.2)} .cal .d:hover{border-color:var(--c)} .cal .d .n{font-size:10px;font-weight:600;color:#fff} .cal .d.t{border-color:var(--c)} .cal .d.sel{outline:2px solid var(--gc,var(--c));outline-offset:1px} .cal .d.note::after{content:"";position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;background:#ffd166} .cal .d.fut{opacity:.35} .cal .d.x{visibility:hidden} .tasks{list-style:none;margin:0;padding:0} .tasks li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(var(--rgb),.08)} .tasks li.done .tt{text-decoration:line-through;color:var(--dim)} .tasks .tt{flex:1;word-break:break-word} .tasks .td{font-size:11px;color:var(--dim)} .tasks .td.late{color:#ff8a8a} .tasks input[type=checkbox]{width:18px;height:18px;accent-color:var(--c)} .del{background:none;border:none;color:var(--dim);font-size:16px} .del:hover{color:#ff8a8a} .sumrow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(var(--rgb),.08);font-size:14px} .sumrow span:last-child{color:var(--c)} .note-item{cursor:pointer} .note-item:hover{border-color:var(--c)} .note-item b{display:block;font-weight:500;margin-bottom:4px} .note-item p{margin:0;font-size:12px;color:var(--dim);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .note-item .muted{margin-top:6px;font-size:10px} .rem{display:flex;gap:12px;align-items:flex-start} .rem .ri{font-size:24px} .rem .rb{flex:1;min-width:0} .rem .rb b{font-weight:500} .rem.off{opacity:.45} .sw{position:relative;width:40px;height:22px;flex:none} .sw input{opacity:0;width:0;height:0} .sw span{position:absolute;inset:0;border-radius:11px;background:rgba(255,255,255,.12);cursor:pointer;transition:.2s} .sw span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#9bb;transition:.2s} .sw input:checked+span{background:var(--c)} .sw input:checked+span::before{transform:translateX(18px);background:#022} .days{display:flex;gap:4px} .days button{width:34px;height:30px;border-radius:7px;border:1px solid rgba(var(--rgb),.2);background:rgba(0,0,0,.25);font-size:12px} .days button.on{background:var(--c);color:#022;border-color:var(--c);font-weight:600} .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(var(--rgb),.3);border-radius:14px;padding:3px 6px 3px 10px;font-size:13px} .chip button{background:none;border:none;color:var(--dim);padding:0 2px} .seg{display:flex;border:1px solid rgba(var(--rgb),.3);border-radius:8px;overflow:hidden} .seg button{flex:1;background:none;border:none;padding:8px} .seg button.on{background:rgba(var(--rgb),.2);color:var(--c)} .notif-warn{border-color:rgba(255,209,102,.5);background:rgba(255,209,102,.07)} #modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(3px)} #modal.open{display:flex} #modal .box{background:#071a26;border:1px solid var(--c);border-radius:14px;padding:22px;width:min(420px,94vw);max-height:92vh;overflow-y:auto;box-shadow:0 0 40px rgba(var(--rgb),.3)} label.f{display:block;font-size:11px;letter-spacing:2px;color:var(--dim);text-transform:uppercase;margin:12px 0 6px} .box input:not([type=checkbox]),.box select{width:100%} .pick{display:flex;flex-wrap:wrap;gap:6px} .pick button{width:36px;height:36px;border-radius:8px;border:1px solid rgba(var(--rgb),.2);background:rgba(0,0,0,.25);font-size:18px} .pick button.on{border-color:var(--c);box-shadow:0 0 8px var(--c)} .pick.colors button{border-radius:50%;width:28px;height:28px} #auth{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center; background:radial-gradient(circle at 50% 40%,#0b2536,#02070c 75%)} #auth.open{display:flex} #auth .box{width:min(380px,92vw);text-align:center} #auth .orb{width:110px;height:110px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--c);box-shadow:0 0 30px var(--c),inset 0 0 30px rgba(var(--rgb),.4);position:relative;animation:breathe 3s ease-in-out infinite} #auth .orb::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(var(--rgb),.4);animation:spin 20s linear infinite} @keyframes breathe{50%{box-shadow:0 0 50px var(--c),inset 0 0 40px rgba(var(--rgb),.6)}} #auth h1{font-weight:300;letter-spacing:6px;margin:0 0 4px;color:var(--c);text-shadow:0 0 10px var(--c)} #auth form{text-align:left;margin-top:18px} #auth .err{color:#ff8a8a;font-size:13px;min-height:18px;margin-top:8px;text-align:center} .pin{letter-spacing:10px;text-align:center;font-size:22px} #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:#071a26;border:1px solid var(--c);padding:10px 18px;border-radius:10px;transition:transform .3s;z-index:40;font-size:14px;max-width:90vw} #toast.show{transform:translateX(-50%)} #alarm{position:fixed;top:20px;left:50%;transform:translate(-50%,calc(-100% - 40px));visibility:hidden;z-index:35;background:#071a26;border:1px solid #ffd166;box-shadow:0 0 30px rgba(255,209,102,.35);border-radius:14px;padding:14px 18px;display:flex;gap:14px;align-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s;min-width:300px;max-width:92vw} #alarm.show{transform:translate(-50%,0);visibility:visible} #alarm .ai{font-size:30px} #alarm .at{flex:1} #alarm .at b{display:block;font-weight:500} #hint{position:fixed;bottom:14px;left:84px;font-size:11px;color:var(--dim);letter-spacing:1px} .hudf,#core .clock,.st b,.today .v,#top,#auth h1,.node .nv{font-family:var(--hud)} #top b{letter-spacing:5px} #bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none} body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60; background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)} .corner{position:fixed;width:34px;height:34px;pointer-events:none;border:2px solid rgba(var(--rgb),.55);z-index:1;filter:drop-shadow(0 0 4px var(--c))} .corner.tl{top:10px;left:74px;border-right:0;border-bottom:0} .corner.tr{top:10px;right:10px;border-left:0;border-bottom:0} .corner.bl{bottom:10px;left:74px;border-right:0;border-top:0} .corner.br{bottom:10px;right:10px;border-left:0;border-top:0} #deco .link{stroke-dasharray:3 7;animation:flow 1.2s linear infinite;transition:stroke .4s,opacity .4s} #deco .link.done{stroke-dasharray:none;filter:drop-shadow(0 0 3px currentColor)} @keyframes flow{to{stroke-dashoffset:-20}} #deco .sec{transition:stroke-dashoffset .3s linear} #deco .sat{animation:spin 18s linear infinite;transform-origin:center;transform-box:view-box} #core::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; background:conic-gradient(from 0deg,rgba(var(--rgb),.35),transparent 22%);animation:spin 4s linear infinite;mix-blend-mode:screen} #core>*{position:relative} #core .clock{font-size:30px} #core .clock small{font-size:13px;opacity:.6;margin-left:2px} .node .tip{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%,6px);opacity:0;pointer-events:none;transition:.2s; background:rgba(4,16,24,.95);border:1px solid var(--gc);border-radius:8px;padding:7px 10px;font-size:11px;white-space:nowrap;line-height:1.5;box-shadow:0 0 14px color-mix(in srgb,var(--gc) 40%,transparent);z-index:5} .node:hover .tip{opacity:1;transform:translate(-50%,0)} .node.done{animation:glowdone 2.5s ease-in-out infinite} @keyframes glowdone{50%{box-shadow:0 0 30px var(--gc),inset 0 0 18px color-mix(in srgb,var(--gc) 35%,transparent)}} .panel::before{content:"";position:sticky;top:0;z-index:2;display:block;height:2px;margin:-20px -22px 18px; background:linear-gradient(90deg,transparent,var(--c),transparent);box-shadow:0 0 12px var(--c);animation:scan 3s ease-in-out infinite} @keyframes scan{50%{opacity:.35}} .card,.st,.today{position:relative} .card::before,.st::before,.today::before{content:"";position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:2px solid var(--c);border-left:2px solid var(--c);border-top-left-radius:inherit;pointer-events:none} .card::after,.st::after,.today::after{content:"";position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-bottom:2px solid var(--c);border-right:2px solid var(--c);border-bottom-right-radius:inherit;pointer-events:none} .panel.anim>*{animation:rise .45s cubic-bezier(.2,.8,.2,1) both} .panel.anim>*:nth-child(2){animation-delay:.04s}.panel.anim>*:nth-child(3){animation-delay:.08s} .panel.anim>*:nth-child(4){animation-delay:.12s}.panel.anim>*:nth-child(5){animation-delay:.16s} .panel.anim>*:nth-child(6){animation-delay:.2s}.panel.anim>*:nth-child(n+7){animation-delay:.24s} @keyframes rise{from{opacity:0;transform:translateY(12px)}} .btn{transition:background .15s,box-shadow .15s,transform .1s} .btn:active{transform:scale(.96)} .btn.pri:hover{box-shadow:0 0 16px var(--c)} #menu button{transition:.2s} #menu button.on::before{content:"";position:absolute;left:-10px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--c);box-shadow:0 0 8px var(--c)} #ticker{position:fixed;bottom:14px;left:84px;right:60px;font-size:11px;color:var(--dim);letter-spacing:1px;white-space:nowrap;overflow:hidden;z-index:2;font-family:var(--hud)} #ticker span{display:inline-block;animation:tick .6s ease both} #ticker b{color:var(--c);font-weight:400} @keyframes tick{from{opacity:0;transform:translateY(8px)}} .spark{position:fixed;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:45;background:var(--sc);box-shadow:0 0 10px var(--sc); animation:spark 1.3s cubic-bezier(.15,.6,.3,1) forwards} @keyframes spark{0%{transform:none;opacity:1}55%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}} .shock{position:fixed;width:20px;height:20px;margin:-10px;border-radius:50%;border:2px solid var(--sc);pointer-events:none;z-index:45;animation:shock 1s ease-out forwards} @keyframes shock{to{transform:scale(9);opacity:0}} .themes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .themes button{border:1px solid rgba(var(--rgb),.25);background:rgba(0,0,0,.3);border-radius:10px;padding:10px 4px 8px;font-size:11px;color:var(--txt)} .themes button i{display:block;width:22px;height:22px;margin:0 auto 6px;border-radius:50%;background:var(--t);box-shadow:0 0 10px var(--t)} .themes button.on{border-color:var(--c);box-shadow:0 0 10px rgba(var(--rgb),.4)} #splash{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;cursor:pointer; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 12%,#04111b),#010508 70%);transition:opacity .7s,transform .7s cubic-bezier(.6,0,.4,1)} #splash.out{opacity:0;transform:scale(1.6);pointer-events:none} #splash svg{width:min(340px,70vw);height:min(340px,70vw);overflow:visible} #splash circle,#splash path{fill:none;stroke:var(--c);transform-box:fill-box;transform-origin:center} #splash .r1{stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 1.4s .1s cubic-bezier(.6,0,.2,1) forwards,spin 12s linear infinite} #splash .r2{stroke-width:6;opacity:.35;stroke-dasharray:2 10;animation:spin 6s linear infinite reverse,fadein .6s .3s both} #splash .r3{stroke-width:1;opacity:.5;stroke-dasharray:60 30 10 30;animation:spin 3s linear infinite,fadein .6s .5s both} #splash .arc{stroke-width:3;stroke-linecap:round;stroke-dasharray:120 1000;filter:drop-shadow(0 0 6px var(--c));animation:spin 1.6s linear infinite,fadein .4s .6s both} #splash .dot{fill:var(--c);stroke:none;filter:drop-shadow(0 0 14px var(--c));animation:pop .6s .9s cubic-bezier(.3,1.6,.5,1) both,breathe2 2s 1.5s ease-in-out infinite} #splash .tick{stroke-width:2;opacity:0;animation:fadein .3s forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fadein{from{opacity:0}} @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}} @keyframes breathe2{0%,100%{transform:scale(1)}50%{transform:scale(.85)}} #splash h1{font-family:var(--hud);font-weight:400;letter-spacing:14px;margin:26px 0 0 14px;color:var(--c);text-shadow:0 0 16px var(--c);font-size:34px} #splash h1 span{display:inline-block;opacity:0;animation:letter .4s forwards} @keyframes letter{from{opacity:0;transform:translateY(-10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} #splash .log{margin-top:22px;width:min(360px,86vw);height:96px;font:12px/1.6 Consolas,monospace;color:var(--dim);overflow:hidden} #splash .log div{animation:fadein .2s both} #splash .log div::before{content:"> ";color:var(--c)} #splash .log .ok{color:var(--c);float:right} #splash .prog{width:min(360px,86vw);height:3px;background:rgba(var(--rgb),.12);margin-top:10px;position:relative} #splash .prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c);box-shadow:0 0 10px var(--c);transition:width .25s} #splash .pct{font-family:var(--hud);font-size:11px;color:var(--dim);margin-top:8px;letter-spacing:3px} #splash .skip{position:absolute;bottom:24px;font-size:11px;color:var(--dim);letter-spacing:2px;opacity:.6} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} #stage{top:calc(50% + 40px)} #wisdom{position:fixed;top:40px;left:calc(50% + 32px);transform:translateX(-50%);width:min(660px,calc(100vw - 220px));text-align:center;cursor:pointer;z-index:2; padding:6px 16px;border-radius:12px;transition:opacity .4s,background .2s} #wisdom:empty{display:none} #wisdom:hover{background:rgba(var(--rgb),.06)} #wisdom .wc-en{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:17px;line-height:1.35;color:var(--txt);text-shadow:0 0 14px rgba(var(--rgb),.45); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #wisdom .wc-ru{font-size:12px;color:var(--dim);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #wisdom .wc-a{font-size:10px;letter-spacing:3px;color:var(--c);text-transform:uppercase;margin-top:5px;font-family:var(--hud)} #wisdom .seal{margin-left:8px;color:#4dff9a;letter-spacing:1px;text-transform:none;font-family:'Exo 2',sans-serif} body.lp #wisdom,body.rp #wisdom{opacity:0;pointer-events:none} .wq{border-left:3px solid var(--c);padding:6px 0 6px 16px;margin-bottom:10px;box-shadow:-8px 0 16px -12px var(--c)} .wq-en{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:21px;line-height:1.5;color:var(--txt)} .wq-en.sm,.wq-mini .wq-en{font-size:15px} .wq-ru{color:var(--dim);margin-top:8px;font-size:14px;line-height:1.45} .wq-a{color:var(--c);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:10px} .wq-a span{display:block;color:var(--dim);letter-spacing:.5px;text-transform:none;margin-top:3px} .ww{cursor:pointer;border-radius:4px;padding:0 2px;margin:0 -1px;transition:background .15s,box-shadow .15s} .ww:hover{background:rgba(var(--rgb),.15)} .ww.key{border-bottom:1px dotted rgba(var(--rgb),.7)} .ww.on{background:rgba(var(--rgb),.28);color:#fff;box-shadow:0 0 10px rgba(var(--rgb),.45);border-bottom-color:transparent} .wrow{display:flex;align-items:center;gap:8px;margin-bottom:6px} .wrow b{min-width:110px;font-weight:500;color:var(--c);font-family:Georgia,serif;font-style:italic;font-size:16px} .wrow input{flex:1} .wnote{white-space:pre-wrap;margin:10px 0;line-height:1.55;user-select:text} .moods{display:flex;gap:8px} .moods button{font-size:24px;width:50px;height:46px;border-radius:10px;border:1px solid rgba(var(--rgb),.2);background:rgba(0,0,0,.25);filter:grayscale(.8);opacity:.7;transition:.15s} .moods button:hover{opacity:1} .moods button.on{filter:none;opacity:1;border-color:var(--c);box-shadow:0 0 10px rgba(var(--rgb),.4);transform:scale(1.08)} .flash{margin:16px 0 10px;height:170px;border:1px solid var(--c);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer; background:rgba(var(--rgb),.06);box-shadow:inset 0 0 30px rgba(var(--rgb),.15),0 0 20px rgba(var(--rgb),.15)} .flash .fw{font-family:Georgia,serif;font-size:32px;font-style:italic} .flash .ft{margin-top:12px;color:var(--c);font-size:18px;opacity:0;transform:translateY(6px);transition:.3s} .flash.open .ft{opacity:1;transform:none} .del.trash{font-size:15px;width:32px;height:32px;border-radius:8px;border:1px solid transparent;opacity:.75;transition:.15s;flex:none} .tasks li:hover .del.trash{opacity:1} .del.trash:hover{border-color:rgba(255,90,90,.6);background:rgba(255,60,60,.12);opacity:1} .danger-ib:hover{border-color:rgba(255,90,90,.6)!important;background:rgba(255,60,60,.12)!important} #toast{display:flex;align-items:center} #tree,#scene,#splash .enso{display:none} body[data-theme=monk]{--c:#f4a9a0;--rgb:244,169,160;--txt:#f3e6dc;--dim:#a6918a;--gold:#e8c48a;--panel:rgba(24,15,17,.97); --hud:'Cormorant Garamond',Georgia,serif;font-family:'Nunito','Segoe UI',sans-serif; background:radial-gradient(ellipse at 50% 32%,#3d2329 0%,#22151a 45%,#0f0a0c 100%)} body[data-theme=monk]::before,body[data-theme=monk] .corner{display:none} body[data-theme=monk]::after{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)} body[data-theme=monk] #scene{display:block;position:fixed;left:0;right:0;bottom:0;height:36vh;pointer-events:none} #scene svg{width:100%;height:100%;display:block} body[data-theme=monk] #menu{background:linear-gradient(90deg,rgba(20,12,14,.95),rgba(20,12,14,.65));border-right-color:rgba(232,196,138,.16)} body[data-theme=monk] #menu .logo{border:3px solid var(--c);border-right-color:transparent;box-shadow:none;filter:url(#ink);transform:rotate(-30deg)} body[data-theme=monk] #menu .logo::after{display:none} body[data-theme=monk] #menu button.on{border-color:rgba(232,196,138,.5);background:rgba(232,196,138,.08);box-shadow:none} body[data-theme=monk] #menu button.on::before{background:var(--gold);box-shadow:none} body[data-theme=monk] #top{font-size:15px;letter-spacing:4px} body[data-theme=monk] #top b{text-shadow:none;font-weight:600;color:var(--gold)} body[data-theme=monk] #core{width:360px;height:360px;margin:-180px;background:none;border:none;box-shadow:none;justify-content:flex-end;padding-bottom:2px} body[data-theme=monk] #core::before,body[data-theme=monk] #core::after,body[data-theme=monk] #core .hello{display:none} body[data-theme=monk] #core:hover{transform:scale(1.03)} body[data-theme=monk] #core>#tree{display:block;position:absolute;inset:0} #tree svg{width:100%;height:100%;overflow:visible} #tree .sway{transform-box:view-box;transform-origin:150px 239px;animation:sway 8s ease-in-out infinite} @keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.9deg)}} #tree .tp{transform-box:fill-box;transform-origin:center;opacity:0;animation:tpetal 8s linear infinite} @keyframes tpetal{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.9}85%{opacity:.6}100%{opacity:0;transform:translate(46px,160px) rotate(540deg)}} body[data-theme=monk] #core .clock{font-size:30px;font-weight:500;letter-spacing:3px;text-shadow:0 0 14px rgba(244,169,160,.35)} body[data-theme=monk] #core .date{font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;letter-spacing:1px;text-transform:none;color:var(--dim)} body[data-theme=monk] #core .sum{color:var(--gold);font-size:12px} body[data-theme=monk] .node{border:none;background:radial-gradient(circle,rgba(255,226,210,.07),rgba(18,11,13,.88) 70%);box-shadow:0 6px 18px rgba(0,0,0,.55)} body[data-theme=monk] .node .trk{stroke:rgba(243,230,220,.32);stroke-width:3.5;stroke-dasharray:250 39;filter:url(#ink)} body[data-theme=monk] .node .prg{stroke-width:5.5;filter:url(#ink)} body[data-theme=monk] .node.done{animation:none;box-shadow:0 0 26px color-mix(in srgb,var(--gc) 40%,transparent)} body[data-theme=monk] .node.active{box-shadow:0 0 22px rgba(232,196,138,.45)} body[data-theme=monk] .node .lbl{font-family:'Cormorant Garamond',serif;font-size:16px;font-style:italic;letter-spacing:.5px} body[data-theme=monk] .node .nv{font-size:16px;font-weight:600} body[data-theme=monk] .node.add{background:transparent;box-shadow:none} body[data-theme=monk] .node .fire{background:#2a1512;border-color:var(--gold);color:var(--gold)} body[data-theme=monk] .node .tip{background:rgba(24,15,17,.96);font-family:'Nunito',sans-serif} body[data-theme=monk] .panel{border-color:rgba(232,196,138,.18)} body[data-theme=monk] .panel::before{height:1px;background:linear-gradient(90deg,transparent,rgba(232,196,138,.6),transparent);box-shadow:none;animation:none} body[data-theme=monk] .card::before,body[data-theme=monk] .card::after,body[data-theme=monk] .st::before,body[data-theme=monk] .st::after, body[data-theme=monk] .today::before,body[data-theme=monk] .today::after{display:none} body[data-theme=monk] .card,body[data-theme=monk] .st,body[data-theme=monk] .today{border-color:rgba(232,196,138,.14);background:rgba(255,240,230,.03);border-radius:14px} body[data-theme=monk] .ph h2{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:500} body[data-theme=monk] h3{font-family:'Cormorant Garamond',serif;font-size:14px;letter-spacing:3px;color:var(--gold);font-weight:600} body[data-theme=monk] .btn{border-radius:20px;border-color:rgba(232,196,138,.3);background:rgba(232,196,138,.06)} body[data-theme=monk] .btn:hover{background:rgba(232,196,138,.14);border-color:var(--gold)} body[data-theme=monk] .btn.pri{background:linear-gradient(135deg,#f4a9a0,#e8c48a);color:#2a1512;border:none} body[data-theme=monk] .btn.pri:hover{box-shadow:0 0 14px rgba(244,169,160,.5)} body[data-theme=monk] input,body[data-theme=monk] textarea,body[data-theme=monk] select{border-color:rgba(232,196,138,.2);background:rgba(255,240,230,.04);border-radius:10px} body[data-theme=monk] .ib{border-color:rgba(232,196,138,.22);border-radius:50%} body[data-theme=monk] .seg{border-color:rgba(232,196,138,.3);border-radius:20px} body[data-theme=monk] .seg button.on{background:rgba(232,196,138,.14);color:var(--gold)} body[data-theme=monk] .bar i{box-shadow:none} body[data-theme=monk] #modal .box{background:#1c1215;border-color:rgba(232,196,138,.4);box-shadow:0 0 40px rgba(244,169,160,.12);border-radius:18px} body[data-theme=monk] #toast,body[data-theme=monk] #alarm{background:#1c1215;border-color:var(--gold);border-radius:14px} body[data-theme=monk] #ticker{font-family:'Cormorant Garamond',serif;font-size:15px;font-style:italic;letter-spacing:.5px} body[data-theme=monk] #ticker b{color:var(--gold)} body[data-theme=monk] .wq{border-left-color:var(--gold);box-shadow:none} body[data-theme=monk] .wq-en,body[data-theme=monk] #wisdom .wc-en,body[data-theme=monk] .wrow b,body[data-theme=monk] .flash .fw{font-family:'Cormorant Garamond',serif} body[data-theme=monk] .wq-en{font-size:24px} body[data-theme=monk] #wisdom .wc-en{font-size:21px;text-shadow:0 0 18px rgba(244,169,160,.3)} body[data-theme=monk] #wisdom .wc-a{font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:4px;color:var(--gold)} body[data-theme=monk] .spark{width:10px;height:6px;border-radius:80% 0 80% 0;background:#f7b2bd!important;box-shadow:none} body[data-theme=monk] .spark:nth-child(3n){background:#ffd3dc!important} body[data-theme=monk] .shock{border-color:var(--gold)!important;border-width:1px} body[data-theme=monk] #auth{background:radial-gradient(ellipse at 50% 32%,#3d2329,#0f0a0c 75%)} body[data-theme=monk] #auth .orb{border:4px solid var(--c);border-right-color:transparent;box-shadow:none;filter:url(#ink);animation:none;transform:rotate(-30deg)} body[data-theme=monk] #auth .orb::before{display:none} body[data-theme=monk] #auth h1{font-family:'Cormorant Garamond',serif;font-weight:500;text-shadow:none;letter-spacing:10px;color:var(--txt)} body[data-theme=monk] #splash{background:radial-gradient(ellipse at 50% 40%,#3d2329,#0f0a0c 75%)} body[data-theme=monk] #splash .r1,body[data-theme=monk] #splash .r2,body[data-theme=monk] #splash .r3, body[data-theme=monk] #splash .arc,body[data-theme=monk] #splash .dot,body[data-theme=monk] #splash #sticks{display:none} body[data-theme=monk] #splash .enso{display:block;stroke:var(--c);stroke-width:9;stroke-linecap:round;filter:url(#inkBig); stroke-dasharray:480;stroke-dashoffset:480;animation:draw 1.8s .2s cubic-bezier(.5,0,.2,1) forwards} body[data-theme=monk] #splash h1{font-family:'Cormorant Garamond',serif;font-weight:500;text-shadow:none;letter-spacing:16px;color:var(--txt)} body[data-theme=monk] #splash .log{font-family:'Cormorant Garamond',serif;font-size:17px;font-style:italic;text-align:center;color:var(--dim)} body[data-theme=monk] #splash .log div::before{content:""} body[data-theme=monk] #splash .log .ok,body[data-theme=monk] #splash .pct{display:none} body[data-theme=monk] #splash .prog{height:1px} body[data-theme=monk] #splash .prog i{background:var(--gold);box-shadow:none} body[data-theme=monk] .node.add{border:1px dashed rgba(232,196,138,.35)} body[data-theme=monk] #splash .log{height:120px;-webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)} :root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--bar:calc(62px + var(--sab))} html{-webkit-text-size-adjust:100%} body{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .linkbtn{margin-top:12px;background:none!important;border:none!important;color:var(--dim)} @media (hover:none){.node .tip{display:none}} @media (max-width:700px){ .node .tip{display:none} #menu{top:auto;left:0;right:0;bottom:0;width:auto;height:var(--bar);flex-direction:row;justify-content:space-around;align-items:flex-start; padding:8px 6px var(--sab);gap:0;border-right:none;border-top:1px solid rgba(var(--rgb),.2);background:rgba(4,14,22,.96)} body[data-theme=monk] #menu{background:rgba(20,12,14,.97);border-top-color:rgba(232,196,138,.18)} #menu .logo,#menu .sp{display:none} #menu button{width:44px;height:44px;font-size:21px} #menu button::after{display:none} #menu button.on::before{left:10px;right:10px;top:-9px;bottom:auto;width:auto;height:3px} #top{left:16px;right:16px;top:calc(var(--sat) + 10px);font-size:11px} #sysline{font-size:9px;letter-spacing:1px} .corner,#ticker{display:none} #wisdom{top:calc(var(--sat) + 32px);left:50%;width:calc(100vw - 24px);padding:4px 8px} #wisdom .wc-en{font-size:15px} body[data-theme=monk] #wisdom .wc-en{font-size:18px} #wisdom .wc-ru{font-size:11px} #stage,body.rp #stage,body.lp #stage{left:50%;top:calc(50% + var(--sat)/2 + 10px)} body.rp #stage,body.lp #stage{opacity:0} .panel,#lpanel{left:0;right:0;width:100vw;top:0;bottom:var(--bar);padding:calc(var(--sat) + 14px) 16px 30px;border:none} #lpanel{transform:translateX(-105%)} .panel::before{display:none} .stats{grid-template-columns:repeat(3,1fr);gap:6px} .st{padding:8px}.st b{font-size:17px} input,textarea,select{font-size:16px} #toast{bottom:calc(var(--bar) + 12px);max-width:calc(100vw - 24px)} #alarm{top:calc(var(--sat) + 10px);min-width:0;width:calc(100vw - 20px)} #modal .box{width:calc(100vw - 20px);max-height:calc(100vh - var(--sat) - var(--sab) - 30px)} #auth .box{padding-top:var(--sat)} .themes{grid-template-columns:repeat(3,1fr)} .moods button{width:44px;height:42px} .wq-en{font-size:18px} } .panel{visibility:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility .4s} .panel.open{visibility:visible} #world{position:fixed;inset:0;overflow:hidden} #toast{visibility:hidden;transition:transform .3s,visibility .3s} #toast.show{visibility:visible} @media (max-width:700px){ .panel{display:flex;flex-direction:column;padding-bottom:0!important} .panel>.ph{order:99;position:sticky;bottom:0;z-index:3;flex-shrink:0;margin:auto -16px 0;padding:10px 16px; background:var(--panel);border-top:1px solid rgba(var(--rgb),.22);box-shadow:0 -8px 20px rgba(0,0,0,.35)} .panel>.ph h2{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .panel>.ph .big{font-size:24px} .panel>.ph .ib{width:44px;height:44px;font-size:18px;border-radius:12px} .del.trash{width:40px;height:40px;opacity:.8} .ib{min-width:40px;min-height:40px} } @media (max-width:700px){#tn{min-width:0}#tdte{width:118px!important;flex:none}#tadd{flex:none;width:44px;height:44px}} html{background:#02070c} @media (max-width:420px){#top{font-size:9.5px;letter-spacing:1.5px}#top b{letter-spacing:3px}#sysline{font-size:8.5px;letter-spacing:.5px}} @media (max-width:700px){body.lp #top,body.rp #top{opacity:0}#tdte{width:128px!important}}