@font-face{font-family:Fraunces;src:local("Georgia")}
:root{--bk:#0e1726;--bk2:#132035;--bk3:#1a2a44;--ln:#25354f;--tx:#f3f5f8;--mu:#9ca9bc;--mu2:#6a7890;--g1:#ffcfa3;--g2:#f59a6b;--g3:#c9603f;--ok:#8fcaa8;--red:#ec8b7a;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bk);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55;min-height:100%}
body{padding:max(env(safe-area-inset-top),var(--sbt,0px)) 0 max(env(safe-area-inset-bottom),var(--sbb,0px))}
button{font:inherit;color:inherit}
.scr{max-width:520px;margin:0 auto;padding:22px 18px 110px;min-height:100vh;display:flex;flex-direction:column;gap:16px;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.it{font-family:var(--serif);font-style:italic;color:var(--g2)}
.kick{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);font-weight:600}
.mu{color:var(--mu)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,8.5vw,34px);line-height:1.1}
h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:17px;font-weight:600;font-size:17px;cursor:pointer;background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));color:#1a1422;text-align:center;text-decoration:none}
.btn:disabled{opacity:.35}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--ln)}
.btn.small{padding:11px;font-size:15px}
.spacer{flex:1}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand{font-family:var(--serif);font-size:19px}.brand i{color:var(--g2)}
.iconbtn{background:none;border:1px solid var(--ln);border-radius:10px;padding:8px 12px;font-size:14px;color:var(--mu);cursor:pointer}
.opt{background:var(--bk2);border:1px solid var(--ln);border-radius:14px;padding:15px 16px;text-align:left;cursor:pointer;width:100%;display:block}
.opt.sel{border-color:var(--g2);background:#1c2b45}
.opt small{display:block;color:var(--mu);font-size:13px;margin-top:2px}
.opts{display:grid;gap:10px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
input.in{background:var(--bk2);border:1px solid var(--ln);color:var(--tx);border-radius:14px;padding:15px;font-size:16px;width:100%}
.err{color:var(--red);font-size:14px}.err:empty{display:none}
/* shelf */
.shelf{display:grid;gap:12px}
.pc{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;background:var(--bk2);border:1px solid var(--ln);border-radius:18px;padding:10px;cursor:pointer;text-align:left;width:100%}
.pc img{width:92px;height:92px;object-fit:cover;border-radius:12px}
.pc b{display:block;font-family:var(--serif);font-weight:400;font-size:21px}
.pc small{color:var(--mu);font-size:13px;display:block}
.pc .st{font-size:12px;color:var(--g2);font-weight:600;margin-top:6px;display:block}
.pc.on{border-color:var(--g3)}
/* today */
.daynum{font-family:var(--serif);font-size:64px;line-height:1}
.bar{height:5px;background:var(--ln);border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;background:var(--g2)}
.hero{border-radius:18px;overflow:hidden;position:relative;height:150px;background:var(--bk2) center/cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,23,38,.1),var(--bk))}
.hero .in2{position:absolute;left:16px;bottom:14px;z-index:1}
.player{background:var(--bk2);border:1px solid var(--ln);border-radius:18px;padding:14px;display:flex;gap:14px;align-items:center}
.play{width:58px;height:58px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--g1),var(--g2));display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.play svg{width:22px;height:22px;fill:#1a1422}
.prog{height:4px;background:var(--ln);border-radius:2px;margin-top:8px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--g2)}
.task{background:var(--bk2);border:1px solid var(--ln);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;text-align:left;width:100%}
.task.lock{opacity:.4;cursor:default}
.box{width:24px;height:24px;border-radius:7px;border:2px solid var(--mu);flex-shrink:0;margin-top:1px;position:relative;transition:all .2s}
.task.done .box{background:var(--ok);border-color:var(--ok)}
/* check mark is an SVG (.ck) so it can draw in */
.task.pop .box{animation:pop .35s}@keyframes pop{50%{transform:scale(1.35)}}
.task .k{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g2);font-weight:600}
.task .d{font-size:15.5px;margin-top:2px}
textarea.j{display:block;width:calc(100% - 28px);margin:0 14px 14px;background:var(--bk);border:1px solid var(--ln);border-radius:10px;color:var(--tx);padding:10px;font:16px system-ui,sans-serif;resize:none}
.taskwrap{background:var(--bk2);border:1px solid var(--ln);border-radius:14px}.taskwrap .task{border:0;background:transparent}
.note{border-left:3px solid var(--g2);padding:4px 0 4px 12px;font-size:15px}.note b{color:var(--g2)}
.lock-msg{text-align:center;color:var(--mu);font-size:14px}
.safety{border:1px solid var(--ln);border-radius:14px;padding:14px;font-size:14px;color:var(--mu)}.safety b{color:var(--tx)}
.ring{width:150px;height:150px;border-radius:50%;border:4px solid var(--g2);margin:20px auto 0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:70px;color:var(--g1);animation:glow 1.6s ease-out}
@keyframes glow{0%{transform:scale(.6);opacity:0;box-shadow:0 0 0 0 rgba(245,154,107,.7)}60%{transform:scale(1.05);opacity:1}100%{box-shadow:0 0 0 30px rgba(245,154,107,0)}}
.card{background:var(--bk2);border:1px solid var(--ln);border-radius:16px;padding:16px}
.card .t{font-weight:600}.card .m{color:var(--mu);font-size:14px;margin-top:4px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.grid3 .opt{text-align:center;padding:12px}
.big1{font-family:var(--serif);font-size:96px;color:var(--red);text-align:center;line-height:1}
.tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(14,23,38,.96);border-top:1px solid var(--ln);display:flex;justify-content:space-around;padding:8px 0 calc(8px + max(env(safe-area-inset-bottom),var(--sbb,0px)));z-index:10}
.tabs button{background:none;border:0;color:var(--mu);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 14px;cursor:pointer}
.tabs button.on{color:var(--g2)}
.tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.jlist .card{margin-bottom:10px}.jlist .d{font-size:12px;color:var(--g2);font-weight:600;letter-spacing:.08em}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--bk3);border:1px solid var(--ln);padding:10px 16px;border-radius:12px;font-size:14px;z-index:20;animation:fade .3s}

.ringhead{display:flex;align-items:center;gap:16px}
.pring{position:relative;width:108px;height:108px;flex-shrink:0}
.pring svg{width:108px;height:108px}
.pnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:40px}
.ptitle{font-family:var(--serif);font-size:24px;line-height:1.15}
.mapc .top{margin-bottom:12px}
.mdots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.mdots i{aspect-ratio:1;border-radius:50%;background:#243452;display:block}
.mdots i.now{background:transparent;box-shadow:inset 0 0 0 2px #ffcfa3}

/* ---------- motion ---------- */
.task .box .ck{position:absolute;inset:-2px;width:24px;height:24px;fill:none;stroke:var(--bk);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:0}
.task.draw .box .ck{animation:ckdraw .32s .05s ease-out both}
@keyframes ckdraw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
.cf{position:absolute;left:11px;top:11px;width:7px;height:7px;border-radius:2px;pointer-events:none;animation:cf .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cf{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.4);opacity:0}}
.task{position:relative}.task .box{overflow:visible}
.ring.anim{border:0;position:relative;animation:none}
.ring.anim svg{position:absolute;inset:-4px;width:158px;height:158px;transform:rotate(-90deg)}
.ring.anim circle{fill:none;stroke:var(--g2);stroke-width:4;stroke-linecap:round;stroke-dasharray:477;stroke-dashoffset:477;animation:ringdraw 1.2s .15s ease-out forwards}
@keyframes ringdraw{to{stroke-dashoffset:0}}
.ring.anim:after{content:"";position:absolute;inset:-4px;border-radius:50%;animation:ringglow 1.4s 1.2s ease-out}
@keyframes ringglow{0%{box-shadow:0 0 0 0 rgba(245,154,107,.6)}100%{box-shadow:0 0 0 28px rgba(245,154,107,0)}}
.strip{display:flex;gap:8px;justify-content:center;align-items:flex-end;height:34px;margin-top:10px}
.strip i{width:16px;height:16px;border-radius:50%;background:#243452;display:block}
.strip i.drop{animation:drop .7s 1.3s cubic-bezier(.3,1.6,.5,1) both;box-shadow:0 0 12px rgba(255,207,163,.55)}
@keyframes drop{0%{transform:translateY(-34px) scale(.5);opacity:0}100%{transform:none;opacity:1}}
.play{position:relative}
.play:before,.play:after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--g2);opacity:0;pointer-events:none}
.play.playing:before{animation:wave 1.8s ease-out infinite}
.play.playing:after{animation:wave 1.8s .9s ease-out infinite}
.play.playing{box-shadow:0 0 22px rgba(245,154,107,.45)}
@keyframes wave{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.mile{position:fixed;inset:0;z-index:30;background:rgba(14,23,38,.985);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;animation:fade .3s;cursor:pointer}
.mile.out{animation:mileout .35s forwards}@keyframes mileout{to{opacity:0}}
.mile svg{width:110px;height:140px;animation:flick 1.1s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes flick{0%{transform:scale(1) rotate(-2deg)}100%{transform:scale(1.06,1.1) rotate(2deg)}}
.mile .mn{font-family:var(--serif);font-size:88px;line-height:1;color:var(--g1);animation:milepop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes milepop{from{transform:scale(.3);opacity:0}}
.mile .ml{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--g2);font-weight:600}
.scr.calm{animation:fade 1.6s ease}
.scr.calm .big1{animation:fade 1.8s .3s ease both}
.wd{opacity:0;animation:wordin .5s ease forwards}
@keyframes wordin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.wd{opacity:1}.ring.anim circle{stroke-dashoffset:0}.cf{display:none}}
.talktxt p{margin-top:12px;font-family:Georgia,serif;font-size:17px;line-height:1.6}.talktxt:empty{display:none}
.cimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:12px}
.watch{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid var(--ln);background:var(--bk2);border-radius:14px;padding:10px;color:var(--tx);cursor:pointer}
.watch .wthumb{position:relative;flex:none;width:54px;height:96px;border-radius:9px;background:#0b1220 center/cover;display:grid;place-items:center}
.watch .wthumb i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2))}
.watch .wthumb svg{width:16px;height:16px;fill:#1a1422;margin-left:2px}
.watch b{display:block;font-size:15.5px}.watch small{display:block;color:var(--mu);font-size:13px;margin-top:3px;line-height:1.35}
.vov{position:fixed;inset:0;z-index:50;background:rgba(5,8,16,.94);display:flex;align-items:center;justify-content:center;padding:calc(var(--sbt,0px) + 14px) 14px calc(var(--sbb,0px) + 14px)}
.vov video{max-width:100%;max-height:100%;aspect-ratio:9/16;border-radius:14px;background:#000}
.vov .vclose{position:absolute;top:calc(var(--sbt,0px) + 12px);right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}