:root{--ink:#f2f4f8;--dim:#9aa3b5;--glass:rgba(30,34,46,.66);--line:rgba(255,255,255,.1);--acc:#d4ff6a;--warm:#ffcf7a;--red:#ff5a5f;--green:#34c759;--ease:cubic-bezier(.2,.9,.25,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;background:#000;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}
html.notx *,html.notx *::before,html.notx *::after{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#world{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(80% 60% at 50% 40%,#131a2b,#000)}
#device{position:relative;width:100%;height:100%}
#screen{position:relative;width:100%;height:100%;overflow:hidden;background:#05070d;isolation:isolate}
@media(min-width:600px){#device{width:400px;height:min(860px,calc(100vh - 40px));border-radius:58px;padding:11px;background:#0d0e12;box-shadow:0 0 0 2px #2b2e37,0 40px 120px #000d,inset 0 0 0 1px #3c3f48}#screen{border-radius:48px}}
/* author watermark: faint, never blocks touches */
#wm{position:absolute;z-index:120;right:16px;bottom:calc(30px + env(safe-area-inset-bottom));font-size:10px;letter-spacing:3px;color:#fff;opacity:.16;pointer-events:none;mix-blend-mode:difference;font-weight:500}
/* wallpaper */
#wall{position:absolute;inset:-20px;z-index:0;background:radial-gradient(90% 55% at 70% 18%,#28406a 0,transparent 60%),radial-gradient(70% 50% at 10% 85%,#14402f 0,transparent 65%),linear-gradient(180deg,#0a1022,#060a14 55%,#04110c);transition:filter .6s,transform .6s}
#wall .ff{position:absolute;width:5px;height:5px;border-radius:50%;background:#e6ff8a;box-shadow:0 0 10px 3px #d4ff6a88;opacity:0;animation:ff 7s ease-in-out infinite}
@keyframes ff{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.9}50%{transform:translate(18px,-26px)}70%{opacity:.6}}
#screen.flash-on #wall{filter:brightness(1.7) saturate(1.2)}
/* status bar */
#sbar{position:absolute;top:0;left:0;right:0;z-index:55;height:calc(44px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) 26px 0 30px;display:flex;justify-content:space-between;font-size:15px;font-weight:600;letter-spacing:.2px;pointer-events:none;text-shadow:0 1px 4px #0006}
#sbar .sb-r{display:flex;gap:7px;align-items:center}
#sbar .sig{display:inline-flex;gap:2px;align-items:flex-end;height:11px}#sbar .sig i{width:3px;background:#fff;border-radius:1px}
#sb-loc{font-size:11px;color:#fff;transform:rotate(-45deg);display:inline-block}
#sb-flash{font-size:11px;color:var(--warm)}
#bat{display:inline-flex;align-items:center;gap:4px;font-size:13px}
#bat .cell{width:24px;height:12px;border:1.5px solid #fffb;border-radius:4px;padding:1px;position:relative}#bat .cell i{display:block;height:100%;background:#fff;border-radius:2px;transition:width .6s}
#bat.low .cell i{background:var(--red)}#bat.low{color:var(--red)}
/* lock */
#lock{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;padding-top:calc(78px + env(safe-area-inset-top));transition:transform .55s var(--ease),opacity .45s,filter .45s}
#lock.gone{transform:translateY(-12%) scale(1.04);opacity:0;filter:blur(8px);pointer-events:none}
.lk-date{font-size:17px;font-weight:500;color:#e8ecf6cc}
.lk-time{font-size:88px;font-weight:700;letter-spacing:-3px;line-height:1;margin-top:2px;background:linear-gradient(#fff,#cfd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lk-notes{width:calc(100% - 28px);margin-top:22px;display:flex;flex-direction:column;gap:6px}
.lk-note{background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:20px;padding:11px 14px;display:flex;gap:10px;align-items:flex-start;animation:drop .6s var(--ease) both}
.lk-note:nth-child(2){animation-delay:.25s}.lk-note:nth-child(3){animation-delay:.5s}
.lk-note .ni{width:34px;height:34px;border-radius:9px;background:#3a3f4d;display:grid;place-items:center;font-weight:700;flex:none}
.lk-note b{font-size:14px}.lk-note p{font-size:14px;line-height:1.35;color:#e9edf5}.lk-note small{font-size:12px;color:var(--dim);float:right}
@keyframes drop{from{opacity:0;transform:translateY(-16px) scale(.97)}to{opacity:1;transform:none}}
.pat-wrap{margin-top:auto;margin-bottom:calc(54px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:14px}
.pat-tip{font-size:13px;color:#dfe5f2aa;letter-spacing:1px;min-height:18px;transition:color .3s}
.pat-tip.err{color:#ff8a8d}
.pat{position:relative;width:250px;height:250px;touch-action:none}
.pat svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
.pat .dot{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center}
.pat .dot i{width:14px;height:14px;border-radius:50%;background:#ffffffb0;transition:transform .2s,background .2s,box-shadow .2s}
.pat .dot.on i{transform:scale(1.5);background:var(--acc);box-shadow:0 0 18px var(--acc)}
.pat.bad{animation:shake .4s}.pat.bad .dot.on i{background:var(--red);box-shadow:0 0 18px var(--red)}
.pat.ok .dot.on i{background:#fff;box-shadow:0 0 26px #fff}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.smudge{fill:none;stroke:#fff;stroke-width:26;stroke-linecap:round;stroke-linejoin:round;opacity:.035;filter:blur(5px);transition:opacity 1.2s}
.smudge.clear{opacity:.16}
/* home */
#home{position:absolute;inset:0;z-index:10;padding:calc(64px + env(safe-area-inset-top)) 20px 0;display:flex;flex-direction:column;transition:transform .42s var(--ease),filter .42s,opacity .42s}
#home.behind{transform:scale(.9);filter:blur(6px) brightness(.6)}
#home[hidden]{display:none}
.grid{display:grid;grid-template-columns:repeat(4,1fr);row-gap:22px}
.icon{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:#eef1f8;text-shadow:0 1px 3px #0009;position:relative}
.icon.in{animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.4) translateY(30px)}to{opacity:1;transform:none}}
.ico{width:62px;height:62px;border-radius:15px;display:grid;place-items:center;position:relative;box-shadow:0 6px 16px #0006,inset 0 1px 0 #ffffff40;transition:transform .15s}
.icon:active .ico{transform:scale(.88)}
.ico svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--red);color:#fff;font-size:13px;font-weight:600;line-height:22px;text-align:center;box-shadow:0 2px 6px #0005;animation:bump .4s var(--ease)}
@keyframes bump{from{transform:scale(0)}}
.dock{margin-top:auto;margin-bottom:calc(14px + env(safe-area-inset-bottom));padding:15px 16px;border-radius:32px;background:rgba(40,44,58,.45);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);display:grid;grid-template-columns:repeat(4,1fr)}
.dock .icon span.lbl{display:none}
.page-dots{display:flex;justify-content:center;gap:7px;margin:auto 0 12px}.page-dots i{width:7px;height:7px;border-radius:50%;background:#fff5}.page-dots i:first-child{background:#fff}